style: 车牌管理

src/constants.js

@@ -36,7 +36,7 @@ const USER_LIST_ITEM_EDIT_OBJ = {
 }
 
 const LICENSE_PLATE_TYPE_ARR = [
-	{value: 'ORDINARY_CAR_NO', label: '普通车辆'},
+	{value: 'ORDINARY_CAR_NO', label: '燃油车辆'},
 	{value: 'NEW_ENERGY_CAR_NO', label: '新能源'},
 	{value: 'SPECIAL_CAR_NO', label: '特殊车辆'},
 ]

src/pages/parkingFee/list.js

@@ -514,3 +514,16 @@ export const myParkOrderListByIds = {
     ],
   },
 };
+
+export const vehicles = {
+  code: '000000',
+  message: '请求成功!',
+  data: [
+    {
+      id: '8a84811183d456100183e94c27ac0000',
+      vehicleNo: '京111111',
+      licensePlateType: 'ORDINARY_CAR_NO',
+      createTime: '2022-10-18 12:13:46',
+    },
+  ],
+};

src/pages/parkingFee/vehicleManagement.vue

@@ -1,6 +1,7 @@
 <template>
   <scroll-view scroll-y="true" class="scroll-Y">
-    <authorize ref="authorize"></authorize>
+    <!-- 登录校验 -->
+    <!-- <authorize ref="authorize"></authorize> -->
     <div class="wrap">
       <div v-if="custTypeId === 0" class="wrap_plate">我的车牌</div>
       <div v-else class="wrap_plate">车牌号绑定</div>
@@ -17,23 +18,27 @@
           <div class="plate_plate_index plate_plate_index2">{{
           item.vehicleNo | formatCarno
           }}</div>
-          <div class="plate_plate_index plate_plate_index3">车牌类型</div>
-          <div class="plate_tag-icon" :class="
+          <div class="plate_plate_index plate_plate_index3 bb">
+            <img class="car-icon" :src="require(`./static/images/icon-carType.png`)" />
+            <div>车牌类型</div>
+            <div class="licensePlateTypeDesc">{{ item.licensePlateTypeDesc }}</div>
+          </div>
+          <!-- <div class="plate_tag-icon" :class="
             item.licensePlateType === 'NEW_ENERGY_CAR_NO'
               ? 'plate_tag_icon_green'
               : item.licensePlateType === 'ORDINARY_CAR_NO'
               ? 'plate_tag_icon_blue'
               : ''
-          " v-if="custTypeId > 0"></div>
+          " v-if="custTypeId > 0"></div> -->
           <div class="plate_plate_index plate_plate_index4">
-            <div class="">{{ item.licensePlateTypeDesc }}</div>
-            <div class="plate_plate_index4_index2">
-              <!-- <uni-icons type="compose" size="20" @click="toEdit(item)"></uni-icons> -->
-              <!-- <uni-icons type="trash" size="20" class="mrg-left-20" @click="toDelete(item)"></uni-icons> -->
+            <div class="item" @click.stop="toPay(item.vehicleNo)"><img src="./static/images/icon-edit.png" alt="" /><span>查询</span></div>
+            <div class="item" @click="toEdit(item)"><img src="./static/images/icon-find.png" alt="" /><span>编辑</span></div>
+            <div class="item" @click="toDelete(item)"><img src="./static/images/icon-del-white.png" alt="" /><span>删除</span></div>
+            <!-- <div class="plate_plate_index4_index2">
               <img src="static/images/money.png" @click="toPay(item.vehicleNo)" />
               <img src="static/images/update.png" class="mrg-left-20" @click="toEdit(item)" />
               <img src="static/images/delete.png" class="mrg-left-20" @click="toDelete(item)" />
-            </div>
+            </div> -->
           </div>
         </div>
       </div>
@@ -94,7 +99,7 @@ import { isCruMarketByKey } from '@/utils/location-util.js';
 import MemberCacheTool from '@/utils/member-cache-tool.js';
 import { REG_SOURCE } from '@/constants.js';
 import uni from '@/utils/uniHooks.js';
