Skip to content

C
campSite
Commit 25405ecc authored by 杨梦雪's avatar 杨梦雪
Browse files
Options

11

parent 81a359ed
Hide whitespace changes
Inline Side-by-side
Showing with 770 additions and 101 deletions
src/components/index/SignUp/Header.vue
View file @ 25405ecc
......@@ -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,100 +25,107 @@
</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 {
name: "Header",
data() {
return {
phone: window.localStorage.getItem("phone" + this.$store.state.indexIdentity),
system_logo: window.localStorage.getItem("system_logo" + this.$store.state.indexIdentity),
};
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
),
};
},
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();
}
},
methods: {
handleCommand(command) {
if (command == 1) {
this.logout();
}
},
// 退出
async logout() {
const confirmResult = await this.$confirm(`确认退出登录？`, "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
closeOnClickModal: false,
type: "warning",
}).catch((err) => err);
if (confirmResult !== "confirm")
return this.$message.info("您取消了退出");
// 退出
async logout() {
const confirmResult = await this.$confirm(`确认退出登录？`, "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
closeOnClickModal: false,
type: "warning",
}).catch((err) => err);
if (confirmResult !== "confirm")
return this.$message.info("您取消了退出");
// 清除本地缓存除了大学logo
window.localStorage.clear();
let code = this.$store.state.indexIdentity;
await this.$router.replace("/" + code);
this.$message.success('退出成功');
await logout({});
},
// 点击图片跳转到招生简章页面
toRecruit() {
// 清除本地缓存除了大学logo
let code = this.$store.state.indexIdentity;
this.$router.replace("/" + code);
},
// 清除本地缓存除了大学logo
window.localStorage.clear();
let code = this.$store.state.indexIdentity;
await this.$router.replace("/" + code);
this.$message.success("退出成功");
await logout({});
},
// 点击图片跳转到招生简章页面
toRecruit() {
// 清除本地缓存除了大学logo
let code = this.$store.state.indexIdentity;
this.$router.replace("/" + code);
},
};
},
};
</script>
<style lang="scss" scoped>
@import "a/scss/common";
@import "a/scss/common";
.Header {
font-family: PingFang SC;
height: 80px;
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.12);
.Header {
font-family: PingFang SC;
height: 80px;
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.12);
.H_content {
height: 100%;
display: flex;
flex-flow: row;
align-items: center;
justify-content: space-between;
.H_content {
height: 100%;
display: flex;
flex-flow: row;
align-items: center;
justify-content: space-between;
.image img {
// width: 318px;
height: 62px;
}
.image img {
// width: 318px;
height: 62px;
}
.right {
height: 80px;
.right {
::v-deep .el-dropdown {
height: 80px;
::v-deep .el-dropdown {
.el-dropdown-link {
height: 80px;
display: flex;
flex-flow: row;
align-items: center;
.el-dropdown-link {
height: 80px;
display: flex;
flex-flow: row;
align-items: center;
.img_user {
width: 34px;
height: 34px;
background-color: #d8d8d8;
border-radius: 50%;
}
.phone {
margin: 0 10px 0 12px;
}
.img_user {
width: 34px;
height: 34px;
background-color: #d8d8d8;
border-radius: 50%;
}
&:hover {
cursor: pointer;
.phone {
margin: 0 10px 0 12px;
}
}
&:hover {
cursor: pointer;
}
}
}
}
}
</style>
src/components/index/SignUp/referInfo.vue
View file @ 25405ecc
......@@ -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
View file @ 25405ecc
......@@ -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 0 → 100644
View file @ 25405ecc
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 0 → 100644
View file @ 25405ecc
<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/camp/Certificate.vue
View file @ 25405ecc
<template>
<div class="certificate">
<div class="title">
<div class="title">
<div class="homework_titile">营地证书</div>
</div>
<div class="content">
<div>
<!-- <div class="content_empty"> -->
<!-- <div>
<img src="@/assets/img/homework/homework.png" alt="" />
</div>
<p>同学你好，老师暂未发布作业</p>
<p>请于2021年XX年XX月XX日 前往网站查看作业</p>
<p>请于2021年XX年XX月XX日 前往网站查看作业</p> -->
<!-- </div> -->
<div class="content">
<div class="top">
<div class="p_title">恭喜你顺利jieyi</div>
<div>
<img src="@/assets/img/signUp/offer.png" alt="" />
</div>
<div class="btn">
<el-button @click="getAddress">获得营地证书</el-button>
</div>
</div>
<div class="pay_bottom">
<div>注意事项：</div>
<div>
1、学生支付完成后请不要立即关闭浏览器，等待支付完成返回本页面，以确认支付完成。
</div>
<div>
2、支付确认后，将不能再修改姓名和身份证号，请在支付前核对信息。
</div>
</div>
</div>
<!-- 确认收货地址对话框 -->
<el-dialog title="确认收货地址" :visible.sync="dialogVisible" width="40%">
<el-form ref="addressRef" :model="addressForm" :rules="addressRules">
<el-form-item label="收件人" prop="name">
<el-input
v-model="addressForm.name"
placeholder="填写真实姓名"
size="small"
clearable
></el-input>
</el-form-item>
<el-form-item label="收件人电话" prop="phone">
<el-input
v-model="addressForm.phone"
placeholder="填写真实姓名"
size="small"
clearable
></el-input>
</el-form-item>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="收货地址" prop="province">
<el-select
ref="province"
v-model="addressForm.province"
clearable
placeholder="选择省份"
@change="changeProvince(2, $event)"
>
<el-option
v-for="item in selectProvince"
:key="item.id"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item class="no_label" label=" " prop="city">
<el-select
ref="city"
v-model="addressForm.city"
clearable
placeholder="选择城市"
@change="changeCity($event)"
>
<el-option
v-for="item in selectCitySchool"
:key="item.id"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item class="no_label" label=" " prop="school">
<el-select
ref="school"
v-model="addressForm.school"
clearable
placeholder="选择所在区县"
>
<el-option
v-for="item in selectSchoolList"
:key="item.id"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-form-item label="" prop="detail_address">
<el-input
v-model="addressForm.detail_address"
placeholder="填写详细地址"
size="small"
clearable
></el-input>
</el-form-item>
</el-row>
</el-form>
<div class="btn">
<el-button type="primary" @click="dialogVisible = false"
>确 定</el-button
>
</div>
</el-dialog>
</div>
</template>
<script>
/* eslint-disable */
import { getProAndCity, getSchool } from "r/index/signUp";
import validator from "common/validator";
export default {
name: "certificate",
data() {
return {
dialogVisible: false, //确认收货地址对话框
addressRules: {
name: [{ required: true, message: "姓名不能为空！", trigger: "blur" }],
phone: [
{
required: true,
message: "手机号不能为空！",
trigger: "blur",
},
{ validator: validator.validatePhone, trigger: "blur" },
],
province: [
{
required: true,
message: "请选择所在学校省份！",
trigger: "change",
},
],
city: [
{
required: true,
message: "请选择所在学校城市！",
trigger: "change",
},
],
school: [
{ required: true, message: "请选择所在学校！", trigger: "change" },
],
detail_address: [
{ required: true, message: "详细地址不能为空！", trigger: "blur" },
],
},
addressForm: {
name: "",
phone: "",
province: null,
city: null,
school: null,
detail_address: "",
},
selectProvince: [], //省份
CityName: {}, //根据省份筛选出所有城市的对象
selectCityJiguan: [], //籍贯城市列表
selectCitySchool: [], //就读中学-城市列表
selectSchoolList: [], //就读中学-中学列表
jgProvinceCode: "", //省份id
jiguan_city: "", //城市id(和省份id拼接)
};
},
created() {
// this.$emit("getStatus", false, 2);
},
watch: {
// this.$emit("getStatus", false, 2);
},
watch: {},
methods: {
getAddress() {
this.dialogVisible = true;
},
// 获取省份城市
getProAndCity() {
getProAndCity({}).then((res) => {
// console.log(res, "getProAndCity");
if (res.data.code != 200) {
return this.$message.error(res.data.message);
}
this.selectProvince = res.data.province_list;
// this.CityName = res.data.city_list;
// console.log(this.selectProvince, this.CityName);
});
},
//选择籍贯省份change事件
changeProvince(type, val, status) {
// console.log(type, val);
if (type == 1) {
this.selectCityJiguan = [];
this.selectCityJiguan = this.getCurrentCityLists(val);
if (!status) {
this.jiguan_city = "";
this.addressForm.jiguan_code = "";
}
} else {
this.selectCitySchool = [];
this.selectCitySchool = this.getCurrentCityLists(val); //在此调用城市筛选列表
if (!status) {
this.addressForm.city = "";
this.addressForm.school = "";
this.selectSchoolList = []; //重新选择省份时候，学校list清空
}
}
},
//返回当前省份下的城市列表
getCurrentCityLists(val) {
let currentCity = [];
if (
this.CityName == null ||
!this.CityName ||
Object.values(this.CityName).length == 0
) {
getProAndCity({})
.then((res) => {
// console.log(res, "getProAndCity");
if (res.data.code === 200) {
// this.selectProvince = res.data.province_list;
this.CityName = res.data.city_list;
for (let key in this.CityName) {
if (this.CityName[key].parent_id == val) {
currentCity.push(this.CityName[key]);
}
}
return currentCity;
} else {
this.$message.error(res.data.message);
}
})
.catch((err) => {
this.$message.error(err);
});
} else {
for (let key in this.CityName) {
if (this.CityName[key].parent_id == val) {
currentCity.push(this.CityName[key]);
}
}
return currentCity;
}
return currentCity;
},
// 籍贯城市change事件
getJiguan() {
this.addressForm.jiguan_code =
this.jgProvinceCode.toString() + this.jiguan_city.toString();
},
getSchool() {
getSchool({}).then((res) => {
// console.log(res, "getSchool");
if (res.data.code != 200) {
return this.$message.error(res.data.message);
}
this.schoolName = res.data.school_list;
});
},
// 学校城市change事件
changeCity(val, status) {
// console.log(12345333,val,status)
this.selectSchoolList = [];
this.selectSchoolList = this.getCurrentSchoolLists(val);
if (!status) {
this.addressForm.school = "";
}
},
// 返回当前城市下的学校列表
getCurrentSchoolLists(val) {
let currentSchool = [];
// console.log(this.schoolName);
if (
this.schoolName == null ||
!this.schoolName ||
Object.values(this.schoolName).length == 0
) {
getSchool({})
.then((res) => {
// console.log(res)
if (res.data.code === 200) {
this.schoolName = res.data.school_list;
let code = this.$store.state.indexIdentity;
window.localStorage.setItem(
"schoolName" + code,
JSON.stringify(res.data.list)
);
for (let key in this.schoolName) {
if (this.schoolName[key].city_id == val) {
currentSchool.push(this.schoolName[key]);
}
}
return currentSchool;
} else {
this.$message.error(res.data.message);
}
})
.catch((err) => {
this.$message.error(err);
});
} else {
// console.log(this.schoolName, 111);
for (let key in this.schoolName) {
// console.log(key, this.schoolName[key]);
if (this.schoolName[key].city_id == val) {
currentSchool.push(this.schoolName[key]);
}
}
// console.log(currentSchool, 222);
return currentSchool;
}
return currentSchool;
},
},
};
</script>
<style lang="scss" >
@import "a/scss/btn";
.btn {
padding-bottom: 0 !important;
.el-button {
width: 160px !important;
}
}
.flex {
display: flex;
}
......@@ -50,23 +358,77 @@ export default {
// width: 856px;
.title {
padding: 50px;
padding: 50px 50px 0 50px;
.homework_titile {
font-size: 24px;
font-weight: 500;
color: #1b1419;
line-height: 24px;
margin-bottom: 40px;
text-align: center;
text-align: center;
}
}
// 空状态
// .content_empty {
// padding-bottom: 200px;
// p,
// div {
// text-align: center;
// }
// }
// 有证书时候
.content {
padding-bottom: 200px;
p,
div {
text-align: center;
padding: 0 30px 80px 30px;
.top {
padding-bottom: 80px;
.p_title {
font-size: 18px;
font-weight: 500;
color: #12141c;
line-height: 18px;
margin: 10px 0 30px 0;
}
div {
text-align: center;
font-size: 16px;
font-weight: 500;
color: #666666;
line-height: 18px;
}
}
}
// 注意事项
.pay_bottom {
font-size: 12px;
font-weight: 500;
color: #999999;
line-height: 21px;
}
.el-form-item {
margin-bottom: 20px;
// item的验证红点点
.el-form-item__label {
height: 32px;
line-height: 32px;
font-size: 12px;
font-family: PingFang SC;
font-weight: 500;
color: #12141c;
}
&.no_label .el-form-item__label {
width: 0 !important;
}
&.no_label .el-form-item__label::before {
content: "" !important;
}
&.no_label .el-form-item__content {
margin-left: 0 !important;
}
}
}
</style>
src/views/index/recruit/Index.vue
View file @ 25405ecc
......@@ -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;
})
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment