src/views/collection/addCollection.vue

@@ -3,10 +3,11 @@
     
     <!-- <el-page-header @back="goBack" content="创建消息"></el-page-header> -->
     <div class="message-add-box">
-      <el-form :model="message" :rules="rules" ref="form" label-width="100px">
+      <el-form :model="message" :rules="rules" ref="form" label-width="125px">
       
-        <el-form-item label="藏品名称:" prop="collectionName">
-          <el-input v-model="message.collectionName" style="width: 550px" placeholder="请输入藏品名称"></el-input>
+        <el-form-item label="藏品名称（套）:" prop="collectionName" style="width: 550px">
+          <el-input v-model="message.collectionName" maxlength="20"
+          show-word-limit placeholder="请输入藏品名称"></el-input>
         </el-form-item> 
         <el-form-item label="藏品头图:" prop="imageUrl">
           <el-upload
@@ -16,81 +17,34 @@
           :on-success="handleAvatarSuccess"
           :before-upload="beforeAvatarUpload"
         >
-          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
+          <img v-if="message.imageUrl" :src="message.imageUrl" class="avatar" />
           <i
             v-else
             class="el-icon-plus avatar-uploader-icon"
           ></i> </el-upload>
         </el-form-item> 
 
-        <el-form-item label="3D模板:" prop="">
-          <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-form-item> 
-        <el-form-item label="藏品价格:" prop="collectionPrice">
-          <el-input v-model="message.collectionPrice" style="width: 550px" placeholder="请输入藏品价格"></el-input>
-        </el-form-item> 
-        <el-form-item label="藏品数量:" prop="collectionCount">
-          <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.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
-          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> 
+        <div class="down">
+            <div>
+            <span class="demonstration">设置套系时间 ：</span>
+            <el-date-picker
+              v-model="value2"
+              type="datetimerange"
+              align="right"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              :default-time="['12:00:00', '08:00:00']">
+            </el-date-picker>
+          </div>
+
+          <span class="demonstration">线下礼品兑换 ：</span>
+            <el-radio v-model="radio" label="1">可兑换</el-radio>
+            <el-radio v-model="radio" label="2">不可兑换</el-radio>
+        </div>
         <el-form-item>
           <el-button type="primary" @click="addCollection('form')">提交</el-button>
-          <el-button @click="resetForm('form')">重置</el-button>
-          <el-button @click="importForm('form')">导入</el-button>
+          <!-- <el-button @click="resetForm('form')">重置</el-button>
+          <el-button @click="importForm('form')">导入</el-button> -->
         </el-form-item>
       </el-form>
     </div>     
@@ -104,32 +58,22 @@ import {addCollection} from '../../api/collection/collection.js'
   
     data() {
       return {
+        radio: '1',
+        value2: '',
         message: {
           collectionName:'',
           imageUrl: '',
-          collectionPrice:'' , 
-          collectionCount:'' ,
-          collectionPublisher:'' , 
-          collectionHistory:'',
+          collectionTime:'' , 
         },
         rules:{
           collectionName: [
             { required: true, message: '请输入藏品名称', trigger: 'blur' }
           ],
           imageUrl: [
-            { required: true, message: '请导入藏品图片', trigger: 'blur' }
-          ],
-          collectionPrice: [
-            { required: true, message: '请输入藏品价格', trigger: 'blur' }
-          ],
-          collectionCount: [
-            { required: true, message: '请输入藏品数量', trigger: 'blur' }
+            { required: true, message: '请按照规范上传尺寸为750px*750px的图片', trigger: 'blur' }
           ],
-          collectionPublisher: [
-            { required: true, message: '请输入发布人', trigger: 'blur' }
-          ],
-          collectionHistory: [
-            { required: true, message: '请输入藏品故事', trigger: 'blur' }
+          collectionTime: [
+            { required: true, message: '请输入套系时间', trigger: 'blur' }
           ],
         }
     }
@@ -156,10 +100,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);
+        console.log( "-****" , this.message.collectionTime);
+        console.log( "-****" , this.radio);
+        console.log( "-****" , this.value2);
+        
         addCollection(this.collectionName) .then((res)=>{
           console.log(res);
         })
@@ -167,15 +111,39 @@ import {addCollection} from '../../api/collection/collection.js'
       resetForm(formName) {
         this.$refs[formName].resetFields();
       },
-      // importForm(formName) {
-        
-      // }
     }
 }
 </script>
 
 <style>
+.down{
+  margin-left: 15px;
+}
+.demonstration{
+    text-align: right;
+    vertical-align: middle;
+    font-size: 14px;
+    color: #606266;
+    line-height: 40px;
+    padding: 0 12px 0 0;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    text-align: right;
+    vertical-align: middle;
+    font-size: 14px;
+    color: #606266;
+    line-height: 40px;
+    padding: 0 12px 0 0;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    font-weight: 700;
+}
+.el-icon-plus{
+  margin-top: 85px;
+}
 .avatar-uploader .el-upload {
+    width: 370px; 
+    height: 370px;
     border: 1px dashed #d9d9d9;
     border-radius: 6px;
     cursor: pointer;