车牌

src/pages/parkingFee/vehicleAddOrEdit.vue

@@ -1,144 +1,218 @@
 <template>
-  <div style="background-color: #F4F7FF;">
+  <div style="background-color: #f4f7ff">
     <scroll-view class="wrap">
       <div class="car-number-box">
         <div :style="{ border: custTypeId === 0 ? '' : '1px solid #C69C6D' }">
-        <div class="switch-container" v-if="custTypeId === 0">
-          <div class="car-type">车牌类型</div>
-          <div class="switch">
-            <div v-for="(item, index) in licensePlateTypeArr" :key="index"
-              :class="index == carType ? 'switch-active' : ''" @click="toggleType(index)">
-              {{ item.label }}
+          <div class="switch-container" v-if="custTypeId === 0">
+            <div class="car-type">车牌类型</div>
+            <div class="switch">
+              <div
+                v-for="(item, index) in licensePlateTypeArr"
+                :key="index"
+                :class="index == carType ? 'switch-active' : ''"
+                @click="toggleType(index)"
+              >
+                {{ item.label }}
+              </div>
             </div>
           </div>
-        </div>
-        <!--  -->
-        <div class="switch-container-else" v-else>
-          <div v-for="(item, index) in licensePlateTypeArr" :key="index" class="switch-item"
-            :class="index == carType ? 'switch-selected' : 'switch-else'" @click="toggleType(index)">
-            <div :class="index == carType ? 'switch-blue-color' : 'switch-blue-bg'" v-if="custTypeId === 1">
-              {{ item.label }}
-            </div>
-            <div :class="index == carType ? 'switch-green-color' : 'switch-green-bg'" v-if="custTypeId === 2">
-              {{ item.label }}
+          <!--  -->
+          <div class="switch-container-else" v-else>
+            <div
+              v-for="(item, index) in licensePlateTypeArr"
+              :key="index"
+              class="switch-item"
+              :class="index == carType ? 'switch-selected' : 'switch-else'"
+              @click="toggleType(index)"
+            >
+              <div
+                :class="
+                  index == carType ? 'switch-blue-color' : 'switch-blue-bg'
+                "
+                v-if="custTypeId === 1"
+              >
+                {{ item.label }}
+              </div>
+              <div
+                :class="
+                  index == carType ? 'switch-green-color' : 'switch-green-bg'
+                "
+                v-if="custTypeId === 2"
+              >
+                {{ item.label }}
+              </div>
+              <div class="switch-line" v-if="index == carType"></div>
             </div>
-            <div class="switch-line" v-if="index == carType"></div>
-          </div>
-        </div>
-        <div class="input-box" :style="{ margin: custTypeId === 0 ? '' : '0 44px 0 35px' }">
-          <div class="li" @click="clickShowKeyboard(0)" :style="{
-            color:
-              custTypeId === 0
-                ? '#333'
-                : custTypeId === 1
-                ? '#333 '
-                : '#333',
-          }" :class="[active === 0 ? 'active' : '']">
-            {{ numArr[0] }}
-          </div>
-          <div class="li" @click="clickShowKeyboard(1)" :style="{
-            color:
-              custTypeId === 0
-                ? '#333'
-                : custTypeId === 1
-                ? '#333 '
-                : '#333',
-          }" :class="[active === 1 ? 'active' : '']">
-            {{ numArr[1] }}
-          </div>
-          <div class="dot" :style="{
-            color:
-              custTypeId === 0
-                ? '#333'
-                : custTypeId === 1
-                ? '#333 '
-                : '#333',
-          }">
-            ·
-          </div>
-          <div class="li" @click="clickShowKeyboard(2)" :style="{
-            color:
-              custTypeId === 0
-                ? '#333'
-                : custTypeId === 1
-                ? '#333 '
-                : '#333',
-          }" :class="[active === 2 ? 'active' : '']">
-            {{ numArr[2] }}
-          </div>
-          <div class="li" @click="clickShowKeyboard(3)" :style="{
-            color:
-              custTypeId === 0
-                ? '#333'
-                : custTypeId === 1
-                ? '#333 '
-                : '#333',
-          }" :class="[active === 3 ? 'active' : '']">
-            {{ numArr[3] }}
           </div>
