up

houtai/src/router/index.js

@@ -37,9 +37,13 @@ const routes = [
         name: 'tab3',
         meta: { myInd: 3, myBac: 'tab2Bac' },
         component: () => import('../views/tab3.vue')
+      },
+      {
+        path: 'tab4',
+        name: 'tab4',
+        meta: { myInd: 1, myBac: 'tab2Bac' },
+        component: () => import('../views/tab4.vue')
       }
-
-
     ]
   }
 ]

houtai/src/utils/api.js

@@ -81,4 +81,21 @@ export const exportExcel= (id) => {
     method: 'get',
     url: `/cms/activity/export/excel/${id}`,
   })
+}
+
+// 获取预约列表
+export const applyUserList= (data) => {
+  return axios({
+    method: 'post',
+    url: '/cms/applyUser/list',
+    data
+  })
+}
+
+// 删除预约
+export const applyUserRemove= (id) => {
+  return axios({
+    method: 'get',
+    url: `/cms/applyUser/remove/${id}`,
+  })
 }

houtai/src/views/tab1/index.vue

@@ -75,8 +75,11 @@
               {{ mainObj[row.status] }}
             </template>
           </el-table-column>
-          <el-table-column label="操作" width="280">
+          <el-table-column label="操作" width="340">
             <template #default="{ row }">
+              <el-button type="text" @click="toInfo(row.id)"
+                >预约详情</el-button
+              >
               <el-button type="text" @click="exportExcel(row.name, row.id)"
                 >预约名单导出</el-button
               >
