zsw-farm-bxg/pages/user/PersonalData/index.vue

<template>
	<view class="personal-data">
		<!-- <view class="wrapper"> -->
		<view class="wrapList acea-row row-between-wrapper">
			<!-- <view class="item acea-row row-between-wrapper on"> -->
			<!-- <view class="picTxt acea-row row-between-wrapper"> -->
			<view class="pictrue">
				<!-- <div class="pictrue"> @tap="chooseImage" -->
				<image class="image" v-if="avatar" :src="avatar" />

				<view class="noAvatar acea-row row-middle row-center" v-else>
					<image src="../../../static/images/yanjie-logo.png" mode="widthFix"></image>
				</view>
				<!-- </div> -->
				<!-- <image :src="`${$VUE_APP_RESOURCES_URL}/images/alter.png`" class="alter" /> -->
				<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"></button>
			</view>
			<view class="text">
				<view class="name line1">{{ userInfo.nickname || '微信用户' }}</view>
				<view v-if="userInfo.phone" class="phone">已绑定手机：{{ userInfo.phone }}</view>
				<button v-else class="phone phone-btn" open-type="getPhoneNumber" @getphonenumber="phoneLogin">绑定手机号</button>
			</view>
			<!-- </view> -->
			<!-- </view> -->
		</view>
		<!-- </view> -->
		<view class="list">
			<view class="item acea-row row-between-wrapper">
				<view>昵称</view>
				<view class="input">
					<input id="nickname-input" type="nickname" v-model="userInfo.nickname" @blur="getNickName()" />
				</view>
			</view>
			<view class="item acea-row row-between-wrapper">
				<view>眼界ID</view>
				<view class="input" style="color: #999999;">
					{{userInfo.uid}}
					<!-- <input type="text" :value="userInfo.uid" disabled class="id" /> -->
					<!-- <text class="iconfont icon-suozi"></text> -->
				</view>
			</view>
			<view class="item acea-row row-between-wrapper">
				<view>生日</view>
				<view class="input">
					<picker mode="date" :value="birth" @change="bindDateChange">
						<view v-if="!birth" class="empty">点击完善生日</view>
						<view v-else>
			  		{{birth}}
						</view>
					</picker>
				</view>
			</view>
			<view class="item acea-row row-between-wrapper">
				<view>手机号</view>
				<view class="input" style="color: #999999;">
					{{userInfo.phone?userInfo.phone:'未绑定'}}
			 	<!-- <input type="text" v-if="userInfo.phone" v-model="userInfo.phone" placeholder="未绑定" disabled/>
			  <input type="text" v-else value="未绑定" disabled class="id" /> -->
				</view>
			</view>
			<!-- <view class="item acea-row row-between-wrapper" @click="goChangePassword()">
          <view>密码</view>
          <view class="input acea-row row-between-wrapper">
            <text>点击修改密码</text>
            <text class="iconfont icon-suozi"></text>
          </view>
        </view> -->
		</view>
		<view class="modifyBnt bg-color-red" @click="submit">保存</view>
		<view class="modifyBnt cancel" @click="cancel">取消</view>
		<!-- #ifndef MP-WEIXIN -->
		<view class="logOut cart-color acea-row row-center-wrapper" @click="logout">退出登录</view>
		<!-- #endif -->
	</view>
