Skip to content

B
beyond-clouds-front
Commit 42055672 by yanju
Options

Merge branch 'yoona' into 'master' 

绑定邮箱和手机号 个人中心资料页

See merge request pigbigbig/beyond-clouds-front!52
parents 02c25e77 b38306c3
Showing with 442 additions and 15 deletions
action/config.js
......@@ -49,6 +49,10 @@ export default {
send:'/api/sms/verifyCode',//发送短信验证码
},
Email:{
send:'/api/mail/verifyCode',//发送邮箱验证码
},
Topic:{
myList:'/api/my/topic/created',//我的话题列表
myfollowedList:'/api/my/topic/followed',//我关注的话题
......@@ -111,7 +115,9 @@ export default {
shielding:'/api/my/blacklist/',//拉黑 +{userId}
follow:'/api/user/',//关注 +{userId}/follower
registerPhone:'/api/user/register/mobile',//用户注册
registerEmail:'/api/user/register/email'//邮箱注册
registerEmail:'/api/user/register/email',//邮箱注册
bindPhone:'/api/user/binding/mobile',//绑定手机号
bindEmail:'/api/user/binding/email',//绑定邮箱
},
Authentication:{
......
pages/blog/release/index.vue
......@@ -378,7 +378,12 @@ export default {
message: "修改博客成功",
type: 'success'
});
this.$router.push('/personal-center/home/blog')
this.$router.push({
path: '/personal-center/home/blog',
query: {
user: this.$store.state.userProfile.userId
}
})
} else {
this.$message({
message: response.msg,
......@@ -409,7 +414,12 @@ export default {
message: "发布博客成功",
type: 'success'
});
this.$router.push('/personal-center/home/blog')
this.$router.push({
path: '/personal-center/home/blog',
query: {
user: this.$store.state.userProfile.userId
}
})
} else {
this.$message({
message: response.msg,
......
pages/personal-center/account/setting.vue
<template>
<div>
<card-container style="margin-top: 16px;padding-bottom: 32px" title="初次登录请提交登录密码" label="账号注册">
<card-container style="margin-top: 16px;padding-bottom: 32px" title="账号绑定" label="账号注册">
<div class="bind-account-item__wrap">
<div class="bind-account-item">
<div class="item__left">
......@@ -9,11 +9,11 @@
</div>
<div class="info">
<p>手机号</p>
<h6>13333338888</h6>
<h6>{{mobile || '未绑定'}}</h6>
</div>
</div>
<div class="item__right">
<div class="item__right" @click="handleChange('手机号')">
更换
</div>
......@@ -26,11 +26,11 @@
</div>
<div class="info">
<p>邮箱</p>
<h6>13333338888@163.com</h6>
<h6>{{email || '未绑定'}}</h6>
</div>
</div>
<div class="item__right">
<div class="item__right" @click="handleChange('邮箱')">
更换
</div>
......@@ -47,6 +47,7 @@
</div>
<div class="info">
<p>微信号</p>
<h6>{{wxNumber || '未绑定'}}</h6>
</div>
</div>
......@@ -65,6 +66,7 @@
</div>
<div class="info">
<p>qq号</p>
<h6>{{qqNumber || '未绑定'}}</h6>
</div>
</div>
......@@ -86,6 +88,7 @@
</div>
<div class="info">
<p>钉钉</p>
<h6>未绑定</h6>
</div>
</div>
......@@ -98,7 +101,7 @@
</div>
</card-container>
<card-container style="margin-top: 16px;padding-bottom: 32px" title="账号绑定" >
<card-container style="margin-top: 16px;padding-bottom: 32px" title="账号绑定" v-if="false">
<div class="bind-account-item__wrap">
<input type="text" placeholder="请输入密码">
<input type="text" placeholder="请再次确认密码">
......@@ -106,7 +109,7 @@
<p class="submit-button">保存</p>
</card-container>
<card-container style="margin-top: 16px;padding-bottom: 32px" title="修改登录密码" label="忘记密码">
<card-container style="margin-top: 16px;padding-bottom: 32px" title="修改登录密码" label="忘记密码" v-if="false">
<div class="bind-account-item__wrap">
<input type="text" placeholder="请输入旧密码">
<input type="text" placeholder="请输入新密码">
......@@ -114,17 +117,200 @@
<p class="submit-button">保存</p>
</card-container>
<div class="popup-box__wrap" v-if="isShow">
<div class="popup-box__container">
<div class="popup-box__main">
<div class="popup-box-title"><p>{{title}}</p></div>
<login-input
v-model="account"
:placeholder="placeholder"
:error-message="accountErrMsg"
@handleCheck="handleCheckAccount"
@cancelCheck="accountErrMsg = ''"
@keyup.enter.native="handleChangeAccount"
></login-input>
<login-input
v-model="verifyCode"
input-type="3"
placeholder="请输入验证码"
:error-message="verifyErrMsg"
:is-count="isCount"
@handleCheck="handleCheckVerifyCode"
@cancelCheck="verifyErrMsg = ''"
@sendSms="sendVerifyCode"
@keyup.enter.native="handleChangeAccount"
></login-input>
<div class="popup-box-button">
<button style="margin-right: 20px" @click="handleChangeAccount">确定</button>
<button @click="() => this.isShow = false">取消</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import CardContainer from '../../../components/pc/cardContainer';
import LoginInput from "../../../components/pc/loginCard/loginInput";
import config from '../../../action/config';
import {checkPhone, checkVerification, checkEmail} from '../../users/checkfrom'
export default {
name:'setting',
components:{
LoginInput,
CardContainer
},
async asyncData({$axios}) {
let infoResponse = await $axios.$get(config.api.get.User.myInfo);
console.log(infoResponse);
return { ...infoResponse.data }
},
data() {
return {
isShow: false,
title: '绑定手机号',
verifyCode: '',
account: '',
placeholder: '',
accountErrMsg: '',
verifyErrMsg: '',
isCount: false
}
},
methods: {
handleChange(type) {
Object.assign(this.$data, this.$options.data());
this.isShow = true;
this.title = '绑定'+ type;
this.placeholder = '请输入' + type;
},
handleCheckAccount() {
if (this.title === '绑定手机号') {
this.accountErrMsg = checkPhone(this.account);
} else if (this.title === '绑定邮箱') {
this.accountErrMsg = checkEmail(this.account);
}
},
handleCheckVerifyCode() {
this.verifyErrMsg = checkVerification(this.verifyCode);
},
// 发送验证码
sendVerifyCode() {
if (this.title === '绑定手机号') {
this.isCount = false;
this.accountErrMsg = checkPhone(this.account);
if (this.accountErrMsg === '') {
this.getSms();
this.verifyErrMsg = '';
this.isCount = true;
setTimeout(() => {
this.isCount = false;
}, 60000);
}
} else if (this.title === '绑定邮箱') {
this.isCount = false;
this.accountErrMsg = checkEmail(this.account);
if (this.accountErrMsg === '') {
this.getEmail();
this.verifyErrMsg = '';
this.isCount = true;
setTimeout(() => {
this.isCount = false;
}, 60000);
}
}
},
async getSms() {
let smsResponse = await this.$axios.$get(config.api.get.Sms.send, {
params: {
mobile: this.account
}
});
if (smsResponse.code === 0) {
this.$message({
type: 'success',
message: '短信发送成功！'
});
} else {
this.verifyErrMsg = smsResponse.msg;
this.$message({
type: 'info',
message: smsResponse.msg
});
}
},
async getEmail() {
let emailResponse = await this.$axios.$get(config.api.get.Email.send, {
params: {
email: this.account
}
});
if (emailResponse.code === 0) {
this.$message({
type: 'success',
message: '短信发送成功！'
});
} else {
this.verifyErrMsg = emailResponse.msg;
this.$message({
type: 'info',
message: emailResponse.msg
});
}
},
async handleChangeAccount() {
this.handleCheckAccount();
this.handleCheckVerifyCode();
if (this.accountErrMsg !== '' || this.verifyErrMsg !== '') return false;
let changeRes;
if (this.title === '绑定手机号') {
changeRes = await this.$axios.$post(config.api.post.User.bindPhone, {},
{
params: {
mobile: this.account,
verifyCode: this.verifyCode
}
});
if (changeRes.code === 0) {
this.$message({
type: 'success',
message: '绑定手机号成功！'
});
this.mobile = this.account;
this.isShow = false;
} else {
this.$message({
type: 'info',
message: changeRes.msg
});
}
} else if (this.title === '绑定邮箱') {
changeRes = await this.$axios.$post(config.api.post.User.bindEmail, {},
{
params: {
email: this.account,
verifyCode: this.verifyCode
}
});
if (changeRes.code === 0) {
this.$message({
type: 'success',
message: '绑定邮箱成功！'
});
this.email = this.account;
this.isShow = false;
} else {
this.$message({
type: 'info',
message: changeRes.msg
});
}
}
}
}
}
......@@ -206,5 +392,41 @@
}
}
.popup-box__wrap {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 8000;
background-color: rgba(33, 41, 44, 0.4);
.popup-box__container{
width: 334*$length;
padding: 40*$length 40*$length 40*$length 40*$length;
background-color: #fff;
@include border-radius(4*$length);
.popup-box__main{
.popup-box-title{
margin-bottom: 40*$length;
@include fontStyle(20,27,500,#2F2F2F,center)
}
.popup-box-button{
@extend %flex-row-spb;
justify-content: flex-end;
> button {
width: 80*$length;
background-color: rgba(0, 170, 230, .8);
border: none;
cursor: pointer;
@include border-radius(4*$length);
@extend %animate-transition;
@include fontStyle(16,40,500,#fff,center);
&:hover {
background-color: rgba(0, 170, 230, 1);
}
}
}
}
}
}
</style>
pages/personal-center/home/info.vue
<template>
<div>
<card-container key="container3" style="margin-top: 16px" title="用户信息" label="换一换">
<empty-card height="556px"></empty-card>
<div class="person-info-container">
<card-container height="628px" key="container3" style="margin-top: 16px;" title="用户信息">
<div class="person-content">
<div class="header-avatar-box">
<span>头像：</span>
<div class="img-box">
<img :src="userAvatar || ''" alt="">
</div>
</div>
<div>
<p><span>昵称：</span>{{nickName || ''}}</p>
</div>
<div>
<p><span>性别：</span>{{genderInfo}}</p>
</div>
<div>
<p><span>生日：</span>{{birthday || ''}}</p>
</div>
<div>
<p><span>签名：</span>{{signature || ''}}</p>
</div>
<div>
<p><span>微信：</span>{{wxNumber || ''}}</p>
</div>
<div>
<p><span>QQ号：</span>{{qqNumber || ''}}</p>
</div>
<div>
<p><span>手机号：</span>{{mobile || ''}}</p>
</div>
</div>
</card-container>
</div>
</template>
......@@ -19,9 +46,63 @@
name:'info',
components:{
ProjectCard,CardContainer,Pagination,EmptyCard
},
async asyncData({$axios}) {
let infoResponse = await $axios.$get(config.api.get.User.myInfo);
console.log(infoResponse);
return { ...infoResponse.data }
},
computed: {
genderInfo: function () {
if (this.gender === 0) {
return '男'
} else if (this.gender === 1) {
return '女'
} else {
return '保密'
}
}
}
}
</script>
<style lang="scss" scoped>
.person-info-container{
.person-content{
padding-top: 40*$length;
padding-left: 154*$length;
> div {
margin-bottom: 27*$length;
@extend %flex-row-spb;
justify-content: flex-start;
p {
@include fontStyle(14,19,500,#333,left);
}
}
span {
display: inline-block;
width: 56*$length;
margin-right: 16*$length;
@extend %cursorPointer;
@include fontStyle(14,19,500,#999,right);
}
.header-avatar-box{
.img-box{
width: 90*$length;
height: 90*$length;
background-color: #F4F8FA;
@include border-radius(50%);
> img {
width: 90*$length;
height: 90*$length;
object-fit: contain;
@include border-radius(50%);
}
}
}
}
}
</style>
pages/personal-center/u/info.vue 0 → 100644
<template>
<div class="person-info-container">
<card-container height="628px" key="container3" style="margin-top: 16px;" title="用户信息">
<div class="person-content">
<div class="header-avatar-box">
<span>头像：</span>
<div class="img-box">
<img :src="userAvatar || ''" alt="">
</div>
</div>
<div>
<p><span>昵称：</span>{{nickName || '暂无'}}</p>
</div>
<div>
<p><span>性别：</span>{{genderInfo}}</p>
</div>
<div>
<p><span>生日：</span>{{birthday || '暂无'}}</p>
</div>
<div>
<p><span>签名：</span>{{signature || '暂无'}}</p>
</div>
<div>
<p><span>微信：</span>{{wxNumber || '暂无'}}</p>
</div>
<div>
<p><span>QQ号：</span>{{qqNumber || '暂无'}}</p>
</div>
<div>
<p><span>手机号：</span>{{mobile || '暂无'}}</p>
</div>
</div>
</card-container>
</div>
</template>
<script>
import ProjectCard from '../../../components/pc/projectCard';
import CardContainer from '../../../components/pc/cardContainer';
import config from '../../../action/config';
import Pagination from "../../../components/pc/pagination";
import EmptyCard from "../../../components/pc/emptyCard";
export default {
name:'info',
components:{
ProjectCard,CardContainer,Pagination,EmptyCard
},
async asyncData({$axios, query}) {
let infoResponse = await $axios.$get(config.api.get.User.otherInfo + query.user + '/baseinfo');
console.log(infoResponse);
return { ...infoResponse.data }
},
computed: {
genderInfo: function () {
if (this.gender === 0) {
return '男'
} else if (this.gender === 1) {
return '女'
} else {
return '保密'
}
}
}
}
</script>
<style lang="scss" scoped>
.person-info-container{
.person-content{
padding-top: 40*$length;
padding-left: 154*$length;
> div {
margin-bottom: 27*$length;
@extend %flex-row-spb;
justify-content: flex-start;
p {
@include fontStyle(14,19,500,#333,left);
}
}
span {
display: inline-block;
width: 56*$length;
margin-right: 16*$length;
cursor: default;
@include fontStyle(14,19,500,#999,right);
}
.header-avatar-box{
.img-box{
width: 90*$length;
height: 90*$length;
background-color: #F4F8FA;
@include border-radius(50%);
> img {
width: 90*$length;
height: 90*$length;
object-fit: contain;
@include border-radius(50%);
}
}
}
}
}
</style>
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