discounts-minapp/my/order/refundDetail.vue

<template>
	<view class="refundDetail">

		<view class="content progress">
			<view class="progress-title">
				{{ info.goodsList[0].goodsState == 'REFUNDED' ? '退款成功' : '退款中' }}
			</view>
			<view class="progress-desc">
				{{ info.goodsList[0].refundLog.refundAmount ? '如您未查询到退款，请拨打10086咨询客服' : ' 请耐心等待，正在为您处理退款' }}
			</view>
			<u-steps dot current="0" activeColor="#FF4D3A" direction="column">
				<u-steps-item v-for="(item, index) in stepList" :key="index" :title="item.desc"
					:desc="$u.timeFormat(info.goodsList[0].refundLog[item.time], 'yyyy-mm-dd hh:MM:ss')">
				</u-steps-item>
			</u-steps>
		</view>

		<view @click="toMap()" class="content shop-box">
			<view class="shop-name">
				{{ info.shopInfo.shopName }}
			</view>
			<view class="address">
				{{ info.shopInfo.address }}
			</view>
		</view>

		<view class="content info">
			<view class="order-info">
				<image class="icon" :src="info.goodsList[0].goodsInfo.goodsPath" mode=""></image>
				<view class="shop-info">
					<view class="title">
						{{ info.goodsList[0].goodsInfo.goodsName }}
					</view>
					<view class="goods-desc">
						{{ info.goodsList[0].goodsInfo.goodsDescribe }}
					</view>
					<view class="price-box">
						<view class="price">
							￥{{ info.goodsList[0].goodsInfo.realPrice }}
						</view>

					</view>


					<!-- 有extend并且不是虚拟商品 -->
					<!-- <view class="start-time" v-if="info.extend&&!isVisual">
							出发时间：{{info.extend}}
						</view> -->

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


		<view class="content">
			<view class="title">
				商品总价
			</view>

			<view class="item">
				<view class="label">
					商品金额
				</view>
				<view class="value black">
					￥{{ info.goodsList[0].goodsInfo.realPrice }}
				</view>
			</view>


			<view class="item">
				<view class="label">
					优惠券
				</view>
				<view class="value red">
					-￥{{ info.discountAmount }}
				</view>
			</view>


			<view class="item">
				<view class="label">
					合计
				</view>
				<view class="value">
					<text class="red fs28">￥{{ info.payAmount }}</text>
				</view>
			</view>
			<view class="item">
				<view class="label">
					退款金额
				</view>
				<view class="value">
					<text class="red fs28">￥{{ info.goodsList[0].refundLog.refundAmount || info.payAmount }}</text>
				</view>
			</view>
		</view>

		<view class="content refund-box">
			<view class="title">
				退款原因
			</view>

			<view class="refund-msg">
				{{ info.goodsList[0].refundLog.remark }}
			</view>
		</view>
		<button type="default" :loading="btnLoading" v-if="!info.payment.transferAll" class="pay-btn"
			@click="cancelReply">取消退款</button>
		<button type="default" :loading="btnLoading" class="pay-btn" v-if="info.orderType == 'WAIT_PAYMENT'"
			@click="pay">立即支付</button>
		<view class="content apply-box"
			v-else-if="info.orderType == 'WAIT_USE' || info.orderType == 'USED' || info.orderType == 'CLOSE'" @click="apply">
			<view class="label">
				退款申请
			</view>
			<view class="value">
				如引发商品争议，可申请平台介入处理
			</view>
			<image class="jiantou" src="../../static/jiantou-icon.png" mode=""></image>
		</view>


	</view>
</template>

