hainan_2024/h5/pages/buy/done/done.vue

<script setup>
import DraggableButton from "@/pages/components/goHome.vue";
	/**
	 * name：
	 * user：sa0ChunLuyu
	 * date：2024年9月11日 19:24:50
	 */
	import {
		ref
	} from 'vue'
	import {
		$api,
		$response
	} from '@/api'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		useStore
	} from '@/store'
	const $store = useStore()

	const $props = defineProps({
		id: {
			type: String,
			default: '0'
		}
	});

	const mountedAction = () => {
		getOrderInfo()
	}

	const config_ref = ref(null)
	const configRef = (e) => {
		if (!config_ref.value) {
			config_ref.value = e
			mountedAction()
		}
	}

	// const order_info = ref({
	// 	status: 1,
	// 	combo_id: 1,
	// 	combo_name: '中心动脉硬化检测体检',
	// 	item_ids: [1, 2, 3, 4],
	// 	item_info: [{
	// 		name: '抽血1'
	// 	}, {
	// 		name: '抽血2'
	// 	}, {
	// 		name: '抽血3'
	// 	}, {
	// 		name: '抽血4'
	// 	}],
	// 	name: '周子轩',
	// 	id_number: '130322199409090090',
	// 	order_number: '1000034',
	// 	order_time: '2024-12-12 12:12:12',
	// 	type: '个检',
	// 	price: '300.00'
	// })
	const order_info = ref({})
	const getOrderInfo = async () => {
		uni.showLoading()
		const response = await $api('GetOrderDetail', {
			openid: localStorage.getItem('OPENID'),
			id: $props.id,
		})
		uni.hideLoading()
		$response(response, () => {
			if (response.status) {
			 order_info.value=response.data.info
			}
		})
	}

	const toOrderList = () => {
		uni.redirectTo({
			url: '/pages/main/order/order'
		})
	}

	onShow(() => {
		if (!!config_ref.value) {
			mountedAction()
		}
	})
</script>
<template>
	<DraggableButton />
	<view>
		<view v-if="!!$store.config">
			<view :ref="configRef"></view>
		</view>
		<view v-if="!!order_info">
			<view v-if="order_info.status === 2" class="order_done_wrapper">
				<view class="order_icon_wrapper">
					<view class="order_icon_image_wrapper">
						<image src="@/static/assets/buy/buy_done@2x.png"></image>
					</view>
					<view class="order_icon_tip_wrapper">恭喜您，支付成功！</view>
				</view>
				<view class="order_info_wrapper">
					<view class="order_info_title_wrapper">{{ order_info.title }}</view>
					<view class="order_info_line_wrapper">
						<view class="order_info_label_wrapper">体检人：</view>
						<view class="order_info_value_wrapper">{{ order_info.name }}</view>
					</view>
					<view class="order_info_line_wrapper">
						<view class="order_info_label_wrapper">证件号码：</view>
						<view class="order_info_value_wrapper">{{ order_info.id_number }}</view>
					</view>
					<view class="order_info_line_wrapper">
						<view class="order_info_label_wrapper">预约单号：</view>
						<view class="order_info_value_wrapper">{{ order_info.order_number }}</view>
					</view>
					<view class="order_info_line_wrapper">
						<view class="order_info_label_wrapper">预约时间：</view>
						<view class="order_info_value_wrapper">{{ order_info.appointment_date }} {{ order_info.appointment_time }}</view>
					</view>
					<view class="order_info_line_wrapper">
						<view class="order_info_label_wrapper">类型：</view>
						<view class="order_info_value_wrapper"><span v-if="order_info.type==1">个检</span><span  v-if="order_info.type==2">团检</span></view>
					</view>
					<view class="order_info_price_wrapper">
						<view class="order_info_label_wrapper">订单金额：</view>
						<view class="order_info_value_wrapper">¥{{ order_info.true_price }}</view>
					</view>
				</view>
				<view @click="toOrderList()" class="check_done_wrapper">确认并关闭</view>
			</view>
		</view>
	</view>
</template>
<style>
	page {
		background: #ffffff;
	}
</style>
<style scoped>
	.check_done_wrapper {
		width: 580rpx;
		height: 90rpx;
		margin: 120rpx auto 0;
		border-radius: 999rpx;
		background: #35ACB2;
		font-weight: 500;
		font-size: 31rpx;
		color: #F6FDFD;
		line-height: 90rpx;
		text-align: center;
	}

	.order_info_line_wrapper {
		display: flex;
		align-items: center;
		font-weight: normal;
		font-size: 24rpx;
		color: #666666;
		line-height: 48rpx;
	}

	.order_info_value_wrapper {
		color: #000000;
	}

	.order_info_price_wrapper {
		display: flex;
		align-items: center;
		font-weight: normal;
		font-size: 24rpx;
		color: #000000;
		line-height: 48rpx;
		margin-top: 20rpx;
	}

	.order_info_price_wrapper .order_info_value_wrapper {
		color: #FF0000;
	}

	.order_info_title_wrapper {
		font-weight: 500;
		font-size: 30rpx;
		color: #0BBACF;
		line-height: 45rpx;
		border-bottom: solid 1rpx #0BBACF;
		padding-bottom: 15rpx;
		margin-bottom: 10rpx;
	}

	.order_info_wrapper {
		width: calc(660rpx - 110rpx);
		background: #E6F8FA;
		border-radius: 15rpx;
		margin: 91rpx auto 0;
		padding: 30rpx 55rpx;
	}

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

	.order_done_wrapper {
		width: 750rpx;
		margin: 0 auto;
	}

	.order_icon_wrapper {
		margin-top: 71rpx;
	}

	.order_icon_image_wrapper {
		width: 165rpx;
		height: 165rpx;
		margin: 0 auto;
	}

	.order_icon_image_wrapper image {
		width: 165rpx;
		height: 165rpx;
		display: inline-block;
		object-fit: contain;
	}
</style>