状态改变

src/api/sets/index.js

@@ -27,6 +27,29 @@ export function setList(params){
   })
 }
 
+// 获取在售列表
+export function sellingList(params){
+  return request({
+    url:'/system/tether/sellingList',
+    params
+  })
+}
+
+// 获取预售列表
+export function advanceList(params){
+  return request({
+    url:'/system/tether/advanceList',
+    params
+  })
+}
+
+// 获取已过期列表
+export function selledList(params){
+  return request({
+    url:'/system/tether/selledList',
+    params
+  })
+}
 
 // 根据时间和名称搜索
 export function selectether(params){
@@ -35,4 +58,5 @@ export function selectether(params){
     url: "/system/tether/queryTether",
     params
   });
-}
+}
+

src/views/sets/setList.vue

@@ -1,8 +1,5 @@
 <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">
@@ -17,27 +14,15 @@
             <el-col :span="5" id="header-two-left">
               <el-form ref="anFormRef" label-width="80px">
                 <el-form-item label="藏品名称(套):" label-width="102px">
-                  <el-input
-                    v-model="input.value1"
-                    class="anInput"
-                    placeholder="筛选藏品标题"
-                    center
-                  ></el-input>
+                  <el-input v-model="input.value1" class="anInput" placeholder="筛选藏品标题" center></el-input>
                 </el-form-item>
               </el-form>
             </el-col>
             <el-col :span="12">
               <el-form label-width="80px">
                 <el-form-item label="创建时间:">
-                  <el-date-picker
-                    v-model="input.value2"
-                    type="datetimerange"
-                    class="up-input-right"
-                    range-separator="至"
-                    start-placeholder="开始日期"
-                    end-placeholder="结束日期"
-                    align="right"
-                  >
+                  <el-date-picker v-model="input.value2" type="datetimerange" class="up-input-right" range-separator="至"
+                    start-placeholder="开始日期" end-placeholder="结束日期" align="right">
                   </el-date-picker>
                 </el-form-item>
               </el-form>
@@ -47,97 +32,51 @@
       </el-header>
       <el-main style="height: 110px">
         <h3 class="el-icon-tickets">套系列表 共有{{ total }}条数据</h3>
-        <el-button id="main-btu" @click="addSet()">添加</el-button>
+        <el-button id="main-btu" @click="addSet">添加</el-button>
       </el-main>
       <div class="footer">
-        <el-row>
-          <el-button size="small" @click="onSale1()" :class="btnact"
-            >在售</el-button
-          >
-          <el-button size="small" @click="preSale()" :class="btnact1"
-            >预售</el-button
-          >
-          <el-button size="small" @click="expired()" :class="btnact2"
-            >已过期</el-button
-          >
+        <el-row class="state">
+          <el-button :class="flag == 0 ? 'active' : ''" size="small" @click="onSalel">在售</el-button>
+          <el-button :class="flag == 1 ? 'active' : ''" size="small" @click="preSale">预售</el-button>
+          <el-button :class="flag == 2 ? 'active' : ''" size="small" @click="expired">已过期</el-button>
         </el-row>
 
-        <!-- 非响应式？？‘’‘不是非响应式上面帮点击时间不好使 -->
         <el-table :data="tableData" border style="width: 100%">
-          <el-table-column
-            prop="tetherId"
-            label="id"
-            width="110"
-            align="center"
-          >
+          <el-table-column prop="tetherId" label="id" width="110" align="center">
           </el-table-column>
-          <el-table-column
-            prop="tetherName"
-            label="藏品名称(套)"
-            width="220"
-            align="center"
-          >
+          <el-table-column prop="tetherName" label="藏品名称(套)" width="220" align="center">
           </el-table-column>
-          <el-table-column
-            prop="showTimeStart"
-            label="创建时间"
-            width="220"
-            align="center"
-          >
+          <el-table-column prop="showTimeStart" label="创建时间" width="220" align="center">
           </el-table-column>
-          <el-table-column
-            prop="showTimeEnd"
-            label="结束时间"
-            width="220"
-            align="center"
-          >
+          <el-table-column prop="showTimeEnd" label="结束时间" width="220" align="center">
           </el-table-column>
