静态界面

src/router/index.js

@@ -119,7 +119,7 @@ export const constantRoutes = [
     path: '/messageList',
     component: Layout,
     // redirect: '消息管理',
-    meta: { title: '消息管理', icon : "message" },
+    meta: { title: '消息管理', icon: "message" },
     children: [
       {
         path: 'messageList',
@@ -134,16 +134,36 @@ export const constantRoutes = [
         meta: { title: '创建消息', icon: 'build' }
       },
       {
-        path:'messageDetails',
-        component:() => import('@/views/message/messageDetails'),
+        path: 'messageDetails',
+        component: () => import('@/views/message/messageDetails'),
         name: 'messageDetails',
-        meta: { title:'公告详情', icon:'user'},
+        meta: { title: '公告详情', icon: 'user' },
         hidden: true
       }
       // messageDetails
     ]
-  } 
- 
+  },
+  {
+    path: '/Sets',
+    component: Layout,
+    // redirect: '套系管理',
+    meta: { title: '藏品管理', icon: "slider" },
+    children: [
+      {
+        path: 'setList',
+        component: () => import('@/views/sets/setList'),
+        name: 'setList',
+        meta: { title: '套系列表', icon: 'nested' }
+      },
+      {
+        path: 'addSet',
+        component: () => import('@/views/sets/addSet'),
+        name: 'addSet',
+        meta: { title: '创建套系', icon: 'nested' }
+      },
+    ]
+  }
+
 ]
 
 // 动态路由，基于用户权限动态去加载

src/views/notice/noticeList.vue

@@ -24,13 +24,9 @@
             <el-col :span="8">
               <el-form label-width="80px">
                 <el-form-item label="发布时间:">
-                  <el-col :span="11">
-                    <el-time-picker placeholder="开始日期"></el-time-picker>
-                  </el-col>
-                  <el-col class="line" :span="1">——</el-col>
-                  <el-col :span="11">
-                    <el-time-picker placeholder="结束日期"></el-time-picker>
-                  </el-col>
+                  <el-date-picker v-model="dataput" type="datetimerange" class="up-input-right" range-separator="至"
+                    start-placeholder="开始日期" end-placeholder="结束日期" align="right">
+                  </el-date-picker>
                 </el-form-item>
               </el-form>
             </el-col>
@@ -62,7 +58,7 @@
         <!-- <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
           :current-page="queryInfo.pagenum" :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.pagesize"
           layout="total, sizes, prev, pager, next, jumper" :total="10"></el-pagination> -->
-        </div>
+      </div>
     </el-container>
   </div>
 </template>
@@ -84,7 +80,8 @@ export default {
         page: 1,
         limit: 10
       },
-      total: 1
+      total: 1,
+      dataput: ''
     }
   },
 

src/views/sets/addSet.vue

