[最新]

pages/pay/index.js

@@ -14,11 +14,13 @@ Page({
         modelId   : "",
         modelType : "",
         payType   : "",
+        orderNos  : [],
         can       : {
             coin    : 0,
             wechat  : 0,
         },
-        loding    : false
+        loding    : false,
+        noShow    : false
     },
 
     /**
@@ -31,12 +33,13 @@ Page({
             mask : true
         })
         wx.$api.pay.info({ order_id, order_type }).then(res => {
-            let { can, total, model_type, model_id } = res.data
+            let { can, total, model_type, model_id, order_nos } = res.data
             this.setData({
                 orderNo     : order_no,
                 payType     : res.data.default,
                 modelId     : model_id,
                 modelType   : model_type,
+                orderNos    : order_nos,
                 total,
                 can
             })
@@ -108,5 +111,14 @@ Page({
                 })
             }
         })
+    },
+
+    /**
+     * 展开订单号
+     */
+    noTap() {
+        this.setData({
+            noShow: !this.data.noShow
+        })
     }
 })

pages/pay/index.wxml

@@ -3,7 +3,15 @@
     <view class="info">
         <view class="title">实付金额</view>
         <view class="price"><text>￥</text>{{total}}</view>
-        <view class="no">订单号{{orderNo}}</view>
+        <view class="no">
+            <view class="no-title">支付金额包含订单</view>
+            <view class="no-list {{noShow ? 'active' : ''}}">
+                <view class="no-list-item" wx:for="{{orderNos}}" wx:key="order_nos">
+                    <view class="no-list-item">订单号：{{item}}</view>
+                </view>
+            </view>
+            <view class="no-show {{noShow ? 'active' : ''}}" bindtap="noTap" wx:if="{{orderNos.length > 1}}">{{noShow ? '收起' : '展开'}} <image src="/static/icons/arrowWrite.png"></image></view>
+        </view>
     </view>
     <!-- 选择支付方式 -->
     <view class="radio-title">选择支付方式</view>

pages/pay/index.wxss

@@ -1,10 +1,18 @@
 
 .content{ background: white; min-height: 100vh; padding: 0 30rpx; }
-.info{ padding:100rpx 50rpx; text-align: center; border-bottom: solid 1rpx #f7f8f9; }
+.info{ padding:100rpx 20rpx; text-align: center; border-bottom: solid 1rpx #f7f8f9; }
 .title{font-weight: bold; line-height: 40rpx;}
 .price{ font-weight: bold; font-size: 80rpx; padding: 30rpx 0; line-height: 80rpx; }
 .price text{ font-size: 80%; }
-.no{ font-size: 28rpx; color: gray; line-height: 40rpx; }
+.no{ font-size: 26rpx; color: gray; line-height: 40rpx; }
+.no-list {margin-top: 30rpx; background-color: #f7faff; border-radius: 10rpx; padding: 30rpx 10rpx; box-sizing: border-box; height: 100rpx; position: relative; overflow: hidden;}
+.no-list::after {position: absolute; left: calc(50% - 9rpx); top: -18rpx; content: ''; width: 0;height: 0;border-bottom: 18rpx solid #f7faff; border-left: 18rpx solid transparent; border-right: 18rpx solid transparent;}
+.no-list-item {line-height: 40rpx; margin-bottom: 30rpx;}
+.no-list-item:last-child {margin-bottom: 0;}
+.no-list.active {height: auto;}
+.no-show {background-color: #f7faff; color: #000000; display: inline-block; padding: 0 40rpx; line-height: 52rpx; border-radius: 0 0 10rpx 10rpx; font-size: 26rpx;}
+.no-show image {width: 24rpx; height: 24rpx; vertical-align: -4rpx;transform: rotate(270deg); transition: .2s;}
+.no-show.active image {transform: rotate(90deg);}
 
 /* 支付方式 */
 .radio-title{ font-weight: bold; font-size: 30rpx; padding: 30rpx; }