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>
			</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.totalAmount}}</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="loveCard.totalBalance" class="payItem  flex-row justify-between" @click="payItem(0)">
					<view class="flex-row">
						<u-icon name="/static/me/familyCard_icon.png" color="#38db38" size="36"></u-icon>
						<view class="payName flex-col justify-center">
							<text>亲情卡支付</text>
							<text class="balance">{{loveCard.presentUserName + loveCard.presentUserNo}}赠送的亲情卡</text>
							<text class="balance">余额{{loveCard.totalBalance}}</text>
						</view>
					</view>
					<view class="flex-col justify-center">
						<u-icon v-if="curServiceTab === 0" 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>

				<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 {
				loveCard:{},
				title: 'Hello',
				tabIndex: 3,
				order:{},
				allPrice:0,
				totalDiscount:0,
				appealId:'',
				appealReason:'',
				orderId:'',
				curServiceTab:2,
				userInfo:{},
				tradeNo:'',
				password:'',
				requestStatus : false
			}
		},
		onLoad(e) {
			this.orderId = e.id
			this.getUserInfo();
		},
		onShow(){
			this.getOrderDetailByOrderId(this.orderId )
			this.getMyReceiveList()
		},
		methods: {

			getMyReceiveList(){
				this.$api.getMyReceiveList().then(res=>{
					this.loveCard = res.data.data[0]
				})
			},

			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.loveCard.id
				}).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'
					})
				});
			},

			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=>{
					this.order= res.data.data
					// this.calculatePrice()
				})
			},
			payItem(num){
				console.log('this.userInfo.balance',this.userInfo.balance*1)
				console.log('this.price',this.order.totalAmount*1)

				if (this.loveCard.totalBalance*1 < this.order.totalAmount*1 && num == 0){
					uni.$u.toast('余额不足')
					return
				}
				if (this.userInfo.balance*1 < this.order.totalAmount*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>