Merge branch 'moss_bug'

* moss_bug:
  feat：商品新增编辑时图片预览

src/views/mallManagement/goods/goods_add/index.vue

@@ -92,11 +92,23 @@
           </el-col>
           <el-col :span="12">
             <el-form-item label="商品主图：" prop="imgUrl">
-              <el-upload class="avatar-uploader" style="height:122px" :action="baseURL + 'common/upload'" :headers="myHeaders"
+              <el-upload class="avatar-uploader imageListUpload" style="height: 0;" :action="baseURL + 'common/upload'" :headers="myHeaders"
                 :show-file-list="false" :on-success="uploadSuccess" :before-upload="beforeUpload">
-                <img v-if="step1Form.imgUrl" :src="step1Form.imgUrl" class="avatar">
-                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
               </el-upload>
+              <div class="images">
+                <div class="item">
+                  <div class="img">
+                    <el-image v-if="step1Form.imgUrl" ref="goodsImg" :src="step1Form.imgUrl" style="width: 120px; height: 120px" fit="cover" :preview-src-list="[step1Form.imgUrl]"></el-image>
+                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                    <div class="mask" v-if="step1Form.imgUrl">
+                      <div class="row">
+                        <div class="it" @click="previewGoodsImage()"><i class="el-icon-search"></i></div>
+                        <div class="it" @click="uploadGoodsImage()"><i class="el-icon-upload2"></i></div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
               <div class="tips">
                 <span>建议尺寸：800*800</span>
               </div>
@@ -125,9 +137,10 @@
               <div class="images">
                 <div class="item" v-for="(item, index) in step1Form.images" :key="index">
                   <div class="img">
-                    <el-image ref="img" :src="item.url" style="width: 120px; height: 120px" fit="cover"></el-image>
+                    <el-image :ref="`img${index}`" :src="item.url" style="width: 120px; height: 120px" fit="cover" :preview-src-list="[item.url]"></el-image>
                     <div class="mask">
                       <div class="row">
+                        <div class="it" @click="previewImage(index)"><i class="el-icon-search"></i></div>
                         <div class="it" @click="uploadImage(item.id)"><i class="el-icon-upload2"></i></div>
                         <div class="it" @click="deleteImage(index)"><i class="el-icon-delete"></i></div>
                       </div>
@@ -986,6 +999,14 @@ export default {
       }
     },
 
+    uploadGoodsImage() {
+      document.querySelector('.imageListUpload input').click();
+    },
+
+    previewGoodsImage() {
+      this.$refs.goodsImg.clickHandler()
+    },
+
     // 商品视频 - 上传成功
     uploadSuccess3(res, file) {
       this.step1Form.videoUrl = res.data.url;
@@ -1117,6 +1138,11 @@ export default {
       }
     },
 
+    // 轮播图 - 预览
+    previewImage(index) {
+      this.$refs[`img${index}`][0].clickHandler()
+    },
+
     // 轮播图 - 删除图片
     deleteImage(index) {
       this.step1Form.images.splice(index, 1);