feat: 填写上报内容 添加上传中蒙版

pages/record-content/index.scss

@@ -317,3 +317,23 @@
   border-radius: 16rpx;
   overflow: hidden;
 }
+
+.photo_item--loading {
+  $size: 168rpx;
+
+  width: $size;
+  height: $size;
+  border-radius: 16rpx;
+  overflow: hidden;
+  background-color: #000;
+  position: relative;
+}
+
+.photo_item--loading::after {
+  content: '上传中...';
+  position: absolute;
+  top: 35%;
+  text-align: center;
+  color: #fff;
+  width: 100%;
+}

pages/record-content/index.vue

@@ -132,7 +132,9 @@
             <view class="tip">{{ !showActive ? null : '照片至少上传1张/视频20M以下' }}</view>
           </view>
           <view class="photo_list">
-            <view class="photo_item" bindtap="preview" v-for="(item, index) in photoList" :key="item.id" @click="previewVideo(item, index)">
+            <view class="photo_item" bindtap="preview" v-for="(item, index) in photoList" :key="item.id">
+              <view v-if="item.status === 'loading'" class="photo_item--loading"> </view>
+              <view v-else @click="previewVideo(item, index)">
                 <!-- <image mode="aspectFill" class="upload_img" src="{{item}}" /> -->
                 <image mode="aspectFill" v-if="item.type === 'image'" :src="item.url" style="display: block; width: 168rpx; height: 168rpx; border-radius: 16rpx" />
 
@@ -145,6 +147,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">
               <image mode="aspectFill" class="upload_icon" src="/static/icon/upload_icon@2x.png" />
             </view>
@@ -480,6 +483,13 @@ export default {
      */
     async onUpload(item) {
       const upLoad = async (file, type = 'image') => {
+        const media = {
+          id: uni.$u.guid(),
+          type,
+          url: '',
+          status: 'loading',
+        };
+        this.photoList.push(media);
         const [_temp0, { data }] = await uni.request({ url: '/api/qiniu/token' });
         const [_temp1, { data: res }] = await uni.uploadFile({
           url: data.upload_url,
@@ -489,11 +499,13 @@ export default {
           },
         });
         const { key } = JSON.parse(res);
-        this.photoList.push({
-          id: uni.$u.guid(),
-          type,
-          url: `${data.qn_domain}${key}`,
-        });
+        // this.photoList.push({
+        //   id: uni.$u.guid(),
+        //   type,
+        //   url: `${data.qn_domain}${key}`,
+        // });
+        media.url = `${data.qn_domain}${key}`;
+        media.status = 'finish';
         if (type === 'video') {
           this.photoList = this.photoList.map((value, index) => ({
             ...value,
@@ -506,7 +518,6 @@ export default {
         case 'image':
           uni.chooseImage({
             success: (result) => {
-              console.log(result);
               result.tempFiles.forEach((value) => {
                 upLoad(value);
               });
@@ -519,7 +530,6 @@ export default {
         case 'video':
           uni.chooseVideo({
             success: (result) => {
-              console.log(result);
               upLoad(result.tempFile, 'video');
             },
             fail: (result) => {