products/uni-shop/layout/layout-ui-shop-item/main.vue

<template>
  <view class="shop-item row" @click="triggerGoDetail">
    <view class="layout-shop-image relative overflow">
      <v-image  :src="item.image" class="screen_all"></v-image>
    </view>
    <view class="flex-all-1 flex shop-item-content overflow">
      <view class="shop-item-title line-2"
        :class="[periods>0?'line-1':'line-2',periods>0?'shop-item-title-1':'']"
      >{{item.title || ''}}</view>
      <view v-if="periods>0" class="shop-item-label center">周期购</view>
      <view class="flex-all-1"></view>
      <view class="row aCenter">
        <view class="flex-all-1 row aCenter">
          <text class="shop-price-group"><text class="shop-price-em">¥</text><text>{{item.price || ''}}</text></text>
          <text v-if="periods>0" class="row aCenter shop-periods shop-close-container">
            <text class="iconfont-close iconfont shop-close"></text>
            <text>{{ periods }}期</text>
          </text>
        </view>
        <text v-if="number" class="row aCenter shop-close-container">
          <text class="iconfont-close iconfont shop-close"></text>
          <text>{{ item.number || 1 }}</text>
        </text>
      </view>
    </view>
  </view>
</template>

<script>
import vImage from '@/components/v-image/main.vue';
import { mapState } from 'vuex';
import props from './props';
import shop from '@/utils/controls/shop';
export default {
  name: "layout-ui-shop-item",
  computed:{
    ...mapState(['config'])
  },
  props,
  components:{
    vImage
  },
  methods:{
    triggerGoDetail(){
      if (this.goDetail) {
        return shop.goShopDetail(this.item);
      }
    }
  }
}
</script>

<style scoped lang="scss" src="./style.scss"></style>