qiubinghui
/
zhywpt-sp
关注 1
点赞 0
派生 0
代码 工单 0 合并请求 0 版本发布 0 百科 动态
浏览代码

欠费补缴

修改样式逻辑
yangteng 4 周前
父节点
fb3daabec2
当前提交
5dcf164b07
共有 7 个文件被更改，包括 258 次插入 和 141 次删除
分列视图 显示文件统计
  1. 7
    0
      pages.json
  2. 2
    2
      subpackage/after-sale/arrears/arrears - 副本.vue
  3. 116
    0
      subpackage/after-sale/arrears/arrears-details.vue
  4. 84
    14
      subpackage/after-sale/arrears/arrears.vue
  5. 32
    89
      subpackage/personal-center/vehicle-change/vehicle-change-cheliangmsg-write.vue
  6. 16
    35
      subpackage/personal-center/vehicle-change/vehicle-change-chepai-write.vue
  7. 1
    1
      utils/network/api.js

+ 7
- 0
pages.json 查看文件

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

+ 2
- 2
subpackage/after-sale/arrears/arrears - 副本.vue 查看文件

@@ -1,4 +1,4 @@
<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">
@@ -969,4 +969,4 @@
.emptyView {
margin-top: 120rpx;
}
</style>
</style> -->

+ 116
- 0
subpackage/after-sale/arrears/arrears-details.vue 查看文件

@@ -0,0 +1,116 @@
<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>

+ 84
- 14
subpackage/after-sale/arrears/arrears.vue 查看文件

@@ -6,21 +6,21 @@
</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>
@@ -28,9 +28,9 @@
</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>
@@ -42,21 +42,67 @@
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 {
@@ -64,8 +110,31 @@
// 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">
@@ -141,6 +210,7 @@
box-sizing: border-box;
.right-box{
margin-left: 10rpx;
width: 100%;
.right-box-top{
display: flex;
align-items: center;

+ 32
- 89
subpackage/personal-center/vehicle-change/vehicle-change-cheliangmsg-write.vue 查看文件

@@ -97,81 +97,7 @@
<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 "
@@ -181,7 +107,7 @@
</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>
@@ -197,7 +123,7 @@
: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>
@@ -206,14 +132,14 @@
<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>
@@ -222,7 +148,7 @@
<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)"
@@ -339,7 +265,7 @@ import {
vehBodyUrl:"",//车身45度照图片地址
roadTransportPermitPicUrl:"",//道路运输许可证图片地址(牵引车才提供)
vehicleCustomerType: "", //车辆用户类型
vehicleCustomerTypeName: "普通车",
vehicleCustomerTypeName: "",
vanType:1,//客货类型，1-客车 2-货车 3-作业车
vehicleTypeNew:1,//收费车型(按新输入的值计算)[变更车辆类型]
vehPosImgOcrId:"",//行驶证正面orcId
@@ -565,8 +491,27 @@ import {
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: {
@@ -590,7 +535,7 @@ import {
console.log(err);
});
// })
})
}
const changeOwnerIdType = (item) => {
state.form.ownerIdType = item[0].value
@@ -608,7 +553,7 @@ import {
state.isTakePhotoModeShow = true
state.choiceIndex = index
}
// val 1 经办人身份证正面URL 2 办人身份证反面URL 3开户人授权书URL
// val 1 车头照 2 车身照 3道路运输许可证
const cardFileImageUpdate = (val) => {
uni.chooseImage({
count: 1, //只能选取一张照片
@@ -617,13 +562,11 @@ import {
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;
}
})
},

+ 16
- 35
subpackage/personal-center/vehicle-change/vehicle-change-chepai-write.vue 查看文件

@@ -129,7 +129,7 @@
<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)"
@@ -145,7 +145,7 @@
<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)"
@@ -473,25 +473,7 @@ import {
}],
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'];
@@ -510,7 +492,6 @@ import {
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()
});
@@ -542,16 +523,16 @@ import {
}
// 判断车辆用户类型
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,
@@ -571,7 +552,7 @@ import {
}
]
// }
}
}
//车牌号输入
const carNumber = (val : any) => {
@@ -635,7 +616,7 @@ import {
return;
}
// 测完放开
// checkCodeRequest().then((val : any) => {
checkCodeRequest().then((val : any) => {
const options = {
type: 2,
data: {
@@ -660,7 +641,7 @@ import {
console.log(err);
});
// })
})
}
const checkCodeRequest = () => {
if(!state.code){

+ 1
- 1
utils/network/api.js 查看文件

@@ -312,7 +312,7 @@ export const messageValid= "/iaw/message/messageValid" //短信验证码验证
// 卡签挂失解挂
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" //统一会员平台获取第三方用户标识

撰写 预览
正在加载...
取消
保存