education-front/pages_order/serve/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" placeholder="输入关键词搜索" bgColor="#FBFBFB" @custom="search" @search="search">
          <template #prefix>
            <image class="search-icon" src="@/static/image/icon-search.png" mode="widthFix"></image>
          </template>
        </uv-search>
      </view>
    </view>

    <view class="list">
      <view class="list-item"
        v-for="item in list" 
        :key="item.id"
        @click="jumpToDetail(item.id, item.title)"
      >
        <image class="list-item-bg" :src="item.image" mode="scaleToFill"></image>
      </view>
    </view>
  </view>
</template>

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

  export default {
		mixins: [mixinsList],
    data() {
      return {
        title: '搜索',
				keyword: '',
				queryParams: {
					pageNo: 1,
					pageSize: 10,
          categoryId: '',
					title: '',
				},
        mixinsListApi: 'queryServiceArticleList',
      }
    },
    onLoad(arg) {

      const { categoryId, title } = arg

      this.title = title

      this.queryParams.categoryId = categoryId

      this.getData()
    },
    methods: {
      search() {
        this.queryParams.pageNo = 1
        this.queryParams.pageSize = 10
				this.queryParams.title = this.keyword
        this.getData()
      },
      jumpToDetail(articleId) {
        uni.navigateTo({
					url: `/pages_order/serve/index?articleId=${articleId}`
				})
      },
    },
  }
</script>

<style scoped lang="scss">

  .top {
    padding: 49rpx 0 17rpx 0;
    box-sizing: border-box;
  }

	.search {
    margin: 0 19rpx;
    width: calc(100% - 20rpx * 2);
		background-color: #FFFFFF;
		border-radius: 37rpx;
		padding: 13rpx 0 13rpx 18rpx;
    box-sizing: border-box;
		display: flex;
		align-items: center;

		/deep/ .uv-search__action {
			color: $uni-color;
			padding: 10rpx 18rpx;
		}

    &-icon {
      width: 26rpx;
      height: auto;
    }
	}

  .list {
    margin: 0 18rpx;

    &-item {
      position: relative;
      font-size: 0;
      border-radius: 25rpx;
      overflow: hidden;
      box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0,0,0,0.16);

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

      &-bg {
        $w: calc(100vw - 18rpx*2);
        width: $w;
        height: calc(#{$w} * 179 / 714);
      }

    }
  }

</style>