11

src/components/index/SignUp/Header.vue

@@ -2,20 +2,22 @@
   <div class="Header">
     <div class="H_content com-container">
       <div class="image" @click="toRecruit">
-        <img :src="system_logo" alt=""/>
+        <img :src="system_logo" alt="" />
       </div>
       <div class="right">
         <el-dropdown @command="handleCommand" trigger="click">
           <div class="el-dropdown-link">
-            <img src="@/assets/img/default.svg" class="img_user"/>
+            <img src="@/assets/img/default.svg" class="img_user" />
             <span class="phone">{{ phone }}</span>
             <i class="el-icon-arrow-down el-icon--right"></i>
           </div>
           <el-dropdown-menu slot="dropdown">
             <el-dropdown-item command="1">
+              <i class="el-icon-user"></i>个人资料
+            </el-dropdown-item>
+            <el-dropdown-item command="2">
               <i class="el-icon-switch-button"></i>退出
-            </el-dropdown-item
-            >
+            </el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
@@ -23,21 +25,28 @@
   </div>
 </template>
 <script>
-  /* eslint-disable */
-  import Cookie from "js-cookie"
-  import {logout} from "r/index/login";
+/* eslint-disable */
+import Cookie from "js-cookie";
+import { logout } from "r/index/login";
 
-  export default {
+export default {
   name: "Header",
   data() {
     return {
-        phone: window.localStorage.getItem("phone" + this.$store.state.indexIdentity),
-        system_logo: window.localStorage.getItem("system_logo" + this.$store.state.indexIdentity),
+      phone: window.localStorage.getItem(
+        "phone" + this.$store.state.indexIdentity
+      ),
+      system_logo: window.localStorage.getItem(
+        "system_logo" + this.$store.state.indexIdentity
+      ),
     };
   },
   methods: {
     handleCommand(command) {
       if (command == 1) {
+        let code = this.$store.state.indexIdentity;
+        this.$router.push("/Info/personalInfo?code=" + code);
+      } else if (command == 2) {
         this.logout();
       }
     },
@@ -56,7 +65,7 @@
       window.localStorage.clear();
       let code = this.$store.state.indexIdentity;
       await this.$router.replace("/" + code);
-        this.$message.success('退出成功');
+      this.$message.success("退出成功");
       await logout({});
     },
     // 点击图片跳转到招生简章页面
@@ -66,12 +75,12 @@
       this.$router.replace("/" + code);
     },
   },
-  };
+};
 </script>
 <style lang="scss" scoped>
-  @import "a/scss/common";
+@import "a/scss/common";
 
-  .Header {
+.Header {
   font-family: PingFang SC;
   height: 80px;
   box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.12);
@@ -118,5 +127,5 @@
       }
     }
   }
-  }
+}
 </style>

src/components/index/SignUp/referInfo.vue

@@ -360,7 +360,6 @@
 
 <script>
 /* eslint-disable */
-import Cookie from "js-cookie";
 import {
   getAccount,
   getAchievementOss,
@@ -900,7 +899,8 @@ export default {
                 let code = this.$store.state.indexIdentity;
                 window.localStorage.setItem(
                   "sign_up_file_" +
-                    +window.localStorage.getItem("phone" + code)+code,
+                    +window.localStorage.getItem("phone" + code) +
+                    code,
                   JSON.stringify(this.fileList)
                 );
               })

src/router/index.js

@@ -6,6 +6,7 @@ import store from '@/store'
 
 import indexLogin from './index/login'
 import indexCamp from './index/camp'
