欠费补缴

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

@@ -4,13 +4,13 @@
 			<view class="cell">
 				<view class="cell-left">
 					<image :src="`${$imgUrl}arrears.png`" mode=""></image>
-					<text class="plate">贵A12345</text>
+					<text class="plate">{{state.details['vehicleId']}}</text>
 				</view>
-				<view class="cell-right money">¥130.00</view>
+				<view class="cell-right money">¥{{state.details['reimburseFee']/100}}</view>
 			</view>
 			<view class="cell">
 				<view class="cell-left">用户姓名：</view>
-				<view class="cell-right">张三</view>
+				<view class="cell-right">{{state.details['userName']}}</view>
 			</view>
 			<view class="cell">
 				<view class="cell-left">补缴状态：</view>
@@ -18,15 +18,15 @@
 			</view>
 			<view class="cell">
 				<view class="cell-left">支付单号：</view>
-				<view class="cell-right">723237462872</view>
+				<view class="cell-right">{{state.details['orderId']}}</view>
 			</view>
 			<view class="cell">
 				<view class="cell-left">流水编号：</view>
-				<view class="cell-right">M9839800000012</view>
+				<view class="cell-right">{{state.details['userName']}}</view>
 			</view>
 			<view class="cell">
 				<view class="cell-left">入站名称</view>
-				<view class="cell-right">贵阳西站</view>
+				<view class="cell-right">{{state.details['userName']}}</view>
 			</view>
 			<view class="cell">
 				<view class="cell-left">入站时间</view>
@@ -53,7 +53,32 @@
 </template>
 
 <script lang="ts" setup>
-	
+	import {reactive} from "vue"
+	import {onLoad} from "@dcloudio/uni-app";
+	import {requestNew} from "@/utils/network/request.js";
+	import {reimburseView} from "@/utils/network/api.js";
+	const state = reactive({
+		details:{}
+	})
+	onLoad((options) => {
+		console.log("options",options)
+		getlist(options.id)
+	})
+	// 获取详情数据
+	const getlist = (orderId) => {
+		const options = {
+			type: 2,
+			data: {
+				orderId
+			},
+			method: "POST",
+			showLoading: true,
+		};
+		requestNew(reimburseView, options).then((res) => {
+			console.log("res",res.order);
+			state.details=res.order
+		});
+	}
 </script>
 
 <style lang="scss">

subpackage/after-sale/arrears/arrears.vue

@@ -1,15 +1,15 @@
 <template>
 	<view class="title">
 		<view>
-			<text class="status">待补缴</text>
-			<text class="status1">已补缴</text>
+			<text :class="state.reimburseStatus=='0'?'status':'status1'" @click="getlist(0)">待补缴</text>
+			<text :class="state.reimburseStatus=='1'?'status2':'status3'" @click="getlist(1)">已补缴</text>
 		</view>
 	</view>
 	<view class="content">
-		<view class="list" v-for="(item,index) in state.list">
+		<view class="list" v-for="(item,index) in state.list" @click="details(item.id)">
 			<checkbox-group @change="checkboxGroupChange(item)">
 				<label class="uni-list-cell uni-list-cell-pd" style="display: flex;">
-					<checkbox :checked="item.checked" style="transform:scale(0.8);top: -12rpx;position: relative;"/>
+					<checkbox :checked="item.checked" style="transform:scale(0.8);top: -12rpx;position: relative;" v-if="state.reimburseStatus=='0'"/>
 					<view class="right-box">
 						<view class="right-box-top">
 							<view>
@@ -27,7 +27,7 @@
 			</checkbox-group>
 		</view>
 	</view>
-	<view class="pay_wrap">
+	<view class="pay_wrap" v-if="state.reimburseStatus=='0'">
 		<checkbox-group  @change="checkboxChangeAll">
 			<label class="uni-list-cell uni-list-cell-pd">
 				<checkbox value="ALL" :checked="state.checkedAll" style="transform:scale(0.8)"/>合计 ￥{{allPrice/100}}
@@ -48,8 +48,9 @@
 	} from "@dcloudio/uni-app";
 	import {requestNew} from "@/utils/network/request.js";
 	import {
-		reimbursePage
+		reimbursePage,reimburseUserPay
 	} from "@/utils/network/api.js";
