zhywpt-sp/subpackage/after-sale/renewalContral/car-detail.vue

<template>
	<view class="main-block vehicle-info-section">
		<view class="title">基本信息</view>
		<view class="info-item">
			<text class="label">用户名称</text>
			<text class="value">{{ state.vehicleInfo.name }}</text>
		</view>
		<view class="info-item">
			<text class="label">用户证件类型</text>
			<text class="value">{{ state.vehicleInfo.name }}</text>
		</view>
		<view class="info-item">
			<text class="label">用户证件号</text>
			<text class="value">{{ state.vehicleInfo.name }}</text>
		</view>
		<view class="info-item">
			<text class="label">订单车牌号</text>
			<text class="value">{{ state.vehicleInfo.name }}</text>
		</view>
		<view class="info-item">
			<text class="label">车牌颜色</text>
			<text class="value">{{ state.vehicleInfo.name }}</text>
		</view>
		<view class="info-item">
			<text class="label">收费车型</text>
			<text class="value">{{ state.vehicleInfo.name }}</text>
		</view>
	</view>
	
	<view class="main-block">
		<view class="title">卡信息</view>
		<view class="card-message">
			<image class="project-photo" :src="`${$imgUrl}order/obu.png`" mode=""></image>
			<view class="msg">
				<view class="vehiclePlate">
					<text>卡号：</text>
					<text>66323331222322545</text>
				</view>
				<view>
					<text>卡类型：</text>
					<text class="cardStatus">储值卡</text>
				</view>
				<view>
					<text>卡状态：</text>
					<text class="cardStatus success">正常</text>
				</view>
				<view>
					<text>到期时间：</text>
					<text>2025.08.05</text>
				</view>
			</view>
		</view>
	</view>
	<view class="main-block">
		<view class="title">OBU设备信息</view>
		<view class="card-message">
			<image class="project-photo" :src="`${$imgUrl}order/obu.png`" mode=""></image>
			<view class="msg">
				<view class="vehiclePlate">
					<text>OBU：</text>
					<text>66323331222322545</text>
				</view>
				<view>
					<text>OBU状态：</text>
					<text class="cardStatus">储值卡</text>
				</view>
				<view>
					<text>到期时间：</text>
					<text>2025.08.05</text>
				</view>
			</view>
		</view>
	</view>
	
	<view class="main-block">
		<radio-group @change="radioChange" >
			<view class="as-layout-horizontal renwal-type" >
				<view style="flex: 1"></view>
				<label style="display: flex; flex-direction: row; margin-left: 30rpx;">
					<radio style="transform: scale(0.7)" checked value="0" color="#2CE242" />
					<view>卡续期</view>
				</label>
				
				<label style="display: flex; flex-direction: row; margin-left: 30rpx;">
					<radio style="transform: scale(0.7)" value="1" color="#2CE242" />
					<view>签续期</view>
				</label>
			</view>
		</radio-group>
	</view>
	
	<view class="action">
		<button type="default" class="ui-btn" @click="renewal()">
			卡签续期
		</button>
	</view>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { confirm } from "@/utils/utils";

const state = reactive({
	orderInfo: {
		
	}, 
	vehicleInfo: {
		name: '基本信息'
	},
	renewalStatus: '0'
});

onLoad((options) => {
  console.log("options", options);
  
});

onShow(() => {
	
});

	
const getDetail = () => {
	
}

	
const renewal = () => {
	confirm("是否确认续签？", () => {
		uni.navigateTo({
			url: `/subpackage/after-sale/renewalContral/renewal-type`,
		});
	})
}

//多项选择器
const radioChange = (e : any, item: any) => {
	let data = e.detail.value
	state.renewalStatus = data
}
</script>

<style lang="scss" scoped>
	.main-block {
		background-color: white;
		width: 88%;
		margin: 0 auto;
		margin-top: 20rpx;
		border-radius: 12px;
		border: 1px solid #FFFFFF;
		padding: 20rpx;
		overflow: hidden;
	
		.title {
			font-weight: bold;
			font-size: 30rpx;
			color: #01243A;
			margin-bottom: 12rpx;
		}
	}
	.vehicle-info-section {
	  background-color: #fff;
	  margin: 20rpx;
	  border-radius: 12rpx;
	  padding: 30rpx;
	
	  .info-item {
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    padding: 20rpx 0;
	    border-bottom: 1rpx solid #f0f0f0;
	
	    &:last-child {
	      border-bottom: none;
	    }
	
	    .label {
	      font-size: 28rpx;
	      color: #004576;
	      // flex: 0;
	    }
	
	    .value {
	      font-size: 28rpx;
	      color: #333;
	      // flex: 1;
	      text-align: right;
	    }
	  }
	}
	.card-message {
		display: flex;
		padding-bottom: 20rpx;
		align-items: center;
		.project-photo{
			width: 200rpx;
			height: 200rpx;
			margin-right: 20rpx;
			background-color: #E9EDF0;
			border-radius: 8rpx;
		}
		.msg view{
			line-height: 50rpx;
			color: #666666;
			font-size: 28rpx;
		}
		
		.success{
			color: #3CCA7C;
		}

		.vehiclePlate {
			font-weight: 400;
			font-size: 30rpx;
			color: #111111;
		}
	}
	.renwal-type{
		justify-content: space-around;
	}
	.action {
		position: absolute;
		left: 0;
		height: 270rpx;
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;
		width: 100vw;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		flex-direction: column;
		margin-top: 20rpx;
	}
</style>