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 v-if="list.length" class="list">
      <view class="list-item" v-for="item in list" :key="item.id">
        <view class="cover">
          <image class="img" :src="item.image" mode="aspectFill"></image>
        </view>
        <view class="info">
          <view class="title text-ellipsis-2">{{ item.title }}</view>
          <view class="desc">{{ item.createTime }}</view>
        </view>
      </view>
    </view>
    <template v-else>
      <uv-empty mode="list"></uv-empty>
    </template>

  </view>
</template>

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

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

  export default {
		mixins: [mixinsList],
		components: {
      sortBar,
      recordsView,
    },
    data() {
      return {
        title: '搜索',
				keyword: '',
				isFocusSearch: false,
				queryParams: {
					pageNo: 1,
					pageSize: 10,
					title: '',
				},
        // todo
        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()
      },
    },
  }
</script>

<style scoped lang="scss">

	.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;
		}

    &.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 {
      column-gap: 16rpx;

      & + & {
        margin-top: 40rpx;
        padding: 24rpx;
        background: #F9F9F9;
        border: 2rpx solid #FFFFFF;
        border-radius: 24rpx;
      }

      .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>