|
|
@@ -0,0 +1,189 @@
|
|
|
+<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¶ms=${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>
|
wangsisi