xdd-uniapp-new/components/xdd-product-item/index.vue

<template>
  <view class="xdd-product-item" @click="viewHandle(item)">
    <view class="focus-img">
      <image
        v-if="!item.isFarmerShop"
        :src="item[imageKey]"
        class="img"
      />
      <image 
        :src="item.farmerShopCover" 
        v-if="item.farmerShopCoverType === 1 && item.isFarmerShop" 
        class="img" 
        mode="heightFix|widthFix">
      </image>
      <video 
        :src="item.farmerShopCover" 
        v-if="item.farmerShopCoverType !== 1 && item.isFarmerShop" 
        :show-center-play-btn="false" 
        :show-fullscreen-btn="false" 
        :show-play-btn="false" 
        class="img"  
        :poster="item.farmerShopCover + '?vframe/jpg/offset/1'">
      </video>
      <image
        v-if="item.isOldBrand"
        :src="webUrl + '/home/old-mark.png'"
        class="mark-img"
      />
      <image
        v-if="item.isLandmarkGoods"
        :src="webUrl + '/home/mark-land.png'"
        class="mark-img"
        style="right: 20rpx"
      />
      <image
        v-if="item.isCountyFamous"
        :src="webUrl + '/home/qixian-mark.png'"
        class="mark-img"
      />
      <image
        v-if="item.isFarmerShop"
        :src="webUrl + '/orderIcon/nm.png'"
        class="mark-img-nm"
      />
    </view>
    <view v-if="item.isFarmerShop" class="more-t v12-pt-2 v12-font-bold  v12-font-28 v12-px-2" >{{ item.farmerShopContent }}</view>
    <view class="info-wrap" v-if="!item.isFarmerShop">
      <view class="name more-t">
        {{ item[nameKey] }}
      </view>
      <view v-if="item.bestContent" class="desc more-t">
        {{ item.bestContent }}
      </view>
      <view v-if="item.couponName && showCoupon" class="coupon">
        <view class="tag">券</view>
        <view class="tag">{{ item.couponName }}</view>
      </view>
      <view class="price-wrap">
        <view class="price">
          <text class="price-txt price-red">￥{{ item[priceKey] }}</text>
        </view>
        <view class="btn" @click.stop="$emit('add', item)">
          <image
            :src="webUrl + '/home/icon-cart.png'"
            class="img"
          />
        </view>
      </view>
    </view>
    <view 
      v-if="item.isFarmerShop" 
      class="v12-justify-start v12-align-center v12-pt-2 v12-px-2 v12-pb-2">
      <view class="btn v12-mr-2">
        <image :src="item.farmerShopLogo" class="nm-img-logo v12-radius-100"></image>
      </view>
      <view class="one-t v12-font-24 v12-dark1-text" style="width:230rpx">{{ item.farmerShopName }}/{{ item.farmerShopCityName || '-' }}</view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'XddProductItem',
  props: {
    item: {
      type: Object,
      default: () => {
        return {}
      }
    },
    imageKey: {
      type: String,
      default: 'image'
    },
    nameKey: {
      type: String,
      default: 'storeName'
    },
    priceKey: {
      type: String,
      default: 'price'
    },
    // 是否显示优惠券
    showCoupon: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      webUrl: this.$VUE_APP_RESOURCES_URL
    }
  },
  methods: {
    viewHandle(item) {
      this.$emit('view', item)
    }
  }
}
</script>

<style lang="less">
.nm-img-logo {
  display: block;
  width: 48rpx;
  height: 48rpx;
}
.mark-img-nm{
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0 25rpx 0 0;
}
.xdd-product-item {
  border-radius: 20rpx;
  background-color: #fff;
  overflow: hidden;
  .focus-img {
    position: relative;
    .img {
      position: relative;
      z-index: 2;
      display: block;
      width: 345rpx;
      height: 345rpx;
      border-radius: 20rpx;
    }
    .mark-img {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 3;
      display: block;
      width: 84rpx;
      height: 74rpx;
    }
  }
  .info-wrap {
    padding: 12rpx;
    .name {
      font-size: 28rpx;
      line-height: 40rpx;
      color: #333;
    }
    .desc {
      width: 320rpx;
      padding: 10rpx 0 0 0;
      color: #FFC543;
      font-size: 24rpx;
    }
    .coupon {
      display: flex;
      padding: 10rpx 0 0 0;
      .tag + .tag {
        margin: 0 0 0 -1rpx;
      }
      .tag {
        height: 32rpx;
        padding: 0 6rpx;
        border-radius: 8rpx;
        border: 1rpx solid #C52733;
        color: #C52733;
        line-height: 32rpx;
        font-size: 10px;
      }
    }
    .price-wrap {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      padding: 10rpx 0 0 0;
      .price {
        font-size: 24rpx;
        line-height: 40rpx;
        .price-txt {
          font-size: 40rpx;
          font-weight: bold;
        }
      }
      .price-red {
        margin: 0 10rpx 0 0;
        color: #C52733;
      }
      .price-grey {
        color: #C4C4C4;
      }
      .btn {
        .img {
          display: block;
          width: 48rpx;
          height: 48rpx;
        }
      }
    }
  }
}
</style>