reservation-uniapp-250509/service-uniapp-client/pages/mine/setting.vue

<template>
	<view class="setting">
		<mNavbar title="设置" :leftClick="leftClick"></mNavbar>

		<van-cell-group>
			<van-cell @click="fileUploads" title="头像" style="display: flex;align-items: center;" is-link>
				<template #value>
					<image style="width: 118rpx;height: 118rpx;border-radius: 50%;" :src="userInfo.headImage"></image>
				</template>
			</van-cell>

			<van-cell title="昵称" :value="userInfo.nickName" @click="showBottom = true" is-link></van-cell>

			<van-cell title="性别" :value="userInfo.sex || '暂无'" @click="changeGenderShow = true" is-link></van-cell>
		</van-cell-group>
		<van-cell-group style="margin-top: 10rpx;">

			<!-- <van-cell title="手机号" :value="userInfo.phone || '未绑定'" @click="toPhoneDetail" is-link></van-cell> -->

			<van-cell title="用户协议" @click="keyValue = 'protocol';configPopupShow = true" is-link></van-cell>

			<van-cell title="隐私政策" @click="keyValue = 'policy';configPopupShow = true" is-link></van-cell>

			<van-cell title="关于我们" @click="keyValue = 'we';configPopupShow = true" is-link></van-cell>
		</van-cell-group>

		<configPopup :keyValue="keyValue" :show="configPopupShow" :list="config" @close="configPopupShow = false" />

		<van-popup v-model:show="showBottom" round position="bottom" @close="showBottom = false">
			<view style="padding: 20rpx;">
				<view style="text-align: center;font-size: 35rpx;">修改昵称</view>
				<view class="item-line flex">
					<view class="before"></view>
					<view class="label">用户昵称</view>
					<input v-model="userInfo.nickName" placeholder="请输入昵称" />
				</view>
				<view @click="editNickName" class="button-submit">立即修改</view>
			</view>
		</van-popup>

		<van-action-sheet v-model:show="changeGenderShow" :actions="actions" @select="selectGender" />
	</view>
</template>

<script>
	import mNavbar from '@/components/base/m-navbar.vue'
	import configPopup from '@/components/configPopup'
	import OSS from "ali-oss"
	import { v4 as uuidv4 } from 'uuid';
	
	export default {
		components: { mNavbar, configPopup },
		data() {
			return {
				userInfo: {},
				configPopupShow: false,
				keyValue: '',
				config: [],
				showBottom: false,
				changeGenderShow: false,
				actions: [
					{ name: '男' },
					{name: '女'},
					{name: '未知'}
				]
			}
		},
		onShow() {
			this.getUserInfo()
			this.getConfig()
		},
		methods: {
			
			//返回个人中心
			leftClick() {
				uni.switchTab({
					url: '/pages/index/center'
				})
			},
			
			//获取用户信息
			getUserInfo() {
				this.$api('getUserInfo', {}, res => {
					if (res.code == 200) {
						this.userInfo = res.result;
					}
				})
			},
			
			//获取配置
			getConfig() {
				this.$api('getConfig', {}, res => {
					if (res.code == 200) {
						this.config = res.result
					}
				})
			},
			
			//选择性别
			selectGender(val) {
				this.userInfo.sex = val.name;
				this.editNickName();
				this.changeGenderShow = false;
			},
			
			//修改用户信息
			editNickName() { 
				let data = {
					nickName: this.userInfo.nickName,
					sex : this.userInfo.sex,
					headImage : this.userInfo.headImage,
					id: this.userInfo.id
				}
				this.$api('editUserInfo', data , res => {
					if (res.code == 200) {
						this.showBottom = false;
						uni.showToast({
							title : '修改成功',
							icon : 'none'
						})
						this.getUserInfo();
					}
				})
			},
			
			//上传文件
			fileUploads() { 
				uni.chooseImage({
					count: 1, // 默认9，设置为1表示单选  
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有  
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 
					
					success: (res) => {
						let resultPromise = [];
						
						this.uploadFileToOSS(res.tempFiles[0]).then(imgPath => {
							this.userInfo.headImage = imgPath;
							this.editNickName();
						})
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.setting {
		background-color: #f3f3f3;
		min-height: calc(100vh);

		.item-line {
			height: 60rpx;
			line-height: 60rpx;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: left;
			color: #333333;

			margin-top: 40rpx;
		}

		.item-line .before {
			width: 8rpx;
			height: 30rpx;
			background: #4fd3bc;
			border-radius: 4rpx;
			margin: 15rpx 12rpx 15rpx 0;
		}

		.item-line .label {
			width: 152rpx;
			height: 60rpx;
		}

		.item-line input {
			width: 456rpx;
			height: 60rpx;
			line-height: 60rpx;
			background: #f5f5f5;
			border-radius: 12rpx;

			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC-Medium;
			font-weight: 500;
			text-align: left;
			color: #939393;

			padding: 0 20rpx;
		}

		.button-submit {
			width: 596rpx;
			height: 90rpx;
			line-height: 90rpx;
			background: linear-gradient(180deg, #6fdfbe, #5ac796);
			border-radius: 46rpx;

			margin: 40rpx auto;

			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			text-align: center;
			color: #ffffff;
		}
	}
</style>