<template>
|
<view class="page_bg">
|
<u-toast ref="uToast" />
|
<view class="list_item" @tap="chooseAvatar">
|
<view class="item_left">头像</view>
|
<view class="item_right">
|
<u-avatar :src="avatar || '../../static/member/avatra.png'"></u-avatar>
|
<image src="/static/remote/59d50f245e774077b29cc12824c65db5.png"></image>
|
</view>
|
</view>
|
<view class="list_item" @tap="navigateTo(`./personal-data-second?type=nickname&text=${userData.nickname}`)">
|
<view class="item_left">昵称</view>
|
<view class="item_right">
|
<text>{{userData.nickname}}</text>
|
</view>
|
</view>
|
<view class="list_item" @tap="genderShow = true">
|
<view class="item_left">性别</view>
|
<view class="item_right">
|
<text v-if="vk.pubfn.isNull(userData.gender)">未设置</text>
|
<text v-if="userData.gender == 1">男</text>
|
<text v-if="userData.gender == 2">女</text>
|
<image src="/static/remote/59d50f245e774077b29cc12824c65db5.png"></image>
|
</view>
|
</view>
|
<view class="list_item" @tap="timeShow = true">
|
<view class="item_left">出生年月</view>
|
<view class="item_right">
|
<text>{{userData.birthday || '未设置'}}</text>
|
<image src="/static/remote/59d50f245e774077b29cc12824c65db5.png"></image>
|
</view>
|
</view>
|
<view class="list_item" @tap="navigateTo(`./personal-data-second?type=profession&text=${userData.profession}`)">
|
<view class="item_left">职业</view>
|
<view class="item_right">
|
<text>{{userData.profession || '暂无'}}</text>
|
</view>
|
</view>
|
<view class="list_item" @tap="navigateTo(`./personal-data-second?type=wxnumber&text=${userData.wxnumber}`)">
|
<view class="item_left">微信号</view>
|
<view class="item_right">
|
<text>{{userData.wxnumber || '暂无'}}</text>
|
</view>
|
</view>
|
<view class="list_item" @tap="navigateTo(`./personal-data-second?type=qqnumber&text=${userData.qqnumber}`)">
|
<view class="item_left">QQ号</view>
|
<view class="item_right">
|
<text>{{userData.qqnumber || '暂无'}}</text>
|
</view>
|
</view>
|
|
<u-button class="save_btn" shape="circle" :ripple="true" ripple-bg-color="#444" @tap="saveData">保存</u-button>
|
|
<!-- 时间选择器 -->
|
<u-picker mode="time" v-model="timeShow" :end-year="endYear" :params="params" @confirm="selectTime"></u-picker>
|
<u-picker mode="selector" :range="selector" v-model="genderShow" :default-selector="[0]"
|
@confirm="selectGender"></u-picker>
|
|
<u-toast ref="uToast" />
|
</view>
|
</template>
|
|
<script>
|
var that; // 当前页面对象
|
var vk; // vk依赖
|
export default {
|
data() {
|
// 页面数据变量
|
return {
|
// 头像地址
|
avatar: '',
|
// 用户数据
|
userData: {
|
username: '',
|
nickname: '',
|
gender: '',
|
birthday: '',
|
profession: '',
|
wxnumber: '',
|
qqnumber: ''
|
},
|
// 时间选择器显隐
|
timeShow: false,
|
// 时间选择器参数
|
params: {
|
year: true,
|
month: true,
|
day: true,
|
hour: false,
|
minute: false,
|
second: false
|
},
|
// 性别选择器显隐
|
genderShow: false,
|
// 性别选择器参数
|
selector: ['男', '女']
|
}
|
},
|
computed: {
|
endYear() {
|
let year = new Date().getFullYear()
|
return year
|
}
|
},
|
// 监听 - 页面每次【加载时】执行(如：前进)
|
onLoad(options = {}) {
|
that = this;
|
vk = that.vk;
|
|
uni.$on('getBack', (res) => {
|
this.userData[res.type] = res.text
|
})
|
that.init(options)
|
},
|
// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
|
onReady() {},
|
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
|
onShow() {},
|
// 监听 - 页面每次【隐藏时】执行(如：返回)
|
onHide() {},
|
// 函数
|
methods: {
|
// 页面数据初始化函数
|
init(options) {
|
that.getUserInfo()
|
},
|
// 获取用户信息
|
getUserInfo() {
|
uni.vk.callFunction({
|
url: 'user/kh/getMyUserInfo',
|
title: '获取中...',
|
success(data) {
|
let info = data.userInfo
|
that.userData = {
|
username: info.username,
|
nickname: info.nickname,
|
gender: info.gender,
|
birthday: info.birthday,
|
profession: info.profession,
|
wxnumber: info.wxnumber,
|
qqnumber: info.qqnumber
|
}
|
that.avatar = info.avatar
|
}
|
});
|
},
|
// 选择头像
|
chooseAvatar() {
|
uni.chooseImage({
|
count: 1,
|
success: (res) => {
|
this.avatar = res.tempFilePaths[0]
|
}
|
})
|
},
|
// 时间选择完成
|
selectTime(e) {
|
that.userData.birthday = e.year + '-' + e.month + '-' + e.day
|
},
|
// 性别选择完成
|
selectGender(e) {
|
that.userData.gender = e[0] + 1
|
},
|
// 先保存头像
|
saveData() {
|
if (!this.avatar) return that.saveOtherInfo('')
|
// 头像已存入云端
|
if (this.avatar.indexOf('blob') == -1 && this.avatar.indexOf('localhost') == -1) {
|
that.saveOtherInfo(this.avatar)
|
return
|
}
|
vk.callFunctionUtil.uploadFile({
|
title: "上传中...",
|
filePath: this.avatar,
|
suffix: "png",
|
provider: "unicloud",
|
success: async res => {
|
const urls = await uniCloud.getTempFileURL({ fileList: [res.fileID] })
|
const url = urls.fileList[0];
|
|
if (url.tempFileURL) {
|
that.saveOtherInfo(url.tempFileURL)
|
} else {
|
this.$refs.uToast.show({ title: '头像上传失败', type: 'warning' })
|
}
|
}
|
});
|
},
|
// 保存剩余信息
|
saveOtherInfo(url) {
|
uni.vk.callFunction({
|
url: 'user/kh/updateUser',
|
title: '处理中',
|
data: {
|
avatar: url,
|
nickname: this.userData.nickname,
|
gender: Number(this.userData.gender),
|
birthday: this.userData.birthday,
|
profession: this.userData.profession,
|
wxnumber: this.userData.wxnumber,
|
qqnumber: this.userData.qqnumber
|
},
|
success: function(data) {
|
// 通知我的页面刷新
|
uni.$emit('relogin', { msg: '重新登录' })
|
that.$refs.uToast.show({
|
title: '保存成功',
|
type: 'success',
|
duration: 1000,
|
back: true
|
})
|
}
|
});
|
}
|
},
|
onUnload() {
|
uni.$off('getBack')
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.page_bg {
|
height: 100vh;
|
background-color: #F5F5F5;
|
padding-top: 20rpx;
|
}
|
|
.list_item {
|
height: 112rpx;
|
background: #FFFFFF;
|
margin-bottom: 2rpx;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 0 20rpx;
|
|
.item_left {
|
font-size: 28rpx;
|
font-weight: bold;
|
color: #333333;
|
}
|
|
.item_right {
|
display: flex;
|
align-items: center;
|
|
image {
|
margin-left: 16rpx;
|
width: 16rpx;
|
height: 28rpx;
|
}
|
|
.avatar_upload {
|
width: 82rpx;
|
height: 82rpx;
|
border-radius: 50%;
|
overflow: hidden;
|
background-color: rgb(244, 245, 246);
|
border: 1px solid #ebecee;
|
|
/deep/ view {
|
width: 100% !important;
|
height: 100% !important;
|
margin: 0 !important;
|
border: none !important;
|
}
|
|
.slot-btn {
|
width: 100% !important;
|
height: 100% !important;
|
}
|
}
|
}
|
}
|
|
.save_btn {
|
background-color: #333333;
|
color: #FFFFFF;
|
margin: 192rpx 30rpx 0;
|
}
|
</style>
|
