接入拼团

2024-01-10 22:57:06 +08:00
parent 08b6b38c05
commit 07601aec09
12 changed files with 388 additions and 605 deletions
@@ -4,7 +4,7 @@
    <view v-if="state.data && !state.loading">
      <view
        class="recharge-box"
-        v-if="state.data.goods"
+        v-if="state.data.headRecord"
        :style="[
          {
            marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
@@ -14,29 +14,28 @@
      >
        <s-goods-item
          class="goods-box"
-          :img="state.data.goods.image"
-          :title="state.data.goods.title"
-          :price="state.data.goods.price[0]"
+          :img="state.data.headRecord.picUrl"
+          :title="state.data.headRecord.spuName"
+          :price="state.data.headRecord.combinationPrice"
          priceColor="#E1212B"
          @tap="
            sheep.$router.go('/pages/goods/groupon', {
-              id: state.data.goods.id,
-              activity_id: state.data.goods.activity.id,
+              id: state.data.headRecord.activityId
            })
          "
          :style="[{ top: Number(statusBarHeight + 108) + 'rpx' }]"
        >
          <template #groupon>
            <view class="ss-flex">
-              <view class="sales-title">{{ state.data.num }}人团</view>
-              <view class="num-title ss-m-l-20">已拼{{ state.data.goods.sales }}件</view>
+              <view class="sales-title">{{ state.data.headRecord.userSize }}人团</view>
+              <view class="num-title ss-m-l-20">已拼{{ state.data.headRecord.userCount }}件</view>
            </view>
          </template>
        </s-goods-item>
      </view>
      <view class="countdown-box detail-card ss-p-t-44 ss-flex-col ss-col-center">
-        <view v-if="state.data.status === 'finish' || state.data.status === 'finish_fictitious'">
-          <view v-if="state.data.my">
+        <view v-if="state.activity.status === 1">
+          <view v-if="state.data.orderId">
            <view class="countdown-title ss-flex">
              <text class="cicon-check-round"></text>
              恭喜您~拼团成功
@@ -49,24 +48,23 @@
            </view>
          </view>
        </view>
-        <view v-if="state.data.status === 'invalid'">
+        <view v-if="state.activity.status === 2">
          <view class="countdown-title ss-flex">
            <text class="cicon-info"></text>
-            {{ state.data.my ? '拼团超时,已自动退款' : '该团已解散' }}
+            {{ state.data.orderId ? '拼团超时,已自动退款' : '该团已解散' }}
          </view>
        </view>
-        <view v-if="state.data.status === 'ing'">
-          <!-- TODO: 拼团进行中+活动结束-->
-          <view v-if="state.data.activity_status === 'ended'">
+        <view v-if="state.activity.status === 0">
+          <view v-if="state.data.headRecord.expireTime <= new Date().getTime()">
            <view class="countdown-title ss-flex">
              <text class="cicon-info"></text>
              拼团已结束,请关注下次活动
            </view>
          </view>

-          <view class="countdown-title ss-flex" v-if="state.data.activity_status === 'ing'">
+          <view class="countdown-title ss-flex" v-else>
            还差
-            <view class="num">{{ state.data.num - state.data.current_num }}人</view>
+            <view class="num">{{ state.data.headRecord.userSize - state.data.headRecord.userCount }}人</view>
            拼团成功
            <view class="ss-flex countdown-time">
              <view class="countdown-h ss-flex ss-row-center">{{ endTime.h }}</view>
@@ -83,9 +81,15 @@
        </view>

        <view class="ss-m-t-60 ss-flex ss-flex-wrap ss-row-center">
+          <!-- 团长 -->
+          <view class="header-avatar ss-m-r-24 ss-m-b-20">
+            <image :src="sheep.$url.cdn(state.data.headRecord.avatar)" class="avatar-img"></image>
+            <view class="header-tag ss-flex ss-col-center ss-row-center">团长</view>
+          </view>
+          <!-- 团员 -->
          <view
            class="header-avatar ss-m-r-24 ss-m-b-20"
-            v-for="item in state.data.groupon_logs"
+            v-for="item in state.data.memberRecords"
            :key="item.id"
          >
            <image :src="sheep.$url.cdn(item.avatar)" class="avatar-img"></image>
@@ -96,74 +100,53 @@
              团长
            </view>
          </view>
-          <view class="default-avatar ss-m-r-24 ss-m-b-20" v-for="item in state.number" :key="item">
+          <!-- 还有几个坑位 -->
+          <view class="default-avatar ss-m-r-24 ss-m-b-20" v-for="item in state.remainNumber" :key="item">
            <image
              :src="sheep.$url.static('/static/img/shop/avatar/unknown.png')"
              class="avatar-img"
            ></image>
          </view>
        </view>
-        <view
-          class="detail-cell-wrap ss-flex ss-col-center ss-row-between"
-          v-if="state.data.activity?.richtext_id > 0"
-          @tap="
-            sheep.$router.go('/pages/public/richtext', {
-              id: state.data.activity.richtext_id,
-              title: state.data.activity.richtext_title,
-            })
-          "
-        >
-          <view class="label-text">玩法</view>
-          <view class="ss-flex">
-            <view class="cell-content ss-line-1 ss-flex-1">
-              {{ state.data.activity?.richtext_title }}
-            </view>
-            <button class="ss-reset-button">
-              <text class="_icon-forward right-forwrad-icon"></text>
-            </button>
-          </view>
-        </view>
      </view>
      <view
-        v-if="
-          state.data.status == 'finish' ||
-          state.data.status == 'finish_fictitious' ||
-          state.data.status == 'invalid'
-        "
+        v-if="state.activity.status === 1 || state.activity.status === 2"
        class="ss-m-t-40 ss-flex ss-row-center"
      >
        <button
          class="ss-reset-button order-btn"
-          v-if="state.data.my"
-          @tap="onDetail(state.data.my.order_id)"
+          v-if="state.data.orderId"
+          @tap="onDetail(state.data.orderId)"
        >
          查看订单
        </button>
        <button class="ss-reset-button join-btn" v-else @tap="onCreateGroupon"> 我要开团 </button>
      </view>
-      <view v-if="state.data.status === 'ing'" class="ss-m-t-40 ss-flex ss-row-center">
-        <view v-if="state.data.activity_status === 'ended'">
+      <!-- 处于进入中时，查看订单或参加或邀请好友或参加 -->
+      <view v-if="state.activity.status === 0" class="ss-m-t-40 ss-flex ss-row-center">
+        <view v-if="state.data.headRecord.expireTime <= new Date().getTime()">
          <button
            class="ss-reset-button join-btn"
-            v-if="state.data.my"
-            @tap="onDetail(state.data.my.order_id)"
+            v-if="state.data.orderId"
+            @tap="onDetail(state.data.orderId)"
          >
            查看订单
          </button>
+          <!-- 待确认 -->
          <button
            class="ss-reset-button disabled-btn"
            v-else
            disabled
-            @tap="onDetail(state.data.my.order_id)"
+            @tap="onDetail(state.data.orderId)"
          >
            去参团
          </button>
        </view>
        <view v-else class="ss-flex ss-row-center">
-          <view v-if="state.data.my">
+          <view v-if="state.data.orderId">
            <button
              class="ss-reset-button join-btn"
-              :disabled="state.data.activity_status === 'ing' && endTime.ms <= 0"
+              :disabled="endTime.ms <= 0"
              @tap="onShare"
            >
              邀请好友来拼团
@@ -172,7 +155,7 @@
          <view v-else>
            <button
              class="ss-reset-button join-btn"
-              :disabled="state.data.activity_status === 'ing' && endTime.ms <= 0"
+              :disabled="endTime.ms <= 0"
              @tap="onJoinGroupon()"
            >
              立即参团
@@ -204,6 +187,7 @@
  import { useDurationTime } from '@/sheep/hooks/useGoods';
  import { showShareModal } from '@/sheep/hooks/useModal';
  import { isEmpty } from 'lodash';
+  import CombinationApi from "@/sheep/api/promotion/combination";

  const headerBg = sheep.$url.css('/static/img/shop/user/withdraw_bg.png');
  const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
@@ -214,15 +198,17 @@
    showSelectSku: false,
    grouponNum: 0,
    number: 0,
+    activity: {},
+    combinationHeadId: null, // 拼团团长编号
  });

  const shareInfo = computed(() => {
    if (isEmpty(state.data)) return {};
    return sheep.$platform.share.getShareInfo(
      {
-        title: state.data.goods.title,
-        image: sheep.$url.cdn(state.data.goods.image),
-        desc: state.data.goods.subtitle,
+        title: state.data.headRecord.spuName,
+        image: sheep.$url.cdn(state.data.headRecord.picUrl),
+        desc: state.data.goods?.subtitle,
        params: {
          page: '5',
          query: state.data.id,
@@ -230,10 +216,10 @@
      },
      {
        type: 'groupon', // 邀请拼团海报
-        title: state.data.goods.title, // 商品标题
-        image: sheep.$url.cdn(state.data.goods.image), // 商品主图
-        price: state.data.goods.price[0], // 商品价格
-        original_price: state.data.goods.original_price, // 商品原价
+        title: state.data.headRecord.spuName, // 商品标题
+        image: sheep.$url.cdn(state.data.headRecord.picUrl), // 商品主图
+        price: state.data.goods?.price, // 商品价格
+        original_price: state.data.goods?.original_price, // 商品原价
      },
    );
  });
@@ -260,25 +246,23 @@
  // 立即参团
  function onJoinGroupon() {
    state.grouponAction = 'join';
-    state.grouponId = state.data.id;
+    state.grouponId = state.data.activityId;
+    state.combinationHeadId = state.data.id;
    state.grouponNum = state.data.num;
    state.showSelectSku = true;
  }

  // 立即购买
-  function onBuy(e) {
+  function onBuy(sku) {
    sheep.$router.go('/pages/order/confirm', {
      data: JSON.stringify({
        order_type: 'goods',
-        buy_type: 'groupon',
-        activity_id: state.data.activity.id,
-        groupon_id: state.grouponId,
-        groupon_num: state.grouponNum,
-        goods_list: [
+        combinationActivityId: state.data.activity.id,
+        combinationHeadId: state.combinationHeadId,
+        items: [
          {
-            goods_id: e.goods_id,
-            goods_num: e.goods_num,
-            goods_sku_price_id: e.id,
+            skuId: sku.id,
+            count: sku.count,
          },
        ],
      }),
@@ -286,16 +270,20 @@
  }

  const endTime = computed(() => {
-    return useDurationTime(state.data.expire_time);
+    return useDurationTime(state.data.headRecord.expireTime);
  });

  // 获取拼团团队详情
  async function getGrouponDetail(id) {
-    const { error, data } = await sheep.$api.activity.grouponDetail(id);
-    if (error === 0) {
+    const { code, data } = await CombinationApi.getCombinationRecordDetail(id);
+    if (code === 0) {
      state.data = data;
-      let number = Number(state.data.num - state.data.current_num);
-      state.number = number > 0 ? number : 0;
+      const remainNumber = Number(state.data.headRecord.userSize - state.data.headRecord.userCount);
+      state.remainNumber = remainNumber > 0 ? remainNumber : 0;
+
+      // 获取活动信息
+      const { data: activity } = await CombinationApi.getCombinationActivity(data.headRecord.activityId);
+      state.activity = activity;
    } else {
      state.data = null;
    }
@@ -5,23 +5,17 @@
      :style="[{ marginTop: '-' + Number(statusBarHeight + 88) + 'rpx' }]"
    ></view>
    <view class="list-content">
+      <!-- 参团会员统计 -->
      <view class="content-header ss-flex-col ss-col-center ss-row-center">
-        <view class="content-header-title ss-m-b-22 ss-flex ss-row-center">
-          <view>{{ state.activityInfo.title }}</view>
-          <!-- <view class="more">更多</view> -->
-        </view>
-        <view class="content-header-box ss-flex ss-row-center">
-          <view class="countdown-box ss-flex" v-if="endTime?.ms > 0 && state.activityInfo">
-            <view class="countdown-title ss-m-r-12">距结束</view>
-            <view class="ss-flex countdown-time">
-              <view class="ss-flex countdown-h">{{ endTime.h }}</view>
-              <view class="ss-m-x-4">:</view>
-              <view class="countdown-num ss-flex ss-row-center">{{ endTime.m }}</view>
-              <view class="ss-m-x-4">:</view>
-              <view class="countdown-num ss-flex ss-row-center">{{ endTime.s }}</view>
-            </view>
+        <view class="content-header-title ss-flex ss-row-center">
+          <view v-for="(item, index) in state.summaryData.avatars" :key="index" class="picture"
+                :style='index === 6 ? "position: relative" : "position: static"'>
+            <span class="avatar" :style='`background-image: url(${item})`'></span>
+            <span v-if="index === 6 && state.summaryData.avatars.length > 3" class="mengceng">
+              <i>···</i>
+            </span>
          </view>
-          <view class="" v-if="endTime?.ms < 0 && state.activityInfo"> 活动已结束 </view>
+          <text class="pic_count">{{ state.summaryData.userCount || 0 }}人参与</text>
        </view>
      </view>
      <scroll-view
@@ -37,12 +31,7 @@
            size="lg"
            :data="item"
            :grouponTag="true"
-            @click="
-              sheep.$router.go('/pages/goods/groupon', {
-                id: item.id,
-                activity_id: state.activityId,
-              })
-            "
+            @click="sheep.$router.go('/pages/goods/groupon', { id: item.id })"
          >
            <template v-slot:cart>
              <button class="ss-reset-button cart-btn">去拼团</button>
@@ -55,92 +44,67 @@
          :content-text="{
            contentdown: '上拉加载更多',
          }"
-          @tap="loadmore"
+          @tap="loadMore"
        />
      </scroll-view>
    </view>
  </s-layout>
 </template>
 <script setup>
-  import { reactive, computed } from 'vue';
+  import { reactive } from 'vue';
  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
  import sheep from '@/sheep';
-  import _ from 'lodash';
-  import { useDurationTime } from '@/sheep/hooks/useGoods';
+  import CombinationApi from "@/sheep/api/promotion/combination";

-  const { screenHeight, safeAreaInsets, screenWidth, safeArea } = sheep.$platform.device;
-  const sys_navBar = sheep.$platform.navbar;
+  const { safeAreaInsets, safeArea } = sheep.$platform.device;
+  const sysNavBar = sheep.$platform.navbar;
  const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
-  const pageHeight =
-    (safeArea.height + safeAreaInsets.bottom) * 2 + statusBarHeight - sys_navBar - 350;
+  const pageHeight = (safeArea.height + safeAreaInsets.bottom) * 2 + statusBarHeight - sysNavBar - 350;
  const headerBg = sheep.$url.css('/static/img/shop/goods/groupon-header.png');

  const state = reactive({
-    activityId: 0,
    pagination: {
      data: [],
-      current_page: 1,
+      pageNo: 1,
      total: 1,
-      last_page: 1,
    },
    loadStatus: '',
-    activityInfo: {},
-  });
-  // 倒计时
-  const endTime = computed(() => {
-    if (state.activityInfo.end_time) {
-      return useDurationTime(state.activityInfo.end_time);
-    }
+    summaryData: {}
  });

-  async function getList(activityId, page = 1, list_rows = 4) {
-    state.loadStatus = 'loading';
-    const res = await sheep.$api.goods.activityList({
-      list_rows,
-      activity_id: activityId,
-      page,
-    });
-    if (res.error === 0) {
-      if (page >= 2) {
-        let couponList = _.concat(state.pagination.data, res.data.data);
-        state.pagination = {
-          ...res.data,
-          data: couponList,
-        };
-      } else {
-        state.pagination = res.data;
-      }
-      if (state.pagination.current_page < state.pagination.last_page) {
-        state.loadStatus = 'more';
-      } else {
-        state.loadStatus = 'noMore';
-      }
-    }
+  // 加载统计数据
+  const getSummary = async () => {
+    const { data } = await CombinationApi.getCombinationRecordSummary()
+    state.summaryData = data
  }
-  async function getActivity(id) {}
+
+  // 加载活动列表
+  async function getList(pageNo = 1, pageSize = 10) {
+    state.loadStatus = 'loading';
+    const { data } = await CombinationApi.getCombinationActivityPage({
+      pageNo,
+      pageSize,
+    });
+    data.list.forEach(activity => {
+      state.pagination.data.push({...activity, price: activity.combinationPrice})
+    })
+    state.pagination.total = data.total;
+    state.pagination.pageNo = pageNo;
+    state.loadStatus = state.pagination.data.length < state.pagination.total ? 'more' : 'noMore';
+  }
+
  // 加载更多
-  function loadmore() {
+  function loadMore() {
    if (state.loadStatus !== 'noMore') {
-      getList(state.activityId, state.pagination.current_page + 1);
+      getList(state.pagination.pageNo + 1);
    }
  }
  // 上拉加载更多
-  onReachBottom(() => {
-    loadmore();
-  });
-  onLoad(async (options) => {
-    if (!options.id) {
-      state.activityInfo = null;
-      return;
-    }
-    state.activityId = options.id;
-    getList(state.activityId);
-    const { error, data } = await sheep.$api.activity.activity(options.id);
-    if (error === 0) {
-      state.activityInfo = data;
-    } else {
-      state.activityInfo = null;
-    }
+  onReachBottom(() => loadMore());
+  // 页面初始化
+  onLoad( () => {
+    getSummary();
+    getList();
  });
 </script>
 <style lang="scss" scoped>
@@ -160,7 +124,7 @@
    .content-header {
      width: 100%;
      border-radius: 20rpx 20rpx 0 0;
-      height: 150rpx;
+      height: 100rpx;
      background: linear-gradient(180deg, #fff4f7, #ffe4d1);
      .content-header-title {
        width: 100%;
@@ -178,55 +142,55 @@
          color: #999999;
          line-height: 30rpx;
        }
-      }
-      .content-header-box {
-        width: 678rpx;
-        height: 64rpx;
-        background: rgba($color: #fff, $alpha: 0.66);
-        border-radius: 32px;
-        .num {
-          font-size: 24rpx;
-          font-family: OPPOSANS;
-          font-weight: 500;
-          color: #f51c11;
-          line-height: 30rpx;
-        }
-        .title {
-          font-size: 24rpx;
-          font-weight: 400;
-          font-family: OPPOSANS;
-          color: #333;
-          line-height: 30rpx;
-        }
-        .countdown-title {
-          font-size: 28rpx;
-          font-weight: 500;
-          color: #333333;
-          line-height: 28rpx;
+
+        .picture {
+          display: inline-table;
        }

-        .countdown-time {
-          font-size: 28rpx;
-          color: rgba(#ed3c30, 0.23);
-          .countdown-h {
-            font-size: 24rpx;
-            font-family: OPPOSANS;
-            font-weight: 500;
-            color: #ffffff;
-            padding: 0 4rpx;
-            height: 40rpx;
-            background: rgba(#ed3c30, 0.23);
-            border-radius: 6rpx;
-          }
-          .countdown-num {
-            font-size: 24rpx;
-            font-family: OPPOSANS;
-            font-weight: 500;
-            color: #ffffff;
-            width: 40rpx;
-            height: 40rpx;
-            background: rgba(#ed3c30, 0.23);
-            border-radius: 6rpx;
+        .avatar {
+          width: 38rpx;
+          height: 38rpx;
+          display: inline-table;
+          vertical-align: middle;
+          -webkit-user-select: none;
+          -moz-user-select: none;
+          -ms-user-select: none;
+          user-select: none;
+          border-radius: 50%;
+          background-repeat: no-repeat;
+          background-size: cover;
+          background-position: 0 0;
+          margin-right: -10rpx;
+          box-shadow: 0 0 0 1px #fe832a;
+        }
+
+        .pic_count {
+          margin-left: 30rpx;
+          font-size: 22rpx;
+          font-weight: 500;
+          width: auto;
+          height: auto;
+          background: linear-gradient(90deg, #ff6600 0%, #fe832a 100%);
+          color: #FFFFFF;
+          border-radius: 19rpx;
+          padding: 4rpx 14rpx;
+        }
+
+        .mengceng {
+          width: 40rpx;
+          height: 40rpx;
+          line-height: 36rpx;
+          background: rgba(51, 51, 51, 0.6);
+          text-align: center;
+          border-radius: 50%;
+          opacity: 1;
+          position: absolute;
+          left: -2rpx;
+          color: #FFF;
+          top: 2rpx;
+          i{
+            font-style: normal;
+            font-size: 20rpx;
          }
        }
      }