更新

api/order.js

@@ -24,3 +24,8 @@ export const rePaymentApi = (data)=>{
 export const orderCountApi = (data)=>{
   return request.post('/order/RetailOrder/order_count', data);
 }
+
+//取消订单
+export const cancelOrderApi = (data)=>{
+  return request.post('/order/RetailOrder/cancel_order', data);
+}

components/modal.vue

@@ -4,8 +4,8 @@
       <view class="head-title-modal">{{title}}</view>
       <view class="content-modal">{{content}}</view>
       <view class="btn-box-modal">
-        <view style="width: 230rpx;"><up-button @click="close" plain color="#999">{{cancleText}}</up-button></view>
+        <view style="width: 230rpx;"><up-button @click="close" plain color="#999" :throttleTime="800">{{cancleText}}</up-button></view>
-        <view style="width: 230rpx;"><up-button @click="change" color="#20B128">{{confirmText}}</up-button></view>
+        <view style="width: 230rpx;"><up-button @click="change" color="#20B128" :throttleTime="800">{{confirmText}}</up-button></view>
       </view>
     </view>
   </up-popup>

pagesOrder/detail/detail.vue

@@ -104,7 +104,7 @@
       <block v-if="!datas.paid">
         <view style="color: #777777;" @click="showCancel=true">取消订单</view>
         <view style="width: 450rpx;">
-          <up-button color="#20B128" shape="circle" @click="rePay">立即支付 ¥{{datas.total}}</up-button>
+          <up-button color="#20B128" shape="circle" @click="rePay" :throttleTime="1000">立即支付 ¥{{datas.total}}</up-button>
         </view>
       </block>
       <block v-else>
@@ -128,17 +128,26 @@
   import addressPopup from "@/components/addressPopup.vue";
   import orderCanclePopup from "@/components/orderCanclePopup.vue";
   import modal from "@/components/modal.vue";
-  import { orderDetailApi, rePaymentApi } from "@/api/order.js"
+  import { orderDetailApi, cancelOrderApi, rePaymentApi } from "@/api/order.js"
   import { addressListsApi, merchantListApi } from "@/api/user.js";
 
   const showCancel = ref(false);
 
   const submitCancel = (e) => {
     showCancel.value = false;
-    console.log(e);
+    cancelOrderApi({
-    uni.showToast({
+      order_id: datas.value.id,
-      title: '取消成功',
+      value: e.value
-      icon: 'none'
+    }).then(res=>{
+      uni.showToast({
+        title: '取消成功',
+        icon: 'none'
+      })
+      uni.navigateBack({
+        success: () => {
+          uni.$emit('reLoadOrderList')
+        }
+      });
     })
   }
   
@@ -154,6 +163,8 @@
         timer = setInterval(updateCountdown, 1000);
         updateCountdown();
       }
+    }).catch(err=>{
+      uni.navigateBack();
     })
   }
   
@@ -197,7 +208,35 @@
       order_id: datas.value.id,
       pay_type: 1
     }).then(res=>{
-      console.log(res);
+      if(!res.data?.nonceStr) return uni.$u.toast('支付失败!');
+      uni.requestPayment({
+        provider: 'wxpay',
+        timeStamp: res.data.timeStamp,
+        nonceStr: res.data.nonceStr,
+        package: res.data.package,
+        signType: res.data.signType,
+        paySign: res.data.paySign,
+        success: (e) => {
+          if(e.errMsg == 'requestPayment:ok'){
+            uni.showModal({
+              title: '订单支付成功',
+              confirmText: '确认',
+              success: (e) => {
+                uni.navigateBack({
+                  success: () => {
+                    uni.$emit('reLoadOrderList')
+                  }
+                });
+              }
+            })
+          }else uni.$u.toast('支付失败')
+        },
+        fail: (e) => {
+          uni.$u.toast('用户取消支付')
+        }
+      })
+    }).catch(err=>{
+      uni.$u.toast('网络错误')
     })
   }
   

pagesOrder/order/component/good.vue

@@ -27,7 +27,7 @@
     </view>
     <view v-if="datas.paid==0" class="item-btn">
       <view style="width: 80px;"><up-button size="small" plain color="#989898" shape="circle" @click="cancleOrder">取消订单</up-button></view>
