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;
			msg('收货地址修改成功');
		})
	}
	
	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>