refactor：订单列表，订单详情支付

.idea/inspectionProfiles/Project_Default.xml

@@ -4,7 +4,7 @@
     <inspection_tool class="HtmlUnknownTag" enabled="true" level="WARNING" enabled_by_default="true">
       <option name="myValues">
         <value>
-          <list size="18">
+          <list size="19">
             <item index="0" class="java.lang.String" itemvalue="nobr" />
             <item index="1" class="java.lang.String" itemvalue="noembed" />
             <item index="2" class="java.lang.String" itemvalue="comment" />
@@ -23,6 +23,7 @@
             <item index="15" class="java.lang.String" itemvalue="view" />
             <item index="16" class="java.lang.String" itemvalue="u-datetime-picker" />
             <item index="17" class="java.lang.String" itemvalue="uni-popup" />
+            <item index="18" class="java.lang.String" itemvalue="u-swiper" />
           </list>
         </value>
       </option>

common/js/api.js

@@ -4,6 +4,33 @@ import request from '../js/request.js';
 export default {
 
 
+	//post请求  一键付款余额支付
+	trade(data){
+		return request({
+			url: '/business/balancePay/pay/trade',
+			method: 'POST',
+			data:data
+		})
+	},
+
+	//post请求  订单详情付款
+	qenPayInfo(data){
+		return request({
+			url: '/business/wechat/order/genPayInfo',
+			method: 'POST',
+			data:data
+		})
+	},
+
+	//post请求  一键付款获取微信支付信息
+	wechatPayTradeNo(data){
+		return request({
+			url: '/business/wxPay/jsapiPay/tradeNo?tradeNo='+data.tradeNo,
+			method: 'POST',
+			data:data
+		})
+	},
+
 
 	//post请求  一键付款
 	oneClickPay(data){

orderPages/orderDetail/index.rpx.scss

@@ -29,7 +29,6 @@
   height: 56rpx;
   background: #FFE05C;
   border-radius: 0rpx 0rpx 12rpx 12rpx;
-  opacity: 0.2;
 
   font-size: 24rpx;
   font-family: PingFangSC-Regular, PingFang SC;
@@ -38,6 +37,21 @@
   line-height: 56rpx;
   text-align: center;
 }
+
+.serviceAttrDesc1{
+  width: 108rpx;
+  height: 56rpx;
+  background: #E9F6D1;
+  border-radius: 0rpx 0rpx 12rpx 12rpx;
+
+  font-size: 24rpx;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #93D21A;
+  line-height: 56rpx;
+  text-align: center;
+}
+
 .serviceType{
   font-size: 28rpx;
   font-family: PingFangSC-Medium, PingFang SC;
@@ -113,12 +127,13 @@
   color: #ED569F;
   line-height: 44rpx;
 }
-.bottom{
+.bottom1{
   width: 750rpx;
   height: 212rpx;
   background: #FFFFFF;
   position: fixed;
   bottom: 0;
+  z-index: 5;
 }
 
 .bottomHeight{
@@ -232,3 +247,83 @@
   line-height: 40rpx;
   padding: 24rpx;
 }
+
+
+
+.payView{
+  height: 638rpx;
+  background: #FFFFFF;
+  box-shadow: 0rpx -4rpx 8rpx 0rpx rgba(0,0,0,0.03);
+  border-radius: 24rpx 24rpx 0rpx 0rpx;
+  padding: 24rpx 32rpx;
+}
+.payType{
+  font-size: 32rpx;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: bord;
+  color: #111111;
+  line-height: 48rpx;
+}
+.x{
+  width: 35rpx;
+  height: 35rpx;
+  border-radius: 18rpx;
+}
+.payTitle{
+  font-size: 24rpx;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #666666;
+  line-height: 40rpx;
+  margin-top: 8rpx;
+}
+.payItem{
+  background: #FAFAFA;
+  border-radius: 20rpx;
+  padding: 34rpx 32rpx;
+  margin-top: 32rpx;
+}
+.payName{
+  margin-left: 24rpx;
+}
+.balance{
+  font-size: 24rpx;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #999999;
+  line-height: 40rpx;
+}
+.commitBtn{
+  width: 686rpx;
+  height: 108rpx;
+  background: #FFE05C;
+  border-radius: 60rpx;
+  margin-top: 32rpx;
+
+  font-size: 32rpx;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: bold;
+  color: #111111;
+  line-height: 108rpx;
+  text-align: center;
+}
+.passwordView{
+  background: #FFFFFF;
+  width: 686rpx;
+  height: 400rpx;
+  border-radius: 20rpx;
+  padding: 34rpx 0;
+}
+
+.h-tab-bar{
+  margin-top: 80rpx;
+}
+.h-operate-btn{
+  width: 550rpx;
+  height: 80rpx;
+  border-radius: 40rpx;
+  background: #FFE05C;
+  line-height: 80rpx;
+  text-align: center;
+  margin-top: 80rpx;
+}

orderPages/orderDetail/index.vue

@@ -1,115 +1,110 @@
 <template>
-        <view class="page">
-            <view class="state ">
-                <view class="flex-row justify-center">
-                    <u-icon name="cut" color="#93D21A" size="18"></u-icon>
-                    <text>{{order.orderStatusDesc}}</text>
-                </view>
-                <view class="box_4 flex-row justify-center">
-                    <text>{{order.orderDesc}}</text>
-                </view>
-            </view>
-
-            <view class="detail">
-                <view class="serviceAttrDesc">
-                    <text>{{order.serviceAttrDesc}}</text>
-                </view>
-                <view class="flex-row justify-start">
-                    <u-icon name="/static/index/u217.png" color="#93D21A" size="18"></u-icon>
-                    <text class="key">订单编号：</text>
-                    <text class="value">{{order.orderNo}}</text>
-                </view>
-                <view>
-                    <text  class="serviceType">{{order.serviceType}}</text>
-                </view>
-
-                <view class="flex-row justify-between">
-                    <view class="flex-col">
-                        <view class=" flex-row">
-                            <u-icon name="/static/order/ud1.png" color="#93D21A" size="18"></u-icon>
-                            <text  class="key">服务对象：</text>
-                            <text  class="value">{{order.serviceObjectName}}</text>
-                        </view>
-                        <view class="flex-row">
-                            <u-icon name="/static/order/ud2.png" color="#93D21A" size="18"></u-icon>
-                            <text class="key">服务门店：</text>
-                            <text class="value">{{order.storeName}}</text>
+        <view class="page" >
+                    <view class="state ">
+                        <view class="flex-row justify-center">
+                            <u-icon name="cut" color="#93D21A" size="18"></u-icon>
+                            <text>{{order.orderStatusDesc}}</text>
                         </view>
-                        <view class="flex-row">
-                            <u-icon name="clock" size="16"></u-icon>
-                            <text class="key">下单时间：</text>
-                            <text class="value">{{order.createTime}}</text>
+                        <view class="box_4 flex-row justify-center">
+                            <text>{{order.orderDesc}}</text>
                         </view>
                     </view>
-
-                    <view class="flex-col">
-                        <view class="planNumber flex-row justify-center">
-                            <text>{{order.planNumber}}</text>
+                    <view class="detail">
+                        <view :class="order.serviceAttribute == 1? 'serviceAttrDesc':'serviceAttrDesc1'">
+                            <text>{{order.serviceAttrDesc}}</text>
                         </view>
-                        <view class="plan flex-row justify-center">
-                            <text class="plan">排号</text>
+                        <view class="flex-row justify-start">
+                            <u-icon name="/static/index/u217.png" color="#93D21A" size="18"></u-icon>
+                            <text class="key">订单编号：</text>
+                            <text class="value">{{order.orderNo}}</text>
                         </view>
-                    </view>
-                </view>
-
-
-                <view class="flex-row justify-center">
-                    <view class="scan flex-row justify-center">
-                        <u-icon name="scan" size="18"></u-icon>
-                        <text>扫码</text>
-                    </view>
-                </view>
-                <view class="line"></view>
-
-                <view class="flex-row justify-between borderBottom" v-for="(item,index) in order.child" :key="index">
-                    <view class="flex-col justify-center">
-                        <u-icon v-if="item.tick" name="checkmark-circle-fill" color="#38db38" size="20" @click="tick(item,index)"></u-icon>
-                        <u-icon v-else name="/static/order/ud9.png" color="green" size="20" @click="tick(item,index)"></u-icon>
-                    </view>
-
-                    <view class="flex-col right">
-                        <view class="flex-row justify-between">
-                            <text class="serviceType">{{item.serviceName}}</text>
-                            <text class="projectState">{{item.statusDesc}}</text>
+                        <view>
+                            <text  class="serviceType">{{order.serviceType}}</text>
                         </view>
 
-                        <view class="box_11">
-                            <view class="group_2"></view>
-                            <view class="group_3">
+                        <view class="flex-row justify-between">
+                            <view class="flex-col">
+                                <view class=" flex-row">
+                                    <u-icon name="/static/order/ud1.png" color="#93D21A" size="18"></u-icon>
+                                    <text  class="key">服务对象：</text>
+                                    <text  class="value">{{order.serviceObjectName}}</text>
+                                </view>
                                 <view class="flex-row">
-                                    <u-icon name="server-man" size="16"></u-icon>
-                                    <text class="key">服务人员：</text>
-                                    <text class="value">{{item.servicePerson || ''}}</text>
+                                    <u-icon name="/static/order/ud2.png" color="#93D21A" size="18"></u-icon>
+                                    <text class="key">服务门店：</text>
+                                    <text class="value">{{order.storeName}}</text>
                                 </view>
                                 <view class="flex-row">
                                     <u-icon name="clock" size="16"></u-icon>
-                                    <text class="key">服务时间：</text>
-                                    <text class="value">{{item.serviceTime || ''}}</text>
+                                    <text class="key">下单时间：</text>
+                                    <text class="value">{{order.createTime}}</text>
                                 </view>
                             </view>
-                        </view>
-                        <view class="flex-row justify-between">
-                            <view>
-                                <text  class="key">金额：</text>
-                                <text  class="projectMoney">¥{{item.servicePrice}}</text>
+
+                            <view class="flex-col">
+                                <view class="planNumber flex-row justify-center">
+                                    <text>{{order.planNumber}}</text>
+                                </view>
+                                <view class="plan flex-row justify-center">
+                                    <text class="plan">排号</text>
+                                </view>
                             </view>
+                        </view>
+
 
-                            <view class="flex-row" v-if="item.status === 1" @click="appeal(item.orderServiceId)">
-                                <u-icon name="/static/order/ud17.png" color="#93D21A" size="18"></u-icon>
-                                <text  class="key">申诉</text>
+                        <view class="flex-row justify-center">
+                            <view class="scan flex-row justify-center" @click="scanCodeOrder(order)">
+                                <u-icon name="scan" size="18"></u-icon>
+                                <text>扫码</text>
                             </view>
                         </view>
-                    </view>
-                </view>
+                        <view class="line"></view>
 
+                        <view class="flex-row justify-between borderBottom" v-for="(item,index) in order.child" :key="index">
+                            <view class="flex-col justify-center">
+                                <u-icon v-if="item.tick" name="checkmark-circle-fill" color="#38db38" size="20" @click="tick(item,index)"></u-icon>
+                                <u-icon v-else name="/static/order/ud9.png" color="green" size="20" @click="tick(item,index)"></u-icon>
+                            </view>
 
+                            <view class="flex-col right">
+                                <view class="flex-row justify-between">
+                                    <text class="serviceType">{{item.serviceName}}</text>
+                                    <text class="projectState">{{item.statusDesc}}</text>
+                                </view>
 
+                                <view class="box_11">
+                                    <view class="group_2"></view>
+                                    <view class="group_3">
+                                        <view class="flex-row">
+                                            <u-icon name="server-man" size="16"></u-icon>
+                                            <text class="key">服务人员：</text>
+                                            <text class="value">{{item.servicePerson || ''}}</text>
+                                        </view>
+                                        <view class="flex-row">
+                                            <u-icon name="clock" size="16"></u-icon>
+                                            <text class="key">服务时间：</text>
+                                            <text class="value">{{item.serviceTime || ''}}</text>
+                                        </view>
+                                    </view>
+                                </view>
+                                <view class="flex-row justify-between">
+                                    <view>
+                                        <text  class="key">金额：</text>
+                                        <text  class="projectMoney">¥{{item.servicePrice}}</text>
+                                    </view>
 
-            </view>
+                                    <view class="flex-row" v-if="item.status === 1" @click="appeal(item.orderServiceId)">
+                                        <u-icon name="/static/order/ud17.png" color="#93D21A" size="18"></u-icon>
+                                        <text  class="key">申诉</text>
+                                    </view>
+                                </view>
+                            </view>
+                        </view>
+                    </view>
 
             <view class="bottomHeight"></view>
 
-            <view class="bottom flex-col">
+            <view class="bottom1 flex-col">
                 <text class="allMoney">合计价格：¥{{allPrice}}</text>
                 <view class="bottomBtn　flex-row justify-between">
                     <view class=" flex-row">
@@ -119,13 +114,13 @@
                         <text  class="priceDetail">价格明细</text>
                     </view>
 
-                    <view class="btn" @click="">
+                    <view class="btn" @click="qenPayInfo">
                         <text lines="1" class="text_33">提交</text>
                     </view>
                 </view>
             </view>
 
-            <uni-popup ref="appealPopup" :animation="false" :catchtouchmove="true">
+            <uni-popup ref="appealPopup"  :animation="false" :catchtouchmove="true">
 
                 <view class="appealView flex-col justify-around">
                     <view class="popupTitle">
@@ -150,6 +145,79 @@
             </uni-popup>
 
 
+            <uni-popup ref="popup" :catchtouchmove="true" :animation="false" type="bottom">
+
+                <view class="payView">
+                    <view class="flex-row justify-between">
+                        <text class="payType">请选择支付方式</text>
+                        <image class="x" src="/static/common/ox.png" @click="closePayPopup"></image>
+                    </view>
+                    <view class="payTitle">
+                        <text>选择微信支付或余额支付</text>
+                    </view>
+
+
+                    <view class="payItem flex-row justify-between" @click="payItem(1)">
+                        <view class="flex-row">
+                            <u-icon name="/static/me/u701.png" color="#38db38" size="36"></u-icon>
+                            <view class="payName flex-col justify-center">
+                                <text>余额支付</text>
+                                <text class="balance">可以余额￥{{userInfo.balance || 0}}</text>
+                            </view>
+                        </view>
+
+                        <view class="flex-col justify-center">
+                            <view v-if="curServiceTab === 1" >
+                                <u-icon name="checkmark-circle-fill" color="#38db38" size="25"></u-icon>
+                            </view>
+                            <view v-else>
+                                <u-icon name="/static/order/ud9.png" color="green" size="25"></u-icon>
+                            </view>
+                        </view>
+                    </view>
+
+                    <view class="payItem flex-row justify-between" @click="payItem(2)">
+                        <view class="flex-row">
+                            <u-icon name="weixin-circle-fill" color="#38db38" size="36"></u-icon>
+                            <view class="payName flex-col justify-center">
+                                <text>微信支付</text>
+                            </view>
+                        </view>
+                        <view class="flex-col justify-center">
+                            <view v-if="curServiceTab === 2" >
+                                <u-icon name="checkmark-circle-fill" color="#38db38" size="25"></u-icon>
+                            </view>
+                            <view v-else>
+                                <u-icon name="/static/order/ud9.png" color="green" size="25"></u-icon>
+                            </view>
+                        </view>
+                    </view>
+
+                    <view class="commitBtn" @click="commonGeneralOrder">
+                        <text>确定</text>
+                    </view>
+                </view>
+
+            </uni-popup>
+
+
+            <uni-popup ref="passwordPopup">
+                <view class="passwordView flex-col">
+                    <view class="flex-row justify-center">
+                        <text>请输入交易密码</text>
+                    </view>
+                    <view class="h-tab-bar flex-row justify-center">
+                        <u-code-input  v-model="password" mode="box" dot></u-code-input>
+                    </view>
+                    <view class="flex-row justify-center">
+                        <view class="h-operate-btn flex-row justify-center" @click="balancePay">
+                            <text>确定</text>
+                        </view>
+                    </view>
+                </view>
+            </uni-popup>
+
+
         </view>
 </template>
 
@@ -167,15 +235,114 @@ export default {
             allPrice:0,
             appealId:'',
             appealReason:'',
-            orderId:''
+            orderId:'',
+            curServiceTab:1,
+            userInfo:{},
+            tradeNo:'',
+            password:''
         }
     },
     onLoad(e) {
         this.orderId = e.id
         this.getOrderDetailByOrderId(e.id)
+        this.userInfo = uni.getStorageSync('userInfo')
+
     },
     methods: {
 
+        balancePay(){
+
+            let that = this;
+            if(this.password.length< 6 ){
+                uni.showToast({
+                    title: "交易密码不能小于6位"
+                })
+                return ;
+            }
+            this.$refs.passwordPopup.close()
+            // 用户信息
+            this.$api.trade({
+                tradeNo: this.tradeNo,
+                password: this.password
+            }).then((res)=>{
+                uni.switchTab({
+                    url:'/pages/order/index'
+                })
+            }).catch(() =>{
+                uni.showToast({
+                    title: "操作失败"
+                })
+            });
+
+        },
+
+        scanCodeOrder(order){
+            uni.scanCode({
+                scanType: ['qrCode'],
+                success: function (res) {
+                    uni.navigateTo({
+                        url:'/orderPages/serviceItems/index?serviceStationId='+ res.result + '&orderId='+order.orderId
+                    })
+                }
+            })
+        },
+
+        commonGeneralOrder(){
+            let that =this
+            if (this.curServiceTab===1){
+                this.$refs.popup.close()
+                this.$refs.passwordPopup.open()
+            }else {
+                this.$api.wechatPayTradeNo({tradeNo:this.tradeNo}).then(res=>{
+                    var param = res.data.data;
+                    uni.requestPayment({
+                        appId: param.appid,
+                        timeStamp: param.timestamp+"",
+                        nonceStr: param.noncestr,
+                        package: "prepay_id="+param.prepayid,
+                        signType: "RSA",
+                        paySign: param.sign,
+                        success: res => {
+                            uni.showToast({
+                                title: '支付成功!'
+                            });
+                            that.$refs.popup.close()
+                            that.$refs.MescrollItem[that.tabIndex].downCallback()
+                        },
+                        fail: res => {
+                            console.log(res)
+                            uni.showModal({
+                                content: '支付失败',
+                                showCancel: false
+                            });
+                            that.$refs.popup.close()
+                            that.$refs.MescrollItem[that.tabIndex].downCallback()
+                        }
+                    });
+                }).catch(() =>{
+                    uni.showToast({
+                        title: "操作失败"
+                    })
+                });
+            }
+        },
+
+        qenPayInfo(){
+            let orderServiceIds = []
+            this.order.child.forEach(i=>{
+                if (i.tick){
+                    orderServiceIds.push(i.orderServiceId)
+                }
+            })
+            this.$api.qenPayInfo({
+                orderServiceIds:orderServiceIds,
+                orderNo:this.order.orderNo
+            }).then(res=>{
+                this.tradeNo=res.data.data.tradeNo
+                this.$refs.popup.open()
+            })
+        },
+
         commitAppeal(){
             this.$api.appeal({
                 childOrderId:this.appealId,
@@ -218,7 +385,17 @@ export default {
             }).then(res=>{
                 this.order= res.data.data
             })
-        }
+        },
+        payItem(num){
+            if (this.userInfo.balance < this.price){
+                return
+            }
+            this.curServiceTab = num
+        },
+
+        closePayPopup(){
+            this.$refs.popup.close()
+        },
     }
 }
 </script>

