欠费补缴对接

after-sale/arrears/arrears.vue

@@ -1,7 +1,48 @@
 <template>
 	<view class="content-box" style="margin-top: 30rpx;">
 		<view class="list">
-			<view class="item">
+			<u-checkbox-group @change="checkboxGroupChange" ref="checkbox">
+				<view class="item" v-for="(item, index) in state.list" :key="index"
+					:class="item.suppleStatus=='PAY'?'finished':''">
+					<view class="head">
+						<view class="name">
+							<image :src="`${$imgUrl}user/icon-ETC.png`" class="icon"></image>
+							<text class="title m-10">{{item.cardId}}</text>
+							<text class="tag-green" v-if="item.suppleStatus=='NOTPAY'">待支付</text>
+							<text class="tag-green" v-else-if="item.suppleStatus=='PAY'">已支付</text>
+							<text class="tag-green" v-else>已下支付单</text>
+						</view>
+						<view class="status text-black">{{item.vehiclePlate}}</view>
+					</view>
+					<view class="detail">
+						<view class="orders">
+							<view class="order-text">
+								<text class="type">补缴单号：</text>
+								<text class="value">{{item.suppleNo}}</text>
+							</view>
+							<view class="order-text odd">
+								<text class="type">补缴单生成时间：</text>
+								<text class="value">{{item.insertTime}}</text>
+							</view>
+						</view>
+						<u-checkbox @change="checkboxChange" v-model="item.checked" :name="item.suppleNo"
+							v-if="item.suppleStatus=='NOTPAY'">
+						</u-checkbox>
+					</view>
+					<view class="bottom">
+						<view class="bottom-left"><text class="tit">欠费金额：￥</text><text
+								class="amount">{{item.fee}}</text>
+						</view>
+						<!-- 			<view class="btns-box">
+							<view class="btn btn-primary" @click="$util.navTo(`/pages/order/refund-confirm`)">支付</view>
+						</view> -->
+					</view>
+				</view>
+			</u-checkbox-group>
+
+
+
+			<!-- 			<view class="item">
 				<view class="head">
 					<view class="name">
 						<image :src="`${$imgUrl}user/icon-ETC.png`" class="icon"></image>
@@ -59,11 +100,22 @@
 					</view>
 
 				</view>
-			</view>
+			</view> -->
 		</view>
-		
+
 		<view class="footer">
-		
+			<u-checkbox-group>
+				<u-checkbox @change="checkboxChangeAll" v-model="item.checked" v-for="(item, index) in list2"
+					:key="index" :name="item.name">{{item.name}}</u-checkbox>
+			</u-checkbox-group>
+			<view class="footer-right">
+				<view class="row1">
+					合计：￥{{allPrice}}
+				</view>
+				<view class="btn" @click="wxPayment">
+					支付
+				</view>
+			</view>
 		</view>
 	</view>
 </template>
@@ -76,7 +128,12 @@
 		getItem
 	} from "@/utils/storage.ts"
 	import {
-		CardBill
+		wechatAppID,
+		wechatSecret,
+		CardBillQuery,
+		CardBillPlaceOrder,
+		CardBillPayStatus,
+		wechatPayConfigId
 	} from "@/utils/network/api.js";
 	import {
 		request
@@ -89,10 +146,178 @@
 		onLoad,
 		onShow
 	} from "@dcloudio/uni-app";
-	
-	
-	
-	
+	import {
+		ref,
+		reactive
+	} from "vue"
+	import {
+		confirm,
+		msg
+	} from "@/utils/utils";
+	const state = reactive({
+		list: [],
+		suppleNoList: [],
+		openid: '',
+		orderId: ''
+
+	})
+	const checkbox = ref()
+	const list2 = reactive([{
+		name: '全选',
+		checked: false,
+		disabled: false
+	}])
+	const allPrice = ref(0)
+	const all = ref(true)
+	// 获取列表数据
+	const getlist = () => {
+		allPrice.value = 0
+
+		const options = {
+			type: 2,
+			data: {
+				openId: getItem('openId')
+			},
+			method: "POST",
+			showLoading: true,
+		};
+		request(CardBillQuery, options).then((res) => {
+			const data = stringToJson(res.bizContent);
+			data.data = data.data.map(val => {
+				val.checked = false
+				val.fee = val.fee / 100
+				return val
+			})
+			state.list = data.data
+			console.log(state.list, "我是处理后得列表");
+		});
+	}
+
+	const checkboxChangeAll = (e) => {
+		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.fee
+					state.suppleNoList.push(val.suppleNo)
+				}
+			})
+		} else {
+			state.list.map(val => {
+				val.checked = false;
+			})
+		}
+
+		console.log(state.suppleNoList, "支付集合");
+	}
+
+	const checkboxChange = (e) => {
+		console.log(e);
+	}
+	const checkboxGroupChange = (e) => {
+		console.log(e);
+		state.suppleNoList = e
+		let arr = []
+		allPrice.value = 0
+		state.suppleNoList.forEach((item, i) => {
+			state.list.forEach((val, index) => {
+				if (item == val.suppleNo) {
+					arr.push(val.fee)
+				}
+			})
+		})
+		arr.forEach(item => {
+			allPrice.value += item
+		})
+
+		console.log(state.suppleNoList, "支付集合");
+	}
+
+
+	//获取微信小程序openid
+	const getOpenID = () => {
+		uni.login({
+			provider: "weixin",
+			success: function(e) {
+				wx.request({
+					url: `https://api.weixin.qq.com/sns/jscode2session?appid=${wechatAppID}&secret=${wechatSecret}&js_code=${e.code}&grant_type=authorization_code`,
+					success: (res: any) => {
+						state.openid = res.data.openid;
+						console.log(state.openid, "微信登录获得");
+					},
+				});
+			},
+		});
+	};
+
+
+	//掉起微信支付
+	const wxPayment = () => {
+		if (state.suppleNoList.length > 0) {
+			// #ifdef MP-WEIXIN
+			const options = {
+				type: 2,
+				data: {
+					openid: state.openid,
+					suppleNoList: state.suppleNoList,
+					payConfigId: wechatPayConfigId,
+				},
+				method: "POST",
+				showLoading: true,
+			};
+			request(CardBillPlaceOrder, options).then((res) => {
+				const data = stringToJson(res.bizContent);
+				state.orderId = data.orderId
+				uni.requestPayment({
+					provider: "wxpay",
+					orderInfo: "",
+					timeStamp: data.timestamp,
+					nonceStr: data.noncestr,
+					package: data.wxPackage ?? "",
+					signType: data.signType,
+					paySign: data.sign,
+					success: function(e) {
+						console.log("支付成功", e);
+						checkOrder();
+					},
+					fail: function(err) {
+						confirm(err, () => {}, "支付失败", false);
+					},
+				});
+			});
+			// #endif
+		}else{
+			msg("未勾选补缴订单！")
+		}
+
+	};
+
+
+	//支付成功改变订单状态
+	const checkOrder = () => {
+		const options = {
+			type: 2,
+			data: {
+				orderId: state.orderId,
+			},
+			method: "POST",
+			showLoading: true,
+		};
+
+		request(CardBillPayStatus, options).then((res) => {
+			msg("支付成功!");
+			getlist()
+		});
+	};
+
+	onLoad(() => {
+		getlist()
+		getOpenID()
+		console.log(state);
+	})
 </script>
 
 <style lang="scss">
