|
|
<template>
|
|
|
<div class="userinfo-container" @click="isspecialboxshow = false">
|
|
|
<!-- title部分 -->
|
|
|
<div class="pagetitle">
|
|
|
<div class="w">
|
|
|
<span class="titlelogo">
|
|
|
<!-- <i class="iconfont icon-yigezhuanmenfuwudailidepingtai"></i> -->
|
|
|
<router-link to="/main"
|
|
|
><svg class="icon" aria-hidden="true">
|
|
|
<use xlink:href="#icon-yishoudanlogo"></use></svg
|
|
|
></router-link>
|
|
|
</span>
|
|
|
<span class="navigationleft">
|
|
|
<ul>
|
|
|
<li>
|
|
|
<router-link
|
|
|
to="/"
|
|
|
:class="routertitleindex === 0 ? 'titleactive' : ''"
|
|
|
>
|
|
|
首页</router-link
|
|
|
>
|
|
|
</li>
|
|
|
<li>
|
|
|
<router-link
|
|
|
to="/userinfo/usercenter"
|
|
|
:class="routertitleindex === 1 ? 'titleactive' : ''"
|
|
|
>个人中心</router-link
|
|
|
>
|
|
|
</li>
|
|
|
<li>
|
|
|
<router-link
|
|
|
to="/userinfo/accountsetting/loginpsw"
|
|
|
:class="routertitleindex === 2 ? 'titleactive' : ''"
|
|
|
>账号设置
|
|
|
</router-link>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</span>
|
|
|
<span class="login">
|
|
|
<span v-if="isLogin">
|
|
|
<a-dropdown overlayClassName="logindropdown">
|
|
|
<span><i class="iconfont icon-morentouxiang"></i></span>
|
|
|
<div class="loginbox" slot="overlay">
|
|
|
<div>{{ loginValue.tel }}</div>
|
|
|
<router-link to="/userinfo/usercenter">
|
|
|
<div>
|
|
|
<span
|
|
|
><i class="iconfont icon-gerenzhongxin"></i>个人中心</span
|
|
|
><i class="iconfont icon-youjiantou"></i>
|
|
|
</div>
|
|
|
</router-link>
|
|
|
<router-link to="/userinfo/accountsetting/loginpsw">
|
|
|
<div>
|
|
|
<span
|
|
|
><i class="iconfont icon-zhanghaoshezhi"></i
|
|
|
>账号设置</span
|
|
|
><i class="iconfont icon-youjiantou"></i>
|
|
|
</div>
|
|
|
</router-link>
|
|
|
<button @click="logout">退出登录</button>
|
|
|
</div>
|
|
|
</a-dropdown>
|
|
|
</span>
|
|
|
<span v-else class="loginbtn">
|
|
|
<!-- <router-link to="/register">注册</router-link>/ -->
|
|
|
<router-link to="/login"
|
|
|
><button style="cursor: pointer">登录</button></router-link
|
|
|
></span
|
|
|
>
|
|
|
</span>
|
|
|
<span class="navigationright">
|
|
|
<ul>
|
|
|
<li>
|
|
|
<router-link
|
|
|
to="/userinfo/mytownsman"
|
|
|
:class="routertitleindex === 3 ? 'titleactiveafter' : ''"
|
|
|
>我的老乡
|
|
|
</router-link>
|
|
|
</li>
|
|
|
<li>
|
|
|
<router-link
|
|
|
to="/userinfo/mybill"
|
|
|
:class="routertitleindex === 4 ? 'titleactiveafter' : ''"
|
|
|
>我的报名
|
|
|
</router-link>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 搜索栏 -->
|
|
|
|
|
|
<router-view
|
|
|
:isspecialboxshow.sync="isspecialboxshow"
|
|
|
:formvalue="formvalue"
|
|
|
:jobMainList="jobMainList"
|
|
|
:isspinning="isspinning"
|
|
|
></router-view>
|
|
|
<!-- 老乡广告 -->
|
|
|
<!-- <div class="fellowtownsman" v-if="laoxiangshow">
|
|
|
<div class="w">
|
|
|
<div class="title">
|
|
|
<h1><span></span>老乡们都想去</h1>
|
|
|
</div>
|
|
|
<div class="main">
|
|
|
<div
|
|
|
class="jobinfobox"
|
|
|
v-for="(item, index) in fellowList"
|
|
|
:key="index"
|
|
|
>
|
|
|
<router-link :to="'/detail/' + item.id">
|
|
|
<a href="javascript:;" @click="resetpage">
|
|
|
<div class="imgbox">
|
|
|
<img v-if="item.logo" :src="item.logo" alt="" />
|
|
|
<img v-else src="../../../assets/nopicture.png" alt="" />
|
|
|
<span>服务费<i>1.3</i>元/小时</span>
|
|
|
</div>
|
|
|
<div class="jobname">{{ item.aliasName }}</div>
|
|
|
</a>
|
|
|
</router-link>
|
|
|
<div class="jobinfo">
|
|
|
<span>{{ item.district }}</span>
|
|
|
<span>{{ item.gender }}</span>
|
|
|
<span>{{ item.age }}</span>
|
|
|
</div>
|
|
|
<div class="jobtag">
|
|
|
<span>返费</span>
|
|
|
<span
|
|
|
v-for="(item1, index) in item.jobSpecialLabelNames"
|
|
|
:key="index"
|
|
|
>{{ item1 }}</span
|
|
|
>
|
|
|
</div>
|
|
|
<div class="jobprice">
|
|
|
<template v-if="item.hourlyPay"
|
|
|
><span>{{ item.hourlyPayTemp / 100 }}</span
|
|
|
>元/小时</template
|
|
|
>
|
|
|
<template v-else-if="item.dayPay"
|
|
|
><span>{{ item.hourlyPayTemp / 100 }}</span
|
|
|
>元/日</template
|
|
|
>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div> -->
|
|
|
<!-- banner广告栏 -->
|
|
|
<div class="banner" v-if="isbannershow">
|
|
|
<div class="w">
|
|
|
<i class="iconfont icon-yigezhuanmenfuwudailidepingtai"></i>
|
|
|
<!-- <img src="../assets/phone.png" alt="" /> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- footer部分 -->
|
|
|
<footer v-if="isfootershow">
|
|
|
<div class="w">
|
|
|
<!-- <ul>
|
|
|
<li @click="totop"><router-link to="/list">一手职位</router-link></li>
|
|
|
<li></li>
|
|
|
<li @click="totop">
|
|
|
<router-link to="/serviceoutlets">服务网点</router-link>
|
|
|
</li>
|
|
|
<li></li>
|
|
|
<li @click="totop">
|
|
|
<router-link to="/aboutus">关于我们</router-link>
|
|
|
</li>
|
|
|
</ul> -->
|
|
|
<div>
|
|
|
Copyright © 2015 - 2022 Bocai. All Rights Reserved. <i></i>
|
|
|
<a target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index"
|
|
|
>京ICP备16043923号-9</a
|
|
|
>
|
|
|
</div>
|
|
|
</div>
|
|
|
</footer>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
// import joblist from "../components/firstjob/joblist.vue";
|
|
|
import { logoutApi } from "../api/login";
|
|
|
import Cookies from "js-cookie";
|
|
|
|
|
|
export default {
|
|
|
inject: ["reload"],
|
|
|
|
|
|
// 组件名称
|
|
|
name: "",
|
|
|
// 局部注册的组件
|
|
|
components: {
|
|
|
// joblist,
|
|
|
},
|
|
|
// 组件参数 接收来自父组件的数据
|
|
|
props: {},
|
|
|
// 组件状态值
|
|
|
data() {
|
|
|
return {
|
|
|
fellowList: [],
|
|
|
isspinning: false,
|
|
|
isspecialboxshow: false,
|
|
|
isfootershow: true,
|
|
|
laoxiangshow: false, // 老乡的广告是否显示
|
|
|
isbannershow: true,
|
|
|
isLogin: false,
|
|
|
loginValue: {},
|
|
|
jobMainList: [],
|
|
|
formvalue: {
|
|
|
// 筛选的上传参数
|
|
|
district: [], // 城镇数据
|
|
|
monthlyPayStr: [], // 每月工资
|
|
|
ageStr: [], // 年龄数据
|
|
|
jobSpecialLabelIds: [], // 特色标签索引
|
|
|
aliasName: "",
|
|
|
pageNum: 1,
|
|
|
pageSize: 8,
|
|
|
total: null, //分页配置
|
|
|
},
|
|
|
};
|
|
|
},
|
|
|
// 计算属性
|
|
|
computed: {
|
|
|
routertitleindex: {
|
|
|
set() {},
|
|
|
get() {
|
|
|
const path = this.$route.fullPath;
|
|
|
if (path.indexOf("usercenter") > -1) {
|
|
|
return 1;
|
|
|
} else if (path.indexOf("accountsetting") > -1) {
|
|
|
return 2;
|
|
|
} else if (path.indexOf("mytownsman") > -1) {
|
|
|
return 3;
|
|
|
} else if (path.indexOf("mybill") > -1) {
|
|
|
return 4;
|
|
|
} else {
|
|
|
return 5;
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
// isLogin() {
|
|
|
// return localStorage.getItem("LOGIN_DATA") !== null ? true : false;
|
|
|
// },
|
|
|
// loginValue() {
|
|
|
// return localStorage.getItem("LOGIN_DATA") !== null
|
|
|
// ? JSON.parse(localStorage.getItem("LOGIN_DATA"))
|
|
|
// : { tel: "" };
|
|
|
// return JSON.parse(data)
|
|
|
// },
|
|
|
},
|
|
|
// 侦听器
|
|
|
watch: {
|
|
|
routertitleindex() {
|
|
|
const path = this.$route.fullPath;
|
|
|
if (path.indexOf("serviceoutlets") > -1) {
|
|
|
this.laoxiangshow = true;
|
|
|
} else if (path.indexOf("list") > -1 || path.indexOf("detail") > -1) {
|
|
|
this.laoxiangshow = true;
|
|
|
} else if (path.indexOf("aboutus") > -1) {
|
|
|
this.laoxiangshow = false;
|
|
|
} else {
|
|
|
this.laoxiangshow = true;
|
|
|
}
|
|
|
this.showfooter();
|
|
|
},
|
|
|
// isLogin() {
|
|
|
// this.isLogin = JSON.parse(localStorage.getItem("LOGIN_DATA"));
|
|
|
// console.log(this.isLogin);
|
|
|
// },
|
|
|
},
|
|
|
// 生命周期钩子 注：没用到的钩子请自行删除
|
|
|
/**
|
|
|
* 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
|
|
|
*/
|
|
|
created() {
|
|
|
this.isLaoxiangshow();
|
|
|
this.showfooter();
|
|
|
},
|
|
|
/**
|
|
|
* el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
|
|
|
* 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
|
|
|
*/
|
|
|
mounted() {
|
|
|
console.log(sessionStorage.getItem("LOGIN_DATA"));
|
|
|
this.isLogin = sessionStorage.getItem("LOGIN_DATA") !== null ? true : false;
|
|
|
|
|
|
this.loginValue =
|
|
|
sessionStorage.getItem("LOGIN_DATA") !== null
|
|
|
? JSON.parse(sessionStorage.getItem("LOGIN_DATA"))
|
|
|
: { tel: "" };
|
|
|
// console.log(document.querySelector(".ant-pagination-options-quick-jumper"));
|
|
|
},
|
|
|
// 组件方法
|
|
|
methods: {
|
|
|
totop() {
|
|
|
// console.log(window);
|
|
|
document.body.scrollTop = 0;
|
|
|
document.documentElement.scrollTop = 0;
|
|
|
// window.body.scrollY = 0;
|
|
|
},
|
|
|
isLaoxiangshow() {
|
|
|
const path = this.$route.fullPath;
|
|
|
if (path.indexOf("serviceoutlets") > -1) {
|
|
|
this.laoxiangshow = true;
|
|
|
} else if (path.indexOf("list") > -1 || path.indexOf("detail") > -1) {
|
|
|
this.laoxiangshow = true;
|
|
|
} else if (path.indexOf("aboutus") > -1) {
|
|
|
this.laoxiangshow = false;
|
|
|
} else {
|
|
|
this.laoxiangshow = true;
|
|
|
}
|
|
|
},
|
|
|
|
|
|
async logout() {
|
|
|
try {
|
|
|
const data = await logoutApi();
|
|
|
console.log(data);
|
|
|
if (data.status === 200) {
|
|
|
sessionStorage.removeItem("LOGIN_DATA");
|
|
|
Cookies.remove("LOGIN_DATA");
|
|
|
Cookies.remove("LOGIN_DATA");
|
|
|
this.reload();
|
|
|
this.$router.push("/main");
|
|
|
} else {
|
|
|
console.log(1);
|
|
|
}
|
|
|
} catch (error) {
|
|
|
console.log(error);
|
|
|
this.$message.warning(error.message);
|
|
|
}
|
|
|
},
|
|
|
resetpage() {
|
|
|
console.log(1);
|
|
|
setTimeout(() => {
|
|
|
this.reload();
|
|
|
document.body.scrollTop = 0;
|
|
|
document.documentElement.scrollTop = 0;
|
|
|
}, 1000);
|
|
|
},
|
|
|
showfooter() {
|
|
|
const path = this.$route.fullPath;
|
|
|
|
|
|
if (path.indexOf("main") > -1) {
|
|
|
this.isbannershow = false;
|
|
|
this.isfootershow = false;
|
|
|
} else {
|
|
|
this.isbannershow = true;
|
|
|
this.isfootershow = true;
|
|
|
}
|
|
|
|
|
|
if (path.indexOf("login") > -1) {
|
|
|
this.isbannershow = false;
|
|
|
}
|
|
|
if (path.indexOf("loginpsw") > -1) {
|
|
|
this.isbannershow = true;
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="less">
|
|
|
.userinfo-container {
|
|
|
// width: 100vw;
|
|
|
height: 100%;
|
|
|
/deep/ .pagetitle {
|
|
|
background-color: #fff;
|
|
|
padding: 32px 0;
|
|
|
|
|
|
font-size: 16px;
|
|
|
.titleactive {
|
|
|
font-size: 16px;
|
|
|
font-weight: bold;
|
|
|
color: #ff4400;
|
|
|
}
|
|
|
.w {
|
|
|
overflow: hidden;
|
|
|
// display: flex;
|
|
|
// justify-content: space-between;
|
|
|
// line-height: 36px;
|
|
|
|
|
|
span {
|
|
|
float: left;
|
|
|
}
|
|
|
.titlelogo {
|
|
|
display: block;
|
|
|
width: 160px;
|
|
|
height: 52px;
|
|
|
// width: 228px;
|
|
|
// height: 36px;
|
|
|
// img {
|
|
|
// width: 100%;
|
|
|
// height: 100%;
|
|
|
// }
|
|
|
svg {
|
|
|
width: 100%;
|
|
|
height: 52px;
|
|
|
// font-size: 46px;
|
|
|
// line-height: 52px;
|
|
|
// color: #ff4400;
|
|
|
// color: #ff4400;
|
|
|
}
|
|
|
}
|
|
|
.navigationleft {
|
|
|
ul {
|
|
|
font-size: 16px;
|
|
|
display: flex;
|
|
|
margin-left: 80px;
|
|
|
color: #666666;
|
|
|
li {
|
|
|
margin-right: 40px;
|
|
|
line-height: 52px;
|
|
|
text-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.05);
|
|
|
|
|
|
a {
|
|
|
transition: none;
|
|
|
&:hover {
|
|
|
color: #ff4400;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.navigationright {
|
|
|
float: right;
|
|
|
margin-right: 24px;
|
|
|
ul {
|
|
|
display: flex;
|
|
|
text-align: center;
|
|
|
line-height: 52px;
|
|
|
|
|
|
li {
|
|
|
cursor: pointer;
|
|
|
a.titleactiveafter {
|
|
|
font-weight: bold;
|
|
|
color: #ff4400;
|
|
|
}
|
|
|
a:hover {
|
|
|
color: #ff4400;
|
|
|
}
|
|
|
&:first-child {
|
|
|
margin-right: 24px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.login {
|
|
|
float: right;
|
|
|
// width: 36px;
|
|
|
line-height: 52px;
|
|
|
.loginbtn {
|
|
|
width: 70px;
|
|
|
}
|
|
|
> span {
|
|
|
width: 36px;
|
|
|
height: 36px;
|
|
|
span {
|
|
|
width: 36px;
|
|
|
height: 36px;
|
|
|
margin-top: 5px;
|
|
|
// margin-left: 33px;
|
|
|
border-radius: 999px;
|
|
|
// background-color: #ff4400;
|
|
|
margin-right: -3px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
i {
|
|
|
font-size: 32px;
|
|
|
line-height: 30px;
|
|
|
color: #ff4400;
|
|
|
cursor: pointer;
|
|
|
&:hover {
|
|
|
color: #ff842b;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
button {
|
|
|
width: 70px;
|
|
|
height: 32px;
|
|
|
font-size: 14px;
|
|
|
margin-top: 10px;
|
|
|
background-color: #fff;
|
|
|
border: 1px solid #ff4400;
|
|
|
line-height: 30px;
|
|
|
border-radius: 999px;
|
|
|
color: #ff4400;
|
|
|
text-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.05);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.fellowtownsman {
|
|
|
// height: 641px;
|
|
|
background: #ffffff;
|
|
|
.w {
|
|
|
padding: 30px 0;
|
|
|
.title {
|
|
|
font-size: 24px;
|
|
|
text-align: left;
|
|
|
color: #4d575e;
|
|
|
line-height: 56px;
|
|
|
h1 {
|
|
|
span {
|
|
|
display: inline-block;
|
|
|
vertical-align: middle;
|
|
|
margin-top: -4px;
|
|
|
width: 4px;
|
|
|
height: 25px;
|
|
|
margin-right: 8px;
|
|
|
background: #ff4400;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.main {
|
|
|
display: flex;
|
|
|
justify-content: start;
|
|
|
margin-top: 30px;
|
|
|
.jobinfobox {
|
|
|
width: 288px;
|
|
|
// height: 385px;
|
|
|
margin-bottom: 16px;
|
|
|
margin-right: 20px;
|
|
|
background: #ffffff;
|
|
|
border: 1px solid rgba(77, 87, 94, 0.1);
|
|
|
border-radius: 4px;
|
|
|
padding: 20px;
|
|
|
.imgbox {
|
|
|
position: relative;
|
|
|
width: 248px;
|
|
|
height: 186px;
|
|
|
img {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
span {
|
|
|
position: absolute;
|
|
|
padding: 0 10px;
|
|
|
// width: 149px;
|
|
|
height: 28px;
|
|
|
left: 0;
|
|
|
bottom: 0;
|
|
|
background: #ff4400;
|
|
|
border-radius: 16px 16px 16px 0px;
|
|
|
font-size: 16px;
|
|
|
text-align: center;
|
|
|
color: #ffffff;
|
|
|
line-height: 28px;
|
|
|
}
|
|
|
}
|
|
|
.jobname {
|
|
|
height: 52px;
|
|
|
// margin: 12px 0;
|
|
|
font-size: 20px;
|
|
|
font-weight: normal;
|
|
|
text-align: left;
|
|
|
color: #4d575e;
|
|
|
line-height: 52px;
|
|
|
border-bottom: 1px solid #f2f0ec;
|
|
|
}
|
|
|
.jobinfo {
|
|
|
margin-top: 11px;
|
|
|
opacity: 0.5;
|
|
|
font-size: 18px;
|
|
|
text-align: left;
|
|
|
color: #4d575e;
|
|
|
line-height: 22px;
|
|
|
}
|
|
|
.jobtag {
|
|
|
margin-top: 12px;
|
|
|
text-align: left;
|
|
|
span:first-child {
|
|
|
color: #ff4400;
|
|
|
background: rgba(254, 97, 0, 0.1);
|
|
|
}
|
|
|
span {
|
|
|
margin-right: 8px;
|
|
|
font-size: 16px;
|
|
|
padding: 3px 8px;
|
|
|
background: rgba(51, 51, 51, 0.06);
|
|
|
border-radius: 4px;
|
|
|
}
|
|
|
}
|
|
|
.jobprice {
|
|
|
margin-top: 12px;
|
|
|
font-size: 18px;
|
|
|
font-weight: normal;
|
|
|
text-align: left;
|
|
|
color: #ff4400;
|
|
|
line-height: 25px;
|
|
|
span {
|
|
|
font-size: 22px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.banner {
|
|
|
height: 72px;
|
|
|
margin-top: 20px;
|
|
|
background-color: #ff4400;
|
|
|
margin-bottom: -20px;
|
|
|
.w {
|
|
|
display: flex;
|
|
|
height: 100%;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
i {
|
|
|
font-size: 32px;
|
|
|
color: #fff;
|
|
|
}
|
|
|
img:last-child {
|
|
|
width: 173px;
|
|
|
height: 42px;
|
|
|
margin-right: 110px;
|
|
|
}
|
|
|
}
|
|
|
// background-color: black;
|
|
|
}
|
|
|
footer {
|
|
|
padding: 30px;
|
|
|
margin-top: 20px;
|
|
|
.w {
|
|
|
ul {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
li {
|
|
|
font-size: 16px;
|
|
|
text-align: center;
|
|
|
color: #4d575e;
|
|
|
line-height: 25px;
|
|
|
}
|
|
|
li:nth-of-type(2n) {
|
|
|
width: 1px;
|
|
|
height: 20px;
|
|
|
margin: 5px 54px;
|
|
|
background-color: #4d575e;
|
|
|
}
|
|
|
}
|
|
|
div {
|
|
|
text-align: center;
|
|
|
// margin-top: 16px;
|
|
|
color: #4d575e;
|
|
|
font-size: 14px;
|
|
|
i {
|
|
|
display: inline-block;
|
|
|
vertical-align: middle;
|
|
|
width: 1px;
|
|
|
height: 16px;
|
|
|
margin: 0 10px;
|
|
|
background-color: #4d575e;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|