功能完善

src/pages/mine/subs/order/components/order-item.vue

@@ -6,7 +6,9 @@
         <view class='c-flex-row'>
           <text class='goods-name'>{{ item?.orderGoods[0].goodsName }}</text>
           <text class='status'>
-            {{ item?.payStatus == 2 ? '已支付' : '未支付' }}
+            <text v-if='item?.payStatus == 2'>已支付</text>
+            <text v-else-if='isPending(item)'>待支付</text>
+            <text v-else style='color: #999999'>已过期</text>
           </text>
         </view>
         <view class='bottom-view c-flex-row'>
@@ -21,17 +23,17 @@
       </view>
     </view>
     <view class='action-view c-flex-row'>
-      <view class='countdown c-flex-row' v-if='item?.payStatus==1'>
+      <view class='countdown c-flex-row' v-if='isPending(item)'>
         <image :src='assetsUrl("ic_time.png")' />
         <text class='primary-text-color'>支付剩余时间
-          <text class='accent-text-color'>05:23</text>
+          <text class='accent-text-color'>{{ dayjs.unix(item?.countdown || 0).format('mm:ss') || '00:00' }}</text>
         </text>
       </view>
       <view v-else style='flex: 1' />
 
       <view class='c-flex-row'>
         <text class='add-shoppingcart secondary-text-color' @click.stop='add(item?.orderGoods[0])'>加入购物车</text>
-        <text class='payment accent-text-color' v-if='item?.payStatus==1' @click.stop='pay(item?.id)'>立即支付
+        <text class='payment accent-text-color' v-if='isPending(item)' @click.stop='pay(item?.id)'>立即支付
         </text>
       </view>
     </view>
@@ -42,8 +44,10 @@
 import { PropType } from 'vue';
 import { assetsUrl } from '@/utils/assets';
 import { goPath } from '@/utils';
+import { isPending } from '@/utils/order';
 import { OrderBean } from '@/api/order/types';
 import { GoodsBean } from '@/api/goods/types';
+import dayjs from 'dayjs';
 
 const emits = defineEmits(['addShoppingCart', 'payment']);
 
@@ -55,7 +59,7 @@ const add = (item: GoodsBean | undefined) => {
   emits('addShoppingCart', item);
 };
 
