<template>
|
<view class="content">
|
<view class="top">
|
<text>请输入车牌号：</text>
|
<view class="search-car-input" >
|
<view class="car-input">
|
<view class="split-input" ref="splitInput" @click="carInputClick">
|
<view class="split-cell" :class="{'focus-cell':i===plateNum.length+1,'separator':i===2,'new-energe':i===8&& noVal}" v-for="i in 8" :key="i" >{{plateNum[i-1]}}</view>
|
<!-- <view class="energy" v-show="plateNum.length>7">
|
<image :src="energy" mode="widthFix" />
|
</view> -->
|
</view>
|
</view>
|
</view>
|
<button class="save" type="default" :disabled="plateNum.length<=6" @click="save">保 存</button>
|
</view>
|
|
<!-- 引用车牌组件 -->
|
<plate-number ref="plate" v-model="plateNum" @showOrHide="showOrHide"></plate-number>
|
</view>
|
</template>
|
|
<script>
|
import cursor from '../../static/addCar/cursor.gif'
|
import energy from '../../static/addCar/energy.png'
|
import plateNumber from '@/components/plate-number/plateNumber.vue'
|
|
export default {
|
components:{plateNumber},
|
data() {
|
return {
|
plateNum: '', //输入的车牌号
|
cursor: '', //输入焦点gif地址
|
isCursor: true, //是否显示焦点
|
energy: '', //新能源图标的地址
|
noVal: true
|
};
|
},
|
watch:{
|
plateNum(newV,oldV){
|
if(newV.length==8){
|
this.noVal = false
|
}else{
|
this.noVal = true
|
}
|
}
|
},
|
onLoad(option) {},
|
onHide() {
|
//恢复初始化
|
this.plateNum = '';
|
},
|
mounted() {
|
//初始化
|
// this.$refs.plate.init();
|
this.cursor = cursor;
|
this.energy = energy;
|
|
this.carInputClick();
|
},
|
methods: {
|
/**
|
* @desc 车牌选择关闭和打开
|
*/
|
showOrHide(falg) {
|
this.isCursor = falg;
|
},
|
/**
|
* @desc 显示车牌选择器
|
*/
|
carInputClick() {
|
this.$refs.plate.show();
|
},
|
updateStorage(){
|
let user = JSON.parse(uni.getStorageSync('user'));
|
user.plateNos.push(this.plateNum);
|
uni.setStorageSync('user',JSON.stringify(user));
|
},
|
save() {
|
let _this = this;
|
const {userId} = JSON.parse(uni.getStorageSync('user'));
|
//输入了正确的车牌才执行请求
|
if (this.plateNum.length > 6) {
|
this.$refs.plate.close();
|
this.$api.syncRequest({
|
url: '/basic/api/user/addPlateNo',
|
method: 'POST',
|
data: {userId,plateNo:_this.plateNum}
|
}).then(res=>{
|
if(res.data.success){
|
|
uni.showToast({
|
icon:'none',
|
title: '车牌:'+_this.plateNum+'添加成功',
|
duration: 1500,
|
complete() {
|
_this.updateStorage();
|
}
|
});
|
setTimeout(()=>{
|
uni.navigateTo({
|
url:'/pages/myCarList/myCarList'
|
})
|
},2000)
|
|
}
|
|
})
|
|
} else {
|
uni.showToast({
|
title: '请输入正确的车牌号',
|
duration: 2000
|
});
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
uni-page-wrapper,uni-page-body{
|
height: 100%;
|
}
|
.content{
|
height: 100%;
|
background-color: #fbfbfb;
|
.top{
|
padding: 40rpx 60rpx;
|
text{
|
line-height: 80rpx;
|
font-size: 36rpx;
|
color: #bfbfbf;
|
}
|
.search-car-input{
|
.split-input{
|
display: flex;
|
.split-cell{
|
width: 64rpx;
|
height: 64rpx;
|
text-align: center;
|
line-height: 64rpx;
|
border: 1rpx solid #dadada;
|
margin-right:7rpx;
|
&.new-energe{
|
background: url(../../static/addCar/new.png) no-repeat center;
|
background-size: 100%;
|
}
|
&.focus-cell{
|
animation: focus-gif .5s infinite alternate-reverse;
|
}
|
&.separator{
|
position: relative;
|
margin-right:50rpx;
|
&:after{
|
content:'.';
|
position: absolute;
|
left: 65rpx;
|
top: -26rpx;
|
font-size: 36px;
|
width: 50rpx;
|
height: 64rpx;
|
color: #999;
|
}
|
}
|
}
|
}
|
.energy{
|
image{
|
width: 90rpx;
|
}
|
}
|
}
|
uni-button[disabled]{
|
opacity: .5;
|
}
|
.save{
|
margin-top: 120rpx;
|
background-color: #0bbf71;
|
color: #fff;
|
|
}
|
}
|
}
|
@keyframes focus-gif{
|
from{
|
border-color: #c6f0ff;
|
}
|
to{
|
border-color: #3ec5ff;
|
}
|
}
|
</style>
|