+import personalInfo from './index/personalInfo'
 import {
   getCam,
   getCamInfo
@@ -13,7 +14,6 @@ import {
 import {
   Message
 } from 'element-ui';
-import Cookie from "js-cookie"
 
 Vue.prototype.$message = Message;
 
@@ -42,6 +42,17 @@ const routes = [{
       import('v/index/camp/Index.vue'),
     children: [...indexCamp]
   },
+  {
+    path: '/Info',
+    name: 'Info',
+    meta: {
+      title: '个人信息'
+    },
+    // redirect: '/cerificate/signUp',
+    component: () =>
+      import('v/index/Info/Index.vue'),
+    children: [...personalInfo]
+  },
   {
     path: '/:code',
     name: 'recruit',

src/router/index/personalInfo.js

+export default [{
+    path: '/personalInfo',
+    name: 'index-personalInfo',
+    component: () => import(/* webpackChunkName: "login" */ 'v/index/Info/personalInfo.vue'),
+    meta: {
+      title: '个人资料'
+    }
+  },
+  {
+    path: '/password',
+    name: 'index-password',
+    component: () => import(/* webpackChunkName: "reset" */ 'v/index/Info/password.vue'),
+    meta: {
+      title: '修改密码'
+    }
+  },
+ 
+  ]
+  
\ No newline at end of file

src/views/index/Info/Index.vue

+<template>
+  <div class="camp-index">
+    <el-header height="104px">
+      <Header></Header>
+      <div class="bg-top"></div>
+    </el-header>
+    <div class="com-container">
+      <div class="index-container">
+        <div class="camp_left" ref="leftBoxFu">
+          <ul
+            class="camp_left_box"
+            ref="leftBox"
+            :class="{
+              'is-fixed': isPosition == 1,
+              'is-absolute': isPosition == 2,
+            }"
+          >
+            <li
+              v-for="(item, index) in tabs"
+              :key="index"
+              :class="{ active: campindex_type === index }"
+              @click="ToSignUp(index)"
+            >
+              <img :src="item.url" />
+              {{ item.desc }}
+            </li>
+          </ul>
+        </div>
+
+        <div class="camp_right" ref="rightBox">
+          <router-view @getStatus="getStatus" />
+        </div>
+      </div>
+    </div>
+    <Footer></Footer>
+  </div>
+</template>
+
+<script>
+/* eslint-disable */
+import Header from "@/components/index/SignUp/Header.vue";
+import Footer from "@/components/index/Footer.vue";
+import svg1 from "@/assets/img/signUp/icon.svg";
+import svg2 from "@/assets/img/signUp/icon-1.svg";
+import svg3 from "@/assets/img/signUp/icon-2.svg";
+
+export default {
+  name: "campIndex",
+  components: {
+    Header,
+    Footer,
+  },
+  // props:{}
+  data() {
+    return {
+      index: 0,
+      isPosition: 0, // 左侧box是否浮动
+      pageYOffset: 0, // 左侧box浮动时，滚动的高度
+      scorllHeight: 0, // 最大滚动高度
+      tabs: [
+        {
+          id: "0",
+          desc: "营地报名",
+          icon: "icon-icon1",
+          url: svg1,
+        },
+        {
+          id: "1",
+          desc: "营地作业",
+          icon: "icon-icon-1",
+          url: svg2,
+        },
+        {
+          id: "2",
+          desc: "营地证书",
+          icon: "icon-icon-2",
+          url: svg3,
+        },
+      ],
+
+      campindex_type: 0,
+      index_status: "",
+    };
+  },
+  watch: {
+    // type(val) {
+    //   console.log(val,'val')
+    //   window.localStorage.setItem("campindex_type", val);
+    // },
+  },
+  created() {
+    // this.ToSignUp(this.index);
+    this.getStatus();
+    //  this.$refs.child.signUpInit();
+  },
+  mounted() {
+    window.addEventListener("scroll", this.handleScrollX, true);
+    window.addEventListener("resize", this.onResize, true);
+  },
+  beforeDestroy() {
+    window.removeEventListener("scroll", this.handleScrollX, true);
+    window.removeEventListener("resize", this.onResize, true);
+  },
+  methods: {
+    getStatus(val) {
+      // console.log(val, "index_type");
+      this.index_status = val;
+      this.ToSignUp(this.campindex_type);
+    },
+    ToSignUp(index) {
+      // console.log(index,'index')
+      let code = this.$store.state.indexIdentity;
+      this.campindex_type = index;
+      if (this.campindex_type == 0) {
+        this.$router.push("/signUp/" + this.index_status + "?code=" + code);
+      } else if (this.campindex_type == 1) {
+        this.$router.push("/homework?code=" + code);
+      } else if (this.campindex_type == 2) {
+        this.$router.push("/certificate?code=" + code);
+      }
+    },
+    onResize() {
+      const refLeft = this.$refs["leftBox"];
+      const leftBoxFu = this.$refs["leftBoxFu"];
+      refLeft.style.width = leftBoxFu.offsetWidth + "px";
+    },
+    // 页面滚动事件
+    handleScrollX() {
+      const top = document.documentElement.scrollTop || document.body.scrollTop;
+      const refLeft = this.$refs["leftBox"];
+      const leftBoxFu = this.$refs["leftBoxFu"];
+      const refRight = this.$refs["rightBox"];
+      if (top > 0) {
+        if (this.isPosition == 0) {
+          this.scorllHeight = refRight.offsetHeight - refLeft.offsetHeight;
+          refLeft.style.width = leftBoxFu.offsetWidth + "px";
+        }
+        this.isPosition = 1;
+      } else {
+        if ((this.isPosition = 1)) {
+          this.isPosition = 0;
+        }
+      }
+      if (top >= this.scorllHeight) {
+        if (this.isPosition == 1) {
+          this.isPosition = 2;
+        }
+      } else if (top < this.scorllHeight) {
+        if (this.isPosition == 2) {
+          this.isPosition = 1;
+          refLeft.style.width = leftBoxFu.offsetWidth + "px";
+        }
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "a/scss/common";
+@import "a/scss/index";
+@import "a/style";
+@font-face {
+  font-family: "icomoon";
+  src: url("../../../assets/fonts/icomoon.eot?dcunb6");
+  src: url("../../../assets/fonts/icomoon.eot?dcunb6#iefix")
+      format("embedded-opentype"),
+    url("../../../assets/fonts/icomoon.ttf?dcunb6") format("truetype"),
+    url("../../../assets/fonts/icomoon.woff?dcunb6") format("woff"),
+    url("../../../assets/fonts/icomoon.svg?dcunb6#icomoon") format("svg");
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+.camp_left i {
+  font-family: "icomoon";
+}
+.camp-index {
+  background: #f8f8f8;
+
+  .el-header {
+    position: fixed;
+    width: 100%;
+    padding: 0;
+    background-color: #ffffff;
+    z-index: 2000; //消息提示框z-index=2019
+
+    .bg-top {
+      height: 24px;
+      background-color: #f8f8f8;
+    }
+  }
+  // .com-container {
+  //   height: calc(100% - 100px);
+  // }
+  .index-container {
+    padding: 104px 0 70px 0;
+    display: flex;
+    flex-flow: row;
+
+    .camp_left {
+      //  width: 100px;
+      height: 100%;
+      position: relative;
+      width: 22%;
+      max-width: 280px;
+      min-width: 200px;
+      //  width: calc(100% - 100px);
+      height: 300px;
+
+      background-color: #ffffff;
+      border-radius: 8px;
+      padding: 20px 0;
+      margin-right: 25px;
+      .camp_left_box {
+        padding-inline-start: 0 !important;
+      }
+      &.is-fixed {
+        position: fixed;
+        top: 104px;
+        /*width: 14.4%;*/
+        max-width: 280px;
+        min-width: 216px;
+      }
+
+      &.is-absolute {
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+      }
+    }
+
+    li {
+      position: relative;
+      padding: 0 23px 0 51px;
+      height: 44px;
+      line-height: 44px;
+      margin: 10px 0;
+      font-size: 15px;
+      list-style: none;
+
+      img {
+        vertical-align: middle;
+        margin: -3px 8px 0 0;
+        width: 20px;
+        position: absolute;
+        left: -1000px;
+        filter: drop-shadow(var(--color) 1023px 13px) !important;
+      }
+
+      &.active,
+      &:hover {
+        cursor: pointer;
+        background-color: #f8f8f8;
+      }
+    }
+  }
+
+  .camp_right {
+    flex: 1;
+    // width: calc(100% - 100px);
+    // height: 100%;
+    // overflow: auto;
+    border-radius: 8px;
+    background-color: #ffffff;
+  }
+}
+</style>

src/views/index/recruit/Index.vue

@@ -65,7 +65,7 @@ export default {
     let code =this.$store.state.indexIdentity
       getCamInfo(code).then((res) => {
       // console.log(res, '33333')
-      // console.log(res.data.name, 'res.name')
+      console.log(res.data.name, 'res.name')
        document.title = res.data.name
         return false;
       })