@@ -0,0 +1,161 @@
+<template>
+    <div class="collection-add">
+
+        <!-- <el-page-header @back="goBack" content="创建消息"></el-page-header> -->
+        <div class="collection-add-box">
+            <el-form :model="collection" :rules="rules" ref="form" label-width="100px">
+                <el-form-item label="藏品名称(套):" prop="collectionTitle" label-width="120px">
+                    <el-input v-model="collection.collectionTitle" maxlength="20" show-word-limit></el-input>
+                </el-form-item>
+                <el-form-item label="藏品头图:" prop="collectionImg" label-width="120px">
+                    <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
+                        :show-file-list="true" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
+                        <img v-if="collection.imageUrl" :src="collection.imageUrl" class="avatar">
+                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                    </el-upload>
+                    <span style="color: red;">请按照规范上传尺寸为750px * 750px的照片</span>
+                </el-form-item>
+                <el-form-item label="设置套系时间:" prop="collectionTime" label-width="120px">
+                    <el-date-picker v-model="dataput" type="datetimerange" class="up-input-right" range-separator="-"
+                        start-placeholder="开始日期" end-placeholder="结束日期" align="right">
+                    </el-date-picker>
+                </el-form-item>
+                <el-form-item label="线下礼品兑换:" prop="giftRedemption" label-width="120px">
+                    <el-radio-group v-model="collection.resource">
+                        <el-radio label="可兑换"></el-radio>
+                        <el-radio label="不可兑换"></el-radio>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item label-width="120px">
+                    <el-button type="primary">提交</el-button>
+                </el-form-item>
+            </el-form>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+    data() {
+        return {
+            collection: {
+                collectionTitle: '',
+                collectionTime: '',
+                resource: '',
+                imageUrl: ''
+            },
+            rules: {
+                collectionTitle: [
+                    { required: true, collection: '请输入藏品名称', trigger: 'blur' }
+                ],
+
+                collectionImg: [
+                    { required: true, collection: '请设置头图', trigger: 'blur' }
+                ],
+                collectionTime: [
+                    { required: true, collection: '请设置时间', trigger: 'blur' }
+                ],
+                giftRedemption: [
+                    { required: true, collection: '请设置是否可兑换', trigger: 'blur' }
+                ],
+            },
+
+
+        }
+    },
+    methods: {
+        handleAvatarSuccess(res, file) {
+            this.collection.imageUrl = URL.createObjectURL(file.raw);
+        },
+        //限制图片大小
+        beforeAvatarUpload(file) {
+            const isJPG = file.type === "image/jpeg" || file.type === "image/png";
+            if (!isJPG) {
+                this.$message.error("上传头像图片只能是 JPG和PNG 格式!");
+            }
+            //调用[限制图片尺寸]函数
+            this.limitFileWH(750, 750, file).then((res) => {
+                file.isFlag = res
+            })
+            return isJPG && file.isFlag;
+        },
+        //限制图片尺寸
+        limitFileWH(E_width, E_height, file) {
+            let _this = this;
+            let imgWidth = "";
+            let imgHight = "";
+            const isSize = new Promise(function (resolve, reject) {
+                let width = E_width;
+                let height = E_height;
+                let _URL = window.URL || window.webkitURL;
+                let img = new Image();
+                img.onload = function () {
+                    imgWidth = img.width;
+                    imgHight = img.height;
+                    let valid = img.width == width && img.height == height;
+                    valid ? resolve() : reject();
+                }
+                img.src = _URL.createObjectURL(file);
+            }).then(() => {
+                return true;
+            }, () => {
+                _this.$message.warning({
+                    message: '上传文件的图片大小不合符标准,宽需要为' + E_width + 'px，高需要为' + E_height + 'px。当前上传图片的宽高分别为：' + imgWidth + 'px和' +
+                        imgHight + 'px',
+                    btn: false
+                })
+                return false;
+            });
+            return isSize
+        },
+    }
+}
+
+
+</script>
+
+<style>
+.collection-add {
+    width: 700px;
+    height: 100%;
+    position: absolute;
+    top: 30px;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+    border: 1px solid #ccc;
+}
+
+.collection-add-box {
+    padding: 40px;
+}
+
+.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: 447px;
+    height: 447px;
+    line-height: 447px;
+    text-align: center;
+}
+
+.avatar {
+    width: 178px;
+    height: 178px;
+    display: block;
+}
+</style>

src/views/sets/setList.vue

