guosen-ldt-client/pagesA/pages/myInfo.vue

<template>
	<view>
		<view class="bg-white margin-top-20">
			<view class="flex padding justify-between align-center" @click="upload">
				<view class="title">头像</view>
				<u-avatar :src="userData.avatar" size="100"></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>
				<view class="center">
					<u-input v-model="userData.nickName" :clearable="false" inputAlign="right" placeholder="请输入昵称"></u-input>
					<text class="cuIcon-right margin-left-10"></text>
				</view>
			</view>
			<u-line color="#f1f1f1"></u-line>
			<view class="flex padding justify-between align-center">
				<view class="title">性别</view>
				<view class="center" >
					<u-input disabled @click="sexShow = true" v-model="sex"  :clearable="false" inputAlign="right" placeholder="性别"></u-input>
					<text class="cuIcon-right margin-left-10"></text>
					<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>
				<view class="center">
					<u-input v-model="userData.phone" :clearable="false" inputAlign="right" placeholder="请填写手机号码"></u-input>
					<text class="cuIcon-right margin-left-10"></text>
				</view>
			</view>
			<u-line color="#f1f1f1"></u-line>
			<view class="flex padding justify-between align-center" @click="calendarShow = true">
				<view class="title">生日</view>
				<view class="center">
					<u-input @click="calendarShow=true" disabled v-model="userData.birth" :clearable="false" inputAlign="right" placeholder="请填写生日"></u-input>
					<text class="cuIcon-right margin-left-10"></text>
					<u-calendar v-model="calendarShow" mode="date" active-bg-color="#FF9447" @change="change"></u-calendar>
				</view>
			</view>
			<view style="height: 20upx;"></view>
			<view class="footer-fixed margin-bottom" style="z-index: 99;">
				<u-button :custom-style="customStyle" shape="circle" @click="save">保存</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				customStyle: {
					backgroundColor: '#FF9447',
					color: '#ffffff',
					margin:"20rpx",
					height:"90rpx"
				},
				
				userData: {},
				sex: '',
				sexShow: false,
				border: true,
				show: false,
				actionSheetList: [
					{
						text: '男'
					},
					{
						text: '女'
					},
					{
						text: '保密'
					}
				],
				calendarShow: false,
			}
		},
		onLoad() {
			this.getUserInfo();
		},
		methods: {
			getUserInfo() {
				this.$api.loginUser.detail({id: this.vuex_userId}).then(res => {
					this.userData = res.data;
					if (this.userData.sex == 1) {
						this.sex = '男';
					} else if (this.userData.sex == 2) {
						this.sex = "女";
					} else {
						this.sex = "未知"; 
					}
				})
			},
			// 点击actionSheet回调
			actionSheetCallback(index) {
				this.sex = this.actionSheetList[index].text;
			},
			change(e) {
				this.userData.birth = e.result;
			},
			async upload() {
				let resp = await this.$mpi.chooseImage()
				this.$api.uploadFile(resp[0]).then(res=>{
					this.userData.avatar = res.data.link
				})
			},
			save() {
				if (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,
						sex: this.sex == '男' ? 1 : this.sex == '女' ? 2 : 0,
						phone: this.userData.phone,
						birth: this.userData.birth,
						avatar: this.userData.avatar
					}
					this.$api.loginUser.submit(data).then(res => {
						this.$dialog.showModal('修改成功',false).then(()=>{
							uni.navigateBack({
								delta: 1
							})
						})
					})
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.title {
		font-size: 30upx;
		font-weight: bold;
		color: #060606;
		padding-left: 10upx;
	}
	
</style>