zhywpt-sp/subpackage/orders/order-card-sign-payment.vue

<!-- 换卡、换签、同时换卡换签 订单支付确认页面 -->
<template>
	<!-- 地址信息 -->
	<view class="address-box as-gravity-center-start as-layout-horizontal">
		<view class="avatar as-gravity-center">
			{{state.orderInfo.orderInfoExt.consignee != null ? state.orderInfo.orderInfoExt.consignee.charAt(0) : ''}}
		</view>
		<view class="center" style="flex:1">
			<view class="as-layout-horizontal">
				<view class="name">
					{{state.orderInfo.orderInfoExt.consignee ?state.orderInfo.orderInfoExt.consignee: ''}}</view>
				<view class="phone">
					{{state.orderInfo.orderInfoExt.consigneeTel ?state.orderInfo.orderInfoExt.consigneeTel: ''}}</view>
			</view>
			<view class="addr">{{state.orderInfo.orderInfoExt.region ?state.orderInfo.orderInfoExt.region: ''}}
				{{state.orderInfo.orderInfoExt.address ?state.orderInfo.orderInfoExt.address: ''}}
			</view>
		</view>
		<image :src="`${$imgUrl}applyCard/edit.png`" mode="" class="edit" @click="gotoEditAddress(state.orderInfo)">
		</image>
	</view>

	<!-- 基本信息 -->
	<view class="detail-box">
		<view class="content" v-for="(item,index) in state.orderBaseInfo" :key="index">
			<order-info-item :label="item.label" :value="item.value"></order-info-item>
		</view>

		<view class="card-box as-layout-horizontal as-gravity-center-start">
			<image :src="`${$imgUrl}card1.png`" mode="" class="left"></image>
			<view class="right">
				<!-- /更换ETC设备(换签)/更换ETC卡（换卡） -->
				<view class="number">更换卡签</view>
				<view class="info">
					<view class="card-type">图片仅供参考，以实际产品为准</view>
				</view>
			</view>
		</view>

		<view class="content" v-for="(item,index) in state.otherInfo" :key="index">
			<order-info-item :label="item.label" :value="item.value"></order-info-item>
		</view>
	</view>

	<view class="btn">
		<submit-button title="支付" @submit="msg('支付')"></submit-button>
	</view>

</template>

