lex-xin 4 ماه پیش
والد
کامیت
424f38b46d

+ 3 - 4
miniprogram/components/apply-refound/apply-refound.less

@@ -21,7 +21,6 @@
     right: 0;
     bottom: 0;
     width: 100%;
-    background: linear-gradient( 180deg, #FFDEE7 0%, #FFFFFF 12%, #FFFFFF 100%);
     background-color: #fff;
     border-radius: 32rpx 32rpx 0rpx 0rpx;
     .icon-close {
@@ -72,7 +71,7 @@
         color: #131415;
         padding-bottom: 24rpx;
         .red {
-          color: #F44541;
+          color: #FC1A19;
         }
         .sencd {
           color: #AAAAAA;
@@ -93,8 +92,8 @@
       button {
         margin: 0;
         width: 100%;
-        background: linear-gradient( 270deg, #FF204B 0%, #FE5B71 100%);
-        border-radius: 78rpx;
+        background: linear-gradient( 315deg, #FF4A00 0%, #FE8C00 100%);
+        border-radius: 16rpx;
         padding: 22rpx 84rpx;
         font-weight: 500;
         font-size: 32rpx;

+ 9 - 11
miniprogram/components/navigation-bar/navigation-bar.ts

@@ -60,17 +60,15 @@ Component({
   lifetimes: {
     attached() {
       const rect = wx.getMenuButtonBoundingClientRect()
-      wx.getSystemInfo({
-        success: (res) => {
-          const isAndroid = res.platform === 'android'
-          const isDevtools = res.platform === 'devtools'
-          this.setData({
-            ios: !isAndroid,
-            innerPaddingRight: `padding-right: ${res.windowWidth - rect.left}px`,
-            leftWidth: `width: ${res.windowWidth - rect.left }px`,
-            safeAreaTop: isDevtools || isAndroid ? `height: calc(var(--height) + ${res.safeArea.top}px); padding-top: ${res.safeArea.top}px` : ``
-          })
-        }
+      const wxDeviceInfo = wx.getDeviceInfo()
+      const wxWindowInfo = wx.getWindowInfo()
+      const isAndroid = wxDeviceInfo.platform === 'android'
+      const isDevtools = wxDeviceInfo.platform === 'devtools'
+      this.setData({
+        ios: !isAndroid,
+        innerPaddingRight: `padding-right: ${wxWindowInfo.windowWidth - rect.left}px`,
+        leftWidth: `width: ${wxWindowInfo.windowWidth - rect.left }px`,
+        safeAreaTop: isDevtools || isAndroid ? `height: calc(var(--height) + ${wxWindowInfo.safeArea.top}px); padding-top: ${wxWindowInfo.safeArea.top}px` : ``
       })
     },
   },

+ 1 - 1
miniprogram/pages/index/index.less

@@ -367,7 +367,7 @@ page {
         }
       }
       .goodsItem {
-        margin-right: 26rpx;
+        margin-right: 24rpx;
         .goods-cover {
           width: 208rpx;
           height: 208rpx;

+ 0 - 3
miniprogram/pages/index/index.wxml

@@ -56,9 +56,6 @@
       </view>
     </view>
 
-       <view class="orders" bind:tap="onOrder">
-        <image src="./images/icon-order.png" />
-      </view>
     <view class="bottom-section">
       <view class="btnSection">
         <button bind:tap="onOrder" type="primary" disabled="{{ isOverSaled }}">我的订单</button>

BIN
miniprogram/pages/orders/images/icon-arrow.png


+ 13 - 3
miniprogram/pages/orders/order-detail.less

@@ -50,7 +50,7 @@ page {
 }
 
 .order-content {
-  margin: 24rpx 26rpx 0;
+  margin: 36rpx 26rpx 0;
   border-radius: 20rpx;
   padding: 28rpx 24rpx;
   display: flex;
@@ -94,6 +94,16 @@ page {
       font-size: 28rpx;
       color: #131415;
       line-height: 48rpx;
+
+      .stuff {
+        font-size: 28rpx;
+      }
+      .priceZ {
+        font-size: 40rpx;
+      }
+      .priceF {
+        font-size: 32rpx;
+      }
     }
   }
 
@@ -109,8 +119,8 @@ page {
       line-height: 40rpx;
     }
     .goods-num {
-      font-size: 28rpx;
-      color: #777777;
+      font-size: 26rpx;
+      color: #999999;
       line-height: 36rpx;
     }
   }

+ 1 - 1
miniprogram/pages/orders/order-detail.ts

@@ -13,7 +13,7 @@ Page({
       ing: {
         logo: './images/ing.png',
         title: '等待付款',
-        content: '请尽快完成支付,以便我们为您处理订单'
+        content: '为了确保您的订单顺利进行,请尽快完成支付'
       },
     },
     goodsInfo: {} as any,

+ 7 - 9
miniprogram/pages/orders/order-detail.wxml

@@ -17,11 +17,15 @@
         <view class="goods-desc">
           <view class="goodsInfo">
             <view class="goods-name">{{ goodsInfo.name }}</view>
-            <view class="goods-price">¥ {{ goodsInfo.salePrice }}</view>
+            <view class="goods-price">
+              <text class="stuff">¥</text>
+              <text class="priceZ">{{ goodsInfo.integerPart }}</text>
+              <text class="priceF">.{{ goodsInfo.decimalPart }}</text>
+            </view>
           </view>
           <view class="goods-type">
             <view class="goods-card">{{ goodsInfo.typeName }}</view>
-            <view class="goods-num">x1</view>
+            <view class="goods-num">共 1 件</view>
           </view>
         </view>
       </view>
@@ -40,13 +44,8 @@
   </scroll-view>
 
   <view class="order-btn">
-    <view class="orders" bind:tap="onService">
-        <image src="./images/icon-service.png" />
-        <text>客服</text>
-      </view>
-    <view class="more">
       <view class="price">
-        <view class="desc">金额:</view>
+        <view class="desc">支付金额:</view>
         <view class="currentPrice">
           <text class="stuff">¥</text>
           <text class="priceZ">{{ goodsInfo.integerPart }}</text>
@@ -54,7 +53,6 @@
         </view>
       </view>
       <button type="primary" bind:tap="onSubmit">{{ goodsInfo.orderNo ? '继续支付' : '立即支付' }}</button>
-    </view>
   </view>
 
   <service popShow="{{ showService }}" bind:changePop="changePop"></service>

+ 103 - 32
miniprogram/pages/orders/order-result.less

@@ -3,7 +3,21 @@ page {
   height: 100vh;
   display: flex;
   flex-direction: column;
-  background: #F5F6F7;
+  background: #F4F4F4;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 750rpx; 
+    background: linear-gradient(to bottom, #FB660A, #F5F6F7) #f4f4f4;
+    background-size: 750rpx;
+  }
+
+  .weui-navigation-bar__btn_goback {
+    background-color: #fff;
+  }
 }
 
 .scroll-container {
@@ -12,33 +26,44 @@ page {
 
 .order-status {
   margin: 24rpx 26rpx 0;
-  background-color: #FFFFFF;
+  // background-color: #FFFFFF;
   border-radius: 20rpx;
-  padding: 24rpx 32rpx;
+  padding: 24rpx 8rpx 24rpx 32rpx;
   .status {
     display: flex;
+    justify-content: space-between;
     image {
       width: 48rpx;
       height: 48rpx;
       margin-right: 16rpx;
     }
+    .btn-refound {
+      text-align: center;
+      font-size: 26rpx;
+      color: rgba(255,255,255,0.7);
+      line-height: 34rpx;
+      border-radius: 24rpx;
+      border: 1rpx solid rgba(255,255,255,0.7);
+      padding: 4rpx 12rpx;
+    }
+    
     text {
       font-weight: 600;
       font-size: 36rpx;
-      color: #131415;
+      color: #FFFFFF;
       line-height: 48rpx;
     }
   }
   .tips {
     padding-top: 24rpx;
     font-size: 28rpx;
-    color: #777777;
+    color: #FFFFFF;
     line-height: 40rpx;
   }
 }
 
 .order-content {
-  margin: 24rpx 26rpx 0;
+  margin: 32rpx 26rpx 0;
   border-radius: 20rpx;
   padding: 28rpx 24rpx;
   display: flex;
@@ -92,16 +117,14 @@ page {
     align-items: center;
     padding-top: 12rpx;
     .goods-card {
-      background: #FEEDF0;
       border-radius: 6rpx;
       font-size: 26rpx;
-      color: #FE2451;
+      color: #131415;
       line-height: 40rpx;
-      padding: 0 12rpx;
     }
     .goods-num {
-      font-size: 28rpx;
-      color: #777777;
+      font-size: 26rpx;
+      color: #999999;
       line-height: 36rpx;
     }
   }
@@ -110,8 +133,30 @@ page {
   position: absolute;
   left: -300rpx;
   top: 0;
-  width: 262rpx;
-  height: 262rpx;
+  width: 300rpx;
+  height: 300rpx;
+}
+/* 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)}
 }
 .qrcode-section {
   margin-top: 28rpx;
@@ -120,23 +165,54 @@ page {
   padding-bottom: 32rpx;
   text-align: center;
   .qrcode-wrap {
+    position: relative;
     margin: 0 auto;
-    border: 3rpx solid #EDEDED;
-    padding: 10rpx;
+    // border: 3rpx solid #EDEDED;
+    padding: 34rpx;
     display: inline-block;
     font-size: 0;
+    background: url('https://oss.dayaedu.com/ktyq/1732529619848.png') no-repeat center;
+    background-size: contain;
+
+    &.used {
+      .arrow {
+        display: none;
+      }
+      background: url('https://oss.dayaedu.com/ktyq/1732530067551.png') no-repeat center;
+      background-size: contain;
+    }
+
+    .arrow {
+      position: absolute;
+      left: -126rpx;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 106rpx;
+      height: 52rpx;
+    }
+    .arrow-right {
+      right: -126rpx;
+      left: auto;
+      transform: rotateY(180deg) translateY(-50%);
+    }
   }
   .my_draw_canvas {
-    width: 262rpx;
-    height: 262rpx;
+    width: 300rpx;
+    height: 300rpx;
   }
   .qrcode-text {
-    padding-top: 32rpx;
+    display: inline-block;
+    margin-top: 32rpx;
+    padding: 16rpx 32rpx;
+    font-weight: 500;
     font-size: 28rpx;
     color: #131415;
     line-height: 40rpx;
+    background: #FFE7C7;
+    border-radius: 36rpx;
+
     &.used {
-      color: #AAAAAA;
+      background: #F2F2F2;
     }
   }
 }
@@ -155,9 +231,10 @@ page {
       padding-bottom: 0;
     }
     .title {
-      font-size: 28rpx;
+      font-weight: 500;
+      font-size: 30rpx;
       color: #131415;
-      line-height: 40rpx;
+      line-height: 42rpx;
     }
     .value {
       font-size: 30rpx;
@@ -165,27 +242,21 @@ page {
       line-height: 42rpx;
       display: flex;
       &.red {
-        color: #FE2451;
+        color: #FF5000;
       }
 
       .copy {
         font-size: 30rpx;
-        color: #FE2451;
+        color: #FF5000;
         line-height: 42rpx;
         display: flex;
         align-items: center;
+        font-weight: 400;
         padding-left: 16rpx;
       }
     }
   }
 }
-.btn-refound {
-  padding-top: 40rpx;
-  text-align: center;
-  font-size: 28rpx;
-  color: #A7ABAF;
-  line-height: 40rpx;
-}
 
 .order-btn {
   position: fixed;
@@ -244,8 +315,8 @@ page {
   button {
     margin: 0;
     width: 100%;
-    background: linear-gradient( 270deg, #FF204B 0%, #FE5B71 100%);
-    border-radius: 78rpx;
+    background: linear-gradient( 315deg, #FF4A00 0%, #FE8C00 100%);
+    border-radius: 16rpx;
     padding: 22rpx 84rpx;
     font-weight: 500;
     font-size: 32rpx;

+ 14 - 14
miniprogram/pages/orders/order-result.ts

@@ -13,32 +13,32 @@ Page({
       WAIT_PAY: {
         logo: './images/ing.png',
         title: '等待付款',
-        content: '请尽快完成支付,以便我们为您处理订单'
+        content: '为了确保您的订单顺利进行,请尽快完成支付'
       },
       PAID: {
         logo: './images/success.png',
-        title: '交易完成',
-        content: '登录「音乐数字课堂」APP使用AI学练'
+        title: '完成',
+        content: '登录「音乐数字课堂」APP,开启AI学练之旅~'
       },
       CLOSED: {
         logo: './images/error.png',
-        title: '交易取消',
-        content: '您的交易订单已关闭'
+        title: '取消',
+        content: '您的订单已关闭,如有需要请重新下单'
       },
       WAIT_USE: {
         logo: './images/wait.png',
-        title: '待使用',
-        content: '请尽快扫描下方二维码进行激活'
+        title: '待使用',
+        content: '为了顺利使用,请尽快扫描下方二维码进行激活'
       },
       REFUNDING: {
         logo: './images/refounding.png',
         title: '退款中',
-        content: '您的退款申请正在处理,预计7个工作日内完成审核'
+        content: '您的订单正在退款中,预计7个工作日内审核完'
       },
       REFUNDED: {
         logo: './images/refounded.png',
-        title: '退款成功',
-        content: '您的退款已成功处理,感谢您的理解和支持'
+        title: '退款',
+        content: '您的订单已成功退款,感谢您的耐心等待'
       }
     },
     timerCount: 0,
@@ -145,12 +145,12 @@ Page({
     })
   },
   setCanvasSize: function () {
-    var size = {} as any;
+    const size = {} as any;
     try {
       const res = wx.getWindowInfo()
-      var scale = 750 / 262; //不同屏幕下canvas的适配比例;设计稿是750宽
-      var width = res.windowWidth / scale;
-      var height = width; //canvas画布为正方形
+      const scale = 750 / 300; //不同屏幕下canvas的适配比例;设计稿是750宽
+      const width = res.windowWidth / scale;
+      const height = width; //canvas画布为正方形
       size.w = width;
       size.h = height;
     } catch (e) {

+ 12 - 14
miniprogram/pages/orders/order-result.wxml

@@ -1,13 +1,14 @@
 <!--pages/orders/order-detail.wxml-->
 <view class="container">
-  <navigation-bar title="订单详情"></navigation-bar>
+  <navigation-bar color="#fff" title="订单详情"></navigation-bar>
 
   <scroll-view class="record-list" type="list" scroll-y bindscrolltolower="loadMore">
     <view class="scroll-container">
       <view class="order-status" wx:if="{{statusList[status]}}">
         <view class="status">
-          <image src="{{ statusList[status].logo }}"></image>
+          <!-- <image src="{{ statusList[status].logo }}"></image> -->
           <text>{{ statusList[status].title }}</text>
+          <view class="btn-refound" bind:tap="useRefound"  wx:if="{{ goodsInfo.wechatStatus == 'WAIT_USE' }}">申请退款</view>
         </view>
         <view class="tips" wx:if="{{ statusList[status].content }}">{{ statusList[status].content }}</view>
       </view>
@@ -22,14 +23,17 @@
             </view>
             <view class="goods-type">
               <view class="goods-card">{{ item.typeName }}</view>
-              <view class="goods-num">x1</view>
+              <view class="goods-num">共 {{ item.goodsNum }} 件</view>
             </view>
           </view>
         </view>
         <view class="qrcode-section" wx:if="{{ (goodsInfo.wechatStatus == 'PAID' || goodsInfo.wechatStatus == 'WAIT_USE') && showCanvas }}">
-          <view class="qrcode-wrap">
-            <!-- <canvas class='my_draw_canvas' data-type="image" canvas-id='canvasCode' id="canvasCode"></canvas> -->
+          <view class="qrcode-wrap {{goodsInfo.wechatStatus == 'WAIT_USE' ? '' : 'used' }}">
+            <image class="arrow arrow-left" src="./images/icon-arrow.png"></image>
+            <image class="arrow arrow-right" src="./images/icon-arrow.png"></image>
+
             <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>
@@ -40,7 +44,7 @@
 
       <view class="order-time">
         <view class="order-item">
-          <view class="title">订单号</view>
+          <view class="title">订单号</view>
           <view class="value">{{ goodsInfo.orderNo }}
             <view class="copy" bind:tap="onCopy" data-orderno="{{goodsInfo.orderNo}}">复制</view></view>
         </view>
@@ -50,7 +54,7 @@
         </view>
       </view>
 
-      <view class="order-time" wx:if="{{ goodsInfo.wechatStatus == 'REFUNDED' }}">
+      <view class="order-time" wx:if="{{ goodsInfo.wechatStatus == 'REFUNDED' || goodsInfo.wechatStatus == 'REFUNDING' }}">
         <view class="order-item">
           <view class="title">{{ goodsInfo.wechatStatus == 'REFUNDED' ? '退款时间' : '申请退款时间' }}</view>
           <view class="value">{{ goodsInfo.refundTime }}</view>
@@ -59,21 +63,15 @@
           <view class="title">退款金额</view>
           <view class="value red">¥{{ goodsInfo.refundAmount }}</view>
         </view>
-        <view class="order-item">
+        <view class="order-item" wx:if="{{goodsInfo.wechatStatus == 'REFUNDING'}}">
           <view class="title">退款路径</view>
           <view class="value">{{ goodsInfo.refundStyleStr }}</view>
         </view>
       </view>
-
-      <view class="btn-refound" bind:tap="useRefound"  wx:if="{{ goodsInfo.wechatStatus == 'WAIT_USE' }}">申请退款</view>
     </view>
   </scroll-view>
 
   <view class="order-btn" wx:if="{{ goodsInfo.wechatStatus != 'WAIT_PAY' }}">
-    <view class="orders" bind:tap="onService">
-      <image src="./images/icon-service.png" />
-      <text>客服</text>
-    </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>

+ 6 - 6
miniprogram/pages/orders/orders.less

@@ -34,7 +34,7 @@ page {
   align-items: center;
   justify-content: space-between;
   padding: 28rpx 30rpx 16rpx;
-
+  position: relative;
   >view {
       font-size: 32rpx;
       font-family: PingFangSC-Regular, PingFang SC;
@@ -77,8 +77,8 @@ page {
 .list-item {
   background: #FFFFFF;
   border-radius: 20rpx;
-  margin: 24rpx 26rpx 0;
-  padding: 28rpx 24rpx 32rpx;
+  margin: 20rpx 26rpx 0;
+  padding: 24rpx;
 
   .item-top {
     display: flex;
@@ -96,7 +96,7 @@ page {
     }
 
     .red {
-      color: #FE2451;
+      color: #FF5000;
     }
   }
 
@@ -155,8 +155,8 @@ page {
         // padding: 0 12rpx;
       }
       .goods-num {
-        font-size: 28rpx;
-        color: #777777;
+        font-size: 26rpx;
+        color: #999999;
         line-height: 36rpx;
       }
     }

+ 3 - 0
miniprogram/pages/orders/orders.ts

@@ -101,6 +101,9 @@ Page({
           const studentPaymentOrderDetails = item.studentPaymentOrderDetails || [];
           studentPaymentOrderDetails.forEach((student: any) => {
             student.originalPrice = this.formatPrice(student.paymentCashAmount, 'ALL');
+            const prices: any = this.formatPrice(student.paymentCashAmount)
+            student.integerPart = prices.integerPart
+            student.decimalPart = prices.decimalPart
             student.typeName = this.formatPeriod(student.activationCodeInfo?.times || 1, student.activationCodeInfo?.type);
           })
           item.studentPaymentOrderDetails = studentPaymentOrderDetails

+ 4 - 4
miniprogram/pages/orders/orders.wxml

@@ -15,7 +15,7 @@
             <view class="item-top">
               <view class="item-mid">订单号:{{ item.orderNo }}</view>
               <text class="{{ item.wechatStatus == 'WAIT_PAY' || item.wechatStatus == 'WAIT_USE' ? 'red' : '' }}">{{ item.statusName }}</text>
-            </view> -->
+            </view>
             <view class="item-content" wx:for="{{item.studentPaymentOrderDetails}}" wx:key="studentIndex">
               <image class='goods-icon' src="{{item.goodsUrl}}" mode="" />
               <view class="goods-desc">
@@ -28,13 +28,13 @@
                 </view>
                 <view class="goods-type">
                   <view class="goods-card" wx:if="{{ item.typeName }}">{{item.typeName}}</view>
-                  <view class="goods-num">共 1 件</view>
+                  <view class="goods-num">共 {{ item.goodsNum }} 件</view>
                 </view>
               </view>
             </view>
             <view class="item-footer">
               <view class="order-price">
-                订单金额:<text class="price-first">¥ </text><text class="price">{{item.amount}}</text>
+                <!-- 订单金额:<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>
@@ -42,7 +42,7 @@
               </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>
-                <button type="primary" wx:else catch:tap="onOne" data-id="{{item.id}}">再来一单</button>
+                <button type="primary" wx:else catch:tap="onOne" data-id="{{item.id}}">再次购买</button>
               </block>
             </view>
           </view>