-const pay = (orderId: string) => {
+const pay = (orderId: string | undefined) => {
   emits('payment', orderId);
 };
 </script>

src/pages/mine/subs/order/detail.vue

@@ -1,7 +1,7 @@
 <template>
   <scroll-view scroll-y>
     <view class='content'>
-      <view class='countdown c-flex-row' v-if='orderBean?.order.payStatus==1'>
+      <view class='countdown c-flex-row' v-if='isPending(orderBean?.order)'>
         <image :src='assetsUrl("ic_order.png")' />
         <view class='c-flex-column'>
           <text>
@@ -10,23 +10,23 @@
           <view class='c-flex-row'>
             <image :src='assetsUrl("ic_time.png")' />
             <text>支付剩余时间
-              <text style='color: #F32B2B'>05:23</text>
+              <text style='color: #F32B2B'>{{ dayjs.unix(orderBean?.order?.countdown || 0).format('mm:ss') }}</text>
             </text>
           </view>
         </view>
       </view>
-      <view class='address-view c-flex-column'>
+      <view class='address-view c-flex-column' v-if='orderBean?.order?.address'>
         <view class='user-info c-flex-row'>
-          <text>默认</text>
-          <text>黄先生</text>
-          <text>155****6532</text>
+          <text v-if='orderBean.order.address.defaultstatus==1'>默认</text>
+          <text>{{ orderBean?.order?.address.name }}</text>
+          <text>{{ orderBean?.order?.address.mobile }}</text>
           <view style='flex: 1' />
           <text style='color: #5B96FB'>复制</text>
         </view>
 
         <view class='addr c-flex-row'>
           <image :src='assetsUrl("ic_location.png")' />
-          <text>湖南省 长沙市 详细地址详细地址详细地址</text>
+          <text>{{ orderBean?.order?.address.addr }}</text>
         </view>
         <image class='dashed-line' :src='assetsUrl("ic_address_dashed_line.png")' />
       </view>
@@ -93,9 +93,9 @@
         <text>下单时间：{{ orderBean?.order?.createTime }}</text>
       </view>
 
-      <view class='bottom-action-view c-flex-row' v-if='orderBean?.order.payStatus==1'>
+      <view class='bottom-action-view c-flex-row' v-if='isPending(orderBean?.order)'>
         <text @click.stop='cancel' style='display: none'>取消订单</text>
-        <sqb-pay @bindnavigateTo='navigateTo'
+        <sqb-pay @navigateTo='navigateTo'
                  :return_url='buildSqbParams.return_url'
                  :total_amount='buildSqbParams.total_amount'
                  :terminal_sn='buildSqbParams.terminal_sn'
@@ -118,6 +118,9 @@ import { OrderBean } from '@/api/order/types';
 import { parseParameter, sortASCII } from '@/utils';
 import { hexMD5 } from '@/utils/common/md5';
 import { useUserStore } from '@/store';
+import { handlePayResult, isPending } from '@/utils/order';
+import dayjs from 'dayjs';
+import { pay } from '@/api/groupbuy';
 
 const userState = useUserStore();
 const { terminalInfo } = storeToRefs(userState);
@@ -128,12 +131,19 @@ const orderBean = ref<{
   paymentList: []
 }>();
 
+let currentInterval = 0;
+
 onLoad(async (e: any) => {
   await uni.showLoading();
   orderBean.value = await getOrderDetail(e.orderId);
+  handleCountdown();
   uni.hideLoading();
 });
 
+onUnload(() => {
+  clearInterval(currentInterval);
+});
+
 const buildSqbParams = computed(() => {
   const params = sortASCII({
     client_sn: orderBean.value?.order?.id || '',
@@ -152,16 +162,32 @@ const buildSqbParams = computed(() => {
 
 const navigateTo = (e: any) => {
   console.log('--------------_>>>>>>navigateTo ', e);
-  uni.redirectTo({
-    url: e.detail.url,
-    fail(e) {
-      uni.showToast({
-        title: '支付失败'
-      });
+  handlePayResult(orderBean.value?.order.id, e, {
+    onSuccess: () => {
+      // pay({
+      //   'orderId': orderBean.value?.order.id,
+      //   'result': 'xxx'
+      // });
     }
   });
 };
 
+const handleCountdown = () => {
+  clearInterval(currentInterval);
+  let second = 30 * 60;
+  currentInterval = setInterval(() => {
+    if(isPending(orderBean.value?.order)) {
+      orderBean.value!.order!.countdown = second;
+      if(orderBean.value!.order!.countdown <= 0) {
+        orderBean.value!.order!.countdown = 0;
+      } else {
+        uni.navigateBack();
+      }
+      second--;
+    }
+  }, 1000);
+};
+
 const cancel = () => {
 };
 const payment = () => {

src/pages/mine/subs/order/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <tabbar :titles="['全部', '进行中', '已结束']" @change='tabChange' />
+  <tabbar :titles="['全部', '未支付', '已支付']" :index='payStatus' @change='tabChange' />
   <u-list :list='orderList' :border='false' @scrolltolower='loadMore'>
     <u-list-item v-for='(item,index) in orderList' :key='index'>
       <order-item :item='item' @addShoppingCart='addShoppingCart' @pay='payment' />
@@ -13,12 +13,13 @@
 <script lang='ts' setup>
 
 import { ref } from 'vue';
+import { showToast } from '@/utils';
+import { isPending } from '@/utils/order';
 import { getOrderList } from '@/api/order';
 import OrderItem from '@/pages/mine/subs/order/components/order-item.vue';
 import { OrderBean } from '@/api/order/types';
 import SkuDialog from '@/components/sku-dialog.vue';
 import { GoodsBean, StockBean } from '@/api/goods/types';
-import { showToast } from '@/utils';
 import useShoppingCartStore from '@/store/modules/shoppingcart';
 
 const shoppingCartStore = useShoppingCartStore();
@@ -28,8 +29,15 @@ const orderList = ref<OrderBean[]>([]);
 const currentPageNum = ref(1);
 const payStatus = ref(0);
 
-onLoad((e) => {
-  fetchData();
+let currentInterval = 0;
+
+onLoad((e: any) => {
+  const index = Number(e.index) || 0;
+  tabChange(index);
+});
+
+onUnload(() => {
+  clearInterval(currentInterval);
 });
 
 const tabChange = (index: number) => {
@@ -51,8 +59,26 @@ const fetchData = async (refresh: boolean = true) => {
   } else {
     orderList.value = orderList.value.concat(list);
   }
+  handleCountdown(orderList.value.filter(item => item.payStatus == 1));
 };
 
+const handleCountdown = (items: OrderBean[]) => {
+  clearInterval(currentInterval);
+  let second = 30 * 60;
+  currentInterval = setInterval(() => {
+    items.forEach(item => {
+      if(isPending(item)) {
+        item.countdown = second;
+        if(item.countdown <= 0) {
+          item.countdown = 0;
+        }
+        second--;
+      }
+    });
+  }, 1000);
+};
+
+
 const loadMore = () => {
   fetchData(false);
 };