Merge branch 'HitSheep' of http://39.105.160.25:10880/post-project-ui/post-ui into HitSheep

src/api/collection/collection.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+// 添加套系
+export function addCollection() {
+  return request({
+    url: '/post/series' ,
+    method: 'post'
+  })
+}

src/views/collection/addCollection.vue

@@ -5,155 +5,164 @@
     <div class="message-add-box">
       <el-form :model="message" :rules="rules" ref="form" label-width="100px">
       
-        <el-form-item label="消息标题:" prop="messageTitle">
-          <el-input v-model="message.messageTitle" placeholder="请输入消息标题"></el-input>
+        <el-form-item label="藏品名称:" prop="collectionName">
+          <el-input v-model="message.collectionName" style="width: 550px" placeholder="请输入藏品名称"></el-input>
+        </el-form-item> 
+        <el-form-item label="藏品头图:" prop="imageUrl">
+          <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="发布时间:" required>
-          <!-- <el-col :span="11">
-            <el-form-item prop="dateTime">
-              <el-time-picker placeholder="选择时间" v-model="message.dateTime" style="width: 100%;"></el-time-picker>
-            </el-form-item>
-          </el-col> -->
-          <el-col :span="11">
-            <el-form-item prop="date1">
-              <el-date-picker type="date" placeholder="选择日期" v-model="message.date1" style="width: 100%;"></el-date-picker>
-            </el-form-item>
-          </el-col>
-          <el-col class="line" :span="1.5">-</el-col>
-          <el-col :span="11">
-            <el-form-item prop="date2">
-              <el-time-picker placeholder="选择时间" v-model="message.date2" style="width: 100%;"></el-time-picker>
-            </el-form-item>
-         </el-col>
-        </el-form-item>
-
-        <el-form-item label="接受用户:" prop="receivedUsers">
-          <el-input type="textarea" :rows="2" placeholder="请导入用户" autosize v-model="message.receivedUsers"></el-input>
-        </el-form-item>  
-
-        <el-form-item label="消息内容:" prop="content">
-          <editor v-model="message.content" :min-height="192"/>
-        </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> 
         <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>
       </el-form>
-
     </div>     
   </div>
 </template>
 
 <script>
-import {submitMessage} from '../../api/message/message.js'
+import {addCollection} from '../../api/collection/collection.js'
 
  export default {
   
     data() {
       return {
-        
         message: {
-          messageTitle: '',
-          // dateTime: '',
-          date1:'',
-          date2:'',
-          receivedUsers: '',
-          content: '请输入内容',
-          cnt : 1 
+          collectionName:'',
+          imageUrl: '',
+          collectionPrice:'' , 
+          collectionCount:'' ,
+          collectionPublisher:'' , 
+          collectionHistory:'',
         },
-        rules: {
-          messageTitle: [
-            { required: true, message: '请输入消息标题', trigger: 'blur' }
+        rules:{
+          collectionName: [
+            { required: true, message: '请输入藏品名称', trigger: 'blur' }
           ],
-          // dateTime: [
-          //   { type: 'date', required: true, message: '选择时间', trigger: 'change' }
-          // ],
-          date1: [
-            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
+          imageUrl: [
+            { required: true, message: '请导入藏品图片', trigger: 'blur' }
           ],
-          date2: [
-            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
+          collectionPrice: [
+            { required: true, message: '请输入藏品价格', trigger: 'blur' }
           ],
-          receivedUsers: [
-            { required: true, message: '请导入接受用户', trigger: 'blur' }
+          collectionCount: [
+            { required: true, message: '请输入藏品数量', trigger: 'blur' }
           ],
-          content: [
-            { required: true, message: '请导入内容' , trigger: 'blur' }
-          ]
-        },
-
+          collectionPublisher: [
+            { required: true, message: '请输入发布人', trigger: 'blur' }
+          ],
+          collectionHistory: [
+            { required: true, message: '请输入藏品故事', trigger: 'blur' }
+          ],
+        }
     }
   },
   mounted() {
-    console.log( "-****" , this.message.messageTitle);
-    console.log( "-****" , this.message.date1);
-    console.log( "-****" , this.message.date2);
-    console.log( "-****" , this.message.content);
+    
   },
   methods: {
-      change(){
-        console.log(1);
-        this.cnt = this.cnt+ 1  
-        console.log(this.cnt);
-      },
-      onEditorChange() {
-      //内容改变事件
-        this.$emit("input", this.content);
+        handleAvatarSuccess(res, file) {
+          this.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;
       },
-      submitForm(formName) {
-        console.log( "-****title" , this.message.messageTitle);
-        console.log( "-****date1" , this.message.date1);
-        console.log( "-****date2" , this.message.date2);
-        console.log( "-****content" , this.message.content);
-        // console.log( "lxzhen-****content" , this.content);
-        var dateTime = this.message.date1;
-          function add0(m){return m<10?'0'+m:m }
-            function format(shijianchuo)
-            {
-                var time = new Date(shijianchuo);
-                var y = time.getFullYear();
-                var m = time.getMonth()+1;
-                var d = time.getDate()+1;
-                var h = time.getHours()+1;
-                var mm = time.getMinutes()+1;
-                var s = time.getSeconds()+1;
-                return y+'-'+add0(m)+'-'+add0(d)+' '+add0(h)+':'+add0(mm)+':'+add0(s);
-            }
-           var date = format(dateTime);
-        console.log(date);
-        this.$refs[formName].validate((valid) => {
-          if (valid) {
-            // alert('submit!');
-            submitMessage({
-              newsTitle:this.message.messageTitle,
-              newsContent:this.message.content,
-              userPhone :this.message.receivedUsers,
-              createTime:'1994-12-01 12:22:33',
-              updateTime:'1994-12-01 12:22:33',
-            })
-              .then((res) => {
-                console.log(res);
-                // 添加成功
-                this.$message({
-                  message:"消息添加成功！",
-                  type:"success",
-                });
-                this.$refs[message].resetFields();//添加成功后清空
-                this.$router.push('/message/messageList')//跳转
-              })
-              // 失败
-              .catch((err) => {
-                console.log(err);
-              });
-          } else {
-            console.log('error submit!!');
-            return false;
-          }
-        });
-        
+      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);
+        })
       },
       resetForm(formName) {
         this.$refs[formName].resetFields();
@@ -166,6 +175,29 @@ import {submitMessage} from '../../api/message/message.js'
 </script>
 
 <style>
+.avatar-uploader .el-upload {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .avatar-uploader .el-upload:hover {
+    border-color: #409EFF;
+  }
+  .avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 178px;
+    height: 178px;
+    line-height: 178px;
+    text-align: center;
+  }
+  .avatar {
+    width: 178px;
+    height: 178px;
+    display: block;
+  }
 .message-add-box{
   width: 60%;
   height: 100%;