feiniao-youwei-uniapp/pages/login/index.vue

<template>
	<view class="login-container">
		<view class="base-container">
			<!-- <image class="tabbar" src="https://birdseye-img.sysuimars.com/dinggou-mini/tabbar-new.png" mode="" /> -->
		</view>
		<up-popup :show="showPopup" mode="center" round="10" :overlay="false" :safeAreaInsetBottom="false"
			bgColor="transparent">
			<view class="popup">
				<button class="avatar-none" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<view class="avatar-wrapper">
						<image class="avatar" :src="userData.icon"></image>
						<view class="photo-icon">
							<up-icon color="#fff" size="20" name="camera-fill"></up-icon>
						</view>
					</view>
				</button>
				<view class="tips">设置头像，可以在地图上显示自己守护树的点位哦~</view>
				<button class="arrow-icon" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">
					<view class="button">微信授权</view>
				</button>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import config from "@/api/config.js"
	import upload from '@/utils/uploadUtils.js'
	import USER from '@/api/user.js'

	const showPopup = ref(true);
	const userData = ref({})
	const pageUrl = ref('')
	const pageParams = ref(null)

	onLoad(({
		route_path,
		params = "{}"
	}) => {
		pageUrl.value = route_path
		pageParams.value = params
		getUserData()
	})


	const getUserData = () => {
		USER.userInfo().then(res => {
			const timestamp = res.data.birthDate && Date.parse(res.data.birthDate); // 返回毫秒级时间戳
			userData.value = res.data
		})
	}

	const onChooseAvatar = (e) => {
		const {
			avatarUrl
		} = e.detail
		uni.showLoading({title: '上传中'})
		upload(userData.value.id + "/" + new Date().getTime() + ".png", avatarUrl, (res) => {
		  userData.value.icon = config.BASE_IMG_URL + res.key
		  uni.hideLoading()
		})
	}

	const onGetPhoneNumber = (e) => {
		if (e.detail.code) {
			USER.getPhone({
				code: e.detail.code
			}).then(res => {
				if (res.success) {
					userData.value.tel = res.data
					saveUserInfo(userData.value)
				}
			})
		} else {
			console.log("用户拒绝了授权");
		}
	}

	const saveUserInfo = (params) => {
		USER.updateUser(params).then(response => {
			uni.hideLoading()
			if (response.success) {
				uni.showToast({
					title: '保存成功',
					icon: 'none',
					duration: 2000,
					mask: true
				})
				uni.reLaunch({
					url: `/pages/tabBar/home/subPages/gardenMap?enterSelectTree=true`
				});
			} else {
				uni.showToast({
					title: '保存失败',
					icon: 'none',
					duration: 2000,
					mask: true
				})
			}
		})
	}
</script>

<style lang="scss" scoped>
	@import "@/static/style/mixin.scss";
	
	.login-container {
		.base-container {
			@include ossBg("login-bj.png");
			height: 100vh;
			
			.tabbar {
				width: 100%;
				height: 112rpx;
				position: fixed;
				bottom: 0;
				left: 0;
			}
		}
	}

	.popup {
		width: 86vw;
		padding: 40rpx;
		box-sizing: border-box;
		background-image: url('https://birdseye-img.sysuimars.com/dinggou-mini/popup-bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center center;

		.avatar-none {
			width: auto;
			height: auto;
			display: contents;
			pointer-events: none;

			.avatar-wrapper {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 40rpx;
				position: relative;

				.avatar {
					width: 176rpx;
					height: 176rpx;
					border-radius: 50%;
					object-fit: cover;
					pointer-events: auto;
				}

				.photo-icon {
					pointer-events: auto;
					position: absolute;
					bottom: -6rpx;
					right: calc(50% - 64rpx - 40rpx);
					width: 64rpx;
					height: 64rpx;
					border-radius: 50%;
					background: #2199F8;
					display: flex;
					justify-content: center;
					align-items: center;
					border: 4rpx solid #fff;
				}
			}
		}

		.tips {
			font-size: 30rpx;
			color: #666666;
			margin-bottom: 48rpx;
		}

		.arrow-icon {
			width: auto;
			height: auto;
			text-align: left;
			background: transparent;
			padding-left: 0;
			padding-right: 0;
		}

		.button {
			font-size: 32rpx;
			text-align: center;
			background: #2199F8;
			color: #fff;
			border-radius: 16rpx;
		}
	}
</style>