</template>
<script>
	import {
		mapGetters
	} from "vuex";
	import {
		trim,
		isWeixin,
		chooseImage
	} from "@/utils";
	import {
		VUE_APP_API_URL
	} from "@/config";
	import {
		postUserEdit,
		getLogout,
		switchH5Login,
		getUserInfo,
		wxappBindingPhone
	} from "@/api/user";
	import cookie from "@/utils/store/cookie";
	import store from "@/store";
	import dayjs from "dayjs";

	export default {
		name: "PersonalData",
		components: {
			// VueCoreImageUpload
		},
		data: function() {
			return {
				avatar: "",
				isWeixin: false,
				currentAccounts: 0,
				switchUserInfo: [],
				userIndex: 0,
				birth: '',
			};
		},
		computed: mapGetters(["userInfo"]),
		mounted: function() {
			this.avatar = this.userInfo.avatar;
			this.isWeixin = isWeixin();
			// this.getUserInfo();
		},
		methods: {
			getNickName() {
				uni.createSelectorQuery().in(this) // 注意这里要加上 in(this)  
					.select("#nickname-input")
					.fields({
						properties: ["value"],
					})
					.exec((res) => {
						const nickName = res?. [0]?.value
						let info = JSON.parse(JSON.stringify(this.userInfo))
						info.nickname = nickName
						this.$store.commit('updateUserInfo', info)
						console.log('昵称', nickName)
					})
			},
			goChangePassword() {
				this.$yrouter.push("/pages/user/ChangePassword/index");
			},
			switchAccounts: function(index) {
				console.log(index, '1111111111111111188');
				let that = this;
				this.userIndex = index;
				let userInfo = this.switchUserInfo[this.userIndex];
				if (this.switchUserInfo.length <= 1) return true;
				if (userInfo === undefined) {
					uni.showToast({
						title: "切换的账号不存在",
						icon: "none",
						duration: 2000,
					});
					return;
				}
				if (userInfo.user_type === "h5") {
					switchH5Login()
						.then(({
							data
						}) => {
							uni.hideLoading();
							const expires_time = dayjs(data.expires_time);
							store.commit("login", data.token, expires_time);
							that.$emit("changeswitch", false);
							location.reload();
						})
						.catch((err) => {
							uni.hideLoading();
							uni.showToast({
								title: err.msg || err.response.data.msg || err.response.data.message,
								icon: "none",
								duration: 2000,
							});
						});
				} else {
					cookie.set("loginType", "wechat", 60);
					uni.hideLoading();
					this.$store.commit("logout");
					this.$emit("changeswitch", false);
				}
			},
			getUserInfo: function() {
				let that = this;
				getUserInfo().then((res) => {
					// let switchUserInfo = res.data.switchUserInfo;
					// for (let i = 0; i < switchUserInfo.length; i++) {
					//   if (switchUserInfo[i].uid == that.userInfo.uid) that.userIndex = i;
					//   if (
					//     !that.isWeixin &&
					//     switchUserInfo[i].user_type != "h5" &&
					//     switchUserInfo[i].phone === ""
					//   )
					//     switchUserInfo.splice(i, 1);
					// }
					// that.$set(this, "switchUserInfo", switchUserInfo);
				});
			},
			onChooseAvatar(e) {
				this.avatar = e.detail.avatarUrl;
			},
			chooseImage() {
				chooseImage((img) => {
					this.avatar = img;
				});
			},
			bindDateChange(e) {
				console.log(e)
				this.birth = e.detail.value;
			},
			// 绑定微信用户手机号
			phoneLogin(e) {
				console.log('绑定微信用户手机号', e.mp.detail.code)
				if (e.mp.detail.errMsg == 'getPhoneNumber:ok') {
					uni.showLoading({
						title: '绑定中',
					})
					// this.wxappBindPhone(e, e.mp.detail.code)
					uni.login({
						success: (loginRes) => {
							wxappBindingPhone({
								encryptedData: e.mp.detail.encryptedData,
								iv: e.mp.detail.iv,
								code: loginRes.code
							}).then(res => {
								uni.hideLoading();
								if(res.success) {
									getUserInfo().then(user => {
										this.userInfo.phone = user.phone;
										store.dispatch('setUserInfo', user.data);
									})
								}
								uni.showToast({
									title: res.msg,
									icon: 'success',
									duration: 2000,
								})
							}).catch(error => {
								uni.hideLoading()
								this.$store.dispatch('userInfo', true)
								console.log(error)
								uni.showToast({
									title: error.msg || error.response.data.msg || error.response.data.message,
									icon: 'none',
									duration: 2000,
								})
							})
						}
					})
				} else {
					uni.showToast({
						title: '已拒绝授权',
						icon: 'none',
						duration: 2000,
					})
				}
			},
			wxappBindPhone(e, code) {
				
			},

			submit: function() {

				let userInfo = this.userInfo;
				console.log(userInfo, '==============');
				let data = {
					nickname: '',
					avatar: ''
				};
				if (this.userInfo.nickname) {
					data.nickname = trim(this.userInfo.nickname);
				}
				if (this.avatar) {
					data.avatar = this.avatar;
				}
				postUserEdit(data).then(
					(res) => {
						this.$store.dispatch("userInfo", true);
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 2000,
						});
						this.$yrouter.back();
					},
					(err) => {
						uni.showToast({
							title: err.msg || err.response.data.msg || err.response.data.message,
							icon: "none",
							duration: 2000,
						});
					}
				);
			},
			cancel() {
				this.$yrouter.back();
			},
			logout: function() {
				uni.showModal({
					title: "提示",
					content: "确认退出登录?",
					success: (res) => {
						if (res.confirm) {
							getLogout()
								.then((res) => {
									this.$store.commit("logout");
									this.$yrouter.replace({
										path: "/pages/user/Login/index",
										query: {},
									});
								})
								.catch((err) => {});
						} else if (res.cancel) {
							// console.log("用户点击取消");
						}
					},
				});
			},
		},
	};
</script>
<style lang="less" scoped>
	.wrapList {
		padding: 20rpx 32rpx 32rpx;

		.pictrue {
			width: 100rpx;
			height: 100rpx;
			box-shadow: 0rpx 0rpx 20rpx 10rpx rgba(0, 0, 0, 0.08);
			background: linear-gradient(135deg, rgba(27, 141, 204, 1), rgba(57, 211, 150, 1));
			padding: 4rpx;
			border-radius: 50%;
			position: relative;

			.image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}

			.noAvatar {
				width: 100%;
				height: 100%;
				border-radius: 50%;
				background: #F1F1F1;

				image {
					width: 90%;
				}
			}

			.avatar-wrapper {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				opacity: 0;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
			}
		}

		.text {
			width: 586rpx;
			padding-left: 24rpx;

			.name {
				font-size: 15px;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #3A3A3C;
				line-height: 21px;
				padding-bottom: 10rpx;
			}

			.phone {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #3A3A3C;
				line-height: 32rpx;
			}
			.phone-btn {
				width: 136rpx;
				height: 32rpx;
				background: #F1F1F1;
				border: 2rpx solid #2DB5AE;
				font-size: 20rpx;
				color: #2DB5AE;
				line-height: 28rpx;
				text-align: center;
				border-radius: 8rpx;
				margin: 0;
				padding: 0;
			}
		}
	}
</style>