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>


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



			<view class="flex-row justify-center"  v-if="order.canScanCode">
				<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" v-if="order.orderStatus != 3">-->
				<!--                                <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="flex-row justify-between">
						<view class="flex-col justify-around">
							<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 class="flex-row" v-if="item.discountAmount > 0">
								<u-icon name="red-packet" size="16"></u-icon>
								<text class="key">服务金额：</text>
								<text  class="projectMoney">¥{{item.payAmount}}</text>
								<text  class="lineMoney">¥{{item.servicePrice}}</text>
							</view>
							<view class="flex-row" v-else>
								<u-icon name="red-packet" size="16"></u-icon>
								<text class="key">服务金额：</text>
								<text  class="projectMoney">¥{{item.servicePrice}}</text>
							</view>
						</view>
						<view class="flex-col justify-around">
							<view class="flex-col justify-center " v-if="item.planNumber">
								<view class="planNumber flex-row justify-center">
									<text>{{item.planNumber}}</text>
								</view>
								<view class="plan flex-row justify-center">
									<text class="plan">排号</text>
								</view>
<!--								<view class="plan flex-row justify-center" v-if="order.serviceAttribute == 2">-->
<!--									<text class="plan">预约号</text>-->
<!--								</view>-->
							</view>

							<view class="flex-row justify-center" v-if="item.status === 8  || item.status === 1" @click="appeal(item.orderServiceId)">
								<u-icon name="/static/order/ud17.png" color="#93D21A" size="14"></u-icon>
								<text  class="ss_key">申诉</text>
							</view>
						</view>
					</view>

          <view class="flex-row justify-between key" v-if="item.status == 1 || item.status == 8">
            <view class="flex-row">
              <u-icon size="16" name="coupon"></u-icon>
              <text>优惠选择：</text>
            </view>
            <view class="flex-row justify-between value  flex1" style="height: 100%" @click="openCoupon(item,index)">
              <text v-if="item.suggestType == 0">选择优惠券或权益卡</text>
              <text v-if="item.suggestType == 1">{{ item.suggestCoupon.name }} {{ item.suggestType }}</text>
              <text v-if="item.suggestType == 2">{{ item.suggestEquityCard.name }} {{ item.suggestType }}</text>
              <u-icon size="12" name="arrow-right"></u-icon>
            </view>
          </view>

				</view>
			</view>
		</view>

		<view class="bottomHeight"></view>

		<view class="bottom1 flex-col"  v-if="order.canPay ">
			<text class="allMoney"></text>
			<view class="bottomBtn　flex-row justify-between">
				<view class=" flex-row">
					<text  class="unpaid">合计</text>
					<text  class="preferentialPrice">¥{{order.payAmount}}</text>
<!--					<text  class="unpaid">已优惠</text>-->
<!--					<text  class="originalPrice">¥{{totalDiscount}}</text>-->
					<!--                        <text  class="priceDetail">价格明细</text>-->
				</view>

				<view class="btn" @click="qenPayInfo">
					<text class="text_33">一键付款</text>
				</view>
<!--				<view v-else class="btn" @click="orderFinish">-->
<!--					<text  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 v-if="loveCardList.length>0" class="payItem flex-row" >
					<u-icon name="/static/me/familyCard_icon.png" color="#38db38" size="36"></u-icon>
					<view class="payName flex-col justify-center  flex-grow">
						<text>亲情卡支付</text>
						<scroll-view scroll-y class="loveCard" :show-scrollbar="true">
							<view class="flex-row justify-between loveCardItem " v-for="(item,index) in loveCardList" :key="index" @click="payLoveItem(0,index,item)">
								<view class="select flex-col" >
									<text>{{item.presentUserName}}({{item.relation}})</text>
