activitys-uniapp/pages/mine/info/info.vue

<template>
	<view :style="vuex_skin">
		<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="80"></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 :disabled="!isEdit" v-model="userData.nickName" :placeholder-style="placeholderStyle" :clearable="false"
						inputAlign="right" placeholder="请输入昵称">
					</u-input>
					<text class="cuIcon-right margin-left-10" style="color: #CCCCCC;"></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="showSex" :placeholder-style="placeholderStyle" v-model="userData.sex"
						:clearable="false" inputAlign="right" placeholder="性别"></u-input>
					<text class="cuIcon-right margin-left-10" style="color: #CCCCCC;"></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 disabled v-model="userData.phone" :placeholder-style="placeholderStyle" :clearable="false"
						inputAlign="right" placeholder="请填写手机号码"></u-input>
					<text class="cuIcon-right margin-left-10" style="color: #CCCCCC;"></text>
				</view>
			</view>
		</view>

		<view style="margin-top: 150rpx;" @click="confirm">
			<view class="bg-white center text-base" style="width: 100%;height: 90rpx;font-family: PingFang-SC-Medium;">
				<text v-if="isEdit">确认修改</text>
				<text v-else>退出登录</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				placeholderStyle: 'color: #c0c4cc;font-size:26rpx',
				isEdit: false,

				userData: {},
				sexShow: false,
				border: true,
				show: false,
				actionSheetList: [{
						text: '男'
					},
					{
						text: '女'
					},
					{
						text: '保密'
					}
				],
			}
		},
		onLoad(options) {
			this.isEdit = options.edit || false
			if (this.isEdit) {
				uni.setNavigationBarTitle({
					title: "修改资料"
				})
			}
			this.getUserInfo();
		},
		methods: {
			showSex(){
				if (this.isEdit) {
					this.sexShow=true
					return
				}
			},
			
			getUserInfo() {
				this.$api.loginUser.detail({
					id: this.vuex_userId
				}).then(res => {
					this.userData = res.data.data;
				})
			},
			// 点击actionSheet回调
			actionSheetCallback(index) {
				this.userData.sex = this.actionSheetList[index].text;
			},
			async upload() {
				if (!this.isEdit) {
					return false
				}
				let resp = await this.$mpi.chooseImage()
				this.$api.uploadFile(resp[0]).then(res => {
					this.userData.avatar = res.data.data.link
				})
			},
			confirm() {
				if (this.isEdit) {
					this.update()
					return
				}
				this.logout()
			},
			logout() {
				this.$cache.clear()
				this.$u.vuex('vuex_userId',null)
				this.$u.vuex('vuex_phone',null)
				uni.reLaunch({
					url: "../mine"
				})
			},
			update() {
				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;
				}
				let data = {
					id: this.userData.id,
					nickName: this.userData.nickName,
					sex: this.userData.sex,
					phone: this.userData.phone,
					avatar: this.userData.avatar
				}
				console.log(data);
				this.$api.loginUser.submit(data).then(res => {
					this.$dialog.showModalAndBack('修改成功', this.vuex_theme.bgColor)
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.padding {
		padding: 30rpx 40rpx;
	}

	.title {
		font-size: 28rpx;
		font-family: PingFang-SC-Medium;
		color: #060606;
		padding-left: 10upx;
	}
</style>