|
|
<!--
|
|
|
* @Author: ch
|
|
|
* @Date: 2022-03-28 15:38:23
|
|
|
* @LastEditors: ch
|
|
|
* @LastEditTime: 2022-05-05 10:45:27
|
|
|
* @Description: file content
|
|
|
-->
|
|
|
<template>
|
|
|
<view>
|
|
|
<view class="userInfo">
|
|
|
<u-upload class="userInfo--upload" @afterRead="updateAvatar" >
|
|
|
<image class="userInfo--head" :src="userInfo.avatar || require('@/static/account/tx.png')" />
|
|
|
</u-upload>
|
|
|
<view>{{userInfo.nickname}}</view>
|
|
|
</view>
|
|
|
<UiCell class="cell" title="昵称" :value="userInfo.nickname" @click="$Router.push('/setNickname')" />
|
|
|
<UiCell class="cell cell--last" title="性别" :value="sexName" @click="sexShow = true" />
|
|
|
<u-picker :show="sexShow" :columns="sexData" :defaultIndex="sexDefault"
|
|
|
keyName="label" @cancel="sexShow = false" @confirm="sexChange" />
|
|
|
</view>
|
|
|
</template>
|
|
|
<script>
|
|
|
import UiButton from '@/components/UiButton.vue'
|
|
|
import UiCell from '@/components/UiCell.vue';
|
|
|
import {Request} from '@/common/utils';
|
|
|
import {ApiPutUser} from '@/common/api/account';
|
|
|
import {ApiPostGetOssConfig} from '@/common/api/oss';
|
|
|
|
|
|
export default {
|
|
|
components: { UiCell, UiButton },
|
|
|
data(){
|
|
|
return {
|
|
|
sexShow : false,
|
|
|
sexData : [[{label:'女',val:2},{label:'男',val:1}]]
|
|
|
}
|
|
|
},
|
|
|
computed:{
|
|
|
userInfo (){
|
|
|
return this.$store.state.userInfo
|
|
|
},
|
|
|
sexName (){
|
|
|
const curSex = this.sexData[0].find(i => i.val === this.userInfo.gender);
|
|
|
return curSex ? curSex.label : '未知';
|
|
|
},
|
|
|
sexDefault (){
|
|
|
return [this.sexData[0].findIndex(i => i.val === this.userInfo.gender)];
|
|
|
}
|
|
|
},
|
|
|
onShow(){
|
|
|
},
|
|
|
methods:{
|
|
|
/**
|
|
|
* 切换性别，发起性别修改请求
|
|
|
*/
|
|
|
async sexChange(val){
|
|
|
const value = val.value[0].val;
|
|
|
const {error, result} = await ApiPutUser({gender:value});
|
|
|
if(error){
|
|
|
ui.$u.totas(error.message);
|
|
|
return false
|
|
|
}
|
|
|
this.$store.commit('SET_USER_INFO', {...this.userInfo, gender:value});
|
|
|
this.sexShow = false;
|
|
|
},
|
|
|
/**
|
|
|
* 获取OSS鉴权信息
|
|
|
* configId 自定义文件夹 图片存储的文件夹名称
|
|
|
* serviceName 服务名
|
|
|
*/
|
|
|
async getOssCon(){
|
|
|
const {error, result} = await ApiPostGetOssConfig({
|
|
|
configId : 'account-avatar/',
|
|
|
serviceName : 'uc'
|
|
|
});
|
|
|
if(error){
|
|
|
uni.$u.toast(error.message);
|
|
|
return false
|
|
|
}
|
|
|
return result;
|
|
|
},
|
|
|
/**
|
|
|
* 修改头像
|
|
|
* 1、拿到OSS信息上传，
|
|
|
* 2、成功后拼地址传给修改头像接口
|
|
|
*/
|
|
|
async updateAvatar(val){
|
|
|
const file = val.file;
|
|
|
const urlArr = file.url.split('/');
|
|
|
const fileName = file.name || urlArr[urlArr.length - 1];
|
|
|
const oss = await this.getOssCon();
|
|
|
uni.uploadFile({
|
|
|
name : 'file',
|
|
|
filePath : file.url,
|
|
|
url : oss.host,
|
|
|
formData : {
|
|
|
name : fileName,
|
|
|
key : `${oss.dir}${'${filename}'}`,
|
|
|
policy : oss.policy,
|
|
|
OSSAccessKeyId : oss.accessId,
|
|
|
success_action_status : 200,
|
|
|
signature : oss.signature
|
|
|
},
|
|
|
success : async (res)=>{
|
|
|
const avatar = `${oss.host}/${oss.dir}${fileName}`;
|
|
|
const {error, result} = await ApiPutUser({avatar});
|
|
|
if(error){
|
|
|
ui.$u.totas(error.message);
|
|
|
return false
|
|
|
}
|
|
|
this.$store.commit('SET_USER_INFO', {...this.userInfo, avatar});
|
|
|
}
|
|
|
})
|
|
|
|
|
|
|
|
|
}
|
|
|
}
|
|
|
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="scss">
|
|
|
page {
|
|
|
background: $color-grey1;
|
|
|
}
|
|
|
</style>
|
|
|
<style lang="scss" scoped>
|
|
|
.userInfo{
|
|
|
padding: 77rpx 0 60rpx;
|
|
|
text-align: center;
|
|
|
font-size: $font-size-base;
|
|
|
color: $color-grey6;
|
|
|
&--head,&--upload{
|
|
|
width: 120rpx;
|
|
|
height: 120rpx;
|
|
|
border-radius: 50%;
|
|
|
margin: 0 auto 13rpx;
|
|
|
}
|
|
|
}
|
|
|
.cell{
|
|
|
padding: 0 40rpx;
|
|
|
&--last{
|
|
|
border: 0;
|
|
|
}
|
|
|
}
|
|
|
/deep/{
|
|
|
.userInfo .uiCell--title{
|
|
|
font-size: $font-size-lg;
|
|
|
}
|
|
|
.uiCell--value{
|
|
|
color: $color-grey4;
|
|
|
}
|
|
|
}
|
|
|
</style> |