-      <view style="width: 80px;"><up-button size="small" plain color="#20B128" shape="circle">立即支付</up-button></view>
+      <view style="width: 80px;"><up-button size="small" plain color="#20B128" shape="circle" @click="rePay">立即支付</up-button></view>
     </view>
     <view v-else class="item-btn">
       <!-- <view style="width: 80px;"><up-button size="small" plain color="#989898" shape="circle">申请售后</up-button></view> -->
@@ -67,10 +67,14 @@
     })
   }
   
-  const emit = defineEmits(['cancleOrder']);
+  const emit = defineEmits(['cancleOrder', 'rePay']);
   const cancleOrder = ()=>{
     emit('cancleOrder', props.datas)
   }
+  
+  const rePay = ()=>{
+    emit('rePay', props.datas)
+  }
 </script>
 
 <style lang="scss">

pagesOrder/order/order.vue

@@ -2,23 +2,33 @@
   <view>
     <up-sticky bgColor="#fff">
       <view style="padding: 10rpx 20rpx 0 20rpx;">
-        <up-search shape="round" v-model="where.keyword" @custom="searchOn" @search="searchOn" @clear="searchOn" :actionStyle="{color: '#20b128'}" ></up-search>
+        <up-search shape="round" v-model="keyword" @custom="searchOn" @search="searchOn" @clear="searchOn"
+          :actionStyle="{color: '#20b128'}"></up-search>
       </view>
-      <up-tabs :current="tabsActive" :list="tablist" lineColor="#20b128" :scrollable="false" :activeStyle="	{ color: '#20b128', fontWeight: 'bold' }" @change="changeTab"></up-tabs>
+      <up-tabs :current="tabsActive" :list="tablist" lineColor="#20b128" :scrollable="false"
+        :activeStyle="	{ color: '#20b128', fontWeight: 'bold' }" @change="changeTab"></up-tabs>
     </up-sticky>
 
     <swiper class="swiper-box" :current="swiperCurrent" @animationfinish="animationfinish">
       <swiper-item class="swiper-item" v-for="(list, k) in orderList" :key="k">
-        <scroll-view scroll-y style="height: 100%;width: 100%;">
+        <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="loadMoreGood">
           <view class="page-box">
             <view v-if="list.length>0" class="list">
-              <good v-for="(item, index) in list" :datas="item" :key="index" :type="k" @cancleOrder="cancleOrder"></good>
+              <good v-for="(item, index) in list" :datas="item" :key="index" :type="k" @cancleOrder="cancleOrder"
+                @rePay="rePay"></good>
             </view>
-            <view v-else style="padding-top: 100rpx;">
+            <view v-if="!where[k].loading&&list.length==0" style="padding-top: 100rpx;">
               <up-empty text="订单空空如也"
                 icon="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/29955202404260944367594.png">
               </up-empty>
             </view>
+            <view v-else-if="where[k].loadend" style="padding-top: 100rpx;">
+              <view style="text-align: center;color: #999;">没有更多了</view>
+            </view>
+            <view v-if="where[k].loading" style="padding-top: 100rpx;display: flex;flex-direction: column;align-items: center;">
+              <up-loading-icon mode="circle"></up-loading-icon>
+              <view style="margin-top: 20rpx;color: #999;">加载中</view>
+            </view>
             <view style="width: 100%;height: 200rpx;"></view>
           </view>
         </scroll-view>
@@ -34,9 +44,10 @@
   import good from "./component/good.vue";
   import orderCanclePopup from "@/components/orderCanclePopup.vue"
   import { orderListApi } from "@/api/order.js";
+  import { cancelOrderApi, rePaymentApi } from "@/api/order.js"
 
   const tabsActive = ref(0)
