jje_uniapp/orderPages/orderDetail/index.vue

<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="order.serviceAttribute == 1? 'serviceAttrDesc':'serviceAttrDesc1'">
                            <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  jishi">
                            <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>
                                <view class="flex-row">
                                    <u-icon name="clock" size="16"></u-icon>
                                    <text class="key">下单时间：</text>
                                    <text class="value">{{order.createTime}}</text>
                                </view>
                            </view>

                            <view class="flex-col justify-center " v-if="order.serviceAttribute == 1">
                                <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 justify-between yuyue " v-if="order.serviceAttribute == 2">
                            <view class="flex-col justify-center ">
                                <view class=" flex-row">

                                    <u-icon name="clock" size="16"></u-icon>
                                    <text  class="key">服务日期：</text>
                                    <text  class="value">{{order.serviceDate}}</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.serviceStartTime}}</text>
                                </view>
                                <view class="flex-row">
                                    <u-icon name="/static/order/ud3.png" color="#93D21A" size="18"></u-icon>
                                    <text class="key">服务人员：</text>
                                    <text class="value">{{order.servicePersonName}}</text>
                                </view>
                            </view>

                            <view class="flex-col justify-center ">
                                <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 justify-center"  v-if="order.orderStatus != 2">
                            <view class="scan flex-row justify-center" @click="scanCodeOrder(order)">
                                <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>

                                <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 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="bottom1 flex-col">
                <text class="allMoney">合计价格：¥{{allPrice}}</text>
                <view class="bottomBtn　flex-row justify-between">
                    <view class=" flex-row">
                        <text  class="unpaid">待支付</text>
                        <text  class="preferentialPrice">¥{{allPrice}}</text>
                        <text  class="originalPrice">¥{{allPrice}}</text>
                        <text  class="priceDetail">价格明细</text>
                    </view>

                    <view class="btn" @click="qenPayInfo">
                        <text lines="1" class="text_33">提交</text>
                    </view>
                </view>
            </view>

            <uni-popup ref="appealPopup"  :animation="false" :catchtouchmove="true">

                <view class="appealView flex-col justify-around">
                    <view class="popupTitle">
                        <text>请输入申诉理由</text>
                    </view>

                    <view class="lex-row justify-center">
                        <textarea class="textarea" v-model="appealReason"  placeholder="请输入申诉理由"></textarea>
                    </view>


                    <view class="flex-row justify-around">
                        <view class="leftBtn" @click="appealPopupClose">
                            <text>取消</text>
                        </view>
                        <view class="rightBtn" @click="commitAppeal">
                            <text>确定</text>
                        </view>
                    </view>
                </view>

            </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>

<script>
import UniPopup from "../../uni_modules/uni-popup/components/uni-popup/uni-popup";
export default {
    components: {
        UniPopup
    },
    data() {
        return {
            title: 'Hello',
            tabIndex: 3,
            order:{},
            allPrice:0,
            appealId:'',
            appealReason:'',
            orderId:'',
            curServiceTab:1,
            userInfo:{},
            tradeNo:'',
            password:''
        }
    },
    onLoad(e) {
        this.orderId = e.id
        this.getOrderDetailByOrderId(e.id)
        this.getUserInfo();
    },
    methods: {
      getUserInfo() {
        this.userInfo = uni.getStorageSync('userInfo');
      },
        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){
                that.password = '';
                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(){
          this.getUserInfo();
            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,
                appealReason:this.appealReason
            }).then(res=>{
                this.appealReason=''
                uni.$u.toast('申诉已提交')
                this.$refs.appealPopup.close()
                this.getOrderDetailByOrderId(this.orderId)
            })
        },
        appealPopupClose(){
            this.appealReason=''
            this.$refs.appealPopup.close()
        },

        appeal(id){
            this.appealId = id
            this.$refs.appealPopup.open()
        },

        tick(item,index){

          if (item.status === 1 || item.status === 4){
              this.allPrice = 0
              item.tick = !item.tick
              this.$set(this.order.child,index,item)
              this.order.child.forEach(i=>{
                  if (i.tick){
                      this.allPrice += i.servicePrice *1
                  }
              })
              this.allPrice = this.allPrice.toFixed(2)
          }
        },

        getOrderDetailByOrderId(id){
            this.$api.getOrderDetailByOrderId({
                id:id
            }).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>

<style>
@import '/common/css/common.css';
@import './index.rpx.scss';</style>