-          <div class="li" @click="clickShowKeyboard(4)" :style="{
-            color:
-              custTypeId === 0
-                ? '#333'
-                : custTypeId === 1
-                ? '#333 '
-                : '#333',
-          }" :class="[active === 4 ? 'active' : '']">
-            {{ numArr[4] }}
-          </div>
-          <div class="li" @click="clickShowKeyboard(5)" :style="{
-            color:
-              custTypeId === 0
-                ? '#333'
-                : custTypeId === 1
-                ? '#333 '
-                : '#333',
-          }" :class="[active === 5 ? 'active' : '']">
-            {{ numArr[5] }}
-          </div>
-          <div class="li" @click="clickShowKeyboard(6)" :style="{
-            color:
-              custTypeId === 0
-                ? '#333'
-                : custTypeId === 1
-                ? '#333 '
-                : '#333',
-          }" :class="[active === 6 ? 'active' : '']">
-            {{ numArr[6] }}
-          </div>
-          <div v-if="carType == 1" class="li" @click="clickShowKeyboard(7)" :style="{
-            color:
-              custTypeId === 0
-                ? '#333'
-                : custTypeId === 1
-                ? '#333 '
-                : '#333',
-          }" :class="[active === 7 ? 'active' : '']">
-            <span v-if="numArr[7]">{{ numArr[7] }}</span>
+          <div
+            class="input-box"
+            :style="{ margin: custTypeId === 0 ? '' : '0 44px 0 35px' }"
+          >
+            <div
+              class="li"
+              @click="clickShowKeyboard(0)"
+              :style="{
+                color:
+                  custTypeId === 0
+                    ? '#333'
+                    : custTypeId === 1
+                    ? '#333 '
+                    : '#333',
+              }"
+              :class="[active === 0 ? 'active' : '']"
+            >
+              {{ numArr[0] }}
+            </div>
+            <div
+              class="li"
+              @click="clickShowKeyboard(1)"
+              :style="{
+                color:
+                  custTypeId === 0
+                    ? '#333'
+                    : custTypeId === 1
+                    ? '#333 '
+                    : '#333',
+              }"
+              :class="[active === 1 ? 'active' : '']"
+            >
+              {{ numArr[1] }}
+            </div>
+            <div
+              class="dot"
+              :style="{
+                color:
+                  custTypeId === 0
+                    ? '#333'
+                    : custTypeId === 1
+                    ? '#333 '
+                    : '#333',
+              }"
+            >
+              ·
+            </div>
+            <div
+              class="li"
+              @click="clickShowKeyboard(2)"
+              :style="{
+                color:
+                  custTypeId === 0
+                    ? '#333'
+                    : custTypeId === 1
+                    ? '#333 '
+                    : '#333',
+              }"
+              :class="[active === 2 ? 'active' : '']"
+            >
+              {{ numArr[2] }}
+            </div>
+            <div
+              class="li"
+              @click="clickShowKeyboard(3)"
+              :style="{
+                color:
+                  custTypeId === 0
+                    ? '#333'
+                    : custTypeId === 1
+                    ? '#333 '
+                    : '#333',
+              }"
+              :class="[active === 3 ? 'active' : '']"
+            >
+              {{ numArr[3] }}
+            </div>
+            <div
+              class="li"
+              @click="clickShowKeyboard(4)"
+              :style="{
+                color:
+                  custTypeId === 0
+                    ? '#333'
+                    : custTypeId === 1
+                    ? '#333 '
+                    : '#333',
+              }"
+              :class="[active === 4 ? 'active' : '']"
+            >
+              {{ numArr[4] }}
+            </div>
+            <div
+              class="li"
+              @click="clickShowKeyboard(5)"
+              :style="{
+                color:
+                  custTypeId === 0
+                    ? '#333'
+                    : custTypeId === 1
+                    ? '#333 '
+                    : '#333',
+              }"
+              :class="[active === 5 ? 'active' : '']"
+            >
+              {{ numArr[5] }}
+            </div>
+            <div
+              class="li"
+              @click="clickShowKeyboard(6)"
+              :style="{
+                color:
+                  custTypeId === 0
+                    ? '#333'
+                    : custTypeId === 1
+                    ? '#333 '
+                    : '#333',
+              }"
+              :class="[active === 6 ? 'active' : '']"
+            >
+              {{ numArr[6] }}
+            </div>
+            <div
+              v-if="carType == 1"
+              class="li"
+              @click="clickShowKeyboard(7)"
+              :style="{
+                color:
+                  custTypeId === 0
+                    ? '#333'
+                    : custTypeId === 1
+                    ? '#333 '
+                    : '#333',
+              }"
+              :class="[active === 7 ? 'active' : '']"
+            >
+              <span v-if="numArr[7]">{{ numArr[7] }}</span>
+            </div>
           </div>
         </div>