<script setup lang="ts">
	import orderInfoItem from "./components/order-info-item";
	import { reactive } from "vue";
	import { onLoad, onUnload } from "@dcloudio/uni-app";
	import { request } from "@/utils/network/request";
	import { editOrderAddr, orderDetail } from "@/utils/network/api";
	import { stringToJson } from "@/utils/network/encryption";
	import useOrderSkip from "@/composables/order/useOrderSkip";
	import { getETCStatusName, getOBUStatusName, msg, getOrderTypeName, getCarTypeName, getOrderTime, isBlank } from "@/utils/utils";
	import { OrderStatus } from "@/datas/enum";

	//按钮跳转业务逻辑
	const { gotoEditAddress } = useOrderSkip();

	const state = reactive({
		orderInfo: {} as any, //订单信息
		//基本信息
		orderBaseInfo: [{
			label: '订单车牌号：',
			value: '',
			field: 'vehiclePlate'
		},
		{
			label: '业务类型：',
			value: '',
			field: ''
		},
		{
			label: '原卡号：',
			value: '',
			field: ''
		},
		{
			label: '原卡状态：',
			value: '',
			field: ''
		},
		{
			label: '原OBU号：',
			value: '',
			field: ''
		},
		{
			label: '原OBU状态：',
			value: '',
			field: 'customerIdnum'
		},
		{
			label: '收费类型：',
			value: '',
			field: 'vehicleClass'
		},
		],

		// 其他信息
		otherInfo: [{
			label: '产品金额：',
			value: '',
			field: 'vehiclePlate'
		},
		{
			label: '加购权益：',
			value: '',
			field: ''
		},
		{
			label: '运费：',
			value: '',
			field: ''
		},
		{
			label: '优惠券：',
			value: '',
			field: ''
		},
		{
			label: '积分兑换：',
			value: '',
			field: ''
		},
		{
			label: '实付款：',
			value: '',
			field: 'customerIdnum'
		},
		],
	});

	//获取订单详情
	const getOrderDetails = (id) => {
		const options = {
			type: 2,
			data: { "id": id },
			method: 'POST',
			showLoading: true,
		}
		request(orderDetail, options).then((res) => {
			state.orderInfo = stringToJson(res.bizContent);
			setOrderData();
		})
	}

	//设置订单数据
	const setOrderData = () => {
		state.orderBaseInfo.map((item) => {
			item.value = state.orderInfo[item.field];
		})

		state.otherInfo.map((item) => {
			item.value = (state.orderInfo.orderInfoExt as {})[item.field];
		})
	}

	//修改订单收货地址
	const requestEditOrderAddr = (addr) => {
		const options = {
			type: 2, data: {
				"id": state.orderInfo.id,
				'consignee': addr.consignee,
				'consigneeTel': addr.consigneeTel,
				'region': addr.region,
				'address': addr.address,
				'postalCode': addr.postalCode
			},
			method: 'POST',
			showLoading: true,
		}

		request(editOrderAddr, options).then((res) => {
			state.orderInfo.orderInfoExt.id = addr.id,
				state.orderInfo.orderInfoExt.consignee = addr.consignee;
			state.orderInfo.orderInfoExt.consigneeTel = addr.consigneeTel;
			state.orderInfo.orderInfoExt.region = addr.region;
			state.orderInfo.orderInfoExt.address = addr.address;
			state.orderInfo.orderInfoExt.postalCode = addr.postalCode;
			setTimeout(() => {
				msg('收货地址修改成功');
			}, 1000)
		})
	}

	onLoad((options) => {
		//TODO 测试
		options.id = "5b15cf9c01744072853227f916128fb9";

		getOrderDetails(options.id);

		//修改收货地址 
		uni.$on('selectAddressSuccess', (addr) => {
			requestEditOrderAddr(addr);
		});
	})

	onUnload(() => {
		uni.$off('selectAddressSuccess');
	})
</script>

<style>
	page {
		background-color: #EEF7F7;
		padding-bottom: 50rpx;
	}
</style>

<style lang="scss" scoped>
	.address-box {
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
		border-radius: 20rpx;
		margin: 30rpx 30rpx 0rpx;
		padding: 30rpx;

		.avatar {
			background: rgba(0, 179, 139, 0.2);
			border-radius: 50%;
			color: #00B38B;
			font-size: 26rpx;
			width: 80rpx;
			height: 80rpx;
		}

		.center {
			margin-left: 20rpx;
			margin-right: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;

			.name {
				font-size: 30rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #333333;
			}

			.phone {
				font-size: 24rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #999999;
				margin-left: 20rpx;
			}

			.addr {
				margin-top: 18rpx;
				font-size: 26rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #333333;
				line-height: 36rpx;
			}
		}

		.edit {
			width: 60rpx;
			height: 55rpx;
		}
	}

	.detail-box {
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
		border-radius: 20rpx;
		margin: 30rpx;
		padding-bottom: 30rpx;

		.content {
			padding: 28rpx 30rpx 0rpx;
		}

		.card-box {
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 13rpx 3rpx rgba(223, 223, 223, 0.4);
			border-radius: 20rpx;
			margin: 30rpx 30rpx 0rpx;
			padding: 30rpx;

			.left {
				width: 100rpx;
				height: 90rpx;
			}

			.right {
				margin-left: 30rpx;

				.number {
					font-size: 30rpx;
					font-family: Noto Sans S Chinese;
					font-weight: 600;
					color: #333333;
				}

				.info {
					margin-top: 20rpx;

					.card-type {
						margin-right: 20rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #666666;
					}

					.card-status {
						height: 40rpx;
						line-height: 40rpx;
						background: #D3F2EF;
						border-radius: 6rpx;
						font-size: 20rpx;
						font-family: Noto Sans S Chinese;
						font-weight: 400;
						color: #0A8F8A;
						text-align: center;
						padding: 0rpx 30rpx
					}
				}
			}
		}
	}

	.btn {
		margin: 50rpx 30rpx 0rpx;
	}
</style>