add

src/views/collection/addCollection.vue

@@ -3,10 +3,10 @@
     
     <!-- <el-page-header @back="goBack" content="创建消息"></el-page-header> -->
     <div class="message-add-box">
-      <el-form :model="message" :rules="rules" ref="form" label-width="125px">
+      <el-form :model="form" :rules="rules" ref="form" label-width="125px">
       
         <el-form-item label="藏品名称（套）:" prop="collectionName" style="width: 550px">
-          <el-input v-model="message.collectionName" maxlength="20"
+          <el-input v-model="form.collectionName" maxlength="20"
           show-word-limit placeholder="请输入藏品名称"></el-input>
         </el-form-item> 
         <el-form-item label="藏品头图:" prop="imageUrl">
@@ -17,30 +17,27 @@
           :on-success="handleAvatarSuccess"
           :before-upload="beforeAvatarUpload"
         >
-          <img v-if="message.imageUrl" :src="message.imageUrl" class="avatar" />
+          <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar" />
           <i
             v-else
             class="el-icon-plus avatar-uploader-icon"
           ></i> </el-upload>
         </el-form-item> 
-
-        <div class="down">
-            <div>
-            <span class="demonstration">设置套系时间 ：</span>
-            <el-date-picker
-              v-model="value2"
+        <el-form-item label="设置套系时间 ：" prop="collectionTime" style="width: 550px">
+          <el-date-picker
+              v-model="form.collectionTime"
               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-form-item label="线下礼品兑换 ：" prop="radio" style="width: 550px">
+            <el-radio v-model="form.radio" label="1">可兑换</el-radio>
+            <el-radio v-model="form.radio" label="2">不可兑换</el-radio>
+        </el-form-item> 
+          
         <el-form-item>
           <el-button type="primary" @click="addCollection('form')">提交</el-button>
           <!-- <el-button @click="resetForm('form')">重置</el-button>
@@ -58,12 +55,12 @@ import {addCollection} from '../../api/collection/collection.js'
   
     data() {
       return {
-        radio: '1',
-        value2: '',
-        message: {
+        
+        form:{
           collectionName:'',
           imageUrl: '',
           collectionTime:'' , 
+          radio: '1',
         },
         rules:{
           collectionName: [
@@ -75,6 +72,9 @@ import {addCollection} from '../../api/collection/collection.js'
           collectionTime: [
             { required: true, message: '请输入套系时间', trigger: 'blur' }
           ],
+          radio:[
+            {required : true , trigger: 'blur' }
+          ]
         }
     }
   },
@@ -83,27 +83,24 @@ import {addCollection} from '../../api/collection/collection.js'
   },
   methods: {
         handleAvatarSuccess(res, file) {
-          this.imageUrl = URL.createObjectURL(file.raw);
+          this.form.imageUrl = URL.createObjectURL(file.raw);
+        },
+          beforeAvatarUpload(file) {
+          const isJPG = file.type === 'image/jpeg';
+          const isLt2M = file.size / 1024 / 1024 < 2;
+          if (!isJPG) {
+            this.$message.error('上传头像图片只能是 JPG 格式!');
+          }
+          if (!isLt2M) {
+            this.$message.error('上传头像图片大小不能超过 2MB!');
+          }
+          return isJPG && isLt2M;
         },
-        beforeAvatarUpload(file) {
-        const isJPG = file.type === 'image/jpeg';
-        const isLt2M = file.size / 1024 / 1024 < 2;
-
-        if (!isJPG) {
-          this.$message.error('上传头像图片只能是 JPG 格式!');
-        }
-        if (!isLt2M) {
-          this.$message.error('上传头像图片大小不能超过 2MB!');
-        }
-        return isJPG && isLt2M;
-      },
       addCollection() { 
-        console.log( "-****" , this.message.collectionName);
-        console.log( "-****" , this.message.imageUrl);
-        console.log( "-****" , this.message.collectionTime);
-        console.log( "-****" , this.radio);
-        console.log( "-****" , this.value2);
-        
+        console.log( "-****" , this.form.collectionName);
+        console.log( "-****" , this.form.imageUrl);
+        console.log( "-****" , this.form.collectionTime);
+        console.log( "-****" , this.form.radio);
         addCollection(this.collectionName) .then((res)=>{
           console.log(res);
         })