fix /experience/*

ruoyi-ui/src/permission.js

@@ -66,7 +66,7 @@ router.beforeEach((to, from, next) => {
   } else {
     //console.log(whiteList.indexOf(to.path));
     // 没有token
-    if (whiteList.indexOf(to.path) !== -1 ||to.path.indexOf("/experience/choose/") != -1||to.path.indexOf("/experience/apply/") != -1||to.path.indexOf("/experience/result/") != -1) {
+    if (whiteList.indexOf(to.path) !== -1 ||to.path.indexOf("/experience") != -1) {
       // 在免登录白名单，直接进入
       next()
     } else {

ruoyi-ui/src/router/index.js

@@ -54,11 +54,11 @@ export const constantRoutes = [{
     hidden: true
   },
   {
-    path: '/experience/choose/:id(\\d+)',
+    path: '/experience/apply/:id(\\d+)',
     component: () =>
       import('@/views/benyi/experience/choose'),
-    hidden: true
+    hidden: true,
-  },
+    children: [
       {
         path: '/experience/apply/:id(\\d+)',
         component: () =>
@@ -70,6 +70,8 @@ export const constantRoutes = [{
         component: () =>
           import('@/views/benyi/experience/result'),
         hidden: true
+      }
+    ]
   },
   {
     path: '',

ruoyi-ui/src/views/benyi/experience/apply.vue

@@ -18,7 +18,6 @@
           <el-date-picker
             clearable
             size="small"
-            style="width: 200px"
             v-model="form.csrq"
             type="date"
             value-format="yyyy-MM-dd"
@@ -29,7 +28,6 @@
           <el-date-picker
             clearable
             size="small"
-            style="width: 200px"
             v-model="form.nrysj"
             type="date"
             value-format="yyyy-MM-dd"
@@ -43,7 +41,6 @@
                 clearable
                 size="small"
                 v-model="form.sqtysj"
-                style="width: 200px"
                 type="date"
                 value-format="yyyy-MM-dd"
                 placeholder="申请体验时间"
@@ -63,7 +60,7 @@
       </el-form>
       <div class="btns">
         <el-button class="btn" type="primary" @click="submitForm">确 定</el-button>
-        <el-button class="btn" @click="cancel">返 回</el-button>
+        <el-button class="btn" @click="reset">重 置</el-button>
       </div>
     </div>
   </div>
@@ -156,7 +153,7 @@ export default {
 
 <style lang="scss">
 .apply-input {
-  padding-top: 30px;
+  padding-top: 60px;
   p {
     margin: 0;
   }
@@ -166,6 +163,7 @@ export default {
   }
   .info {
     text-align: center;
+    font-size: 14px;
   }
   .apply-form {
     width: 500px;
@@ -182,18 +180,21 @@ export default {
   .come-txt {
     line-height: 22px;
     text-indent: 2em;
+    font-size: 14px;
   }
   .thanks-top {
     padding: 8px 0 8px 0;
     text-align: right;
+    font-size: 14px;
   }
   .thanks {
     text-align: right;
+    font-size: 14px;
   }
 }
 @media screen and (max-width: 768.89px) {
   .apply-input {
-    padding: 30px 10px 0;
+    padding: 60px 10px 30px;
     .apply-form {
       width: 100%;
     }

ruoyi-ui/src/views/benyi/experience/choose.vue

@@ -1,8 +1,29 @@
 <template>
-  <div class="result-content">
+  <section class="container flex">
-    <el-link class="btn" :href="href_apply">入班半日体验申请</el-link>
+		<aside class="aside navs">
-    <el-link class="btn" :href="href_result">申请结果查询</el-link>
+      <h3 class="title">体验申请</h3>
+      <router-link  class="btn" :class="{'active': active === 0}" :to="href_apply">入班半日体验申请</router-link>
+      <router-link class="btn" :class="{'active': active === 1}" :to="href_result">申请结果查询</router-link>
+    </aside>
+		<section class="flex flex-direction right">
+			<div class="content">
+        <router-view />
       </div>
+		</section>
+    <span class="el-icon-menu menu-icon" @click="showMenu"></span>
+    <el-drawer
+      :direction="`ltr`"
+      :modal="false"
+      title="我是标题"
+      :visible.sync="drawer"
+      class="navs"
+      :size="`180px`"
+      :with-header="false">
+      <h3 class="title">体验申请</h3>
+      <router-link  class="btn" :class="{'active': active === 0}" :to="href_apply">入班半日体验申请</router-link>
+      <router-link class="btn" :class="{'active': active === 1}" :to="href_result">申请结果查询</router-link>
+    </el-drawer>
+	</section>
 </template>
 <script>
 export default {
@@ -11,6 +32,8 @@ export default {
     return {
       href_apply: "",
       href_result: "",
+      active: 0,
+      drawer: true
     };
   },
   created() {
@@ -18,34 +41,121 @@ export default {
     this.href_apply = "/experience/apply/" + sid;
     this.href_result = "/experience/result/" + sid;
   },
+  mounted () {
+    this.getNav();
+  },
+  watch: {
+    $route: 'getNav'
+  },
+  methods: {
+    getNav () {
+      const path = this.$route.path;
+      if (path.indexOf('apply') > -1) {
+        this.active = 0;
+      } else {
+        this.active = 1;
+      }
+    },
+    showMenu () {
+      this.drawer = true;
+    }
+  }
 };
 </script>
 
 <style lang="scss" scoped>
-  .result-content {
+.container {
-    height: 100%;
+  height: 100vh;
-    background: linear-gradient(-45deg, #6ab7ff, #edf7fb);
+  position: relative;
+  .menu-icon {
+    display: none;
+  }
+  .el-drawer__wrapper {
+    display: none;
+  }
+}
+.flex {
   display: flex;
-    justify-content: center;
+}
-    padding-top: 100px;
+.flex-direction {
-    .btn {
+  flex-direction: column;
-      width: 200px;
+}
-      height: 40px;
+.right {
-      line-height: 40px;
+  flex: 1;
-      text-align: center;
+}
-      margin: 0 10px;
+.content {
-      font-size: 16px;
+  flex: 1;
-      font-weight: 700;
+}
-      text-decoration: none;
+.content > * {
-      background: #1b469c;
+  box-sizing: border-box;
+}
+.aside {
+  padding: 0;
+  margin: 0;
+  flex: 0 0 200px;
+  background:#011627;
+}
+.navs {
+  .title {
+    font-size: 18px;
+    font-weight: 600;
+    color: #fff;
+    text-align: center;
+    margin: 0;
+    padding: 15px 0;
+    background: #0a56ca;
+  }
+  .btn {
+    position: relative;
+    display: block;
+    width: 100%;
+    height: 44px;
+    line-height: 44px;
+    text-align: center;
+    font-size: 14px;
+    text-decoration: none;
     color: #fff;
-      border-radius: 20px;
     &::after {
       display: none;
     }
     transition: all .5s;
     &:hover {
-        background: #072052;
+      background: #77a4ff;
+    }
+    &.active {
+      &::before {
+        content: '';
+        position: absolute;
+        right: 0;
+        top: 18px;
+        border: 5px solid #fff;
+        border-top-color: transparent;
+        border-left-color: transparent;
+        border-bottom-color: transparent;
+      }
+      background: #000;
+    }
+  }
+}
+@media screen and (max-width: 768.89px) {
+  .container {
+    .aside {
+      display: none;
+    }
+    .menu-icon {
+      position: absolute;
+      display: block;
+      left: 15px;
+      top: 20px;
+      font-size: 34px;
+      color: #0a56ca;
+      cursor: pointer;
+    }
+    .el-drawer__wrapper {
+      display: block;
+    }
+    ::v-deep .el-drawer {
+      background:#011627;
     }
   }
 }

ruoyi-ui/src/views/benyi/experience/result.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <div class="result-container">
     <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
       <el-form-item label="幼儿姓名" prop="yexm">
         <el-input v-model="queryParams.yexm" placeholder="请输入幼儿姓名" clearable size="small" />
@@ -9,35 +9,47 @@
       </el-form-item>
       <el-form-item>
         <el-button type="primary" size="mini" @click="handleQuery">查询</el-button>
-        <el-button type="primary" size="mini" @click="cancel">返回</el-button>
+        <el-button size="mini" @click="cancel">重置</el-button>
       </el-form-item>
     </el-form>
-    <div v-show="hide">
+    <div class="main" v-show="hide">
-      <h2>入班半日体验申请表</h2>
+      <h2 class="title">体验申请查询结果</h2>
-      <el-row :gutter="15">
+      <div class="result-info">
-        <el-form ref="form" :model="form" label-width="80px">
+        <h3 class="title">园长答复</h3>
-          <el-col :span="12">
+        <div class="info">
+          <el-alert title="通过申请" type="success" description="hfrn" :closable="false" show-icon></el-alert>
+          <el-alert
+            title="未通过申请"
+            type="error"
+            description="文字说明文字说明文字说明文字说明文字说明文字说明"
+            :closable="false"
+            show-icon
+          ></el-alert>
+        </div>
+      </div>
+      <div class="result-info">
+        <h3 class="title">园长指示</h3>
+        <div class="info">
+          <el-alert title="yzzs" :closable="false" type="info"></el-alert>
+        </div>
+      </div>
+      <div class="result-form">
+        <p class="form-title">提交信息核对</p>
+        <el-form class="form" ref="form" :model="form" label-width="110px">
           <el-form-item label="家长姓名" prop="jzxm">
             <el-input v-model="form.jzxm" placeholder="请输入家长姓名" :disabled="hide" />
             <el-input v-model="form.schoolid" v-if="false" />
           </el-form-item>
-          </el-col>
-          <el-col :span="12">
           <el-form-item label="联系方式" prop="lxfs">
             <el-input v-model="form.lxfs" placeholder="请输入联系方式" :disabled="hide" />
           </el-form-item>
-          </el-col>
-          <el-col :span="12">
           <el-form-item label="幼儿姓名" prop="yexm">
             <el-input v-model="form.yexm" placeholder="请输入幼儿姓名" :disabled="hide" />
           </el-form-item>
-          </el-col>
-          <el-col :span="12">
           <el-form-item label="幼儿出生日期" prop="csrq">
             <el-date-picker
               clearable
               size="small"
-                style="width: 200px"
               v-model="form.csrq"
               type="date"
               value-format="yyyy-MM-dd"
@@ -45,14 +57,10 @@
               :disabled="hide"
             ></el-date-picker>
           </el-form-item>
-          </el-col>
-
-          <el-col :span="12">
           <el-form-item label="拟入园时间" prop="nrysj">
             <el-date-picker
               clearable
               size="small"
-                style="width: 200px"
               v-model="form.nrysj"
               type="date"
               value-format="yyyy-MM-dd"
@@ -60,13 +68,8 @@
               :disabled="hide"
             ></el-date-picker>
           </el-form-item>
-          </el-col>
-          <el-col :span="24">
-            <el-collapse v-model="activeNames">
-              <el-collapse-item title="园长你好" name="1">
           <div>
-                  为了更好地了解贵园，我申请来贵园进行入班半日体验。我预约
+            <el-form-item label="预约体验时间" prop="sqtysj">
-                  <el-form-item prop="sqtysj">
               <el-date-picker
                 clearable
                 size="small"
@@ -82,24 +85,10 @@
                 <el-radio label="1">上午</el-radio>
                 <el-radio label="2">下午</el-radio>
               </el-radio-group>
-                  </el-form-item>来园入班体验。请园长为我安排与我孩子年龄段相适应的班级。届时，我将与我的孩子准时入班进行半日体验。
+            </el-form-item>
           </div>
-                <div>请园长批准我的申请为盼。谢谢！</div>
-              </el-collapse-item>
-            </el-collapse>
-          </el-col>
-          <el-col :span="24" v-show="ishf">
-            <el-collapse v-model="activeNames">
-              <el-collapse-item title="园长答复" name="2">{{hfrn}}</el-collapse-item>
-            </el-collapse>
-          </el-col>
-          <el-col :span="24" v-show="ishf">
-            <el-collapse v-model="activeNames">
-              <el-collapse-item title="园长指示" name="3">{{yzzs}}</el-collapse-item>
-            </el-collapse>
-          </el-col>
         </el-form>
-      </el-row>
+      </div>
     </div>
   </div>
 </template>
@@ -111,11 +100,10 @@ export default {
   name: "result",
   data() {
     return {
-      hide: false,
+      hide: true,
-      ishf: false,
+      ishf: true,
-      hfrn: "",
+      hfrn: "sddfsdfsdffds",
-      yzzs: "",
+      yzzs: "sfdsfdsfdsf",
-      activeNames: ["1", "2", "3"],
       // 查询参数
       queryParams: {
         yexm: undefined,
@@ -180,8 +168,78 @@ export default {
     },
     // 返回按钮
     cancel() {
-      this.$router.go(-1);
+      this.queryParams = {
+        yexm: undefined,
+        lxfs: undefined,
+        schoolId: undefined,
+      };
     },
   },
 };
 </script>
+<style lang="scss" scoped>
+.result-container {
+  padding: 60px 15px 0;
+  .main {
+    padding-top: 10px;
+    border-top: 1px solid #eee;
+    .title {
+      text-align: center;
+      font-size: 18px;
+    }
+    .result-form {
+      .form-title {
+        display: flex;
+        align-items: center;
+        text-align: left;
+        text-align: left;
+        font-size: 14px;
+        font-weight: 700;
+        &::before {
+          content: "";
+          width: 3px;
+          height: 14px;
+          background: #0a56ca;
+          display: inline-block;
+          margin: 1px 5px 0 0;
+        }
+      }
+      .form {
+        width: 500px;
+        margin: 30px auto 0;
+      }
+    }
+    .result-info {
+      .title {
+        display: flex;
+        align-items: center;
+        text-align: left;
+        font-size: 14px;
+        font-weight: 700;
+        &::before {
+          content: "";
+          width: 3px;
+          height: 14px;
+          background: #0a56ca;
+          display: inline-block;
+          margin: 1px 5px 0 0;
+        }
+      }
+      .info {
+        padding: 0 20px;
+      }
+    }
+  }
+}
+@media screen and (max-width: 768.89px) {
+  .result-container {
+    .main {
+      .result-form {
+        .form {
+          width: 100%;
+        }
+      }
+    }
+  }
+}
+</style>

ruoyi-ui/vue.config.js

@@ -34,6 +34,7 @@ module.exports = {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
         target: `http://localhost:8080`,
+        // target: `http://120.53.14.147:9995`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''