-import {vehicles as vehiclesList} from './list'
+import { vehicles as vehiclesList } from './list'
 
 export default {
   components: {
@@ -104,6 +109,8 @@ export default {
   computed: {
     ...mapState({
       custTypeId: (state) => state.custTypeId,
+      member: (state) => state.member,
+      groupId: (state) => state.groupId,
     }),
   },
   data() {
@@ -123,7 +130,7 @@ export default {
       title: '车牌管理', // 分享标题
       // desc: this.params.shareDescribe, // 分享描述
       imageUrl: '', // 分享图标
-      path: `/pages/parkingFee/vehicleManagement?mallid=${app.globalData.mallid}`,
+      path: `/pages/parkingFee/vehicleManagement?mallid=${this.mallid}`,
     }
   },
   // 分享朋友圈
@@ -135,7 +142,8 @@ export default {
       path: `/pages/parkingFee/vehicleManagement?mallid=${app.globalData.mallid}`,
     }
   },
-  async onLoad(option) {
+  async created() {
+    const option = this.$route.query;
     this.options = option
     await this.$onLaunched
     this.localimgPic = this.$staticPicUrl + '/wxminilocalimg/parkingFee/'
@@ -157,11 +165,12 @@ export default {
     this.preUrl = uni.getStorageSync('previousUrl')
     uni.setStorageSync('previousUrl', '/pages/parkingFee/vehicleManagement.vue')
   },
-  async onShow() {
-    await this.$onLaunched
+  async mounted() {
+    // await this.$onLaunched
     this.isBeijing = isCruMarketByKey('北京')
     const member = uni.getStorageSync('member')
-    if (member) {
+    console.log(167, this.member);
+    if (this.member) {
       this.getKipMemberVehicles()
     } else {
       const regSource = REG_SOURCE.PARKING
@@ -172,9 +181,10 @@ export default {
       if (this.options?.tpName) {
         app.globalData.tpName = this.options?.tpName
       }
-      this.$refs.authorize.login('/pages/parkingFee/parkingFee', () => {
-        this.getKipMemberVehicles()
-      })
+      // this.$refs.authorize.login('/pages/parkingFee/parkingFee', () => {
+      //   this.getKipMemberVehicles()
+      // })
+      this.getKipMemberVehicles()
     }
   },
   onUnload() {
@@ -210,11 +220,11 @@ export default {
       const openId = MemberCacheTool.getOpenId(app)
       const params = {
         carno,
-        mallid: app.globalData.mallid,
+        mallid: this.mallid,
         openid: openId,
-        vipcode: app.globalData.member?.vipcode,
-        mobile: app.globalData.member?.mobile,
-        groupId: app.globalData.groupId,
+        vipcode: this.member?.vipcode,
+        mobile: this.member?.mobile,
+        groupId: this.groupId,
         createuser: 'sys_miniprogram',
       }
       this.$md(params)
@@ -229,13 +239,13 @@ export default {
           uni.hideLoading()
           if (res.data.code === 0) {
             this.$router.push({
-              path: './parkingFeeDetail?carno=' + carno,
+              path: '/parkingFeeDetail?carno=' + carno,
             })
           } else if (res.data.code === 1) {
             // 当前车辆没有查到账单
             this.$router.push({
               path:
-                './parkingFeePayment?msg=' + res.data.msg + '&carno=' + carno,
+                '/parkingFeePayment?msg=' + res.data.msg + '&carno=' + carno,
             })
           } else if (res.data.code === 2) {
             // 月租车
@@ -274,7 +284,7 @@ export default {
         redirect_url: 'pages/parkingFee/vehicleAddOrEdit',
       })
       this.$router.push({
-        path: `/pages/parkingFee/vehicleAddOrEdit?id=${id}&carno=${vehicleNo}&carType=${carType}`,
+        path: `/vehicleAddOrEdit?id=${id}&carno=${vehicleNo}&carType=${carType}`,
       })
     },
     // 删除
@@ -330,9 +340,9 @@ export default {
         previous_url: this.preUrl || '',
         // 原previous_url: uni.getStorageSync('previousUrl') || ''
         // previous_url: 使用sdk预置参数$referrer,
-        $brand_id: uni.getStorageSync('groupId'),
+        $brand_id: this.groupId,
         redirect_url: params.redirect_url || '',
-        $location: uni.getStorageSync('mallid'),
+        $location: this.mallid,
         $channel: optionsQuery.channel || '',
         // $utm_lbs: this.optionsQuery.utm_lbs || '',
         $utm_channel: optionsQuery.utm_channel || '',
@@ -364,19 +374,19 @@ export default {
           if (result && result.code == '000000') {
             const data = result.data || []
             if (data && data.length > 0) {
-              data.forEach((item) => {
-                const curLicensePlateType = LICENSE_PLATE_TYPE_ARR.find(
-                  (e) => e.value == item.licensePlateType
-                )
-                if (curLicensePlateType) {
-                  item.licensePlateTypeDesc = curLicensePlateType.label
-                }
-              })
-              this.licensePlateList = data
+              // data.forEach((item) => {
+              //   const curLicensePlateType = LICENSE_PLATE_TYPE_ARR.find(
+              //     (e) => e.value == item.licensePlateType
+              //   )
+              //   if (curLicensePlateType) {
+              //     item.licensePlateTypeDesc = curLicensePlateType.label
+              //   }
+              // })
+              this.licensePlateList = this.setLicensePlateList(data)
             } else {
               this.licensePlateList = []
             }
-            this.licensePlateList = vehiclesList;
+            this.licensePlateList = vehiclesList.data;
           } else {
             const message = result.message || '获取信息失败'
             uni.showToast({
@@ -385,11 +395,25 @@ export default {
               icon: 'none',
             })
           }
+          console.log(380, this.licensePlateList);
         })
         .catch((err) => {
           uni.hideLoading()
           console.error(err)
         })
+      this.licensePlateList = this.setLicensePlateList(vehiclesList.data);
+    },
+    setLicensePlateList(data) {
+      if (!data.length) return []
+      return data.map((item) => {
+        const curLicensePlateType = LICENSE_PLATE_TYPE_ARR.find(
+          (e) => e.value == item.licensePlateType
+        )
+        if (curLicensePlateType) {
+          item.licensePlateTypeDesc = curLicensePlateType.label
+        }
+        return item
+      })
     }
   },
 }
@@ -428,6 +452,7 @@ export default {
       line-height: 50px;
       margin-bottom: 20px;
     }
+
     .desc {
       font-size: 30px;
       font-weight: 400;
@@ -466,8 +491,11 @@ export default {
     border-radius: 20px 128px 20px 20px;
 
     .plate_border {
-      border-radius: 17px 125px 17px 17px;
-      background-color: #fff;
+      // border-radius: 17px 125px 17px 17px;
+      background-color: #064C8A;
+      border-radius: 4px;
+      padding: 30px;
+      color: #ffffff;
 
       .plate_tag {
         display: inline-block;
@@ -497,7 +525,33 @@ export default {
 
     .plate_plate_index1,
     .plate_plate_index3 {
-      color: #666;
+      font-size: 28px;
+      font-weight: 400;
+      color: #FFFFFF;
+      line-height: 40px;
+      display: flex;
+      align-items: center;
+
+      .car-icon {
+        width: 40px;
+        height: 40px;
+        margin-right: 10px;
+      }
+
+      .licensePlateTypeDesc {
+        margin-left: 5px;
+        font-size: 28px;
+        font-weight: 500;
+        color: #FFFFFF;
+        line-height: 40px;
+        margin-left: 20px;
+      }
+
+      &.bb {
+        padding-bottom: 23px;
+        margin-bottom: 23px;
+        border-bottom: 1px solid #FFFFFF;
+      }
     }
 
     .plate_plate_index1 {
@@ -506,26 +560,57 @@ export default {
     }
 
     .plate_plate_index2 {
-      font-size: 50px;
       font-weight: 500;
+      font-size: 38px;
+      font-weight: 600;
+      color: #FFFFFF;
+      line-height: 53px;
     }
 
     .plate_plate_index4 {
-      padding-bottom: 20px;
-      font-size: 30px;
       display: flex;
-      align-items: center;
-      justify-content: space-between;
+      justify-content: space-around;
 
       .plate_plate_index4_index2 {
         width: 164px;
       }
 
-      img {
-        width: 32px;
-        height: 32px;
-        // margin-left: 25px;
-        // margin-top: 10px;
+      .item {
+        width: 33.33%;
+        font-size: 28px;
+        font-weight: 400;
+        color: #FFFFFF;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+
+        &::after {
+          content: '';
+          width: 1px;
+          height: 30px;
+          position: absolute;
+          right: 8%;
+          background-color: rgba(255, 255, 255, 0.3);
+        }
+
+        &:last-child {
+          &::after {
+            width: 0px;
+          }
+        }
+
+
+        img {
+          width: 45px;
+          height: 45px;
+          // margin-right: 10px;
+        }
+
+        span {
+          flex: 0 0 50%;
+          text-align: left;
+        }
       }
     }
   }
@@ -544,15 +629,15 @@ export default {
   }
 
   .linear-gradient-ORDINARY_CAR_NO {
-    background-image: linear-gradient(#29abe2, #2e3393);
+    // background-image: linear-gradient(#29abe2, #2e3393);
   }
 
   .linear-gradient-NEW_ENERGY_CAR_NO {
-    background-image: linear-gradient(#8bc63f, #026937);
+    // background-image: linear-gradient(#8bc63f, #026937);
   }
 
   .linear-gradient-SPECIAL_CAR_NO {
-    background-image: linear-gradient(#caa86e, #666666);
+    // background-image: linear-gradient(#caa86e, #666666);
   }
 
   .mrg-left-20 {

src/utils/location-util.js

@@ -1,6 +1,7 @@
 import MemberCacheTool from './member-cache-tool.js'
 import { getCustTypeId, isKOMiniApp } from './utils.js'
 import { ENV_LIST } from '@/constants.js'
+import uni from './uniHooks'
 
 export function getKipMarketListByCities(result) {
 	let marketList = [];