套系发行方

src/api/announce/list.js

@@ -27,4 +27,16 @@ export const deleteNotice = (id)=>{
     url: '/system/notice/'+id,
     method: 'delete',
   })
-}
+}
+
+//新增公告
+export function submitAnnounce(data){
+  return request({
+    url:'/system/notice',
+    method:'post',
+    data:{
+      noticeTitle:"noticeTitle",
+      noticeContent:'noticeContent'
+    }
+  })
+} 

src/api/collection/collections.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+//获取藏品列表
+export const getCollections = (id)=>{
+    return request({
+      url: '/system/collections/list/'+id,
+      method: 'get',
+    })
+  }

src/api/message/index.js

@@ -1,4 +1,5 @@
 import request from '@/utils/request'
+import qs from 'qs'; //引入 == 局部引入不需要在main.js配置中引入
 
 //获取消息列表
 export function getMessageList(list){
@@ -8,7 +9,12 @@ export function getMessageList(list){
     })
 }
 //搜索消息功能
-
+export function searchMessage(title){
+    return request({
+        url:'/system/infos/queryLcd?title='+title,
+        method:'get'
+    })
+}
 //删除消息
 export const messageDel = (id) =>{
     return request({
@@ -17,10 +23,10 @@ export const messageDel = (id) =>{
     })
 }
 //新增消息
-export function addMesage(param){
+export function submitMessage(data){
     return request({
         url:'/system/infos',
         method:'post',
-        data:param
+        data:qs.stringify("addTitle"),
     }) 
 }

src/router/index.js

@@ -125,6 +125,27 @@ export const constantRoutes = [
         component: () => import('@/views/collection/detail/index'),
         name: 'deatil',
         meta: { title: '套系详情' }
+      },
+      {
+        path: '/collections',
+        hidden: true,
+        component: () => import('@/views/collection/collections/index'),
+        name: 'collections',
+        meta: { title: '藏品列表', icon: 'serieslist' }
+      },
+      {
+        path: '/addcollections',
+        hidden: true,
+        component: () => import('@/views/collection/addcollections/index'),
+        name: 'addcollections',
+        meta: { title: '创建藏品', icon: 'createseries' }
+      },
+      {
+        path: '/collectionsDeatil',
+        hidden: true,
+        component: () => import('@/views/collection/collectionsDeatil/index'),
+        name: 'collectionsDeatil',
+        meta: { title: '藏品详情' }
       }
     ]
   },

src/views/announcement/add/index.vue

