shop-app/pages/account/setting/setUserInfo.vue

<!--
 * @Author: ch
 * @Date: 2022-03-28 15:38:23
 * @LastEditors: ch
 * @LastEditTime: 2022-05-17 17:42:23
 * @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 (){
			let defaultVal =  this.userInfo.gender || 1
			return [this.sexData[0].findIndex(i => i.val ===  defaultVal)];
		}
	},
	onShow(){
	},
	methods:{
		/**
		 * 切换性别，发起性别修改请求
		 */
		async sexChange(target){
			let value = target.value[0];
			value = value ? value.val : this.sexData[0][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>