<template>
|
<view>
|
<u-toast ref="uToast" /><u-no-network></u-no-network>
|
<u-navbar title="个人信息" safeAreaInsetTop fixed placeholder>
|
<view class="coreshop-navbar-left-slot" slot="left">
|
<u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
|
<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
|
<u-icon name="home" size="22" @click="goHome"></u-icon>
|
</view>
|
<view slot="right">
|
</view>
|
</u-navbar>
|
<view class="coreshop-bg-white coreshop-solid-top coreshop-padding-left-40 coreshop-padding-right-40 coreshop-padding-top-20 coreshop-padding-bottom-20 coreshop-margin-bottom-10">
|
<view class="coreshop-text-center coreshop-margin-bottom-10">
|
<text class="coreshop-text-black">加油</text>
|
<text class="coreshop-text-orange coreshop-font-40">{{percentage}}%</text>
|
<text class="coreshop-text-black">，太棒啦！</text>
|
</view>
|
<u-line-progress :percentage="percentage" activeColor="#5FB878"></u-line-progress>
|
</view>
|
<view class="coreshop-list menu coreshop-bg-white coreshop-padding-15">
|
<u--form :model="model" :rules="rules" ref="uForm" errorType="message" labelPosition="left" labelWidth="80">
|
<u-form-item label="头像：" borderBottom>
|
<u-avatar :src="model.avatar" @click="uploadAvatar" size="60" shape="square"></u-avatar>
|
<u-button slot="right" type="success" size="mini" @click="uploadAvatar">选择图片</u-button>
|
</u-form-item>
|
<u-form-item label="昵称：" prop="nickname" borderBottom>
|
<u--input border="none" v-model="model.nickname" />
|
</u-form-item>
|
<u-form-item label="性别：" prop="sex" borderBottom @click="actionSheetShow = true">
|
<u--input border="none" type="select" v-model="model.sex" disabled disabledColor="#ffffff" placeholder="请选择性别"></u--input>
|
<u-button slot="right" type="success" size="mini" @click="actionSheetShow = true">选择性别</u-button>
|
</u-form-item>
|
<u-form-item label="生日：" prop="birthday" borderBottom>
|
<u--input border="none" v-model="model.birthday" />
|
<u-datetime-picker ref="datetimePicker" v-model="birthdayTemporary" :show="show" :formatter="formatter" :minDate="-639129600000" :maxDate="1638725469000" mode="date" @confirm="bindDateChange" @cancel="show = false"></u-datetime-picker>
|
<u-button slot="right" type="success" size="mini" @click="show = true">选择日期</u-button>
|
</u-form-item>
|
</u--form>
|
</view>
|
<!--按钮-->
|
<view class="coreshop-bg-white coreshop-footer-fixed coreshop-foot-padding-bottom">
|
<u-button type="error" size="normal" @click="submitHandler()" :disabled='submitStatus' :loading='submitStatus'>保存</u-button>
|
</view>
|
<u-action-sheet :actions="actionSheetList" :show="actionSheetShow" @close="actionSheetShow = false" @select="actionSheetCallback"></u-action-sheet>
|
|
<w-compress ref='wCompress' />
|
|
</view>
|
</template>
|
|
<script>
|
import WCompress from '@/pages/member/components/w-compress/w-compress.vue'
|
export default {
|
components: {
|
WCompress
|
},
|
data() {
|
return {
|
model: {
|
birthday: '',
|
nickname: '',
|
sex: '',
|
sexIndex: 0,
|
avatar: '',
|
mobile: '',
|
},
|
birthdayTemporary: '',
|
showCalendar: false,
|
show: false,
|
calendarMode: 'date',
|
actionSheetShow: false,
|
actionSheetList: [
|
{
|
name: '男'
|
},
|
{
|
name: '女'
|
},
|
{
|
name: '保密'
|
}
|
],
|
rules: {
|
nickname: [
|
{
|
required: true,
|
message: '请输入昵称',
|
trigger: 'blur',
|
},
|
{
|
min: 2,
|
max: 16,
|
message: '昵称长度在2到16个长度',
|
trigger: ['change', 'blur'],
|
},
|
//{
|
// validator: (rule, value, callback) => {
|
// return this.$u.test.chinese(value);
|
// },
|
// message: '昵称必须为中文',
|
// trigger: ['change', 'blur'],
|
//}
|
],
|
sex: [
|
{
|
required: true,
|
message: '请选择性别',
|
trigger: 'change'
|
},
|
],
|
birthday: [
|
{
|
required: true,
|
message: '请选择生日',
|
trigger: 'blur',
|
}
|
],
|
},
|
index: 2,
|
submitStatus: false,
|
percentage: 0,
|
|
}
|
},
|
// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
|
onReady() {
|
this.$refs.uForm.setRules(this.rules);
|
// 微信小程序需要用此写法
|
this.$refs.datetimePicker.setFormatter(this.formatter)
|
},
|
methods: {
|
formatter(type, value) {
|
if (type === 'year') {
|
return `${value}年`
|
}
|
if (type === 'month') {
|
return `${value}月`
|
}
|
if (type === 'day') {
|
return `${value}日`
|
}
|
return value
|
},
|
//生日
|
bindDateChange: function (e) {
|
var time = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
|
this.model.birthday = time;
|
this.show = false;
|
},
|
// 点击actionSheet回调
|
actionSheetCallback(e) {
|
var _this = this;
|
uni.hideKeyboard();
|
for (var i = 0; i < this.actionSheetList.length; i++) {
|
if (e.name == this.actionSheetList[i].name) {
|
_this.model.sexIndex = i;
|
}
|
}
|
this.model.sex = e.name
|
this.$refs.uForm.validateField('model.sexIndex')
|
},
|
// 用户上传头像
|
uploadAvatar() {
|
var _this = this;
|
uni.chooseImage({
|
count: 1,
|
success: res => {
|
uni.showLoading({ title: '图片压缩中...', mask: true })
|
this.$refs.wCompress.start(res.tempFilePaths[0], {
|
pixels: 90000, // 最大分辨率，默认二百万
|
quality: 0.6, // 压缩质量，默认0.8
|
type: 'jpg', // 图片类型，默认jpg
|
base64: true, // 是否返回base64，默认false，非H5有效
|
})
|
.then(res => {
|
let data = {
|
base64: res,
|
}
|
_this.$u.api.uploadFilesFByBase64(data).then(resUrl => {
|
if (resUrl.code == 0) {
|
let avatar = resUrl.data.src;
|
//执行头像修改
|
_this.$u.api.changeAvatar({
|
id: avatar
|
}).then(resOut => {
|
if (resOut.status) {
|
_this.$refs.uToast.show({
|
message: '上传成功', type: 'success', complete: function () {
|
_this.model.avatar = resOut.data
|
}
|
})
|
} else {
|
_this.$u.toast(resOut.msg)
|
}
|
})
|
} else {
|
_this.$u.toast(resUrl.msg);
|
}
|
});
|
uni.hideLoading()
|
})
|
.catch(e => {
|
console.log(e)
|
uni.hideLoading()
|
})
|
}
|
})
|
|
},
|
// 保存资料
|
submitHandler() {
|
var _this = this;
|
this.submitStatus = true;
|
if (!!!this.model.birthday) {
|
this.$refs.uToast.show({ message: '请选择出生日期', type: 'error' })
|
this.submitStatus = false;
|
return false;
|
}
|
this.$refs.uForm.validate().then(res => {
|
let sex = parseInt(this.model.sexIndex) + 1;
|
this.$u.api.editInfo({
|
sex: sex,
|
birthday: this.model.birthday,
|
nickname: this.model.nickname
|
}).then(res => {
|
if (res.status) {
|
this.submitStatus = false;
|
this.$refs.uToast.show({
|
message: res.msg, type: 'success', complete: function () {
|
_this.goUserCenter();
|
}
|
})
|
} else {
|
this.submitStatus = false;
|
_this.$u.toast(res.msg);
|
}
|
});
|
}).catch(errors => {
|
this.$refs.uToast.show({ message: '提交的数据校验失败，请输入合法信息！', type: 'error' })
|
this.submitStatus = false;
|
})
|
}
|
},
|
onLoad: function () {
|
var _this = this;
|
_this.$u.api.userInfo().then(res => {
|
if (res.status) {
|
if (res.data.birthday) {
|
_this.model.birthday = uni.$u.timeFormat(res.data.birthday, 'yyyy-mm-dd');
|
}
|
_this.birthdayTemporary = _this.model.birthday;
|
_this.model.nickname = res.data.nickName;
|
_this.model.mobile = res.data.mobile;
|
|
if (res.data.birthday) {
|
_this.percentage += 25;
|
}
|
if (res.data.nickName) {
|
_this.percentage += 25;
|
}
|
if (res.data.mobile) {
|
_this.percentage += 25;
|
}
|
if (res.data.avatarImage) {
|
_this.percentage += 25;
|
}
|
|
if (res.data.sex && res.data.sex == 0) {
|
_this.model.sex = _this.actionSheetList[2].name;
|
} else {
|
_this.model.sex = _this.actionSheetList[res.data.sex - 1].name;
|
}
|
_this.model.avatar = res.data.avatarImage;
|
} else {
|
//报错了
|
_this.$u.toast(res.msg);
|
}
|
});
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
</style>
|
