mall_client/zyhs3_uniapp/pages/home/modules/goodsItem.vue

<style lang="scss">
@import "@/font.css";

.goods_item {
  width: 342rpx;
  position: relative;
  box-shadow: 0px 1rpx 3rpx 0px rgba(156, 156, 156, 0.2);
  border-radius: 18rpx;
  margin-bottom: 10rpx;
  min-height: 468rpx;

  .goods_image {
    width: 100%;
    height: 330rpx;
    border-radius: 10rpx 10rpx 0 0;
  }

  .goods_name {
    font-size: 26rpx;
    color: #333333;
    margin-left: 18rpx;
    margin-top: 10upx;
    display: flex;
    align-items: center;
  }

  .goods_price {
    font-family: 'Product-Sans-Bold';
    padding-left: 10rpx;
    padding-bottom: 10rpx;
    align-items: center !important;
    color: #E40000;

    image {
      width: 32rpx;
      height: 32rpx;
    }

    .price1 {
      color: #E40000;
      font-weight: 600;
      font-size: 38rpx;

      span {
        font-size: 22rpx;
        position: relative;
        top: 2rpx;
      }
    }

    .price2 {
      color: #A7A7A7;
      font-size: 18rpx;
      font-weight: bold;
      margin-left: 12rpx;
      text-decoration: line-through;
      position: relative;
      top: 2rpx;

      span {
        text-decoration: none;
        font-size: 12rpx;
      }
    }
  }
}

.goods_item {
  .annual-tag {
    background-color: #ff4d4f;
    color: #fff;
    font-size: 18rpx;
    padding: 0 6rpx;
    border-radius: 10rpx;
    margin-left: 10rpx;
    line-height: 1.5;
  }
}

.xfz_box {
  position: absolute;
  right: 5px;
  top: 5px;
}

.bg {
  padding: 0 10rpx;
  background-color: rgba(255, 59, 71, 0.2);
  color: #E40000;

}

.goods_item_list {
  width: 100% !important;
  display: flex;
  min-height: auto;

  .goods_image {
    width: 200rpx;
    height: 200rpx;
    border-radius: 0;

  }

  .goods_info {
    width: 450rpx;

    .goods_name {
      padding-right: 20rpx;
      padding-top: 20rpx;
      white-space: pre-wrap;
      text-transform: none;
    }

    .annual-tag {
      background-color: #ff4d4f;
        color: #fff;
        font-size: 18rpx;
        padding: 0 6rpx;
        border-radius: 10rpx;
        margin-left: 10rpx;
        line-height: 1.5;
    }

    .ratio {
      justify-content: start;
      margin-left: 20rpx;

      .bg {
        margin-right: 20rpx;
      }
    }
  }
}
</style>
<template>
  <view class="goods_item bg-w" :class="[listStyle == 'list' ? 'goods_item_list' : '']" @tap="jumpTo"
    :style="{ width: listType == 'goods' ? '350rpx' : '370rpx' }">
    <image class="goods_image" :src="filterImg(dataItem.mainImage)" mode=""></image>
    <view class="xfz_box" :class="[listStyle == 'list' ? '' : '']" v-if="listStyle != 'list'">
      <!-- <u-tag class="mr-3 ml-3" :text="`比例 : ${dataItem.ratio} `" size="mini" type="warning" v-if="dataItem.xfz"></u-tag> -->
    </view>
    <view class="goods_info">
      <view class="goods_name">
        {{ dataItem.titleName }}
        <view v-if="dataItem.annualCard === 1" class="annual-tag">年卡</view>
      </view>
      <u-gap :height="listType == 'goods' ? '10rpx' : '10rpx'"></u-gap>

      <view class="goods_price flex flex-align-center" v-if="goodsType != 3">
        <!-- <image src="../../../static/images/home/ic_cn.png"></image> -->
        <text class="text-xs">¥</text>
        <view class="price1 flex flex-align-center flex-align-end">
          {{ dataItem.wholesalePrice }} <span>.00</span>
        </view>

        <view class="flex font24">
          <!-- <u-tag class="ml-10" :text="`贡献值 : ${dataItem.xfz} `" size="mini" type="error"></u-tag> -->
         <!-- <u-tag class="mr-3 ml-3" :text="`比例 : ${dataItem.ratio} `" size="mini" type="warning"
            v-if="listStyle == 'list'"></u-tag> -->

        </view>
        <!-- <view class="price2 flex flex-align-end">
					¥1560 <span>.00</span>
				</view> -->
      </view>
      <view class="goods_price " v-else>
        <view class="flex flex-align-end color-e40000 mb-5">
          <u-tag :text="`绿色积分 : ${greenText} `" size="mini" plain plainFill type="success"></u-tag>

        </view>
        <view>
          <view class="goods_price flex flex-align-center">
            <view class=" flex flex-align-center">
              <!-- <image src="../../../static/images/home/ic_cn.png"></image> -->
              <text class="text-xs">¥</text>
              <view class="price1 flex flex-align-center flex-align-end">
                {{ dataItem.wholesalePrice }} <span>.00</span>
              </view>
              <view class="flex font24">
                <u-tag class="ml-10" :text="`贡献值 : ${dataItem.xfz} `" size="mini" type="error"
                  v-if="dataItem.xfz"></u-tag>
                <u-tag :text="`比例 : ${dataItem.ratio} `" size="mini" type="warning" v-show="listType == 'list'"></u-tag>
              </view>
            </view>
          </view>
        </view>

        <!-- <view class="flex flex-align-end color-e40000 font24">
          <text class="font24">
            <text style="margin: 0 2rpx;">+</text>
            ¥
          </text>
          <text class="font26">{{ ((dataItem.paymentRmb / 100 * dataItem.wholesalePrice)).toFixed(2) }}</text>
        </view> -->

      </view>

      <u-gap height="20rpx"></u-gap>
    </view>
  </view>
</template>

<script>
import publics from "@/common/utils/public.js"
export default {
  props: {
    dataItem: {
      type: Object,
      default: () => { }
    },
    listType: {
      type: String,
      default: 'goods'
    },
    listStyle: {
      type: String,
      default: 'class'
    },
    goodsType: {
      type: String,
      default: ''
    },
    greenPrice: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      greenText: 0,
      rmbText: 0
    }
  },
  mounted () {
    if (this.goodsType == 3) {
      this.getGreenCount();
      this.getRmbText();
    }
  },
  methods: {
    getGreenCount () {
      console.log('this.dataItem.paymentRmb', this.dataItem.paymentRmb)
      // {{(((100-dataItem.paymentRmb)/100*dataItem.wholesalePrice)/greenPrice).toFixed(6)}}
      this.greenText = ((100 - this.dataItem.paymentRmb) / 100 * this.dataItem.wholesalePrice / this.greenPrice).toFixed(6)
    },
    getRmbText () {
      this.rmbText = (this.dataItem.paymentRmb / 100 * this.dataItem.wholesalePrice).toFixed(2)
    },
    jumpTo (item) {

      this.$navigateTo('/pages/home/details?id=' + this.dataItem.id + '&qvyu=' + this.goodsType + '&greenText=' + this.greenText + '&rmbText=' + this.rmbText)
    },
    filterImg (img) {
      return publics.filterImgUrl(img, 3)
    }
  }
}
</script>