zhywpt-sp/subpackage/orders/order-details-recharge.vue

<!-- 单位账户充值开户-订单详情 -->
<template>
	<view>
		<image :src="`${$imgUrl}applyCard/bg-nav.png`" style='height: 300rpx;width: 100%;'></image>
		<view class="props-txt-wrap">
			<view class="pro-txt" :class="{'pro-txt-primary':state.step >= 1}">发起业务</view>
			<view class="pro-txt pro-center" :class="{'pro-txt-primary':state.step >= 2}">审核中</view>
			<view class="pro-txt" :class="{'pro-txt-primary':state.step >= 3}">完成</view>
		</view>
		<view class="pros-wrap">
			<view :class="state.step >= 1 ? 'item-circle' : 'item-circle-no'">1</view>
			<view :class="state.step >= 2 ? 'item-line-solid' : 'item-line'"></view>
			<view :class="state.step >= 2 ? 'item-circle' : 'item-circle-no'">2</view>
			<view :class="state.step >= 3 ? 'item-line-solid' : 'item-line'"></view>
			<view :class="state.step >= 3 ? 'item-circle' : 'item-circle-no'">3</view>
		</view>
	</view>
	<view class="content">
		<view class="title">基础信息</view>
		<view class="content-box" v-for="(item,index) in state.orderBaseInfo" :key="index">
			<order-info-item :label="item.label" :value="item.value"></order-info-item>
		</view>
	
		<view class="title">卡/OBU设备信息</view>
		<view class="card-box as-layout-horizontal as-gravity-center-start">
			<image :src="`${$imgUrl}card2.png`" mode="" class="left"></image>
			<view class="right">
				<view class="number">2023022700012</view>
				<view class="info as-layout-horizontal">
					<view class="card-type">储蓄卡</view>
					<view class="card-status">正常</view>
				</view>
			</view>
		</view>
		<view class="card-box as-layout-horizontal as-gravity-center-start">
			<image :src="`${$imgUrl}card1.png`" mode="" class="left"></image>
			<view class="right">
				<view class="number">2023022700012</view>
				<view class="info as-layout-horizontal">
					<view class="card-status">正常</view>
				</view>
			</view>
		</view>
		
		<view class="title">图片信息</view>
		<view class="imgs">
			<image v-for="(img,index) in state.imgList" :key="index" :src="img" @click="checkBigImg(index,state.imgList)" mode="aspectFill"></image>
		</view>
		
		<view class="title">其他信息</view>
		<view class="content-box" v-for="(item,index) in state.otherInfo" :key="index">
			<order-info-item :label="item.label" :value="item.value"></order-info-item>
		</view>
		
		<view style="height: 30rpx;"></view>
	</view>
</template>

<script setup lang="ts">
	import {onLoad,onUnload} from "@dcloudio/uni-app";
	import {reactive} from "vue";
	import orderInfoItem from "./components/order-info-item";
	import {checkBigImg, msg} from "@/utils/utils";
	import {request} from "@/utils/network/request";
	import {stringToJson} from "@/utils/network/encryption";
	import {orderDetail} from "@/utils/network/api";
	
	const state = reactive({
		//当前步骤
		step: 2, 
		//订单信息
		orderInfo:{} as any,
		//基本信息
		orderBaseInfo: [{
				label: '审核进度：',
				value: '',
				field:'orderStep'
			},
			{
				label: '审核时间：',
				value: '',
				field:'insertTime'
			},
			{
				label: '审核不通过原因：',
				value: '',
				field:'cancelReason'
			},
			{
				label: '用户名称：',
				value: '',
				field:'customerName'
			},
			{
				label: '用户证件类型：',
				value: '',
				field:'customerIdtype'
			},
			{
				label: '用户证件号：',
				value: '',
				field:'customerIdnum'
			},
			{
				label: '收费类型：',
				value: '',
				field:'vehicleClass'
			},
			{
				label: '订单车牌号：',
				value: '',
				field:'vehiclePlate'
			},
		],
		
		//其他信息
		otherInfo: [{
				label: '登录用户名：',
				value: '',
				field:'customerName'
			},{
				label: '公司证件类型：',
				value: '',
				field:'customerIdtype'
			},{
				label: '公司证件编码：',
				value: '',
				field:'customerIdnum'
			},{
				label: '公司名称：',
				value: '',
				field:'customerDepartment'
			},{
				label: '经办人姓名：',
				value: '',
				field:'agentName'
			},
			{
				label: '经办人手机号：',
				value: '',
				field:'agentIdnum'
			},
			{
				label: '付款账户：',
				value: '',
				field:'bankId'
			},
			{
				label: '开户行名称：',
				value: '',
				field:'channelId'
			},
		],
	
		//图片信息
		imgList:[
			"https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/baike/s=220/sign=31ede97caf51f3dec7b2be66a4eff0ec/6609c93d70cf3bc733c6ec5ad100baa1cc112a45.jpg",
			"https://img0.baidu.com/it/u=1850313341,1939718576&fm=253&fmt=auto&app=138&f=JPG?w=707&h=500",
			"https://p6.itc.cn/q_70/images03/20220911/e5f32181a5dc4ac4a3834123a559b4e5.jpeg",
			"https://image2.sina.com.cn/dy/o/2005-02-01/1107213262_.haWGD.jpg",
		]
	});
	
	//获取订单详情
	const getOrderDetails = (id) => {
		if(!id) {
			msg('无效的订单id');
			return;
		}
		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];
		})
	}
	
	onLoad((options)=>{
		getOrderDetails(options.id);
	})
	
	onUnload(()=>{
		
	})