@@ -101,7 +326,41 @@
 	}
 
 	.content-box {
-		padding-bottom: 30rpx;
+		padding-bottom: 115rpx;
+
+		.footer {
+			display: flex;
+			align-items: center;
+			padding: 0 30rpx;
+			background: #fff;
+			height: 100rpx;
+			border-top: 1rpx solid #cdcdcd;
+			position: fixed;
+			bottom: 0;
+			width: 100%;
+
+			.footer-right {
+				align-items: center;
+				display: flex;
+				justify-content: space-evenly;
+				flex: 1;
+
+				.row1 {
+					font-size: 29rpx;
+				}
+
+				.btn {
+					text-align: center;
+					width: 150rpx;
+					height: 60rpx;
+					background: #13E7C1;
+					line-height: 60rpx;
+					border-radius: 10rpx;
+					font-size: 29rpx;
+					color: #fff;
+				}
+			}
+		}
 	}
 
 	.search-btn {

after-sale/rescind-carId/rescind-carId-select.vue

@@ -1,14 +1,14 @@
 <template>
-	<view class="content-wrap">
-		<!-- 		<view @click="tabChange(true)">
+<!-- 	<view class="content-wrap">
+				<view @click="tabChange(true)">
 			<view :class="state.isMyPeopple ? 'big' : 'nomal'"> 本人车辆 </view>
 			<view :class="state.isMyPeopple ? 'tip' : ''"> </view>
 		</view>
 		<view @click="tabChange(false)" style="margin-left: 60rpx" class="">
 			<view :class="state.isMyPeopple ? 'nomal' : 'big'"> 他人车辆 </view>
 			<view :class="state.isMyPeopple ? '' : 'tip'"> </view>
-		</view> -->
-	</view>
+		</view>
+	</view> -->
 	<!-- 	<view v-if="state.isMyPeopple" class="content">
 		<view class="item" v-for="(item, i) in list" :key="i">
 			<view class="iten-left">
@@ -628,7 +628,7 @@
 	}
 
 	.content {
-		padding: 50rpx 30rpx 50rpx 30rpx;
+		padding: 0rpx 30rpx 50rpx 30rpx;
 
 		.item {
 			padding: 20rpx;

manifest.json

@@ -52,7 +52,7 @@
     "quickapp" : {},
     /* 小程序特有相关 */
     "mp-weixin" : {
-        "appid" : "wx214b4f8de36a0181",
+        "appid" : "wx008c60533388527a",
         "setting" : {
             "urlCheck" : false,
             "checkSiteMap" : false,

pages/index/index.vue

@@ -52,7 +52,7 @@
 				<view class="text">设备遗失</view>
 			</view>
 			<!-- <view class="item-box" @click="$util.navTo('/after-sale/rescind-carId/rescind-carId-select',true)"> -->
-			<view class="item-box" @click="$util.msg('该功能正在开发中，敬请期待！')">
+			<view class="item-box" @click="$util.navTo('/after-sale/rescind-carId/rescind-carId-select',true)">
 				<view class="item item-6">
 					<image :src="fileURL + 'image/index/item-6.png'" />
 				</view>

utils/network/api.js

@@ -108,7 +108,10 @@ export const  relieveCarId= '932' //车辆释放信息增加接口(解除车牌
 
 
 // 资金服务
-export const  CardBill= '922' //8.229.BDS-储值卡卡账查询接口
+export const  CardBillQuery= '917' //通行流水欠费补缴信息查询接口
+export const  CardBillPlaceOrder= '916' //通行流水欠费补缴支付下单接口
+export const  CardBillPayStatus= '915' //通行流水欠费补缴支付查询接口
+
 
 
 //圈层