-          <el-table-column
-            prop="number"
-            label="藏品数量"
-            width="195"
-            align="center"
-          >
+          <el-table-column prop="number" label="藏品数量" width="195" align="center">
           </el-table-column>
-          <el-table-column
-            prop="status"
-            label="状态"
-            width="200"
-            align="center"
-          >
+          <el-table-column prop="status" label="状态" width="200" align="center">
           </el-table-column>
           <el-table-column prop="edit" label="操作" width="280" align="center">
             <template slot-scope="scope">
-              <el-button type="text" @click="sList(scope.row)"
-                >藏品列表</el-button
-              >
+              <el-button type="text" @click="sList(scope.row)">藏品列表</el-button>
               <el-row>
-                <el-button type="text" @click="upJia()">上架</el-button>
-                <el-button type="text" @click="editTime()">修改时间</el-button>
+                <el-button type="text" @click="upJia">上架</el-button>
+                <el-button type="text" @click="editTime">修改时间</el-button>
               </el-row>
             </template>
           </el-table-column>
         </el-table>
-        <el-pagination
-          @current-change="handleCurrentChange"
-          background
-          layout="total, prev, pager, next"
-          :total="total"
-          id="page"
-          :page-size="10"
-        >
+        <el-pagination @current-change="handleCurrentChange" background layout="total, prev, pager, next" :total="total"
+          id="page" :page-size="10">
         </el-pagination>
       </div>
     </el-container>
   </div>
 </template>
 <script>
