✨ 拼团：拼团订单列表

pages/activity/groupon/detail.vue

@@ -1,3 +1,4 @@
+<!-- 拼团订单的详情 -->
 <template>
   <s-layout title="拼团详情" class="detail-wrap" :navbar="state.data && !state.loading ? 'inner': 'normal'" :onShareAppMessage="shareInfo">
     <view v-if="state.loading"></view>
@@ -202,6 +203,7 @@
     combinationHeadId: null, // 拼团团长编号
   });
 
+  // todo 芋艿：分享要再接下
   const shareInfo = computed(() => {
     if (isEmpty(state.data)) return {};
     return sheep.$platform.share.getShareInfo(
@@ -231,7 +233,7 @@
     });
   }
 
-  //去开团
+  // 去开团
   function onCreateGroupon() {
     state.grouponAction = 'create';
     state.grouponId = 0;

pages/activity/groupon/list.vue

@@ -1,16 +1,18 @@
+<!-- 拼团活动列表 -->
 <template>
   <s-layout navbar="inner" :bgStyle="{ color: '#FE832A' }">
-    <view
-      class="page-bg"
-      :style="[{ marginTop: '-' + Number(statusBarHeight + 88) + 'rpx' }]"
-    ></view>
+    <view class="page-bg" :style="[{ marginTop: '-' + Number(statusBarHeight + 88) + 'rpx' }]" />
     <view class="list-content">
       <!-- 参团会员统计 -->
       <view class="content-header ss-flex-col ss-col-center ss-row-center">
         <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>
+          <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 v-if="index === 6 && state.summaryData.avatars.length > 3" class="mengceng">
               <i>···</i>
             </span>
@@ -25,7 +27,7 @@
         :scroll-with-animation="false"
         :enable-back-to-top="true"
       >
-        <view class="goods-box ss-m-b-20" v-for="item in state.pagination.data" :key="item.id">
+        <view class="goods-box ss-m-b-20" v-for="item in state.pagination.list" :key="item.id">
           <s-goods-column
             class=""
             size="lg"
@@ -54,55 +56,60 @@
   import { reactive } from 'vue';
   import { onLoad, onReachBottom } from '@dcloudio/uni-app';
   import sheep from '@/sheep';
-  import CombinationApi from "@/sheep/api/promotion/combination";
+  import CombinationApi from '@/sheep/api/promotion/combination';
 
   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 - sysNavBar - 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({
     pagination: {
-      data: [],
+      list: [],
+      total: 0,
       pageNo: 1,
-      total: 1,
+      pageSize: 10,
     },
     loadStatus: '',
-    summaryData: {}
+    summaryData: {},
   });
 
   // 加载统计数据
   const getSummary = async () => {
-    const { data } = await CombinationApi.getCombinationRecordSummary()
-    state.summaryData = data
-  }
+    const { data } = await CombinationApi.getCombinationRecordSummary();
+    state.summaryData = data;
+  };
 
   // 加载活动列表
