feat(上报内容): 交通违法增加号牌种类

pages/record-content/index.vue

@@ -54,6 +54,19 @@
         </view>
         -->
 
+        <view class="report_box" style="margin-top: 50rpx;">
+          <view class="report_one" @click="selectNumberPlatesShow = true">
+            <view class="report_left">
+              <image mode="aspectFill" class="tep_icon" src="/static/icon/ic_rw_zhixing@2x.png" />
+              <view class="one">号牌种类</view>
+            </view>
+            <view class="report_right">
+              <view class="report_name">{{ numberPlateText }}</view>
+              <image mode="aspectFill" class="arrow_right" src="/static/icon/arrow_right@2x.png" />
+            </view>
+          </view>
+        </view>
+
         <!--        号牌号码-->
         <view class="step_box">
           <view class="tep_one">
@@ -439,6 +452,15 @@
         @cancel="showIllegalTime = false"
         @confirm="onIllegalTimeConfirm"
       />
+      <u-action-sheet
+        :actions="numberPlates"
+        :show="selectNumberPlatesShow"
+        cancelText="取消"
+        safeAreaInsetBottom
+        round="32rpx"
+        @close="selectNumberPlatesShow = false"
+        @select="onSelectNumberPlate"
+        />
     </view>
   </view>
 </template>
@@ -460,6 +482,15 @@ const typeMap = {
   dispersion: '渣土运输车辆未覆盖或沿途泄露、抛撒'
 }
 
+const numberPlateMap = new Map([
+  ['1', '大型汽车（黄底黑字）'],
+  ['2', '小型汽车（蓝底白字）'],
+  ['3', '大型新能源汽车（黄绿双拼色底黑字）'],
+  ['4', '小型新能源汽车（渐变绿底黑字）'],
+  ['5', '轻便摩托车（蓝底白字）'],
+  ['6', '普通摩托车（黄底黑字）']
+])
+
 export default {
   components: { CertificateTypeActionSheet, UploadActionSheet },
   data() {
@@ -509,6 +540,12 @@ export default {
         number_plate: '', // 号牌种类
         license_plate: '', // 车牌号码
       },
+      selectNumberPlatesShow: false,
+      numberPlateMap,
+      numberPlates: [...numberPlateMap.entries()].map(([value, name]) => ({
+        name,
+        value
+      })),
 
       mustUploadImageCount,
       map: {
@@ -599,6 +636,10 @@ export default {
     },
     videoFit() {
       return this.video.fullscreen ? 'contain' : 'cover'
+    },
+    numberPlateText() {
+      const name = this.numberPlateMap.get(this.IllegalForm.number_plate)
+      return name && name.slice(0, name.indexOf('（')) || '请选择'
     }
   },
 
@@ -656,6 +697,10 @@ export default {
       this.id = item.id;
     },
 
+    onSelectNumberPlate({ value }) {
+      this.IllegalForm.number_plate = value
+    },
+
     /**
      * 获取地理位置
      * @returns {Promise<void>}
@@ -835,11 +880,11 @@ export default {
       if (this.IllegalShow) {
         if (!this.IllegalForm.illegal_time) return t('请输入违法时间');
         if (!this.longitude) return t('请选择位置');
+        if (!this.IllegalForm.number_plate) return t('请输入号牌种类');
         if (!this.IllegalForm.license_plate) return t('请输入号牌号码');
         // if (!this.IllegalForm.jurisdiction) return t('请输入所属辖区');
         // if (!this.IllegalForm.IllegalType) return t('请输入违法类型');
         if (!this.IllegalForm.content) return t('请输入违法行为描述');
-        // if (!this.IllegalForm.number_plate) return t('请输入号牌种类');
         if (!this.photoList.length) return t(`请${this.uploadTitle}`);
         if (!this.realForm.name) return t('请输入真实姓名');
         if (!this.realForm.phone) return t('请输入电话号码');
@@ -978,4 +1023,21 @@ export default {
 ::v-deep .uni-video-cover {
   display: none;
 }
+
+::v-deep .u-action-sheet__item-wrap {
+  max-height: 80vh;
+  overflow: auto;
+}
+
+.report_one {
+  gap: 30rpx;
+}
+
+.report_left {
+  flex: 0 0 auto;
+}
+
+.report_right {
+  text-align: right;
+}
 </style>