feat(上报内容): 按示例适配可上传照片还是视频，只照片时限定数量 3 张

pages/record-content/UploadActionSheet.vue

@@ -5,20 +5,10 @@
 </template>
 
 <script>
-const actionsOptions = [
-  {
-    name: '图片',
-    type: 'image',
-  },
-  {
-    name: '视频',
-    type: 'video',
-  },
-];
-
 export default {
   name: 'UploadActionSheet',
   props: {
+    actionsOptions: Array,
     success: {
       type: Function,
       default: (item) => {},
@@ -27,7 +17,7 @@ export default {
   data() {
     return {
       show: false,
-      actionsOptions,
+      // actionsOptions,
     };
   },
   methods: {

pages/record-content/index.vue

@@ -65,7 +65,7 @@
         <view class="step_box">
           <view class="tep_one">
             <image mode="aspectFill" class="tep_icon" src="/static/icon/ic_rw_zp@2x.png" />
-            <view class="one">{{ !showActive ? null : '上传照片/视频' }}</view>
+            <view class="one">{{ !showActive ? null : uploadTitle }}</view>
           </view>
           <view class="photo_wrapper">
             <view class="photo_list">
@@ -85,7 +85,7 @@
                   <image @click.native.stop="cancel(item, index)" mode="aspectFill" class="upload_del" src="/static/icon/ic_zp_del@2x.png" />
                 </view>
               </view>
-              <view class="photo_upload" @click="upload">
+              <view v-if="isAllowUpload" class="photo_upload" @click="upload">
                 <image mode="aspectFill" class="upload_icon" src="/static/icon/upload_icon@2x.png" />
               </view>
             </view>
@@ -262,7 +262,7 @@
         <view class="step_box">
           <view class="tep_one">
             <image mode="aspectFill" class="tep_icon" src="/static/icon/ic_rw_zp@2x.png" />
-            <view class="one">{{ '上传照片/视频' }}</view>
+            <view class="one">{{ uploadTitle }}</view>
           </view>
           <view class="photo_wrapper">
             <view class="photo_list">
@@ -282,7 +282,7 @@
                   <image @click.native.stop="cancel(item, index)" mode="aspectFill" class="upload_del" src="/static/icon/ic_zp_del@2x.png" />
                 </view>
               </view>
-              <view class="photo_upload" @click="upload">
+              <view v-if="isAllowUpload" class="photo_upload" @click="upload">
                 <image mode="aspectFill" class="upload_icon" src="/static/icon/upload_icon@2x.png" />
               </view>
             </view>
@@ -424,7 +424,7 @@
 
       <!--      <van-action-sheet :show="show" :actions="typeList" bind:close="onClose" cancel-text="取消" bind:select="onSelect" />-->
       <u-action-sheet :actions="typeList" :show="show" cancelText="取消" safeAreaInsetBottom round="32rpx" @close="onActionSheetClose" @select="onActionSheetSelect" />
-      <UploadActionSheet ref="uploadActionSheet" :success="onUpload" />
+      <UploadActionSheet ref="uploadActionSheet" :actionsOptions="uploadActionsOptions" :success="onUpload" />
       <CertificateTypeActionSheet ref="certificateTypeActionSheet" :success="onCertificateTypeChange" />
       <u-datetime-picker
         :show="showIllegalTime"
@@ -447,6 +447,7 @@ import { baseEncode } from '@/utils/util';
 
 const maxUploadVideoSizeM = 50 // M
 const maxUploadVideoSize = maxUploadVideoSizeM * 1000 * 1000 // 单位 B，参考 macOS 用 1000 计算
+const mustUploadImageCount = 3
 
 const typeMap = {
   illegality: '交通违法举报',
@@ -489,7 +490,7 @@ export default {
         certificateText: '',
       },
       // 上传照片或视频类型
-      mediaType: ['image', 'video'],
+      // mediaType: ['image', 'video'],
       showActive: true,
 
       actionsOptions,
@@ -505,6 +506,7 @@ export default {
         license_plate: '', // 车牌号码
       },
 
+      mustUploadImageCount,
       map: {
         [typeMap.illegality]: {
 
@@ -544,6 +546,41 @@ export default {
     },
     isDispersion() {
       return this.activeItem.name === typeMap.dispersion
+    },
+    uploadActionsOptions() {
+      const { activeItem = {} } = this
+      const actionsOptions = [
+        {
+          name: '照片',
+          type: 'image',
+        },
+        {
+          name: '视频',
+          type: 'video',
+        }
+      ]
+
+      const res = []
+      if (activeItem.upload_image === 1) {
+        res.push(actionsOptions[0])
+      }
+      if (activeItem.upload_video === 1) {
+        res.push(actionsOptions[1])
+      }
+      return res
+    },
+    isOnlyAllowUploadOneType() {
+      return this.uploadActionsOptions.length === 1
+    },
+    isOnlyAllowUploadImages() {
+      const { isOnlyAllowUploadOneType, uploadActionsOptions: options } = this
+      return isOnlyAllowUploadOneType && options[0].type === 'image'
+    },
+    uploadTitle() {
+      return `上传${this.uploadActionsOptions.map(v => v.name).join('/')}`
+    },
+    isAllowUpload() {
+      return !this.isOnlyAllowUploadImages || this.photoList.length < mustUploadImageCount
     }
   },
 
@@ -641,6 +678,11 @@ export default {
         });
         return;
       }
+      if (this.isOnlyAllowUploadOneType) {
+        // 跳过选择上传照片还是视频
+        this.onUpload(this.uploadActionsOptions[0])
+        return
+      }
       this.$refs.uploadActionSheet.show = true;
     },
 
@@ -770,11 +812,16 @@ export default {
       }
 
       try {
+        const images = this.photoList.filter(({ type }) => type === 'image')
+        if (this.isOnlyAllowUploadImages) {
+          if (images.length !== mustUploadImageCount) {
+            return t(`请上传 ${mustUploadImageCount} 张照片`)
+          }
+        }
         await uni.$u.http.post('/api/photo_task/create', {
           title: this.title,
           type_id: this.id,
-          image_list: this.photoList
-            .filter(({ type }) => type === 'image')
+          image_list: images
             .map(({ url }) => url)
             .join(),
           video_list: this.photoList