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

<template>
	<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" bind: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" bindgetphonenumber="onGetPhoneNumber">
				<view class="button">微信授权</view>
			</button>
		</view>
	</up-popup>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	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 
	    // wx.showLoading({title: '上传中'})
	    // upload(this.data.userInfo.id + "/" + new Date().getTime() + ".png", avatarUrl, (res) => {
	    //   that.setData({
	    //     'userInfo.icon':BASE_IMG_DIR+res.key,
	    //   })
	    //   wx.hideLoading()
	    // })
	}
	
	const onGetPhoneNumber = (e) =>{
	    if (e.detail.code) {
	      // getPhone({code:e.detail.code}).then(res =>{
	      //   if(res.success){
	      //     this.setData({'userInfo.tel':res.data})
	      //     that.saveUserInfo(that.data.userInfo)
	      //   }
	      // })
	    }else{
	      console.log("用户拒绝了授权");
	    }
	}
	
	const saveUserInfo = (params) =>{
	    // saveUser(params).then(response =>{
	    //   wx.hideLoading()
	    //   if(response.success){
	    //     wx.showToast({
	    //       title: '保存成功',
	    //       icon: 'none',
	    //       duration: 2000,
	    //       mask:true
	    //     })
	    //     const params = {
	    //       showPopup:true
	    //     }
	    //     wx.reLaunch({
	    //       url: `/pages/tabBar/home/index?route_path=lj_home&params=${JSON.stringify(params)}`
	    //     })
	    //   }else{
	    //     wx.showToast({
	    //       title: '保存失败',
	    //       icon: 'none',
	    //       duration: 2000,
	    //       mask:true
	    //     })
	    //   }
	    // })
	}
</script>

<style lang="scss" scoped>
	@import "@/static/style/mixin.scss";

	.base-container {
		background-image: url('https://birdseye-img.sysuimars.com/dinggou-mini/login-new.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center center;

		.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>