-       
-      </div>
 
-      <div class="reminder">
-        <div class="reminder-title">温馨提示:</div>
-        <div class="reminder-content">
-          ·用户可以添加多个"燃油车牌号"或"新能源车牌号"
+        <div class="reminder">
+          <div class="reminder-title">温馨提示:</div>
+          <div class="reminder-content">
+            ·用户可以添加多个"燃油车牌号"或"新能源车牌号"
+          </div>
+          <div class="reminder-content">·用户可以更改或删除已经绑定车牌</div>
         </div>
-        <div class="reminder-content">·用户可以更改或删除已经绑定车牌</div>
       </div>
-      </div>
-
     </scroll-view>
     <div class="btn-box">
       <div class="btnpb"></div>
-      <div class="confirm-btn" :class="disabledBtn ? 'disabled-btn' : ''" :disabled="disabledBtn"
-          @click="handleAddLicensePlateByKipMember" >
-          确认添加
-        </div>
+      <div
+        class="confirm-btn"
+        :class="disabledBtn ? 'disabled-btn' : ''"
+        :disabled="disabledBtn"
+        @click="handleAddLicensePlateByKipMember"
+      >
+        确认添加
+      </div>
     </div>
-    <plate-number ref="plateKeyboard" :carType="carType" :active="active" :ind="ind" :numArr="numArr"
-      @carnoArr="updateCarno"></plate-number>
+    <plate-number
+      ref="plateKeyboard"
+      :carType="carType"
+      :active="active"
+      :ind="ind"
+      :numArr="numArr"
+      @carnoArr="updateCarno"
+    ></plate-number>
   </div>
 </template>
 
@@ -186,10 +260,14 @@ export default {
     this.preUrl = uni.getStorageSync('previousUrl');
     uni.setStorageSync('previousUrl', '/pages/parkingFee/vehicleAddOrEdit.vue');
   },