@@ -0,0 +1,168 @@
+<template>
+    <div>
+        <el-card>
+            <el-page-header @back="goback" content="套系列表"></el-page-header>
+        </el-card>
+        <el-container>
+            <el-header style="height: 120px;">
+                <div id="header-one">
+                    <h3 class="el-icon-search" style="margin-left: 10px;">筛选搜索</h3>
+                    <div id="header-one-btu">
+                        <el-button @click="empty">重置</el-button>
+                        <el-button type="primary" @click="check">搜索</el-button>
+                    </div>
+                </div>
+                <div id="header-two">
+                    <el-row>
+                        <el-col :span="5" id="header-two-left">
+                            <el-form ref="anFormRef" :model="anForm" label-width="80px">
+                                <el-form-item label="藏品名称(套):" label-width="102px">
+                                    <el-input v-model="anForm.anName" class="anInput" placeholder="筛选公告标题"
+                                        center></el-input>
+                                </el-form-item>
+                            </el-form>
+                        </el-col>
+                        <el-col :span="8">
+                            <el-form label-width="80px">
+                                <el-form-item label="创建时间:">
+                                    <el-date-picker v-model="dataput" type="datetimerange" class="up-input-right"
+                                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
+                                    </el-date-picker>
+                                </el-form-item>
+                            </el-form>
+                        </el-col>
+                    </el-row>
+                </div>
+            </el-header>
+            <el-main style="height: 110px;">
+                <h3 class="el-icon-tickets">套系列表 共有0条数据</h3>
+                <el-button id="main-btu" @click="addNotice()">添加</el-button>
+            </el-main>
+            <div class="footer">
+                <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+                    <el-tab-pane label="在售" name="first">
+                        <el-table :data="tableData" border style="width: 100%">
+                            <el-table-column prop="date" label="日期" width="180">
+                            </el-table-column>
+                            <el-table-column prop="name" label="姓名" width="180">
+                            </el-table-column>
+                            <el-table-column prop="address" label="地址">
+                            </el-table-column>
+                        </el-table>
+                    </el-tab-pane>
+                    <el-tab-pane label="预售" name="second">预售列表</el-tab-pane>
+                    <el-tab-pane label="已过期" name="third">已过期</el-tab-pane>
+                </el-tabs>
+            </div>
+        </el-container>
+    </div>
+</template>
+<script>
+import { getNotice, searchNotice } from "@/api/notice/notice"
+export default {
+    data() {
+        return {
+            anForm: {
+                anName: '',
+            },
+
+
+            total: 1,
+            dataput: '',
+            activeName: 'first',
+            tableData: [{
+                date: '2016-05-02',
+                name: '王小虎',
+                address: '上海市普陀区金沙江路 1518 弄'
+            }, {
+                date: '2016-05-04',
+                name: '王小虎',
+                address: '上海市普陀区金沙江路 1517 弄'
+            }, {
+                date: '2016-05-01',
+                name: '王小虎',
+                address: '上海市普陀区金沙江路 1519 弄'
+            }, {
+                date: '2016-05-03',
+                name: '王小虎',
+                address: '上海市普陀区金沙江路 1516 弄'
+            }]
+        }
+    },
+    watch: {
+        activeName(newVal, oldVal) {
+            console.log(newVal, "\n", oldVal)
+        }
+    },
+    created() {
+        this.getnotice()
+    },
+    methods: {
+        goback() {
+            window.history.go(-1)
+        },
+        //tag点击
+        handleClick(tab, event) {
+            console.log(tab, event);
+        }
+    }
+};
+
+</script>
+<style scoped>
+.el-main {
+    color: #333;
+    border: 1px solid #d3d7d4;
+    border-radius: 5px;
+    margin-left: 30px;
+    margin-right: 30px;
+}
+
+.el-header {
+    color: #333;
+    border: 1px solid #d3d7d4;
+    border-radius: 5px;
+    margin: 30px;
+}
+
+/* .el-footer {} */
+
+#footer-t {
+    color: #333;
+    border: 1px solid #d3d7d4;
+    border-radius: 5px;
+    margin-left: 10px;
+    margin-top: 30px;
+}
+
+/* #header-one {} */
+
+#header-two {
+    /* background-color: aqua; */
+    margin-left: 90px;
+}
+
+#header-one-btu {
+    margin: 20px 20px 0px 0px;
+    float: right;
+}
+
+#header-two-left {
+    margin-right: 150px;
+}
+
+#main-btu {
+    float: right;
+    margin-top: 10px;
+}
+
+#page {
+    float: right;
+    margin-top: 15px;
+}
+
+.footer {
+    margin: 20px auto;
+    width: 97%;
+}
+</style>