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

<template>
  <view>
    <view v-if="cheapRecommend.length > 0 && storage&&showBanner"
      @click="naviageToPage('/pages/parity/parity?title=今日特价&id=1')"
      :style="{'padding-left': showStyle!=='0px'?'30rpx':0,'padding-right': showStyle!=='0px'?'26rpx':0}">
      <image :src="imgUrl" :mode="imgStyle==='cover'?'aspectFill':'scaleToFill'" style="width: 100%;height: 94rpx;">
      </image>
    </view>
    <scroll-view :scroll-x="scroll" :scroll-y="!scroll" style="width: 750rpx;">
      <view v-if="cheapRecommend.length > 0  && storage" class="flex padding-left-sm padding-top-sm">
        <view v-for="(item,index) in cheapRecommend" :key="index"
          class="margin-lr-xs bg-white flex align-center justify-center flex-direction"
          style="width: 200rpx;height: 340rpx;padding: 5rpx;border: 8rpx;" @click="navToDetailPage(item.productId)">
          <image style="width: 186rpx;height: 172rpx" :src="JSON.parse(item.img)[0].url" mode="aspectFit"></image>
          <view style="padding-top: 28rpx;">
            <view class="text-2-cut" style="width: 182rpx;height: 68rpx;font-size: 24rpx;color: #2D4454;">
              {{item.title}}
            </view>
            <view style="padding-top: 6rpx;padding-bottom: 14rpx;" class="flex align-center justify-between">
              <view style="width: 114rpx;height: 42rpx;line-height: 42rpx;font-size: 24rpx;color:#F62929;">
                ￥{{item.price}}</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>
    </scroll-view>
  </view>
</template>

<script>
  export default {
    name: 'Special',
    props: ['storage', 'cheapRecommend', '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/bought.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>