applet/pages/shop/components/GroupBuyingGood.vue

<template>
  <view class="groupCard" v-if="groupList && groupList.length > 0">
    <view class="group_title">
      <view class="group_title_l">拼团购</view>
      <view
        class="group_title_r"
        @click="goProductDetails('/pages/research/homepage/groupList')"
      >
        查看更多
        <!-- <text class="iconfont">&#xe65f;</text> -->
        <view style="display: inline-block;">
            <uv-icon name="arrow-right" color="#333333" size="26rpx"></uv-icon>
        </view>
      </view>
    </view>

    <view class="goodsListBox">
      <view
        class="goods_item"
        v-for="(item, index) in groupList"
        :key="index"
        @click="
          goProductDetails('/pages/product/goods/puzzleGoods?id=' + item.id)
        "
      >
        <view class="goods_item_img">
          <!-- ?x-oss-process=style/w_350 -->
          <image :src="`${item.coverImage}`" mode=""></image>
        </view>
        <view class="goods_item_data">
          <view class="goods_item_data_title">{{ item.title }}</view>
          <view class="goods_item_data_box">
            <view class="goods_item_data_box_l">
              <view class="num">
                <view class="large">
                  <rich-text
                    :nodes="$mUtil.priceBigSmall(item.minPrice)"
                  ></rich-text>
                </view>
                <view class="small">
                  <text class="pintuanc6">¥ {{ item.minSalePrice }}</text>
                </view>
              </view>
              <view class="goods_item_data_box_l_person">
                {{ item.groupPeopleNum || 0 }}人团，已拼<text>{{
                  item.resultSaleNum || 0
                }}</text
                >件
              </view>
            </view>
            <view class="goods_item_data_box_r">去拼团</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, watch } from "vue";

const groupList = ref([]);

const goProductDetails = (url) => {
  uni.navigateTo({
    url: url,
  });
};
</script>

<style lang="scss" scoped>
.groupCard {
  margin: auto;
  width: 720rpx;
  // height: 1500rpx;
  padding: 0 30rpx;
  // background: url('/static/convenienceService/cardBg.png')0 0 no-repeat;
  // background-size: 720rpx 1500rpx;
  box-shadow: 0rpx 4rpx 8rpx 0rpx #f1f1f1;
  border-radius: 16rpx;
  box-sizing: border-box;

  .num {
    display: flex;
    align-items: center;
    margin-top: 46rpx;
    font-weight: Bold;
    font-size: 20rpx;
    color: red;
  }

  .small {
    color: #cccccc;
    font-size: 22rpx;
    font-weight: 500;
    text-decoration: line-through;
    margin-left: 17rpx;
  }

  .group_title {
    display: flex;
    justify-content: space-between;
    padding: 35rpx 30rpx 20rpx 30rpx;
    align-items: center;
    border-bottom: 1rpx solid #e6e6e6;

    .group_title_l {
      font-size: 36rpx;
      color: #1a1a1a;
      font-weight: 700;
    }

    .group_title_r {
      font-size: 24rpx;
      color: #333333;
    }
  }

  .goodsListBox {
    .goods_item {
      &:last-child {
        border-bottom: none !important;
      }

      display: flex;
      padding: 50rpx 0 40rpx;
      border-bottom: 1rpx solid #e6e6e6;

      .goods_item_img {
        margin-right: 25rpx;

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

      .goods_item_data {
        flex: 1;

        .goods_item_data_title {
          font-size: 28rpx;
          min-height: 80rpx;
          color: #181818;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }

        .autotrophyCls {
          width: 69rpx;
          height: 30rpx;
          margin-right: 10rpx;
          margin-top: 10rpx;
        }

        .originalCls {
          width: 116rpx;
          height: 28rpx;
          margin-top: 10rpx;
        }

        .goods_item_data_box {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 10rpx;

          .goods_item_data_box_l {
            .goods_item_data_box_l_price {
              display: flex;
              align-items: flex-end;
              font-size: 20rpx;
              color: #00bf5a;

              text {
                font-size: 36rpx;
                font-weight: 500;
                display: inline-block;
                position: relative;
                top: 4rpx;
              }

              > view {
                font-size: 24rpx;
                color: #cccccc;
                margin-left: 30rpx;
                text-decoration: line-through;
              }
            }

            .goods_item_data_box_l_person {
              font-size: 24rpx;
              color: #333333;

              text {
                color: #ff0000;
              }
            }
          }

          .goods_item_data_box_r {
            width: 138rpx;
            height: 63rpx;
            background: #00bf5a;
            border-radius: 32rpx;
            font-size: 28rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>