add

package.json

@@ -61,7 +61,9 @@
     "vue-quill-editor": "^3.0.6",
     "vue-router": "3.4.9",
     "vuedraggable": "2.24.3",
-    "vuex": "3.6.0"
+    "vuex": "3.6.0",
+    "vuex-persist": "^3.1.3",
+    "vuex-persistedstate": "^4.1.0"
   },
   "devDependencies": {
     "@babel/plugin-transform-runtime": "^7.17.10",
@@ -69,10 +71,10 @@
     "@vue/cli-plugin-babel": "4.4.6",
     "@vue/cli-plugin-eslint": "4.4.6",
     "@vue/cli-service": "4.4.6",
-    "babel-plugin-import": "^1.13.5",
     "babel-eslint": "10.1.0",
     "babel-plugin-component": "^1.1.1",
     "babel-plugin-dynamic-import-node": "2.3.3",
+    "babel-plugin-import": "^1.13.5",
     "chalk": "4.1.0",
     "compression-webpack-plugin": "5.0.2",
     "connect": "3.6.6",

src/main.js

@@ -42,6 +42,7 @@ import VueMeta from 'vue-meta'
 // 字典数据组件
 import DictData from '@/components/DictData'
 
+
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts
 Vue.prototype.getConfigKey = getConfigKey

src/store/study/index.js

@@ -0,0 +1,30 @@
+import Vuex from "vuex";
+// 引入插件
+import VuexPersistence from "vuex-persist";
+
+Vue.use(Vuex);
+//  初始化
+const state = {
+	userName:'admin'
+};
+const mutations = {};
+const actions = {};
+// 创建实例
+const vuexPersisted = new VuexPersistence({
+	storage: window.sessionStorage,
+  render:state=>({
+  	userName:state.userName,
+    // 或
+    ...state
+  })
+});
+
+const store = new Vuex.Store({
+	state,
+  actions,
+  mutations,
+  // 数据持久化设置
+  plugins:[vuexPersisted]
+});
+
+export default store;

src/views/collection/addcollections/index.vue

@@ -4,17 +4,10 @@
       <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="avatar">
+      <el-form-item label="藏品图片:" prop="image">
         <el-upload class="avatar-uploader" action="http://localhost:80/dev-api/files/send" accept="image/*"
           :show-file-list="false" :on-success="handleAvatarSuccess">
-          <img v-if="ruleForm.avatar" :src="ruleForm.avatar" class="avatar" />
+          <img v-if="ruleForm.image" :src="ruleForm.image" class="avatar" />
           <i v-else class="el-icon-plus avatar-uploader-icon"></i>
         </el-upload>
       </el-form-item>
@@ -23,33 +16,37 @@
           <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>
+      <el-form-item label="藏品数量：" prop="collectionsNumber" style="width: 550px">
+        <el-input v-model="ruleForm.collectionsNumber" show-word-limit>
           <template slot="append">份</template>
         </el-input>
       </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-form-item label="开始展示时间" prop="startTime">
+        <el-date-picker clearable v-model="ruleForm.startTime" type="date" value-format="yyyy-MM-dd HH:mm:ss"
+          placeholder="请选择开始展示时间">
         </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 label="结束展示时间" prop="endTime">
+        <el-date-picker clearable v-model="ruleForm.endTime" type="date" value-format="yyyy-MM-dd HH:mm:ss"
+          placeholder="请选择结束展示时间">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="作品故事" prop="collectionsStory" style="width:550px;">
+        <el-input type="textarea" v-model="ruleForm.collectionsStory" class="inputStore" :rows="15"></el-input>
       </el-form-item>
       <el-button type="primary" style="margin-left: 200px" @click="submitForm('ruleForm')">提交</el-button>
       <el-button @click="resetForm('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;
-              }">
+                    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>
@@ -64,12 +61,13 @@ export default {
       ruleForm: {
         name: "",
         //  时间
-        date: "",
+        startTime: "",
+        endTime:"",
         price: "",
-        number: "",
+        collectionsNumber: "",
         // 头像
-        avatar: "",
-        desc: ""
+        image: "",
+        collectionsStory: "",
       },
       //表单验证
       rules: {
@@ -82,10 +80,10 @@ export default {
             trigger: "blur",
           },
         ],
-        desc: [
+        collectionsStory: [
           { required: true, message: "请输入作品故事", trigger: "blur" },
           {
-            min: 20,
+            min: 2,
             max: 200,
             message: "长度在 20 到 200个字符",
             trigger: "blur",
@@ -99,7 +97,7 @@ export default {
             trigger: "blur",
           },
         ],
-        number: [
+        collectionsNumber: [
           { required: true, message: "请输入藏品数量", trigger: "blur" },
           {
             max: 20,
@@ -107,7 +105,14 @@ export default {
             trigger: "blur",
           },
         ],
-        date: [
+        createTime: [
+          {
+            required: true,
+            message: "请按照选择时间",
+            trigger: "change",
+          },
+        ],
+        endTime: [
           {
             required: true,
             message: "请按照选择时间",
@@ -141,28 +146,28 @@ export default {
     },
     // 自定义上传头像 覆盖默认上传
     handleUpload({ file }) {
-        const formData = new FormData();
-        formData.append("file", file);
-        // 调用上传头像接口
-        uploadAvatar(formData).then((res) => {
-          if (res.code === 200) {
-            // 如果返回状态码为200 将返回的头像地址赋值给表单头像字段
-            this.ruleForm.avatar = res.data;
-          }
-        });
-      },
-       // 上传头像成功
-       handleAvatarSuccess(res, file) {
-        this.$message({
-          type: 'success',
-          message: '上传成功!'
-        });
-        this.ruleForm.avatar = URL.createObjectURL(file.raw);
-      },
-      // 重置表单
-      resetForm(formName) {
-        this.$refs[formName].resetFields();
-      },
+      const formData = new FormData();
+      formData.append("file", file);
+      // 调用上传头像接口
+      uploadAvatar(formData).then((res) => {
+        if (res.code === 200) {
+          // 如果返回状态码为200 将返回的头像地址赋值给表单头像字段
+          this.ruleForm.image = res.data;
+        }
+      });
+    },
+    // 上传头像成功
+    handleAvatarSuccess(res, file) {
+      this.$message({
+        type: 'success',
+        message: '上传成功!'
+      });
+      this.ruleForm.image = URL.createObjectURL(file.raw);
+    },
+    // 重置表单
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    },
   },
 };
 </script>

src/views/collection/collections/index.vue

@@ -33,6 +33,7 @@
 <script>
 //后端接口
 import { listCollections, delCollections } from "../../../api/collection/collections"
+
 export default {
     data() {
         return {
@@ -57,7 +58,7 @@ export default {
         },
         //获取藏品列表
         getCollectionList() {
-            var Uid = this.$route.params.row.id
+            var Uid = this.$route.query.id;
             listCollections(Uid).then((res) => {
                 this.seriesList = res.rows
             })
@@ -74,7 +75,7 @@ export default {
                 this.getCollectionList();
             }).catch((res) => {
                 console.log(res);
-             });
+            });
         }
     }
 }
@@ -95,7 +96,5 @@ export default {
 .list {
     margin: 20px 10px 20px 20px;
 }
-
-
 </style>
 <style>

src/views/collection/collectionsDeatil/index.vue

@@ -32,7 +32,6 @@
     },
     methods:{
       getCollection(){
-        console.log(this.$route.params.row);
         this.collection=this.$route.params.row;
       }
     }

src/views/collection/serieslist/index.vue

@@ -19,8 +19,8 @@
           </el-col>
           <el-col :span="11">
             <el-form-item label="创建时间：" label-width="160px" prop="date">
-              <el-date-picker v-model="queryParams.startTime" type="daterange" align="right" unlink-panels range-separator="至"
-                start-placeholder="开始日期" end-placeholder="结束日期" size="small">
+              <el-date-picker v-model="queryParams.startTime" type="daterange" align="right" unlink-panels
+                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" size="small">
               </el-date-picker>
             </el-form-item>
           </el-col>
@@ -37,48 +37,42 @@
     <!-- 表格 -->
     <div class="list">
       <el-row>
-      <el-radio-group v-model="tabPosition" prop="type">
-        <el-radio-button :label=0 @change="getList" >在售</el-radio-button>
-        <el-radio-button label="预售" >预售</el-radio-button>
-        <el-radio-button label="已过期" >已过期</el-radio-button>
-      </el-radio-group> 
-      <el-table v-loading="loading" :data="seriesList" border>
-        <el-table-column prop="id" label="ID" width="100px" align="center" />
-        <!-- <el-table-column label="0在售 1预售 2已过期" align="center" prop="type" /> -->
-        <el-table-column prop="name" label="藏品名称（套）" align="center" />
-        <el-table-column prop="startTime" label="创建时间" align="center" />
-        <el-table-column prop="endTime" label="截至时间" align="center" />
-        <!-- <el-table-column prop=" " label="藏品数量" align="center"/> -->
-        <el-table-column prop="status" label="状态" align="center">
-          <template slot-scope="scope">
-            <!-- <span>{{ scope.row.state == "0" ?"未上架" : "已上架" }}</span> -->
-            <el-button v-show="scope.row.status" type="success" plain>已上架</el-button>
-            <el-button v-show="!scope.row.status" type="warning" plain>未上链</el-button>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" align="center">
-          <template slot-scope="scope">
-            <el-button type="text" size="mini" @click="handleDetail(scope.row)">藏品列表</el-button>
-            <div>
-              <el-button type="text" size="mini" v-show="!scope.row.status" @click="onShelf(scope.row)">上链</el-button>
-              <el-button type="text" size="mini" v-show="scope.row.status"
-                @click="onShelf(scope.row)">下架</el-button><el-button type="text" size="mini"
-                @click="changeTime(scope.row)">修改</el-button>
-            </div>
-          </template>
-        </el-table-column>
-      </el-table>
-    </el-row>
+        <el-radio-group v-model="tabPosition" prop="type">
+          <el-radio-button :label=0 @change="getList">在售</el-radio-button>
+          <el-radio-button label="预售">预售</el-radio-button>
+          <el-radio-button label="已过期">已过期</el-radio-button>
+        </el-radio-group>
+        <el-table v-loading="loading" :data="seriesList" border>
+          <el-table-column prop="id" label="ID" width="100px" align="center" />
+          <!-- <el-table-column label="0在售 1预售 2已过期" align="center" prop="type" /> -->
+          <el-table-column prop="name" label="藏品名称（套）" align="center" />
+          <el-table-column prop="startTime" label="创建时间" align="center" />
+          <el-table-column prop="endTime" label="截至时间" align="center" />
+          <!-- <el-table-column prop=" " label="藏品数量" align="center"/> -->
+          <el-table-column prop="status" label="状态" align="center">
+            <template slot-scope="scope">
+              <!-- <span>{{ scope.row.state == "0" ?"未上架" : "已上架" }}</span> -->
+              <el-button v-show="scope.row.status" type="success" plain>已上架</el-button>
+              <el-button v-show="!scope.row.status" type="warning" plain>未上链</el-button>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="center">
+            <template slot-scope="scope">
+              <el-button type="text" size="mini" @click="handleDetail(scope.row)">藏品列表</el-button>
+              <div>
+                <el-button type="text" size="mini" v-show="!scope.row.status" @click="onShelf(scope.row)">上链</el-button>
+                <el-button type="text" size="mini" v-show="scope.row.status"
+                  @click="onShelf(scope.row)">下架</el-button><el-button type="text" size="mini"
+                  @click="changeTime(scope.row)">修改</el-button>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-row>
     </div>
     <div>
-      <el-pagination 
-        background 
-        :current-page="pages.currentPage" 
-        ayout="total,prev, pager, next"
-        :total="pages.total" 
-        style="margin-right: 10px; float: right" 
-        :page-size.sync="pages.pageSize"
-        @current-change="handleCurrentChange">
+      <el-pagination background :current-page="pages.currentPage" ayout="total,prev, pager, next" :total="pages.total"
+        style="margin-right: 10px; float: right" :page-size.sync="pages.pageSize" @current-change="handleCurrentChange">
       </el-pagination>
     </div>
 
@@ -108,12 +102,12 @@ export default {
   data() {
     return {
       // 查询参数
-      queryParams: {       
+      queryParams: {
         name: undefined,
       },
       //选项卡筛选参数---已售预售已过期
-      queryParams2:{
-        type:null,
+      queryParams2: {
+        type: null,
       },
       // 加载效果
       loading: true,
@@ -130,7 +124,7 @@ export default {
         pageSize: 10,
       },
       // 表单
-      formInline: { },
+      formInline: {},
 
       tabPosition: 0,
       //套系列表表格数据
@@ -140,7 +134,7 @@ export default {
 
 
   methods: {
-    
+
     /** 查询【套系】列表 */
     getSeries() {
       this.loading = true;
@@ -152,25 +146,25 @@ export default {
     },
     // 查询搜索
     handleQuery() {
-          this.pages.currentPage = 1;
-          this.getSeries();
-        },
+      this.pages.currentPage = 1;
+      this.getSeries();
+    },
     // 重置表单
     resetQuery() {
       this.resetForm("formInline");
       this.handleQuery();
     },
     //选择套系列表
-    findType(){
+    findType() {
       this.loading = true;
-      listSystem({type: this.queryParams2.type}).then((res) => {
+      listSystem({ type: this.queryParams2.type }).then((res) => {
         this.seriesList = res.rows;
         this.total = res.total;
         this.loading = false;
       })
     },
     //得到分类列表
-    getList(){
+    getList() {
       this.pages.currentPage = 1;
       this.findType();
     },
@@ -185,7 +179,7 @@ export default {
     },
     // 修改
     changeTime(row) {
-      this.$router.push({ name:"createseries", params:{ row }});
+      this.$router.push({ name: "createseries", params: { row } });
     },
     //关闭修改时间的弹框
     handleClose(done) {
@@ -224,14 +218,14 @@ export default {
     handleAdd() {
       this.$router.push({ path: "/createseries" });
     },
-    
+
     handleCurrentChange(val) {
       // console.log(`当前页: ${val}`);
       this.pages.currentPage = val;
     },
     //商品列表
     handleDetail(row) {
-      this.$router.push({ name: "collections", params: { row } });
+      this.$router.push({ name: "collections", params: { row }, query: { id: row.id } });
     },
   },
 };