pages/order/index.vue

@@ -180,6 +180,8 @@
 
 				userInfo:{},
 				curServiceTab:1,
+				tradeNo:'',
+				password:''
 
 			}
 		},
@@ -192,6 +194,32 @@
 		},
 		methods: {
 
+			balancePay(){
+
+				let that = this;
+				if(this.password.length< 6 ){
+					uni.showToast({
+						title: "交易密码不能小于6位"
+					})
+					return ;
+				}
+				this.$refs.passwordPopup.close()
+				// 用户信息
+				this.$api.trade({
+					tradeNo: this.tradeNo,
+					password: this.password
+				}).then((res)=>{
+					uni.switchTab({
+						url:'/pages/order/index'
+					})
+				}).catch(() =>{
+					uni.showToast({
+						title: "操作失败"
+					})
+				});
+
+			},
+
 			payItem(num){
 				if (this.userInfo.balance < this.price){
 					return
@@ -203,13 +231,55 @@
 				this.$refs.popup.close()
 			},
 
-			openPay(){
-				this.$refs.popup.open()
+			openPay(order){
+				this.$api.oneClickPay({
+					orderId:order.orderId
+				}).then(res=>{
+					this.tradeNo = res.data.data.tradeNo
+					this.$refs.popup.open()
+				})
+
+
 			},
 
 			commonGeneralOrder(){
-
-				this.$refs.passwordPopup.open()
+				let that =this
+				if (this.curServiceTab===1){
+					this.$refs.popup.close()
+					this.$refs.passwordPopup.open()
+				}else {
+					this.$api.wechatPayTradeNo({tradeNo:this.tradeNo}).then(res=>{
+						var param = res.data.data;
+						uni.requestPayment({
+							appId: param.appid,
+							timeStamp: param.timestamp+"",
+							nonceStr: param.noncestr,
+							package: "prepay_id="+param.prepayid,
+							signType: "RSA",
+							paySign: param.sign,
+							success: res => {
+								uni.showToast({
+									title: '支付成功!'
+								});
+								that.$refs.popup.close()
+								that.$refs.MescrollItem[that.tabIndex].downCallback()
+							},
+							fail: res => {
+								console.log(res)
+								uni.showModal({
+									content: '支付失败',
+									showCancel: false
+								});
+								that.$refs.popup.close()
+								that.$refs.MescrollItem[that.tabIndex].downCallback()
+							}
+						});
+					}).catch(() =>{
+						uni.showToast({
+							title: "操作失败"
+						})
+					});
+				}
 			},
 
 			clickTab(e) {