applet/pages/tabtar/components/GroupBuy.vue

<template>
  <view class="group-work u-skeleton-fillet">
    <view
      class="head-item"
      @click="goDetail('/pages/groupBuying/list')"
      :style="{ backgroundImage: `url(${bgImage || ''})` }"
    >
      <view class="top-left">
        <view class="top-left-title">拼团购</view>
        <view class="top-left-tip">精选好物推荐</view>
      </view>
      <view class="top-right" style="color: #75c27a">
        <text>查看更多</text>
        <!-- <text class="iconfont u-font24">&#xe6c7;</text> -->
        <uv-icon name="arrow-right" size="24rpx" color="#75c27a"></uv-icon>
      </view>
    </view>
    <view
      class="group-work-main"
      v-if="(groupList && groupList.length > 0) || skeletonShow"
    >
      <view
        class="middle_item"
        v-for="item in skeletonShow ? 1 : groupList"
        :key="item.id"
      >
        <view
          class="middle"
          @click="
            goProductDetails('/pages/groupBuying/details?id=' + item.id)
          "
        >
          <view class="middle-left">
            <image
              v-if="item && item.cover"
              :src="`${item.cover}?x-oss-process=style/w_350`"
              mode="aspectFill"
            >
            </image>
          </view>
          <view class="middle-right">
            <view class="middle-title u-text2">{{ item.title }}</view>
            <view class="division">
              <view class="middle-num">
                <view class="contain">
                  <view class="large">
                    <rich-text
                      :nodes="$mUtil.priceBigSmall(item.min_price)"
                    ></rich-text>
                  </view>
                  <view class="small">¥ {{ item.min_sale_price }}</view>
                </view>
                <view class="three"
                  >{{ item.group_people_num }}人团，已拼
                  <text style="color: red"> {{ item.result_sale_num }}</text>
                  件</view
                >
              </view>
              <view class="button">去拼团</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <noData v-else :config="{ top: 1, content: '暂无商品~' }"></noData>
  </view>
</template>

<script setup>
import { getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
const $mUtil = proxy.$mUtil;

const props = defineProps({
  groupList: {
    type: Array,
    default: () => [],
  },
  skeletonShow: {
    type: Boolean,
    default: false,
  },
  bgImage: {
    type: String,
    default: "",
  },
});

const emit = defineEmits(["goDetail", "goProductDetails"]);

const goDetail = (url) => {
  emit("goDetail", url);
};

const goProductDetails = (url) => {
  emit("goProductDetails", url);
};
</script>

<style scoped lang="scss">
.group-work {
  margin: 30rpx 0;
  background: #d4f2e8;
  padding-bottom: 30rpx;
  border-radius: 10rpx;
  box-sizing: border-box;
  overflow: hidden;

  .group-work-main {
    padding: 30rpx;
    margin: 20rpx 30rpx 0 30rpx;
    box-sizing: border-box;
    background-color: #ffffff;
    border-radius: 10rpx;
  }
}

.head-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 27rpx 30rpx;
  box-sizing: border-box;
  overflow: hidden;
  background-size: 100% 100%;
  background-repeat: no-repeat;

  .top-left {
    .top-left-title {
      font-size: 36rpx;
      font-family: PingFang SC, PingFang SC-Bold;
      font-weight: 700;
    }
    .top-left-tip {
      font-size: 24rpx;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      margin-top: 5rpx;
    }
  }

  .top-right {
    width: 165rpx;
    height: 67rpx;
    line-height: 67rpx;
    background: #ffffff;
    border-radius: 34rpx;
    box-sizing: border-box;
    font-size: 24rpx;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.middle_item {
  padding: 0 30rpx;
}

.middle_item:last-child {
  border: none;
}

.middle {
  display: flex;
  border-bottom: 1rpx solid #f7f7f7;
  padding-bottom: 40rpx;
  padding-top: 42rpx;

  .middle-left {
    margin-right: 20rpx;

    image {
      width: 226rpx;
      height: 226rpx;
      border-radius: 10rpx;
    }
  }

  .middle-right {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 10rpx;
    padding-bottom: 10rpx;

    .middle-title {
      font-size: 28rpx;
      margin-top: 10rpx;
      color: #181818;
      font-weight: 400;
      line-height: 36rpx;
    }

    .division {
      display: flex;
      width: 100%;
      padding-bottom: 10rpx;
      justify-content: space-between;
    }

    .middle-num {
      flex: 1;

      .contain {
        display: flex;
        align-items: flex-end;
      }

      .three {
        font-size: 24rpx;
        font-weight: Regular;
        color: #333333;
        line-height: 24rpx;
        margin-top: 8rpx;
      }

      .large {
        color: #00bf5a;
        font-size: 36rpx;
        font-weight: Bold;
        line-height: 24rpx;
      }

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

    .button {
      width: 130rpx;
      height: 60rpx;
      text-align: center;
      line-height: 60rpx;
      color: #ffffff;
      font-size: 28rpx;
      background: #069d4d;
      border-radius: 32rpx;
    }
  }
}
</style>