299 lines
6.7 KiB
Vue
299 lines
6.7 KiB
Vue
<template>
|
|
<view class="container">
|
|
<view class="flex align-center justify-between p-3 bg-fff bor-bot around-p">
|
|
<view class="container-title">
|
|
头像
|
|
</view>
|
|
<view class="flex align-center" @click="clickHeaderFn">
|
|
<u-avatar :src="user.avatar" size="30" />
|
|
<u-icon name="arrow-right" />
|
|
</view>
|
|
</view>
|
|
<view class="flex align-center justify-between p-3 bg-fff bor-bot around-p">
|
|
<view class="container-title">
|
|
昵称
|
|
</view>
|
|
<view class="container-cont" @click="openPopup('nickname')">
|
|
{{user.nickName?user.nickName:'默认名称'}}
|
|
</view>
|
|
</view>
|
|
<view class="flex align-center justify-between p-3 bg-fff bor-bot around-p">
|
|
<view class="container-title">
|
|
性别
|
|
</view>
|
|
<view class="flex align-center container-cont" @click="openPopup('sex')">
|
|
{{user.gender}}
|
|
<u-icon name="arrow-right" />
|
|
</view>
|
|
</view>
|
|
<view class="flex align-center justify-between p-3 bg-fff bor-bot around-p">
|
|
<view class="container-title">
|
|
我的认证
|
|
</view>
|
|
<view class="flex align-center container-cont" @click="navAuthenticationFn">
|
|
<view v-if="1" class="red">未认证</view>
|
|
<view v-else>已认证</view>
|
|
<u-icon name="arrow-right" />
|
|
</view>
|
|
</view>
|
|
<view class="flex align-center justify-between p-3 bg-fff bor-bot around-p">
|
|
<view class="container-title">
|
|
绑定手机
|
|
</view>
|
|
<view class="flex align-center container-cont">
|
|
123****2311
|
|
</view>
|
|
</view>
|
|
<view class="flex align-center justify-between p-3 bg-fff bor-bot around-p">
|
|
<view class="container-title">
|
|
绑定微信
|
|
</view>
|
|
<view class="flex align-center container-cont">
|
|
去绑定
|
|
<u-icon name="arrow-right" />
|
|
</view>
|
|
</view>
|
|
<view class="flex align-center justify-between p-3 bg-fff bor-bot around-p">
|
|
<view class="container-title">
|
|
个人简介
|
|
</view>
|
|
<view class="container-cont" @click="openPopup('introduction')">
|
|
{{user.introduction?user.introduction:'暂无介绍'}}
|
|
</view>
|
|
</view>
|
|
<!-- 名称弹出层 -->
|
|
<u-popup :show="nicknameShow" round="15" mode="bottom" @close="close" closeable>
|
|
<view class="popup-box-1">
|
|
<view class="title text-center f-28">
|
|
修改昵称
|
|
</view>
|
|
<view class="input-box border-bottom border-eee flex align-center" round="15">
|
|
<text>昵称</text>
|
|
<u--input border="none" inputAlign="center" type="text" maxlength="15" v-model="user.nickName" />
|
|
</view>
|
|
<view class="mt-2 text-right aaa">
|
|
{{ user.nickName ? user.nickName.length : 0}}/15
|
|
</view>
|
|
<view class="mz-30">
|
|
<u-button type="primary" color="#13AFA8" shape="circle" @click="changeNickname">保存</u-button>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
<!-- 性别选择 -->
|
|
<u-picker :show="sexShow" :columns="sexColumns" @confirm="sexConfirm" @cancel="sexCancel"></u-picker>
|
|
<!-- 个人简介 -->
|
|
<u-popup :show="introductionShow" round="15" mode="bottom" @close="close" closeable>
|
|
<view class="introduction">
|
|
<u-textarea v-model="user.introduction" height="266rpx" border="none" count placeholder="请输入简介"
|
|
:customStyle="{background:'#F5F5F5',padding:'20rpx 10rpx'}"></u-textarea>
|
|
<view style="height: 40rpx;"></view>
|
|
<u-button type="primary" color="#13AFA8" shape="circle" @click="changeNickname">保存</u-button>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
uploadImg,
|
|
parseTime
|
|
} from "@/utils/index"
|
|
export default {
|
|
data() {
|
|
return {
|
|
introductionShow: false,
|
|
parseTime,
|
|
user: {
|
|
gender: '未知',
|
|
introduction: ''
|
|
},
|
|
nicknameShow: false,
|
|
sexShow: false,
|
|
sexColumns: [
|
|
['男', '女', ]
|
|
],
|
|
}
|
|
},
|
|
onLoad() {},
|
|
computed: {},
|
|
methods: {
|
|
//去认证
|
|
navAuthenticationFn(){
|
|
uni.navigateTo({
|
|
url:'/pages/mine/my_authentication/my_authentication'
|
|
})
|
|
},
|
|
//点击头像
|
|
clickHeaderFn() {
|
|
uni.showActionSheet({
|
|
itemList: ['保存图片', '更换头像'],
|
|
success: function(res) {
|
|
console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
|
|
|
|
},
|
|
fail: function(res) {
|
|
console.log(res.errMsg);
|
|
}
|
|
});
|
|
},
|
|
// 保存昵称
|
|
changeNickname() {
|
|
// this.updataUser(this.user)
|
|
if (this.introductionShow) {
|
|
this.introductionShow = false
|
|
console.log('简介');
|
|
}
|
|
if (this.nicknameShow) {
|
|
this.nicknameShow = false
|
|
console.log('名称');
|
|
}
|
|
},
|
|
// 选择图片
|
|
uploadImage(index) {
|
|
let sourceType
|
|
if (index == 0) sourceType = ['camera']
|
|
else sourceType = ['album']
|
|
uni.chooseImage({
|
|
count: 1,
|
|
sourceType,
|
|
crop: {
|
|
width: 100,
|
|
height: 100
|
|
},
|
|
success: (res) => {
|
|
let data = {
|
|
name: 'avatarfile',
|
|
filePath: res.tempFilePaths[0]
|
|
}
|
|
uploadAvatar(data).then(res => {
|
|
this.$store.dispatch('GetInfo')
|
|
this.close()
|
|
}).catch(err => {
|
|
console.log(err);
|
|
})
|
|
},
|
|
fail: (err) => {
|
|
console.log(err);
|
|
}
|
|
})
|
|
},
|
|
// 打开头像/性别弹窗
|
|
openPopup(e) {
|
|
if (e == 'nickname') {
|
|
this.nicknameShow = true
|
|
}
|
|
if (e == 'sex') {
|
|
this.sexShow = true
|
|
}
|
|
if (e == 'introduction') {
|
|
this.introductionShow = true
|
|
}
|
|
},
|
|
sexConfirm(e) {
|
|
this.sexShow = false
|
|
console.log(e.value[0]);
|
|
this.user.gender = e.value[0]
|
|
},
|
|
sexCancel(e) {
|
|
this.sexShow = false
|
|
console.log(e);
|
|
},
|
|
close() {
|
|
this.show = false
|
|
this.nicknameShow = false
|
|
this.dateShow = false
|
|
this.introductionShow = false
|
|
},
|
|
// 展示性别
|
|
showSex(e) {
|
|
return this.sexList[e]
|
|
},
|
|
// 修改用户信息
|
|
updataUser(user) {
|
|
uni.showLoading('修改中')
|
|
updateUserProfile(user).then(res => {
|
|
this.$toast({
|
|
title: '修改成功'
|
|
})
|
|
this.$store.dispatch('GetInfo')
|
|
}).catch(err => {
|
|
console.log('修改失败', err);
|
|
}).finally(() => {
|
|
this.close()
|
|
uni.hideLoading()
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: #fff;
|
|
}
|
|
|
|
.container {
|
|
padding: 0 32rpx;
|
|
}
|
|
|
|
.introduction {
|
|
width: calc(100% - 48rpx);
|
|
margin: 24rpx;
|
|
padding: 40rpx 0rpx;
|
|
}
|
|
|
|
.popup-box {
|
|
padding: 20rpx;
|
|
|
|
.popup-content {
|
|
border-radius: 20rpx;
|
|
|
|
.popup-title {
|
|
line-height: 68rpx;
|
|
}
|
|
|
|
.popup-item {
|
|
line-height: 88rpx;
|
|
}
|
|
}
|
|
|
|
.popup-close {
|
|
border-radius: 20rpx;
|
|
line-height: 88rpx;
|
|
}
|
|
}
|
|
|
|
.popup-box-1 {
|
|
padding: 0 38rpx;
|
|
border-radius: 15rpx 15rpx 0 0;
|
|
|
|
.title {
|
|
line-height: 100rpx;
|
|
}
|
|
|
|
.input-box {
|
|
height: 100rpx;
|
|
}
|
|
}
|
|
|
|
.bor-bot {
|
|
border-bottom: 1rpx solid #eee;
|
|
}
|
|
|
|
.around-p {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.container-title {
|
|
font-size: 32rpx;
|
|
font-weight: 400;
|
|
color: #666666;
|
|
}
|
|
|
|
.container-cont {
|
|
font-size: 32rpx;
|
|
font-weight: 400;
|
|
color: #111111;
|
|
}
|
|
</style> |