collection

src/api/collection/collections.js

@@ -1,11 +1,10 @@
 import request from '@/utils/request'
 
 // 查询列表
-export function listCollections(query) {
+export function listCollections(id) {
   return request({
-    url: '/system/collections/list',
-    method: 'get',
-    params: query
+    url: '/system/collections/list/' + id,
+    method: 'get'
   })
 }
 
@@ -35,7 +34,7 @@ export function updateCollections(data) {
   })
 }
 
-// 删除【请填写功能名称】
+// 删除
 export function delCollections(id) {
   return request({
     url: '/system/collections/' + id,

src/views/collection/addcollections/index.vue

@@ -4,13 +4,13 @@
       <el-form-item label="藏品名称：" prop="name" style="width: 550px">
         <el-input v-model="ruleForm.name" maxlength="20" show-word-limit></el-input>
       </el-form-item>
-      <el-form-item label="藏品图片 ：" prop="avatar">
+      <!-- <el-form-item label="藏品图片 ：" prop="avatar">
         <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false"
           :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
           <img v-if="ruleForm.imageUrl" :src="ruleForm.imageUrl" class="avatar" />
           <i v-else class="el-icon-plus avatar-uploader-icon"></i>
         </el-upload>
-      </el-form-item>
+      </el-form-item> -->
       <el-form-item label="藏品价格：" prop="price" style="width: 550px">
         <el-input v-model="ruleForm.price" show-word-limit>
           <template slot="append">￥</template>
@@ -21,13 +21,7 @@
           <template slot="append">份</template>
         </el-input>
       </el-form-item>
-      <!-- 未改 -->
-      <el-form-item label="发行方：" prop="number" style="width: 550px">
-        <el-select v-model="value" placeholder="请选择">
-          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
-          </el-option>
-        </el-select>
-      </el-form-item>
+      
       <el-form-item label="售卖时间：" prop="date" style="width: 550px">
         <el-date-picker v-model="ruleForm.date" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期"
           :default-time="['12:00:00']">
@@ -40,14 +34,14 @@
     </el-form>
     <el-backtop :bottom="60">
       <div style="{
-            height: 100%;
-            width: 100%;
-            background-color: #f2f5f6;
-            box-shadow: 0 0 6px rgba(0,0,0, .12);
-            text-align: center;
-            line-height: 40px;
-            color: #1989fa;
-          }">
+              height: 100%;
+              width: 100%;
+              background-color: #f2f5f6;
+              box-shadow: 0 0 6px rgba(0,0,0, .12);
+              text-align: center;
+              line-height: 40px;
+              color: #1989fa;
+            }">
         top
       </div>
     </el-backtop>
@@ -55,6 +49,7 @@
 </template>
   
 <script>
+import { addCollections } from '../../../api/collection/collections'
 export default {
   data() {
     return {
@@ -91,7 +86,6 @@ export default {
         price: [
           { required: true, message: "请输入藏品价格", trigger: "blur" },
           {
-            min: 2,
             max: 20,
             message: "长度在 2 到 20个字符",
             trigger: "blur",
@@ -100,19 +94,18 @@ export default {
         number: [
           { required: true, message: "请输入藏品数量", trigger: "blur" },
           {
-            min: 2,
             max: 20,
             message: "长度在 2 到 20个字符",
             trigger: "blur",
           },
         ],
-        avatar: [
-          {
-            required: true,
-            message: "请按照规范上传尺寸为750px*750px的图片",
-            trigger: "blur",
-          },
-        ],
+        // avatar: [
+        //   {
+        //     required: true,
+        //     message: "请按照规范上传尺寸为400px*400px的图片",
+        //     trigger: "blur",
+        //   },
+        // ],
         date: [
           {
             required: true,
@@ -128,29 +121,46 @@ export default {
     submitForm(formName) {
       this.$refs[formName].validate((valid) => {
         if (valid) {
-          alert("submit!");
+          addCollections({
+            addName: this.ruleForm.name,
+            addDate: this.ruleForm.date,
+            // addImagUrl: this.ruleForm.imageUrl,
+            addDesc: this.ruleForm.desc,
+            addPrice: this.ruleForm.price,
+            addNumber: this.ruleForm.number
+          }).then((res) => {
+            this.$message({
+              message: '添加成功',
+              type: 'success'
+            })
+            console.log(res);
+            this.$refs[formName].resetFields();
+            this.$router.push({ name: "collections" });
+          }).catch((e) => {
+            console.log(e);
+          })
         } else {
           console.log("error submit!!");
           return false;
         }
       });
     },
-    handleAvatarSuccess(res, file) {
-      console.log(res);
-      this.imageUrl = URL.createObjectURL(file.raw);
-    },
-    beforeAvatarUpload(file) {
-      const isJPG = file.type === "image/jpeg";
-      const isLt2M = file.size / 1024 / 1024 < 2;
+    // handleAvatarSuccess(res, file) {
+    //   console.log(res);
+    //   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;
-    },
+    //   if (!isJPG) {
+    //     this.$message.error("上传头像图片只能是 JPG 格式!");
+    //   }
+    //   if (!isLt2M) {
+    //     this.$message.error("上传头像图片大小不能超过 2MB!");
+    //   }
+    //   return isJPG && isLt2M;
+    // },
   },
 };
 </script>

src/views/collection/collections/index.vue

@@ -6,23 +6,23 @@
                 <el-button size="small" type="primary" plain @click="handleAdd()">添加</el-button>
             </div>
         </div>
-        <el-card style="height: 300px;width: 1200px; margin-left: 30px;">
-            <el-table :data="seriesList" border height="250" style="width: 100%">
-                <el-table-column fixed prop="id" label="ID" align="center" width="200">
+        <el-card style="height: 500px;width: 1200px;" class="elCard">
+            <el-table :data="seriesList" border height="410px" style="width: 100%">
+                <el-table-column fixed prop="id" label="ID" align="center" width="140">
                 </el-table-column>
-                <el-table-column prop="name" label="藏品名称" align="center" width="150">
+                <el-table-column prop="name" label="藏品名称" align="center" width="140">
                 </el-table-column>
-                <el-table-column prop="endTime" label="售卖时间" align="center" width="150">
+                <el-table-column prop="startTime" label="售卖时间" align="center" width="160">
                 </el-table-column>
-                <el-table-column prop="price" label="藏品价格（￥）" align="center" width="150">
+                <el-table-column prop="price" label="藏品价格（￥）" align="center" width="160">
                 </el-table-column>
-                <el-table-column prop="status" label="藏品状态" align="center" width="150">
+                <el-table-column prop="endTime" label="截止时间" align="center" width="160">
                 </el-table-column>
-                <el-table-column prop="collectionsNumber" label="数量（份）" align="center" width="150">
+                <el-table-column prop="collectionsNumber" label="数量（份）" align="center" width="160">
                 </el-table-column>
-                <el-table-column fixed="right" label="操作" align="center" width="200">
+                <el-table-column fixed="right" label="操作" align="center" width="180">
                     <template slot-scope="scope">
-                        <el-button @click="handleClick(scope.row)" type="primary" size="small">查看详情</el-button>
+                        <el-button @click="handleDetail(scope.row)" type="primary" size="small">查看详情</el-button>
                         <el-button @click="handleDelete(scope.row)" type="danger" size="small">删除</el-button>
                     </template>
                 </el-table-column>
@@ -31,10 +31,8 @@
     </div>
 </template>
 <script>
-// mock
-import { reqMockData } from "../../../mockjs/reqMock.js";
 //后端接口
-import { getCollections } from "../../../api/collection/collections"
+import { listCollections, delCollections } from "../../../api/collection/collections"
 export default {
     data() {
         return {
@@ -55,17 +53,31 @@ export default {
         },
         //藏品详情
         handleDetail(row) {
-            this.$router.push({ name: "collectionsDeatil", prams: { row } });
+            this.$router.push({ name: "collectionsDeatil", params: { row } });
         },
         //获取藏品列表
         getCollectionList() {
-            console.log(this.$router);
-            // getCollections((res)=>{
-            //     this.seriesList = res.rows
-            // })
+            var Uid = this.$route.params.row.id
+            listCollections(Uid).then((res) => {
+                this.seriesList = res.rows
+            })
+        },
+        //删除
+        handleDelete(row) {
+            this.$confirm('是否确认删除藏品编号为"' + row.id + '"的数据项？', '提示').then(function () {
+                return delCollections(row.id);
+            }).then(() => {
+                this.$message({
+                    type: 'success',
+                    message: '删除成功!'
+                });
+                this.getCollectionList();
+            }).catch((res) => {
+                console.log(res);
+             });
         }
-    },
-};
+    }
+}
 </script>
 <style lang="scss" scoped>
 .total {
@@ -83,5 +95,7 @@ export default {
 .list {
     margin: 20px 10px 20px 20px;
 }
+
+
 </style>
 <style>

src/views/collection/collectionsDeatil/index.vue

@@ -1,5 +1,72 @@
 <template>
-    <div>
-        藏品详情
+    <div class="app-container">
+      <div class="detail-box">
+        <el-row class="detail-title">藏品详情</el-row>
+        <el-row class="notice-box">
+          <el-col >
+            <span class="notice-title">{{ collection.name }}</span>
+          </el-col>
+          <el-col>
+            <span>{{ collection.createTime }}</span>
+          </el-col>
+          <el-col>
+            <div class="notice-content">
+              {{ collection.collectionsStory }}
+            </div>
+          </el-col>
+        </el-row>
+        
+      </div>
     </div>
-</template>
+  </template>
+  <script>
+  export default{
+    name:"collectionDetail",
+    data(){
+      return {
+        collection:{},
+      }
+    },
+    created(){
+      this.getCollection();
+    },
+    methods:{
+      getCollection(){
+        console.log(this.$route.params.row);
+        this.collection=this.$route.params.row;
+      }
+    }
+  }
+  </script>
+  
+  <style lang="scss" scoped>
+  .app-container{
+    text-align: center;
+  }
+  .detail-box{
+    width: 80%;
+    border: solid 1px #DCDFE6;
+    padding: 30px;
+    display: inline-block;
+    .el-col{
+      margin-bottom: 10px;
+    }
+    .detail-title{
+      font-weight: bold;
+      font-size: 25px;
+      margin-bottom: 20px;
+    }
+  }
+  .notice-title{
+    font-weight: bold;
+    font-size: 20px;
+  }
+  
+  .notice-content{
+    text-indent: 30px;
+    line-height: 23px;
+  }
+  .notice-box{
+    text-align: left;
+  }
+  </style>

src/views/collection/serieslist/index.vue

@@ -231,7 +231,7 @@ export default {
     },
     //商品列表
     handleDetail(row) {
-      this.$router.push({ name: "collections", prams: { row } });
+      this.$router.push({ name: "collections", params: { row } });
     },
   },
 };