375 lines
7.3 KiB
Vue
375 lines
7.3 KiB
Vue
<template>
|
|
<view class="person-msg">
|
|
<view
|
|
class="head c-content"
|
|
@click="changeFace"
|
|
>
|
|
<image
|
|
:src="form.face || '/static/missing-face.png'"
|
|
mode=""
|
|
></image>
|
|
<view>点击修改头像</view>
|
|
</view>
|
|
<u-form
|
|
:model="form"
|
|
ref="uForm"
|
|
class="form"
|
|
>
|
|
<u-form-item
|
|
label="昵称"
|
|
label-width="150"
|
|
>
|
|
<u-input
|
|
v-model="form.nickName"
|
|
placeholder="请输入昵称"
|
|
maxlength="10"
|
|
/>
|
|
</u-form-item>
|
|
<u-form-item
|
|
label="二维码"
|
|
label-width="150"
|
|
>
|
|
<img
|
|
:src="erwei"
|
|
alt=""
|
|
width="60"
|
|
@click="showQrCodeInFullSize"
|
|
/>
|
|
</u-form-item>
|
|
<u-form-item
|
|
label="性别"
|
|
label-width="150"
|
|
>
|
|
<u-radio-group
|
|
v-model="form.sex"
|
|
:active-color="lightColor"
|
|
>
|
|
<u-radio name="1">男</u-radio>
|
|
<u-radio name="0">女</u-radio>
|
|
</u-radio-group>
|
|
</u-form-item>
|
|
<u-form-item
|
|
label="生日"
|
|
label-width="150"
|
|
right-icon="arrow-right"
|
|
>
|
|
<div
|
|
style="width: 100%"
|
|
@click="showBirthday = true"
|
|
>
|
|
{{ birthday || '请选择出生日期' }}
|
|
</div>
|
|
<u-picker
|
|
v-model="showBirthday"
|
|
mode="time"
|
|
:confirm-color="lightColor"
|
|
@confirm="selectTime"
|
|
></u-picker>
|
|
</u-form-item>
|
|
|
|
<u-form-item
|
|
label="城市"
|
|
label-width="150"
|
|
placeholder="请选择城市"
|
|
right-icon="arrow-right"
|
|
>
|
|
<div
|
|
style="width: 32vh; white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
|
|
@click="clickRegion"
|
|
>
|
|
{{ form.___path || '请选择城市' }}
|
|
</div>
|
|
</u-form-item>
|
|
</u-form>
|
|
<div style="display: flex; justify-content: center"></div>
|
|
<div class="bottom">
|
|
<view
|
|
class="submit"
|
|
@click="submit"
|
|
>
|
|
保存
|
|
</view>
|
|
<view
|
|
class="submit light"
|
|
@click="showModalDialog"
|
|
>
|
|
退出登录
|
|
</view>
|
|
</div>
|
|
<u-modal
|
|
show-cancel-button
|
|
v-model="quitShow"
|
|
@confirm="confirm"
|
|
:confirm-color="lightColor"
|
|
:async-close="true"
|
|
:content="userInfo.id ? '确定要退出登录么？' : '确定要返回登录么？'"
|
|
></u-modal>
|
|
<m-city
|
|
:provinceData="region"
|
|
headTitle="区域选择"
|
|
ref="cityPicker"
|
|
@funcValue="getpickerParentValue"
|
|
pickerSize="4"
|
|
></m-city>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import { saveUserInfo, geterwei } from '@/api/members.js';
|
|
import { upload } from '@/api/common.js';
|
|
import { logout } from '@/api/login';
|
|
import storage from '@/utils/storage.js';
|
|
import uFormItem from '@/uview-ui/components/u-form-item/u-form-item.vue';
|
|
import gkcity from '@/components/m-city/m-city.vue';
|
|
import { clearIm } from '@/utils/handleim.js';
|
|
export default {
|
|
components: {
|
|
uFormItem,
|
|
'm-city': gkcity
|
|
},
|
|
data() {
|
|
return {
|
|
erwei: '',
|
|
quitShow: false,
|
|
userInfo: {},
|
|
lightColor: this.$lightColor, //高亮颜色
|
|
form: {
|
|
nickName: storage.getUserInfo().nickName || '',
|
|
birthday: storage.getUserInfo().birthday || '',
|
|
face: storage.getUserInfo().face || '/static/imlogo.png', //默认头像
|
|
regionId: [], //地址Id
|
|
region: storage.getUserInfo().region || [], //地址
|
|
sex: storage.getUserInfo().sex, //性别
|
|
___path: storage.getUserInfo().region
|
|
},
|
|
birthday: storage.getUserInfo().birthday || '', //生日
|
|
photo: [
|
|
{
|
|
text: '立即拍照',
|
|
color: this.$mainColor
|
|
},
|
|
{
|
|
text: '从相册选择',
|
|
color: this.$mainColor
|
|
}
|
|
],
|
|
region: [
|
|
//请求城市默认地址
|
|
{
|
|
id: '',
|
|
localName: '请选择',
|
|
children: []
|
|
}
|
|
],
|
|
showBirthday: false //显示生日日期
|
|
};
|
|
},
|
|
onShow() {
|
|
this.userInfo = this.$options.filters.isLogin();
|
|
this.getgeterwei();
|
|
},
|
|
methods: {
|
|
showQrCodeInFullSize() {
|
|
uni.previewImage({
|
|
urls: [this.erwei],
|
|
current: this.erwei
|
|
});
|
|
},
|
|
getgeterwei() {
|
|
geterwei().then((res) => {
|
|
this.erwei = res.data.result;
|
|
});
|
|
},
|
|
showModalDialog() {
|
|
this.quitShow = true;
|
|
},
|
|
clear() {
|
|
storage.setRefreshVlogIndex('1'); //需要刷新
|
|
storage.setHasLogin(false);
|
|
storage.setAccessToken('');
|
|
storage.setRefreshToken('');
|
|
storage.setUuid('');
|
|
storage.setUserInfo({});
|
|
// 清理vlog信息
|
|
storage.setVlogToken('');
|
|
storage.setVlogUserInfo(null);
|
|
// 清除初始化数据内容
|
|
storage.setRefreshVlogIndex('1'); //需要刷新
|
|
// 退出im登录
|
|
clearIm();
|
|
this.$options.filters.navigateToLogin('redirectTo');
|
|
},
|
|
/**
|
|
* 确认退出
|
|
* 清除缓存重新登录
|
|
*/
|
|
async confirm() {
|
|
await logout();
|
|
this.clear();
|
|
},
|
|
/**
|
|
* 退出登录
|
|
*/
|
|
quiteLoginOut() {
|
|
this.$options.filters.quiteLoginOut();
|
|
},
|
|
/**
|
|
* 选择地址回调
|
|
*/
|
|
getpickerParentValue(e) {
|
|
this.form.region = [];
|
|
this.form.regionId = [];
|
|
let name = '';
|
|
|
|
e.forEach((item, index) => {
|
|
if (item.id) {
|
|
this.form.region.push(item.localName);
|
|
this.form.regionId.push(item.id);
|
|
if (index == e.length - 1) {
|
|
name += item.localName;
|
|
} else {
|
|
name += item.localName + ',';
|
|
}
|
|
this.form.___path = name;
|
|
}
|
|
});
|
|
},
|
|
|
|
/**
|
|
* 点击选择地址
|
|
*/
|
|
clickRegion() {
|
|
this.$refs.cityPicker.show();
|
|
},
|
|
|
|
/**
|
|
* 提交保存
|
|
*/
|
|
submit() {
|
|
delete this.form.___path;
|
|
let params = JSON.parse(JSON.stringify(this.form));
|
|
saveUserInfo(params).then((res) => {
|
|
if (res.statusCode == 200) {
|
|
storage.setUserInfo(res.data.result);
|
|
uni.navigateBack();
|
|
}
|
|
});
|
|
},
|
|
|
|
/**
|
|
* 修改头像
|
|
*/
|
|
changeFace(index) {
|
|
uni.chooseImage({
|
|
success: (chooseImageRes) => {
|
|
const tempFilePaths = chooseImageRes.tempFilePaths;
|
|
uni.uploadFile({
|
|
url: upload,
|
|
filePath: tempFilePaths[0],
|
|
name: 'file',
|
|
header: {
|
|
accessToken: storage.getAccessToken()
|
|
},
|
|
success: (uploadFileRes) => {
|
|
let data = JSON.parse(uploadFileRes.data);
|
|
this.form.face = data.result;
|
|
}
|
|
});
|
|
}
|
|
});
|
|
},
|
|
|
|
/**
|
|
* 选择地址
|
|
*/
|
|
selectRegion(region) {
|
|
this.$set(this.form, 'address', `${region.province.label} ${region.city.label} ${region.area.label}`);
|
|
},
|
|
|
|
/**
|
|
* 选择时间
|
|
*/
|
|
selectTime(time) {
|
|
this.form.birthday = `${time.year}-${time.month}-${time.day}`;
|
|
this.birthday = `${time.year} - ${time.month} - ${time.day}`;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 加载数据
|
|
*/
|
|
onLoad() {}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.submit {
|
|
height: 90rpx;
|
|
line-height: 90rpx;
|
|
text-align: center;
|
|
margin-top: 90rpx;
|
|
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
color: $main-color;
|
|
border-radius: 100px;
|
|
}
|
|
|
|
.head {
|
|
height: 260rpx;
|
|
color: $font-color-light;
|
|
font-size: $font-sm;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
line-height: 2em;
|
|
|
|
image {
|
|
width: 144rpx;
|
|
height: 144rpx;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
/deep/ .u-form {
|
|
background-color: #ffffff;
|
|
padding: 0;
|
|
margin-top: 30rpx;
|
|
|
|
.u-form-item {
|
|
padding: 0 20rpx;
|
|
height: 110rpx;
|
|
line-height: 110rpx;
|
|
}
|
|
}
|
|
|
|
.form {
|
|
background-color: #ffffff;
|
|
}
|
|
.bottom {
|
|
position: fixed;
|
|
bottom: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
> .submit {
|
|
background: $light-color;
|
|
background: #fe3c3c;
|
|
color: #fff;
|
|
width: 40%;
|
|
}
|
|
}
|
|
|
|
::v-deep {
|
|
.u-radio__icon-wrap--checked {
|
|
// background: #FE3C3C;
|
|
// border: 1px solid #FE3C3C;
|
|
border-color: #fe3c3c !important;
|
|
background-color: #fe3c3c !important;
|
|
}
|
|
}
|
|
|
|
.u-form-item div {
|
|
}
|
|
</style>
|