cyzh-SoundOfMusic-H5/pages/activityList/mine/edit.vue

<template>
	<view>
		<view class="flex padding justify-between align-center" @click="upload">
			<view class="title">头像</view>
			<u-avatar :src="userData.avatar" size="120"></u-avatar>
		</view>
		<u-line color="#f1f1f1"></u-line>
		<view class="flex padding justify-between align-center">
			<view class="title">昵称<text class="text-red">*</text></view>
			<u-input v-model="userData.nickName" :clearable="false" inputAlign="right" placeholder="请输入昵称"></u-input>
		</view>
		<u-line color="#f1f1f1"></u-line>
		<view class="flex padding justify-between align-center">
			<view class="title">性别</view>
			<view style="width: 200upx;">
				<u-input v-model="sex" type="select" :border="border" @click="sexShow = true"></u-input>
				<u-action-sheet :list="actionSheetList" v-model="sexShow" @click="actionSheetCallback"></u-action-sheet>
			</view>
		</view>
		<u-line color="#f1f1f1"></u-line>
		<view class="flex padding justify-between align-center">
			<view class="title">手机号码<text class="text-red">*</text></view>
			<u-input v-model="userData.phone" :clearable="false" inputAlign="right" placeholder="请填写手机号码"></u-input>
		</view>
		<u-line color="#f1f1f1"></u-line>
		<view class="flex padding justify-between align-center" @click="calendarShow = true">
			<view class="title">生日</view>
			<view>{{userData.birthday}}</view>
			<u-calendar v-model="calendarShow" mode="date" @change="change"></u-calendar>
		</view>
		<u-line color="#f1f1f1"></u-line>
		<view class="padding">
			<view class="title">个人介绍<text class="text-red">*</text></view>
		</view>
		<view style="padding: 0 40upx">
			<u-input v-model="introduce" type="textarea" :clearable="false" height="140" :autoHeight="false" maxlength="60" placeholder="请输入个人简介" />
		</view>
		<view class="flex justify-end padding-right-sm padding-bottom-sm text-gray">{{introduce.length}} / 60</view>
		<view style="height: 120upx;"></view>
		<view class="footer-fixed margin-bottom">
			<u-button class="custom-style" shape="circle" @click="save">保存</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userData: {},
				sex: '',
				sexShow: false,
				border: true,
				show: false,
				actionSheetList: [
					{
						text: '男'
					},
					{
						text: '女'
					},
					{
						text: '保密'
					}
				],
				calendarShow: false,
				introduce: '',
			}
		},
		onLoad(options) {
			this.getUserInfo(options.userId);
		},
		methods: {
			getUserInfo(userId) {
				this.$u.api.user.detail({id: userId}).then(res => {
					this.userData = res;
					this.introduce = res.introduce;
					if (res.gender == 1) {
						this.sex = '男';
					} else if (res.gender == 2) {
						this.sex = "女";
					} else {
						this.sex = "未知"; 
					}
				})
			},
			// 点击actionSheet回调
			actionSheetCallback(index) {
				this.sex = this.actionSheetList[index].text;
			},
			change(e) {
				this.userData.birthday = e.result;
			},
			async upload() {
				let res = await this.$mpi.uploadFile()
				this.userData.avatar = JSON.parse(res).data;
			},
			save() {
				if (this.$u.test.isEmpty(this.userData.introduce) || this.$u.test.isEmpty(this.userData.nickName) || this.$u.test.isEmpty(this.userData.phone)) {
					uni.showToast({
						icon: "none",
						title: "请填写必填信息",
					})
					return;
				} else if (!this.$u.test.mobile(this.userData.phone)) {
					uni.showToast({
						icon: "none",
						title: "请填写正确的手机号",
					})
					return;
				} else {
					let data = {
						id: this.userData.id,
						nickName: this.userData.nickName,
						gender: this.sex == '男' ? 1 : this.sex == '女' ? 2 : 0,
						phone: this.userData.phone,
						birthday: this.userData.birthday,
						introduce: this.introduce,
						avatar: this.userData.avatar
					}
					this.$u.api.user.submit(data).then(res => {
						uni.showToast({
							icon: "none",
							title: "修改成功",
							duration: 2000,
							success() {
								uni.navigateBack({
									delta: 1
								})
							}
						})
					})
				}
			}
		}
	}
</script>
<style>
	page {
		background-color: #ffffff;
	}
</style>
<style lang="scss" scoped>
	.title {
		font-size: 30upx;
		font-weight: bold;
		color: #060606;
		padding-left: 10upx;
	}
	.custom-style {
		background-color: #5a3ee7;
		color: #ffffff;
		width: 600rpx;
	}
</style>