up

houtai/src/router/index.js

@@ -31,8 +31,15 @@ const routes = [
         name: 'tab2',
         meta: { myInd: 2, myBac: 'tab2Bac' },
         component: () => import('../views/tab2/index.vue')
+      },
+      {
+        path: 'tab3',
+        name: 'tab3',
+        meta: { myInd: 3, myBac: 'tab2Bac' },
+        component: () => import('../views/tab3.vue')
       }
 
+
     ]
   }
 ]

houtai/src/utils/api.js

@@ -59,4 +59,19 @@ export const activityPublish = (id, display) => {
     method: 'get',
     url: `/cms/activity/publish/${id}/${display}`,
   })
+}
+// 特别提醒编辑
+export const remarkEdit = (data) => {
+  return axios({
+    method: 'post',
+    url: '/cms/activity/remark/edit',
+    data
+  })
+}
+// 特别提醒详情
+export const remarkDetail= () => {
+  return axios({
+    method: 'get',
+    url: '/cms/activity/remark/detail',
+  })
 }

houtai/src/utils/request.js

@@ -13,6 +13,7 @@ service.interceptors.request.use(function (config) {
   if (token) { // 判断是否有token,有，则
     // config.headers['Authorization'] = token
     config.headers.token = token
+    config.headers.TRACE_ID = Date.now()
   }
 
   return config

houtai/src/views/Layout.vue

@@ -36,6 +36,13 @@
           >
             社教活动管理
           </div>
+          <div
+            class="pathUrl"
+            :class="{ active: $route.meta.myInd === 3 }"
+            @click="push('/layout/tab3')"
+          >
+            特别提醒
+          </div>
         </div>
         <div class="mainLBox">
           <div class="tit tit2">系统管理</div>
@@ -299,6 +306,7 @@ export default {
       box-shadow: 1px 1px 6px 0px;
       background-color: #fff;
       width: 210px;
+      min-width: 210px;
       height: 100%;
       margin-right: 20px;
       .mainLBox {

houtai/src/views/tab3.vue

@@ -0,0 +1,123 @@
+<!--  -->
+<template>
+  <div class="tab3">
+    <div class="top">
+      <div class="tit"></div>
+      特别提醒
+    </div>
+    <div class="main">
+      <div id="div1" style="z-index: 1"></div>
+      <div class="btnn">
+        <el-button type="primary" @click="edit">编 辑</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { remarkEdit, remarkDetail } from "../utils/api";
+import E from "wangeditor";
+export default {
+  name: "tab3",
+  components: {},
+  data() {
+    //这里存放数据
+    return {};
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    async edit() {
+      if (this.editor.txt.html() === "")
+        return this.$message.warning("不能为空!");
+      let res = await remarkEdit({ content: this.editor.txt.html() });
+      if (res.code === 0) {
+        this.$message.success("编辑成功!");
+      } else this.$message.warning(res.msg);
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  async mounted() {
+    // 初始化富文本
+    // 富文本
+    this.editor = new E("#div1");
+    // 配置字体
+    this.editor.config.fontNames = [
+      "黑体",
+      "仿宋",
+      "楷体",
+      "标楷体",
+      "华文仿宋",
+      "华文楷体",
+      "宋体",
+      "微软雅黑",
+      "Arial",
+      "Tahoma",
+      "Verdana",
+      "Times New Roman",
+    ];
+    this.editor.config.showLinkVideo = false;
+    this.editor.create();
+    // 回显富文本
+    let res = await remarkDetail();
+    this.editor.txt.html(res.data.content);
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.tab3 {
+  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;
+    }
+  }
+  .main {
+    padding: 10px 35px 24px;
+    margin-top: 15px;
+    background-color: #fff;
+    box-shadow: 1px 1px 6px 0px;
+    width: 100%;
+    height: calc(100% - 65px);
+    #div1 {
+      width: 100%;
+      height: 90%;
+      /deep/.w-e-text-container {
+        height: 400px !important;
+      }
+    }
+    .btnn {
+      display: flex;
+      justify-content: center;
+    }
+  }
+}
+</style>

web/src/assets/base.css

@@ -97,4 +97,16 @@ input::-webkit-input-placeholder{
   }
   input:-ms-input-placeholder{  /* Internet Explorer 10-11 */ 
     color:#ccc;
+  }
+  .van-dialog__header{
+    color: #858B6B;
+  }
+  .van-dialog__message--has-title{
+    color: #858B6B;
+  }
+  .van-button--default{
+    color: #858B6B;
+  }
+  .van-dialog__confirm, .van-dialog__confirm:active{
+    color: black;
   }

web/src/router/index.js

@@ -27,10 +27,33 @@ const routes = [
     name: 'succOrder',
     component: () => import('../views/succOrder.vue')
   },
+  // 预约列表页面
+  {
+    path: '/orderList/:ID',
+    name: 'orderList',
+    component: () => import('../views/orderList.vue')
+  },
+  // 活动详情页面
+  {
+    path: '/detail/:id',
+    name: 'detail',
+    component: () => import('../views/detail.vue')
+  },
+  // 特别提醒页面
+  {
+    path: '/warn',
+    name: 'warn',
+    component: () => import('../views/warn.vue')
+  },
 ]
-
 const router = new VueRouter({
   routes
 })
 
+router.beforeEach((to, from, next) => {
+  // 让页面回到顶部
+  window.scrollTo({ top: 0 });
+  // 调用 next()，一定要调用 next 方法，否则钩子就不会被销毁
+  next()
+})
 export default router

web/src/utlis/api.js

@@ -27,4 +27,19 @@ export const activityApply = (data) => {
     url: '/show/activity/apply',
     data
   })
+}
+//通过身份证获取预约列表
+export const applyQuery = (data) => {
+  return axios({
+    method: 'post',
+    url: '/show/apply/query',
+    data
+  })
+}
+// 点击取消预约
+export const applyRemove = (applyUserId) => {
+  return axios({
+    method: 'get',
+    url: `/show/apply/remove/${applyUserId}`,
+  })
 }

web/src/utlis/request.js

@@ -6,20 +6,20 @@ const service = axios.create({
   timeout: 5000
 })
 // // 请求拦截器
-// service.interceptors.request.use(function (config) {
-//   // console.log('触发拦截器')
-//   // 在发送请求之前做些什么：看看有没有token，如果有通过请求头的方式传递token
-//   const token = localStorage.getItem('WLBWG_token')
-//   if (token) { // 判断是否有token,有，则
-//     // config.headers['Authorization'] = token
-//     config.headers.token = token
-//   }
-
-//   return config
-// }, function (error) {
-//   // 对请求错误做些什么
-//   return Promise.reject(error)
-// })
+service.interceptors.request.use(function (config) {
+  // console.log('触发拦截器')
+  // 在发送请求之前做些什么：看看有没有token，如果有通过请求头的方式传递token
+  // const token = localStorage.getItem('WLBWG_token')
+  // if (token) { // 判断是否有token,有，则
+  //   // config.headers['Authorization'] = token
+  //   config.headers.token = token
+  // }
+  config.headers.TRACE_ID = Date.now()
+  return config
+}, function (error) {
+  // 对请求错误做些什么
+  return Promise.reject(error)
+})
 
 // 添加响应拦截器
 service.interceptors.response.use(function (response) {

web/src/views/Home.vue

@@ -66,6 +66,8 @@ export default {
   watch: {
     topId(val) {
       this.getList(`?status=${val}`);
+      // 回到顶点
+      window.scrollTo({ top: 0 });
     },
   },
   methods: {

web/src/views/Info.vue

@@ -4,7 +4,7 @@
     <div class="topImg">
       <img :src="baseURL + data.filePath" alt="" />
     </div>
-    <div class="name">{{ data.name }}</div>
+    <div class="nameO">{{ data.name }}</div>
     <!-- 活动时间 -->
     <div class="time">
       <p>
@@ -33,8 +33,20 @@
           <div
             v-for="(item, index) in section"
             :key="index"
-            :class="{ active: sectionId === index, dis: timeFlag && item.dis }"
-            @click="selectSection(index, item.startTime, item.endTime, item.id)"
+            :class="{
+              active: sectionId === index,
+              dis: timeFlag && item.dis,
+              diss: item.quota <= 0,
+            }"
+            @click="
+              selectSection(
+                index,
+                item.startTime,
+                item.endTime,
+                item.id,
+                item.quota
+              )
+            "
           >
             <div class="one">{{ item.startTime }}-{{ item.endTime }}</div>
             <div v-if="timeFlag && item.dis">已结束预约</div>
@@ -137,7 +149,7 @@ export default {
         activityId: "", //活动id
         name: "说说", //姓名
         age: "", //年龄
-        identity: "421083199504071211", //身份证号
+        identity: "421083199504071212", //身份证号
         joinTime: "", //参加时间,yyyy-MM-dd
         num: 1, //参加人数, 最多3人
         phone: "18702020202", //手机号
@@ -150,6 +162,7 @@ export default {
         phone: false,
         age: false,
       },
+      Rnum: 1,
     };
   },
   //监听属性 类似于data概念
@@ -192,6 +205,15 @@ export default {
       } else this.fromFlag.age = false;
       if (this.fromFlag.identity || this.fromFlag.phone) return;
 
+      if (this.from.num > this.Rnum) {
+        Dialog.alert({
+          message: "人数超出!",
+        }).then(() => {
+          // on close
+        });
+        return;
+      }
+
       // 发送请求
       let res = await activityApply(this.from);
       if (res.code === 0) {
@@ -212,7 +234,6 @@ export default {
           // on close
         });
       }
-      console.log(res);
     },
     // 检查身份证格式
     blurInput() {
@@ -271,10 +292,11 @@ export default {
       if (flag) this.timeFlag = false;
       else this.timeFlag = true;
     },
-    selectSection(index, startTime, endTime, id) {
+    selectSection(index, startTime, endTime, id, num) {
       this.sectionId = index;
       this.from.timeBucket = `${startTime}-${endTime}`;
       this.from.timeBucketId = id;
+      this.Rnum = num;
     },
     // 封装一个获取时间段详情的方法
     async timeBucketDetail(id, date) {
@@ -351,10 +373,12 @@ export default {
         }
       }
       this.week = tempArr;
-
-      this.timeBucketDetail(id, res.data.startDay);
-
-      console.log(123, res);
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.selectWeek(0, tempArr[0].tempFlag, tempArr[0].date);
+        }, 100);
+      });
+      // this.timeBucketDetail(id, res.data.startDay);
     }
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
@@ -377,12 +401,13 @@ export default {
       width: 100%;
     }
   }