</script>

<style lang="scss" scoped>
	.props-txt-wrap {
		position: absolute;
		top: -50rpx;
		left: 30rpx;
		right: 30rpx;
		height: 200rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	
		.pro-txt {
			font-size: 28rpx;
			color: #333333;
		}
	
		.pro-txt-primary {
			color: #ffffff;
		}
	
		.pro-center {
			margin-left: -50rpx;
		}
	}
	
	.pros-wrap {
		position: absolute;
		top: 20rpx;
		left: 30rpx;
		right: 30rpx;
		height: 180rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	
		.item-circle-no {
			width: 52rpx;
			height: 52rpx;
			background: rgba(255, 255, 255, 0.5);
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #25D8C9;
			font-size: 30rpx;
			font-weight: 700;
		}
	
		.item-circle {
			width: 52rpx;
			height: 52rpx;
			background: #FFFFFF;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #25D8C9;
			font-size: 30rpx;
			font-weight: 700;
		}
	
		.item-line-solid {
			width: calc(calc(100% - 270rpx) / 2);
			height: 2rpx;
			background-color: #FFFFFF;
			margin: 0 12rpx;
		}
	
		.item-line {
			border: 1px dashed rgba(255, 255, 255, 0.5);
			width: calc(calc(100% - 270rpx) / 2);
			margin: 0 12rpx;
		}
	}
	
	.content {
		padding: -40rpx 30rpx 0rpx;
		margin-top: -130rpx;
		background: #ffffff;
		border-radius: 30rpx 30rpx 0rpx 30rpx;
		position: relative;
		min-height: 100rpx;
		
		.title{
			font-size: 30rpx;
			color: #333333;
			font-weight: 600;
			padding: 30rpx 30rpx 0rpx;
		}
		.content-box{
			padding: 28rpx 30rpx 0rpx;
		}
		
		.imgs{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			padding: 0rpx 30rpx 30rpx;
			align-items: center;
			justify-content: space-between;
			image{
				width: calc(calc(100% - 30rpx) / 2);
				height: 200rpx;
				margin-top: 30rpx;
			}
		}
		
		.card-box{
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 13rpx 3rpx rgba(223,223,223,0.8);
			border-radius: 20rpx;
			margin: 30rpx 30rpx 0rpx;
			padding: 30rpx;
			.left{
				width: 100rpx;
				height: 90rpx;
			}
			.right{
				margin-left: 30rpx;
				.number{
					font-size: 32rpx;
					font-family: Noto Sans S Chinese;
					font-weight: 400;
					color: #333333;
				}
				.info{
					margin-top: 20rpx;
					.card-type{
						margin-right: 20rpx;
						font-size: 26rpx;
						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
					}
				}
			}
		}
	}
</style>