jiuyiUniapp/jiuyi2/pages/mine/userinfo.vue

<script setup>
	/**
	 * 个人信息
	 */
	import {
		ref,
		computed,
		reactive,
	} from 'vue'
	import {
		onLoad,
	} from '@dcloudio/uni-app'
	import {
		useStore
	} from 'vuex'
	// 工具库
	import util from '@/common/js/util';
	// 接口
	import api from '@/api';

	// vuex
	const store = useStore()

	// 用户
	const user = reactive({})

	// 性别
	const gender = reactive([{
			id: 0,
			name: '男',
		},
		{
			id: 1,
			name: '女',
		}
	])
	// 性别下标
	const genderIndex = ref(0)

	onLoad(() => {
		// 同步用户信息
		syncInfo()
	})

	// 同步用户信息
	function syncInfo() {
		// 用户信息
		const userinfo = store.state.userinfo
		user.background = userinfo.background
		user.account = userinfo.account
		user.userAccount = userinfo.userAccount
		user.userNickname = userinfo.userNickname
		user.homeTown = userinfo.homeTown
		user.personalSignature = userinfo.personalSignature
		user.id = userinfo.id + ''
		user.birthday = userinfo.birthday
		user.avatar = userinfo.avatar
		user.email = userinfo.email
		// 修改性别下标
		genderIndex.value = gender.findIndex(item => item.id == userinfo.sex)
	}

	/**
	 * 选择生日日期
	 * @param {Object} ev 默认事件
	 */
	function handleBirthday(ev) {
		const value = ev.detail.value
		if (user.birthday === value) return
		user.birthday = value
	}

	/**
	 * 选择性别
	 * @param {Object} ev 默认事件
	 */
	function handleGender(ev) {
		const value = ev.detail.value
		if (genderIndex.value === value) return
		genderIndex.value = value
	}

	/**
	 * 上传图片
	 * @param {String} key 需要修改个人信息的字段
	 */
	function uploadImg(key) {
		util.upload_image({
			value: user[key],
			type: 1,
			success: rs => {
				// 同步值
				user[key] = rs.value
				console.log('user', user)
			}
		})
	}

	// 保存个人信息
	function handleSubmit() {
		// 同步性别值
		if (gender[genderIndex.value]) user.sex = gender[genderIndex.value].id

		if (user.email && !IsEmail(user.email)) {
			util.alert('邮箱格式不正确！')
			return
		}

		const data = {
			...user,
		}

		// 
		api.mine.updateUserInfo({
			data,
		}).then(rs => {
			if (rs.code === 200) {
				store.commit('setState', {
					key: 'userinfo',
					value: Object.assign(store.state.userinfo, user)
				})

				util.alert('修改成功')
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	// 校验邮箱地址
	function IsEmail(str) {
		var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
		return reg.test(str);
	}
</script>

<template>
	<view class="appbw">
		<view class="bgBox pr">
			<view class="bg pfull">
				<!-- 背景图片 -->
				<image :src="user.background" mode="aspectFill" />
			</view>

			<!-- 遮罩 -->
			<view class="window pfull"></view>

			<view class="content pr fmid fdc cfff">
				<view class="avatarBox cir" @click.stop="uploadImg('avatar')">
					<image class="avatar wh200 cir" :src="user.avatar" mode="aspectFill" />
				</view>
				<view class="nickname mt5 f28">更换头像</view>
				<view class="changeBg btn sm pa t0 r0 mr20 mt20 plr20" @click="uploadImg('background')">修改背景</view>
			</view>
		</view>

		<!-- 个人资料 -->
		<view class="info oh pr plr35 c333 bfff br20">
			<view class="title mtb20 f36 b">我的资料</view>

			<view class="line rows ptb20">
				<view class="key">账号</view>
				<view class="value tar f1">
					<text>{{ user.account }}</text>
				</view>
			</view>

			<view class="line rows ptb20">
				<view class="key">昵称</view>
				<view class="value tar f1">
					<input type="text" v-model="user.userNickname" placeholder="请输入昵称" />
				</view>
				<uni-icons type="right" />
			</view>

			<view class="line rows ptb20">
				<view class="key">生日</view>
				<picker class="value tar f1" mode="date" @change="handleBirthday">
					<text v-if="user.birthday">{{ user.birthday }}</text>
					<text v-else>请选择</text>
				</picker>
				<uni-icons type="right" />
			</view>

			<view class="line rows ptb20">
				<view class="key">性别</view>
				<picker class="value tar f1" :range="gender" :value="genderIndex" range-key="name"
					@change="handleGender">
					<text v-if="genderIndex == -1">请选择</text>
					<text v-else>{{ gender[genderIndex].name }}</text>
				</picker>
				<uni-icons type="right" />
			</view>

			<view class="line rows ptb20">
				<view class="key">家乡</view>
				<view class="value tar f1">
					<input type="text" v-model="user.homeTown" placeholder="请输入你的家乡" />
				</view>
				<uni-icons type="right" />
			</view>

			<view class="line rows ptb20">
				<view class="key">邮箱</view>
				<view class="value tar f1">
					<input type="text" v-model="user.email" placeholder="请输入你的邮箱" />
				</view>
				<uni-icons type="right" />
			</view>

			<view class="line ptb20">
				<view class="key">个性签名</view>
				<view class="value textareaBox inputBox mt20 ptb20 plr20">
					<textarea v-model="user.personalSignature" placeholder="写点什么介绍下自己" style="height: 300rpx;" />
				</view>
			</view>

			<view class="fill" style="height: 150rpx;"></view>

			<view class="footer bfff shadow">
				<view class="btn lg colourful mlr30" @click="handleSubmit">保存</view>
			</view>

		</view>
	</view>
</template>

<style lang="scss" scoped>
	// 背景
	.bgBox {
		.content {
			height: 400rpx;
		}

		// 修改背景
		.changeBg {
			background-color: rgba(0, 0, 0, .3);
		}
	}

	// 头像
	.avatarBox {
		padding: 2rpx;
		background-color: #fff;
	}

	// 资料
	.info {
		margin-top: -20rpx;
	}
</style>