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.
shop-app/pages/account/setting/setUserInfo.vue

154 lines
3.6 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!--
* @Author: ch
* @Date: 2022-03-28 15:38:23
* @LastEditors: ch
* @LastEditTime: 2022-04-30 18:08:28
* @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(){
console.log('-----++');
},
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)=>{
console.log(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>