优化显示

miniprogram/components/apply-refound/apply-refound.ts

@@ -21,6 +21,7 @@ Component({
    * 组件的初始数据
    */
   data: {
+    submitStatus: false,
     refoundValue: "", // 退款内容
     refoundPhone: ''
   },
@@ -58,6 +59,9 @@ Component({
         return
       }
       try {
+        this.setData({
+          submitStatus: true
+        })
         const { goods, orderNo } = this.data.goodsInfo
         const details: any = []
         goods.forEach((item: any) => {
@@ -77,6 +81,9 @@ Component({
           userRefundOrderDetails: details
         }
         const { data } = await api_userPaymentOrderRefundPayment(params)
+        this.setData({
+          submitStatus: false
+        })
         if (data.code == 200) {
           wx.showToast({ title: '申请成功', icon: 'none' })
           this.triggerEvent('onConfirm')

miniprogram/components/apply-refound/apply-refound.wxml

@@ -16,7 +16,7 @@
         <input placeholder="请输入手机号码" type="number" maxlength="11" bindinput="phoneInput" value="{{ refoundPhone }}"></input>
       </view>
       <view class="btnSection">
-        <button type="primary" bind:tap="onRefound">提交申请</button>
+        <button type="primary" disabled="{{ submitStatus }}" bind:tap="onRefound">提交申请</button>
       </view>
     </view>
   </view>

miniprogram/components/service/service.wxml

@@ -2,7 +2,7 @@
 <view class="service-container" wx:if="{{ popShow }}">
   <view class="service-mask" bind:tap="onClose"></view>
   <view class="service-section" bind:tap="onClose">
-    <image src="https://oss.dayaedu.com/ktyq/1732155965679.png" data-src="https://oss.dayaedu.com/ktyq/1732155965679.png" mode="aspectFill" catch:tap="onOpen" show-menu-by-longpress="true" catch:longtap="onPerview" class="iconImg"></image>
+    <image src="https://oss.dayaedu.com/ktyq/1732607920916.png" data-src="https://oss.dayaedu.com/ktyq/1732607920916.png" mode="aspectFill" catch:tap="onOpen" show-menu-by-longpress="true" catch:longtap="onPerview" class="iconImg"></image>
 
     <image src="./images/icon-close.png" catch:tap="onClose" class="iconClose"></image>
   </view>

miniprogram/pages/index/index.ts

@@ -12,11 +12,11 @@ Page({
    */
   data: {
     imgList: [
-      'https://oss.dayaedu.com/ktyq/1731664204915.png',
-      'https://oss.dayaedu.com/ktyq/1731664238525.png',
-      'https://oss.dayaedu.com/ktyq/1731664250837.png',
-      'https://oss.dayaedu.com/ktyq/1731664259087.png',
-      'https://oss.dayaedu.com/ktyq/1731664269098.png',
+      'https://oss.dayaedu.com/ktyq/1732610921517.png',
+      'https://oss.dayaedu.com/ktyq/1732610940095.png',
+      'https://oss.dayaedu.com/ktyq/1732610952376.png',
+      'https://oss.dayaedu.com/ktyq/1732610965625.png',
+      // 'https://oss.dayaedu.com/ktyq/1731664269098.png',
     ],
     goodsImgList: [
       'https://oss.dayaedu.com/ktyq/1731664304424.png',

miniprogram/pages/index/index.wxml

@@ -2,7 +2,7 @@
 <scroll-view class="scrollarea" scroll-y="{{popupShow ? false : true}}" type="list">
   <view class="container">
     <!-- <view class="topShadow"></view> -->
-    <view class="slider-count">{{current + 1}}/{{5}}</view>
+    <view class="slider-count">{{current + 1}}/{{imgList.length}}</view>
     <swiper indicator-dots="{{false}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="changeSwiper">
       <swiper-item wx:for="{{imgList}}" wx:key="index">
         <view class="swiper-item">
@@ -22,7 +22,7 @@
           <view class="originPrice" wx:if="{{ selected.originalPrice > selected.salePrice }}">¥{{ selected.originalPrice || '0.00' }}</view>
         </view>
         <view class="right">
-          已售100w+
+          已售1w+
         </view>
       </view>
 

miniprogram/pages/orders/order-result.less

@@ -106,6 +106,29 @@ page {
     }
   }
 }
+
+/* HTML: <div class="loader"></div> */
+.loader {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  right: 0;
+  bottom: 0;
+  margin-top: -50rpx;
+  margin-left: -50rpx;
+  z-index: 9;
+  width: 100rpx;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background: 
+    radial-gradient(farthest-side,#E8E8E8 94%,#0000) top/8px 8px no-repeat,
+    conic-gradient(#0000 30%,#E8E8E8);
+  -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 8px),#000 0);
+  animation: tempLoading 1s infinite linear;
+}
+@keyframes tempLoading{ 
+  100%{transform: rotate(1turn)}
+}
 .only_canvas {
   position: absolute;
   left: -300rpx;
@@ -120,6 +143,7 @@ page {
   padding-bottom: 32rpx;
   text-align: center;
   .qrcode-wrap {
+    position: relative;
     margin: 0 auto;
     border: 3rpx solid #EDEDED;
     padding: 10rpx;
@@ -251,5 +275,11 @@ page {
     font-size: 32rpx;
     color: #FFFFFF;
     line-height: 44rpx;
+
+    &[disabled][type=primary] {
+      color: #fff;
+      background: linear-gradient( 270deg, #FF204B 0%, #FE5B71 100%);
+      opacity: 0.7;
+    }
   }
 }

miniprogram/pages/orders/order-result.ts

@@ -46,9 +46,11 @@ Page({
     goodsInfo: {} as any,
     orderNo: "" as string,
     showCanvas: false, // 是否显示二维码
+    tabIdx: 0, // 当前是从哪个tab来的
     canvasImg: "" as string,
     showService: false,
-    refoundStatus: false
+    refoundStatus: false,
+    cancelRefoundStatus: false,
   },
 
   /**
@@ -57,7 +59,8 @@ Page({
   onLoad(options: any) {
     if (options.orderNo) {
       this.setData({
-        orderNo: options.orderNo
+        orderNo: options.orderNo,
+        tabIdx: options.tabIdx
       }, () => {
         this.getDetail(this.onTimeout)
       });
@@ -218,21 +221,26 @@ Page({
   },
   /** 申请退款 */
   async cancelRefound() {
-    try {
-      const {data} = await api_userPaymentCancelRefund(this.data.goodsInfo.refundOrderId)
-      // console.log(data, 'data')
-      if(data.code == 200) {
-        wx.showToast({ title: '取消退款成功', icon: 'none' })
-        // setTimeout(() => {
-        //   wx.navigateBack({
-        //     delta: 1
-        //   })
-        // }, 1000);
-        this.getDetail()
-      } else {
-        wx.showToast({ title: data.message, icon: 'none' })
-      }
-    } catch {}
+    this.setData({
+      cancelRefoundStatus: true
+    }, async () => {
+      try {
+        const {data} = await api_userPaymentCancelRefund(this.data.goodsInfo.refundOrderId)
+        // console.log(data, 'data')
+        if(data.code == 200) {
+          wx.showToast({ title: '取消退款成功', icon: 'none' })
+          this.getDetail()
+        } else {
+          wx.showToast({ title: data.message, icon: 'none' })
+        }
+        setTimeout(() => {
+          this.setData({
+            cancelRefoundStatus: false
+          })
+        }, 500);
+      } catch {}
+    })
+    
   },
   /** 申请退款 */
   useRefound() {

miniprogram/pages/orders/order-result.wxml

@@ -30,6 +30,8 @@
           <view class="qrcode-wrap">
             <!-- <canvas class='my_draw_canvas' data-type="image" canvas-id='canvasCode' id="canvasCode"></canvas> -->
             <image src="{{canvasImg}}" mode="scaleToFill" class='my_draw_canvas' style="opacity: {{ goodsInfo.wechatStatus == 'PAID' ? 0.4 : 1 }};" show-menu-by-longpress="true"></image>
+
+            <view class="loader" wx:if="{{!canvasImg}}"></view>
           </view>
           <view class="qrcode-text" wx:if="{{goodsInfo.wechatStatus == 'WAIT_USE'}}">请扫描二维码激活使用</view>
           <view class="qrcode-text used" wx:else>二维码已使用</view>
@@ -65,7 +67,7 @@
         </view>
       </view>
 
-      <view class="btn-refound" bind:tap="useRefound"  wx:if="{{ goodsInfo.wechatStatus == 'WAIT_USE' }}">申请退款</view>
+      <view class="btn-refound" bind:tap="useRefound"  wx:if="{{ goodsInfo.wechatStatus == 'WAIT_USE' && tabIdx == 5 }}">申请退款</view>
     </view>
   </scroll-view>
 
@@ -76,7 +78,7 @@
     </view>
     <!-- <button type="primary" bind:tap="useRefound" wx:if="{{ goodsInfo.wechatStatus == 'WAIT_USE' }}">申请退款</button>
     <block wx:else> -->
-      <button type="primary" bind:tap="cancelRefound" wx:if="{{ goodsInfo.wechatStatus == 'REFUNDING' }}">取消退款</button>
+      <button type="primary" bind:tap="cancelRefound" disabled="{{cancelRefoundStatus}}" wx:if="{{ goodsInfo.wechatStatus == 'REFUNDING' }}">取消退款</button>
       <button type="primary" wx:else bind:tap="onSubmit">再来一单</button>
     <!-- </block> -->
   </view>

miniprogram/pages/orders/orders.ts

@@ -43,6 +43,7 @@ Page({
     recordList: [],
     maxPage: 1, // 总分页数
     refoundStatus: false,
+    cancelRefoundStatus: false,
     goodsInfo: {}, // 选中的数据
   },
 
@@ -202,7 +203,7 @@ Page({
       this.onSubmit({orderNo: dataset.orderno})
     } else {
       wx.navigateTo({
-        url: '../orders/order-result?orderNo=' + dataset.orderno
+        url: `../orders/order-result?orderNo=${dataset.orderno}&tabIdx=${this.data.tabIdx}`
       })
     }
   },
@@ -308,23 +309,23 @@ Page({
     }
 
     if(item.wechatStatus === "REFUNDING") {
-      wx.showLoading({
-        title: '加载中...',
-        mask: true,
-      })
-      try {
-        const refundOrderId = item.refundOrderId
-        const {data} = await api_userPaymentCancelRefund(refundOrderId)
-        wx.hideLoading()
-        if(data.code == 200) {
-          wx.showToast({ title: '取消退款成功', icon: 'none' })
-          this.onRefoundComfirm()
-        } else {
-          wx.showToast({ title: data.message, icon: 'none' })
+      this.setData({
+        cancelRefoundStatus: true
+      }, async () => {
+        try {
+          const refundOrderId = item.refundOrderId
+          const {data} = await api_userPaymentCancelRefund(refundOrderId)
+          wx.hideLoading()
+          if(data.code == 200) {
+            wx.showToast({ title: '取消退款成功', icon: 'none' })
+            this.onRefoundComfirm()
+          } else {
+            wx.showToast({ title: data.message, icon: 'none' })
+          }
+        } catch {
         }
-      } catch {
-        wx.hideLoading()
-      }
+      })
+     
     } else {
       const { orderNo, studentPaymentOrderDetails } = item
       const goodsInfo: any = {
@@ -342,13 +343,15 @@ Page({
       }
       this.setData({
         goodsInfo,
+        cancelRefoundStatus: true,
         refoundStatus: true
       })
     }
   },
   changeRefoundStatus(e: {detail: any}) {
     this.setData({
-      refoundStatus: e.detail
+      refoundStatus: e.detail,
+      cancelRefoundStatus: false,
     })
   },
   onRefoundComfirm() {
@@ -360,6 +363,7 @@ Page({
       that.setData({
         page: 1,
         maxPage: 1,
+        cancelRefoundStatus: false,
         recordList: [],
       }, () => {
         this.getList()

miniprogram/pages/orders/orders.wxml

@@ -34,8 +34,8 @@
                 订单金额：<text class="price-first">¥ </text><text class="price">{{item.amount}}</text>
               </view>
               <block wx:if="{{ item.wechatStatus == 'REFUNDING' || (item.wechatStatus == 'WAIT_USE' && tabIdx == 5) }}" wx:key="block">
-                <button wx:if="{{ item.wechatStatus == 'REFUNDING' }}" type="primary" wx:if="{{ item.wechatStatus == 'REFUNDING' }}"  catch:tap="onRefounded" data-id="{{item.id}}">取消退款</button>
-                <button wx:else type="primary" catch:tap="onRefounded" data-id="{{item.id}}">申请退款</button>
+                <button wx:if="{{ item.wechatStatus == 'REFUNDING' }}" type="primary" wx:if="{{ item.wechatStatus == 'REFUNDING' }}" disabled="{{ cancelRefoundStatus }}" catch:tap="onRefounded" data-id="{{item.id}}">取消退款</button>
+                <button wx:else type="primary" disabled="{{ cancelRefoundStatus }}" catch:tap="onRefounded" data-id="{{item.id}}">申请退款</button>
               </block>
               <block wx:else wx:key="block">
                 <button class="sure" type="primary" wx:if="{{ item.wechatStatus == 'WAIT_PAY' }}"  catch:tap="onPay" data-id="{{item.id}}">继续支付</button>