527 lines
13 KiB
Vue
527 lines
13 KiB
Vue
<template>
|
||
<div class="main">
|
||
<div class="topMessage">
|
||
<div class="messageTitle">请输入您的车牌号</div>
|
||
<div class="messageList">
|
||
<div class="messageText">
|
||
1、您授权的车牌信息安全将被严格保证，并限于您授权的用途；
|
||
</div>
|
||
<div class="messageText">2、1个车牌号仅允许被1个账号绑定。</div>
|
||
</div>
|
||
<image class="carLogo" src="/static/images/home/carLogoBg.png" />
|
||
</div>
|
||
|
||
<!-- 输入车牌号的框 -->
|
||
<div class="codeBox">
|
||
<div class="input-box">
|
||
<div
|
||
:class="haveCode ? 'input-f cccBg' : 'input-f'"
|
||
v-for="(item, i) in normalLen"
|
||
:key="i"
|
||
@tap="focusInput(i)"
|
||
>
|
||
<div calss="show-input">{{ saveCarText[i] }}</div>
|
||
</div>
|
||
<div class="input-f lastBox" @tap="handleChangeCarType">
|
||
<div calss="show-input">
|
||
<span class="text-sm">{{ newEnergy ? "新能源" : "" }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 确认绑定按钮 -->
|
||
<div class="confirmBox" @click="handleConfirmCode" v-if="!haveCode">
|
||
确认绑定
|
||
</div>
|
||
<!-- 取消绑定 -->
|
||
<div class="cancelBox" @click="handleCancelCode" v-if="haveCode">
|
||
解绑车辆
|
||
</div>
|
||
|
||
<div>
|
||
<keyboard
|
||
:isShow="isShow"
|
||
@inputchange="inputChange"
|
||
@delete="delValue"
|
||
@ok="confirmboard"
|
||
/>
|
||
</div>
|
||
|
||
<div class="page-body" v-if="false">
|
||
<div v-show="!isLoading && cards.length > 0">
|
||
<div class="title">已绑车辆</div>
|
||
<swiper scroll-x="true" class="banner">
|
||
<swiper-item v-for="(item, o) in cards" :key="o" class="car-card">
|
||
<div class="car-card">
|
||
<image src="/static/images/car-card.png" mode="acspetFit" />
|
||
<text class="card-title">{{ item.License_Plate }}</text>
|
||
</div>
|
||
</swiper-item>
|
||
<swiper-item class="car-card">
|
||
<div class="car-card-add"></div>
|
||
</swiper-item>
|
||
</swiper>
|
||
</div>
|
||
<div v-show="!isLoading && cards.length == 0">
|
||
<image
|
||
src="/static/images/car.png"
|
||
mode="acspetFit"
|
||
class="pic-image"
|
||
></image>
|
||
<div class="tip-text">暂无绑定车辆</div>
|
||
<div class="add-car" @tap="toAdd">
|
||
<van-icon name="plus" size="32" color="#B0B0B0" />
|
||
<span class="">添加车辆</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapGetters } from "vuex";
|
||
import keyboard from "../../components/keyboard.vue";
|
||
export default {
|
||
data() {
|
||
return {
|
||
cards: [],
|
||
isLoading: true,
|
||
normalLen: 7,
|
||
nowIndex: -1,
|
||
isShow: false,
|
||
saveCarText: ["云", "A", "", "", "", "", "", ""],
|
||
newEnergy: true, // 是否是新能源
|
||
haveCode: false, // 判断是否已经有了code
|
||
};
|
||
},
|
||
computed: {
|
||
...mapGetters({
|
||
user: "user",
|
||
}),
|
||
},
|
||
components: {
|
||
keyboard,
|
||
},
|
||
methods: {
|
||
// 确认绑定
|
||
handleConfirmCode() {
|
||
console.log("this.saveCarText", this.saveCarText);
|
||
let _this = this;
|
||
let carText = _this.saveCarText.join("");
|
||
|
||
if (carText.length < 7) {
|
||
uni.showModal({
|
||
title: "温馨提示",
|
||
content: "请您完善车牌号再提交",
|
||
cancelColor: "#000000",
|
||
confirmText: "确定",
|
||
confirmColor: "#3CC51F",
|
||
success: (result) => {
|
||
if (result.confirm) {
|
||
}
|
||
},
|
||
});
|
||
return;
|
||
} else {
|
||
let reg =
|
||
/^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳使领]))$/;
|
||
const careg = reg.test(carText);
|
||
if (!careg) {
|
||
uni.showModal({
|
||
title: "温馨提示",
|
||
content: "请输入正确车牌号",
|
||
showCancel: false,
|
||
});
|
||
return;
|
||
}
|
||
}
|
||
|
||
_this.$api
|
||
.getCoop({
|
||
action_type: "BindVehicle",
|
||
LicensePlate: carText,
|
||
VehicleType: _this.newEnergy ? "新能源" : "",
|
||
})
|
||
.then((res) => {
|
||
console.log("res", res);
|
||
if (res.Result_Code === 100) {
|
||
uni.showModal({
|
||
content: res.Result_Desc,
|
||
cancelColor: "#000000",
|
||
showCancel: false,
|
||
confirmText: "确定",
|
||
confirmColor: "#3CC51F",
|
||
success: (result) => {
|
||
_this.isShow = false;
|
||
_this.getList();
|
||
},
|
||
});
|
||
} else {
|
||
uni.showModal({
|
||
title: "温馨提示",
|
||
content: res.Result_Desc,
|
||
cancelColor: "#000000",
|
||
confirmText: "确定",
|
||
confirmColor: "#3CC51F",
|
||
success: (result) => {
|
||
if (result.confirm) {
|
||
}
|
||
},
|
||
});
|
||
}
|
||
});
|
||
},
|
||
// 改变车的能源类型
|
||
handleChangeCarType() {
|
||
if (this.haveCode) {
|
||
uni.showToast({
|
||
title: "已有关联车辆！如需修改请先解绑",
|
||
icon: "none",
|
||
duration: 2000,
|
||
});
|
||
return;
|
||
} else {
|
||
this.newEnergy = !this.newEnergy;
|
||
}
|
||
},
|
||
inputChange(value) {
|
||
let index = this.nowIndex;
|
||
this.saveCarText[index] = value;
|
||
let next = index + 1;
|
||
|
||
if (next < 7) {
|
||
this.nowIndex = next;
|
||
}
|
||
this.$forceUpdate();
|
||
},
|
||
delValue() {
|
||
let index = this.nowIndex;
|
||
this.saveCarText[index] = "";
|
||
let next = index - 1;
|
||
|
||
if (next > -1) {
|
||
this.nowIndex = next;
|
||
}
|
||
this.$forceUpdate();
|
||
},
|
||
confirmboard() {
|
||
this.isShow = false;
|
||
},
|
||
focusInput(value) {
|
||
if (this.haveCode) {
|
||
uni.showToast({
|
||
title: "已有关联车辆！如需修改请先解绑",
|
||
icon: "none",
|
||
duration: 2000,
|
||
});
|
||
return;
|
||
}
|
||
this.isShow = true;
|
||
this.nowIndex = value;
|
||
},
|
||
// 取消绑定
|
||
handleCancelCode() {
|
||
let _this = this;
|
||
if (_this.cards && _this.cards.length > 0) {
|
||
let obj = _this.cards[0];
|
||
console.log("user", _this.user);
|
||
console.log("obj", obj);
|
||
uni.showModal({
|
||
title: "确认取消绑定？",
|
||
content: "取消绑定后将无法恢复",
|
||
success: function (res) {
|
||
if (res.confirm) {
|
||
_this.$api
|
||
.getCoop({
|
||
action_type: "UnbindVehicle",
|
||
MEMBERSHIPVEHICLE_ID: obj.MEMBERSHIPVEHICLE_ID,
|
||
LicensePlate: obj.License_Plate,
|
||
Membership_Id: _this.user.MEMBERSHIP_ID,
|
||
})
|
||
.then((res) => {
|
||
console.log("res", res);
|
||
if (res.Result_Code === 100) {
|
||
uni.showModal({
|
||
content: res.Result_Desc,
|
||
cancelColor: "#000000",
|
||
showCancel: false,
|
||
confirmText: "确定",
|
||
confirmColor: "#3CC51F",
|
||
success: (result) => {
|
||
_this.isShow = false;
|
||
_this.getList();
|
||
},
|
||
});
|
||
}
|
||
});
|
||
}
|
||
},
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
title: "暂无关联车辆！",
|
||
icon: "none",
|
||
duration: 2000,
|
||
});
|
||
}
|
||
},
|
||
getList() {
|
||
let _this = this;
|
||
|
||
uni.showLoading({ title: "加载中" });
|
||
this.$api
|
||
.getCoop({
|
||
action_type: "GetVehicleList",
|
||
})
|
||
.then((res) => {
|
||
_this.isLoading = false;
|
||
_this.cards = res.Result_Data.List;
|
||
console.log("_this.cards", _this.cards);
|
||
if (_this.cards && _this.cards.length > 0) {
|
||
let obj = _this.cards[0];
|
||
console.log("obj", obj);
|
||
let code = obj.License_Plate;
|
||
_this.saveCarText = code.split("");
|
||
_this.haveCode = true;
|
||
} else {
|
||
_this.saveCarText = ["云", "A", "", "", "", "", "", ""];
|
||
_this.haveCode = false;
|
||
}
|
||
uni.hideLoading();
|
||
});
|
||
},
|
||
toAdd() {
|
||
uni.navigateTo({ url: "/pages/homeFn/bindingCar/index" });
|
||
},
|
||
},
|
||
onShow() {
|
||
this.isLoading = true;
|
||
this.getList();
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.main {
|
||
width: 100%;
|
||
height: 100vh;
|
||
background: #f5f5f5;
|
||
.topMessage {
|
||
width: 100%;
|
||
height: 292rpx;
|
||
background: linear-gradient(270deg, #727377 0%, #424448 100%);
|
||
box-sizing: border-box;
|
||
padding: 48rpx 32rpx;
|
||
position: relative;
|
||
.messageTitle {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #ffffff;
|
||
line-height: 44rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
.messageList {
|
||
width: 100%;
|
||
margin-top: 16rpx;
|
||
.messageText {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #b8b7b4;
|
||
line-height: 36rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-bottom: 4rpx;
|
||
}
|
||
}
|
||
.carLogo {
|
||
position: absolute;
|
||
right: 12rpx;
|
||
bottom: 0;
|
||
width: 240rpx;
|
||
height: 240rpx;
|
||
opacity: 0.8;
|
||
}
|
||
}
|
||
|
||
.codeBox {
|
||
width: calc(100% - 64rpx);
|
||
height: 152rpx;
|
||
background: #ffffff;
|
||
border-radius: 6rpx;
|
||
margin-left: 32rpx;
|
||
transform: translateY(-60rpx);
|
||
box-sizing: border-box;
|
||
padding: 40rpx 26rpx;
|
||
.input-box {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 24rpx;
|
||
.input-f {
|
||
text-align: center;
|
||
width: 72rpx;
|
||
height: 72rpx;
|
||
box-sizing: border-box;
|
||
border-radius: 5rpx;
|
||
line-height: 72rpx;
|
||
position: relative;
|
||
border: 1rpx solid #ededed;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 8rpx;
|
||
.show-input {
|
||
font-size: 34rpx;
|
||
}
|
||
.text-sm {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 20rpx;
|
||
color: #716f69;
|
||
line-height: 28rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
.text-tip-btn {
|
||
text-align: center;
|
||
width: 74rpx;
|
||
height: 74rpx;
|
||
border: 1rpx dashed #ededed;
|
||
border-radius: 5rpx;
|
||
background: #f8f8f8;
|
||
line-height: 70rpx;
|
||
}
|
||
}
|
||
.cccBg {
|
||
background: #f5f6f7;
|
||
}
|
||
.lastBox {
|
||
background: #f5f6f7;
|
||
border-radius: 2rpx;
|
||
border: 1rpx dashed #e7e7e6 !important;
|
||
}
|
||
.input-f:nth-last-child(1) {
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
}
|
||
.confirmBox {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
height: 88rpx;
|
||
color: #ffffff;
|
||
line-height: 44rpx;
|
||
text-align: center;
|
||
font-style: normal;
|
||
width: calc(100% - 64rpx);
|
||
margin-left: 32rpx;
|
||
background: #ba922f;
|
||
border-radius: 6rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.cancelBox {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
height: 88rpx;
|
||
color: #b8b7b4;
|
||
line-height: 44rpx;
|
||
text-align: center;
|
||
font-style: normal;
|
||
width: calc(100% - 64rpx);
|
||
margin-left: 32rpx;
|
||
background: #ffffff;
|
||
border-radius: 6rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 1px solid #b8b7b4;
|
||
margin-top: 24rpx;
|
||
}
|
||
}
|
||
|
||
page {
|
||
background: #fff;
|
||
}
|
||
|
||
.title {
|
||
color: #333333;
|
||
padding-bottom: 36rpx;
|
||
padding-left: 28rpx;
|
||
padding-top: 43rpx;
|
||
}
|
||
|
||
.banner {
|
||
height: 500rpx;
|
||
}
|
||
|
||
.car-card-add {
|
||
width: 502rpx;
|
||
height: 246rpx;
|
||
background: #ffffff;
|
||
border-radius: 8rpx;
|
||
box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(221, 221, 221, 0.48);
|
||
}
|
||
|
||
.car-card {
|
||
position: relative;
|
||
padding-left: 35rpx;
|
||
padding-top: 33rpx;
|
||
width: 534rpx !important;
|
||
height: 285rpx;
|
||
|
||
// margin-left 26rpx
|
||
image {
|
||
width: 534rpx;
|
||
height: 285rpx;
|
||
position: absolute;
|
||
z-index: -1;
|
||
left: 0;
|
||
top: 0;
|
||
}
|
||
|
||
.card-title {
|
||
background: linear-gradient(#f3e6dd, #e5ba9f);
|
||
-webkit-background-clip: text;
|
||
color: transparent;
|
||
-webkit-text-fill-color: transparent;
|
||
text-fill-color: transparent;
|
||
font-size: 36rpx;
|
||
font-weight: bolder;
|
||
}
|
||
}
|
||
|
||
.pic-image {
|
||
width: 482rpx;
|
||
height: 281rpx;
|
||
margin-left: 128rpx;
|
||
margin-right: 140rpx;
|
||
margin-top: 138rpx;
|
||
margin-bottom: 54rpx;
|
||
}
|
||
|
||
.tip-text {
|
||
text-align: center;
|
||
}
|
||
|
||
.add-car {
|
||
color: #b0b0b0;
|
||
width: 504rpx;
|
||
height: 145rpx;
|
||
background: #f8f8f8;
|
||
border: 1rpx dashed #c3c3c3;
|
||
border-radius: 5rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
margin: 83rpx auto;
|
||
font-size: 24rpx;
|
||
justify-content: center;
|
||
line-height: 1.5;
|
||
}
|
||
</style> |