yangjun
/
hldy_app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
hldy_app/pages/login/login.vue

470 lines
10 KiB
Vue
Raw Normal View History

2025.2.20 第二版
2025-02-20 17:21:36 +08:00
<template>
6.13
2025-06-13 17:30:28 +08:00
<view class="backgroundContainer">
6.16
2025-06-16 17:32:23 +08:00
<image class="title-img" src="/static/index/superNu.png" />
6.13
2025-06-13 17:30:28 +08:00
<view class="input-father">
<view class="add">+86</view>
<view class="shu"></view>
<input style="font-size: 27rpx;" type="number" v-model="form.phone" maxlength="11" placeholder="请输入手机号" />
</view>
<view class="input-father">
6.16
2025-06-16 17:32:23 +08:00
<input class="password" password type="text" v-model="form.password" maxlength="15" placeholder="请输入密码" />
6.13
2025-06-13 17:30:28 +08:00
</view>
6.16
2025-06-16 17:32:23 +08:00
<view class="input-father">
<input class="password" :password="false" v-model="form.imgcode" maxlength="15" placeholder="请输入验证码" />
<image class="input-code" src="@/static/ceshi.png"></image>
</view>
<view class="input-father-gray" v-show="!fullName">
验证并登录
</view>
<view class="input-father-blue" v-show="fullName" @click="login()">
6.13
2025-06-13 17:30:28 +08:00
验证并登录
</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="showPopup=true">
《用户协议》
</view>
<view class="radio-circle-blue" @click="showPopup=true">
《隐私政策》
</view>
</view>
</view>
<!-- 弹出层 -->
<view v-if="showPopup" class="popup-wrapper">
6.16
2025-06-16 17:32:23 +08:00
<view class="mask"></view>
6.13
2025-06-13 17:30:28 +08:00
<view class="box">
<view class="box-title">
服务条款和隐私保护提示
</view>
<view class="font-father">
<view class="">
欢迎使用护理单元app!
</view>
<view style="text-indent: 2em;">
6.16
2025-06-16 17:32:23 +08:00
我们将通过<text class="text-blue">《用户协议》</text>和<text
class="text-blue">《隐私政策》</text>，帮助您了解我们为您提供的服务、我们如何处理个人信息以及您享有的权利。我们会严格按照相关法律法规要求，采取各种安全措施来保护您的个人信息。
6.13
2025-06-13 17:30:28 +08:00
</view>
<view style="margin: 30rpx 0;">
点击“同意”按钮，表示您已知情并同意以上协议和以下约定。
</view>
</view>
6.16
2025-06-16 17:32:23 +08:00
<view class="gray-box-bgc">
<scroll-view style="width: 100%;height: 100%;" scroll-y :show-scrollbar="true">
<view>
1.为了保障软件的安全运行和账户安全，我们会申请收集您的设备信息、IP地址WLANMAC地址。
</view>
<view>
2.上传或拍摄图片、视频，需要使用您的媒体影音、图片、视频、音频、相机、麦克风权限。
</view>
<view>
3.我们可能会申请位置权限，用于为您推荐您可能感兴趣的内容。
</view>
</scroll-view>
</view>
<view class="blue-button" @click="closePopup">同意</view>
<view class="white-button" @click="closeapp">不同意</view>
</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">《用户协议》</text>
<text class="text-blue">《隐私政策》</text>
</view>
6.13
2025-06-13 17:30:28 +08:00
6.16
2025-06-16 17:32:23 +08:00
<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>
6.13
2025-06-13 17:30:28 +08:00
</view>
</view>
<!-- 自动更新组件 -->
<zy-update ref="zyupgrade" :noticeflag="true" theme="blue" :h5preview="false" oldversion="1.0.0"
:appstoreflag="true" :autocheckupdate="true"></zy-update>
2025.2.20 第二版
2025-02-20 17:21:36 +08:00
</template>
6.13
2025-06-13 17:30:28 +08:00
<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'
const zyupgrade = ref(null);
const isTarget = ref(false);
const form = reactive({
phone: "",
6.16
2025-06-16 17:32:23 +08:00
password: "",
imgcode: ""
})
const changeform = reactive({
oldpassword: "",
newpassword: "",
})
// 计算属性
const fullName = computed(() => {
return form.password && isLength11(form.phone) && form.imgcode
6.13
2025-06-13 17:30:28 +08:00
})
const showPopup = ref(false)
6.16
2025-06-16 17:32:23 +08:00
function closebottom() {
openbottom.value = false;
isTarget.value = true;
}
6.13
2025-06-13 17:30:28 +08:00
function closePopup() {
6.16
2025-06-16 17:32:23 +08:00
showPopup.value = false;
uni.setStorageSync("appWgtVersion", uni.getSystemInfoSync().appWgtVersion)
6.13
2025-06-13 17:30:28 +08:00
}
6.16
2025-06-16 17:32:23 +08:00
function closeapp() {
plus.runtime.quit()
6.13
2025-06-13 17:30:28 +08:00
}
function isLength11(str) {
return typeof str === 'string' && str.length === 11;
}
const jumpTo = (url : string) => {
6.16
2025-06-16 17:32:23 +08:00
uni.navigateTo({
url: url
});
}
const openbottom = ref(false);
const openchange = ref(false);
const login = () => {
if (isTarget.value) {
if (form.password == "123456") {
openchange.value = true;
} else {
jumpTo(`/pages/index/index`)
}
} else {
openbottom.value = true;
6.13
2025-06-13 17:30:28 +08:00
}
}
// 生命周期钩子
onLoad(() => {
6.16
2025-06-16 17:32:23 +08:00
if (uni.getStorageSync('appWgtVersion') != uni.getSystemInfoSync().appWgtVersion) {
showPopup.value = true;
6.13
2025-06-13 17:30:28 +08:00
6.16
2025-06-16 17:32:23 +08:00
}
6.13
2025-06-13 17:30:28 +08:00
});
// 生命周期钩子
onShow(() => {
zyupgrade.value?.check_update()
});
2025.2.20 第二版
2025-02-20 17:21:36 +08:00
</script>
6.13
2025-06-13 17:30:28 +08:00
<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 {
6.16
2025-06-16 17:32:23 +08:00
width: 150rpx;
height: 200rpx;
margin-bottom: 130rpx;
6.13
2025-06-13 17:30:28 +08:00
}
.input-father {
height: 90rpx;
width: 550rpx;
background-color: #fff;
border-radius: 30rpx;
6.16
2025-06-16 17:32:23 +08:00
margin-bottom: 20rpx;
6.13
2025-06-13 17:30:28 +08:00
display: flex;
align-items: center;
6.16
2025-06-16 17:32:23 +08:00
position: relative;
.input-code {
position: absolute;
top: 0;
right: 20rpx;
width: 150rpx;
height: 90rpx;
}
6.13
2025-06-13 17:30:28 +08:00
}
.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;
}
6.16
2025-06-16 17:32:23 +08:00
.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;
}
6.13
2025-06-13 17:30:28 +08:00
}
.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%;
}
.popup-wrapper {
position: fixed;
inset: 0;
z-index: 1000;
6.16
2025-06-16 17:32:23 +08:00
/* 初始透明度 */
opacity: 0;
/* 播放动画：名称 fadeIn，时长 0.5s，缓动函数 ease，保持最后状态 */
animation: fadeIn 0.5s ease forwards;
}
/* 定义关键帧 */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
6.13
2025-06-13 17:30:28 +08:00
}
.mask {
position: absolute;
inset: 0;
}
6.16
2025-06-16 17:32:23 +08:00
.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;
}
}
6.13
2025-06-13 17:30:28 +08:00
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 800rpx;
6.16
2025-06-16 17:32:23 +08:00
height: 1100rpx;
6.13
2025-06-13 17:30:28 +08:00
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;
}
6.16
2025-06-16 17:32:23 +08:00
.text-blue {
6.13
2025-06-13 17:30:28 +08:00
color: #0083FF;
}
6.16
2025-06-16 17:32:23 +08:00
.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;
6.13
2025-06-13 17:30:28 +08:00
}
</style>