-import { getSet, searchSet, setList, selectether } from "@/api/sets/index";
+import { selectether, sellingList, advanceList, selledList } from "@/api/sets/index";
 export default {
   data() {
     return {
-      pageInfo: {
-        // 分页信息
+      pageInfo: { // 分页信息
         pageNum: 1,
         pageSize: 10,
       },
@@ -145,131 +84,66 @@ export default {
         value1: "", // 搜索姓名
         value2: "", // 搜索时间
       },
-      thisTime: "", //当前时间
-      dataput: "",
-      activeName: "first",
-      //列表
-      tabPosition: "onSale",
-      //
-      btnact: "th",
-      btnact1: "th1",
-      btnact2: "th2",
       total: 1,
+      flag: 0,
       tableData: [],
       startTime: [],
       endTime: [],
     };
   },
-  watch: {
-    activeName(newVal, oldVal) {
-      console.log(newVal, "\n", oldVal);
-    },
-  },
-
   mounted() {
-    this.setsList();
-
-    var date = new Date();
-    var YY = date.getFullYear() + "-";
-    var MM =
-      (date.getMonth() + 1 < 10
-        ? "0" + (date.getMonth() + 1)
-        : date.getMonth() + 1) + "-";
-    var DD = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
-    var hh =
-      (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
-    var mm =
-      (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
-      ":";
-    var ss =
-      date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
-    this.thisTime = YY + MM + DD + " " + hh + mm + ss;
-    console.log(this.thisTime);
+    this.flag = 0;
+    this.sellingsList();
   },
   methods: {
     handleCurrentChange(newPage) {
       this.pageInfo.pageNum = newPage;
       this.setsList();
     },
-    setsList() {
-      setList(this.pageInfo).then((res) => {
-        console.log(res);
+    // 在售
+    sellingsList() {
+      sellingList(this.pageInfo).then((res) => {
         this.tableData = res.rows;
         this.total = res.total;
       });
     },
-    goback() {
-      window.history.go(-1);
+    // 预售
+    advancesList() {
+      advanceList(this.pageInfo).then((res) => {
+        this.tableData = res.rows;
+        this.total = res.total;
+      });
     },
-    //点击标签切换修改后
-    onSale1() {
-      console.log("11");
-      if (this.btnact == "activeBack") {
-        this.btnact = "th";
-        this.btnact1 = "activeBack1";
-        this.btnact2 = "activeBack2";
-      } else {
-        this.btnact = "activeBack";
-        this.btnact1 = "th1";
-        this.btnact2 = "th2";
-      }
-      setList(this.pageInfo).then((res) => {
-        this.startTime = res.rows.showTimeStart;
-        this.endTime = res.rows.showTimeEnd;
+    // 已过期
+    selledsList() {
+      selledList(this.pageInfo).then((res) => {
+        this.tableData = res.rows;
+        this.total = res.total;
       });
     },
+
+
+    // 点击标签切换修改后
+    onSalel() {
+      this.flag = 0;
+      this.sellingsList();
+    },
     preSale() {
-      console.log("222");
-      if (this.btnact1 == "activeBack1") {
-        this.btnact1 = "th1";
-        this.btnact = "activeBack";
-        this.btnact2 = "activeBack2";
-      } else {
-        this.btnact1 = "activeBack1";
-        this.btnact = "th";
-        this.btnact2 = "th2";
-      }
-      //   this.tableData = [
-      //     {
-      //       id: "17",
-      //       name: "wangxiu 预售",
-      //       time: "20230218",
-      //       time2: "20230218",
-      //       number: "7",
-      //       tai: "已上线",
-      //       edit: "caozuo",
-      //     },
-      //   ];
+      this.flag = 1;
+      this.advancesList();
     },
     expired() {
-      console.log("333");
-      if (this.btnact2 == "activeBack2") {
-        this.btnact2 = "th2";
-        this.btnact = "activeBack";
-        this.btnact1 = "activeBack1";
-      } else {
-        this.btnact2 = "activeBack";
-        this.btnact = "th";
-        this.btnact1 = "th1";
-      }
-      //   this.tableData = [
-      //     {
-      //       id: "17",
-      //       name: "wangxiu77777",
-      //       time: "20230218",
-      //       time2: "20230218",
-      //       number: "7",
-      //       tai: "已上线",
-      //       edit: "caozuo",
-      //     },
-      //   ];
+      this.flag = 2;
+      this.selledsList();
     },
-    //重置
+
+
+    // 重置
     empty() {
       this.input.value1 = "";
       this.dataput = "";
     },
-    //搜索
+    // 搜索
     check() {
       if (this.input.value1 || this.input.value2) {
         let startTime = this.$formatDate(
@@ -285,9 +159,7 @@ export default {
           tetherTimeStart: startTime,
           tetherTimeEnd: endTime,
         };
-        // console.log(searchCon);
         selectether(searchCon).then((res) => {
-          console.log(res);
           this.tableData = res.rows;
           this.total = res.total;
         });
@@ -296,16 +168,15 @@ export default {
       }
     },
 
-    //添加
+    // 添加
     addSet() {
       this.$router.push("./addSet");
     },
-    //藏品列表
+    // 藏品列表
     sList(rows) {
       this.$router.push({ name: "collectionList", params: { rows } });
-      //   this.$router.push("./collectionDetails");
     },
-    //上架
+    // 上架
     upJia() {
       this.$confirm("是否要上架商品?", "提示", {
         confirmButtonText: "确定",
@@ -325,7 +196,7 @@ export default {
           });
         });
     },
-    //修改时间
+    // 修改时间
     editTime() {
       console.log("修改时间");
     },
@@ -389,57 +260,12 @@ export default {
   width: 97%;
 }
 
-.th {
-  /* margin: 0;
-    padding: 0; */
-  margin-right: -10.75px;
-  font-size: 16px;
-  font-weight: 800;
-  background-color: #ffffff;
-  color: #606266;
-}
-
-.activeBack {
-  margin-right: -10.75px;
-  font-size: 16px;
-  font-weight: 800;
-  background-color: #409eff;
-  color: white;
-}
-
-.th1 {
-  /* margin: 0;
-    padding: 0; */
-  margin-right: -10.75px;
-  font-size: 16px;
-  font-weight: 800;
-  background-color: #ffffff;
-  color: #606266;
+.state button {
+  margin: 0;
 }
 
-.activeBack1 {
-  margin-right: -10.75px;
-  font-size: 16px;
-  font-weight: 800;
-  background-color: #409eff;
+.active {
   color: white;
-}
-
-.th2 {
-  /* margin: 0;
-    padding: 0; */
-  margin-right: -10.75px;
-  font-size: 16px;
-  font-weight: 800;
-  background-color: #ffffff;
-  color: #606266;
-}
-
-.activeBack2 {
-  margin-right: -10.75px;
-  font-size: 16px;
-  font-weight: 800;
   background-color: #409eff;
-  color: white;
 }
 </style>