massage-front/pages_order/order/verifyOrder.vue

<template>
	<view class="page">

		<navbar title="核销详情" leftClick @leftClick="$utils.navigateBack" color="#fff" />

		<view class="flex page-header">
			<image class="icon" src="@/pages_order/static/verifyOrder/icon-clock.png" mode="widthFix"></image>
			<text>待核销</text>
		</view>

		<view class="page-content">
			<!-- 商品详情 -->
			<productCard :data="orderDetail.massageItem" size="medium" :readonly="true"></productCard>

			<view class="card rights" v-if="orderDetail.rights && orderDetail.rights.length">
				<view class="flex rights-item" v-for="item in orderDetail.rights" :key="item">
					<image class="rights-icon" src="@/pages_order/static/verifyOrder/icon-checked.png" mode="widthFix">
					</image>
					<text>{{ item }}</text>
				</view>
			</view>

			<view class="card info">
				<view class="info-header">核销信息</view>
				<view class="flex flex-column info-content">
					<view class="" style="margin: 20rpx;">
						<uv-qrcode ref="qrcode" size="300px" :value="`${orderDetail.id},0`"></uv-qrcode>
					</view>
					
					<view class="info-no">{{ `订单号：${orderDetail.id}` }}</view>
					<view class="info-desc">{{ `有效时间：${validRange}` }}</view>
				</view>
			</view>
		</view>

		<!-- 下单 -->
		<view class="flex bar">
			<button plain class="btn btn-plain" @click="onRefund">申请退款</button>
			<button plain class="btn" @click="onBuyAgain">再次购买</button>
		</view>

	</view>
</template>

<script>
	import productCard from '@/components/product/productCard.vue'

	export default {
		components: {
			productCard,
		},
		data() {
			return {
				orderDetail: {},
			}
		},
		computed: {
			validRange() {
				const { createTime, validTime } = this.orderDetail || {}

				let startTime = createTime ? this.$dayjs(createTime).format('YYYY-MM-DD') : '-'
				let endTime = validTime ? this.$dayjs(validTime).format('YYYY-MM-DD') : '-'

				return `${startTime}至${endTime}`
			},
		},
		onLoad(args) {
			this.id = args.id
			this.fetchOrderDetail()
		},
		onPullDownRefresh() {
			this.fetchOrderDetail()
		},
		methods: {
			async fetchOrderDetail() {
				try {

					this.orderDetail = await this.$fetch('queryOrderById', {
						id: this.id
					})

				} catch (err) {

				}

				uni.stopPullDownRefresh()
			},
			async fetchRefund() {
				try {
					const res = await this.$fetch('refundOrder', { orderId: this.orderDetail.id }, false)
					
					if (res.code == 200) {
						uni.showToast({
							title: '退款成功',
							icon: 'none'
						})
						setTimeout(uni.navigateBack, 800, -1)
					} else {
						uni.showToast({
							title: res.data,
							icon: 'none'
						})
					}
				} catch (err) {
					
				}
			},
			onRefund() {
				uni.showModal({
					title: '确认申请订单退款嘛？',
					success: e => {
						if (e.confirm) {
							this.fetchRefund()
							uni.showToast({
								title: '已提交申请，请耐心等候',
								icon: 'none'
							})
						}
					}
				})
			},
			onBuyAgain() {
				// todo: check
				this.$utils.navigateTo(`/pages_order/product/productDetail?id=${this.orderDetail.massageItem.id}`)
			},
		},
	}
</script>

<style scoped lang="scss">
	$bar-height: 132rpx;

	.page {
		background-color: #F5F5F5;

		/deep/ .nav-bar__view {
			background-image: linear-gradient(#84A73F, #D8FF8F);
		}

		&-header {
			color: #000000;
			font-size: 28rpx;
			margin-top: 24rpx;

			.icon {
				width: 30rpx;
				height: auto;
				margin-right: 17rpx;
			}
		}

		&-content {
			padding: 11rpx 13rpx;
		}
	}

	.rights {
		margin-top: 15rpx;
		padding: 23rpx 48rpx;
		color: #000000;
		font-size: 28rpx;

		&-item {
			margin-right: 70rpx;
			display: inline-flex;
		}

		&-icon {
			width: 30rpx;
			height: auto;
			margin-right: 12rpx;
		}
	}

	.info {
		margin-top: 19rpx;
		padding: 25rpx 41rpx 51rpx 41rpx;
		font-size: 28rpx;

		&-header {
			color: #000000;
			padding: 0 0 16rpx 7rpx;
			border-bottom: 1rpx dashed #C7C7C7;
		}

		&-qr {
			width: 279rpx;
			height: auto;
			margin-top: 57rpx;
		}

		&-no {
			color: #84A73F;
			margin-top: 16rpx;
		}

		&-desc {
			color: #999999;
			font-size: 22rpx;
			margin-top: 65rpx;
		}
	}


	.bar {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		height: $bar-height;
		padding-bottom: env(safe-area-inset-bottom);
		background-color: $uni-fg-color;

		justify-content: flex-end;
	}


	.btn {
		display: inline-block;
		width: auto;
		height: auto;
		padding: 24rpx 50rpx;
		box-sizing: border-box;
		border: none;
		border-radius: 44rpx;
		margin: 0;
		font-size: 28rpx;
		line-height: 1;

		color: #FFFFFF;
		background-image: linear-gradient(to right, #84A73F, #D8FF8F);

		&+& {
			margin-left: 39rpx;
		}

		&:last-child {
			margin-right: 54rpx;
		}

		&-plain {
			border: 2rpx solid #999999;
			color: #999999;
			background: none;
		}
	}
</style>