fangliaoxiaochengxv/components/LoginPop.vue

<template>
	<u-popup :show="value" @close="close" round="18rpx">
		<form @submit="saveUserData">
			<view class="m-content-view">
				<text class="top-view"> {{shopName}} </text>
				<text class="tips">请您授权头像昵称信息，您授权的信息将受到严格保护，请放心使用。</text>
				<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"
					style="border: 0">
					<u--image v-if="avatarUrl !== defaultAvatarUrl" width="149rpx" height="149rpx" radius="100%"
						shape="circle" :src="avatarUrl" :fade="true" duration="450" mode="heightFix"></u--image>
					<view class="v1" v-else>
						<u--image width="80rpx" height="80rpx" radius="100%" shape="circle" :src="avatarUrl"
							:fade="true" duration="450" mode="heightFix"></u--image>
						<text v-if="avatarUrl === defaultAvatarUrl">获取头像</text>
					</view>
				</button>
				<input name="nickname" v-model="userName" type="nickname" class="m-input" placeholder="请输入昵称" />
				<button class="red-btn" form-type="submit">确认授权</button>
			</view>
		</form>
	</u-popup>
</template>

<script>
	import {
		uploadBase64File,
		getNewRemindCnt,
		addAddress,
	} from "@/common/api/common.js";
	import {
		updateUserInfo,
		getUserInfo,
		userBindNickname
	} from "@/common/api/user.js";
	const defaultAvatarUrl =
		"https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0";
	export default {
		name: "LoginPop",
		props: {
			value: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				shopName: "六感熟眠商城",
				userName: "",
				userInfo: undefined,
				defaultAvatarUrl,
				avatarUrl: defaultAvatarUrl,
			};
		},
		mounted() {
			const configs = uni.getStorageSync("configs");
			if (configs) {
				this.shopName = configs.shop_name
			}
		},
		methods: {
			close() {
				this.$emit('input', false)
			},
			onChooseAvatar(e) {
				const {
					avatarUrl
				} = e.detail;
				console.log("成功授权", avatarUrl);
				this.avatarUrl = avatarUrl;
			},
			saveUserData(e) {
				console.log(e.detail.value.nickname);
				if (
					this.avatarUrl === this.defaultAvatarUrl ||
					!e.detail.value.nickname
				) {
					uni.showToast({
						icon: "none",
						title: "请先授权完善信息",
					});
					return;
				}
				this.userName = e.detail.value.nickname;
				this.close()
				this.getImageInfo();
			},
			getImageInfo() {
				// 获取当前图片信息
				uni.getImageInfo({
					src: this.avatarUrl,
					success: (image) => {
						// 做png/jpeg的类型判断————对不同类型的图像添加不同的转换头信息
						if (image.type == "png" || image.type == "jpeg") {
							// 对符合类型的图片转换为base64类型
							uni.getFileSystemManager().readFile({
								// 【重点来啦】人家自提供的转码API
								filePath: image.path, // 所需转码图像路径
								encoding: "base64", // 转码类型
								success: (res) => {
									// 生成base64
									let imageBase64 =
										"data:image/" + image.type + ";base64," + res.data;
									console.log("转base64后：", imageBase64);
									this.uploadBase64File(imageBase64);
								},
							});
						} else {
							// 友好一点，不是以上类型做出提醒
							uni.showToast({
								title: "当前只支持png/jpeg格式",
								duration: 2500,
								icon: "none",
							});
						}
					},
				});
			},
			uploadBase64File(imageBase64) {
				uploadBase64File({
						base64: imageBase64,
					}, {
						"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
					})
					.then((res) => {
						console.log("uploadFile==>", res.data.url);
						this.avatarUrl = res.data.url;
						this.bindNickname(res.data.url);
					})
					.catch(() => {
						uni.hideLoading();
					});
			},
			bindNickname(url) {
				// this.isUserRegister = true;
				// this.showUserRegister = false;
				const data = {
					nickname: this.userName,
					username: this.userName,
					headimg: url,
				};
				userBindNickname(data).then((res) => {
					console.log("绑定昵称等==>", res.data);
					if (res.data) {
						// uni.setStorageSync("token", res.data.token.token);
						if (!res.data.headimg) {
							res.data.headimg = url;
						}
						uni.setStorageSync("userInfo", JSON.stringify(res.data));
						this.getUserInfo()
					}
				});
			},
			async getUserInfo() {
				const data = {};
				await getUserInfo(data)
					.then((res) => {
						this.close()
						if (res.data) {
							this.$emit('updateUserInfo')
							// uni.clearStorageSync()
							uni.setStorageSync("token", res.data.token.token);
							uni.setStorageSync("userInfo", JSON.stringify(res.data));
							this.userInfo = res.data;
							console.log("getUserInfo==>", this.userInfo);
						}
					})
					.catch(() => {
						uni.hideLoading();
					});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.m-content-view {
		width: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;
		background-color: #f7f7f7;
		border-radius: 24rpx 24rpx 0 0;
	}

	.top-view {
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #1d161f;
		line-height: 34rpx;
		text-align: left;
		margin: 55rpx 49rpx 0;
		width: calc(100% - 98rpx);
	}

	.tips {
		font-size: 26rpx;
		font-weight: 400;
		color: #858585;
		line-height: 34rpx;
		margin: 21rpx 49rpx 0;
	}

	.red-btn {
		color: white;
		background: #f39800;
		width: calc(100% - 98rpx);
		margin-top: 52rpx;
		margin-bottom: 52rpx;
		font-size: 32rpx;
		line-height: 84rpx;
		border-radius: 40rpx;
		text-align: center;
	}

	.red-btn:active {
		opacity: 0.7;
	}

	.v1 {
		height: 149rpx;
		width: 149rpx;
		display: flex;
		flex-direction: column;
		background: rgba(244, 244, 246, 1);
		border-radius: 100%;
		align-items: center;
		justify-content: center;
	}

	.avatar-wrapper {
		margin-top: 26rpx;
	}

	.avatar-wrapper button::before {
		padding: 0;
		border-radius: 20rpx;
		border: 0;
	}

	.avatar {
		height: 100rpx;
		width: 100rpx;
	}

	.v1 text {
		font-size: 22rpx;
		margin-top: -16rpx;
	}

	// 去掉烦人的边框
	button::after {
		border: 0; // 或者 border: none;
	}

	.m-input {
		width: calc(100% - 138rpx);
		line-height: 117rpx;
		padding: 0 20rpx;
		margin-top: 44rpx;
		background: #ffffff;
		border-radius: 15rpx;
		height: 117rpx;
	}
</style>