@@ -36,7 +36,7 @@ import {
 import 'quill/dist/quill.core.css'
 import 'quill/dist/quill.snow.css'
 import 'quill/dist/quill.bubble.css'
-import { addAnnouncement } from '../../../api/announce/list'
+import { submitAnnounce } from '../../../api/announce/list'
 
 export default {
   name: 'FuncFormsEdit',
@@ -62,9 +62,6 @@ export default {
         date1: [
           { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
         ],
-        date2: [
-          { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
-        ],
         desc: [
           { required: true, message: '请填写公告内容', trigger: 'blur' }
         ]
@@ -75,7 +72,15 @@ export default {
     submitForm(formName) {
       this.$refs[formName].validate((valid) => {
         if (valid) {
-          alert('submit!');
+          submitAnnounce({
+            noticeTitle: this.ruleForm.name,
+            createTime:this.ruleForm.date1,
+            noticeContent:this.ruleForm.desc
+          }).then((res)=>{
+            console.log(res);
+            this.$refs[formName].resetFields()
+            // this.$router.push({ name: "announcementList"})
+          })
         } else {
           console.log('error submit!!');
           return false;

src/views/collection/addcollections/index.vue

@@ -0,0 +1,192 @@
+<template>
+  <div class="block">
+    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
+      <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-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 label="藏品价格：" prop="price" style="width: 550px">
+        <el-input v-model="ruleForm.price" show-word-limit>
+          <template slot="append">￥</template>
+        </el-input>
+      </el-form-item>
+      <el-form-item label="藏品数量：" prop="number" style="width: 550px">
+        <el-input v-model="ruleForm.number" show-word-limit>
+          <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']">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="作品故事" prop="desc" style="width:550px;">
+        <el-input type="textarea" v-model="ruleForm.desc" class="inputStore" :rows="15"></el-input>
+      </el-form-item>
+      <el-button type="primary" style="margin-left: 200px" @click="submitForm('ruleForm')">提交</el-button>
+    </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;
+          }">
+        top
+      </div>
+    </el-backtop>
+  </div>
+</template>
+  
+<script>
+export default {
+  data() {
+    return {
+      ruleForm: {
+        name: "",
+        //  时间
+        date: "",
+        // 上传图片
+        imageUrl: "",
+        price: "",
+        number: "",
+        desc: ""
+      },
+      //表单验证
+      rules: {
+        name: [
+          { required: true, message: "请输入藏品名称", trigger: "blur" },
+          {
+            min: 2,
+            max: 20,
+            message: "长度在 2 到 20个字符",
+            trigger: "blur",
+          },
+        ],
+        desc: [
+          { required: true, message: "请输入作品故事", trigger: "blur" },
+          {
+            min: 20,
+            max: 200,
+            message: "长度在 20 到 200个字符",
+            trigger: "blur",
+          },
+        ],
+        price: [
+          { required: true, message: "请输入藏品价格", trigger: "blur" },
+          {
+            min: 2,
+            max: 20,
+            message: "长度在 2 到 20个字符",
+            trigger: "blur",
+          },
+        ],
+        number: [
+          { required: true, message: "请输入藏品数量", trigger: "blur" },
+          {
+            min: 2,
+            max: 20,
+            message: "长度在 2 到 20个字符",
+            trigger: "blur",
+          },
+        ],
+        avatar: [
+          {
+            required: true,
+            message: "请按照规范上传尺寸为750px*750px的图片",
+            trigger: "blur",
+          },
+        ],
+        date: [
+          {
+            required: true,
+            message: "请按照选择时间",
+            trigger: "change",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    // 提交表单
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          alert("submit!");
+        } 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;
+
+      if (!isJPG) {
+        this.$message.error("上传头像图片只能是 JPG 格式!");
+      }
+      if (!isLt2M) {
+        this.$message.error("上传头像图片大小不能超过 2MB!");
+      }
+      return isJPG && isLt2M;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.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: 400px;
+  height: 300px;
+  line-height: 300px;
+  text-align: center;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
+}
+
+.avatar {
+  width: 300px;
+  height: 300px;
+  display: block;
+}
+
+.block {
+  margin: 20px 100px;
+  padding: 60px;
+  border: 1px solid #ebebeb;
+  border-radius: 5px;
+}
+</style>

src/views/collection/collections/index.vue

@@ -0,0 +1,109 @@
+<template>
+    <div>
+        <div class="total">
+            <i class="el-icon-tickets" style="margin-right: 5px"></i>藏品列表
+            <div class="btn-add">
+                <el-button size="small" type="primary" plain @click="handleAdd()">添加</el-button>
+            </div>
+        </div>
+        <div class="list">
+            <el-table v-loading="loading" :data="
+                seriesList.slice(
+                    (pages.currentPage - 1) * pages.pageSize,
+                    pages.pageSize * pages.currentPage
+                )
+            " border>
+                <el-table-column prop="id" label="ID" width="100px" align="center">
+                </el-table-column>
+                <el-table-column prop="name" label="藏品名称" align="center">
+                </el-table-column>
+                <el-table-column prop="setTime" label="售卖时间" align="center">
+                    <!-- <template slot-scope="scope">
+              {{ scope.row.setTime }}
+            </template> -->
+                </el-table-column>
+                <el-table-column prop="amount" label="藏品价格（￥）" align="center">
+                </el-table-column>
+                <el-table-column prop="amount" label="藏品状态" align="center">
+                </el-table-column>
+                <el-table-column prop="amount" label="数量（份）" align="center">
+                </el-table-column>
+                <el-table-column prop="operate" label="操作" align="center">
+                    <template slot-scope="scope">
+                        <div>
+                            <el-button type="text" size="mini" @click="handleDetail(scope.row)">藏品详情</el-button>
+                            <el-button type="text" size="mini">兑换详情</el-button>
+                        </div>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+        <div>
+            <el-pagination :current-page="pages.currentPage" background layout="total,prev, pager, next"
+                :total="seriesList.length" style="margin-right: 10px; float: right" :page-size.sync="pages.pageSize"
+                @current-change="handleCurrentChange">
+            </el-pagination>
+        </div>
+    </div>
+</template>
+<script>
+// mock
+import { reqMockData } from "../../../mockjs/reqMock.js";
+//后端接口
+import { getCollections } from "../../../api/collection/collections"
+export default {
+    created() {
+        this.getSeries();
+    },
+    data() {
+        return {
+            // 加载效果
+            loading: true,
+            // 分页参数
+            pages: {
+                currentPage: 1,
+                pageSize: 10,
+            },
+        };
+    },
+    methods: {
+        //mock获取数据
+        getSeries() {
+            reqMockData().then((res) => {
+                this.seriesList = res.data;
+                this.loading = false;
+            });
+        },
+        
+        // 添加藏品
+        handleAdd() {
+            this.$router.push({ path: "/addcollections" });
+        },
+        handleCurrentChange(val) {
+            this.pages.currentPage = val;
+        },
+        //藏品详情
+        handleDetail(row) {
+            this.$router.push({ name: "collectionsDeatil", prams: { row } });
+        },
+    },
+};
+</script>
+<style lang="scss" scoped>
+.total {
+    border: 1px solid #ebebeb;
+    margin: 20px 15px 20px 20px;
+    padding: 20px;
+    border-radius: 4px;
+}
+
+.btn-add {
+    float: right;
+    margin: auto;
+}
+
+.list {
+    margin: 20px 10px 20px 20px;
+}
+</style>
+  <style>

src/views/collection/collectionsDeatil/index.vue

@@ -0,0 +1,5 @@
+<template>
+    <div>
+        藏品详情
+    </div>
+</template>

src/views/collection/serieslist/index.vue

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

src/views/message/messageCreate/index.vue

@@ -3,8 +3,8 @@
     <el-card class="announcementBox" style="height: 700px;width: 700px;">
       <div class="content">
         <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
-          <el-form-item label="消息标题" prop="name">
-            <el-input v-model="ruleForm.name" placeholder="请输入公告名称"></el-input>
+          <el-form-item label="消息标题" prop="title">
+            <el-input v-model="ruleForm.title" placeholder="请输入公告名称"></el-input>
           </el-form-item>
           <el-form-item label="发布时间" required>
             <el-col :span="11">
@@ -39,10 +39,11 @@ import {
 import 'quill/dist/quill.core.css'
 import 'quill/dist/quill.snow.css'
 import 'quill/dist/quill.bubble.css'
-import { addMesage } from '../../../api/message'
+import { submitMessage } from '../../../api/message'
+import qs from 'qs'; //引入 == 局部引入不需要在main.js配置中引入
 
 export default {
-  name: 'FuncFormsEdit',
+  title: 'FuncFormsEdit',
   components: {
     quillEditor
   },
@@ -50,25 +51,21 @@ export default {
     return {
       //富文本
       editorOption: {},
-
       ruleForm: {
-        name: '',
+        title: '',
         date1: '',
         delivery: false,
         desc: '',
         receivedUsers: '',
       },
       rules: {
-        name: [
+        title: [
           { required: true, message: '请输入公告名称', trigger: 'blur' },
           { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
         ],
         date1: [
           { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
         ],
-        date2: [
-          { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
-        ],
         receivedUsers: [
           { required: true, message: '请导入接受用户', trigger: 'blur' }
         ],
@@ -80,21 +77,24 @@ export default {
   },
   methods: {
     submitForm(formName) {
+     
       this.$refs[formName].validate((valid) => {
         if (valid) {
-          addMesage({
-            addName:this.ruleForm.name,
-            addDate:this.ruleForm.date1,
-            addReceivedUsers:this.ruleForm.receivedUsers,
-            addDesc:this.ruleForm.desc
-          }).then((res)=>{
+          submitMessage({
+            addTitle: this.ruleForm.title,
+            addDate: this.ruleForm.date1,
+            addReceivedUsers: this.ruleForm.receivedUsers,
+            addDesc: this.ruleForm.desc
+          }).then((res) => {
             this.$message({
-              message:'添加成功',
-              type:'success'
+              message: '添加成功',
+              type: 'success'
             })
             console.log(res);
-            this.resetForm()
-            this.$router.push({name:"messageList"});
+            this.$refs[formName].resetFields();
+            this.$router.push({ name: "messageList" });
+          }).catch((e) => {
+            console.log(e.message);
           })
         } else {
           console.log('error submit!!');

src/views/message/messageList/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-card style="height: 160px;width: 1200px; margin: 30px 0 20px 30px;">
-      <el-form :inline="true" :model="formInline" class="demo-form-inline">
+      <el-form :inline="true" class="demo-form-inline">
         <div class="searchContainer">
           <i class="el-icon-search search">筛选搜索</i>
           <el-form-item class="searchButton">
@@ -10,7 +10,7 @@
           </el-form-item>
         </div>
         <el-form-item label="消息标题:">
-          <el-input v-model="formInline.messageTitle" placeholder="筛选消息标题" @keyup.enter.native="onSubmit"></el-input>
+          <el-input v-model="messageTitle" placeholder="筛选消息标题" @keyup.enter.native="onSubmit"></el-input>
         </el-form-item>
         <el-form-item class="inline" label="发布时间:  " prop="createTime">
           <el-date-picker v-model="value" type="daterange" range-separator="至" start-placeholder="开始日期"
@@ -29,7 +29,7 @@
         </el-table-column>
         <el-table-column prop="title" label="消息标题" align="center" width="220">
         </el-table-column>
-        <el-table-column prop="messageTel" label="手机号" align="center" width="220">
+        <el-table-column prop="image" label="手机号" align="center" width="220">
         </el-table-column>
         <el-table-column prop="sendTime" label="发布时间" align="center" width="220">
         </el-table-column>
@@ -49,15 +49,13 @@
 </template>
 
 <script>
-import { getMessageList, messageDel } from "../../../api/message";
+import { getMessageList, messageDel, searchMessage } from "../../../api/message";
 
 export default {
   data() {
     return {
       //搜索
-      formInline: {
-        messageTitle: '',
-      },
+      messageTitle: '',
       tableData: [],//所有数据
       currentPage: 1,
       pagesize: 5,
@@ -72,26 +70,10 @@ export default {
   methods: {
     //搜索功能
     searchMessage() {
-      // 若未输入值，则展示所有数据
-      if (null === this.formInline.messageTitle || undefined === this.formInline.messageTitle) {
-        this.tableDataRst = this.tableData;
-      } else {
-        this.tableDataRst = []; // 结果列表置空
-        let regStr = '';
-        // 初始化正则表达式
-        for (let i = 0; i < this.formInline.messageTitle.length; i++) {
-          regStr = regStr + '(' + this.formInline.messageTitle[i] + ')([\\s]*)'; //跨字匹配
-        }
-        let reg = new RegExp(regStr);
-        console.log(reg);
-        for (let i = 0; i < this.tableData.length; i++) {
-          let name = this.tableData[i].name; //按照名字匹配
-          let regMatch = name.match(reg);
-          if (null !== regMatch) {//将匹配的数据放入结果列表中
-            this.tableDataRst.push(this.tableData[i]);
-          }
-        }
-      }
+      searchMessage(this.messageTitle).then((res) => {
+        console.log(res);
+        this.tableData = res.data
+      })
     },
     //消息删除
     handleDelete(row) {
@@ -129,7 +111,7 @@ export default {
       // this.$data = this.$options.data();
       //  有报错Avoid replacing instance root $data. Use nested data properties instead.
       // Object.assign(this.$data, this.$options.data())
-      this.formInline.messageTitle = "";
+      this.messageTitle = "";
       this.value = ""
     },
     //查看消息详情