jichuangshe/mini/pages/product/index.vue

<template>
  <page-loading :loading="loading">
    <view class="product-page">
      <view class="logo logo-black" />
      <u-search
        v-model="keywords"
        placeholder="搜索产品"
        :show-action="false"
        shape="square"
        bg-color="#fff"
        border-color="#ccc"
        height="84rpx"
        @search="handleSearch"
      />
      <view
        class="product-list dir-left-wrap"
      >
        <view
          v-for="(item,index) in lists"
          :key="index"
          class="product-item main-left"
          @click="$u.route({url: `/pages/product/detail?id=${item.id}`})"
        >
          <view class="detail dir-top-wrap">
            <text>热销品类排名</text>
            <view class="name"> {{ item.name }}</view>
          </view>
          <view class="cover-img">
            <image :src="item.cover_img" mode="aspectFill" />
          </view>
        </view>
      </view>
    </view>
  </page-loading>
</template>

<script>
import PageLoading from '../../components/PageLoading'
export default {
  name: 'Product',
  components: { PageLoading },
  data() {
    return {
      loading: false,
      keywords: '',
      limit: 3,
      lists: []
    }
  },
  computed: {},
  methods: {
    handleSearch() {
      this.$u.route({ url: `/pages/product/list?keywords=${this.keywords}` })
    },
    getLists() {
      this.$api.product.search({
        limit: this.limit,
        page: this.page
      }).then(res => {
        this.loading = false
        this.lists = res.data
      })
    }
  },
  onLoad() {
    this.loading = true
    this.getLists()
  },
  onShow() {
    this.getLists()
  }
}
</script>

<style lang="scss" scoped>
.product-page {
  padding: 0 30rpx;
  overflow: hidden;
  height: 100vh;
  .logo{
    margin: 30rpx auto;
  }
  .product-list{
    margin-top: 40rpx;
    .product-item{
      width: 690rpx;
      margin-bottom: 10rpx;
      &:last-child{
        margin-bottom: 0;
      }
      .detail{
        padding: 50rpx 0 20rpx 50rpx;
        font-size: 24rpx;
        color: #333333;
        background: #F2F2F2;
        flex: 1;
        text{
          color: #b4936d;
        }
        .name{
          margin-top: 16rpx;
          font-size: 42rpx;
        }
      }
      .cover-img{
        width: 355rpx;
        height: 250rpx;
        image{
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>