BeiJingGuoKang/北京国康小程序/pages/buy/done/done.vue

<script setup>
	/**
	 * name：
	 * user：sa0ChunLuyu
	 * date：2023年5月30日 13:41:25
	 */
	import {
		ref
	} from 'vue'
	import {
		$image,
		$response,
		OrderInfoAction,
	} from '@/api'
	import {
		onShow
	} from '@dcloudio/uni-app'
	const $props = defineProps({
		id: {
			type: Number,
			default: 0
		}
	});
	onShow(() => {
		OrderInfo()
	})
	const tip = ref('订单查询中')
	const order_info = ref(false)
	const OrderInfo = async () => {
		const response = await OrderInfoAction({
			id: $props.id
		})
		tip.value = '订单信息'
		$response(response, () => {
			let info = response.data.info
			info.buy_info = JSON.parse(info.buy_info)
			let name = '自选项目'
			if (info.combo !== '0') {
				name = info.buy_info.combo.name
			} else {
				if (Number(info.type) === 2) {
					name = info.buy_info.group.combo_name
				}
			}
			info.combo_name = name
			order_info.value = info
		})
	}

	const doneClick = () => {
		uni.reLaunch({
			url: '/pages/main/order/order'
		})
	}
</script>
<template>
	<view>
		<view class="top_line_wrapper"></view>
		<view class="done_image_wrapper">
			<image :src="$image('/storage/assets/mp/order/订单完成.png')"></image>
		</view>
		<view class="done_text_wrapper">{{ !!order_info ? '恭喜您，支付成功！' : tip }}</view>
		<view v-if="!!order_info" class="done_info_wrapper">
			<view class="combo_name_wrapper">{{ order_info.combo_name }}</view>
			<view class="combo_break_wrapper"></view>
			<view class="combo_line_wrapper">
				<view class="combo_line_title_wrapper">体检人：</view>
				<view class="combo_line_content_wrapper">{{ order_info.name }}</view>
			</view>
			<view class="combo_line_wrapper">
				<view class="combo_line_title_wrapper">证件号码：</view>
				<view class="combo_line_content_wrapper">{{ order_info.id_number }}</view>
			</view>
			<view class="combo_line_wrapper">
				<view class="combo_line_title_wrapper">预约单号：</view>
				<view class="combo_line_content_wrapper">{{ order_info.show }}</view>
			</view>
			<view class="combo_line_wrapper">
				<view class="combo_line_title_wrapper">预约时间：</view>
				<view class="combo_line_content_wrapper">{{ order_info.appointment_time }}</view>
			</view>
			<view class="combo_line_wrapper">
				<view class="combo_line_title_wrapper">类型：</view>
				<view class="combo_line_content_wrapper">{{ Number(order_info.type) === 1 ? '个检' : '团检' }}</view>
			</view>
			<view class="combo_price_wrapper">
				<view class="combo_price_title_wrapper">订单金额：</view>
				<view class="combo_price_content_wrapper">
					<text>￥{{ Number(order_info.price).toFixed(2) }}</text>
					<text
						v-if="Number(order_info.price) !== Number(order_info.true_price)">(测试：{{ Number(order_info.true_price).toFixed(2) }})</text>
				</view>
			</view>
		</view>
		<view @click="doneClick()" class="done_button_wrapper">确认并关闭</view>
		<view class="blank_wrapper"></view>
	</view>
</template>
<style>
	page {
		background: #ffffff;
	}
</style>
<style scoped>
	.combo_price_content_wrapper {
		color: #FF0000;
	}

	.combo_price_title_wrapper {
		color: #000000;
		font-weight: bold;
	}

	.combo_line_content_wrapper {
		color: #000000;
	}

	.combo_line_title_wrapper {
		color: #666666;
	}

	.combo_line_wrapper,
	.combo_price_wrapper {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #666666;
		line-height: 1;
		height: 50rpx;
		line-height: 50rpx;
		margin-left: 59rpx;
	}

	.combo_break_wrapper {
		width: 559rpx;
		height: 1rpx;
		background: #0BBACF;
		margin: 26rpx auto 30rpx;
	}

	.combo_name_wrapper {
		font-size: 30rpx;
		font-weight: 500;
		color: #0BBACF;
		line-height: 1;
		margin-top: 36rpx;
		margin-left: 58rpx;
	}

	.done_button_wrapper {
		width: 580rpx;
		height: 90rpx;
		background: linear-gradient(-90deg, #23D3AF, #0DC5CF);
		border-radius: 45rpx;
		margin: 120rpx auto 0;
		font-size: 31rpx;
		font-weight: 500;
		color: #F6FDFD;
		line-height: 90rpx;
		text-align: center;
	}

	.done_info_wrapper {
		width: 660rpx;
		height: 441rpx;
		background: #e9f7fa;
		border-radius: 15rpx;
		margin: 91rpx auto 0;
		overflow: hidden;
	}

	.done_text_wrapper {
		font-size: 36rpx;
		font-weight: 500;
		color: #181818;
		line-height: 1;
		text-align: center;
		margin-top: 31rpx;
	}

	.done_image_wrapper image {
		width: 165rpx;
		height: 165rpx;
		display: block;
	}

	.done_image_wrapper {
		width: 165rpx;
		height: 165rpx;
		margin: 71rpx auto 0;
	}
</style>