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,18 +132,21 @@
             <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)">
-              <!-- <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" />
+            <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" />
+
+                <view v-else class="play-wrapper">
+                  <video :id="`myVideo${index}`" class="upload_img" :src="item.url" />
+                  <image src="/static/icon/ic_sj_bf@2x.png" mode="aspectFill" class="play-icon" />
+                </view>
+                <!--              <video class="upload_img" v-else :src="item.url" :show-fullscreen-btn="false" :show-play-btn="false" :show-center-play-btn="false" />-->
+                <!--              <image v-if="item.type === 'video'" src="/static/icon/ic_sj_bf@2x.png" mode="aspectFill" class="play-icon" />-->
 
-              <view v-else class="play-wrapper">
-                <video :id="`myVideo${index}`" class="upload_img" :src="item.url" />
-                <image src="/static/icon/ic_sj_bf@2x.png" mode="aspectFill" class="play-icon" />
+                <image @click.native.stop="cancel(item, index)" mode="aspectFill" class="upload_del" src="/static/icon/ic_zp_del@2x.png" />
               </view>
-              <!--              <video class="upload_img" v-else :src="item.url" :show-fullscreen-btn="false" :show-play-btn="false" :show-center-play-btn="false" />-->
-              <!--              <image v-if="item.type === 'video'" src="/static/icon/ic_sj_bf@2x.png" mode="aspectFill" class="play-icon" />-->
-
-              <image @click.native.stop="cancel(item, index)" mode="aspectFill" class="upload_del" src="/static/icon/ic_zp_del@2x.png" />
             </view>
             <view class="photo_upload" @click="upload">
               <image mode="aspectFill" class="upload_icon" src="/static/icon/upload_icon@2x.png" />
@@ -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) => {