hldy_app/pages/login/login.vue

605 lines
15 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="backgroundContainer">
<image class="title-img" src="/static/index/superNu.png" />
<view class="input-father">
<view class="add">+86</view>
<view class="shu"></view>
<input style="font-size: 27rpx;" type="number" v-model="form.username" maxlength="11" placeholder="请输入手机号" @blur="getImg" />
</view>
<view class="input-father">
<input class="password" password type="text" v-model="form.password" maxlength="15" placeholder="请输入密码" />
</view>
<view class="input-father" v-show="loginphoto">
<input class="password" :password="false" v-model="form.captcha" maxlength="15" placeholder="请输入验证码" />
<image class="input-code" :src="loginphoto" @click="getImg"></image>
</view>
<view class="input-father-gray" v-show="(!fullName) || (!canclick)">
验证并登录
</view>
<view class="input-father-blue" v-show="fullName&&canclick" @click="login()">
验证并登录
</view>
<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="openany=true;opentype=true">
《用户协议》
</view>
<view class="radio-circle-blue" @click="openany=true;opentype=false">
《隐私政策》
</view>
</view>
</view>
<!-- 弹出层 -->
<view v-if="showPopup" class="popup-wrapper" style="z-index: 999;">
<view class="mask"></view>
<view class="box">
<view class="box-title">
服务条款和隐私保护提示
</view>
<view class="font-father">
<view class="">
欢迎使用护理单元app!
</view>
<view style="text-indent: 2em;">
我们将通过<text class="text-blue"@click="openany=true;opentype=true">《用户协议》</text>和<text
class="text-blue" @click="openany=true;opentype=false">《隐私政策》</text>,帮助您了解我们为您提供的服务、我们如何处理个人信息以及您享有的权利。我们会严格按照相关法律法规要求,采取各种安全措施来保护您的个人信息。
</view>
<view style="margin: 30rpx 0;">
点击“同意”按钮,表示您已知情并同意以上协议和以下约定。
</view>
</view>
<view class="gray-box-bgc">
<scroll-view style="width: 100%;height: 100%;" scroll-y :show-scrollbar="true">
<view style="margin-bottom: 10rpx;">
1、服务条款与隐私政策确认登录即表示您已阅读并同意《NU 护理单元用户服务协议》及《NU 护理单元隐私信息保护政策》,其中包含对您权利义务、个人信息处理的详细说明。
</view>
<view style="margin-bottom: 10rpx;">
2、账号使用规范账号仅限本人使用禁止恶意注册、转借或泄露。请妥善保管账号密码因保管不善导致的账号安全问题由您自行承担责任。
</view>
<view style="margin-bottom: 10rpx;">
3、内容发布责任您在平台发布的内容需遵守法律法规不得包含不良信息或侵犯他人权益的内容。发布利用新技术制作的非真实信息时须显著标识。
</view>
<view style="margin-bottom: 10rpx;">
4、个人信息保护我们将依法收集、使用您的个人信息如手机号用于注册登录您可通过 “我的 - 设置 - 隐私管理” 查看、修改授权,也可申请注销账号(注销后相关数据将按规定处理)。
</view>
<view style="margin-bottom: 10rpx;">
5、未成年人使用提示未满 18 周岁用户需在监护人同意后使用,监护人可联系客服人员处理未成年人账号相关事宜,我们将严格保护未成年人信息。
</view>
</scroll-view>
</view>
<view class="blue-button" @click="closePopup">同意</view>
<view class="white-button" @click="closeapp">不同意</view>
</view>
</view>
<!-- 弹出层 -->
<view v-if="openany" class="popup-any">
<view class="mask" @click="openany=false"></view>
<view class="box-any">
<view class="title-left">
<image class="back-img" src="/static/left.png" @click="openany=false"></image>
<view v-if="!opentype" class="back-font">NU护理单元隐私信息保护政策</view>
<view v-if="opentype" class="back-font">NU护理单元用户服务协议</view>
</view>
<twoseven v-if="!opentype" />
<oneseven v-if="opentype" />
</view>
</view>
<!-- 弹出层 -->
<view v-if="openbottom" class="popup-wrapper">
<view class="mask" @click="openbottom=false"></view>
<view class="box-small">
<view class="box-title" style="margin-top: 30rpx;">
请阅读并同意以下条款
</view>
<view class="font-father">
<text class="text-blue" @click="openany=true;opentype=true">《用户协议》</text>
<text class="text-blue" @click="openany=true;opentype=false">《隐私政策》</text>
</view>
<view class="blue-button" @click="closebottom">同意并继续</view>
</view>
</view>
<!-- 弹出层 -->
<view v-if="openchange" class="popup-wrapper">
<view class="mask"></view>
<view class="box-change">
<view class="box-title">
修改账户登录密码
</view>
<view class="input-father">
<input class="password" :password="false" v-model="changeform.oldpassword" maxlength="15"
placeholder="请输入新密码" />
</view>
<view class="input-father">
<input class="password" :password="false" v-model="changeform.newpassword" maxlength="15"
placeholder="请再次输入新密码" />
</view>
<view class="blue-button" style="margin-top: 80rpx;" @click="openchange=false">确定</view>
</view>
</view>
<!-- 自动更新组件 -->
<zy-update ref="zyupgrade" :noticeflag="true" theme="blue" :h5preview="false" oldversion="1.0.0"
:appstoreflag="true" :autocheckupdate="true"></zy-update>
</template>
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, computed, nextTick, reactive } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import ZyUpdate from '@/component/zy-upgrade/zy-upgrade.vue'
import oneseven from '@/pages/login/oneseven.vue'
import twoseven from '@/pages/login/twoseven.vue'
import { isRel,getLoginImg,loginApp } from './api.js'
const zyupgrade = ref(null);
const isTarget = ref(false);
const form = reactive({
username: "",
password: "",
captcha: "",
checkKey:0
})
const changeform = reactive({
oldpassword: "",
newpassword: "",
})
// 计算属性
const fullName = computed(() => {
return form.password && isLength11(form.username)
})
const showPopup = ref(false)
function closebottom() {
openbottom.value = false;
isTarget.value = true;
}
function closePopup() {
showPopup.value = false;
uni.setStorageSync("appWgtVersion", uni.getSystemInfoSync().appWgtVersion)
}
function closeapp() {
plus.runtime.quit()
}
function isLength11(str) {
return typeof str === 'string' && str.length === 11;
}
const jumpTo = (url : string) => {
uni.navigateTo({
url: url
});
}
const loginphoto = ref("");
const canclick = ref(false)
const time = ref(0);
const getImg = () => {
if(/^\d{11}$/.test(form.username)){
isRel(form.username).then((res:any)=>{
if( res.result !==null && res.result.serverUrl){
uni.setStorageSync('serverUrl', res.result.serverUrl);
console.log("info",res.result)
time.value = Date.now();
getLoginImg(time.value).then((element:any)=>{
loginphoto.value = element.result
canclick.value = true
})
}else{
uni.setStorageSync('serverUrl', "");
loginphoto.value = "";
uni.showToast({
title: '该手机号未绑定机构',
icon: 'none', // 可选值:'success'、'loading'、'none'
duration: 2000 // 持续时间单位ms
})
canclick.value = false;
}
})
}else{
if(form.username){
uni.showToast({
title: '手机号不足11位',
icon: 'none', // 可选值:'success'、'loading'、'none'
duration: 2000 // 持续时间单位ms
})
}
}
}
const openbottom = ref(false);
const openchange = ref(false);
const openany = ref(false);
const opentype = ref(false)
const login = () => {
if (isTarget.value) {
// if (form.password == "123456") {
// openchange.value = true;
// } else {
// loginApp().then(res=>{
// console.log("???",res)
// })
// // jumpTo(`/pages/index/index`)
// }
form.checkKey = time.value
loginApp(form).then(res=>{
if(res.success){
uni.showToast({
title: res.message,
icon: 'none', // 可选值:'success'、'loading'、'none'
duration: 500 // 持续时间单位ms
})
uni.setStorageSync('token', res.result.token);
uni.setStorageSync('realname', res.result.userInfo.realname);
// console.log("????",res.result.userInfo.realname)
setTimeout(()=>{
jumpTo(`/pages/Initialization/index`)
},500)
}else{
uni.showToast({
title: res.message,
icon: 'none', // 可选值:'success'、'loading'、'none'
duration: 2000 // 持续时间单位ms
})
setTimeout(()=>{
getImg()
form.captcha=""
},2000)
}
// console.log("???",res)
})
} else {
openbottom.value = true;
}
}
// 生命周期钩子
onLoad(() => {
if (uni.getStorageSync('appWgtVersion') != uni.getSystemInfoSync().appWgtVersion) {
showPopup.value = true;
}
});
// 生命周期钩子
onShow(() => {
zyupgrade.value?.check_update()
});
</script>
<style scoped lang="less">
.backgroundContainer {
display: flex;
position: relative;
width: 100%;
height: 100vh;
background: url("/static/index/lightbgcnew.png") center/cover, rgba(255, 255, 255, 0.6);
background-blend-mode: screen;
background-size: cover;
background-position: center center;
overflow: hidden;
justify-content: center;
align-items: center;
flex-direction: column;
.title-img {
width: 150rpx;
height: 200rpx;
margin-bottom: 130rpx;
}
.input-father {
height: 90rpx;
width: 550rpx;
background-color: #fff;
border-radius: 30rpx;
margin-bottom: 20rpx;
display: flex;
align-items: center;
position: relative;
.input-code {
position: absolute;
top: 0;
right: 20rpx;
width: 150rpx;
height: 90rpx;
}
}
.input-father-blue {
margin-top: 100rpx;
height: 90rpx;
width: 550rpx;
background: linear-gradient(to right, #00C9FF, #0076FF);
border-radius: 30rpx;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 32rpx;
}
.input-father-gray {
margin-top: 100rpx;
height: 90rpx;
width: 550rpx;
background: rgb(148, 154, 163);
border-radius: 30rpx;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 32rpx;
}
}
.under-container-title {
display: flex;
margin-top: 80rpx;
align-items: center;
font-size: 25rpx;
font-weight: 500;
.radio-circle-blue {
color: #0083FF;
margin-top: 3rpx;
}
.radio-circle-font {
color: #5A607F;
margin-top: 3rpx;
}
.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%;
}
}
.add {
margin-left: 50rpx;
font-size: 32rpx;
}
.shu {
background-color: #d2d5d7;
width: 2rpx;
height: 35rpx;
margin: 0 20rpx;
}
.password {
font-size: 27rpx;
margin-left: 30rpx;
width: 100%;
height: 100rpx;
// margin-top: 50rpx;
}
.popup-wrapper {
position: fixed;
inset: 0;
z-index: 2;
/* 初始透明度 */
opacity: 0;
/* 播放动画:名称 fadeIn时长 0.5s,缓动函数 ease保持最后状态 */
animation: fadeIn 0.5s ease forwards;
}
.popup-any{
position: fixed;
inset: 0;
z-index: 999;
/* 初始透明度 */
opacity: 0;
/* 播放动画:名称 fadeIn时长 0.5s,缓动函数 ease保持最后状态 */
animation: fadeIn 0.5s ease forwards;
}
/* 定义关键帧 */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.mask {
position: absolute;
inset: 0;
}
.box-any {
position: absolute;
top: 50%;
left: 50%;
// transform: translate(0, -50%);
// transform: translateX(-50%);
transform: translate(-50%,-50%);
width: 1000rpx;
height: 1500rpx;
background: #fff;
border-radius: 50rpx;
overflow: hidden;
display: flex;
flex-direction: column;
// align-items: center;
// padding: 65rpx;
padding: 65rpx 40rpx;
}
.box-small {
position: absolute;
bottom: 20rpx;
left: 50%;
// transform: translate(0, -50%);
transform: translateX(-50%);
width: 800rpx;
height: 350rpx;
background: #fff;
border-radius: 50rpx;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
padding: 0 65rpx;
.box-title {
font-size: 35rpx;
margin: 60rpx 0;
}
.font-father {
line-height: 50rpx;
}
.text-blue {
color: #0083FF;
}
}
.box-change {
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -60%);
width: 800rpx;
height: 700rpx;
background: #fff;
border-radius: 50rpx;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
padding: 0 65rpx;
.box-title {
font-size: 35rpx;
margin: 60rpx 0;
font-weight: 600;
}
.input-father {
height: 90rpx;
width: 550rpx;
background-color: rgb(247, 247, 251);
border-radius: 30rpx;
margin-bottom: 40rpx;
display: flex;
align-items: center;
}
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 800rpx;
height: 1100rpx;
background: #fff;
border-radius: 50rpx;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
padding: 0 65rpx;
.box-title {
font-size: 35rpx;
margin: 60rpx 0;
}
.font-father {
line-height: 50rpx;
}
.text-blue {
color: #0083FF;
}
.gray-box-bgc {
width: 100%;
height: 250rpx;
border: 2rpx solid #CFD5E4;
background-color: #F2F4F7;
color: #777777;
border-radius: 20rpx;
padding: 20rpx 20rpx;
}
}
.blue-button {
width: 100%;
height: 90rpx;
background: linear-gradient(to right, #00C9FF, #0076FF);
color: #fff;
display: flex;
justify-content: center;
align-items: center;
margin-top: 50rpx;
border-radius: 25rpx;
font-size: 35rpx;
letter-spacing: 5rpx;
}
.white-button {
width: 100%;
height: 90rpx;
display: flex;
justify-content: center;
align-items: center;
margin-top: 10rpx;
border-radius: 25rpx;
font-size: 35rpx;
}
.title-left{
display: flex;
align-items: center;
.back-img{
width: 60rpx;
height: 60rpx;
margin-right: 30rpx;
}
.back-font{
font-size: 35rpx;
font-weight: 600;
}
}
</style>