studytour-front/pages_order/article/search.vue

<template>
  <view class="page__view highlight">

    <!-- 导航栏 -->
		<navbar :title="title" leftClick @leftClick="$utils.navigateBack" bgColor="transparent" color="#191919" />

    <!-- 搜索栏 -->
    <view :class="['flex', 'search', isFocusSearch ? 'is-focus' : '']" >
      <uv-search 
        v-model="keyword" 
        placeholder="请输入要查询的内容" 
        color="#181818"
        bgColor="transparent" 
        :showAction="isFocusSearch"
        @custom="search" 
        @search="search"
        @focus="isFocusSearch = true"
        @blur="isFocusSearch = false"
      >
        <template #prefix>
          <image class="search-icon" src="/static/image/icon-search-dark.png" mode="widthFix"></image>
        </template>
      </uv-search>
    </view>

    <view class="list">
      <template v-if="total">
        <view class="flex list-item" v-for="item in list" :key="item.id" @click="jumpToDetail(item.id)">
          <view class="cover">
            <image class="img" :src="item.image" mode="aspectFill"></image>
          </view>
          <view class="info">
            <view class="title">{{ item.title }}</view>
            <view class="desc">{{ item.createTime }}</view>
          </view>
        </view>
      </template>
      <template v-else>
        <uv-empty mode="list"></uv-empty>
      </template>
    </view>
  </view>
</template>

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

	import recordsView from '@/components/growing/recordsView.vue'

  export default {
		mixins: [mixinsList],
		components: {
      recordsView,
    },
    data() {
      return {
        title: '搜索',
				keyword: '',
				isFocusSearch: false,
				queryParams: {
					pageNo: 1,
					pageSize: 10,
					title: '',
				},
        mixinsListApi: '',
      }
    },
    onLoad({ title, api }) {
      this.title = title
      this.mixinsListApi = api
      
      this.getData()
    },
    methods: {
      search() {
        this.queryParams.pageNo = 1
        this.queryParams.pageSize = 10
				this.queryParams.title = this.keyword
        this.getData()
      },
      jumpToDetail(id) {
        let api
        let idKey

        switch(this.mixinsListApi) {
          case 'queryNewsList':
            api = 'queryNewsById',
            idKey = 'newsId'
            break
          case 'queryPolicyList':
            api = 'queryPolicyById',
            idKey = 'policyId'
            break
          case 'queryJournalList':
            api = 'queryJournalById',
            idKey = 'journalId'
            break
          default:
            break
        }
        
        uni.navigateTo({
           url: `/pages_order/article/index?api=${api}&id=${id}&idKey=${idKey}`
        })
      },
    },
  }
</script>

<style scoped lang="scss">

  .page__view {
    background: linear-gradient(#DAF3FF, #FBFEFF 250rpx, #FBFEFF);
  }

	.search {
		$h: 64rpx;
		$radius: 32rpx;
		$borderWidth: 4rpx;

    margin: 24rpx 32rpx 0 32rpx;
    width: calc(100% - 32rpx * 2);
		height: $h;
		position: relative;
		border-radius: $radius;

		&-icon {
			margin: 0 13rpx 0 26rpx;
			width: 30rpx;
			height: auto;
		}

		/deep/ .uv-search__content {
			padding: 12rpx 0;
      background: #FFFFFF !important;
      border-color: #CFEFFF !important;
			border: 4rpx solid transparent;
		}

    &.is-focus {
      /deep/ .uv-search__action {
        padding: 19rpx 24rpx;
        font-size: 26rpx;
        font-weight: 500;
        line-height: 1;
        color: #FFFFFF;
        background: #00A9FF;
        border-radius: 32rpx;
      }
    }
  }

  .list {
    margin-top: 24rpx;
    padding: 12rpx 40rpx;

    &-item {
      align-items: flex-start;
      column-gap: 16rpx;
      padding: 24rpx;
      background: #F9F9F9;
      border: 2rpx solid #FFFFFF;
      border-radius: 24rpx;

      & + & {
        margin-top: 40rpx;
      }

      .cover {
        width: 152rpx;
        height: 152rpx;
        border-radius: 8rpx;
        overflow: hidden;
        border: 2rpx solid #E6E6E6;

        .img {
          width: 100%;
          height: 100%;
        }
      }

      .info {
        flex: 1;

        .title {
          font-size: 28rpx;
          font-weight: 500;
          color: #000000;
        }

        .desc {
          margin-top: 8rpx;
          font-size: 24rpx;
          color: #8B8B8B;
        }
      }
    }
  }

</style>