<view class="details-item"> | <view class="details-item"> | ||||
<view> 车牌颜色: </view> | <view> 车牌颜色: </view> | ||||
<text style="color: #00b38b">{{ | <text style="color: #00b38b">{{ | ||||
orderInfos.vehiclePlateColorStr | |||||
}}</text> | |||||
orderInfos.vehiclePlateColorStr | |||||
}}</text> | |||||
</view> | </view> | ||||
<view class="details-item"> | <view class="details-item"> | ||||
<view> 收费车型: </view> | <view> 收费车型: </view> | ||||
<text>储蓄卡</text> | <text>储蓄卡</text> | ||||
<text class="tips-card">{{getEtcCardStatus(orderInfos.cardStatus)}}</text> | <text class="tips-card">{{getEtcCardStatus(orderInfos.cardStatus)}}</text> | ||||
</view> | </view> | ||||
<view class="choose-item"> 有效期:xxxx-xx-xx </view> | |||||
<view class="choose-item"> 有效期:{{orderInfos.cardEnableTime }}</view> | |||||
</view> | </view> | ||||
</view> | </view> | ||||
<!-- <text>储蓄卡</text> --> | <!-- <text>储蓄卡</text> --> | ||||
<text class="tips-card">{{getObuStatus(orderInfos.obuStatus)}}</text> | <text class="tips-card">{{getObuStatus(orderInfos.obuStatus)}}</text> | ||||
</view> | </view> | ||||
<view class="choose-item"> 有效期:xxxx-xx-xx </view> | |||||
<view class="choose-item"> 有效期:{{orderInfos.obuEnableTime }} </view> | |||||
</view> | </view> | ||||
</view> | </view> | ||||
</view> | </view> | ||||
<view> 3.xxxxxxxx </view> | <view> 3.xxxxxxxx </view> | ||||
<view> 4.xxxxxxxx </view> | <view> 4.xxxxxxxx </view> | ||||
</view> | </view> | ||||
<button class="submit" @click="toPage">下一步</button> | |||||
<button class="submit" @click="toPage" v-show="!state.flag">卡签续期</button> | |||||
<button class="submit" @click="toBack" v-show="state.flag">返回服务中心</button> | |||||
<view class="mask" v-show="state.showPopup"> | |||||
<view class="main"> | |||||
<view class="top"> | |||||
<image class="icon-close" :src="`${$imgUrl}common/icon-close.png`" @click="cancel"></image> | |||||
</view> | |||||
<image class="icon-success" :src="`${$imgUrl}bluetooth/device-active-success.png`"></image> | |||||
<view class="title">卡签续期成功!</view> | |||||
</view> | |||||
</view> | |||||
</view> | </view> | ||||
</template> | </template> | ||||
<script lang="ts" setup> | <script lang="ts" setup> | ||||
import { | import { | ||||
reactive, | |||||
ref | |||||
reactive | |||||
} from "vue"; | } from "vue"; | ||||
import { | import { | ||||
navTo,msg | |||||
navTo | |||||
} from "@/utils/utils"; | } from "@/utils/utils"; | ||||
import { | import { | ||||
onLoad, | onLoad, | ||||
import { | import { | ||||
orderDetail, | orderDetail, | ||||
cardRenewal, | cardRenewal, | ||||
cardStopOrStart, | |||||
deviceUpgrade | |||||
writeCardBack, | |||||
cardModifyConfirm | |||||
} from "@/utils/network/api.js"; | } from "@/utils/network/api.js"; | ||||
import { | import { | ||||
} from "@/utils/network/encryption"; | } from "@/utils/network/encryption"; | ||||
const tools = require("../../static/etcUtil/tools.js"); | const tools = require("../../static/etcUtil/tools.js"); | ||||
const bluetoothUtil = require("../../static/etcUtil/index.js"); | const bluetoothUtil = require("../../static/etcUtil/index.js"); | ||||
const state = reactive({ | |||||
showPopup: false, | |||||
flag: false | |||||
}) | |||||
const orderInfos = reactive({ | const orderInfos = reactive({ | ||||
orderId: "", | orderId: "", | ||||
ownerName: "", | ownerName: "", | ||||
ownerIdnum: "", | ownerIdnum: "", | ||||
vehiclePlate: "", | vehiclePlate: "", | ||||
vehiclePlateColorStr: "", | vehiclePlateColorStr: "", | ||||
vehiclePlateColor:"", | |||||
vehiclePlateColor: "", | |||||
vehicleType: "", | vehicleType: "", | ||||
cardId: "", | cardId: "", | ||||
cardStatus: "", | cardStatus: "", | ||||
obuId: "", | obuId: "", | ||||
obuStatus: "", | obuStatus: "", | ||||
cardEnableTime: "", | |||||
obuEnableTime: "", | |||||
}); | }); | ||||
onLoad((option) => { | onLoad((option) => { | ||||
}) | }) | ||||
}) | }) | ||||
const toPage = () => { | |||||
// getCardStopOrStart() | |||||
getDeviceUpgrade() | |||||
// | |||||
// navTo("/pages/bluetooth/bluetooth?routeType=5"); | |||||
// if (flag.length == 0) { | |||||
// uni.showToast({ | |||||
// title: '请至少勾选一项', | |||||
// }); | |||||
// } else { | |||||
// // wx.showModal({ | |||||
// // title: '设备挂失', | |||||
// // content: '请确认是否执行挂失操作', | |||||
// // success: function(res) { | |||||
// // if (res.confirm) { | |||||
// // console.log('用户点击确定'); | |||||
// // navTo('/after-sale/card-loss-reporting/cardloss') | |||||
// // } else if (res.cancel) { | |||||
// // console.log('用户点击取消'); | |||||
// // } | |||||
// // } | |||||
// // }); | |||||
// } | |||||
}; | |||||
const flag = reactive([]); | |||||
//选择按钮 | |||||
const choose = (data) => { | |||||
if (!flag.includes(data)) { | |||||
flag.push(data); | |||||
console.log(flag); | |||||
} else { | |||||
flag.splice(flag.indexOf(data), 1); | |||||
console.log(flag); | |||||
} | |||||
}; | |||||
onUnload(() => { | |||||
//移除监听 | |||||
uni.$off('bluetoothLink') | |||||
}) | |||||
//获取订单详情 | //获取订单详情 | ||||
const queryOrderDetail = (id: string) => { | const queryOrderDetail = (id: string) => { | ||||
const options = { | const options = { | ||||
orderInfos.cardStatus = orderInfo.cardStatus; | orderInfos.cardStatus = orderInfo.cardStatus; | ||||
orderInfos.obuId = orderInfo.obuId; | orderInfos.obuId = orderInfo.obuId; | ||||
orderInfos.obuStatus = orderInfo.obuStatus; | orderInfos.obuStatus = orderInfo.obuStatus; | ||||
orderInfos.cardEnableTime = orderInfo.cardEnableTime.substring(0, 10); | |||||
orderInfos.obuEnableTime = orderInfo.obuEnableTime.substring(0, 10); | |||||
}); | }); | ||||
}; | }; | ||||
}; | }; | ||||
request(cardRenewal, options).then((res) => { | request(cardRenewal, options).then((res) => { | ||||
let result = stringToJson(res.bizContent); | let result = stringToJson(res.bizContent); | ||||
console.log(result); | |||||
let cmdArray = []; | |||||
tools.showLoadingAlert("正在执行指令"); | |||||
bluetoothUtil.transCmd(cmdArray, "10", function(res: any) { | |||||
tools.hideLoadingAlert(); | |||||
console.log(res); | |||||
}) | |||||
let cmdArray = result.command.split(","); | |||||
console.log(cmdArray); | |||||
console.log(result.cosRecordId); | |||||
if (cmdArray.length > 0) { | |||||
tools.showLoadingAlert("正在执行指令"); | |||||
bluetoothUtil.transCmd(cmdArray, "10", function(res: any) { | |||||
tools.hideLoadingAlert(); | |||||
let status = res[cmdArray.length - 1].substring(res[cmdArray.length - 1].length - | |||||
4, res[cmdArray.length - 1].length); | |||||
if (status == "9000") { | |||||
bluetoothUtil.disconnectDevice(); //断开蓝牙 | |||||
getCommandBack(result.command, result.cosRecordId, res.toString()); | |||||
} | |||||
}) | |||||
} | |||||
}) | }) | ||||
} | |||||
//卡停用/启用 请求 | |||||
const getCardStopOrStart = () => { | |||||
const options = { | |||||
type: 2, | |||||
}; | |||||
/** | |||||
* 写卡指令返回 请求 | |||||
*/ | |||||
const getCommandBack = (command: any, cosRecordId: string, response: string) => { | |||||
console.log('======循环写卡指令中======') | |||||
tools.showLoadingAlert("加载中"); | |||||
let options = { | |||||
type: 2, //type: 2,JSON格式提交数据(默认表单形式提交) | |||||
data: { | data: { | ||||
cardId: orderInfos.cardId, | cardId: orderInfos.cardId, | ||||
operation: 1,//1停用2启用 | |||||
}, | |||||
method: "POST", | |||||
showLoading: true, | |||||
orderId: orderInfos.orderId, | |||||
command: command, | |||||
response: response, | |||||
cosRecordId: cosRecordId, | |||||
cosType: "2" | |||||
}, //请求参数 | |||||
method: "POST", //提交方式(默认POST) | |||||
showLoading: true, //是否显示加载中(默认显示) | |||||
}; | }; | ||||
request(cardStopOrStart, options).then((res) => { | |||||
let result = stringToJson(res.bizContent); | |||||
console.log(result); | |||||
// let cmdArray = []; | |||||
// tools.showLoadingAlert("正在执行指令"); | |||||
// bluetoothUtil.transCmd(cmdArray, "10", function(res: any) { | |||||
// tools.hideLoadingAlert(); | |||||
// console.log(res); | |||||
// }) | |||||
}) | |||||
//调用方式 | |||||
request(writeCardBack, options) | |||||
.then((res) => { | |||||
tools.hideLoadingAlert(); | |||||
let result = JSON.parse(res.bizContent); | |||||
console.log("*********************",result); | |||||
if (result.orderStatus == 1 || result.orderStatus == "1") { | |||||
tools.showLoadingAlert("执行指令中"); | |||||
bluetoothUtil.transCmd(result.command.split(","), "10", function(res) { | |||||
tools.hideLoadingAlert(); | |||||
let response = res.toString(); | |||||
getCommandBack(result.command, cosRecordId, response); | |||||
}); | |||||
} else { | |||||
getCardModifyConfirm(result.cosRecordId); //卡信息变更确认 | |||||
} | |||||
}) | |||||
}; | }; | ||||
//设备升级 请求 | |||||
const getDeviceUpgrade = () => { | |||||
//卡信息变更确认 | |||||
const getCardModifyConfirm = (cosRecordId: string) => { | |||||
const options = { | const options = { | ||||
type: 2, | type: 2, | ||||
data: { | data: { | ||||
cardId: orderInfos.cardId, | cardId: orderInfos.cardId, | ||||
vehiclePlate: orderInfos.vehiclePlate, | |||||
expireTime:"", | |||||
customerName:orderInfos.ownerName, | |||||
customerIdNum:orderInfos.ownerIdnum, | |||||
vehiclePlateColor:orderInfos.vehiclePlateColor, | |||||
operation: 1, | |||||
cosRecordId: cosRecordId | |||||
}, | }, | ||||
method: "POST", | method: "POST", | ||||
showLoading: true, | showLoading: true, | ||||
}; | }; | ||||
request(deviceUpgrade, options).then((res) => { | |||||
let result = stringToJson(res.bizContent); | |||||
console.log(result); | |||||
// let cmdArray = []; | |||||
// tools.showLoadingAlert("正在执行指令"); | |||||
// bluetoothUtil.transCmd(cmdArray, "10", function(res: any) { | |||||
// tools.hideLoadingAlert(); | |||||
// console.log(res); | |||||
// }) | |||||
request(cardModifyConfirm, options).then((res: any) => { | |||||
console.log(res); | |||||
state.showPopup = true; | |||||
}) | }) | ||||
} | } | ||||
//去连接蓝牙 | |||||
const toPage = () => { | |||||
navTo("/pages/bluetooth/bluetooth?routeType=5"); //去连接蓝牙 | |||||
}; | |||||
//返回列表 | |||||
const toBack = () => { | |||||
navTo("/pages/service/service") | |||||
} | |||||
//关闭弹窗 | |||||
const cancel = () => { | |||||
state.flag = true; | |||||
state.showPopup = false; | |||||
} | |||||
//卡停用/启用 请求 | |||||
// const getCardStopOrStart = () => { | |||||
// const options = { | |||||
// type: 2, | |||||
// data: { | |||||
// cardId: orderInfos.cardId, | |||||
// operation: 1,//1停用2启用 | |||||
// }, | |||||
// method: "POST", | |||||
// showLoading: true, | |||||
// }; | |||||
// request(cardStopOrStart, options).then((res) => { | |||||
// let result = stringToJson(res.bizContent); | |||||
// console.log(result); | |||||
// // let cmdArray = []; | |||||
// // tools.showLoadingAlert("正在执行指令"); | |||||
// // bluetoothUtil.transCmd(cmdArray, "10", function(res: any) { | |||||
// // tools.hideLoadingAlert(); | |||||
// // console.log(res); | |||||
// // }) | |||||
// }) | |||||
// }; | |||||
//设备升级 请求 | |||||
// const getDeviceUpgrade = () => { | |||||
// const options = { | |||||
// type: 2, | |||||
// data: { | |||||
// cardId: orderInfos.cardId, | |||||
// vehiclePlate: orderInfos.vehiclePlate, | |||||
// expireTime:"", | |||||
// customerName:orderInfos.ownerName, | |||||
// customerIdNum:orderInfos.ownerIdnum, | |||||
// vehiclePlateColor:orderInfos.vehiclePlateColor, | |||||
// }, | |||||
// method: "POST", | |||||
// showLoading: true, | |||||
// }; | |||||
// request(deviceUpgrade, options).then((res) => { | |||||
// let result = stringToJson(res.bizContent); | |||||
// console.log(result); | |||||
// // let cmdArray = []; | |||||
// // tools.showLoadingAlert("正在执行指令"); | |||||
// // bluetoothUtil.transCmd(cmdArray, "10", function(res: any) { | |||||
// // tools.hideLoadingAlert(); | |||||
// // console.log(res); | |||||
// // }) | |||||
// }) | |||||
// } | |||||
</script> | </script> | ||||
<style> | <style> | ||||
} | } | ||||
</style> | </style> | ||||
<style lang="scss" scoped> | <style lang="scss" scoped> | ||||
.mask { | |||||
background: rgba(0, 0, 0, .35); | |||||
position: fixed; | |||||
left: 0; | |||||
top: 0; | |||||
bottom: 0; | |||||
right: 0; | |||||
} | |||||
.main { | |||||
width: 560rpx; | |||||
padding: 25rpx 20rpx 55rpx; | |||||
text-align: center; | |||||
background: #fff; | |||||
position: absolute; | |||||
left: 50%; | |||||
top: 50%; | |||||
transform: translate(-50%, -50%); | |||||
border-radius: 20rpx; | |||||
.top { | |||||
text-align: right; | |||||
.icon-close { | |||||
width: 48rpx; | |||||
height: 48rpx; | |||||
} | |||||
} | |||||
.icon-success { | |||||
width: 500rpx; | |||||
height: 320rpx; | |||||
margin-top: 22rpx; | |||||
} | |||||
.title { | |||||
color: #333333; | |||||
font-size: 40rpx; | |||||
font-weight: 600; | |||||
text-align: center; | |||||
margin-top: 55rpx; | |||||
} | |||||
} | |||||
.selectCar-box { | .selectCar-box { | ||||
// width: 100%; | // width: 100%; | ||||
// height: 100%; | // height: 100%; |
<template> | <template> | ||||
<view class="selectCar-box"> | <view class="selectCar-box"> | ||||
<view class="item" v-for="(item,i) in list" :key="i"> | |||||
<view v-if="state.list.length>0" @click="choose(i,item)" class="item" v-for="(item,i) in state.list" :key="i"> | |||||
<view class="iten-left"> | <view class="iten-left"> | ||||
<image :src="`${$imgUrl}che.png`" mode=""></image> | <image :src="`${$imgUrl}che.png`" mode=""></image> | ||||
<text>{{item.name}}</text> | |||||
<text>{{item.vehiclePlate}}</text> | |||||
</view> | </view> | ||||
<view class="choose-item" @click="choose(i,item)"> | |||||
<view class="active" v-if="flag==i"> | |||||
<view class="choose-item"> | |||||
<view class="active" v-if="flag==i"> | |||||
</view> | </view> | ||||
</view> | </view> | ||||
</view> | |||||
<view v-else class="flex"> | |||||
暂无车辆订单信息 | |||||
</view> | </view> | ||||
</view> | </view> | ||||
</template> | </template> | ||||
<script lang="ts" setup> | <script lang="ts" setup> | ||||
import {reactive,ref} from"vue" | |||||
import {navTo} from "@/utils/utils" | |||||
const list=reactive([ | |||||
{name:"A12345"}, | |||||
{name:"B12345"}, | |||||
{name:"C12345"}, | |||||
]) | |||||
const flag=ref('0') | |||||
const choose=(i,item)=>{ | |||||
flag.value=i | |||||
console.log("选择得数据",item); | |||||
navTo('/after-sale/equipment-upgrade/upgrade-confirm') | |||||
} | |||||
import { | |||||
reactive, | |||||
ref | |||||
} from "vue" | |||||
import { | |||||
navTo | |||||
} from "@/utils/utils" | |||||
import { | |||||
onLoad, | |||||
onShow | |||||
} from "@dcloudio/uni-app"; | |||||
import { | |||||
orderList | |||||
} from "@/utils/network/api.js"; | |||||
import { | |||||
request | |||||
} from "@/utils/network/request.js"; | |||||
import { | |||||
getItem, | |||||
StorageKeys, | |||||
setItem | |||||
} from "@/utils/storage"; | |||||
import { | |||||
stringToJson | |||||
} from "@/utils/network/encryption"; | |||||
const state = reactive({ | |||||
list: [] | |||||
}); | |||||
onLoad(() => { | |||||
quanCheckActionTrue().then((item: any) => { | |||||
state.list = item.data | |||||
console.log(item) | |||||
}) | |||||
}); | |||||
const quanCheckActionTrue = () => { | |||||
var data = { | |||||
opId: getItem(StorageKeys.OpenId), | |||||
source: 'WECHAT', | |||||
tabIndex: '0', | |||||
orderStep: '11', | |||||
isValueCard: '2' | |||||
}; | |||||
const options = { | |||||
type: 2, | |||||
data: data, | |||||
method: "POST", | |||||
showLoading: true, | |||||
}; | |||||
return new Promise(async (resolve, reject) => { | |||||
const res = await request(orderList, options); | |||||
const data = stringToJson(res.bizContent); | |||||
resolve(data); | |||||
}).catch((error) => { | |||||
reject(error); | |||||
}); | |||||
} | |||||
const flag = ref('0') | |||||
const choose = (i, item) => { | |||||
console.log(item.cardId) | |||||
navTo(`/after-sale/equipment-upgrade/upgrade-confirm?id=${item.id}`) | |||||
} | |||||
</script> | </script> | ||||
<style> | <style> | ||||
} | } | ||||
</style> | </style> | ||||
<style lang="scss" scoped> | <style lang="scss" scoped> | ||||
.flex { | |||||
display: flex; | |||||
justify-content: center; | |||||
} | |||||
.selectCar-box { | .selectCar-box { | ||||
// width: 100%; | // width: 100%; | ||||
height: 100%; | height: 100%; | ||||
box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8); | box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8); | ||||
border-radius: 20rpx; | border-radius: 20rpx; | ||||
margin-bottom: 30rpx; | margin-bottom: 30rpx; | ||||
.iten-left { | .iten-left { | ||||
display: flex; | display: flex; | ||||
align-items: center; | align-items: center; | ||||
image { | image { | ||||
width: 150rpx; | width: 150rpx; | ||||
height: 90rpx; | height: 90rpx; | ||||
color: #333333; | color: #333333; | ||||
} | } | ||||
} | } | ||||
.choose-item{ | |||||
width: 44rpx; | |||||
height: 44rpx; | |||||
background: #FFFFFF; | |||||
border: 2rpx solid #00B38B; | |||||
border-radius: 50%; | |||||
margin-right: 20rpx; | |||||
display: flex; | |||||
justify-content: center; | |||||
align-items: center; | |||||
box-sizing: content-box; | |||||
.choose-item { | |||||
width: 44rpx; | |||||
height: 44rpx; | |||||
background: #FFFFFF; | |||||
border: 2rpx solid #00B38B; | |||||
border-radius: 50%; | |||||
margin-right: 20rpx; | |||||
display: flex; | |||||
justify-content: center; | |||||
align-items: center; | |||||
box-sizing: content-box; | |||||
} | } | ||||
.active{ | |||||
.active { | |||||
width: 34rpx; | width: 34rpx; | ||||
height: 34rpx; | height: 34rpx; | ||||
background: #00B38B; | background: #00B38B; |
<template> | <template> | ||||
<view class="selectCar-box"> | |||||
<view class="details"> | |||||
<view class="title"> 基础信息 </view> | |||||
<view class="details-item"> | |||||
<view> 订单编号: </view> | |||||
<text>123234350000001</text> | |||||
</view> | |||||
<view class="details-item"> | |||||
<view> 用户名称: </view> | |||||
<text>xxxxx</text> | |||||
</view> | |||||
<view class="details-item"> | |||||
<view> 用户证件类型: </view> | |||||
<text>居民身份证</text> | |||||
</view> | |||||
<view class="details-item"> | |||||
<view> 用户证件号: </view> | |||||
<text>44504049343434001</text> | |||||
</view> | |||||
<view class="details-item"> | |||||
<view> 订单车牌号: </view> | |||||
<text style="color: #00b38b ;">贵A12345</text> | |||||
</view> | |||||
<view class="details-item"> | |||||
<view> 收费车型: </view> | |||||
<text>客车</text> | |||||
</view> | |||||
</view> | |||||
<view class="title"> 卡信号 </view> | |||||
<view class="card"> | |||||
<view class="card-left"> | |||||
<image :src="`${$imgUrl}card2.png`" mode=""></image> | |||||
<view class="card-center"> | |||||
<view class="card-center-head"> 2023022700012 </view> | |||||
<view class="tips"> | |||||
<text>储蓄卡</text> | |||||
<text class="tips-card">正常</text> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
<view class="choose-item"> | |||||
<!-- 有效期:xxxx-xx-xx --> | |||||
</view> | |||||
</view> | |||||
<view class="title"> OBU设备信息 </view> | |||||
<view class="card"> | |||||
<view class="card-left"> | |||||
<image :src="`${$imgUrl}card1.png`" mode=""></image> | |||||
<view class="card-center"> | |||||
<view class="card-center-head"> 2023022700012 </view> | |||||
<view class="tips"> | |||||
<text>储蓄卡</text> | |||||
<text class="tips-card">正常</text> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
<view class="choose-item"> | |||||
<!-- 有效期:xxxx-xx-xx --> | |||||
</view> | |||||
</view> | |||||
<!-- <view class="title"> | |||||
注意事项 | |||||
</view> | |||||
<view class="remark"> | |||||
<view> | |||||
1.xxxxxxxx | |||||
<view class="selectCar-box"> | |||||
<view class="details"> | |||||
<view class="title"> 基础信息 </view> | |||||
<view class="details-item"> | |||||
<view> 订单编号: </view> | |||||
<text>{{ orderInfos.orderId }}</text> | |||||
</view> | |||||
<view class="details-item"> | |||||
<view> 用户名称: </view> | |||||
<text>{{ orderInfos.ownerName }}</text> | |||||
</view> | |||||
<view class="details-item"> | |||||
<view> 用户证件类型: </view> | |||||
<text>{{ getCredentialType(orderInfos.ownerIdtype) }}</text> | |||||
</view> | </view> | ||||
<view> | |||||
2.xxxxxxxx | |||||
<view class="details-item"> | |||||
<view> 用户证件号: </view> | |||||
<text>{{ orderInfos.ownerIdnum }}</text> | |||||
</view> | </view> | ||||
<view> | |||||
3.xxxxxxxx | |||||
<view class="details-item"> | |||||
<view> 订单车牌号: </view> | |||||
<text style="color: #00b38b">{{ orderInfos.vehiclePlate }}</text> | |||||
</view> | </view> | ||||
<view> | |||||
4.xxxxxxxx | |||||
<view class="details-item"> | |||||
<view> 车牌颜色: </view> | |||||
<text style="color: #00b38b">{{ | |||||
orderInfos.vehiclePlateColorStr | |||||
}}</text> | |||||
</view> | |||||
<view class="details-item"> | |||||
<view> 收费车型: </view> | |||||
<text>{{ orderInfos.vehicleType }}</text> | |||||
</view> | |||||
</view> | |||||
<view class="title"> 卡信息 </view> | |||||
<view class="card"> | |||||
<view class="card-left"> | |||||
<image :src="`${$imgUrl}card2.png`" mode=""></image> | |||||
<view class="card-center"> | |||||
<view class="card-center-head"> {{orderInfos.cardId}} </view> | |||||
<view class="tips"> | |||||
<text>储蓄卡</text> | |||||
<text class="tips-card">{{getEtcCardStatus(orderInfos.cardStatus)}}</text> | |||||
</view> | |||||
<view class="choose-item"> 有效期:{{orderInfos.cardEnableTime }}</view> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
<view class="title"> OBU设备信息 </view> | |||||
<view class="card"> | |||||
<view class="card-left"> | |||||
<image :src="`${$imgUrl}card1.png`" mode=""></image> | |||||
<view class="card-center"> | |||||
<view class="card-center-head"> {{orderInfos.obuId}} </view> | |||||
<view class="tips"> | |||||
<!-- <text>储蓄卡</text> --> | |||||
<text class="tips-card">{{getObuStatus(orderInfos.obuStatus)}}</text> | |||||
</view> | |||||
<view class="choose-item"> 有效期:{{orderInfos.obuEnableTime }} </view> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
<button class="submit" @click="toPage" v-show="!state.flag">设备升级</button> | |||||
<button class="submit" @click="toBack" v-show="state.flag">返回服务中心</button> | |||||
<view class="mask" v-show="state.showPopup"> | |||||
<view class="main"> | |||||
<view class="top"> | |||||
<image class="icon-close" :src="`${$imgUrl}common/icon-close.png`" @click="cancel"></image> | |||||
</view> | |||||
<image class="icon-success" :src="`${$imgUrl}bluetooth/device-active-success.png`"></image> | |||||
<view class="title">设备升级成功!</view> | |||||
</view> | </view> | ||||
</view> --> | |||||
<button class="submit" @click="toPage">下一步</button> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
</template> | </template> | ||||
<script lang="ts" setup> | <script lang="ts" setup> | ||||
import { reactive, ref } from "vue"; | |||||
import { navTo } from "@/utils/utils"; | |||||
const toPage = () => { | |||||
console.log(11); | |||||
navTo("/pages/bluetooth/bluetooth?routeType=5"); | |||||
// wx.showModal({ | |||||
// title: '提示', | |||||
// content: '检测到当前只有ETC卡,需要办理obu设备才可以通行,是否前往办理,无需办理点击继续注销', | |||||
// confirmText: '继续注销', | |||||
// cancelText: '前往办理', | |||||
// success: function(res) { | |||||
// if (res.confirm) { | |||||
// console.log('用户点击确定'); | |||||
// navTo('/after-sale/ETC-log-off/etc-log-off') | |||||
// } else if (res.cancel) { | |||||
// console.log('用户点击取消'); | |||||
// // navTo('/after-sale/card-loss-reporting/cardloss') | |||||
// } | |||||
// } | |||||
// }); | |||||
}; | |||||
const flag = reactive([]); | |||||
const choose = (data) => { | |||||
if (!flag.includes(data)) { | |||||
flag.push(data); | |||||
console.log(flag); | |||||
} else { | |||||
flag.splice(flag.indexOf(data), 1); | |||||
console.log(flag); | |||||
} | |||||
}; | |||||
import { | |||||
reactive | |||||
} from "vue"; | |||||
import { | |||||
navTo, | |||||
getFormatDate | |||||
} from "@/utils/utils"; | |||||
import { | |||||
onLoad, | |||||
onUnload, | |||||
onShow | |||||
} from "@dcloudio/uni-app"; | |||||
import { | |||||
request | |||||
} from "@/utils/network/request.js"; | |||||
import { | |||||
orderDetail, | |||||
deviceUpgrade, | |||||
cardModifyConfirm | |||||
} from "@/utils/network/api.js"; | |||||
import { | |||||
getCredentialType | |||||
} from "@/datas/credentialType.js"; | |||||
import { | |||||
getEtcCardStatus | |||||
} from "@/datas/etcCardStatus.js"; | |||||
import { | |||||
getObuStatus | |||||
} from "@/datas/obuStatus.js"; | |||||
import { | |||||
stringToJson | |||||
} from "@/utils/network/encryption"; | |||||
const tools = require("../../static/etcUtil/tools.js"); | |||||
const bluetoothUtil = require("../../static/etcUtil/index.js"); | |||||
const state = reactive({ | |||||
showPopup: false, | |||||
flag: false | |||||
}) | |||||
const orderInfos = reactive({ | |||||
orderId: "", | |||||
ownerName: "", | |||||
ownerIdtype: "", | |||||
ownerIdnum: "", | |||||
vehiclePlate: "", | |||||
vehiclePlateColorStr: "", | |||||
vehiclePlateColor: "", | |||||
vehicleType: "", | |||||
cardId: "", | |||||
cardStatus: "", | |||||
obuId: "", | |||||
obuStatus: "", | |||||
cardEnableTime:"", | |||||
obuEnableTime:"", | |||||
}); | |||||
onLoad((option) => { | |||||
//请求订单详情 | |||||
queryOrderDetail(option.id); | |||||
}); | |||||
onShow((option) => { | |||||
uni.$on('bluetoothLink', res => { | |||||
console.log(res); | |||||
if (res.status) { | |||||
getDeviceUpgrade() | |||||
} | |||||
//移除监听 | |||||
uni.$off('bluetoothLink') | |||||
}) | |||||
}) | |||||
onUnload(() => { | |||||
//移除监听 | |||||
uni.$off('bluetoothLink') | |||||
}) | |||||
//获取订单详情 | |||||
const queryOrderDetail = (id: string) => { | |||||
const options = { | |||||
type: 2, | |||||
data: { | |||||
id: id, | |||||
}, | |||||
method: "POST", | |||||
showLoading: true, | |||||
}; | |||||
request(orderDetail, options).then((res) => { | |||||
let orderInfo = JSON.parse(res.bizContent); | |||||
console.log(orderInfo); | |||||
orderInfos.orderId = orderInfo.orderId; | |||||
orderInfos.ownerName = orderInfo.ownerName; | |||||
orderInfos.ownerIdtype = orderInfo.ownerIdtype; | |||||
orderInfos.ownerIdnum = orderInfo.ownerIdnum; | |||||
orderInfos.vehiclePlate = orderInfo.vehiclePlate; | |||||
orderInfos.vehiclePlateColorStr = orderInfo.vehiclePlateColorStr; | |||||
orderInfos.vehiclePlateColor = orderInfo.vehiclePlateColor; | |||||
orderInfos.vehicleType = orderInfo.vehicleType; | |||||
orderInfos.cardId = orderInfo.cardId; | |||||
orderInfos.cardStatus = orderInfo.cardStatus; | |||||
orderInfos.obuId = orderInfo.obuId; | |||||
orderInfos.obuStatus = orderInfo.obuStatus; | |||||
orderInfos.cardEnableTime = orderInfo.cardEnableTime.substring(0,10); | |||||
orderInfos.obuEnableTime = orderInfo.obuEnableTime.substring(0,10); | |||||
}); | |||||
}; | |||||
//设备升级 请求 | |||||
const getDeviceUpgrade = () => { | |||||
const options = { | |||||
type: 2, | |||||
data: { | |||||
cardId: orderInfos.cardId, | |||||
vehiclePlate: orderInfos.vehiclePlate, | |||||
expireTime: "", | |||||
customerName: orderInfos.ownerName, | |||||
customerIdNum: orderInfos.ownerIdnum, | |||||
vehiclePlateColor: orderInfos.vehiclePlateColor, | |||||
}, | |||||
method: "POST", | |||||
showLoading: true, | |||||
}; | |||||
request(deviceUpgrade, options).then((res) => { | |||||
let result = stringToJson(res.bizContent); | |||||
console.log(result); | |||||
let cmdArray = result.command.split(","); | |||||
console.log(cmdArray); | |||||
console.log(cmdArray.length - 1); | |||||
if (cmdArray.length > 0) { | |||||
tools.showLoadingAlert("正在执行指令"); | |||||
bluetoothUtil.transCmd(cmdArray, "10", function(res: any) { | |||||
tools.hideLoadingAlert(); | |||||
let status = res[cmdArray.length - 1].substring(res[cmdArray.length - 1].length - | |||||
4, res[cmdArray.length - 1].length); | |||||
if (status == "9000") { | |||||
//断开蓝牙 | |||||
bluetoothUtil.disconnectDevice(); | |||||
getCardModifyConfirm(result.cosRecordId) | |||||
} | |||||
}) | |||||
} | |||||
}) | |||||
} | |||||
//卡信息变更确认 | |||||
const getCardModifyConfirm = (cosRecordId:string) => { | |||||
const options = { | |||||
type: 2, | |||||
data: { | |||||
cardId: orderInfos.cardId, | |||||
operation: 4, | |||||
cosRecordId: cosRecordId | |||||
}, | |||||
method: "POST", | |||||
showLoading: true, | |||||
}; | |||||
request(cardModifyConfirm, options).then((res: any) => { | |||||
console.log(res); | |||||
state.showPopup = true; | |||||
}) | |||||
} | |||||
//去连接蓝牙 | |||||
const toPage = () => { | |||||
// getDeviceUpgrade() | |||||
navTo("/pages/bluetooth/bluetooth?routeType=5"); //去连接蓝牙 | |||||
}; | |||||
//返回列表 | |||||
const toBack = () => { | |||||
navTo("/pages/service/service") | |||||
} | |||||
//关闭弹窗 | |||||
const cancel = () => { | |||||
state.flag = true; | |||||
state.showPopup = false; | |||||
} | |||||
</script> | </script> | ||||
<style> | <style> | ||||
page { | |||||
width: 100%; | |||||
height: 100%; | |||||
background-color: #fff; | |||||
} | |||||
page { | |||||
width: 100%; | |||||
height: 100%; | |||||
background-color: #fff; | |||||
} | |||||
</style> | </style> | ||||
<style lang="scss" scoped> | <style lang="scss" scoped> | ||||
.selectCar-box { | |||||
// width: 100%; | |||||
// height: 100%; | |||||
padding: 30rpx; | |||||
.title { | |||||
font-size: 30rpx; | |||||
font-family: Microsoft YaHei UI; | |||||
font-weight: 400; | |||||
color: #333333; | |||||
margin-bottom: 30rpx; | |||||
} | |||||
.details { | |||||
.title { | |||||
font-size: 30rpx; | |||||
font-family: Microsoft YaHei UI; | |||||
font-weight: 400; | |||||
color: #333333; | |||||
margin-bottom: 30rpx; | |||||
} | |||||
.details-item { | |||||
display: flex; | |||||
font-size: 26rpx; | |||||
font-family: Noto Sans S Chinese; | |||||
font-weight: 400; | |||||
color: #999999; | |||||
margin-bottom: 30rpx; | |||||
text { | |||||
font-size: 26rpx; | |||||
font-family: Noto Sans S Chinese; | |||||
font-weight: 400; | |||||
color: #333333; | |||||
} | |||||
} | |||||
} | |||||
.card { | |||||
height: 150rpx; | |||||
background: #ffffff; | |||||
box-shadow: 0rpx 4rpx 13rpx 3rpx rgba(223, 223, 223, 0.8); | |||||
border-radius: 20rpx; | |||||
padding: 30rpx; | |||||
display: flex; | |||||
justify-content: space-between; | |||||
align-items: center; | |||||
margin-bottom: 60rpx; | |||||
.card-left { | |||||
display: flex; | |||||
align-items: center; | |||||
image { | |||||
width: 100rpx; | |||||
height: 90rpx; | |||||
} | |||||
.card-center { | |||||
margin-left: 30rpx; | |||||
.card-center-head { | |||||
font-size: 32rpx; | |||||
font-family: Noto Sans S Chinese; | |||||
font-weight: 400; | |||||
color: #333333; | |||||
} | |||||
.tips { | |||||
font-size: 26rpx; | |||||
font-family: Noto Sans S Chinese; | |||||
font-weight: 400; | |||||
color: #666666; | |||||
.tips-card { | |||||
width: 70rpx; | |||||
height: 40rpx; | |||||
background: #d3f2ef; | |||||
border-radius: 6rpx; | |||||
font-size: 20rpx; | |||||
font-family: Noto Sans S Chinese; | |||||
font-weight: 400; | |||||
color: #0a8f8a; | |||||
padding: 5rpx 10rpx; | |||||
margin-left: 20rpx; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
.choose-item { | |||||
margin-right: 20rpx; | |||||
/* width: 50rpx; */ | |||||
height: 50rpx; | |||||
/* border: 1rpx solid #00B38B; */ | |||||
border-radius: 50%; | |||||
display: flex; | |||||
justify-content: center; | |||||
align-items: center; | |||||
font-size: 25rpx; | |||||
align-self: end; | |||||
.active { | |||||
width: 38rpx; | |||||
height: 38rpx; | |||||
background: #00b38b; | |||||
border-radius: 50%; | |||||
} | |||||
} | |||||
} | |||||
.remark { | |||||
font-size: 26rpx; | |||||
font-family: Microsoft YaHei UI; | |||||
font-weight: 400; | |||||
color: #666666; | |||||
text-indent: 30rpx; | |||||
margin-bottom: 30rpx; | |||||
} | |||||
.submit { | |||||
margin-top: 100rpx; | |||||
width: 670rpx; | |||||
height: 80rpx; | |||||
background: linear-gradient(-90deg, #43a1e0 0%, #13e7c1 100%); | |||||
border-radius: 40rpx; | |||||
font-size: 32rpx; | |||||
font-family: Noto Sans S Chinese; | |||||
font-weight: 400; | |||||
color: #ffffff; | |||||
line-height: 80rpx; | |||||
} | |||||
} | |||||
.mask { | |||||
background: rgba(0, 0, 0, .35); | |||||
position: fixed; | |||||
left: 0; | |||||
top: 0; | |||||
bottom: 0; | |||||
right: 0; | |||||
} | |||||
.main { | |||||
width: 560rpx; | |||||
padding: 25rpx 20rpx 55rpx; | |||||
text-align: center; | |||||
background: #fff; | |||||
position: absolute; | |||||
left: 50%; | |||||
top: 50%; | |||||
transform: translate(-50%, -50%); | |||||
border-radius: 20rpx; | |||||
.top { | |||||
text-align: right; | |||||
.icon-close { | |||||
width: 48rpx; | |||||
height: 48rpx; | |||||
} | |||||
} | |||||
.icon-success { | |||||
width: 500rpx; | |||||
height: 320rpx; | |||||
margin-top: 22rpx; | |||||
} | |||||
.title { | |||||
color: #333333; | |||||
font-size: 40rpx; | |||||
font-weight: 600; | |||||
text-align: center; | |||||
margin-top: 55rpx; | |||||
} | |||||
} | |||||
.selectCar-box { | |||||
// width: 100%; | |||||
// height: 100%; | |||||
padding: 30rpx; | |||||
.title { | |||||
font-size: 30rpx; | |||||
font-family: Microsoft YaHei UI; | |||||
font-weight: 400; | |||||
color: #333333; | |||||
margin-bottom: 30rpx; | |||||
} | |||||
.details { | |||||
.title { | |||||
font-size: 30rpx; | |||||
font-family: Microsoft YaHei UI; | |||||
font-weight: 400; | |||||
color: #333333; | |||||
margin-bottom: 30rpx; | |||||
} | |||||
.details-item { | |||||
display: flex; | |||||
font-size: 26rpx; | |||||
font-family: Noto Sans S Chinese; | |||||
font-weight: 400; | |||||
color: #999999; | |||||
margin-bottom: 30rpx; | |||||
text { | |||||
font-size: 26rpx; | |||||
font-family: Noto Sans S Chinese; | |||||
font-weight: 400; | |||||
color: #333333; | |||||
} | |||||
} | |||||
} | |||||
.card { | |||||
height: 150rpx; | |||||
background: #ffffff; | |||||
box-shadow: 0rpx 4rpx 13rpx 3rpx rgba(223, 223, 223, 0.8); | |||||
border-radius: 20rpx; | |||||
padding: 30rpx; | |||||
display: flex; | |||||
justify-content: space-between; | |||||
align-items: center; | |||||
margin-bottom: 60rpx; | |||||
.card-left { | |||||
display: flex; | |||||
align-items: center; | |||||
image { | |||||
width: 100rpx; | |||||
height: 90rpx; | |||||
} | |||||
.card-center { | |||||
margin-left: 30rpx; | |||||
.card-center-head { | |||||
font-size: 32rpx; | |||||
font-family: Noto Sans S Chinese; | |||||
font-weight: 400; | |||||
color: #333333; | |||||
} | |||||
.tips { | |||||
font-size: 26rpx; | |||||
font-family: Noto Sans S Chinese; | |||||
font-weight: 400; | |||||
color: #666666; | |||||
.tips-card { | |||||
width: 70rpx; | |||||
height: 40rpx; | |||||
background: #d3f2ef; | |||||
border-radius: 6rpx; | |||||
font-size: 20rpx; | |||||
font-family: Noto Sans S Chinese; | |||||
font-weight: 400; | |||||
color: #0a8f8a; | |||||
padding: 5rpx 10rpx; | |||||
margin-left: 20rpx; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
.choose-item { | |||||
margin-right: 20rpx; | |||||
/* width: 50rpx; */ | |||||
height: 50rpx; | |||||
/* border: 1rpx solid #00B38B; */ | |||||
border-radius: 50%; | |||||
display: flex; | |||||
justify-content: start; | |||||
align-items: center; | |||||
font-size: 25rpx; | |||||
align-self: end; | |||||
.active { | |||||
width: 38rpx; | |||||
height: 38rpx; | |||||
background: #00b38b; | |||||
border-radius: 50%; | |||||
} | |||||
} | |||||
} | |||||
.remark { | |||||
font-size: 26rpx; | |||||
font-family: Microsoft YaHei UI; | |||||
font-weight: 400; | |||||
color: #666666; | |||||
text-indent: 30rpx; | |||||
margin-bottom: 30rpx; | |||||
} | |||||
.submit { | |||||
margin-top: 100rpx; | |||||
width: 670rpx; | |||||
height: 80rpx; | |||||
background: linear-gradient(-90deg, #43a1e0 0%, #13e7c1 100%); | |||||
border-radius: 40rpx; | |||||
font-size: 32rpx; | |||||
font-family: Noto Sans S Chinese; | |||||
font-weight: 400; | |||||
color: #ffffff; | |||||
line-height: 80rpx; | |||||
} | |||||
} | |||||
</style> | </style> |
const navHeight = ref(null) | const navHeight = ref(null) | ||||
const searchMarginTop = ref(null) | const searchMarginTop = ref(null) | ||||
const searchHeight = ref(null) | |||||
const searchWidth = ref(null) | |||||
const searchHeight = ref(32) | |||||
const searchWidth = ref(32) | |||||
onMounted(() => { | onMounted(() => { | ||||
const menuButtonInfo = uni.getMenuButtonBoundingClientRect() | const menuButtonInfo = uni.getMenuButtonBoundingClientRect() | ||||
const { | const { |
datas.setData("bluLinkStatus", true); | datas.setData("bluLinkStatus", true); | ||||
datas.setData("connectPrefixName", connectPrefixName.value); | datas.setData("connectPrefixName", connectPrefixName.value); | ||||
//routeType 1.激活(订单来) 2.圈存 (/pages/recharge/recharge来)3.信息重写 4.信息读取 5卡续期 | |||||
//routeType 1.激活(订单来) 2.圈存 (/pages/recharge/recharge来)3.信息重写 4.信息读取 5从哪里来回哪里去监听bluetoothLink | |||||
if (routeType.value == "1") { | if (routeType.value == "1") { | ||||
uni.navigateTo({ | uni.navigateTo({ | ||||
url: "/after-sale/activation/activate", | url: "/after-sale/activation/activate", |
//卡签操作 | //卡签操作 | ||||
export const cardRenewal = "891" //ASS-卡续期 | export const cardRenewal = "891" //ASS-卡续期 | ||||
export const cardStopOrStart ="892" //ASS-卡停/启用 | export const cardStopOrStart ="892" //ASS-卡停/启用 | ||||
export const deviceUpgrade = "893"//BDS-设备升级接口 | |||||
export const deviceUpgrade = "893"//BDS-设备升级接口 | |||||
export const cardModifyConfirm = "898" //ASS-卡信息变更确认 |