@@ -1,7 +1,10 @@ | |||
<template> | |||
<div class="header_main"> | |||
<div class="navigation_main"> | |||
<div class="head_portrait"></div> | |||
<div | |||
class="head_portrait" | |||
@click="PersonalSkip('/sunVillage/user/index')" | |||
></div> | |||
<div class="dynamic_main"> | |||
<div | |||
@click="skip('/sunVillage/index')" | |||
@@ -36,6 +39,7 @@ | |||
<script> | |||
export default { | |||
components: {}, | |||
props: ["headings", "currentNav", "returnUrl"], | |||
data() { | |||
return {}; | |||
@@ -52,6 +56,13 @@ export default { | |||
skip(url) { | |||
this.$router.push(url); | |||
}, | |||
PersonalSkip(url) { | |||
window.localStorage.setItem( | |||
"setupEntrance", | |||
window.location.pathname + window.location.search | |||
); | |||
this.$router.push(url); | |||
}, | |||
}, | |||
}; | |||
</script> | |||
@@ -94,6 +94,10 @@ const whiteList = [ | |||
'/sunVillage/shareBonus', //股权查询-股权分红 | |||
'/sunVillage/shareBonus_num', //股权查询-股权分红-股数详情页 | |||
'/sunVillage/shareBonus_amount', //股权查询-股权分红-分红详情页 | |||
'/sunVillage/user/index', //个人中心 | |||
'/sunVillage/user/mobile', //个人中心-修改手机号 | |||
'/sunVillage/user/information', //个人中心-修改用户信息 | |||
'/sunVillage/user/cooperative' //个人中心-修改所属合作社 | |||
//阳光村务公众号 -- 待删 | |||
] | |||
@@ -2679,8 +2679,7 @@ export const constantRoutes = [ | |||
hidden: true, | |||
}, | |||
component: (resolve) => require(['@/views/sunVillage/equity/shareBonus_num'], resolve) | |||
} | |||
, | |||
}, | |||
{ | |||
path: '/sunVillage/shareBonus_amount', | |||
name: 'sunVillageShareBonusAmount', | |||
@@ -2689,10 +2688,47 @@ export const constantRoutes = [ | |||
hidden: true, | |||
}, | |||
component: (resolve) => require(['@/views/sunVillage/equity/shareBonus_amount'], resolve) | |||
}, | |||
{ | |||
path: '/sunVillage/user/index', | |||
name: 'sunVillageUserIndex', | |||
meta: { | |||
title: '我的资料', //民生直通车-股权分红-分红详情页 | |||
hidden: true, | |||
}, | |||
component: (resolve) => require(['@/views/sunVillage/user/index'], resolve) | |||
}, | |||
{ | |||
path: '/sunVillage/user/mobile', | |||
name: 'sunVillageUserMobile', | |||
meta: { | |||
title: '修改手机号', //民生直通车-股权分红-分红详情页 | |||
hidden: true, | |||
}, | |||
component: (resolve) => require(['@/views/sunVillage/user/mobile'], resolve) | |||
}, | |||
{ | |||
path: '/sunVillage/user/information', | |||
name: 'sunVillageUserInformation', | |||
meta: { | |||
title: '修改用户信息', //民生直通车-股权分红-分红详情页 | |||
hidden: true, | |||
}, | |||
component: (resolve) => require(['@/views/sunVillage/user/information'], resolve) | |||
}, | |||
{ | |||
path: '/sunVillage/user/cooperative', | |||
name: 'sunVillageUserCooperative', | |||
meta: { | |||
title: '修改所属合作社', //民生直通车-股权分红-分红详情页 | |||
hidden: true, | |||
}, | |||
component: (resolve) => require(['@/views/sunVillage/user/cooperative'], resolve) | |||
} | |||
]; | |||
@@ -0,0 +1,87 @@ | |||
<template> | |||
<div class="myProfile_main"> | |||
<div class="title_main" @click="skip('/sunVillage/user/index')"> | |||
<div class="return_icon"></div> | |||
<div class="title">我的资料</div> | |||
</div> | |||
<div class="form_main"> | |||
<div class="flex_block"> | |||
<div class="wrap"> | |||
<input type="tel" class="ipt" placeholder="请输入所属合作社名称" /> | |||
</div> | |||
<div class="btn">完成</div> | |||
</div> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
export default { | |||
data() { | |||
return { | |||
myProfileVisibile: false, | |||
}; | |||
}, | |||
mounted() {}, | |||
methods: { | |||
skip(url) { | |||
this.$router.push(url); | |||
}, | |||
}, | |||
}; | |||
</script> | |||
<style scoped lang="scss"> | |||
.myProfile_main { | |||
width: 100vw; | |||
height: 100vh; | |||
background: #fff; | |||
.title_main { | |||
display: flex; | |||
height: 90px; | |||
margin: 0 24px; | |||
align-items: center; /* 子元素相对父元素垂直居中 */ | |||
border-bottom: 1px solid #e5e5e5; | |||
.return_icon { | |||
width: 16px; | |||
height: 26px; | |||
background: url("../../../assets/images/sunVillage/headings_return.png") | |||
no-repeat; | |||
background-size: 100% 100%; | |||
margin-right: 16px; | |||
margin-left: 8px; | |||
} | |||
.title { | |||
font-size: 32px; | |||
} | |||
} | |||
.form_main { | |||
margin: 20px 57px 0; | |||
.flex_block { | |||
height: 112px; | |||
display: flex; | |||
border-bottom: 1px solid #e6e6e6; | |||
margin-bottom: 20px; | |||
.wrap { | |||
flex: 1; | |||
.ipt { | |||
height: 100%; | |||
background: none; | |||
border: 0 none; | |||
width: 90%; | |||
font-size: 34px; | |||
} | |||
} | |||
.btn { | |||
width: 224px; | |||
border-left: 1px solid #e6e6e6; | |||
font-size: 34px; | |||
color: rgb(7, 193, 96); | |||
display: flex; | |||
justify-content: center; /* 相对父元素水平居中 */ | |||
align-items: center; /* 子元素相对父元素垂直居中 */ | |||
} | |||
} | |||
} | |||
} | |||
</style> |
@@ -0,0 +1,322 @@ | |||
<template> | |||
<div class="myProfile_main"> | |||
<div class="title_main"> | |||
<div class="return_icon" @click="previousStep"></div> | |||
<div class="title">我的资料</div> | |||
</div> | |||
<div class="head_main"> | |||
<div class="head_img"> | |||
<img src="../../../assets/images/sunVillage/head_portrait.jpg" /> | |||
</div> | |||
<div class="head_info"> | |||
<div class="name">王云</div> | |||
<div class="tel">15854545454</div> | |||
</div> | |||
</div> | |||
<div class="list_main"> | |||
<div class="flex_block" @click="headModify"> | |||
<div class="title">头像</div> | |||
<div class="main"> | |||
<div class="head"> | |||
<img src="../../../assets/images/sunVillage/head_portrait.jpg" /> | |||
</div> | |||
<div class="more_icon"></div> | |||
</div> | |||
</div> | |||
<div class="flex_block" @click="skip('/sunVillage/user/information')"> | |||
<div class="title">姓名</div> | |||
<div class="main"> | |||
<div class="text">王云</div> | |||
<div class="more_icon"></div> | |||
</div> | |||
</div> | |||
<div class="flex_block" @click="skip('/sunVillage/user/mobile')"> | |||
<div class="title">手机号</div> | |||
<div class="main"> | |||
<div class="text">15854545454</div> | |||
<div class="more_icon"></div> | |||
</div> | |||
</div> | |||
<div class="flex_block" @click="skip('/sunVillage/user/information')"> | |||
<div class="title">密码</div> | |||
<div class="main"> | |||
<div class="text">修改密码</div> | |||
<div class="more_icon"></div> | |||
</div> | |||
</div> | |||
<div class="flex_block" @click="genderModify"> | |||
<div class="title">性别</div> | |||
<div class="main"> | |||
<div class="text">男</div> | |||
<div class="more_icon"></div> | |||
</div> | |||
</div> | |||
<div class="flex_block" @click="birthDateModify"> | |||
<div class="title">出生日期</div> | |||
<div class="main"> | |||
<div class="text">1985-05-24</div> | |||
<div class="more_icon"></div> | |||
</div> | |||
</div> | |||
<div class="flex_block" @click="skip('/sunVillage/user/cooperative')"> | |||
<div class="title">所属合作社</div> | |||
<div class="main"> | |||
<div class="text">王云经济合作社</div> | |||
<div class="more_icon"></div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="exit_main"> | |||
<div class="exit_btn">退出登录</div> | |||
</div> | |||
<van-popup | |||
v-model="myProfileVisibile" | |||
position="bottom" | |||
round | |||
:style="{ height: '364px' }" | |||
> | |||
<div class="takingPictures_main"> | |||
<div class="title">选择操作</div> | |||
<div class="main"> | |||
<div class="takingPictures"> | |||
<van-uploader> | |||
<div class="icon"></div> | |||
</van-uploader> | |||
</div> | |||
<div class="folder"> | |||
<van-uploader> | |||
<div class="icon"></div> | |||
</van-uploader> | |||
</div> | |||
</div> | |||
</div> | |||
</van-popup> | |||
<van-popup | |||
v-model="genderObj.visibile" | |||
position="bottom" | |||
round | |||
:style="{ height: '45%' }" | |||
> | |||
<van-picker | |||
show-toolbar | |||
:columns="genderObj.list" | |||
@cancel="genderObj.visibile = false" | |||
@confirm="onChangeGenderObj" | |||
/> | |||
</van-popup> | |||
<van-popup | |||
v-model="birthDateObj.visibile" | |||
position="bottom" | |||
round | |||
:style="{ height: '45%' }" | |||
> | |||
<van-datetime-picker | |||
v-model="birthDateObj.currentDate" | |||
type="date" | |||
title="选择年月日" | |||
:min-date="birthDateObj.minDate" | |||
:max-date="birthDateObj.maxDate" | |||
@cancel="birthDateObj.visibile = false" | |||
@confirm="onChangeBirthDateObj" | |||
/> | |||
</van-popup> | |||
</div> | |||
</template> | |||
<script> | |||
export default { | |||
data() { | |||
return { | |||
myProfileVisibile: false, | |||
genderObj: { | |||
visibile: false, | |||
list: ["男", "女"], | |||
}, | |||
birthDateObj: { | |||
visibile: false, | |||
minDate: new Date(2020, 0, 1), | |||
maxDate: new Date(2025, 10, 1), | |||
currentDate: new Date(2021, 0, 17), | |||
}, | |||
}; | |||
}, | |||
mounted() {}, | |||
methods: { | |||
headModify() { | |||
this.myProfileVisibile = true; | |||
}, | |||
genderModify() { | |||
this.genderObj.visibile = true; | |||
}, | |||
skip(url) { | |||
this.$router.push(url); | |||
}, | |||
onChangeGenderObj() { | |||
this.genderObj.visibile = false; | |||
}, | |||
birthDateModify() { | |||
this.birthDateObj.visibile = true; | |||
}, | |||
onChangeBirthDateObj() { | |||
this.birthDateObj.visibile = false; | |||
}, | |||
previousStep() { | |||
let setupEntrance = window.localStorage.getItem("setupEntrance"); | |||
if (setupEntrance) { | |||
this.$router.push(setupEntrance); | |||
} else { | |||
this.$router.push("/sunVillage/index"); | |||
} | |||
}, | |||
}, | |||
}; | |||
</script> | |||
<style scoped lang="scss"> | |||
.myProfile_main { | |||
width: 100vw; | |||
height: 100vh; | |||
background: #fff; | |||
position: relative; | |||
.title_main { | |||
display: flex; | |||
height: 90px; | |||
margin: 0 24px; | |||
align-items: center; /* 子元素相对父元素垂直居中 */ | |||
border-bottom: 1px solid #e5e5e5; | |||
.return_icon { | |||
width: 16px; | |||
height: 26px; | |||
background: url("../../../assets/images/sunVillage/headings_return.png") | |||
no-repeat; | |||
background-size: 100% 100%; | |||
margin-right: 16px; | |||
margin-left: 8px; | |||
} | |||
.title { | |||
font-size: 32px; | |||
} | |||
} | |||
.head_main { | |||
height: 144px; | |||
margin: 20px 56px 0; | |||
display: flex; | |||
justify-content: center; /* 相对父元素水平居中 */ | |||
align-items: center; /* 子元素相对父元素垂直居中 */ | |||
border-bottom: 1px solid #e6e6e6; | |||
.head_img { | |||
width: 96px; | |||
height: 96px; | |||
border-radius: 15px; | |||
img { | |||
width: 96px; | |||
height: 96px; | |||
} | |||
} | |||
.head_info { | |||
flex: 1; | |||
margin-left: 28px; | |||
.name { | |||
font-size: 34px; | |||
margin-bottom: 10px; | |||
} | |||
.tel { | |||
font-size: 28px; | |||
color: #999; | |||
} | |||
} | |||
} | |||
.list_main { | |||
margin: 0 56px; | |||
.flex_block { | |||
margin-top: 20px; | |||
display: flex; | |||
height: 105px; | |||
border-bottom: 1px solid #e6e6e6; | |||
align-items: center; /* 子元素相对父元素垂直居中 */ | |||
justify-content: space-between; | |||
.title { | |||
width: 210px; | |||
font-size: 34px; | |||
color: #999; | |||
} | |||
.main { | |||
display: flex; | |||
align-items: center; /* 子元素相对父元素垂直居中 */ | |||
.head { | |||
width: 80px; | |||
height: 80px; | |||
margin-right: 55px; | |||
img { | |||
width: 80px; | |||
height: 80px; | |||
} | |||
} | |||
.more_icon { | |||
width: 14px; | |||
height: 26px; | |||
background: url("../../../assets/images/sunVillage/more.png") | |||
no-repeat; | |||
background-size: 100% 100%; | |||
margin-bottom: -10px; | |||
} | |||
.text { | |||
font-size: 34px; | |||
margin-right: 55px; | |||
} | |||
} | |||
} | |||
} | |||
.exit_main { | |||
padding: 70px 0; | |||
.exit_btn { | |||
height: 80px; | |||
width: 340px; | |||
background: #b9b9b9; | |||
color: #fff; | |||
font-size: 34px; | |||
text-align: center; | |||
line-height: 80px; | |||
margin: 0 auto; | |||
border-radius: 8px; | |||
} | |||
} | |||
.takingPictures_main { | |||
.title { | |||
text-align: center; | |||
font-size: 30px; | |||
padding: 20px 0; | |||
} | |||
.main { | |||
margin: 15px 80px 0; | |||
display: flex; | |||
.takingPictures { | |||
width: 120px; | |||
height: 112px; | |||
margin-right: 40px; | |||
.icon { | |||
width: 120px; | |||
height: 112px; | |||
background: url("../../../assets/images/sunVillage/TakingPictures.png") | |||
no-repeat; | |||
background-size: 100% 100%; | |||
} | |||
} | |||
.folder { | |||
width: 120px; | |||
height: 112px; | |||
.icon { | |||
width: 120px; | |||
height: 112px; | |||
background: url("../../../assets/images/sunVillage/TakingPictures_2.png") | |||
no-repeat; | |||
background-size: 100% 100%; | |||
} | |||
} | |||
} | |||
} | |||
} | |||
</style> |
@@ -0,0 +1,123 @@ | |||
<template> | |||
<div class="myProfile_main"> | |||
<div class="title_main" @click="skip('/sunVillage/user/index')"> | |||
<div class="return_icon"></div> | |||
<div class="title">我的资料</div> | |||
</div> | |||
<div class="form_main"> | |||
<div class="flex_block"> | |||
<div class="title">姓名</div> | |||
<div class="wrap"> | |||
<input type="text" class="ipt" placeholder="请输入姓名" /> | |||
</div> | |||
</div> | |||
<div class="flex_block"> | |||
<div class="title">身份证</div> | |||
<div class="wrap"> | |||
<input type="text" class="ipt" placeholder="请输入身份证号" /> | |||
</div> | |||
</div> | |||
<div class="flex_block"> | |||
<div class="title">密码</div> | |||
<div class="wrap"> | |||
<input type="password" class="ipt" placeholder="请输入现有密码" /> | |||
</div> | |||
</div> | |||
<div class="flex_block"> | |||
<div class="title">新密码</div> | |||
<div class="wrap"> | |||
<input type="text" class="ipt" placeholder="请输入新密码" /> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="form_submit"> | |||
<div class="complete_btn">完成</div> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
export default { | |||
data() { | |||
return { | |||
myProfileVisibile: false, | |||
}; | |||
}, | |||
mounted() {}, | |||
methods: { | |||
skip(url) { | |||
this.$router.push(url); | |||
}, | |||
}, | |||
}; | |||
</script> | |||
<style scoped lang="scss"> | |||
.myProfile_main { | |||
width: 100vw; | |||
height: 100vh; | |||
background: #fff; | |||
.title_main { | |||
display: flex; | |||
height: 90px; | |||
margin: 0 24px; | |||
align-items: center; /* 子元素相对父元素垂直居中 */ | |||
border-bottom: 1px solid #e5e5e5; | |||
.return_icon { | |||
width: 16px; | |||
height: 26px; | |||
background: url("../../../assets/images/sunVillage/headings_return.png") | |||
no-repeat; | |||
background-size: 100% 100%; | |||
margin-right: 16px; | |||
margin-left: 8px; | |||
} | |||
.title { | |||
font-size: 32px; | |||
} | |||
} | |||
.form_main { | |||
margin: 20px 57px 0; | |||
.flex_block { | |||
height: 112px; | |||
display: flex; | |||
border-bottom: 1px solid #e6e6e6; | |||
margin-bottom: 20px; | |||
.title { | |||
width: 154px; | |||
font-size: 34px; | |||
border-right: 1px solid #e6e6e6; | |||
display: flex; | |||
align-items: center; /* 子元素相对父元素垂直居中 */ | |||
} | |||
.wrap { | |||
flex: 1; | |||
.ipt { | |||
height: 100%; | |||
background: none; | |||
border: 0 none; | |||
width: 90%; | |||
font-size: 34px; | |||
padding-left: 30px; | |||
} | |||
} | |||
} | |||
} | |||
.form_submit { | |||
margin: 300px auto 0; | |||
padding-bottom: 20px; | |||
width: 340px; | |||
.complete_btn { | |||
width: 340px; | |||
height: 80px; | |||
background: #07c160; | |||
display: flex; | |||
justify-content: center; /* 相对父元素水平居中 */ | |||
align-items: center; /* 子元素相对父元素垂直居中 */ | |||
font-size: 28px; | |||
color: #fff; | |||
border-radius: 10px; | |||
} | |||
} | |||
} | |||
</style> |
@@ -0,0 +1,99 @@ | |||
<template> | |||
<div class="myProfile_main"> | |||
<div class="title_main" @click="skip('/sunVillage/user/index')"> | |||
<div class="return_icon"></div> | |||
<div class="title">我的资料</div> | |||
</div> | |||
<div class="form_main"> | |||
<div class="flex_block"> | |||
<div class="wrap"> | |||
<input type="tel" class="ipt" placeholder="请输入手机号码" /> | |||
</div> | |||
<div class="btn">发送验证码</div> | |||
</div> | |||
<div class="flex_block"> | |||
<div class="wrap"> | |||
<input type="tel" class="ipt" placeholder="请输入验证码" /> | |||
</div> | |||
<div class="btn">完成</div> | |||
</div> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
export default { | |||
data() { | |||
return { | |||
myProfileVisibile: false, | |||
}; | |||
}, | |||
mounted() {}, | |||
methods: { | |||
skip(url) { | |||
this.$router.push(url); | |||
}, | |||
}, | |||
}; | |||
</script> | |||
<style scoped lang="scss"> | |||
.myProfile_main { | |||
width: 100vw; | |||
height: 100vh; | |||
background: #fff; | |||
.title_main { | |||
display: flex; | |||
height: 90px; | |||
margin: 0 24px; | |||
align-items: center; /* 子元素相对父元素垂直居中 */ | |||
border-bottom: 1px solid #e5e5e5; | |||
.return_icon { | |||
width: 16px; | |||
height: 26px; | |||
background: url("../../../assets/images/sunVillage/headings_return.png") | |||
no-repeat; | |||
background-size: 100% 100%; | |||
margin-right: 16px; | |||
margin-left: 8px; | |||
} | |||
.title { | |||
font-size: 32px; | |||
} | |||
} | |||
.form_main { | |||
margin: 20px 57px 0; | |||
.flex_block { | |||
height: 112px; | |||
display: flex; | |||
border-bottom: 1px solid #e6e6e6; | |||
margin-bottom: 20px; | |||
.wrap { | |||
flex: 1; | |||
.ipt { | |||
height: 100%; | |||
background: none; | |||
border: 0 none; | |||
width: 90%; | |||
font-size: 34px; | |||
} | |||
} | |||
.btn { | |||
width: 224px; | |||
border-left: 1px solid #e6e6e6; | |||
font-size: 34px; | |||
color: rgb(7, 193, 96); | |||
display: flex; | |||
justify-content: center; /* 相对父元素水平居中 */ | |||
align-items: center; /* 子元素相对父元素垂直居中 */ | |||
} | |||
} | |||
// <div class="flex_block"> | |||
// <div class="wrap"> | |||
// <input type="tel" class="ipt"> | |||
// </div> | |||
// <div class="btn">发送验证码</div> | |||
// </div> | |||
} | |||
} | |||
</style> |