@@ -1621,7 +1621,29 @@ | |||
}, | |||
{ | |||
"root": "subpackage/personal-center", //个人中心 | |||
"pages": [{ | |||
"pages": [ | |||
{ | |||
"path": "vehicle-change/vehicle-change-chepai", | |||
"style": { | |||
"navigationBarTitleText": "车牌变更", | |||
"enablePullDownRefresh": false | |||
} | |||
}, | |||
{ | |||
"path": "vehicle-change/vehicle-change-direction", | |||
"style": { | |||
"navigationBarTitleText": "引导页", | |||
"enablePullDownRefresh": false | |||
} | |||
}, | |||
{ | |||
"path": "vehicle-change/vehicle-change-choiceType", | |||
"style": { | |||
"navigationBarTitleText": "选择更换类型", | |||
"enablePullDownRefresh": false | |||
} | |||
}, | |||
{ | |||
"path": "trapping-and-repairing-account/result", | |||
"style": { | |||
"navigationBarTitleText": "修复成功", | |||
@@ -1799,12 +1821,12 @@ | |||
"navigationBarTitleText": "通行记录" | |||
} | |||
}, | |||
{ | |||
"path": "vehicle-information", | |||
"style": { | |||
"navigationBarTitleText": "车辆信息" | |||
} | |||
}, | |||
// { | |||
// "path": "vehicle-information", | |||
// "style": { | |||
// "navigationBarTitleText": "车辆信息" | |||
// } | |||
// }, | |||
{ | |||
"path": "change-password", | |||
"style": { |
@@ -290,6 +290,7 @@ | |||
if ( | |||
prefixName == "WJ" || | |||
prefixName == "JL" || | |||
prefixName == "BY" || | |||
prefixName == "JY" || | |||
prefixName == "AT" || | |||
prefixName == "JT" || | |||
@@ -332,6 +333,9 @@ | |||
case "JL": | |||
_name = "聚利"; | |||
break; | |||
case "BY": | |||
_name = "宝溢"; | |||
break; | |||
case "JY": | |||
_name = "金溢"; | |||
break; | |||
@@ -511,7 +515,20 @@ | |||
} | |||
); | |||
break; | |||
case "BY": | |||
// 宝溢用聚力sdk | |||
jyApi.connectDevice( | |||
device, | |||
function (res) { | |||
console.log('设备链接1', res) | |||
connectSuccess(res); | |||
}, | |||
function (res) { | |||
console.log('设备链接2', res) | |||
listenStatus(res); | |||
} | |||
); | |||
break; | |||
case "JY": | |||
jyApi.connectDevice( | |||
device, |
@@ -154,7 +154,7 @@ | |||
<view class="right-head"> | |||
<view class="tit">我的车辆</view> | |||
<!-- <view class="more" @click="$util.navTo('/subpackage/personal-center/vehicle-information', true)"> --> | |||
<view class="more" @click="$util.navTo('/subpackage/after-sale/activation-once-again/select-car', true)"> | |||
<view class="more" @click="$util.navTo(`/subpackage/after-sale/activation-once-again/select-car?type=38`, true)"> | |||
<text class="more-text">查看全部</text> | |||
<image :src="`${$imgUrl}myImage/wdexiayi.png`" class="arrow"></image> | |||
</view> |
@@ -90,6 +90,12 @@ function disconnectDevice() { | |||
datas.setData("connectPrefixName", ""); | |||
}); | |||
break; | |||
case "BY": | |||
jyApi.disconnectDevice(function(res) { | |||
datas.setData("bluLinkStatus", false); | |||
datas.setData("connectPrefixName", ""); | |||
}); | |||
break; | |||
case "JY": | |||
jyApi.disconnectDevice(function(res) { | |||
@@ -229,6 +235,21 @@ function transCmd(cmdArr, type, func, callBack = null) { | |||
} | |||
}); | |||
break; | |||
case "BY": | |||
console.log('JL执行内容====', cmdArr, type) | |||
jyApi.transCmd(cmdArr, type, function(res) { | |||
console.log('JL执行内容====11111', res) | |||
if (res.code == 0) { | |||
func(res.data); | |||
} else { | |||
if (callBack != null) { | |||
callBack(res.msg); | |||
} else { | |||
alertF(res.msg); | |||
} | |||
} | |||
}); | |||
break; | |||
case "JY": | |||
jyApi.transCmd(cmdArr, type, function(res) { | |||
if (res.code == 0) { |
@@ -62,6 +62,7 @@ import {getVehiclePlateColor,vehiclePlateColorPai} from "@/datas/vehiclePlateCol | |||
type: "",//1 OBU重新激活 2 卡签注销 3 更换设备 4卡签续期 5挂失解挂 6增补设备(单卡单签补) 7补卡签(设备丢了补卡签) 8解除挂起 | |||
// 30 储值卡转记账卡 31卡pin码解锁 32ETC车牌过户 33 卡签停用/卡签启用 | |||
// 34月结单查询 35ETC通行流水记录 36 黑名单查询 37恢复签约 | |||
// 38 车辆信息变更 | |||
}); | |||
onLoad((options) => { | |||
console.log("options", options) | |||
@@ -126,6 +127,10 @@ import {getVehiclePlateColor,vehiclePlateColorPai} from "@/datas/vehiclePlateCol | |||
uni.setNavigationBarTitle({ | |||
title: '恢复签约-选择车辆' | |||
}); | |||
}else if (options.type == "38") { | |||
uni.setNavigationBarTitle({ | |||
title: '车辆信息变更-选择车辆' | |||
}); | |||
} | |||
}); | |||
@@ -214,6 +219,10 @@ import {getVehiclePlateColor,vehiclePlateColorPai} from "@/datas/vehiclePlateCol | |||
uni.navigateTo({ | |||
url: `/subpackage/after-sale/blacklist-query/list?vehicleId=${item.vehicleId}` | |||
}) | |||
}else if (state.type == "38") { | |||
uni.navigateTo({ | |||
url: `/subpackage/personal-center/vehicle-change/vehicle-change-choiceType` | |||
}) | |||
}else{ | |||
if (item.deviceType == deviceType) { | |||
// OBU重新激活跳转 |
@@ -89,7 +89,7 @@ | |||
position: fixed; | |||
left: 0; | |||
bottom: 0; | |||
height: 180rpx; | |||
height: 160rpx; | |||
background-color: #fff; | |||
border-radius: 30rpx 30rpx 0 0; | |||
width: 100vw; |
@@ -0,0 +1,223 @@ | |||
<template> | |||
<view class="bg"> | |||
<view class="title_wrap"><text class="title">基本信息</text></view> | |||
<u-form label-width="230" :model="state.form" ref="uForm" :label-style='labelStyle'> | |||
<u-form-item label="车牌号码" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' | |||
borderBottom> | |||
<u-input v-model="state.form.vehiclePlateColorStr" input-align='right'disabled/> | |||
</u-form-item> | |||
<u-form-item label="车牌颜色" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' | |||
borderBottom> | |||
<u-input v-model="state.form.vehiclePlateColorStr" input-align='right'disabled/> | |||
</u-form-item> | |||
<u-form-item label="ETC卡状态" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' | |||
borderBottom> | |||
<u-input v-model="state.form.customerName" inputAlign="right" disabled/> | |||
</u-form-item> | |||
<u-form-item label="OBU卡状态" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' | |||
borderBottom> | |||
<u-input v-model="state.form.customerTel" inputAlign="right" disabled/> | |||
</u-form-item> | |||
<u-form-item label="ETC卡状态" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' | |||
borderBottom> | |||
</u-form-item> | |||
<view class="card"> | |||
<image :src='`${$imgUrl}issuance/obuPicture.png`' mode=""></image> | |||
<view class="details"> | |||
<view>储蓄卡</view> | |||
<view>卡号:100101010101</view> | |||
</view> | |||
</view> | |||
<u-form-item label="OBU卡状态" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' | |||
borderBottom> | |||
</u-form-item> | |||
<view class="card"> | |||
<image :src='`${$imgUrl}issuance/obuPicture.png`' mode=""></image> | |||
<view class="details"> | |||
<view>OBU信息</view> | |||
<view>序列号:100101010101</view> | |||
</view> | |||
</view> | |||
</u-form> | |||
</view> | |||
<view class="bg"> | |||
<view class="title" style="margin-bottom: 30rpx;">请输入需要变更ETC车牌号码</view> | |||
<car-number-input :defaultStr="state.form.vehiclePlate"></car-number-input> | |||
<u-form label-width="230" :model="state.form" ref="uForm" :label-style='labelStyle' borderBottom> | |||
<u-form-item label="车牌颜色" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' | |||
borderBottom> | |||
<u-input v-model="state.form.vehiclePlateColorStr" type="select" @click="show1 = true" input-align='right'/> | |||
</u-form-item> | |||
<u-form-item label="车牌类型" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' | |||
borderBottom> | |||
<u-input v-model="state.form.vehiclePlateColorStr" type="select" @click="show1 = true" input-align='right'/> | |||
</u-form-item> | |||
</u-form> | |||
</view> | |||
<view class="tips"> | |||
<view class="hint"> | |||
<image :src="`${$imgUrl}common/icon-hint.png`" class="icon"></image> | |||
<view>注意事项</view> | |||
</view> | |||
<view class="item">1、非蓝牙设备不支持该功能。</view> | |||
<view class="item">2、单位用户请到线下网点进行办理。</view> | |||
<view class="item">3、车牌变更成功后需重新绑定票根信息工行。</view> | |||
<view class="item">4、工行、建行渠道的储值卡不支持该功能。</view> | |||
</view> | |||
<view class="action"> | |||
<button type="default" class="ui-btn" @click="savaHandle()"> | |||
提交 | |||
</button> | |||
</view> | |||
<!-- 选择车牌颜色 --> | |||
<u-select v-model="show1" :list="state.colorRange" @confirm="changeColor"></u-select> | |||
</template> | |||
<script setup lang="ts"> | |||
import { navTo,uploadFile,strReplace,msg} from "@/utils/utils"; | |||
import { reactive,ref } from "vue"; | |||
import carNumberInput from "@/components/car-number-input/car-number-input.vue"; | |||
import { onLoad } from "@dcloudio/uni-app"; | |||
import { getItem } from "@/utils/storage.ts" | |||
import {selfServiceView,selfServiceUserUpload} from "@/utils/network/api.js"; | |||
import {requestNew} from "@/utils/network/request.js"; | |||
const labelStyle = { | |||
color: "#004576", | |||
fontSize: "28rpx", | |||
} | |||
const leftIcon = { | |||
height: '100%', | |||
width: '8rpx', | |||
display: 'flex', | |||
'align-items': 'center', | |||
'margin-right': '4rpx', | |||
} | |||
const show1 = ref(false) | |||
const show2 = ref(false) | |||
const state = reactive({ | |||
form: { | |||
customerName: "", | |||
customerTel: "", | |||
vehiclePlate: "", | |||
vehiclePlateColor: "", | |||
vehiclePlateColorStr:"",//车牌颜色中文 | |||
questionType:"", | |||
questionTypeStr:"", | |||
etcUser:"", | |||
etcUserStr:"", | |||
eventOccurrenceDate:"",//2016-09-01 00:00:00 | |||
supportingMaterialsUrlShow:[], | |||
insertTime:"", | |||
}, | |||
colorRange: [], | |||
questionTypeRange:[ | |||
{value: 1, label: "工单1"}, | |||
{value: 2, label: "工单2"}, | |||
], | |||
etcUserRange:[ | |||
{value: 1, label: "是"}, | |||
{value: 0, label: "否"}, | |||
], | |||
}) | |||
onLoad((option : any) => { | |||
let getColor = getItem('key')['VEHICLE_COLOR_TYPE']; | |||
for (var k = 0; k < getColor.length; k++) { | |||
let obj = {}; | |||
obj['value'] = getColor[k]['code'] | |||
obj['label'] = getColor[k]['name'] | |||
state.colorRange.push(obj) | |||
} | |||
console.log("state.colorRange",state.colorRange,option) | |||
}); | |||
//车牌号输入 | |||
const carNumber = (val : any) => { | |||
state.form.vehiclePlate = val.trim(); | |||
}; | |||
const savaHandle = () => { | |||
} | |||
const changeColor = (item) => { | |||
state.form.vehiclePlateColor = item[0].value | |||
state.form.vehiclePlateColorStr = item[0].label | |||
console.log(item) | |||
} | |||
</script> | |||
<style lang="scss" scoped> | |||
.bg { | |||
background-color: white; | |||
width: 90%; | |||
margin: 0 auto; | |||
margin-top: 20rpx; | |||
border-radius: 12px; | |||
border: 1px solid #FFFFFF; | |||
padding: 30rpx 20rpx; | |||
overflow: hidden; | |||
box-sizing: border-box; | |||
.title_wrap { | |||
display: flex; | |||
font-weight: 400; | |||
margin-bottom: 40rpx; | |||
justify-content: space-between; | |||
.title { | |||
font-size: 30rpx; | |||
color: #01243A; | |||
} | |||
} | |||
.des { | |||
font-weight: 400; | |||
font-size: 28rpx; | |||
color: #01243A; | |||
line-height: 56rpx; | |||
margin-top: 10rpx; | |||
text-indent: 1rem; | |||
} | |||
} | |||
.action { | |||
position: absolute; | |||
left: 0; | |||
height: 160rpx; | |||
background-color: #fff; | |||
border-radius: 30rpx 30rpx 0 0; | |||
width: 100vw; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
flex-direction: column; | |||
margin-top: 20rpx; | |||
} | |||
.card{ | |||
display: flex; | |||
align-items: center; | |||
image{ | |||
width: 120rpx; | |||
height: 120rpx; | |||
margin-right: 20rpx; | |||
} | |||
.details view:first-child{ | |||
margin-bottom: 10rpx; | |||
} | |||
} | |||
.tips{ | |||
width: 90%; | |||
padding: 20rpx 0; | |||
box-sizing: border-box; | |||
margin: 20rpx auto; | |||
.hint{ | |||
display: flex; | |||
align-items: center; | |||
.icon{ | |||
width: 30rpx; | |||
height: 30rpx; | |||
margin-right: 10rpx; | |||
} | |||
} | |||
.item{ | |||
margin: 10rpx 0; | |||
text-indent: 1rem; | |||
} | |||
} | |||
</style> |
@@ -0,0 +1,132 @@ | |||
<template> | |||
<view class="content"> | |||
<view class="tilte">贵A12345</view> | |||
<view class="list"> | |||
<radio-group @change="radioChange"> | |||
<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in state.items" :key="item.value"> | |||
<view class="item"> | |||
<image :src='`${$imgUrl}${item.url}`' mode=""></image> | |||
<text class="name">{{item.name}}</text> | |||
<radio :value="item.value" :checked="index === state.current" /> | |||
</view> | |||
</label> | |||
</radio-group> | |||
</view> | |||
<view class="tip"> | |||
<view class="top"> | |||
<image :src='`${$imgUrl}issuance/attention.png`' mode=""></image> | |||
<text>温馨提示</text> | |||
</view> | |||
<view class="words">1、ETC车辆信息变更:对当前车辆的车辆基础信息进行修改。</view> | |||
<view class="words">2、ETC车牌变更:对ETC设备内绑定车辆进行变更(换车辆使用)。</view> | |||
</view> | |||
</view> | |||
<view class="action"> | |||
<button type="default" class="ui-btn" @click="savaHandle()"> | |||
提交 | |||
</button> | |||
</view> | |||
</template> | |||
<script setup> | |||
import {navTo} from "@/utils/utils"; | |||
import {reactive} from "vue"; | |||
import {onLoad} from "@dcloudio/uni-app"; | |||
const state = reactive({ | |||
items: [{ | |||
value: 'USA', | |||
name: 'ETC车辆信息变更', | |||
checked: 'true', | |||
url:"issuance/carmsg.png" | |||
}, | |||
{ | |||
value: 'CHN', | |||
name: 'ETC车牌变更', | |||
url:"issuance/carmsg1.png" | |||
}, | |||
], | |||
current: 0 | |||
}); | |||
const radioChange=(evt) =>{ | |||
for (let i = 0; i < state.items.length; i++) { | |||
if (state.items[i].value === evt.detail.value) { | |||
state.current = i; | |||
break; | |||
} | |||
} | |||
} | |||
const savaHandle=()=>{ | |||
navTo(`/subpackage/personal-center/vehicle-change/vehicle-change-direction`) | |||
} | |||
</script> | |||
<style scoped lang="scss"> | |||
.content{ | |||
width: 92%; | |||
margin: 30rpx auto; | |||
.tilte{ | |||
background: linear-gradient(88deg, #CCB375 0%, #E7D398 100%); | |||
border-radius: 12rpx 12rpx 0 0; | |||
color: white; | |||
text-align: center; | |||
height: 100rpx; | |||
line-height: 100rpx; | |||
font-weight: 400; | |||
font-size: 48rpx; | |||
} | |||
.list{ | |||
border-radius: 12rpx; | |||
background-color: white; | |||
padding: 30rpx; | |||
.item{ | |||
padding: 30rpx 0; | |||
display: flex; | |||
align-items: center; | |||
image{ | |||
width: 110rpx; | |||
height: 110rpx; | |||
} | |||
.name{ | |||
margin: 0 30rpx; | |||
width: 60%; | |||
font-weight: bold; | |||
} | |||
} | |||
} | |||
} | |||
.tip{ | |||
margin-top: 40rpx; | |||
.top{ | |||
display: flex; | |||
align-items: center; | |||
image{ | |||
width: 44rpx; | |||
height: 44rpx; | |||
margin-right: 10rpx; | |||
vertical-align: bottom; | |||
} | |||
} | |||
.words{ | |||
text-indent: 2rem; | |||
margin: 10rpx 0; | |||
font-size: 26rpx; | |||
color: #111111; | |||
} | |||
} | |||
.action { | |||
position: fixed; | |||
left: 0; | |||
bottom: 0; | |||
height: 160rpx; | |||
background-color: #fff; | |||
border-radius: 30rpx 30rpx 0 0; | |||
width: 100vw; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
flex-direction: column; | |||
margin-top: 20rpx; | |||
} | |||
</style> |
@@ -0,0 +1,258 @@ | |||
<template> | |||
<view> | |||
<view class="top-tip"> | |||
<image src="/static/image/myx.png" mode=""></image> | |||
<view> | |||
<view style="margin-bottom: 6rpx;">使用场景</view> | |||
<view>需要变更车辆信息,包括信息修改及车牌变更。</view> | |||
</view> | |||
</view> | |||
<view class="bg" style="margin-top: -10rpx;"> | |||
<view class="title"> 需要准备的材料 </view> | |||
<view class="cailiao"> | |||
<view class="list" v-for="(item,index) in list"> | |||
<view>{{item.name}}</view> | |||
<view class="tip">{{item.tip}}</view> | |||
<image class="icon" :src="`${$imgUrl}${item.img}`" | |||
:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"> | |||
</image> | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
<view class="bg"> | |||
<view class="title"> 办理流程 </view> | |||
<view class="dot_wrap"> | |||
<view class="dot_wrap_left"> | |||
<text class="dot"></text> | |||
<text class="line"></text> | |||
<text class="dot"></text> | |||
<text class="line"></text> | |||
<text class="dot"></text> | |||
<text class="line"></text> | |||
<text class="dot"></text> | |||
<text class="line"></text> | |||
<text class="dot"></text> | |||
<text class="line"></text> | |||
<text class="dot"></text> | |||
</view> | |||
<view class="dot_wrap_right"> | |||
<view class="item"> | |||
<image :src="`${$imgUrl}issuance/direction1.png`"></image> | |||
<view class="destion"> | |||
<view class="destion1">选择变更车辆</view> | |||
<view class="destion2">辅助说明。</view> | |||
</view> | |||
<image :src="`${$imgUrl}issuance/direction4.png`"></image> | |||
</view> | |||
<view class="item"> | |||
<image :src="`${$imgUrl}issuance/direction2.png`"></image> | |||
<view class="destion"> | |||
<view class="destion1">选择变更类型</view> | |||
<view class="destion2">辅助说明</view> | |||
</view> | |||
</view> | |||
<view class="item"> | |||
<image :src="`${$imgUrl}issuance/direction3.png`"></image> | |||
<view class="destion"> | |||
<view class="destion1">设备预检</view> | |||
<view class="destion2">辅助说明</view> | |||
</view> | |||
</view> | |||
<view class="item"> | |||
<image :src="`${$imgUrl}issuance/direction1.png`"></image> | |||
<view class="destion"> | |||
<view class="destion1">资料提交</view> | |||
<view class="destion2">根据实际使用和购买产品产生。</view> | |||
</view> | |||
<image :src="`${$imgUrl}issuance/direction4.png`"></image> | |||
</view> | |||
<view class="item"> | |||
<image :src="`${$imgUrl}issuance/direction2.png`"></image> | |||
<view class="destion"> | |||
<view class="destion1">资料审核</view> | |||
<view class="destion2">辅助说明</view> | |||
</view> | |||
</view> | |||
<view class="item" style="margin-bottom: 0;"> | |||
<image :src="`${$imgUrl}issuance/direction3.png`"></image> | |||
<view class="destion"> | |||
<view class="destion1">设备升级</view> | |||
<view class="destion2">辅助说明</view> | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
<view class="action"> | |||
<button type="default" class="ui-btn" @click="savaHandle()"> | |||
车辆信息变更 | |||
</button> | |||
<button type="default" class="ui-btn-normal" @click="progressQuery()"> | |||
进度查询 | |||
</button> | |||
</view> | |||
</template> | |||
<script setup lang="ts"> | |||
import {navTo} from "@/utils/utils"; | |||
import { | |||
ref | |||
} from "vue"; | |||
const list=ref([ | |||
{'name':"申请人身份证正面",'img':"issuance/sfz.png"}, | |||
{'name':"车辆行驶证",'img':"issuance/xz.png"}, | |||
{'name':"委托书",'img':"issuance/weituo.png","tip":"(非本人办理必传)"}, | |||
{'name':"道路运输许可证",'img':"issuance/dlysxkz.png","tip":"(牵引车必传)"}, | |||
{'name':"单位授权书",'img':"issuance/weituo.png","tip":"(单位必传)"}, | |||
{'name':"营业执照",'img':"issuance/zhizhaoNew.png","tip":"(单位必传)"}, | |||
]) | |||
const savaHandle = () => { | |||
navTo(`/subpackage/after-sale/rescind-carId/rescind-carId-select`) | |||
} | |||
const progressQuery = () => { | |||
} | |||
</script> | |||
<style lang="scss" scoped> | |||
.bg { | |||
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: 400; | |||
font-size: 30rpx; | |||
color: #01243A; | |||
} | |||
.dot_wrap { | |||
display: flex; | |||
margin: 30rpx 0; | |||
.dot_wrap_left { | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
margin-right: 20rpx; | |||
margin-top: 20rpx; | |||
.dot { | |||
width: 24rpx; | |||
height: 24rpx; | |||
background: #01243A; | |||
border-radius: 50%; | |||
} | |||
.line { | |||
height: 126rpx; | |||
background-color: transparent; | |||
border-left: 2rpx dashed #01243A; | |||
} | |||
} | |||
.dot_wrap_right { | |||
.item { | |||
background: #F7F7F7; | |||
border-radius: 12rpx; | |||
height: 120rpx; | |||
display: flex; | |||
padding: 10rpx 20rpx; | |||
box-sizing: border-box; | |||
width: 600rpx; | |||
margin-bottom: 30rpx; | |||
.destion { | |||
margin: 0 60rpx 0 20rpx; | |||
font-weight: 400; | |||
.destion1 { | |||
font-size: 28rpx; | |||
color: #01243A; | |||
} | |||
.destion2 { | |||
font-size: 22rpx; | |||
color: #999999; | |||
line-height: 50rpx; | |||
} | |||
} | |||
image { | |||
width: 46rpx; | |||
height: 47rpx; | |||
} | |||
} | |||
} | |||
} | |||
.cailiao { | |||
width: 100%; | |||
display: flex; | |||
flex-wrap: wrap; | |||
justify-content: space-between; | |||
.list { | |||
width: 48%; | |||
margin-top: 30rpx; | |||
.tip{ | |||
font-size: 22rpx; | |||
color: #999999; | |||
} | |||
view { | |||
text-align: center; | |||
margin-bottom: 15rpx; | |||
font-size: 28rpx; | |||
color: #01243A; | |||
} | |||
.icon { | |||
width: 100%; | |||
height: 190rpx; | |||
background-image: var(--bgimg); | |||
background-size: 100% 100%; | |||
background-repeat: no-repeat; | |||
} | |||
} | |||
} | |||
} | |||
.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; | |||
} | |||
.top-tip{ | |||
background: linear-gradient(88deg, #CCB375 0%, #E7D398 100%); | |||
border-radius: 12rpx 12rpx 0 0; | |||
color: white; | |||
height: 90rpx; | |||
width: 88%; | |||
margin: 0 auto; | |||
padding: 30rpx 20rpx; | |||
margin-top: 30rpx; | |||
display: flex; | |||
font-size: 26rpx; | |||
color: #FFFFFF; | |||
image{ | |||
width: 34rpx; | |||
height: 34rpx; | |||
margin: 0 10rpx 0 20rpx; | |||
} | |||
} | |||
</style> |
@@ -1,165 +0,0 @@ | |||
<template> | |||
<view v-if="state.list.length!=0" style="padding-bottom:30rpx ;"> | |||
<view class="car-item" v-for="(item,index) in state.list"> | |||
<image :src="`${$imgUrl}che.png`" class="car-pic" @click="carDetails(item)"></image> | |||
<view class="car-info" @click="carDetails(item)"> | |||
<view class="car-no"><text class="no">{{item.vehiclePlate}}</text><text class="color" | |||
:style="{ background: item.showColor}">{{item.color}}</text></view> | |||
<view class="card-no">卡号:{{item.cardId}}</view> | |||
<view class="card-no">签号:{{item.obuId}}</view> | |||
</view> | |||
<view class="btn-unbind" @click="del(item.vehicleId)">解除绑定</view> | |||
</view> | |||
</view> | |||
<view v-else class="no">暂无车辆信息</view> | |||
</template> | |||
<script lang="ts" setup> | |||
import { reactive } from "vue"; | |||
import { requestNew } from "@/utils/network/request.js"; | |||
import { onLoad } from "@dcloudio/uni-app"; | |||
import { selectCarInfo, delCarInfo } from "@/utils/network/api.js"; | |||
import { getItem } from "@/utils/storage"; | |||
import { vehiclePlateColorPai } from "@/datas/vehiclePlateColor.js"; | |||
const state = reactive({ | |||
list: '' | |||
}) | |||
onLoad((option : any) => { | |||
queryCarMsg(); | |||
}) | |||
const carDetails = (item) => { | |||
const params = encodeURIComponent(JSON.stringify(item)) | |||
uni.navigateTo({ | |||
url: `/subpackage/personal-center/car-details?params=${params}` | |||
}) | |||
} | |||
const queryCarMsg = () => { | |||
const options = { | |||
type: 2, | |||
data: { | |||
"openId": getItem('openId') | |||
}, | |||
method: "POST", | |||
showLoading: true, | |||
}; | |||
//调用方式 | |||
requestNew(selectCarInfo, options).then((res) => { | |||
console.log("车辆信息:", res) | |||
const data = res.vehicleManages | |||
for (var i = 0; i < data.length; i++) { | |||
for (var j = 0; j < vehiclePlateColorPai.length; j++) { | |||
if (data[i].vehiclePlateColor == vehiclePlateColorPai[j]['id']) { | |||
data[i].color = vehiclePlateColorPai[j]['color'] | |||
data[i].showColor = vehiclePlateColorPai[j]['showColor'] | |||
} | |||
} | |||
} | |||
console.log("data", data) | |||
state.list = data; | |||
}) | |||
.catch((err) => { | |||
}); | |||
} | |||
// 删除 | |||
const del = (id) => { | |||
uni.showModal({ | |||
title: '提示', | |||
content: '是否删除该条车辆信息', | |||
success: function (res) { | |||
if (res.confirm) { | |||
console.log('用户点击确定'); | |||
let data = { | |||
vehicleId: id, | |||
openId: getItem('openId') | |||
} | |||
const options = { | |||
type: 2, | |||
data: data, | |||
method: "POST", | |||
showLoading: true, | |||
}; | |||
requestNew(delCarInfo, options).then((res) => { | |||
const data = res; | |||
console.log(data) | |||
uni.showToast({ | |||
title: "删除成功", | |||
icon: "none" | |||
}) | |||
queryCarMsg(); | |||
}); | |||
} else if (res.cancel) { | |||
console.log('用户点击取消'); | |||
} | |||
} | |||
}); | |||
} | |||
</script> | |||
<style scoped> | |||
.car-item { | |||
display: flex; | |||
align-items: center; | |||
padding: 36rpx 0; | |||
width: 95%; | |||
margin: 0 auto; | |||
background: #f6f6f6; | |||
border-radius: 16rpx; | |||
padding: 20rpx; | |||
box-sizing: border-box; | |||
margin-top: 30rpx; | |||
} | |||
.car-item .btn-unbind { | |||
border: 1px solid #00B38B; | |||
border-radius: 30rpx; | |||
height: 56rpx; | |||
box-sizing: border-box; | |||
line-height: 56rpx; | |||
font-size: 24rpx; | |||
padding: 0 20rpx; | |||
background: rgba(0, 179, 139, .1); | |||
color: #00B38B; | |||
margin-bottom: 10rpx; | |||
} | |||
.car-pic { | |||
width: 120rpx; | |||
height: 120rpx; | |||
margin-right: 16rpx; | |||
} | |||
.car-info { | |||
display: flex; | |||
flex-direction: column; | |||
flex: 1; | |||
color: #999; | |||
font-size: 22rpx; | |||
} | |||
.car-no { | |||
font-size: 30rpx; | |||
color: #333; | |||
} | |||
.card-no { | |||
margin-top: 14rpx; | |||
} | |||
.no { | |||
text-align: center; | |||
margin: 50rpx auto; | |||
} | |||
.color { | |||
padding: 4rpx 8rpx; | |||
border-radius: 10rpx; | |||
color: white; | |||
background-color: rgb(6, 112, 255); | |||
display: inline-block; | |||
margin-left: 20rpx; | |||
font-size: 24rpx; | |||
} | |||
</style> |