add new key

zhangzengfei

2021-09-16 38430ddb8612fce15a2f1c940f9bd57d4da3e70b

 pages/addCar/addCar.vue

@@ -1,49 +1,49 @@
<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">保&nbsp;存</button>

      </view>

		
      <!-- 引用车牌组件 -->

   <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">保&nbsp;存</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 {

   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: '', //新能源图标的地址

                energy: '', //新能源图标的地址
            noVal: true
            };
        },

      watch:{

         plateNum(newV,oldV){

            if(newV.length==8){

               this.noVal = false

            }else{

               this.noVal = true

            }

         }

        },
      watch:{
         plateNum(newV,oldV){
            if(newV.length==8){
               this.noVal = false
            }else{
               this.noVal = true
            }
         }
      },
        onLoad(option) {},
        onHide() {
@@ -54,8 +54,8 @@
            //初始化
            // this.$refs.plate.init();
            this.cursor = cursor;
            this.energy = energy;

     
            this.energy = energy;
     
            this.carInputClick();
        },
        methods: {
@@ -71,46 +71,46 @@
            carInputClick() {
                this.$refs.plate.show();
            },
            updateStorage(){

               let user = JSON.parse(uni.getStorageSync('user'));

               user.plateNos.push(this.plateNum);

               uni.setStorageSync('user',JSON.stringify(user));

            updateStorage(){
               let user = JSON.parse(uni.getStorageSync('user'));
               user.plateNos.push(this.plateNum);
               uni.setStorageSync('user',JSON.stringify(user));
            },
            save() {

            let _this = this;

            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

                    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
               });
                }
            }
@@ -118,76 +118,76 @@
    }
</script>

<style lang="scss" scoped>

   uni-page-wrapper,uni-page-body{

      height: 100%;

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

      }

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