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 orderNo">
				<text>订单编号：</text>
				<text>{{order.orderNo}}</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.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.storeName}}</text>
					</view>
					<view class="flex-row">
						<u-icon name="/static/order/ud14.png" size="16"></u-icon>
						<text class="key">下单时间：</text>
						<text class="value">{{order.createTime}}</text>
					</view>
				</view>
			</view>


			<view class="flex-col borderBottom " v-for="(item,index) in order.child" :key="index">
				<view class="flex-row justify-between ">
					<text class="serviceType">排号：{{item.planNumber || ''}}</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="/static/order/ud22.png" size="16"></u-icon>
							<text class="key">服务项目：</text>
							<text class="value">{{item.serviceName || ''}}</text>
						</view>
						<view class="flex-row">
							<u-icon name="/static/order/ud21.png" size="16"></u-icon>
							<text class="key">服务对象：</text>
							<text class="value">{{item.serviceObjectName || ''}}</text>
						</view>
						<view class="flex-row">
							<u-icon name="/static/order/ud14.png" size="16"></u-icon>
							<text class="key">服务时段：</text>
							<text class="value">{{item.serviceRangeTime || ''}}</text>
						</view>
						<view class="flex-row">
							<u-icon name="/static/order/ud3.png" size="16"></u-icon>
							<text class="key">服务人员：</text>
							<text class="value">{{item.servicePerson || ''}}</text>
						</view>
					</view>
				</view>
				<view class="flex-row justify-between">
					<view>

						<text class="key">服务金额：</text>
						<text class="projectMoney">¥{{item.servicePrice}}</text>
						<!--                                      <text  class="lineMoney">¥{{item.servicePrice}}</text>-->
					</view>

					<view v-if="item.status == 2" class="flex-row" @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 class="bottomHeight"></view>

		<view class="bottom1 flex-col" v-if="canPay">
			<text class="allMoney"></text>
			<view class="bottomBtn　flex-row justify-between">
				<view class=" flex-row">
					<text class="unpaid">合计</text>
					<text class="preferentialPrice">¥{{allPrice}}</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 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,
				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)
		},
		methods: {
			getUserInfo() {
				this.$api.getUserInfo().then(res => {
					this.userInfo = res.data.data
					uni.setStorageSync('userInfo', res.data.data);
				});
			},
			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.$refs.popup.close()
					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: '支付中'
				});
				let that = this
				if (this.curServiceTab === 1) {
					// that.password = '';
					// this.$refs.popup.close()
					// this.$refs.passwordPopup.open()

					this.balancePay()

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

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

				this.getUserInfo();
				let orderServiceIds = []
				this.order.child.forEach(i => {
					if (i.status != 5) { //排除审核通过的子订单
						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
			//       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.allPrice * 1)

				if (this.userInfo.balance * 1 < this.allPrice * 1 && num == 1) {
					return
				}
				this.curServiceTab = num
			},

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

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