-  .name {
+  .nameO {
     color: #6f774f;
     font-weight: 700;
     font-size: 24px;
     text-align: center;
     margin-bottom: 20px;
+    padding: 0 10px;
   }
   .time {
     padding: 0 24px;
@@ -488,6 +513,11 @@ export default {
           background-color: #f8f8f8;
           pointer-events: none;
         }
+        .diss {
+          border: none;
+          background-color: #f8f8f8;
+          pointer-events: none;
+        }
       }
     }
   }

web/src/views/Inquire.vue

@@ -18,7 +18,7 @@ export default {
   data() {
     //这里存放数据
     return {
-      value: "",
+      value: "421083199504071212",
       tit: true,
     };
   },
@@ -34,21 +34,21 @@ export default {
         /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
       this.tit = idcardReg.test(this.value);
     },
-    toSearch(){
-      this.blurInput()
-      if(this.tit){
-        console.log('过');
+    toSearch() {
+      this.blurInput();
+      if (this.tit) {
+        this.$router.push(`/orderList/${this.value}`);
       }
-    }
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
-    this.$nextTick(()=>{
-      let dom =document.querySelector('.IDInput')
-      dom.focus()
-    })
+    this.$nextTick(() => {
+      let dom = document.querySelector(".IDInput");
+      dom.focus();
+    });
   },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前

web/src/views/detail.vue

@@ -0,0 +1,193 @@
+<template>
+  <div class="detail">
+    <Back />
+    <div class="topImg">
+      <img :src="baseURL + data.filePath" alt="" />
+    </div>
+    <div class="main">
+      <div class="box1">
+        <div class="titt">
+          <h3>{{ data.name }}</h3>
+          <span>{{ data.visit }}次浏览</span>
+        </div>
+        <div class="txtt">
+          活动时间：{{ data.startDay }} - {{ data.endDay }}
+        </div>
+        <div class="txtt">活动地点：{{ data.address }}</div>
+        <div class="xian"></div>
+        <div class="box2">
+          <div class="titt">
+            <h3>活动概况</h3>
+            <div class="warn">
+              <span @click="$router.push('/warn')">特别提醒</span>
+              <img src="../assets/img/warn.png" alt="" />
+            </div>
+          </div>
+          <div class="txtt">活动主持人：{{ data.emcee }}</div>
+          <div class="txtt" v-if="data.age">
+            参与活动年龄段：{{ data.age.replace(",", "-") }}岁
+          </div>
+          <div class="txtt">剩余预约名额：{{ "??" }}个</div>
+          <div class="state" v-if="data.status == 3">已结束</div>
+          <div class="state" v-else-if="data.status == 1">未开始</div>
+          <div
+            class="state stateV"
+            v-else
+            @click="$router.push(`/Info/${data.id}`)"
+          >
+            预约
+          </div>
+          <div class="xian"></div>
+        </div>
+        <div class="box3">
+          <div class="titt">
+            <h3>活动详情</h3>
+          </div>
+          <div class="text" v-html="data.content"></div>
+        </div>
+      </div>
+    </div>
+    <ToIndex />
+  </div>
+</template>
+
+<script>
+import Back from "../components/Back.vue";
+import ToIndex from "../components/ToIndex.vue";
+import axios from "@/utlis/request";
+import { webDetailApi } from "../utlis/api";
+export default {
+  name: "detail",
+  components: { Back, ToIndex },
+  data() {
+    //这里存放数据
+    return {
+      data: {},
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {},
+  //生命周期 - 创建完成（可以访问当前this实例）
+  async created() {
+    // 获取服务器前缀地址
+    this.baseURL = axios.defaults.baseURL;
+
+    let id = Number(this.$route.params.id);
+    let res = await webDetailApi(id);
+    this.data = res.data;
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.detail {
+  padding-bottom: 30px;
+  .topImg {
+    margin-bottom: 30px;
+    & > img {
+      width: 100%;
+    }
+  }
+  .main {
+    transform: translateY(-50px);
+    width: 100%;
+    padding: 30px 0px 0;
+    background-color: #fff;
+    border-radius: 10px 10px 0 0;
+    .titt {
+      padding: 0 30px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 30px;
+      & > h3 {
+        display: inline-block;
+        padding: 0 8px;
+        position: relative;
+        color: #6f774f;
+        font-size: 24px;
+        font-weight: 700;
+        max-width: calc(100% - 60px);
+        line-height: 28px;
+        &::before {
+          z-index: -1;
+          content: "";
+          position: absolute;
+          bottom: -3px;
+          left: 0;
+          width: 100%;
+          height: 8px;
+          background-color: #f2ebe2;
+        }
+      }
+      & > span {
+        font-size: 14px;
+        color: #b5b4b4;
+      }
+      .warn {
+        font-size: 16px;
+        color: #be9c6c;
+        & > img {
+          padding-top: 3px;
+          width: 14px;
+          height: 14px;
+          margin-left: 5px;
+        }
+      }
+    }
+    .txtt {
+      padding: 0 30px;
+      line-height: 20px;
+      color: #696969;
+      font-size: 16px;
+      margin-bottom: 20px;
+    }
+    .xian {
+      width: 100%;
+      height: 4px;
+      background-color: #f8f8f8;
+      margin: 24px 0;
+    }
+    .box2 {
+      position: relative;
+      .state {
+        position: absolute;
+        bottom: 22px;
+        right: 20px;
+        color: #bfbfbf;
+        width: 100px;
+        height: 30px;
+        line-height: 30px;
+        border-radius: 15px;
+        text-align: center;
+        align-items: center;
+      }
+      .stateV {
+        background-color: #be9c6c;
+        color: #fff;
+      }
+    }
+    .box3 {
+      .text {
+        padding: 0 20px;
+        color: #696969;
+        /deep/p {
+          line-height: 20px;
+        }
+      }
+    }
+  }
+}
+</style>

web/src/views/orderList.vue

@@ -0,0 +1,297 @@
+<template>
+  <div class="orderList">
+    <Back />
+    <div class="top">
+      <div
+        v-for="item in topData"
+        :key="item.id"
+        @click="topId = item.id"
+        :class="{ active: topId === item.id }"
+      >
+        {{ item.name }}
+      </div>
+    </div>
+    <div class="none" v-if="data.length === 0">
+      <img src="../assets/img/none.png" alt="" />
+      <p>暂无预约活动</p>
+    </div>
+    <div class="row" v-for="item in data" :key="item.id" v-else>
+      <div
+        class="rowTop"
+        :class="{
+          end: item.status == 3,
+          notYet: item.status == 1,
+        }"
+      >
+        <div class="ll">
+          <h4>{{ item.activityName }}</h4>
+          <div @click="toDetail(item.activityId)">查看活动详情<img src="../assets/img/to.png" alt="" /></div>
+        </div>
+        <div class="rr">
+          <p>申请时间：{{ item.createTime }}</p>
+        </div>
+      </div>
+      <div class="rowFl">
+        <div>
+          <img src="../assets/img/l1.png" alt="" />
+          <p>参观日期：{{ item.joinTime }} {{ item.week }}</p>
+        </div>
+        <div>
+          <img src="../assets/img/l2.png" alt="" />
+          <p>参观时段：{{ item.timeBucket }}</p>
+        </div>
+        <div>
+          <img src="../assets/img/l3.png" alt="" />
+          <p>参观人数：{{ item.num }}人</p>
+        </div>
+        <div
+          class="btnn4 btnn"
+          v-if="item.status == 1"
+          @click="cancel(item.id)"
+        >
+          取消预约
+        </div>
+        <div class="btnn" v-if="item.status == 2">进行中</div>
+        <div class="btnn btnn2" v-else-if="item.status == 1">暂未开始</div>
+        <div class="btnn btnn3" v-else>已结束</div>
+      </div>
+    </div>
+    <ToIndex />
+  </div>
+</template>
+
+<script>
+import { Dialog, Notify } from "vant";
+import ToIndex from "../components/ToIndex.vue";
+import Back from "../components/Back.vue";
+import { applyQuery, applyRemove } from "@/utlis/api";
+export default {
+  name: "orderList",
+  components: { Back, ToIndex },
+  data() {
+    //这里存放数据
+    return {
+      ID: "",
+      topId: "",
+      topData: [
+        { id: "", name: "全部" },
+        { id: 2, name: "活动中" },
+        { id: 1, name: "未开始" },
+        { id: 3, name: "已结束" },
+      ],
+      data: [],
+      apiId: "",
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {
+    topId(val) {
+      this.getList({ identity: this.ID, status: val });
+      // 回到顶点
+      window.scrollTo({ top: 0 });
+    },
+  },
+  //方法集合
+  methods: {
+    // 点击查看活动详情
+    toDetail(id){
+      this.$router.push(`/detail/${id}`)
+    },
+    async beforeClose(action, done) {
+      if (action === "confirm") {
+        let res = await applyRemove(this.apiId);
+        done();
+        if (res.code === 0) {
+          Notify({ type: "success", message: "取消成功" });
+          this.getList({ identity: this.ID, status: this.topId });
+        } else Notify({ type: "warning", message: res.msg });
+      } else {
+        done();
+      }
+    },
+    // 点击取消预约
+    cancel(id) {
+      this.apiId = id;
+      Dialog.confirm({
+        title: "提醒",
+        message: "您是否确定取消预约？",
+        beforeClose: this.beforeClose,
+      }).catch(() => {});
+    },
+    // 封装一个获取列表的方法
+    async getList(data) {
+      let timeChange = {
+        1: "周一",
+        2: "周二",
+        3: "周三",
+        4: "周四",
+        5: "周五",
+        6: "周六",
+        0: "周日",
+      };
+      let res = await applyQuery(data);
+      res.data.forEach((v) => {
+        // 计算参观日期是周几
+        let temp = v.joinTime.split("-");
+        let weeks = new Date(temp[0], parseInt(temp[1] - 1), temp[2]);
+        v.week = timeChange[weeks.getDay()];
+        // 超出当前时间的改变状态为已结束
+      });
+      this.data = res.data;
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.ID = this.$route.params.ID;
+    this.getList({ identity: this.ID });
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.orderList {
+  padding: 80px 20px 60px;
+  .top {
+    z-index: 998;
+    background-color: #fff;
+    max-width: 500px;
+    padding: 24px 10px 0 50px;
+    position: fixed;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 10px;
+    & > div {
+      text-align: center;
+      padding-bottom: 6px;
+      font-size: 16px;
+      color: #696969;
+    }
+    .active {
+      color: #858b6b;
+      border-bottom: 3px solid #858b6b;
+    }
+  }
+  .none {
+    margin-top: 100px;
+    width: 100%;
+    text-align: center;
+    & > img {
+      width: 200px;
+    }
+    & > p {
+      padding-left: 20px;
+      color: #858b6b;
+      margin-top: 15px;
+      text-align: center;
+    }
+  }
+  .row {
+    width: 100%;
+    height: 230px;
+    border-radius: 5px;
+    overflow: hidden;
+    box-shadow: 3px 3px 10px 3px #ccc;
+    margin-bottom: 24px;
+    .rowTop {
+      padding: 10px 15px 0;
+      color: #fff;
+      height: 90px;
+      background-color: #be9c6c;
+      .ll {
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        & > h4 {
+          height: 40px;
+          line-height: 40px;
+          letter-spacing: 1px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          font-weight: 700;
+        }
+        & > div {
+          min-width: 104px;
+          font-size: 14px;
+          & > img {
+            vertical-align: bottom;
+            margin-left: 5px;
+            width: 14px;
+          }
+        }
+      }
+      .rr {
+        margin-top: 5px;
+        font-size: 14px;
+      }
+    }
+    .end {
+      background-color: #bfbfbf;
+    }
+    .notYet {
+      background-color: #6f774f;
+    }
+    .rowFl {
+      position: relative;
+      height: 140px;
+      background-color: #fff;
+      padding: 10px 20px 0;
+      & > div {
+        height: 40px;
+        align-items: center;
+        display: flex;
+        & > img {
+          width: 16px;
+          margin-right: 10px;
+        }
+        & > p {
+          color: #696969;
+          font-size: 16px;
+        }
+      }
+      .btnn {
+        position: absolute;
+        right: 5px;
+        bottom: 14px;
+        width: 100px;
+        height: 36px;
+        border-radius: 20px;
+        color: #be9c6c;
+        // background-color: #be9c6c;
+        color: #be9c6c;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .btnn2 {
+        color: #6f774f;
+        // background-color: #6f774f;
+      }
+      .btnn3 {
+        color: #bfbfbf;
+        // background-color: #bfbfbf;
+      }
+      .btnn4 {
+        color: #fff;
+        bottom: 50px;
+        background-color: #6f774f;
+      }
+    }
+  }
+}
+</style>

web/src/views/succOrder.vue

@@ -1,54 +1,114 @@
 <template>
-<div class='succOrder'>
-  <Back />
-  <div class="main"></div>
-</div>
+  <div class="succOrder">
+    <Back />
+    <div class="main">
+      <div class="one">
+        <img src="../assets/img/succ.png" alt="" />
+        <h3>预约成功</h3>
+        <p>请您在预约日期时间段内参加活动</p>
+      </div>
+      <div class="tow">
+        <h3>{{ data.name }}</h3>
+        <div class="row">
+          <img src="../assets/img/1.png" alt="" />
+          <p>活动日期：{{ data.time }}</p>
+        </div>
+        <div class="row">
+          <img src="../assets/img/2.png" alt="" />
+          <p>活动时段：{{ data.time2 }}</p>
+        </div>
+        <div class="row">
+          <img src="../assets/img/3.png" alt="" />
+          <p>参观人数：{{ data.num }}人</p>
+        </div>
+      </div>
+      <p class="nowTime">申请时间：{{ data.nowTime }}</p>
+    </div>
+    <ToIndex />
+  </div>
 </template>
 
 <script>
 import Back from "../components/Back.vue";
+import ToIndex from "../components/ToIndex.vue";
 export default {
-name:'succOrder',
-components: {Back},
-data() {
-//这里存放数据
-return {
-
+  name: "succOrder",
+  components: { Back, ToIndex },
+  data() {
+    //这里存放数据
+    return {
+      data: {},
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {},
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.data = this.$route.query;
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 };
-},
-//监听属性 类似于data概念
-computed: {},
-//监控data中的数据变化
-watch: {},
-//方法集合
-methods: {
-
-},
-//生命周期 - 创建完成（可以访问当前this实例）
-created() {
-
-},
-//生命周期 - 挂载完成（可以访问DOM元素）
-mounted() {
-
-},
-beforeCreate() {}, //生命周期 - 创建之前
-beforeMount() {}, //生命周期 - 挂载之前
-beforeUpdate() {}, //生命周期 - 更新之前
-updated() {}, //生命周期 - 更新之后
-beforeDestroy() {}, //生命周期 - 销毁之前
-destroyed() {}, //生命周期 - 销毁完成
-activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
-}
 </script>
 <style lang='less' scoped>
-.succOrder{
-  padding: 20px 30px;
-  .main{
+.succOrder {
+  padding: 50px 30px;
+  .main {
     width: 100%;
-    height: 300px;
-    background-color: #ededed;
+    background: url("../assets/img/succBac.png");
+    background-size: 100% 100%;
+    color: #6f774f;
+    p{
+      font-size: 14px;
+    }
+    h3 {
+      font-size: 20px;
+      font-weight: 700;
+      text-align: center;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .one {
+      padding: 0 15px 20px;
+      text-align: center;
+      & > img {
+        margin: 30px 0 10px;
+        width: 70px;
+      }
+      & > p {
+        margin: 20px 0 0;
+      }
+    }
+    .tow {
+      padding: 20px 15px;
+      .row {
+        padding-left: 15px;
+        display: flex;
+        align-items: center;
+        margin: 15px 0;
+        & > img {
+          width: 22px;
+          margin-right: 20px;
+        }
+      }
+    }
+    .nowTime {
+      text-align: center;
+      height: 50px;
+      line-height: 50px;
+    }
   }
 }
-
 </style>

web/src/views/warn.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="warn">
+    <Back />
+    <div class="topImg">
+      <img src="../assets/img/warnBac.png" alt="" />
+    </div>
+    <ToIndex />
+  </div>
+</template>
+
+<script>
+import Back from "../components/Back.vue";
+import ToIndex from "../components/ToIndex.vue";
+export default {
+  name: "warn",
+  components: { Back, ToIndex },
+  data() {
+    //这里存放数据
+    return {};
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {},
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.warn {
+  padding-bottom: 100px;
+  .topImg {
+    margin-bottom: 30px;
+    & > img {
+      width: 100%;
+    }
+  }
+}
+</style>