2025-06-27 08:56:14 +08:00
|
|
|
|
<template>
|
|
|
|
|
|
<view class="login-container">
|
|
|
|
|
|
<image class="title-imge" src="https://www.focusnu.com/media/directive/login/icon.png" />
|
|
|
|
|
|
<image class="photo-imge" src="https://www.focusnu.com/media/directive/login/bgc.png" />
|
|
|
|
|
|
<view class="under-container">
|
|
|
|
|
|
|
|
|
|
|
|
<!-- <button
|
|
|
|
|
|
open-type="getUserProfile"
|
|
|
|
|
|
class="button-blue"
|
|
|
|
|
|
@getuserinfo="fetchProfile"
|
|
|
|
|
|
>
|
|
|
|
|
|
一键登录
|
|
|
|
|
|
</button> -->
|
|
|
|
|
|
<button class="button-blue" @click="loginIt">
|
|
|
|
|
|
一键登录
|
|
|
|
|
|
</button>
|
|
|
|
|
|
<view class="under-container-title">
|
|
|
|
|
|
<view :class="isTarget ? 'radio-circle-target' : 'radio-circle'" @click="isTarget = !isTarget"></view>
|
|
|
|
|
|
<view style="margin-left: 17rpx;" class="radio-circle-font" @click="isTarget = !isTarget">同意护理单元</view>
|
|
|
|
|
|
<view class="radio-circle-blue" @click="jumpToPro">
|
|
|
|
|
|
《使用条款》
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="radio-circle-font" @click="isTarget = !isTarget">并授权NU获取本机号码</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<!-- 遮罩 -->
|
|
|
|
|
|
<transition name="fade">
|
|
|
|
|
|
<view v-if="isFadingOut" class="overlay" @click="closeModal" :style="{ backgroundColor: maskColor }" />
|
|
|
|
|
|
</transition>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 底部弹窗 -->
|
|
|
|
|
|
<transition name="slide-up">
|
|
|
|
|
|
<view v-if="isFadingOut" class="modal">
|
2025-06-30 17:33:35 +08:00
|
|
|
|
<view class="modal-title">使用条款</view>
|
2025-06-27 08:56:14 +08:00
|
|
|
|
<view class="model-p">
|
|
|
|
|
|
<text>　　为了更好地保障您的合法权益，请阅读并同意以下协议护理单元</text>
|
|
|
|
|
|
<text style="color: rgb(0,141,255);" @click="jumpToPro">《使用条款》</text>
|
|
|
|
|
|
<text>，同意后将自动登录。</text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="model-down">
|
|
|
|
|
|
<view class="model-white" @click="closeModal">
|
|
|
|
|
|
不同意
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="model-blue" @click="closeModal();isTarget=true">
|
|
|
|
|
|
同意
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</transition>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
|
|
import {
|
|
|
|
|
|
reactive,
|
|
|
|
|
|
ref,
|
|
|
|
|
|
onMounted
|
|
|
|
|
|
} from 'vue';
|
|
|
|
|
|
import {
|
|
|
|
|
|
getOpenid,
|
|
|
|
|
|
getMessage
|
|
|
|
|
|
} from '@/api/loginApi.js'
|
|
|
|
|
|
import {
|
|
|
|
|
|
onLoad
|
|
|
|
|
|
} from '@dcloudio/uni-app';
|
|
|
|
|
|
|
|
|
|
|
|
const isTarget = ref(false);
|
|
|
|
|
|
const isFadingOut = ref(false);
|
|
|
|
|
|
|
|
|
|
|
|
// 遮罩色，rgba 可调透明度
|
|
|
|
|
|
const maskColor = ref('rgba(0, 0, 0, 0.5)')
|
|
|
|
|
|
|
|
|
|
|
|
function closeModal() {
|
|
|
|
|
|
isFadingOut.value = false
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 注意接收 event 参数
|
|
|
|
|
|
// function fetchProfile(e) {
|
|
|
|
|
|
// const info = e.detail && e.detail.userInfo
|
|
|
|
|
|
// if (info) {
|
|
|
|
|
|
// // userInfo.value = info
|
|
|
|
|
|
// console.log('拿到的用户信息：', info)
|
|
|
|
|
|
// // TODO: uni.request 上传到服务器
|
|
|
|
|
|
// } else {
|
|
|
|
|
|
// console.warn('用户拒绝了授权或获取失败')
|
|
|
|
|
|
// }
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
const getCode = () => {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
uni.login({
|
|
|
|
|
|
provider: 'weixin',
|
|
|
|
|
|
success(res) {
|
|
|
|
|
|
getOpenid(res.code).then(res => {
|
|
|
|
|
|
let openid = res.data.openid
|
|
|
|
|
|
uni.setStorageSync("openid", openid)
|
|
|
|
|
|
uni.navigateTo({
|
|
|
|
|
|
url: `/pages/login/phonebumber`
|
|
|
|
|
|
});
|
|
|
|
|
|
// if(!isallow.value){
|
|
|
|
|
|
// getUserProfile()
|
|
|
|
|
|
|
|
|
|
|
|
// } else{
|
|
|
|
|
|
// uni.navigateTo({
|
|
|
|
|
|
// url: `/pages/login/phonebumber`
|
|
|
|
|
|
// });
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
// getMessage(openid).then(res => {
|
|
|
|
|
|
// uni.navigateTo({
|
|
|
|
|
|
// url: `/pages/login/phonebumber`
|
|
|
|
|
|
// });
|
|
|
|
|
|
// })
|
|
|
|
|
|
})
|
|
|
|
|
|
},
|
|
|
|
|
|
fail(err) {
|
|
|
|
|
|
console.error('获取 code 失败：', err);
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const loginIt = () => {
|
|
|
|
|
|
if (!isTarget.value) {
|
|
|
|
|
|
isFadingOut.value = true;
|
|
|
|
|
|
} else {
|
|
|
|
|
|
getCode()
|
|
|
|
|
|
}
|
|
|
|
|
|
};
|
|
|
|
|
|
const jumpToPro = () => {
|
|
|
|
|
|
uni.navigateTo({
|
|
|
|
|
|
url: "/pages/login/protocol"
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
const userInfo = ref(null)
|
|
|
|
|
|
|
|
|
|
|
|
const isallow = ref(false)
|
|
|
|
|
|
|
|
|
|
|
|
function getUserProfile() {
|
|
|
|
|
|
// console.log("??????")
|
|
|
|
|
|
uni.getUserProfile({
|
|
|
|
|
|
desc: '用于完善会员资料', // 必填，弹窗提示语
|
|
|
|
|
|
lang: 'zh_CN',
|
|
|
|
|
|
success: (res) => {
|
|
|
|
|
|
// res.userInfo 包含昵称、头像等字段
|
|
|
|
|
|
userInfo.value = res.userInfo
|
|
|
|
|
|
console.log('用户信息：', res.userInfo)
|
|
|
|
|
|
isallow.value = true;
|
|
|
|
|
|
},
|
|
|
|
|
|
fail: (err) => {
|
|
|
|
|
|
console.warn('用户拒绝了授权', err)
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
|
// getUserProfile()
|
|
|
|
|
|
// if(options.type){
|
|
|
|
|
|
// uni.setStorageSync('special', true);
|
|
|
|
|
|
// }else{
|
|
|
|
|
|
// uni.setStorageSync('special', false);
|
|
|
|
|
|
// }
|
|
|
|
|
|
})
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
|
.login-container {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
min-height: 100vh;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
background-color: rgb(239, 241, 252);
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
|
|
.title-imge {
|
|
|
|
|
|
width: 150rpx;
|
|
|
|
|
|
height: 210rpx;
|
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
|
margin-top: 500rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.photo-imge {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
top: 200rpx;
|
|
|
|
|
|
left: 0;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 1300rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.under-container {
|
|
|
|
|
|
position: fixed;
|
|
|
|
|
|
left: 0;
|
|
|
|
|
|
bottom: 0;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 20vh;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
|
|
.radio-circle {
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
margin-top: 2rpx;
|
|
|
|
|
|
width: 40rpx;
|
|
|
|
|
|
height: 40rpx;
|
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
border: 2rpx solid #C0C5D9;
|
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.radio-circle-target {
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
margin-top: 2rpx;
|
|
|
|
|
|
width: 40rpx;
|
|
|
|
|
|
height: 40rpx;
|
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
border: 2rpx solid #C0C5D9;
|
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.radio-circle-target::after {
|
|
|
|
|
|
content: "";
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
top: 50%;
|
|
|
|
|
|
left: 50%;
|
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
|
width: 30rpx;
|
|
|
|
|
|
height: 30rpx;
|
|
|
|
|
|
background-color: #00C9FF;
|
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.under-container-title {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
// margin-top: 10rpx;
|
|
|
|
|
|
margin-bottom: 40rpx;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
font-size: 23rpx;
|
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
|
|
|
|
|
|
.radio-circle-blue {
|
|
|
|
|
|
color: #0083FF;
|
|
|
|
|
|
margin-top: 3rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.radio-circle-font {
|
|
|
|
|
|
color: #5A607F;
|
|
|
|
|
|
// margin-left: 18rpx;
|
|
|
|
|
|
margin-top: 3rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.button-blue {
|
|
|
|
|
|
width: 80%;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
height: 90rpx;
|
|
|
|
|
|
border-radius: 43rpx;
|
|
|
|
|
|
background: linear-gradient(to left, #00C9FF, #0076FF);
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
font-size: 33rpx;
|
|
|
|
|
|
margin-bottom: 30rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 遮罩 */
|
|
|
|
|
|
.overlay {
|
|
|
|
|
|
position: fixed;
|
|
|
|
|
|
top: 0;
|
|
|
|
|
|
left: 0;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
z-index: 998;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 弹窗 */
|
|
|
|
|
|
.modal {
|
|
|
|
|
|
position: fixed;
|
|
|
|
|
|
bottom: 0;
|
|
|
|
|
|
left: 0;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
z-index: 999;
|
|
|
|
|
|
border-top-left-radius: 50rpx;
|
|
|
|
|
|
border-top-right-radius: 50rpx;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 500rpx;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
|
|
.modal-title {
|
|
|
|
|
|
font-size: 32rpx;
|
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
|
margin: 50rpx 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.model-p {
|
|
|
|
|
|
padding: 0 50rpx;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
font-size: 30rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.model-down {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
padding: 0 50rpx;
|
|
|
|
|
|
margin-top: 40rpx;
|
|
|
|
|
|
|
|
|
|
|
|
.model-white {
|
|
|
|
|
|
border-radius: 50rpx;
|
|
|
|
|
|
width: 300rpx;
|
|
|
|
|
|
height: 95rpx;
|
|
|
|
|
|
border: 5rpx solid rgb(0, 141, 255);
|
|
|
|
|
|
color: rgb(0, 141, 255);
|
|
|
|
|
|
font-size: 35rpx;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.model-blue {
|
|
|
|
|
|
border-radius: 50rpx;
|
|
|
|
|
|
width: 300rpx;
|
|
|
|
|
|
height: 95rpx;
|
|
|
|
|
|
background: linear-gradient(to right, #00C9FF, #0076FF);
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
font-size: 35rpx;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 动画：遮罩淡入淡出 */
|
2025-07-14 17:29:17 +08:00
|
|
|
|
// .fade-enter-active,
|
|
|
|
|
|
// .fade-leave-active {
|
|
|
|
|
|
// transition: opacity 0.3s;
|
|
|
|
|
|
// }
|
2025-06-27 08:56:14 +08:00
|
|
|
|
|
2025-07-14 17:29:17 +08:00
|
|
|
|
// .fade-enter-from,
|
|
|
|
|
|
// .fade-leave-to {
|
|
|
|
|
|
// opacity: 0;
|
|
|
|
|
|
// }
|
2025-06-27 08:56:14 +08:00
|
|
|
|
|
2025-07-14 17:29:17 +08:00
|
|
|
|
// .fade-enter-to,
|
|
|
|
|
|
// .fade-leave-from {
|
|
|
|
|
|
// opacity: 1;
|
|
|
|
|
|
// }
|
2025-06-27 08:56:14 +08:00
|
|
|
|
|
2025-07-14 17:29:17 +08:00
|
|
|
|
// /* 动画：弹窗上滑 */
|
|
|
|
|
|
// .slide-up-enter-active,
|
|
|
|
|
|
// .slide-up-leave-active {
|
|
|
|
|
|
// transition: transform 0.3s;
|
|
|
|
|
|
// }
|
2025-06-27 08:56:14 +08:00
|
|
|
|
|
2025-07-14 17:29:17 +08:00
|
|
|
|
// .slide-up-enter-from,
|
|
|
|
|
|
// .slide-up-leave-to {
|
|
|
|
|
|
// transform: translateY(100%);
|
|
|
|
|
|
// }
|
2025-06-27 08:56:14 +08:00
|
|
|
|
|
2025-07-14 17:29:17 +08:00
|
|
|
|
// .slide-up-enter-to,
|
|
|
|
|
|
// .slide-up-leave-from {
|
|
|
|
|
|
// transform: translateY(0);
|
|
|
|
|
|
// }
|
2025-06-27 08:56:14 +08:00
|
|
|
|
</style>
|
