欠费补缴

pages.json

 						"enablePullDownRefresh": false
 					}
 				},
+				{
+					"path": "arrears/arrears-details",
+					"style": {
+						"navigationBarTitleText": "补缴单详情",
+						"enablePullDownRefresh": false
+					}
+				},
 				{
 					"path": "refund-order-balance/refund-order-balance",
 					"style": {

subpackage/after-sale/arrears/arrears - 副本.vue

-<template>
+<!-- <template>
 	<view class="content-box" style="margin-top: 30rpx;">
 		<view class="list" v-if="state.list.length>0">
 			<u-checkbox-group @change="checkboxGroupChange" ref="checkbox">
 	.emptyView {
 		margin-top: 120rpx;
 	}
-</style>
+</style> -->

subpackage/after-sale/arrears/arrears-details.vue

+<template>
+	<view class="wrapper">
+		<view class="info-card">
+			<view class="cell">
+				<view class="cell-left">
+					<image :src="`${$imgUrl}arrears.png`" mode=""></image>
+					<text class="plate">贵A12345</text>
+				</view>
+				<view class="cell-right money">¥130.00</view>
+			</view>
+			<view class="cell">
+				<view class="cell-left">用户姓名：</view>
+				<view class="cell-right">张三</view>
+			</view>
+			<view class="cell">
+				<view class="cell-left">补缴状态：</view>
+				<view class="cell-right">已完成</view>
+			</view>
+			<view class="cell">
+				<view class="cell-left">支付单号：</view>
+				<view class="cell-right">723237462872</view>
+			</view>
+			<view class="cell">
+				<view class="cell-left">流水编号：</view>
+				<view class="cell-right">M9839800000012</view>
+			</view>
+			<view class="cell">
+				<view class="cell-left">入站名称</view>
+				<view class="cell-right">贵阳西站</view>
+			</view>
+			<view class="cell">
+				<view class="cell-left">入站时间</view>
+				<view class="cell-right">2023-03-29 14:38:09</view>
+			</view>
+			<view class="cell">
+				<view class="cell-left">出站名称</view>
+				<view class="cell-right">贵阳西站</view>
+			</view>
+			<view class="cell">
+				<view class="cell-left">出站时间</view>
+				<view class="cell-right">2023-03-29 17:56:16</view>
+			</view>
+			<view class="cell">
+				<view class="cell-left">通行金额</view>
+				<view class="cell-right">¥130.00</view>
+			</view>
+			<view class="cell">
+				<view class="cell-left">补缴金额</view>
+				<view class="cell-right">¥130.00</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+	
+</script>
+
+<style lang="scss">
+	.wrapper {
+		padding-bottom: 50rpx;
+		background: #E9EDF0;
+		overflow: hidden;
+	}
+	
+	.info-card {
+		margin: 30rpx;
+		border-radius: 16rpx;
+		padding-bottom: 40rpx;
+		background-color: white;
+		padding: 0 30rpx;
+		box-sizing: border-box;
+	}
+	
+	.info-card .title {
+		padding: 30rpx 0;
+		font-size: 36rpx;
+		text-align: center;
+		color: #01243A;
+	}
+	
+	.info-card .cell {
+		display: flex;
+		flex-direction: row;
+		padding: 18rpx 0rpx;
+		font-size: 30rpx;
+		border-bottom: 1rpx solid #E6E9EB;
+	}
+	
+	.cell-left {
+		flex: 1;
+		text-align: left;
+		color: #6C6C6C;
+		display: flex;
+		align-items: center;
+	}
+	
+	.cell-right {
+		margin-left: 30rpx;
+		text-align: right;
+		color: #111111;
+		overflow: hidden;
+	}
+	image{
+		width: 50rpx;
+		height: 50rpx;
+		margin-right: 10rpx;
+	}
+	.plate{
+		font-size: 30rpx;
+		color: #01243A;
+	}
+	.money{
+		color: #CE1717;
+	}
+</style>

subpackage/after-sale/arrears/arrears.vue

 		</view>
 	</view>
 	<view class="content">
-		<view class="list">
-			<checkbox-group @change="checkboxChangeAll">
+		<view class="list" v-for="(item,index) in state.list">
+			<checkbox-group @change="checkboxGroupChange(item)">
 				<label class="uni-list-cell uni-list-cell-pd" style="display: flex;">
-					<checkbox style="transform:scale(0.8);top: -12rpx;position: relative;"/>
+					<checkbox :checked="item.checked" style="transform:scale(0.8);top: -12rpx;position: relative;"/>
 					<view class="right-box">
 						<view class="right-box-top">
 							<view>
-								<image src="/static/image/myx.png" mode=""></image>
-								<text>贵A12345</text>
+								<image :src="`${$imgUrl}arrears.png`" mode=""></image>
+								<text>{{item.vehiclePlate}}</text>
 							</view>
-							<text class="money">¥130.00</text>
+							<text class="money">¥{{item.reimburseFee/100}}</text>
 						</view>
 						<view class="right-box-bot">
 							<view class="name">补缴原因：</view>
-							<view class="details">原因是09原因是123原因是原因是09 原因是123原因是原因是09原因。</view>
+							<view class="details">{{item.reason}}</view>
 						</view>
 					</view>
 				</label>
 		</view>
 	</view>
 	<view class="pay_wrap">
-		<checkbox-group @change="checkboxChangeAll">
-			<label class="uni-list-cell uni-list-cell-pd" v-for="(item,index) in list2" :key="index">
-				<checkbox :checked="item.checked" style="transform:scale(0.8)"/>{{item.name}}
+		<checkbox-group  @change="checkboxChangeAll()">
+			<label class="uni-list-cell uni-list-cell-pd">
+				<checkbox :checked="state.checkedAll" style="transform:scale(0.8)"/>全选
 			</label>
 		</checkbox-group>
 		<view class="pay">支付</view>
 		ref,
 		reactive
 	} from "vue"
+	import {
+		onLoad,
+		onPullDownRefresh
+	} from "@dcloudio/uni-app";
+	import {requestNew} from "@/utils/network/request.js";
+	import {
+		reimbursePage
+	} from "@/utils/network/api.js";
 	const list2 = reactive([{
 		name: '全选',
 		checked: false,
 		disabled: false
 	}])
-	const checkboxChangeAll = (e) => {
+	const allPrice = ref(0)
+	const state = reactive({
+		reimburseStatus:"0",//0未补缴 1已补缴 2已关闭
+		pageNo:1,
+		pageSize:10,
+		list:[],
+		suppleNoList:[],//支付合集
+	    checkedAll:false
+	})
+	onLoad(() => {
+		getlist()
+	})
+	const checkboxGroupChange = (e) => {
 		console.log(e);
+		// 过滤数据
+		state.suppleNoList.push(e)
+		let arr = []
+		allPrice.value = 0
+		state.suppleNoList.forEach((item, i) => {
+			state.list.forEach((val, index) => {
+				if (item.orderId == val.orderId) {
+					arr.push(val.reimburseFee)
+				}
+			})
+		})
+		// 计算价格
+		arr.forEach(item => {
+			allPrice.value += item
+		})
+		// 全选
+	    if(state.suppleNoList.length==state.list.length){
+			console.log("111",list2)
+			state.checkedAll=true
+		}else{
+			state.checkedAll=false
+		}
+		console.log(state.suppleNoList, "支付集合",allPrice.value);
+	}
+	const checkboxChangeAll = () => {
+		// console.log(e);
 		// allPrice.value = 0
 		// state.suppleNoList = []
 		// if (e.value) {
 		// 	state.list.map(val => {
 		// 		val.checked = true;
 		// 		if (val.suppleStatus == 'NOTPAY') {
-		// 			allPrice.value += val.totalFee
-		// 			state.suppleNoList.push(val.suppleNo)
+		// 			allPrice.value += val.reimburseFee
+		// 			state.suppleNoList.push(val.orderId)
 		// 		}
 		// 	})
 		// } else {
 		// 		val.checked = false;
 		// 	})
 		// }
-		// console.log(state.suppleNoList, "支付集合");
+		console.log(state.suppleNoList, "支付集合");
+	}
+	// 获取列表数据
+	const getlist = () => {
+		const options = {
+			type: 2,
+			data: {
+				reimburseStatus:state.reimburseStatus,//补缴单状态
+				pageNo:state.pageNo,
+				pageSize:state.pageSize
+			},
+			method: "POST",
+			showLoading: true,
+		};
+		requestNew(reimbursePage, options).then((res) => {
+			console.log("state.list",state.list);
+			let data=res.result
+			for(var i=0;i<data.length;i++){
+				data[i]['vehiclePlate']=data[i]['vehicleId'].split("_")[0]
+				data[i]['checked']=false
+			}
+			state.list =data
+		});
 	}
+	
 </script>
 
 <style lang="scss">
 			box-sizing: border-box;
 			.right-box{
 				margin-left: 10rpx;
+				width: 100%;
 				.right-box-top{
 					display: flex;
 					align-items: center;

subpackage/personal-center/vehicle-change/vehicle-change-cheliangmsg-write.vue

 					<u-input inputAlign="right" placeholder="请输入车辆识别号" v-model="state.form.vin"
 						maxlength="20" />
 				</u-form-item>
-				<u-form-item label="是否本人办理" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
-					<view class="right-show">
-						<radio-group @change="radioChange">
-							<label style="margin-right: 60rpx;" class="uni-list-cell uni-list-cell-pd "
-								v-for="(item, index) in state.items" :key="item.value">
-								<radio :value="item.value" :checked="index+1 === state.form.isMyselfHandle" />{{item.name}}
-							</label>
-						</radio-group>
-					</view>
-				</u-form-item>
-				<view class="picture-wrapper" @click="cardFileImageUpdate(1)" v-if="state.form.isMyselfHandle==2">
-					<view class="bg1">
-						<view class="">
-							<view class="name"> 人像面 </view>
-							<view class="value"> 经办人身份证的人像面 </view>
-							<view class="tip">
-								<view class="tip-value"> 拍摄规范 </view>
-							</view>
-						</view>
-						<image v-if="!state.form.ownerPosImgUrl" class="icon" :src="`${$imgUrl}issuance/sfz.png`"
-							:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
-						</image>
-						<image v-else class="icon" :src="strReplace(state.form.ownerPosImgUrl)"
-							:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image>
-					</view>
-				</view>
-				<view class="picture-wrapper" @click="cardFileImageUpdate(2)" v-if="state.form.isMyselfHandle==2">
-					<view class="bg1">
-						<view class="">
-							<view class="name"> 国徽面 </view>
-							<view class="value"> 经办人身份证的国徽面 </view>
-							<view class="tip">
-								<view class="tip-value"> 拍摄规范 </view>
-							</view>
-						</view>
-						<image v-if="!state.form.ownerNegImgUrl" class="icon" :src="`${$imgUrl}issuance/sff.png`"
-							:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}">
-						</image>
-						<image v-else class="icon" :src="strReplace(state.form.ownerNegImgUrl)"
-							:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image>
-					</view>
-				</view>
-				<view class="picture-wrapper" @click="cardFileImageUpdate(3)" v-if="state.form.isMyselfHandle==2 && state.form.userType==1">
-					<view class="bg1">
-						<view class="">
-							<view class="name"> 开户人授权书 </view>
-							<view class="value"> 上传授权书 </view>
-							<view class="tip">
-								<view class="tip-value"> 拍摄规范 </view>
-							</view>
-						</view>
-						<image v-if="!state.form.ownerLetterOfAuthorizationImgUrl" class="icon" :src="`${$imgUrl}issuance/weituo.png`"
-							:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
-						</image>
-						<image v-else class="icon" :src="strReplace(state.form.ownerLetterOfAuthorizationImgUrl)"
-							:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"></image>
-					</view>
-				</view>
-				<view class="picture-wrapper" @click="cardFileImageUpdate(4)" v-if="state.form.isMyselfHandle==2 && state.form.userType==2">
-					<view class="bg1">
-						<view class="">
-							<view class="name"> 开户人授权书 </view>
-							<view class="value"> 上传授权书 </view>
-							<view class="tip">
-								<view class="tip-value"> 拍摄规范 </view>
-							</view>
-						</view>
-						<image v-if="!state.form.unitAuthorizationLetterImgUrl" class="icon" :src="`${$imgUrl}issuance/weituo.png`"
-							:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
-						</image>
-						<image v-else class="icon" :src="strReplace(state.form.unitAuthorizationLetterImgUrl)"
-							:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"></image>
-					</view>
-				</view>
-				<u-form-item label="是否牵引车" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' v-if="state.form.vanType==2">
+				<u-form-item label="是否牵引车" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' v-if="state.form.vanType!=1">
 					<radio-group @change="radioChangeqyc">
 						<view class="right-show">
 							<label style="margin-right: 60rpx;" class="uni-list-cell uni-list-cell-pd "
 						</view>
 					</radio-group>
 				</u-form-item>
-				<view class="picture-wrapper" @click="cardFileImageUpdate(1)" v-if="state.form.isTractor==0 && state.form.vanType==2">
+				<view class="picture-wrapper" @click="cardFileImageUpdate(1)" v-if="state.form.vanType!=1">
 					<view class="bg1">
 						<view class="">
 							<view class="name"> 车头照 </view>
 							:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"></image>
 					</view>
 				</view>
-				<view class="picture-wrapper" @click="cardFileImageUpdate(1)" v-if="state.form.isTractor==0 && state.form.vanType==2">
+				<view class="picture-wrapper" @click="cardFileImageUpdate(2)" v-if="state.form.vanType!=1">
 					<view class="bg1">
 						<view class="">
 							<view class="name"> 车身照 </view>
 								<view class="tip-value"> 拍摄规范 </view>
 							</view>
 						</view>
-						<image v-if="!state.form.vehBodyUrl" class="icon" :src="`${$imgUrl}issuance/chetou.png`"
+						<image v-if="!state.form.vehBodyUrl" class="icon" :src="`${$imgUrl}issuance/chetou45.png`"
 							:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
 						</image>
 						<image v-else class="icon" :src="strReplace(state.form.vehBodyUrl)"
 							:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"></image>
 					</view>
 				</view>
-				<view class="picture-wrapper" @click="cardFileImageUpdate(2)" v-if="state.form.isTractor==1">
+				<view class="picture-wrapper" @click="cardFileImageUpdate(3)" v-if="state.form.isTractor==1">
 					<view class="bg1">
 						<view class="">
 							<view class="name"> 道路运输许可证 </view>
 								<view class="tip-value"> 拍摄规范 </view>
 							</view>
 						</view>
-						<image v-if="!state.form.roadTransportPermitPicUrl" class="icon" :src="`${$imgUrl}issuance/chetou.png`"
+						<image v-if="!state.form.roadTransportPermitPicUrl" class="icon" :src="`${$imgUrl}issuance/dlysxkz.png`"
 							:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
 						</image>
 						<image v-else class="icon" :src="strReplace(state.form.roadTransportPermitPicUrl)"
 			vehBodyUrl:"",//车身45度照图片地址
 			roadTransportPermitPicUrl:"",//道路运输许可证图片地址(牵引车才提供)
 			vehicleCustomerType: "", //车辆用户类型
-			vehicleCustomerTypeName: "普通车",
+			vehicleCustomerTypeName: "",
 			vanType:1,//客货类型，1-客车 2-货车 3-作业车	
 			vehicleTypeNew:1,//收费车型(按新输入的值计算)[变更车辆类型]
 			vehPosImgOcrId:"",//行驶证正面orcId
 			msg("请输入车辆识别号");
 			return;
 		}
+		if(!state.form.vehFrontUrl){
+			msg("请上传车头照");
+			return;
+		}
+		if(!state.form.vehBodyUrl){
+			msg("请上传车身照");
+			return;
+		}
+		if(state.form.isTractor==1){
+			if(!state.form.roadTransportPermitPicUrl){
+				msg("请上传道路运输许可证");
+				return;
+			}
+		}
+		if(state.form.vehicleCustomerType==null){
+			msg("请选择车辆用户类型");
+			return;
+		}
+		
 		// 测完放开
-		// checkCodeRequest().then((val : any) => {
+		checkCodeRequest().then((val : any) => {
 			const options = {
 				type: 2,
 				data: {
 					console.log(err);
 				});
 			
-		// })
+		})
 	}
    const changeOwnerIdType = (item) => {
 		state.form.ownerIdType = item[0].value
 		state.isTakePhotoModeShow = true
 		state.choiceIndex = index
 	}
-	//  val 1 经办人身份证正面URL  2 办人身份证反面URL 3开户人授权书URL
+	//  val 1 车头照  2 车身照 3道路运输许可证
 	const cardFileImageUpdate = (val) => {
 		uni.chooseImage({
 			count: 1, //只能选取一张照片
 			success: function (res) {
 				uploadFile(res.tempFilePaths[0], "", "").then((data) => {
 					if (val == 1) {
-						state.form.ownerPosImgUrl = data;
+						state.form.vehFrontUrl = data;
 					} else if(val == 2) {
-						state.form.ownerNegImgUrl = data;
+						state.form.vehBodyUrl = data;
 					}else if(val == 3) {
-						state.form.ownerLetterOfAuthorizationImgUrl = data;
-					}else if(val == 4) {
-						state.form.unitAuthorizationLetterImgUrl = data;
+						state.form.roadTransportPermitPicUrl = data;
 					}
 				})
 			},

subpackage/personal-center/vehicle-change/vehicle-change-chepai-write.vue

 								<view class="tip-value"> 拍摄规范 </view>
 							</view>
 						</view>
-						<image v-if="!state.form.vehBodyUrl" class="icon" :src="`${$imgUrl}issuance/chetou.png`"
+						<image v-if="!state.form.vehBodyUrl" class="icon" :src="`${$imgUrl}issuance/chetou45.png`"
 							:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
 						</image>
 						<image v-else class="icon" :src="strReplace(state.form.vehBodyUrl)"
 								<view class="tip-value"> 拍摄规范 </view>
 							</view>
 						</view>
-						<image v-if="!state.form.vehFrontUrl" class="icon" :src="`${$imgUrl}issuance/chetou45.png`"
+						<image v-if="!state.form.vehFrontUrl" class="icon" :src="`${$imgUrl}issuance/chetou.png`"
 							:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
 						</image>
 						<image v-else class="icon" :src="strReplace(state.form.vehFrontUrl)"
 		}],
 		ownerIdTypeRange: [],
 		code:"",
-		vehicleCustomerTypeRange:[
-				{
-				'value':0,
-				'label':"普通车"
-			   },
-			   {
-			   	'label': "道路运输证经营范围仅有“货物专用运输(集装箱) ”的牵引车办理J类型集装箱",
-			   	'value': 24,
-			   },
-			   {
-			   	'label': "道路运输证经营范围不含“货物专用运输(集装箱)”的牵引车",
-			   	'value': 27,
-			   },
-			   {
-			   	'label': '道路运输证经营范围除“货物专用运输 (集装 箱)"外，还有“普通货运”等其他项目的牵引车办理J2类型集装箱',
-			   	'value': 28,
-			   }
-			   
-			]
+		vehicleCustomerTypeRange:[]
 	})
 	onLoad((option : any) => {
 		let type = getItem('key')['CERTIFICATE_TYPE'];
 		state.form.vehiclePlateColorNew=params.vehiclePlateColorNew
 		state.form.cardId=params.cardId
 		state.form.obuId=params.obuId
-		// state.form.isVehiclePlateChange=params.isVehiclePlateChange
 		state.form.vanType=params.vanType
 		getCarDetails()
 	});
 	}
 	// 判断车辆用户类型
 	const judgeUseUserType=()=>{
-		// if(state.form.vanType=='1'){
-		// 	state.vehicleCustomerTypeRange=[
-		// 		{
-		// 		'value':0,
-		// 		'label':"普通车"
-		// 	   }
-		//    ]
-		//    state.form.vehicleCustomerType = "0"
-		//    state.form.vehicleCustomerTypeName = "普通车"
-		// }else{
+		if(state.form.vanType=='1'){
+			state.vehicleCustomerTypeRange=[
+				{
+				'value':0,
+				'label':"普通车"
+			   }
+		   ]
+		   state.form.vehicleCustomerType = "0"
+		   state.form.vehicleCustomerTypeName = "普通车"
+		}else{
 			state.vehicleCustomerTypeRange=[
 				{
 				'value':0,
 			   }
 			   
 			]
-		// }
+		}
 	}
 	//车牌号输入
 	const carNumber = (val : any) => {
 			return;
 		}
 		// 测完放开
-		// checkCodeRequest().then((val : any) => {
+		checkCodeRequest().then((val : any) => {
 			const options = {
 				type: 2,
 				data: {
 					console.log(err);
 				});
 			
-		// })
+		})
 	}
 	const checkCodeRequest = () => {
 		if(!state.code){

utils/network/api.js

 // 卡签挂失解挂
 export const cardObuLoss= "/iaw/api/afterSale/cardObuLoss/loss"  //卡签挂失解挂失
 // 欠费补缴
-export const trafficsuppleQueryList= "/iaw/trafficsupple/queryList"  //通行流水欠费补缴信息查询
+export const reimbursePage= "/iaw/api/afterSale/reimburse/page"  //补缴申请单查询
 export const trafficsuppleApply= "/iaw/trafficsupple/apply"  //通行流水欠费补缴支付下单
 export const trafficsupplePayQuery= "/iaw/trafficsupple/payQuery"  //通行流水欠费补缴支付查询
 export const trafficsupplObtainuserid= "/iaw/trafficsupple/obtainuserid"  //统一会员平台获取第三方用户标识