education-front/pages_order/thesis/search.vue

<template>
  <view class="page__view">
    
		<!-- 导航栏 -->
		<navbar :title="title" leftClick @leftClick="$utils.navigateBack" />
    
    <view class="top">
      <!-- 搜索栏 -->
      <view class="search">
        <uv-search v-model="keyword" :showAction="false" placeholder="输入关键词搜索" placeholderColor="#B2B2B2" bgColor="#FFFFFF" @custom="search" @search="search">
          <template #prefix>
            <view class="flex search-icon">
              <image class="img" src="@/static/image/icon-search.png" mode="widthFix"></image>
            </view>
          </template>
        </uv-search>
      </view>
    </view>

    <view class="main">
      <template v-if="total">
        <view class="card" v-for="item in list" :key="item.id">
          <thesisCard :data="item" @jumpToDetail="jumpToDetail(item.id)"></thesisCard>
        </view>
      </template>
      <template v-else>
        <view class="flex empty">
          <image class="empty-icon" src="@/static/image/icon-empty.png" mode="widthFix"></image>
        </view>
      </template>
    </view>

  </view>
</template>

<script>
	import mixinsList from '@/mixins/list.js'

  import thesisCard from './thesisCard.vue'

  export default {
		mixins: [mixinsList],
    components: {
      thesisCard,
    },
    data() {
      return {
        title: '搜索',
				keyword: '',
				queryParams: {
					pageNo: 1,
					pageSize: 10,
					title: '',
				},
        mixinsListApi: 'queryThesisList',
      }
    },
    onLoad({ search, categoryOne, categoryTwo, title, api }) {
      if (search) {
        this.keyword = search
				this.queryParams.title = search
			}
      if (categoryTwo) {
				this.queryParams.categoryOne = categoryOne
				this.queryParams.categoryTwo = categoryTwo
			}
      if (title) {
        this.title = title
      }
      if (api) {
        this.mixinsListApi = api
      }
      
      this.getData()
    },
    methods: {
      search() {
        this.queryParams.pageNo = 1
        this.queryParams.pageSize = 10
				this.queryParams.title = this.keyword
        this.getData()
      },
      jumpToDetail(thesisId) {
        let path = this.mixinsListApi == 'queryThesisList' ? '/pages_order/thesis/index' : '/pages_order/thesis/indexTwo'

        uni.navigateTo({
					url: `${path}?thesisId=${thesisId}`
				})
      },
    },
  }
</script>

<style scoped lang="scss">

  .page__view {
    background: $uni-bg-color-grey;
  }

  .top {
    padding: 34rpx 38rpx 28rpx 38rpx;
    box-sizing: border-box;
  }

	.search {
    width: 100%;
    // width: calc(100% - 38rpx * 2);
    height: 48rpx;
		background-color: #FFFFFF;
		border-radius: 37rpx;
    box-sizing: border-box;
		display: flex;
		align-items: center;
    overflow: hidden;
    box-shadow: 2rpx 2rpx 9rpx 0 rgba($color: #C5C5C5, $alpha: 0.75);

		/deep/ .uv-search__content {
      padding: 0;
      border: none;
    }

    /deep/ .uv-search__content__input {
      margin-left: 18rpx;
    }

    &-icon {
      padding: 18rpx 10rpx 18rpx 18rpx;
      background: rgba($color: #E8DBF3, $alpha: 0.8);

      .img {
        width: 30rpx;
        height: auto;
      }
    }
	}

  .main {
    padding: 0 38rpx 38rpx 38rpx;
    box-sizing: border-box;
  }

  .card {
    background: #FFFFFF;
    border-radius: 10rpx;
    box-shadow: 4rpx 4rpx 6rpx 0rpx rgba(0,0,0,0.15); 
    overflow: hidden;
    
    & + & {
      margin-top: 26rpx;
    }

  }
  
  .empty {
    margin-top: 165rpx;
  }

</style>