+	import {navTo} from '@/utils/utils';
 	const allPrice = ref(0)
 	const state = reactive({
 		reimburseStatus:"0",//0未补缴 1已补缴 2已关闭
@@ -60,7 +61,7 @@
 	    checkedAll:false
 	})
 	onLoad(() => {
-		getlist()
+		getlist(state.reimburseStatus)
 	})
 	const checkboxGroupChange = (e) => {
 		console.log(e);
@@ -79,11 +80,13 @@
 		allPrice.value = 0
 		state.suppleNoList.forEach((item, i) => {
 			state.list.forEach((val, index) => {
+				console.log("state.suppleNoList",state.suppleNoList,state.list,item.orderId,val.orderId)
 				if (item.orderId == val.orderId) {
 					arr.push(val.reimburseFee)
 				}
 			})
 		})
+		console.log("arr",arr)
 		// 计算价格
 		arr.forEach(item => {
 			allPrice.value += item
@@ -114,11 +117,12 @@
 		console.log(state.suppleNoList, "支付集合");
 	}
 	// 获取列表数据
-	const getlist = () => {
+	const getlist = (reimburseStatus) => {
+		state.reimburseStatus=reimburseStatus
 		const options = {
 			type: 2,
 			data: {
-				reimburseStatus:state.reimburseStatus,//补缴单状态
+				reimburseStatus:reimburseStatus,//补缴单状态
 				pageNo:state.pageNo,
 				pageSize:state.pageSize
 			},
@@ -137,6 +141,23 @@
 	}
 	const pay=()=>{
 		console.log(allPrice.value, "支付金额");
+		const options = {
+			type: 2,
+			data: {
+				orderIds:state.reimburseStatus,//补缴单状态
+				reimburseFee:state.pageNo,
+				spbillCreateIp:state.pageSize
+			},
+			method: "POST",
+			showLoading: true,
+		};
+		requestNew(reimburseUserPay, options).then((res) => {
+			console.log("res",res);
+			
+		});
+	}
+	const details=(id)=>{
+		navTo(`/subpackage/after-sale/arrears/arrears-details?id=${id}`)
 	}
 </script>
 
@@ -164,7 +185,30 @@
 			text-align: center;
 		}
 		.status1{
-			background: #FFFFFA;
+			border-radius: 34rpx 0rpx 0rpx 34rpx;
+			border: 1px solid #CCB375;
+			color: #CCB375;
+			width: 200rpx;
+			height: 68rpx;
+			font-size: 28rpx;
+			line-height: 68rpx;
+			display: inline-block;
+			text-align: center;
+		}
+		.status2{
+			background:#CCB375;
+			border-radius: 0rpx 34rpx 34rpx 0rpx;
+			border: 1px solid #CCB375;
+			font-size: 28rpx;
+			color: white;
+			width: 200rpx;
+			height: 68rpx;
+			font-size: 28rpx;
+			line-height: 68rpx;
+			display: inline-block;
+			text-align: center;
+		}
+		.status3{
 			border-radius: 0rpx 34rpx 34rpx 0rpx;
 			border: 1px solid #CCB375;
 			font-size: 28rpx;

utils/network/api.js

@@ -313,7 +313,8 @@ export const messageValid= "/iaw/message/messageValid"  //短信验证码验证
 export const cardObuLoss= "/iaw/api/afterSale/cardObuLoss/loss"  //卡签挂失解挂失
 // 欠费补缴
 export const reimbursePage= "/iaw/api/afterSale/reimburse/page"  //补缴申请单查询
-export const trafficsuppleApply= "/iaw/trafficsupple/apply"  //通行流水欠费补缴支付下单
+export const reimburseUserPay= "/iaw/api/afterSale/reimburse/userPay"  //通行流水欠费补缴支付下单
+export const reimburseView= "/iaw/api/afterSale/reimburse/view"  //补缴申请单明细
 export const trafficsupplePayQuery= "/iaw/trafficsupple/payQuery"  //通行流水欠费补缴支付查询
 export const trafficsupplObtainuserid= "/iaw/trafficsupple/obtainuserid"  //统一会员平台获取第三方用户标识
 // 发票