-  onShow() { },
+  onShow() {},
   computed: {
     disabledBtn() {
-      console.log(190, this.numArr, this.numArr.findIndex((val) => !val));
+      console.log(
+        190,
+        this.numArr,
+        this.numArr.findIndex((val) => !val)
+      );
       return this.numArr.findIndex((val) => !val) !== -1;
     },
     ...mapState({
@@ -288,13 +366,14 @@ export default {
       console.log(288, this.carInfo.id);
       if (this.carInfo.id) {
         params.id = this.carInfo.id;
-        kipModifyMemberVehicles(params, JSON.parse(uni.getStorageSync('handleUser')))
+        kipModifyMemberVehicles(
+          params,
+          JSON.parse(uni.getStorageSync('handleUser'))
+        )
           .then((result) => {
             uni.hideLoading();
             console.log(292, result);
 
-
-            
             // result && result.code == '000000'
             // return
             // const result = resp.data;
@@ -332,10 +411,12 @@ export default {
             });
           });
       } else {
-        kipAddMemberVehicles(params, JSON.parse(uni.getStorageSync('handleUser')))
+        kipAddMemberVehicles(
+          params,
+          JSON.parse(uni.getStorageSync('handleUser'))
+        )
           .then((result) => {
             uni.hideLoading();
-            console.log(332, resp);
             // const result = resp.data;
             if (result && result.code == '000000') {
               this.sensorsClick('$ClickVehicleAddOrEdit', {
@@ -348,7 +429,7 @@ export default {
                   duration: 1300,
                   icon: 'none',
                 });
-                setTimeout(function () {
+                setTimeout(() => {
                   this.$router.back();
                 }, 1500);
               }
@@ -363,6 +444,7 @@ export default {
           })
           .catch((err) => {
             uni.hideLoading();
+            console.log(366);
             console.error(err);
             uni.showToast({
               title: '绑定车牌失败',
@@ -376,21 +458,21 @@ export default {
     sensorsClick(eventName, params) {
       let optionsQuery = uni.getStorageSync('options_query');
       let fixedParams = {
-        cta_itemno: '',
-        cta_name: '',
-        previous_url: this.preUrl || '',
-        // 原previous_url: uni.getStorageSync('previousUrl') || ''
-        // previous_url: 使用sdk预置参数$referrer,
-        $brand_id: uni.getStorageSync('groupId'),
-        $location: uni.getStorageSync('mallid'),
-        $channel: optionsQuery.channel || '',
-        // $utm_lbs: this.optionsQuery.utm_lbs || '',
-        $utm_channel: optionsQuery.utm_channel || '',
-        $utm_method: optionsQuery.utm_method || '',
-        $utm_source: optionsQuery.utm_source || '',
-        $utm_function: optionsQuery.utm_function || '',
-        $utm_user: optionsQuery.utm_user || '',
-      },
+          cta_itemno: '',
+          cta_name: '',
+          previous_url: this.preUrl || '',
+          // 原previous_url: uni.getStorageSync('previousUrl') || ''
+          // previous_url: 使用sdk预置参数$referrer,
+          $brand_id: uni.getStorageSync('groupId'),
+          $location: uni.getStorageSync('mallid'),
+          $channel: optionsQuery.channel || '',
+          // $utm_lbs: this.optionsQuery.utm_lbs || '',
+          $utm_channel: optionsQuery.utm_channel || '',
+          $utm_method: optionsQuery.utm_method || '',
+          $utm_source: optionsQuery.utm_source || '',
+          $utm_function: optionsQuery.utm_function || '',
+          $utm_user: optionsQuery.utm_user || '',
+        },
         finalParams = Object.assign(fixedParams, params);
       this.$sensors.track(eventName, finalParams);
     },
@@ -401,13 +483,12 @@ export default {
 <style lang="less" scoped>
 .wrap {
   // padding: 30px;
-  
 
   .car-number-box {
     margin-top: 24px;
     padding: 30px;
-    background-color: #FAFBFF;
-    border: 1px solid #D8DAE0;
+    background-color: #fafbff;
+    border: 1px solid #d8dae0;
   }
 
   .switch-container-else {
@@ -521,7 +602,7 @@ export default {
       .switch-active {
         color: #fff;
         background-image: linear-gradient(to right, #7e4fa1, #433c7f);
-        background: #064C8A;
+        background: #064c8a;
       }
     }
   }
@@ -552,7 +633,7 @@ export default {
       justify-content: center;
       color: #333333;
       border-radius: 4px;
-      background-color: #F4F7FF;
+      background-color: #f4f7ff;
       margin-right: 26px;
 
       img {
@@ -597,9 +678,9 @@ export default {
   bottom: 0;
   right: 0;
   left: 0;
-  background-color: #F9F9FF;
+  background-color: #f9f9ff;
   padding: 30px;
-  box-shadow: 0px 13px 33px 0px rgba(190,187,187,0.2);
+  box-shadow: 0px 13px 33px 0px rgba(190, 187, 187, 0.2);
 
   &.btnpb {
     width: 100%;
@@ -607,7 +688,6 @@ export default {
     padding-bottom: env(safe-area-inset-bottom);
   }
 
-
   .confirm-btn {
     color: #fff;
     margin: 0 auto;
@@ -616,7 +696,7 @@ export default {
     line-height: 90px;
     font-size: 34px;
     text-align: center;
-    background: #064C8A;
+    background: #064c8a;
     border-radius: 45px;
   }
 
@@ -629,7 +709,7 @@ export default {
     font-size: 34px;
     opacity: 1;
     border-radius: 45px;
-    background: #D8DAE0;
+    background: #d8dae0;
     margin: 64px auto 31px;
   }
 
@@ -642,11 +722,11 @@ export default {
   }
 
   .disabled-btn {
-    background-color: #D8DAE0;
+    background-color: #d8dae0;
     background-image: none;
     font-size: 34px;
     font-weight: 400;
-    color: #FFFFFF;
+    color: #ffffff;
   }
 }
 </style>

src/pages/parkingFee/vehicleManagement.vue

@@ -359,6 +359,7 @@ export default {
               }).then(() => {
                 // on confirm
                 // this.doDelete();
+                this.getKipMemberVehicles();
               });
               // _this.$refs.deleteSuccessDialog.open()
               return;