kxmall-ui/kxmall-app-ui/pages/index/components/recommend.vue

<template>
  <view>
    <view v-if="salesTop.length > 0 && storage&&showBanner" class="bg-white padding-tb-sm margin-top-sm"
      @click="naviageToPage('/pages/parity/parity?title=热卖推荐&id=11')" :class="{'padding-lr':showStyle!=='0px'}">
      <image :src="imgUrl" :mode="imgStyle==='cover'?'aspectFill':'scaleToFill'" style="width: 100%;height: 210rpx;">
      </image>
    </view>
    <view style="padding: 20rpx 12rpx 20rpx 30rpx;">
      <view v-if="salesTop.length > 0  && storage" class="flex" :class="{'flex-wrap':!scroll}"
        :style="{overflowX:scroll?'auto':'hidden'}">
        <view v-for="(item,index) in salesTop" :key="index"
          class="margin-bottom-sm bg-white flex align-center justify-center flex-direction"
          style="width: 335rpx;height: 520rpx;padding: 10rpx;margin-right: 18rpx;border-radius: 8rpx;"
          @click="navToDetailPage(item.productId)">
          <image style="width: 280rpx;height: 280rpx;margin: 10rpx;" :src="JSON.parse(item.img)[0].url"
            mode="aspectFit"></image>
          <view style="padding-top: 28rpx;">
            <view class="text-cut"
              style="width: 294rpx;height: 40rpx;font-size: 28rpx;font-weight: Medium; color: #2D4454;">{{item.title}}
            </view>
            <view class="text-cut margin-tb-xs" style="width: 294rpx;height: 40rpx;font-size: 28rpx;color: #999999;">
              {{item.storeInfo}}
            </view>
            <view style="padding-top: 6rpx;" class="flex align-center justify-between">
              <view style="width: 114rpx;height: 42rpx;line-height: 42rpx;font-size: 24rpx;color:#F62929;">
                ￥{{item.price}}</view>
              <view style="color: #B0B0B0;font-size: 24rpx;">{{item.unitName}}/份</view>

              <image @click.stop="addCart(item)" style="width: 48rpx;height: 48rpx;"
                src="../../../static/index/cart.png" mode="aspectFit" class="round"></image>
            </view>
          </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
  export default {
    name: 'Recommend',
    props: ['storage', 'salesTop', 'options'],
    computed: {
      showBanner() {
        return this.options.banner.show
      },
      imgUrl() {
        const {
          imgUrl
        } = this.options.banner
        if (imgUrl) {
          return JSON.parse(imgUrl)[0].url
        } else {
          return require('../../../static/index/command.png')
        }
      },
      showStyle() {
        return this.options.banner.showStyle
      },
      imgStyle() {
        return this.options.banner.imgStyle
      },
      scroll() {
        return this.options.scroll
      }
    },
    methods: {
      naviageToPage(url, title) {
        this.$emit('naviage-to-page', url, title)
      },
      navToDetailPage(id) {
        this.$emit('nav-to-detail-page', id)
      },
      addCart(item) {
        this.$emit('add-cart', item)
      }
    }
  }
</script>


<style scoped lang="scss">

</style>