shenzeeUniApp/packageA/pages/user/orderEit.vue

<template>
	<view class="home-getOrder">
		<form class="form" @submit="orderSubmit">
			<view v-if="show" class="select-input">
				<input class="input" style="display:none;" />
				<text>账户余额：</text><input class="input" name="altMainBalance" disabled :value="altMainBalance"/>	
			</view>
			<view class="select-input">
				<input class="input" style="display:none;" />
				<text>订单编号：</text><input class="input" name="sn" disabled :value="sn"/>	
			</view>
			<view class="select-input">
				<input class="input" style="display:none;" />
				<text>设备编码：</text><input class="input" name="clientId" :value="clientId" />	
			</view>
			<view class="select-input">
				<input class="input" style="display:none;" />
				<text>商品名称：</text><input class="input" name="productName" disabled :value="productName" />	
			</view>
			<view class="select-input">
				<input class="input" style="display:none;" />
				<text>已支付金额：</text><input class="input" name="price" disabled :value="price" />	
			</view>
			<view class="select-input">
				<input class="input" style="display:none;" />
				<text>支付时间：</text><input class="input" name="payDate" disabled :value="payDate"/>	
			</view>
			<view class="select-input">
				<input class="input" style="display:none;" />
				<text>明细：</text><input class="input" name="note" disabled :value="note"/>	
			</view>
			<view class="select-input">
				<input class="input" style="display:none;" />
				<text>退款时间：</text><input class="input" name="refundDate" disabled :value="refundDate"/>	
			</view>
			<view class="select-input">
				<input class="input" style="display:none;" />
				<text>已退款金额：</text><input class="input" name="refundPrice" disabled :value="refundPrice" />	
			</view>
			<view class="select-input">
				<input class="input" style="display:none;" />
				<text>订单状态：</text><input class="input" name="status" disabled :value="status==1?('已支付'):(status==2?'退款中':'已退款')" />	
			</view>
			<view v-if="order.status!=3" class="select-input">
				<input class="input" style="display:none;" />
				<text>退款金额：</text>
				<input class="input2" @focus="setStyle()" @blur="setStyle2()" v-model="refundAmount"  />
			</view>
			<p id="p2" class="p2" :style="{display:showOrNo}">请慎重对待！</p>
			<view v-if="order.status!=3" class="select-input">
				<input class="input" style="display:none;" />
				<text>PS:退款金额可修改</text>
			</view>
			<view v-if="order.payPlatform == 3" class="select-input">
				<input class="input" style="display:none;" />
				<text>退款原因：</text>
				<input v-if="order.status!=3" class="input2" v-model="refundReason" />
				<input v-if="order.status==3" class="input" name="refundReason" disabled :value="refundReason"/>	
			</view>
			<view v-if="order.status!=3" class="btn-area">
				<button type="primary" formType="submit" >退款</button>
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				show: true,
				order:null,
				sn:null,
				clientId:null,
				productName:null,
				price:null,
				payDate:null,
				refundDate:null,
				status:null,
				altMainBalance:0,
				refundAmount:0,
				refundPrice:0,
				showOrNo: null,
				note:null,
				production:0,
				refundReason:null,
			}
		},
		onLoad: function(option) {
			const order = JSON.parse(decodeURIComponent(option.order));
			this.order = order;
			if(order.type==1){
				this.production = order.agencyProportion;
			}
			if(order.type==2){
				this.production = order.merchantProportion;
			}
			if(order.type==3){
				this.production = order.personageProportion;
			}
			if(order.payPlatform == 3) {
				this.show = false;
			}
			this.sn = order.sn;
			this.clientId = order.clientId;
			this.productName = order.productName;
			this.price = order.price;
			this.payDate = order.payDate;
			this.refundDate = order.refundDate;
			this.status = order.status;
			this.note = order.note;
			this.refundPrice = order.refundAmount;
			this.refundAmount = order.price;
			this.refundReason = order.refundReason;
		},
		onShow() {
			this.mch();
			// console.log("订单详情")
		},
		methods: {
			orderSubmit(e) {
				var price = this.price;
				var production = this.production;
				var altMainBalance = this.altMainBalance;
				var refusePrice = price*production/100;
				console.log("refusePrice="+refusePrice)
				if(altMainBalance<refusePrice.toFixed(2)){
					uni.showToast({
					    title: '余额不足',
					    duration: 2000
					});
					return;
				}
				uni.showModal({
					title: '退款',
					content: '确定执行退款操作？',
					success: (res) => {
						if (res.confirm) {
							var order = this.order;
							var refundAmount = this.refundAmount;
							var refundReason = this.refundReason;
							var token = uni.getStorageSync("token");
							if(order.payPlatform != null && order.payPlatform == '3') {
								if(refundReason == null || refundAmount == "") {
									uni.showToast({
										title: '请输入退款原因',
										duration: 3000,
										icon: 'error'
									});
									return;
								}
								//如果为直接对接微信支付
								uni.request({
									url: this.serverurl + '/tWeixinPay/refund',
									data: {
										"sn": order.sn,
										"refusePrice":refundAmount,
										"refundReason": refundReason
									},
									header: {
										'token': token
									},
									method: "GET",
									success: (res) => {
										var message  = res.data.message;
										if(res.data.code){
											this.status = 2;
										}
										uni.showToast({
											title: message,
											duration: 3000
										});
									},
								});
							}else{
								uni.request({
									url: this.serverurl + '/TOrder/refund',
									data: {
										"sn": order.sn,
										"id": order.id,
										"refundAmount":refundAmount
									},
									header: {
										'token': token
									},
									method: "POST",
									success: (res) => {
										var message  = res.data.message;
										if(res.data.code){
											this.status = 2;
										}
										uni.showToast({
											title: message,
											duration: 3000
										});
									},
								});
							}
							
						} else if (res.cancel) {
							// console.log('用户点击取消');
							
						}
					}
				});
			},
			mch(){
				var token = uni.getStorageSync("token");
				var globalUser = uni.getStorageSync("globalUser");
				uni.request({
					url: this.serverurl + '/TJoinpayMch/getMch',
					data: {
						"adminId": globalUser.id,
						"bizCode":this.order.id
					},
					header: {
						'token': token
					},
					method: "POST",
					success: (res) => {
						var date  = res.data.data;
						this.altMainBalance = date.altMainBalance;
					},
				});
			},
			setStyle() {
				this.showOrNo = "block";
			},
			setStyle2() {
				this.showOrNo = "none";
			}
		}
	}
</script>

<style lang="scss">
	.home-getOrder {
		padding-top: 50upx;
	}

	.select-input {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		font-size: 16px;
		border-bottom: 1px solid;

		margin: 20upx 30upx 30upx 30upx;
		// box-shadow: 0upx 0upx 20upx #D3D3D3;

		text {
			margin-left: 30upx;
		}

		input {
			padding-left: 20upx;

			background-color: #FFFFFF;
			width: 400upx;
			height: 50upx;
			// box-shadow: 0upx 0upx 20upx #D3D3D3;
			// border-radius: 5upx;
		}
	}

	.form {
		width: calc(100% - 100upx);
		padding: 50upx;
		// .section{
		// 	margin:50upx 0;
		// }

		.btn-area {
			margin-top: 50upx;
			padding: 50upx;

			button {
				background-color: #007AFF;
			}
		}
	}
	.input2{
		box-shadow: 0upx 0upx 20upx #D3D3D3;
		border-radius: 5upx;
	}
	.p2 {
		color: #DD524D;
		display: none;
		width: 300upx;
		height: 50upx;
		border: 1px;
		margin-left: auto;
		margin-right: auto;
		padding-left: 30upx;
	}
</style>