qiubinghui
/
zhywpt-sp
Volgen 1
Ster 0
Vork 0
Code Kwesties 0 Pull-aanvragen 0 Publicaties 0 Wiki Activiteit
Bladeren bron

宝溢和车辆信息变更

修改样式逻辑
yangteng 1 maand geleden
bovenliggende
9a5cf4950f
commit
3a6c490cd0
10 gewijzigde bestanden met toevoegingen van 692 en 175 verwijderingen
Gecombineerde weergave Toon Diff Stats
  1. 29
    7
      pages.json
  2. 18
    1
      pages/bluetooth/bluetooth.vue
  3. 1
    1
      pages/user/user.vue
  4. 21
    0
      static/etcUtil/index.js
  5. 9
    0
      subpackage/after-sale/activation-once-again/select-car.vue
  6. 1
    1
      subpackage/after-sale/blacklist-query/addCar.vue
  7. 223
    0
      subpackage/personal-center/vehicle-change/vehicle-change-chepai.vue
  8. 132
    0
      subpackage/personal-center/vehicle-change/vehicle-change-choiceType.vue
  9. 258
    0
      subpackage/personal-center/vehicle-change/vehicle-change-direction.vue
  10. 0
    165
      subpackage/personal-center/vehicle-information.vue

+ 29
- 7
pages.json Bestand weergeven

}, },
{ {
"root": "subpackage/personal-center", //个人中心 "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", "path": "trapping-and-repairing-account/result",
"style": { "style": {
"navigationBarTitleText": "修复成功", "navigationBarTitleText": "修复成功",
"navigationBarTitleText": "通行记录" "navigationBarTitleText": "通行记录"
} }
}, },
{
"path": "vehicle-information",
"style": {
"navigationBarTitleText": "车辆信息"
}
},
// {
// "path": "vehicle-information",
// "style": {
// "navigationBarTitleText": "车辆信息"
// }
// },
{ {
"path": "change-password", "path": "change-password",
"style": { "style": {

+ 18
- 1
pages/bluetooth/bluetooth.vue Bestand weergeven

if ( if (
prefixName == "WJ" || prefixName == "WJ" ||
prefixName == "JL" || prefixName == "JL" ||
prefixName == "BY" ||
prefixName == "JY" || prefixName == "JY" ||
prefixName == "AT" || prefixName == "AT" ||
prefixName == "JT" || prefixName == "JT" ||
case "JL": case "JL":
_name = "聚利"; _name = "聚利";
break; break;
case "BY":
_name = "宝溢";
break;
case "JY": case "JY":
_name = "金溢"; _name = "金溢";
break; break;
} }
); );
break; 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": case "JY":
jyApi.connectDevice( jyApi.connectDevice(
device, device,

+ 1
- 1
pages/user/user.vue Bestand weergeven

<view class="right-head"> <view class="right-head">
<view class="tit">我的车辆</view> <view class="tit">我的车辆</view>
<!-- <view class="more" @click="$util.navTo('/subpackage/personal-center/vehicle-information', true)"> --> <!-- <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> <text class="more-text">查看全部</text>
<image :src="`${$imgUrl}myImage/wdexiayi.png`" class="arrow"></image> <image :src="`${$imgUrl}myImage/wdexiayi.png`" class="arrow"></image>
</view> </view>

+ 21
- 0
static/etcUtil/index.js Bestand weergeven

datas.setData("connectPrefixName", ""); datas.setData("connectPrefixName", "");
}); });
break; break;
case "BY":
jyApi.disconnectDevice(function(res) {
datas.setData("bluLinkStatus", false);
datas.setData("connectPrefixName", "");
});
break;
case "JY": case "JY":
jyApi.disconnectDevice(function(res) { jyApi.disconnectDevice(function(res) {
} }
}); });
break; 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": case "JY":
jyApi.transCmd(cmdArr, type, function(res) { jyApi.transCmd(cmdArr, type, function(res) {
if (res.code == 0) { if (res.code == 0) {

+ 9
- 0
subpackage/after-sale/activation-once-again/select-car.vue Bestand weergeven

type: "",//1 OBU重新激活 2 卡签注销 3 更换设备 4卡签续期 5挂失解挂 6增补设备（单卡单签补） 7补卡签（设备丢了补卡签） 8解除挂起 type: "",//1 OBU重新激活 2 卡签注销 3 更换设备 4卡签续期 5挂失解挂 6增补设备（单卡单签补） 7补卡签（设备丢了补卡签） 8解除挂起
// 30 储值卡转记账卡 31卡pin码解锁 32ETC车牌过户 33 卡签停用/卡签启用 // 30 储值卡转记账卡 31卡pin码解锁 32ETC车牌过户 33 卡签停用/卡签启用
// 34月结单查询 35ETC通行流水记录 36 黑名单查询 37恢复签约 // 34月结单查询 35ETC通行流水记录 36 黑名单查询 37恢复签约
// 38 车辆信息变更
}); });
onLoad((options) => { onLoad((options) => {
console.log("options", options) console.log("options", options)
uni.setNavigationBarTitle({ uni.setNavigationBarTitle({
title: '恢复签约-选择车辆' title: '恢复签约-选择车辆'
}); });
}else if (options.type == "38") {
uni.setNavigationBarTitle({
title: '车辆信息变更-选择车辆'
});
} }
}); });
uni.navigateTo({ uni.navigateTo({
url: `/subpackage/after-sale/blacklist-query/list?vehicleId=${item.vehicleId}` 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{ }else{
if (item.deviceType == deviceType) { if (item.deviceType == deviceType) {
// OBU重新激活跳转 // OBU重新激活跳转

+ 1
- 1
subpackage/after-sale/blacklist-query/addCar.vue Bestand weergeven

position: fixed; position: fixed;
left: 0; left: 0;
bottom: 0; bottom: 0;
height: 180rpx;
height: 160rpx;
background-color: #fff; background-color: #fff;
border-radius: 30rpx 30rpx 0 0; border-radius: 30rpx 30rpx 0 0;
width: 100vw; width: 100vw;

+ 223
- 0
subpackage/personal-center/vehicle-change/vehicle-change-chepai.vue Bestand weergeven

<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>

+ 132
- 0
subpackage/personal-center/vehicle-change/vehicle-change-choiceType.vue Bestand weergeven

<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>

+ 258
- 0
subpackage/personal-center/vehicle-change/vehicle-change-direction.vue Bestand weergeven

<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>

+ 0
- 165
subpackage/personal-center/vehicle-information.vue Bestand weergeven

<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>

Schrijf Voorbeeld
Laden…
Annuleren
Opslaan