suolue picture

src/views/collection/addCollection.vue

@@ -44,25 +44,51 @@
           <el-input v-model="message.collectionCount" style="width: 550px" placeholder="请输入藏品数量"></el-input>
         </el-form-item> 
         <el-form-item label="发行方:" prop="collectionPublisher">
-          <el-input v-model="message.collectionName" style="width: 550px" placeholder="请输入发行方"></el-input>
+          <el-input v-model="message.collectionPublisher" style="width: 550px" placeholder="请输入发行方"></el-input>
         </el-form-item> 
+        
+        <el-dialog :visible.sync="dialogVisible">
+          <img width="100%" :src="dialogImageUrl" alt="">
+        </el-dialog>
         <el-form-item label="藏品故事:" prop="collectionHistory">
-          <el-upload
-          class="avatar-uploader"
-          action="https://jsonplaceholder.typicode.com/posts/"
-          :show-file-list="false"
-          :on-success="handleAvatarSuccess"
-          :before-upload="beforeAvatarUpload"
-        >
-          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
-          <i
-            v-else
-            class="el-icon-plus avatar-uploader-icon"
-          ></i> </el-upload>
+            <el-upload
+          action="#"
+          list-type="picture-card"
+          :auto-upload="false">
+            <i slot="default" class="el-icon-plus"></i>
+            <div slot="file" slot-scope="{file}">
+              <img
+                class="el-upload-list__item-thumbnail"
+                :src="file.url" alt=""
+              >
+              <span class="el-upload-list__item-actions">
+                <span
+                  class="el-upload-list__item-preview"
+                  @click="handlePictureCardPreview(file)"
+                >
+                  <i class="el-icon-zoom-in"></i>
+                </span>
+                <span
+                  v-if="!disabled"
+                  class="el-upload-list__item-delete"
+                  @click="handleDownload(file)"
+                >
+                  <i class="el-icon-download"></i>
+                </span>
+                <span
+                  v-if="!disabled"
+                  class="el-upload-list__item-delete"
+                  @click="handleRemove(file)"
+                >
+                  <i class="el-icon-delete"></i>
+                </span>
+              </span>
+            </div>
+        </el-upload>
           <label for="">点击查看</label>
         </el-form-item> 
         <el-form-item>
-          <el-button type="primary" @click="submitForm('form')">提交</el-button>
+          <el-button type="primary" @click="addCollection('form')">提交</el-button>
           <el-button @click="resetForm('form')">重置</el-button>
           <el-button @click="importForm('form')">导入</el-button>
         </el-form-item>
@@ -94,23 +120,22 @@ import {addCollection} from '../../api/collection/collection.js'
             { required: true, message: '请导入藏品图片', trigger: 'blur' }
           ],
           collectionPrice: [
-            { required: true, message: '请导入藏品图片', trigger: 'blur' }
+            { required: true, message: '请输入藏品价格', trigger: 'blur' }
           ],
           collectionCount: [
-            { required: true, message: '请导入藏品图片', trigger: 'blur' }
+            { required: true, message: '请输入藏品数量', trigger: 'blur' }
           ],
           collectionPublisher: [
-            { required: true, message: '请导入藏品图片', trigger: 'blur' }
+            { required: true, message: '请输入发布人', trigger: 'blur' }
           ],
           collectionHistory: [
-            { required: true, message: '请导入藏品图片', trigger: 'blur' }
+            { required: true, message: '请输入藏品故事', trigger: 'blur' }
           ],
         }
     }
   },
   mounted() {
-    console.log( "-****" , this.message.collectionName);
-    console.log( "-****" , this.message.imageUrl);
+    
   },
   methods: {
         handleAvatarSuccess(res, file) {
@@ -131,6 +156,10 @@ import {addCollection} from '../../api/collection/collection.js'
       addCollection() { 
         console.log( "-****" , this.message.collectionName);
         console.log( "-****" , this.message.imageUrl);
+        console.log( "-****" , this.message.collectionPrice);
+        console.log( "-****" , this.message.collectionCount);
+        console.log( "-****" , this.message.collectionPublisher);
+        console.log( "-****" , this.message.collectionHistory);
         addCollection(this.collectionName) .then((res)=>{
           console.log(res);
         })