@@ -180,6 +183,13 @@ export default {
   },
   //方法集合
   methods: {
+    // 点击预约详情
+    toInfo(id) {
+      this.$router.push({
+        path: "/layout/tab4",
+        query: { id, k: this.formData.pageNum },
+      });
+    },
     // 点击导出
     async exportExcel(name, id) {
       let res = await exportExcel(id);

houtai/src/views/tab4.vue

@@ -0,0 +1,256 @@
+<!--  -->
+<template>
+  <div class="tab4">
+    <div class="top">
+      <div class="tit"></div>
+      预约详情
+      <div class="btn" @click="back"></div>
+    </div>
+    <div class="main">
+      <!-- 搜索 -->
+      <div class="mainSear">
+        <div>
+          <span>关 键 字：</span>
+          <el-input
+            style="width: 300px"
+            type="text"
+            placeholder="请输入姓名关键词"
+            v-model="formData.searchKey"
+            maxlength="20"
+          >
+          </el-input>
+        </div>
+        <div class="btnn">
+          <el-button type="primary" @click="getList(formData)">查 询</el-button
+          >&emsp;
+          <el-button @click="reset">重 置</el-button>
+        </div>
+      </div>
+      <!-- 表格 -->
+      <div class="table">
+        <el-table :data="tableData" style="width: 100%" height="370">
+          <el-table-column label="编号" width="80">
+            <template slot-scope="scope">
+              {{
+                scope.$index + (formData.pageNum - 1) * formData.pageSize + 1
+              }}
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="activityName"
+            label="活动名称"
+          ></el-table-column>
+          <el-table-column prop="name" label="姓名"> </el-table-column>
+          <el-table-column prop="identity" label="身份证号" width="200">
+          </el-table-column>
+          <el-table-column prop="age" label="年龄" width="80">
+          </el-table-column>
+          <el-table-column prop="phone" label="电话"> </el-table-column>
+          <el-table-column prop="joinTime" label="预约日期"> </el-table-column>
+          <el-table-column prop="timeBucket" label="预约时间段">
+          </el-table-column>
+          <el-table-column prop="num" label="预约人数"> </el-table-column>
+          <el-table-column label="操作">
+            <template #default="{ row }">
+              <el-button type="text" @click="applyUserRemove(row.id)"
+                >删除</el-button
+              >
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <!-- 分页 -->
+      <div class="paging">
+        <span>共 {{ total }} 条</span>
+        <el-pagination
+          background
+          layout="sizes,prev, pager, next"
+          :total="total"
+          :current-page="formData.pageNum"
+          @current-change="currentChange"
+          @size-change="sizeChange"
+        >
+        </el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { applyUserList, applyUserRemove } from "@/utils/api";
+export default {
+  name: "tab4",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      total: 0,
+      formData: {
+        activityId: "",
+        pageNum: 1,
+        pageSize: 10,
+        searchKey: "",
+      },
+      tableData: [],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {
+    time(val) {
+      if (!val) this.formData.startTime = this.formData.endTime = "";
+      else {
+        this.formData.startTime = val[0];
+        this.formData.endTime = val[1];
+      }
+    },
+  },
+  //方法集合
+  methods: {
+    // 点击返回
+    back() {
+      let k = this.$route.query.k;
+      if (!k) k = "1";
+      this.$router.push({
+        path: "/layout/tab1",
+        query: { k },
+      });
+    },
+    // 点击删除
+    async applyUserRemove(id) {
+      this.$confirm("删除后，信息将无法恢复，是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(async () => {
+          let res = await applyUserRemove(id);
+          if (res.code === 0) {
+            this.$message.success("删除成功!");
+            this.getList(this.formData);
+          } else this.$message.warning(res.msg);
+        })
+        .catch(() => {
+          this.$message.info("已取消");
+        });
+    },
+    // 点击重置
+    reset() {
+      this.formData.pageNum = 1;
+      this.formData.pageSize = 10;
+      this.formData.searchKey = "";
+      this.getList(this.formData);
+    },
+    // 分页器方法
+    currentChange(val) {
+      // console.log('当前页改变了', val)
+      this.formData.pageNum = val;
+      this.getList(this.formData);
+    },
+    sizeChange(val) {
+      // console.log('条数改变了', val)
+      this.formData.pageNum = 1;
+      this.formData.pageSize = val;
+      this.getList(this.formData);
+    },
+    // 封装一个获取列表的方法
+    async getList(data) {
+      const res = await applyUserList(data);
+      this.total = res.data.total;
+      this.tableData = res.data.records;
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    let id = this.$route.query.id;
+    this.formData.activityId = Number(id);
+    this.getList(this.formData);
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.tab4 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  .top {
+    position: relative;
+    padding: 0 30px;
+    width: 100%;
+    height: 50px;
+    background-color: #fff;
+    box-shadow: 1px 1px 6px 0px black;
+    color: #b7b7b7;
+    font-size: 14px;
+    letter-spacing: 2px;
+    display: flex;
+    align-items: center;
+    .tit {
+      margin-right: 5px;
+      width: 3px;
+      height: 20px;
+      background-color: #6f774e;
+    }
+    .btn {
+      cursor: pointer;
+      position: absolute;
+      right: 30px;
+      top: 5px;
+      width: 110px;
+      height: 40px;
+      background: url("../assets/img/back.png");
+      background-size: 100% 100%;
+    }
+  }
+  .main {
+    padding: 10px 35px 24px;
+    margin-top: 15px;
+    background-color: #fff;
+    box-shadow: 1px 1px 6px 0px;
+    width: 100%;
+    height: calc(100% - 65px);
+    .mainSear {
+      position: relative;
+      margin-top: 22px;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      & > div {
+        margin-right: 60px;
+        & > span {
+          font-weight: 700;
+        }
+      }
+      .btnn {
+        position: absolute;
+        right: 0;
+        top: 0;
+      }
+    }
+    .table {
+      margin-top: 30px;
+    }
+    .paging {
+      display: flex;
+      align-items: center;
+      position: absolute;
+      bottom: 15px;
+      right: 50px;
+      & > span {
+        margin-right: 15px;
+        font-size: 13px;
+      }
+    }
+  }
+}
+</style>