pifa/components/page/diyComponents/groupon/index.vue

<template>
  <!-- 拼团商品组 -->
  <view class="diy-groupon"
    :style="{ background: itemStyle.background, padding: `${itemStyle.paddingY * 2}rpx ${itemStyle.paddingX * 2}rpx` }">
    <view class="goods-item--container" v-for="(goods, idx) in dataList" :key="idx"
      :style="{ marginBottom: `${itemStyle.itemMargin * 2}rpx` }">
      <view class="goods-item" @click="onTargetGoods(goods)"
        :class="[`display-${itemStyle.display}`, `border-${itemStyle.itemBorderRadius}`]">
        <!-- 商品图片 -->
        <view class="goods-item-left">
          <view v-if="goods.active_type != ActiveTypeEnum.NORMAL.value" class="label">
            <text>{{ ActiveTypeEnum[goods.active_type].name2 }}</text>
          </view>
          <image class="image" :src="goods.goods_image"></image>
        </view>
        <view class="goods-item-right">
          <!-- 商品标题 -->
          <view v-if="inArray('goodsName', itemStyle.show)" class="goods-name">
            <text class="twoline-hide">{{ goods.goods_name }}</text>
          </view>
          <!-- 商品信息 -->
          <view class="goods-item-desc">
            <view class="desc_situation">
              <view class="state-tag">
                <u-tag v-if="inArray('peoples', itemStyle.show)" :color="appTheme.mainBg" :border-color="appTheme.mainBg"
                  :text="`${goods.show_people}人团`" type="error" size="mini" mode="plain" />
              </view>
              <view class="state-tag">
                <u-tag v-if="inArray('activeSales', itemStyle.show) && goods.active_sales" :color="appTheme.mainBg"
                  :border-color="tagBorderColor" :bg-color="tagBackgroundColor" :text="`已团${goods.active_sales}件`" type="error"
                  size="mini" />
              </view>
            </view>
            <view class="desc-footer">
              <view class="item-prices oneline-hide">
                <text v-if="inArray('grouponPrice', itemStyle.show)" class="price-x">¥{{ goods.groupon_price }}</text>
                <text v-if="inArray('grouponPrice', itemStyle.show)" class="price-y cl-9">¥{{ goods.original_price }}</text>
              </view>
              <view v-if="inArray('button', itemStyle.show)" class="settlement">去拼团</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { inArray } from '@/utils/util'
  import { hex2rgba } from '@/utils/color'
  import mixin from '../mixin'
  import { ActiveTypeEnum } from '@/common/enum/groupon'

  export default {
    components: {},
    mixins: [mixin],
    props: {
      itemIndex: String,
      itemStyle: Object,
      params: Object,
      dataList: Array
    },
    data() {
      return {
        inArray,
        ActiveTypeEnum
      }
    },
    computed: {
      // 标签背景色
      tagBackgroundColor() {
        return hex2rgba(this.appTheme.mainBg, 0.1)
      },
      // 标签边框颜色
      tagBorderColor() {
        return hex2rgba(this.appTheme.mainBg, 0.6)
      }
    },
    /**
     * 组件的方法列表
     * 更新属性和数据的方法与更新页面数据的方法类似
     */
    methods: {

      // 跳转到拼团商品详情
      onTargetGoods(item) {
        this.$navTo('pages/groupon/goods/index', { grouponGoodsId: item.groupon_goods_id })
      },

    }

  }
</script>

<style lang="scss" scoped>
  .diy-groupon {

    .goods-item--container {
      margin-bottom: 20rpx;

      &:last-child {
        margin-bottom: 0 !important;
      }
    }

    .goods-item {
      padding: 28rpx 24rpx;
      display: flex;
      background: #fff;
      box-sizing: border-box;

      &.display-card {
        box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.07);
      }

      &.border-round {
        border-radius: 14rpx;
      }
    }

    .goods-item-left {
      position: relative;
      background: #fff;
      margin-right: 20rpx;

      .label {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        background: linear-gradient(to right, #ffa600, #f5b914);
        color: #fff;
        font-size: 24rpx;
        padding: 6rpx 8rpx;
        border-radius: 8rpx;
      }

      .image {
        display: block;
        width: 220rpx;
        height: 220rpx;
        border-radius: 10rpx;
      }
    }

    .goods-item-right {
      position: relative;
      flex: 1;

      .goods-name {
        display: block;
        width: 100%;
        min-height: 68rpx;
        font-size: 28rpx;
        line-height: 1.3;
        color: #333;
      }

    }

    .goods-item-desc {
      margin-top: 20rpx;

      .desc_situation {
        font-size: 26rpx;
        line-height: 1.3;
        color: $main-bg;
        margin-top: 20rpx;
      }

      .state-tag {
        display: inline-block;
        margin-right: 14rpx;
      }

      .desc-footer {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        right: 0rpx;
        bottom: 0rpx;
        min-height: 44rpx;

        .item-status {
          color: $main-bg;
        }

        .item-prices {
          padding-right: 6rpx;

          .price-x {
            margin-right: 14rpx;
            color: $main-bg;
            font-size: 28rpx;
          }

          .price-y {
            color: #999;
            text-decoration: line-through;
            font-size: 24rpx;
          }
        }

        .settlement {
          padding: 0 30rpx;
          line-height: 56rpx;
          text-align: center;
          font-size: 28rpx;
          border-radius: 40rpx;
          color: #fff;
          background: $main-bg;
        }

      }

    }

  }
</style>