-  const changeTab = ({index}) => {
+  const changeTab = ({ index }) => {
     tabsActive.value = index;
     swiperCurrent.value = index;
   }
@@ -52,64 +63,150 @@
   const animationfinish = ({ detail: { current } }) => {
     swiperCurrent.value = current;
     tabsActive.value = current;
+    if (swiperCurrent.value == 0 && orderList.value[0].length == 0) getOrderList(0);
+    if (swiperCurrent.value == 1 && orderList.value[1].length == 0) getOrderList(1, '', 0);
+    if (swiperCurrent.value == 2 && orderList.value[2].length == 0) getOrderList(2, 0);
+    if (swiperCurrent.value == 3 && orderList.value[3].length == 0) getOrderList(3, 1);
   }
 
   const showCancel = ref(false);
+  let cancelId = '';
   const submitCancel = (e) => {
     showCancel.value = false;
-    console.log(e);
+    cancelOrderApi({
-    uni.showToast({
+      order_id: cancelId,
-      title: '取消成功',
+      value: e.value
-      icon: 'none'
+    }).then(res => {
+      uni.showToast({
+        title: '取消成功',
+        icon: 'none'
+      })
+      orderList.value[1] = orderList.value[1].filter(item => item.id !== cancelId)
     })
   }
-  const cancleOrder = (e)=>{
+  const cancleOrder = (e) => {
-    console.log(e);
+    cancelId = e.id;
     showCancel.value = true;
   }
 
+  const rePay = (e) => {
+    rePaymentApi({
+      order_id: e.id,
+      pay_type: 1
+    }).then(res => {
+      if (!res.data?.nonceStr) return uni.$u.toast('支付失败!');
+      uni.requestPayment({
+        provider: 'wxpay',
+        timeStamp: res.data.timeStamp,
+        nonceStr: res.data.nonceStr,
+        package: res.data.package,
+        signType: res.data.signType,
+        paySign: res.data.paySign,
+        success: (e) => {
+          if (e.errMsg == 'requestPayment:ok') {
+            uni.showToast({
+              title: '订单支付成功',
+              icon: 'success'
+            })
+            getOrderList(1, '', 0);
+          } else uni.$u.toast('支付失败')
+        },
+        fail: (e) => {
+          uni.$u.toast('用户取消支付')
+        }
+      })
+    }).catch(err => {
+      uni.$u.toast('网络错误')
+    })
+  }
+
   // 订单
-  const where = ref({
+  const where = ref([{
-    page_no: 1,
+      page_no: 1,
-    page_size: 25,
+      page_size: 25,
-    keyword: '',
+      loading: false,
-  })
+      loadend: false
-  const orderList= ref([
+    }, {
+      page_no: 1,
+      page_size: 25,
+      loading: false,
+      loadend: false
+    },
+    {
+      page_no: 1,
+      page_size: 25,
+      loading: false,
+      loadend: false
+    },
+    {
+      page_no: 1,
+      page_size: 25,
+      loading: false,
+      loadend: false
+    }
+  ])
+  const keyword = ref('')
+  const orderList = ref([
     [],
     [],
     [],
     [],
   ])
-  const getOrderList = (type=0, status='', paid=1)=>{
+  const getOrderList = (type = 0, status = '', paid = 1) => {
+    if(where.value[type].loadend) return ;
+    where.value[type].loading = true;
     orderListApi({
-      ...where.value,
+      ...where.value[type],
+      keyword: keyword.value,
       status: status,
       paid: paid
-    }).then(res=>{
+    }).then(res => {
-      orderList.value[type] = res.data.lists;
+      if(where.value[type].page_no==1) orderList.value[type] = [];
+      orderList.value[type] = [...orderList.value[type], ...res.data.lists];
+      if(res.data.lists.length<where.value[type].page_size)where.value[type].loadend = true;
+      where.value[type].page_no++;
+      where.value[type].loading = false;
+    }).catch(err=>{
+      where.value[type].loading = false;
     })
   }
   
-  // 搜索
+  const loadMoreGood = ()=>{
-  const searchOn = ()=>{
+    if (swiperCurrent.value == 0) getOrderList(0);
-    orderList.value[+swiperCurrent.value] = [];
+    if (swiperCurrent.value == 1) getOrderList(1, '', 0);
-    if(swiperCurrent.value==0) getOrderList(0);
+    if (swiperCurrent.value == 2) getOrderList(2, 0);
-    if(swiperCurrent.value==1) getOrderList(1, '', 0);
+    if (swiperCurrent.value == 3) getOrderList(3, 1);
-    if(swiperCurrent.value==2) getOrderList(2, 0);
-    if(swiperCurrent.value==3) getOrderList(3, 1);
   }
 
-  onLoad((options)=>{
+  // 搜索
-    if(options.type){
+  const searchOn = () => {
+    orderList.value[+swiperCurrent.value] = [];
+    where.value[+swiperCurrent.value].page_no = 1;
+    if (swiperCurrent.value == 0) getOrderList(0);
+    if (swiperCurrent.value == 1) getOrderList(1, '', 0);
+    if (swiperCurrent.value == 2) getOrderList(2, 0);
+    if (swiperCurrent.value == 3) getOrderList(3, 1);
+  }
+
+  onLoad((options) => {
+    if (options.type) {
       tabsActive.value = +options.type;
       swiperCurrent.value = +options.type;
+      searchOn();
     }
-    getOrderList(0);
+    // getOrderList(0);
-    getOrderList(1, '', 0);
+    // getOrderList(1, '', 0);
-    getOrderList(2, 0);
+    // getOrderList(2, 0);
-    getOrderList(3, 1);
+    // getOrderList(3, 1);
-  })
 
+    uni.$on('reLoadOrderList', () => { //对订单进行操作时刷新页面
+      where.value.forEach(item=>item.page_no=1);
+      getOrderList(1, '', 0);
+      getOrderList(0);
+      getOrderList(2, 0);
+      getOrderList(3, 1);
+    });
+  })
 </script>
 
 <style lang="scss">
@@ -127,10 +224,9 @@
     }
   }
 
-  .page-box{
+  .page-box {
     margin: 20rpx;
-    .list{
 
-    }
+    .list {}
   }
 </style>

pagesOrder/settle/settle.vue

@@ -111,7 +111,7 @@
         </view>
       </view>
       <view style="width: 200rpx;">
-        <up-button color="#20B128" shape="circle" @click="submitOrder">提交订单</up-button>
+        <up-button color="#20B128" shape="circle" @click="submitOrder" :throttleTime="1000">提交订单</up-button>
       </view>
     </view>
 
@@ -206,7 +206,6 @@
         uni.$u.toast('定位失败, 请手动选择提货点!')
       },
       complete: (res) => {
-        console.log("===", res);
         myAddressInfo.value.long = res.longitude || "";
         myAddressInfo.value.lat = res.latitude || "";
         getMerchantList();
@@ -259,6 +258,7 @@
       mer_id: shopInfo.value.mer_id,
       pay_type: 1
     }).then(res=>{
+      if(!res.data?.nonceStr) return uni.$u.toast('支付失败!');
       uni.requestPayment({
         provider: 'wxpay',
         timeStamp: res.data.timeStamp,
@@ -285,17 +285,8 @@
           uni.$u.toast('用户取消支付')
         }
       })
-      // uni.showModal({
+    }).catch(err=>{
-      //   title: '订单支付成功',
+      uni.$u.toast('网络错误')
-      //   confirmText: '查看订单',
-      //   cancelText: '继续购买',
-      //   success: (e) => {
-      //     if(e.confirm) uni.navigateTo({
-      //       url: '/pagesOrder/order/order'
-      //     })
-      //     else uni.navigateBack();
-      //   }
-      // })
     })
   }
   

store/user.js

@@ -20,7 +20,7 @@ const useUserStore = defineStore("user", () => {
   }
 
   // #ifdef H5
-  token.value = "31f74a72e2d05673ec14d2a6408718ef"
+  token.value = "f9421a985006bf3f73bbaff6193da353"
   userInfo.value = {
     avatar: "https://lihaiim.oss-cn-chengdu.aliyuncs.com/image/admin/default_avatar.png",
     id: 9,
@@ -29,7 +29,7 @@ const useUserStore = defineStore("user", () => {
     mobile: "19330904744",
     nickname: "用户1714964250",
     supplier: null,
-    token: "33bb1ca5e6c98a6f948ad56b75471fb8"
+    token: "f9421a985006bf3f73bbaff6193da353"
   }
   // #endif