1

admin/src/views/qa/qa.vue

@@ -82,10 +82,15 @@
             :show-file-list="false"
             :on-success="handleAvatarSuccess"
           >
-            <img style="width: 100px;height: 100px;" v-if="imageUrl" :src="imageUrl" class="avatar" alt="">
+          <div v-if="anchors.img_zip" class="img-box">
-            <i v-else class="el-icon-plus avatar-uploader-icon" />
+            <i @click.stop="handleClose('img_zip')" class="close el-icon-close" />
+            <i v-if="!checkIfUrlContainsImage(anchors.img_zip)" class="el-icon-folder" />
+            <img v-else style="width: 100px;height: 100px;" :src="anchors.img_zip" class="avatar" alt="">
+          </div>
+            <i v-else class="el-icon-plus avatar-uploader-icon"/>
           </el-upload>
-          <span style="color: red">(请上传zip格式的文件图片)</span>
+          <span>{{ anchors.img_zip }}</span>
+          <div style="color: red">(请上传zip格式的文件图片)</div>
         </el-form-item>
         <el-form-item label="上传行程">
           <el-upload
@@ -94,9 +99,14 @@
             :show-file-list="false"
             :on-success="handleSuccess"
           >
-            <img style="width: 100px;height: 100px;" v-if="imageUrls" :src="imageUrls" class="avatar" alt="">
+            <div v-if="anchors.trip_zip" class="img-box">
-            <i v-else class="el-icon-plus avatar-uploader-icon" />
+              <i @click.stop="handleClose('trip_zip')" class="close el-icon-close" />
+              <i v-if="!checkIfUrlContainsImage(anchors.trip_zip)" class="el-icon-folder" />
+              <img v-else style="width: 100px;height: 100px;" :src="anchors.trip_zip" class="avatar" alt="">
+            </div>
+              <i v-else class="el-icon-plus avatar-uploader-icon"/>
           </el-upload>
+          <span>{{ anchors.trip_zip }}</span>
           <span style="color: red">(本行程请上传,ppt,word,pdf格式的文件)</span>
         </el-form-item>
       </el-form>
@@ -154,10 +164,15 @@
             :show-file-list="false"
             :on-success="handleAvatarSuccess"
           >
-            <img style="width: 100px;height: 100px;" v-if="imageUrl" :src="imageUrl" class="avatar" alt="">
+          <div v-if="anchors.img_zip" class="img-box">
-            <i v-else class="el-icon-plus avatar-uploader-icon" />
+            <i @click.stop="handleClose('img_zip')" class="close el-icon-close" />
+            <i v-if="!checkIfUrlContainsImage(anchors.img_zip)" class="el-icon-folder" />
+            <img v-else style="width: 100px;height: 100px;" :src="anchors.img_zip" class="avatar" alt="">
+          </div>
+            <i v-else class="el-icon-plus avatar-uploader-icon"/>
           </el-upload>
-          <span style="color: red">(请上传zip格式的文件图片)</span>
+          <span>{{ anchors.img_zip }}</span>
+          <div style="color: red">(请上传zip格式的文件图片)</div>
         </el-form-item>
         <el-form-item label="上传行程">
           <el-upload
@@ -166,10 +181,15 @@
             :show-file-list="false"
             :on-success="handleSuccess"
           >
-            <img style="width: 100px;height: 100px;" v-if="imageUrls" :src="imageUrls" class="avatar" alt="">
+            <div v-if="anchors.trip_zip" class="img-box">
-            <i v-else class="el-icon-plus avatar-uploader-icon" />
+              <i @click.stop="handleClose('trip_zip')" class="close el-icon-close" />
+              <i v-if="!checkIfUrlContainsImage(anchors.trip_zip)" class="el-icon-folder" />
+              <img v-else style="width: 100px;height: 100px;" :src="anchors.trip_zip" class="avatar" alt="">
+            </div>
+              <i v-else class="el-icon-plus avatar-uploader-icon"/>
           </el-upload>
-          <span style="color: red">(本行程请上传,ppt,word,pdf格式的文件)</span>
+          <span>{{ anchors.trip_zip }}</span>
+          <div style="color: red">(本行程请上传,ppt,word,pdf格式的文件)</div>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -206,8 +226,6 @@ export default {
       dialogCreate: false,
       dialogEdit: false,
       item: {},
-      imageUrl:'',
-      imageUrls:'',
       anchors: {
         qaQuestions:[]
       },
@@ -222,6 +240,13 @@ export default {
     this.onChange()
   },
   methods: {
+    checkIfUrlContainsImage(url) {
+      const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.svg', '.webp'];
+      return imageExtensions.some(extension => url.toLowerCase().endsWith(extension));
+    },
+    handleClose(val){
+      this.anchors[val] = ''
+    },
     handleAdd(){
       this.anchors.qaQuestions.push({
         sort:this.anchors.qaQuestions[this.anchors.qaQuestions.length-1].sort+1,
@@ -250,13 +275,12 @@ export default {
       })
     },
     handleAvatarSuccess(res, file) {
-      this.imageUrl = URL.createObjectURL(file.raw)
+      this.anchors.img_zip = URL.createObjectURL(file.raw)
-      this.anchors.img_zip = this.imageUrl
+      // this.anchors.img_zip = this.img_zip
-      console.log(this.imageUrl);
     },
     handleSuccess(res, file) {
-      this.imageUrls = URL.createObjectURL(file.raw)
+      this.anchors.trip_zip = URL.createObjectURL(file.raw)
-      this.anchors.trip_zip = this.imageUrls
+      // this.anchors.trip_zip = this.trip_zip
     },
     onAdd() {
       this.anchors = {
@@ -266,6 +290,8 @@ export default {
           content: ''
         }]
       } // 初始化时默认排序值为0
+      this.anchors.img_zip = ''
+      this.anchors.trip_zip = ''
       this.dialogCreate = true
     },
     onEdit(item) {
@@ -281,6 +307,8 @@ export default {
       }else{
         this.anchors = { ...item}
       }
+      this.anchors.img_zip = item.img_zip
+      this.anchors.trip_zip = item.trip_zip
       this.dialogEdit = true
     },
     onSave() {
@@ -337,6 +365,20 @@ export default {
 </script>
 
 <style scoped>
+.img-box{
+  position: relative;
+}
+.el-icon-folder{
+  color: #409EFF !important;
+  font-size: 100px;
+}
+.close{
+  position: absolute;
+  top: -10px;
+  right: -8px;
+  font-size: 18px;
+  color: #409EFF;
+}
 .qa-desc{
   display: flex;
 }
@@ -390,6 +432,7 @@ export default {
   height: 100px;
   line-height: 100px;
   text-align: center;
+  position: relative;
 }
 </style>
 <style src="@wangeditor/editor/dist/css/style.css"></style>