You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
379 lines
8.0 KiB
379 lines
8.0 KiB
<template>
|
|
<view class="user-info flex-1">
|
|
<view class="row">
|
|
<text>头像</text>
|
|
<view class="pic_box">
|
|
<view class="pic_box">
|
|
<button open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
|
|
<u-avatar size="80" :src="form.headUrl || ''" @click="selectFile"></u-avatar>
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="row" @click="toPage">
|
|
<text>昵称</text>
|
|
<u-input v-model="form.nickName" disabled input-align="right" placeholder="请设置姓名" @click="toPage" />
|
|
</view>
|
|
<view class="row flex align-center">
|
|
<text>手机号码</text>
|
|
<u-input v-model="form.phone" disabled input-align="right" placeholder="请设置手机号码" />
|
|
<!-- <text>{{ form.phone }}</text> -->
|
|
</view>
|
|
<view class="row flex align-center">
|
|
<text>性别</text>
|
|
<view class="flex align-center" @click="showPopup('sexShow')">
|
|
<u-input v-model="form.sex" disabled placeholder="请设置性别" input-align="right"
|
|
@click="showPopup('sexShow')" />
|
|
<u-icon name="arrow-right" class="m-l-10"></u-icon>
|
|
</view>
|
|
</view>
|
|
<view class="row flex align-center">
|
|
<text>生日</text>
|
|
<view class="flex-1 flex align-center justify-end" @click="showPopup('birthdayShow')">
|
|
<u-input v-model="form.birthday" disabled placeholder="您还未设置生日" input-align="right"
|
|
@click="showPopup('birthdayShow')" />
|
|
<u-icon name="arrow-right" class="m-l-10"></u-icon>
|
|
</view>
|
|
</view>
|
|
<u-select v-model="sexShow" :list="sexList" @confirm="sexConfirm" />
|
|
<u-picker mode="time" v-model="birthdayShow" @confirm="birthdayConfirm" confirm-color="#01AEEA" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
const defaultAvatarUrl =
|
|
'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
|
|
import {
|
|
mapState
|
|
} from "vuex";
|
|
import config_img from "@/utils/js/config.js";
|
|
import {
|
|
UPLOAD_IMG
|
|
} from '@/config/settings.js'
|
|
import {
|
|
TOKEN_HEADER_NAME
|
|
} from '@/config/settings.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
uploadUrl: UPLOAD_IMG,
|
|
status: 'watch',
|
|
img_url: config_img.img_url,
|
|
form: {
|
|
nickName: '',
|
|
sex: '',
|
|
phone: '',
|
|
headUrl: '',
|
|
birthday: ''
|
|
},
|
|
sexShow: false,
|
|
birthdayShow: false,
|
|
sexList: [{
|
|
value: "1",
|
|
label: "男",
|
|
},
|
|
{
|
|
value: "2",
|
|
label: "女",
|
|
},
|
|
],
|
|
};
|
|
},
|
|
onLoad() {
|
|
console.log(this.userInfo)
|
|
const getUserInfo = this.$storage.getStorage("__user_info")
|
|
this.form = getUserInfo
|
|
this.form.birthday = this.form.birthday.substr(0, 10)
|
|
uni.$on('EDITNAME', val => {
|
|
this.form.nickName = val
|
|
this.editUserInfo({
|
|
nickName: val
|
|
})
|
|
})
|
|
},
|
|
computed: {
|
|
// ...mapState({
|
|
// userInfo: (state) => state.userInfo,
|
|
// }),
|
|
// disabled () {
|
|
// return this.status === 'edit' ? false : true
|
|
// },
|
|
// btnTxt () {
|
|
// return this.status === 'edit' ? '保存' : '修改'
|
|
// }
|
|
},
|
|
onUnload() {
|
|
this.$off('EDITNAME')
|
|
},
|
|
|
|
methods: {
|
|
onChooseAvatar(e) {
|
|
console.log("===================")
|
|
console.log(e)
|
|
},
|
|
preserve() {
|
|
if (this.status === 'watch') return this.status = 'edit'
|
|
console.log(this.$refs.uUpload.lists, this.fileList)
|
|
},
|
|
onSuccess(data) {
|
|
this.setUserInfo({
|
|
headUrl: data.result
|
|
});
|
|
},
|
|
sexConfirm(arr) {
|
|
this.form.sex = arr[0].label
|
|
this.editUserInfo({
|
|
sex: this.form.sex
|
|
})
|
|
},
|
|
birthdayConfirm(time) {
|
|
let {
|
|
year,
|
|
month,
|
|
day
|
|
} = time;
|
|
this.form.birthday = `${year}-${month}-${day}`;
|
|
this.editUserInfo({
|
|
birthday: this.form.birthday
|
|
})
|
|
},
|
|
showPopup(key) {
|
|
if (!this.disabled) this[key] = true
|
|
},
|
|
toPage() {
|
|
this.$tools.navigateTo({
|
|
url: `/pages/my/information/editName?name=${this.form.nickName}`
|
|
})
|
|
},
|
|
editUserInfo(params = {}, status = 0) {
|
|
uni.showLoading();
|
|
this.$api('editUserInfo', params)
|
|
.then(res => {
|
|
uni.hideLoading();
|
|
let {
|
|
code,
|
|
message,
|
|
result
|
|
} = res
|
|
this.$Toast(message)
|
|
if (code === 200) {
|
|
if (status == 1) {
|
|
// 上传图片
|
|
console.log(params.headUrl, 12313)
|
|
this.form.headUrl = params.headUrl
|
|
}
|
|
// 更新用户信息
|
|
this.getUserInfo();
|
|
}
|
|
}).catch(err => {
|
|
uni.hideLoading();
|
|
this.$Toast(err.message)
|
|
})
|
|
},
|
|
selectFile(e) {
|
|
console.log(e)
|
|
// disabled
|
|
uni.showActionSheet({
|
|
itemList: ['拍照', '选择一张照片'],
|
|
success: res => {
|
|
this.chooseImage(res.tapIndex)
|
|
},
|
|
fail: err => {
|
|
// this.$Toast(err.errMsg);
|
|
}
|
|
})
|
|
},
|
|
// 更新用户信息
|
|
getUserInfo() {
|
|
return new Promise((resolve, reject) => {
|
|
this.$api('getUserInfo').then(res => {
|
|
let {
|
|
code,
|
|
result,
|
|
message
|
|
} = res;
|
|
if (code == 200) {
|
|
this.$storage.removeStorage('__user_info')
|
|
let userInfo = {
|
|
...result.account,
|
|
...result.userInfo
|
|
}
|
|
// 更新用户信息缓存
|
|
// this.userInfo = userInfo
|
|
this.$storage.setStorage("__user_info", userInfo)
|
|
// this.getAddressInfo();
|
|
resolve(result)
|
|
} else {
|
|
reject(message)
|
|
}
|
|
}).catch(err => {
|
|
reject(err.message)
|
|
})
|
|
})
|
|
},
|
|
chooseImage() {
|
|
uni.chooseImage({
|
|
count: 1,
|
|
sourceType: ['album', 'camera'],
|
|
sizeType: ['original', 'compressed'],
|
|
success: res => {
|
|
res.tempFiles.map((val, index) => {
|
|
// this.fileList.push({
|
|
// url: val.path,
|
|
// progress: 0,
|
|
// error: false,
|
|
// file: val,
|
|
// });
|
|
|
|
uni.uploadFile({
|
|
url: this.uploadUrl,
|
|
filePath: val.path,
|
|
name: 'file',
|
|
header: {
|
|
[TOKEN_HEADER_NAME]: this.$store.state.userToken
|
|
},
|
|
success: res => {
|
|
console.log(res)
|
|
const img = JSON.parse(res.data)
|
|
this.editUserInfo({
|
|
headUrl: img.result
|
|
}, 1)
|
|
},
|
|
fail: err => {
|
|
console.log(err)
|
|
}
|
|
})
|
|
});
|
|
},
|
|
fail: error => {
|
|
this.$Toast(error);
|
|
}
|
|
})
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.user-info {
|
|
padding-bottom: 140rpx;
|
|
|
|
&-footer {
|
|
z-index: 1;
|
|
height: 120rpx;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
background: #fff;
|
|
|
|
/deep/.u-btn {
|
|
width: 660rpx;
|
|
height: 80rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.pic_box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
/deep/.u-list-item {
|
|
margin: 0;
|
|
width: 89rpx !important;
|
|
height: 89rpx !important;
|
|
border-radius: 50%;
|
|
|
|
.u-preview-image {
|
|
width: 89rpx;
|
|
height: 89rpx;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
image {
|
|
width: 89rpx;
|
|
height: 89rpx;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
// border: 1px solid #707070;
|
|
}
|
|
}
|
|
|
|
image {
|
|
width: 89rpx;
|
|
height: 89rpx;
|
|
border-radius: 50%;
|
|
// border: 1px solid #707070;
|
|
}
|
|
}
|
|
|
|
/deep/ .u-calendar__action {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.row {
|
|
width: 691rpx;
|
|
height: 110rpx;
|
|
margin: 0 auto;
|
|
font-size: 32rpx;
|
|
color: #000000;
|
|
padding-left: 10rpx;
|
|
padding-right: 37rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-bottom: 1px solid #ccc;
|
|
|
|
.data_time {
|
|
padding-right: 30rpx;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
width: 520rpx;
|
|
height: 300rpx;
|
|
background-color: #fff;
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
|
|
.contentRow {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
text {
|
|
margin-left: 18rpx;
|
|
margin-top: 20rpx;
|
|
font-size: 45rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/deep/ u-input {
|
|
flex: 1;
|
|
margin: 10rpx 30rpx 10rpx;
|
|
}
|
|
}
|
|
|
|
.btn_box {
|
|
display: flex;
|
|
|
|
.close {
|
|
width: 180rpx;
|
|
color: #707070;
|
|
}
|
|
|
|
.change {
|
|
background-color: #01aeea;
|
|
color: #fff;
|
|
width: 180rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
</style>
|