-  async function getList(pageNo = 1, pageSize = 10) {
+  async function getList() {
     state.loadStatus = 'loading';
     const { data } = await CombinationApi.getCombinationActivityPage({
-      pageNo,
-      pageSize,
+      pageNo: state.pagination.pageNo,
+      pageSize: state.pagination.pageSize,
+    });
+    data.list.forEach((activity) => {
+      state.pagination.list.push({ ...activity, price: activity.combinationPrice });
     });
-    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';
+    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
   }
 
   // 加载更多
   function loadMore() {
-    if (state.loadStatus !== 'noMore') {
-      getList(state.pagination.pageNo + 1);
+    if (state.loadStatus === 'noMore') {
+      return;
     }
+    state.pagination.pageNo++;
+    getList();
   }
+
   // 上拉加载更多
   onReachBottom(() => loadMore());
+
   // 页面初始化
-  onLoad( () => {
+  onLoad(() => {
     getSummary();
     getList();
   });
@@ -171,7 +178,7 @@
           width: auto;
           height: auto;
           background: linear-gradient(90deg, #ff6600 0%, #fe832a 100%);
-          color: #FFFFFF;
+          color: #ffffff;
           border-radius: 19rpx;
           padding: 4rpx 14rpx;
         }
@@ -186,9 +193,9 @@
           opacity: 1;
           position: absolute;
           left: -2rpx;
-          color: #FFF;
+          color: #fff;
           top: 2rpx;
-          i{
+          i {
             font-style: normal;
             font-size: 20rpx;
           }

pages/activity/groupon/order.vue

@@ -1,4 +1,4 @@
-<!-- 页面 -->
+<!-- 我的拼团订单列表 -->
 <template>
   <s-layout title="我的拼团">
     <su-sticky bgColor="#fff">
@@ -9,31 +9,28 @@
         :current="state.currentTab"
       ></su-tabs>
     </su-sticky>
-    <s-empty v-if="state.pagination.total === 0" icon="/static/goods-empty.png"> </s-empty>
+    <s-empty v-if="state.pagination.total === 0" icon="/static/goods-empty.png" />
     <view v-if="state.pagination.total > 0">
       <view
         class="order-list-card-box bg-white ss-r-10 ss-m-t-14 ss-m-20"
-        v-for="order in state.pagination.list"
-        :key="order.id"
+        v-for="record in state.pagination.list"
+        :key="record.id"
       >
         <view class="order-card-header ss-flex ss-col-center ss-row-between ss-p-x-20">
-          <view class="order-no">订单号：{{ order.no }}</view>
-          <view class="ss-font-26" :class="formatOrderColor(order)">
-            {{ formatOrderStatus(order) }}
+          <view class="order-no">拼团编号：{{ record.id }}</view>
+          <view class="ss-font-26" :class="formatOrderColor(record)">
+            {{ tabMaps.find((item) => item.value === record.status).name }}
           </view>
         </view>
-        <view class="border-bottom" v-for="item in order.items" :key="item.id">
+        <view class="border-bottom">
           <s-goods-item
-              :img="item.picUrl"
-              :title="item.spuName"
-              :skuText="item.properties.map((property) => property.valueName).join(' ')"
-              :price="item.price"
-              :num="item.count"
+              :img="record.picUrl"
+              :title="record.spuName"
+              :price="record.combinationPrice"
           >
             <template #groupon>
               <view class="ss-flex">
-                <view class="sales-title"> {{ item.num }}人团 </view>
-                <!-- <view class="num-title ss-m-l-20"> 已拼{{ order.goods.sales }}件 </view> -->
+                <view class="sales-title"> {{ record.userSize }} 人团 </view>
               </view>
             </template>
           </s-goods-item>
@@ -41,16 +38,16 @@
         <view class="order-card-footer ss-flex ss-row-right ss-p-x-20">
           <button
             class="detail-btn ss-reset-button"
-            @tap="sheep.$router.go('/pages/order/detail', { id: order.id })"
+            @tap="sheep.$router.go('/pages/order/detail', { id: record.id })"
           >
             订单详情
           </button>
           <button
             class="tool-btn ss-reset-button"
-            :class="{ 'ui-BG-Main-Gradient': order.status === 0 }"
-            @tap="sheep.$router.go('/pages/activity/groupon/detail', { id: order.id })"
+            :class="{ 'ui-BG-Main-Gradient': record.status === 0 }"
+            @tap="sheep.$router.go('/pages/activity/groupon/detail', { id: record.id })"
           >
-            {{ order.status === 0 ? '邀请拼团' : '拼团详情' }}
+            {{ record.status === 0 ? '邀请拼团' : '拼团详情' }}
           </button>
         </view>
       </view>
@@ -67,21 +64,22 @@
 </template>
 
 <script setup>
-  import { computed, reactive } from 'vue';
+  import { reactive } from 'vue';
   import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
   import sheep from '@/sheep';
   import _ from 'lodash';
-  import OrderApi from "@/sheep/api/trade/order";
-  import {formatOrderColor, formatOrderStatus} from "@/sheep/hooks/useGoods";
+  import {formatOrderColor} from "@/sheep/hooks/useGoods";
+  import { resetPagination } from '@/sheep/util';
+  import CombinationApi from '@/sheep/api/promotion/combination';
 
   // 数据
   const state = reactive({
     currentTab: 0,
     pagination: {
       list: [],
-      total: 1,
+      total: 0,
       pageNo: 1,
-      pageSize: 1,
+      pageSize: 5,
     },
     loadStatus: '',
     deleteOrderId: 0,
@@ -107,75 +105,25 @@
 
   // 切换选项卡
   function onTabsChange(e) {
-    state.pagination = {
-      data: [],
-      pageNo: 1,
-      total: 1,
-      pageSize: 5,
-    };
+    resetPagination(state.pagination);
     state.currentTab = e.index;
     getGrouponList();
   }
 
-  // 订单详情
-  function onDetail(orderSN) {
-    sheep.$router.go('/pages/order/detail', {
-      orderSN,
-    });
-  }
-
-  // 继续支付
-  function onPay(orderSN) {
-    sheep.$router.go('/pages/pay/index', {
-      orderSN,
-    });
-  }
-
-  // 评价
-  function onComment(orderSN) {
-    sheep.$router.go('/pages/order/comment/add', {
-      orderSN,
-    });
-  }
-
-  // 确认收货
-  async function onConfirm(orderId) {
-    const { error, data } = await sheep.$api.order.confirm(orderId);
-    if (error === 0) {
-      let index = state.pagination.list.findIndex((order) => order.id === orderId);
-      state.pagination.list[index] = data;
-    }
-  }
-
-  // 取消订单
-  async function onCancel(orderId) {
-    const { error, data } = await sheep.$api.order.cancel(orderId);
-    if (error === 0) {
-      let index = state.pagination.list.findIndex((order) => order.id === orderId);
-      state.pagination.list[index] = data;
-    }
-  }
-
   // 获取订单列表
   async function getGrouponList() {
     state.loadStatus = 'loading';
-    // todo: 缺少拼团订单接口
-    const { code, data } = await OrderApi.getOrderPage({
+    const { code, data } = await CombinationApi.getCombinationRecordPage({
       pageNo: state.pagination.pageNo,
       pageSize: state.pagination.pageSize,
       status: tabMaps[state.currentTab].value,
-      commentStatus: tabMaps[state.currentTab].value === 30 ? false : null
     });
     if (code !== 0) {
       return;
     }
     state.pagination.list = _.concat(state.pagination.list, data.list)
     state.pagination.total = data.total;
-    if (state.pagination.list.length < state.pagination.total) {
-      state.loadStatus = 'more';
-    } else {
-      state.loadStatus = 'noMore';
-    }
+    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
   }
 
   onLoad((options) => {
@@ -187,16 +135,18 @@
 
   // 加载更多
   function loadMore() {
-    if (state.loadStatus !== 'noMore') {
-      state.pagination.pageNo++;
-      getGrouponList();
+    if (state.loadStatus === 'noMore') {
+      return;
     }
+    state.pagination.pageNo++;
+    getGrouponList();
   }
 
   // 上拉加载更多
   onReachBottom(() => {
     loadMore();
   });
+
   //下拉刷新
   onPullDownRefresh(() => {
     getGrouponList();

sheep/api/promotion/combination.js

@@ -1,67 +1,76 @@
-import request from "@/sheep/request";
+import request from '@/sheep/request';
 
 // 拼团 API
 const CombinationApi = {
-    // 获得拼团活动列表
-    getCombinationActivityList: (count) => {
-        return request({
-            url: "/app-api/promotion/combination-activity/list",
-            method: 'GET',
-            params: {count}
-        });
-    },
+  // 获得拼团活动列表
+  getCombinationActivityList: (count) => {
+    return request({
+      url: '/app-api/promotion/combination-activity/list',
+      method: 'GET',
+      params: { count },
+    });
+  },
 
-    // 获得拼团活动分页
-    getCombinationActivityPage: (params) => {
-        return request({
-            url: "/app-api/promotion/combination-activity/page",
-            method: 'GET',
-            params
-        });
-    },
+  // 获得拼团活动分页
+  getCombinationActivityPage: (params) => {
+    return request({
+      url: '/app-api/promotion/combination-activity/page',
+      method: 'GET',
+      params,
+    });
+  },
 
-    // 获得拼团活动明细
-    getCombinationActivity: (id) => {
-        return request({
-            url: "/app-api/promotion/combination-activity/get-detail",
-            method: 'GET',
-            params: {
-                id
-            }
-        });
-    },
+  // 获得拼团活动明细
+  getCombinationActivity: (id) => {
+    return request({
+      url: '/app-api/promotion/combination-activity/get-detail',
+      method: 'GET',
+      params: {
+        id,
+      },
+    });
+  },
 
-    // 获得最近 n 条拼团记录（团长发起的）
-    getHeadCombinationRecordList: (activityId, status, count) => {
-        return request({
-            url: "/app-api/promotion/combination-record/get-head-list",
-            method: 'GET',
-            params: {
-                activityId,
-                status,
-                count
-            }
-        });
-    },
+  // 获得最近 n 条拼团记录（团长发起的）
+  getHeadCombinationRecordList: (activityId, status, count) => {
+    return request({
+      url: '/app-api/promotion/combination-record/get-head-list',
+      method: 'GET',
+      params: {
+        activityId,
+        status,
+        count,
+      },
+    });
+  },
 
-    // 获得拼团记录明细
-    getCombinationRecordDetail: (id) => {
-        return request({
-            url: "/app-api/promotion/combination-record/get-detail",
-            method: 'GET',
-            params: {
-                id
-            }
-        });
-    },
+  // 获得我的拼团记录分页
+  getCombinationRecordPage: (params) => {
+    return request({
+      url: "/app-api/promotion/combination-record/page",
+      method: 'GET',
+      params
+    });
+  },
 
-    // 获得拼团记录的概要信息
-    getCombinationRecordSummary: () => {
-        return request({
-            url: "/app-api/promotion/combination-record/get-summary",
-            method: 'GET',
-        });
-    }
-}
+  // 获得拼团记录明细
+  getCombinationRecordDetail: (id) => {
+    return request({
+      url: '/app-api/promotion/combination-record/get-detail',
+      method: 'GET',
+      params: {
+        id,
+      },
+    });
+  },
 
-export default CombinationApi
+  // 获得拼团记录的概要信息
+  getCombinationRecordSummary: () => {
+    return request({
+      url: '/app-api/promotion/combination-record/get-summary',
+      method: 'GET',
+    });
+  },
+};
+
+export default CombinationApi;