<!--									<text class="balance">本月剩余额度：{{item.totalBalance}}</text>-->
								</view>
								<view class="flex-col justify-center">
									<u-icon v-if="curServiceTab === 0 && item.select" name="checkmark-circle-fill" color="#38db38" size="25"></u-icon>
									<u-icon v-else name="/static/order/ud9.png" color="green" size="25"></u-icon>
								</view>
							</view>
						</scroll-view>

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



    <uni-popup ref="couponPopup" :catchtouchmove="true" :animation="false" type="bottom">
      <view class="couponView flex-col">
        <view class="flex-row justify-center">
          <text>优惠选择</text>
        </view>

        <view  style="height: 700rpx;overflow: auto" >
          <view class="flex-row justify-between coupon1">
            <view class="flex-row justify-start">
              <view class="flex-col justify-center icon1">
                <text>0</text>
              </view>
              <view class="flex-col justify-center couponName">
                <text>不选择优惠</text>
              </view>
            </view>
            <view class="flex-col justify-center " >
              <text class="couponBtn"  @click="use(item,0)">选择</text>
            </view>
          </view>

          <view class="flex-row justify-center" style="margin-top: 30rpx" v-if="availableCouponList.length > 0">
            <view class="flex-col justify-center flex1">
              <view class="couponLine"></view>
            </view>
            <text class="couponType">优惠券</text>
            <view class="flex-col justify-center flex1">
              <view class="couponLine"></view>
            </view>
          </view>

          <view class="flex-row justify-between coupon2" v-for="(item,index) in availableCouponList" :key="index">
            <view class="flex-row justify-start">
              <view class="flex-col justify-center icon2">
                <text>{{item.discountsPrice}}</text>
              </view>
              <view class="flex-col justify-center">
                <view class="flex-col justify-center couponName">
                  <text>{{item.name}}</text>
                </view>
                <view class="flex-col justify-center couponValue">
                  <text>使用项目：{{item.useServiceDesc}}</text>
                </view>
                <view class="flex-col justify-center couponValue">
                  <text>使用金额：{{item.reachPrice}}</text>
                </view>
              </view>
            </view>
            <view class="flex-col justify-center" >
              <text class="couponBtn" @click="use(item,1)">立即使用</text>
            </view>
          </view>


          <view  class="flex-row justify-center" style="margin-top: 30rpx" v-if="availableEquityCardList.length > 0">
            <view class="flex-col justify-center flex1">
              <view class="couponLine"></view>
            </view>
            <text class="couponType">权益卡</text>
            <view class="flex-col justify-center flex1">
              <view class="couponLine"></view>
            </view>
          </view>

          <view class="flex-row justify-between coupon2" v-for="(item,index) in availableEquityCardList" :key="index">
            <view class="flex-row justify-start">
              <view class="flex-col justify-center icon2">
                <text>{{item.faceValue}}</text>
              </view>

              <view class="flex-col justify-center">
                <view class="flex-col justify-center couponName">
                  <text>{{item.title}}</text>
                </view>
                <view class="flex-col justify-center couponValue">
                  <text>使用项目：{{item.serviceProjectName}}</text>
                </view>
              </view>
            </view>
            <view class="flex-col justify-center" >
              <text class="couponBtn" @click="use(item,2)">立即使用</text>
            </view>
          </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,
				totalDiscount:0,
				appealId:'',
				appealReason:'',
				orderId:'',
				curServiceTab:2,
				userInfo:{},
				tradeNo:'',
				password:'',
				requestStatus : false,
				loveCardId:'',
				loveCardList:[],
        availableCouponList:[],
        availableEquityCardList:[],
        availableChild:null,
        availableIndex:null
			}
		},
		onLoad(e) {
			this.orderId = e.id
			this.getUserInfo();
		},
		onShow(){
			this.getOrderDetailByOrderId(this.orderId )
			this.getMyReceiveList()
		},
		methods: {

      use(item,suggestType){

        if (suggestType == 1){
          this.availableChild.suggestType = 1
          this.availableChild.suggestCoupon = item
          this.availableChild.discountAmount = item.discountsPrice
          this.availableChild.payAmount =  this.availableChild.servicePrice - item.discountsPrice
        }else if (suggestType == 2){
          this.availableChild.suggestType = 2
          this.availableChild.suggestEquityCard = item
          this.availableChild.discountAmount = item.faceValue
          this.availableChild.payAmount =  this.availableChild.servicePrice - item.faceValue
        }else {
          this.availableChild.suggestType =  0
          this.availableChild.suggestCoupon = []
          this.availableChild.suggestEquityCard = []
          this.availableChild.discountAmount = 0
          this.availableChild.payAmount =  this.availableChild.servicePrice
        }
        this.$set(this.order.child,this.availableIndex,this.availableChild)
        let payAmount = 0      //计算订单总支付金额
        let discountAmount = 0 //计算订单总优惠金额
        for (const child of this.order.child) {
          if (child.status == 1){
            payAmount += child.payAmount - 0
            discountAmount += child.discountAmount - 0
          }
        }
        this.order.payAmount = payAmount
        this.order.discountAmount = discountAmount
        this.availableChild = null
        this.availableIndex = null
        this.availableCouponList = []
        this.availableEquityCardList = []
        this.$refs.couponPopup.close()
      },

      openCoupon(item,index){
        console.log(item)
        this.availableIndex = index
        this.availableChild = item
        this.availableCoupons(item)
        this.availableEquityCards(item)
        this.$refs.couponPopup.open()
      },

      availableEquityCards(item){
        this.$api.availableEquityCards({
          orderServiceId:item.orderServiceId
        }).then(res=>{
          this.availableEquityCardList = res.data.data
        })
      },

      availableCoupons(item){
        this.$api.availableCoupons({
          orderServiceId:item.orderServiceId
        }).then(res=>{
          this.availableCouponList = res.data.data
        })
      },

			getMyReceiveList(){
				this.$api.getMyReceiveList().then(res=>{
					this.loveCardList = res.data.data
				})
			},

			getUserInfo() {
				this.$api.getUserInfo().then(res => {
					this.userInfo = res.data.data
					uni.setStorageSync('userInfo', res.data.data);
				});
			},

			familyCardPay(){
				let that = this;
				this.$api.familyCardTradePay({
					tradeNo:this.tradeNo,
					loveCardId:this.loveCardId,
					storeId:this.order.storeId
				}).then(res=>{
					this.requestStatus=false
					uni.hideLoading();
					uni.showToast({
						title: '支付成功!'
					});
					that.getOrderDetailByOrderId(that.orderId)
				}).catch((err) =>{
					this.requestStatus=false
					uni.showToast({
						title: err.msg,
						icon:'error',
						duration:3000
					})
				});
			},

			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: ''
				}).then((res)=>{
					this.requestStatus=false
					uni.hideLoading();
					uni.showToast({
						title: '支付成功!'
					});
					that.getOrderDetailByOrderId(that.orderId)
				}).catch((err)=>{
					this.requestStatus=false
					uni.hideLoading();
					uni.showToast({
						title: err.msg,
						icon:'error'
					})
				})
			},

			scanCodeOrder(order){
				uni.scanCode({
					scanType: ['qrCode'],
					success: function (res) {
						let json = JSON.parse(res.result)
						if(json.storeId != order.storeId){
							uni.showToast({
								icon: 'error',
								duration: 3000,
								title: '请扫描订单门店二维码'
							});
							return
						}
						uni.navigateTo({
							url:'/orderPages/serviceItems/index?serviceStationId='+ json.stationId + '&orderId='+order.orderId + '&serviceObjectId=' + order.serviceObjectId
						})
					}
				})
			},

			commonGeneralOrder(){
				if(this.requestStatus){
					return;
				}
				this.requestStatus=true
				uni.showLoading({
					title: '支付中'
				});
				this.$refs.popup.close()
				let that =this
				if (this.curServiceTab===0){
					this.familyCardPay()
				}
				if (this.curServiceTab===1){
					// that.password = '';
					// this.$refs.popup.close()
					// this.$refs.passwordPopup.open()

					this.balancePay()

				}
				if (this.curServiceTab===2){
					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 => {
								this.requestStatus=false
								uni.hideLoading();
								uni.showToast({
									title: '支付成功!'
								});
								that.getOrderDetailByOrderId(that.orderId)
							},
							fail: res => {
								this.requestStatus=false
								uni.hideLoading();
								uni.showModal({
									content: '支付失败',
									showCancel: false
								});
							}
						});
					})
				}
			},

			orderFinish(){
				this.$api.orderFinish(this.order.orderNo).then((res)=>{
					uni.$u.toast('操作成功')
					this.getOrderDetailByOrderId(this.order.orderId)
				})
			},

			qenPayInfo(){
				//
				// for(let i=0;i<this.order.child.length;i++){
				// 	if (this.order.child[i].status==3){
				// 		uni.$u.toast('子订单未审核结束')
				// 		return
				// 	}
				// }
				// let orderServiceIds = []
				// this.order.child.forEach(i=>{
				// 	if (i.status !=5){ //排除审核通过的子订单
				// 		orderServiceIds.push(i.orderServiceId)
				// 	}
				// })
				this.$api.oneClickPay({
					orderId:this.order.orderId
				}).then(res=>{
					this.tradeNo = res.data.data.tradeNo
					this.$refs.popup.open()
				})

				// 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
			//       this.totalDiscount = 0;
			//       item.tick = !item.tick
			//       this.$set(this.order.child,index,item)
			//       this.order.child.forEach(i=>{
			//           if (i.tick){
			//               this.totalDiscount += i.discountAmount * 1;
			//               this.allPrice += i.payAmount *1;
			//           }
			//       })
			//       this.allPrice = this.allPrice.toFixed(2)
			//       this.totalDiscount = this.totalDiscount.toFixed(2)
			//   }
			// },



			//新的价格计算逻辑  订单加载或刷新的时候计算
			calculatePrice(){
				this.allPrice = 0
				this.totalDiscount = 0;
				this.order.child.forEach(i=>{
					if (i.status !=5){ //不在申诉的子订单
						this.totalDiscount += i.discountAmount * 1;
						this.allPrice += i.payAmount *1;
					}
				})
				this.allPrice = this.allPrice.toFixed(2)
				this.totalDiscount = this.totalDiscount.toFixed(2)
			},

			getOrderDetailByOrderId(id){
				this.$api.getOrderDetailByOrderId({
					id:id
				}).then(res=>{

          for (const child of res.data.data.child) {
            if (child.suggestCoupon){
              child.suggestType = 1
            }else if (child.suggestEquityCard){
              child.suggestType = 2
            }else {
              child.suggestType = 0
            }
          }
          this.order= res.data.data
					// this.calculatePrice()
				})
			},

			payLoveItem(num,index,loveCard){
				// if (loveCard.totalBalance*1 < this.order.payAmount*1 && num == 0){
				// 	uni.$u.toast('余额不足')
				// 	return
				// }
				this.curServiceTab = num
				this.loveCardList.forEach(item=>{
					item.select = false
				})
				loveCard.select=true
				this.loveCardId = loveCard.id
				this.$set(this.loveCardList,index,loveCard)
			},

			payItem(num){
				if (this.userInfo.balance*1 < this.order.payAmount*1 && num == 1){
					uni.$u.toast('余额不足')
					return
				}
				this.curServiceTab = num
			},

			closePayPopup(){
				this.$refs.popup.close()
			},
		}
	}
</script>

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