<script>
import { qrCode } from '@/api/order.js'
import { payDetails, queryPayOrder, unRefund } from '@/api/payment.js'
export default {
	data() {
		return {
			isVisual: false,//是否是虚拟商品
			codeData: '123',
			loading: false,
			btnLoading: false,
			oldBright: 0,
			info: {
				goodsList: []
			},
			stepList: [

				{
					desc: '平台受理中',
					time: 'createTime'
				},
				{
					desc: '提交申请',
					time: 'createTime'
				},
			]
		}
	},
	filters: {
		filterType: function (val) {
			if (val == 'APPLY_REFUND') {
				return '退款审核中'
			} else if (val == 'CLOSE') {
				return '关闭订单'
			} else if (val == 'REFUNDED') {
				return '已退款'
			} else if (val == 'REFUSAL_REFUND') {
				return '拒绝退款'
			} else if (val == 'USED') {
				return '订单已完成'
			} else if (val == 'WAIT_PAYMENT') {
				return '待付款'
			} else if (val == 'WAIT_USE') {
				return '待使用'
			}
		},
		filterPay(val) {
			if (val == 'wx.unifiedOrder') {
				return '微信支付'
			} else if (val == 'trade.create') {
				return '支付宝支付'
			} else if (val == 'uac.miniOrder') {
				return '云闪付支付'
			} else {
				return '-'
			}
		}
	},
	methods: {
		toMap() {
			uni.openLocation({
				latitude: +this.info.shopInfo.mapLat,
				longitude: +this.info.shopInfo.mapLon,
				name: this.info.shopInfo.shopName,
				address: this.info.shopInfo.address,
			});
		},
		apply() {
			let that = this
			uni.navigateTo({
				url: './refund',
				success: function (res) {
					// 通过eventChannel向被打开页面传送数据
					res.eventChannel.emit('orderInfo', that.info)
				}
			})
		},
		// 获取订单详情
		payDetails(orderNo) {
			payDetails(orderNo).then(res => {
				this.info = res.content
				console.log(this.info);
				if (this.info.goodsList[0].goodsState == 'REFUNDED' && this.info.goodsList[0].refundLog.conclusionTime) {
					console.log(222222222222222);
					this.stepList.unshift({
						desc: '退款完成,已原路返回',
						time: 'conclusionTime'
					})
				}
				try {
					let extend = JSON.parse(this.info.extend)
					if (extend.account) {
						this.isVisual = true
					}
				} catch (e) {
					//TODO handle the exception
				}
			})
		},
		// 支付
		pay() {
			if (this.btnLoading) return
			this.btnLoading = true
			uni.showLoading({
				title: '支付中'
			})
			let that = this
			let miniPayRequest = JSON.parse(this.info.miniPayRequest)
			uni.requestPayment({
				"provider": "wxpay",
				"orderInfo": miniPayRequest,
				"appid": miniPayRequest.appId, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
				"paySign": miniPayRequest.paySign,
				"nonceStr": miniPayRequest.nonceStr, // 随机字符串
				"package": miniPayRequest.package, // 固定值
				// "prepayid":  miniPayRequest.package, // 统一下单订单号 
				"timeStamp": miniPayRequest.timeStamp, // 时间戳（单位：秒）
				"signType": miniPayRequest.signType, //签名算法
				success(msg) {
					console.log('msg', msg);
					queryPayOrder(that.info.orderNo).then(res1 => {
						if (res1.state == 'Success') {
							uni.hideLoading()
							uni.showToast({
								title: '支付成功',
								icon: 'success'
							})
							that.btnLoading = false
							that.payDetails(that.info.orderNo)
						}
					})
				},
				fail(e) {
					that.btnLoading = false
					uni.hideLoading()
					uni.showToast({
						title: '取消支付',
						icon: 'fail'
					})
					// 取消支付后，获取支付信息以备再次支付
					that.payDetails(that.info.orderNo)
					console.log('err', e, this);
				}
			})
		},
		// 取消退款申请
		cancelReply() {
			if (this.btnLoading) return
			this.btnLoading = true
			uni.showLoading({
				title: '取消中'
			})
			unRefund({ id: this.info.goodsList[0].id }).then(res => {
				this.btnLoading = false
				uni.hideLoading()

				if (res.state == 'Success') {
					this.payDetails(this.info.orderNo)
					uni.showToast({
						title: '取消成功',
						icon: 'success'
					})
				}
			})
		}
	},
	onReady() {

	},
	onLoad(options) {
		this.info.orderNo = options.id
	},
	onShow() {
		this.payDetails(this.info.orderNo)
	},
	created() {
		// this.info = JSON.parse(uni.getStorageSync('order'))
	}
}
</script>

<style lang="scss">
.refundDetail {
	background: #F9F9F9;
	min-height: 100vh;
	padding-bottom: 100rpx;

	.progress {
		.progress-title {
			font-weight: 600;
			font-size: 32rpx;
			color: #181818;
		}

		.progress-desc {
			font-weight: 300;
			font-size: 24rpx;
			color: #AAAAAA;
			margin-top: 15rpx;
		}
	}

	.shop-box {
		width: 690rpx;
		// margin: 0 30rpx;
		// padding: 24rpx 24rpx 30rpx;
		background: #fff;
		border-radius: 16rpx;
		margin-top: -30rpx;
		box-sizing: border-box;

		.shop-name {
			font-weight: 600;
			font-size: 32rpx;
			color: #181818;
			width: 100%;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.address {
			font-weight: 300;
			font-size: 24rpx;
			color: #AAAAAA;
			margin-top: 20rpx;
			width: 100%;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}

	.black {
		color: #222222 !important;
	}

	.red {
		color: red !important;
	}

	.fs28 {
		font-size: 28rpx !important;
		font-weight: bold;
	}



	.input-box {
		margin: 20rpx 30rpx;
		padding: 28rpx 24rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.label {
			color: #222;
			font-size: 28rpx;
		}

		.value {
			font-size: 28rpx;
			color: #AAAAAA;
		}
	}

	.content {
		margin: 20rpx 30rpx;
		padding: 28rpx 24rpx;
		border-radius: 16rpx;
		background: #fff;

		.title {
			font-weight: 600;
			font-size: 28rpx;
			color: #222222;
		}

		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 28rpx;

			.label {
				color: #222222;
				font-size: 28rpx;
			}

			.value {
				color: #999999;
				font-size: 28rpx;
			}
		}
	}

	.pay-btn {
		background: $uni-color-primary;
		width: 688rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 46rpx;
		color: #fff;
		margin-top: 50rpx;
	}

	.refund-box {
		.refund-msg {
			font-weight: 300;
			font-size: 24rpx;
			color: #222222;
			margin-top: 15rpx;
			line-height: 40rpx;
		}
	}

	.apply-box {
		position: relative;

		.label {
			font-weight: 600;
			font-size: 28rpx;
			color: #222222;
		}

		.value {
			color: #999999;
			font-size: 24rpx;
			margin-top: 15rpx;
		}

		.jiantou {
			position: absolute;
			top: 50%;
			right: 24rpx;
			transform: translateY(-50%);
			width: 24rpx;
			height: 24rpx;
		}
	}

	.info {
		.order-info {
			display: flex;

			.icon {
				width: 164rpx;
				height: 164rpx;
				border-radius: 16rpx;
				flex-shrink: 0;
			}

			.shop-info {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding-left: 24rpx;
				flex: 1;
				box-sizing: border-box;

				.title {
					color: #181818;
					font-size: 28rpx;
					width: 450rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.price-box {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.price {
						color: #181818;
						font-size: 32rpx;
						font-weight: bold;
					}

				}

				.start-time,
				.goods-desc {
					font-size: 24rpx;
					color: #AAAAAA;
					width: 450rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					margin-top: 10rpx;
				}
			}
		}


	}

	.wrap {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
		overflow: hidden;
	}

}
</style>