1

src/views/detailPW.vue

@@ -10,12 +10,22 @@
           <van-field v-model="form.content" rows="2" autosize label="信息内容" type="textarea" placeholder="请输入信息内容" />
           <van-field name="uploader" label="图片">
             <template #input>
-              <van-uploader :fileList="img_url" :max-count="1" @delete="file => toDelete(file, 'img_url')" :after-read="file => toUpload(file, 'img_url')" />
+              <van-uploader
+                :fileList="form.img_url"
+                :max-count="6"
+                @delete="file => toDelete(file, 'img_url')"
+                :after-read="file => toUpload(file, 'img_url')"
+              />
             </template>
           </van-field>
           <van-field name="uploader" label="视频">
             <template #input>
-              <van-uploader :fileList="file_url" :max-count="1" @delete="file => toDelete(file, 'file_url')" :after-read="file => toUpload(file, 'file_url')" />
+              <van-uploader
+                :fileList="form.file_url"
+                :max-count="1"
+                @delete="file => toDelete(file, 'file_url')"
+                :after-read="file => toUpload(file, 'file_url')"
+              />
             </template>
           </van-field>
           <div style="margin: 16px;">
@@ -42,8 +52,6 @@ export default {
       dockList: [],
       showPicker: false,
       form: {},
-      img_url: [],
-      file_url: [],
     };
   },
   created() {
@@ -60,27 +68,17 @@ export default {
       }
     },
     async onSubmit() {
-      let data = this.getFile(this.form);
+      let data = this.form;
       let res = await this.create(data);
       if (this.$checkRes(res)) {
-        this.$notify({
-          message: '信息上传成功',
-          type: 'success',
-        });
+        this.$notify({ message: '信息上传成功', type: 'success' });
         this.form = {};
       } else {
-        this.$notify({
-          message: res.errmsg,
-          type: 'danger',
-        });
+        this.$notify({ message: res.errmsg, type: 'danger' });
       }
     },
     onConfirm(value) {
-      let data = {
-        user_id: value.user_id,
-        dock_id: value._id,
-        title: value.title,
-      };
+      let data = { user_id: value.user_id, dock_id: value._id, title: value.title, img_url: [], file_url: [] };
       this.$set(this, `form`, data);
       this.showPicker = false;
     },
@@ -88,22 +86,15 @@ export default {
       // 上传,赋值
       const res = await this.upload({ file, dir: 'file' });
       if (this.$checkRes(res)) {
-        this.$set(this, model, [{ name: res.name, url: res.uri }]);
+        let data = _.cloneDeep(this.form[model]);
+        let file = { name: res.name, url: res.uri };
+        data.push(file);
+        this.$set(this.form, model, data);
       }
     },
     toDelete(file, model) {
-      const index = this[model].findIndex(f => _.isEqual(f, file));
-      this[model].splice(index, 1);
-    },
-    // 处理文件
-    getFile(data) {
-      let img_url = this.img_url.find(i => i);
-      if (img_url) data.img_url = img_url.url;
-      else data.img_url = '';
-      let file_url = this.file_url.find(i => i);
-      if (file_url) data.file_url = file_url.url;
-      else data.file_url = '';
-      return data;
+      const index = this.form[model].findIndex(f => _.isEqual(f, file));
+      this.form[model].splice(index, 1);
     },
   },
   computed: {

src/views/live/onAchieve/parts/imgtext_1.vue

@@ -10,15 +10,20 @@
           <van-col span="24" class="brief">
             {{ item.content }}
           </van-col>
-          <van-col span="24" class="image" v-if="item.img_url">
-            <el-image :src="item.img_url" class="imagelist"></el-image>
+          <van-col span="24" class="image" v-if="item.img_url.length > 0">
+            <van-col span="8" class="imagelist" v-for="(item, index) in item.img_url" :key="index" @click.native="imgBtn(item.url)">
+              <el-image :src="item.url"></el-image>
+            </van-col>
           </van-col>
-          <van-col span="24" class="video" v-if="item.file_url">
+          <van-col span="24" class="video" v-if="item.file_url.length > 0">
             <el-link :href="item.file_url" target="_blank" :underline="false">视频播放</el-link>
           </van-col>
         </van-col>
       </van-col>
     </van-row>
+    <van-dialog v-model="show" class="show" title="图片" :show-confirm-button="false" :close-on-click-overlay="true" :show-cancel-button="true">
+      <img :src="img_url" />
+    </van-dialog>
   </div>
 </template>
 
@@ -33,6 +38,8 @@ export default {
   data: function() {
     return {
       list: [],
+      show: false,
+      img_url: '',
     };
   },
   async created() {
@@ -52,6 +59,10 @@ export default {
       let newDate = moment(val).format('hh:mm');
       if (newDate) return newDate;
     },
+    imgBtn(data) {
+      this.$set(this, `img_url`, data);
+      this.show = true;
+    },
   },
   computed: {
     ...mapState(['user']),
@@ -101,9 +112,23 @@ export default {
     }
     .image {
       .imagelist {
-        width: 100%;
+        padding: 5px 5px 5px 0;
+        .el-image {
+          width: 100%;
+          height: 80px;
+          border-radius: 5px;
+        }
       }
     }
   }
 }
+.show {
+  /deep/.van-dialog__content {
+    padding: 10px;
+  }
+  img {
+    width: 100%;
+    height: 400px;
+  }
+}
 </style>