305 lines
8.5 KiB
Vue
305 lines
8.5 KiB
Vue
<template>
|
||
<view>
|
||
<view class="hm-header-xian"></view>
|
||
<view class="avatar">
|
||
<view class="avatar-image">
|
||
<image :src="user.avatar"></image>
|
||
<view class="mask" @click="chooseLogo()">编辑头像</view>
|
||
</view>
|
||
</view>
|
||
<view class="form-box hm-m-t-20">
|
||
<u--form :model="formData" ref="form">
|
||
<u-form-item label="用户ID" labelWidth="80" borderBottom>
|
||
<u--input v-model="user.user_id" color="#999" border="none" readonly></u--input>
|
||
</u-form-item>
|
||
<u-form-item label="姓名昵称" labelWidth="80" borderBottom @click="nickname_show = true">
|
||
<u--input v-model="formData.userInfo.nickname" color="#999" border="none" readonly></u--input>
|
||
<u-icon slot="right" name="arrow-right" color="#999"></u-icon>
|
||
</u-form-item>
|
||
<u-form-item label="用户性别" labelWidth="80" borderBottom @click="gender_show = true">
|
||
<u--input v-model="formData.userInfo.gender" color="#999" readonly border="none"></u--input>
|
||
<u-icon slot="right" name="arrow-right" color="#999"></u-icon>
|
||
</u-form-item>
|
||
<u-form-item label="手机号码" labelWidth="80" borderBottom ref="item1">
|
||
<u--input v-model="user.phone" color="#999" border="none" readonly></u--input>
|
||
</u-form-item>
|
||
<u-form-item label="出生日期" labelWidth="80" @click="birthdayShow" ref="item1">
|
||
<u--input v-model="formData.userInfo.birthday" color="#999" placeholderStyle="color:#fa3534;"
|
||
placeholder="完善生日，享生日好礼" readonly border="none"></u--input>
|
||
<u-icon slot="right" name="arrow-right" color="#999"></u-icon>
|
||
</u-form-item>
|
||
</u--form>
|
||
</view>
|
||
<view class="hm-p-lr-20">
|
||
<view class="hm-m-t-20">
|
||
<u-button plain type="info" @click="outLogin" text="退出登录"></u-button>
|
||
</view>
|
||
<view class="hm-m-t-20">
|
||
<u-button type="success" @click="action" text="保存修改"></u-button>
|
||
</view>
|
||
</view>
|
||
<u-modal :show="nickname_show" title="修改姓名昵称" @confirm="confirmNickname" @cancel="cancelNickname"
|
||
confirmColor="#19be6b" :show-cancel-button="true">
|
||
<view class="nickname">
|
||
<u--input v-model="new_nickname" input-align="center" border="none" clearable placeholder="请输入姓名" />
|
||
</view>
|
||
</u-modal>
|
||
<u-picker :show="gender_show" @cancel="gender_show = false" :columns="gender" title="选择性别"
|
||
confirmColor="#19be6b" @confirm="setGender">
|
||
</u-picker>
|
||
<u-datetime-picker :show="birthday_show" v-model="user.birthday" mode="date" title="选择您的生日"
|
||
confirmColor="#19be6b" :minDate="minDate" :maxDate="maxDate" @confirm="setBirthday"
|
||
@cancel="birthday_show = false"></u-datetime-picker>
|
||
<!-- 技术支持 -->
|
||
<view class="hm">
|
||
{{applet.copyright}} <text class="v">V{{applet.version}}</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
const App = getApp();
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
applet: {},
|
||
formData: {
|
||
userInfo: {
|
||
nickname: '',
|
||
gender: '',
|
||
avatar: '',
|
||
birthday: ''
|
||
},
|
||
},
|
||
user: {
|
||
user_id: '',
|
||
avatar: '',
|
||
phone: '',
|
||
birthday: ''
|
||
},
|
||
nickname_show: false,
|
||
new_nickname: '',
|
||
gender_show: false,
|
||
gender: [
|
||
['未知', '先生', '女士']
|
||
],
|
||
maxDate: 0,
|
||
minDate: 0,
|
||
birthday_show: false,
|
||
is_birthday: false,
|
||
};
|
||
},
|
||
|
||
components: {},
|
||
props: {},
|
||
|
||
/**
|
||
* 生命周期函数--监听页面加载
|
||
*/
|
||
onLoad(options) {
|
||
let _this = this;
|
||
_this.applet = uni.getStorageSync('applet');
|
||
},
|
||
|
||
/**
|
||
* 生命周期函数--监听页面显示
|
||
*/
|
||
onShow() {
|
||
let _this = this;
|
||
_this.getUserDetail();
|
||
},
|
||
created: function() {
|
||
let _this = this;
|
||
// 监听从裁剪页发布的事件，获得裁剪结果
|
||
uni.$on('cropper', path => {
|
||
App._upload_file(path, {}, function(result) {
|
||
_this.formData.userInfo.avatar = result.data.file_path;
|
||
_this.user.avatar = result.data.url;
|
||
});
|
||
})
|
||
},
|
||
methods: {
|
||
/**
|
||
* 选择图片
|
||
*/
|
||
chooseLogo: function() {
|
||
let _this = this;
|
||
// 此为uView的跳转方法，详见"文档-JS"部分，也可以用uni的uni.navigateTo
|
||
_this.$u.route({
|
||
// 关于此路径，请见下方"注意事项"
|
||
url: 'pages/cropper/cropper',
|
||
params: {
|
||
destWidth: 400, // 输出图片宽度，单位px
|
||
destHeight: 400, // 输出图片高度，单位px
|
||
rectWidth: 400, // 裁剪框宽度，单位px
|
||
rectHeight: 400, // 裁剪框高度，单位px
|
||
fileType: 'jpg', // 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
|
||
}
|
||
})
|
||
},
|
||
/**
|
||
* 安全退出
|
||
*/
|
||
outLogin: function() {
|
||
let _this = this;
|
||
uni.showModal({
|
||
title: "提示",
|
||
content: "确定要退出登录？",
|
||
success: function(o) {
|
||
if (o.confirm) {
|
||
App._get('user/logout', {}, result => {
|
||
App.showSuccess(result.msg, function() {
|
||
let user = App.getUser();
|
||
user.is_login = false;
|
||
uni.setStorageSync('user',user);
|
||
App.goTo('user/index');
|
||
});
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
/**
|
||
* 获取当前用户信息
|
||
*/
|
||
getUserDetail() {
|
||
let _this = this;
|
||
App._get('user/detail', {}, result => {
|
||
_this.user.avatar = result.data.detail.avatar.url;
|
||
_this.user.user_id = result.data.detail.user_id;
|
||
_this.user.phone = result.data.detail.phone;
|
||
_this.formData.userInfo.nickname = result.data.detail.nickname;
|
||
_this.formData.userInfo.avatar = result.data.detail.avatar.path;
|
||
_this.formData.userInfo.gender = result.data.detail.gender.text;
|
||
_this.new_nickname = result.data.detail.nickname;
|
||
if (result.data.detail.birthday == '') {
|
||
_this.maxDate = Number(new Date()) - (10 * 60 * 60 * 24 * 360 * 1000);
|
||
_this.minDate = _this.maxDate - (60 * 60 * 60 * 24 * 360 * 1000);
|
||
_this.user.birthday = Date.parse(new Date('1990-06-15'));
|
||
_this.is_birthday = true;
|
||
} else {
|
||
_this.formData.userInfo.birthday = result.data.detail.birthday;
|
||
}
|
||
});
|
||
},
|
||
/**
|
||
* 修改昵称
|
||
*/
|
||
confirmNickname() {
|
||
let _this = this;
|
||
if (_this.new_nickname != '') {
|
||
_this.formData.userInfo.nickname = _this.new_nickname;
|
||
}
|
||
_this.nickname_show = false;
|
||
},
|
||
cancelNickname() {
|
||
let _this = this;
|
||
_this.new_nickname = _this.formData.userInfo.nickname;
|
||
_this.nickname_show = false;
|
||
},
|
||
|
||
/**
|
||
* 修改性别
|
||
*/
|
||
setGender(e) {
|
||
let _this = this;
|
||
_this.formData.userInfo.gender = e.value[0];
|
||
_this.gender_show = false;
|
||
},
|
||
birthdayShow: function() {
|
||
let _this = this;
|
||
if (!_this.is_birthday) {
|
||
App.showError('不可修改');
|
||
return false;
|
||
}
|
||
_this.birthday_show = true;
|
||
},
|
||
setBirthday(e) {
|
||
let _this = this;
|
||
_this.formData.userInfo.birthday = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
|
||
_this.birthday_show = false;
|
||
},
|
||
/**
|
||
* 提交保存
|
||
*/
|
||
action() {
|
||
let _this = this,
|
||
userInfo = _this.formData.userInfo,
|
||
gender = _this.gender[0];
|
||
for (let n = 0; n < gender.length; n++) {
|
||
if (gender[n] == userInfo.gender) {
|
||
userInfo.gender = n;
|
||
break;
|
||
}
|
||
}
|
||
if(userInfo.nickname == ''){
|
||
App.showError('请输入姓名昵称');
|
||
return false;
|
||
}
|
||
if(userInfo.gender == 0){
|
||
App.showError('请选择性别');
|
||
return false;
|
||
}
|
||
App._post_form('user/detail', userInfo, function(result) {
|
||
App.showSuccess(result.msg, function() {
|
||
uni.navigateBack(); //返回上一页
|
||
});
|
||
}, false,
|
||
function() {});
|
||
}
|
||
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.avatar {
|
||
background-color: #fff;
|
||
padding: 40rpx;
|
||
text-align: center;
|
||
.avatar-image{
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
z-index: 1;
|
||
position:relative;
|
||
display: inline-block;
|
||
image {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
border-radius: 50%;
|
||
}
|
||
.mask{
|
||
display: inline-block;
|
||
z-index: 100;
|
||
position: absolute;
|
||
top: 0rpx;
|
||
left: 0rpx;
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
border-radius: 50%;
|
||
background: rgba(0, 0, 0, 0.3);
|
||
color: #fff;
|
||
line-height: 200rpx;
|
||
text-align: center;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.form-box {
|
||
padding: 0rpx 20rpx;
|
||
border-radius: 8rpx;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.nickname {
|
||
width: 100%;
|
||
}
|
||
|
||
.nickname input {
|
||
background-color: #f7f7f7;
|
||
padding: 20rpx 0rpx;
|
||
}
|
||
</style>
|