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

<template>
	<view :style="vuex_skin">
		<!-- #ifdef MP-WEIXIN -->
		<u-navbar title-color="#000000" :is-back="true" title="我的资料"></u-navbar>
		<!-- #endif -->
		<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>
			<!-- #ifdef MP-WEIXIN -->
			<view class="flex padding justify-between align-center">
				<view class="title">手机号</view>
				<view class="center">
					<u-input disabled v-model="userData.phone" :placeholder-style="placeholderStyle" :clearable="false"
						inputAlign="right" placeholder="请填写手机号码"></u-input>
					<button open-type="getPhoneNumber" @getphonenumber="getphonenumber"
						class="cu-btn radius u-reset-button round bg-base sm"
						style="padding: 8rpx 16rpx;font-size: 20rpx;margin-left: 30rpx;">
						获取手机号
					</button>
				</view>
			</view>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="flex padding justify-between align-center">
				<view class="title center">手机号</view>
				<view class="center flex">
					<view class="center">
						<u-input disabled v-model="userData.phone"  :placeholder-style="placeholderStyle" :clearable="false" inputAlign="right" placeholder="请填写手机号码"></u-input>
					</view>
					<view class="center padding-left-20">
						<u-icon name="edit-pen-fill" color="#e72226" size="30" @click="changePhone"></u-icon>
						<!-- <text class="text-base" @click="changePhone">修改</text> -->
					</view>
				</view>
			</view>
			<!-- #endif -->
		</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: {
					avatar: "",
					nickName: "",
					sex: "",
					phone: "",
					code: "",
					smsId: ""
				},
				sexShow: false,
				border: true,
				show: false,
				actionSheetList: [{
						text: '男'
					},
					{
						text: '女'
					},
					{
						text: '保密'
					}
				],
			}
		},
		onLoad(options) {
			// #ifdef MP-WEIXIN
			this.handelSessionKey()
			// #endif
			this.isEdit = options.edit || false
			if (this.isEdit) {
				uni.setNavigationBarTitle({
					title: "修改资料"
				})
			}
			this.getUserInfo();
		},
		methods: {
			changePhone() {
				uni.navigateTo({
					url: `./change-phone?oldPhone=${this.userData.phone}`,
				})
			},
			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)) {
					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
				}
				this.$api.loginUser.updateInfo(data).then(res => {
					if (res.data.success) {
						this.cachePhone(this.userData.phone)
						this.$dialog.showModalAndBack('修改成功', this.vuex_theme.bgColor)
					}
				})
			},
			/**
			 * 获取getSessionKey
			 */
			async handelSessionKey() {
				let sessionKey = await this.getSessionKey()
				let userInfo = this.$cache.get('userInfo')
				userInfo.sessionKey = sessionKey
				this.$cache.put('userInfo', userInfo)
				this.sessionKey = sessionKey
			},
			async getSessionKey() {
				let respWx = await this.$mpi.wxLogin()
				let respLogin = (await this.$api.wxApp.getOpenId({
					code: respWx.code
				})).data
				return respLogin.data.session_key
			},

			async getphonenumber(e) {
				if (e.detail.errMsg != 'getPhoneNumber:ok') {
					this.$u.toast("获取手机号失败")
					return
				}
				if (this.$isEmpty(this.sessionKey)) {
					this.$u.toast("sessionKey获取失败")
					return
				}
				let params = {
					sessionKey: this.sessionKey,
					encryptedData: e.detail.encryptedData,
					iv: e.detail.iv
				}
				this.$api.wxApp.getOpenData(params).then(res => {
					if (res.data.success) {
						let obj = JSON.parse(res.data.data)
						let phone = obj.phoneNumber
						this.userData.phone = phone
					} else {
						this.$u.toast("获取手机号失败")
					}
				})
			},
			cachePhone(phone) {
				let userInfo = this.$cache.get('userInfo')
				this.$cache.put('userInfo', userInfo)
				this.$u.vuex('vuex_phone', phone)
			}
		}
	}
</script>
<style lang="scss" scoped>
	.padding {
		padding: 30rpx 40rpx;
	}

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