605 lines
15 KiB
Vue
605 lines
15 KiB
Vue
<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> |