<template>
<view class="content">
<view class="top_img">
<image class="logo" src="/static/login/图层 1.png"></image>
<image class="logo_car" src="/static/login/y.png"></image>
<view class="top_title">
SIGN IN
</view>
<view class="top_login">
欢迎登录,
</view>
<view class="top_Firstaid">
院前急救
</view>
</view>
<view class="con_rectangle">
<view class="con_view">
</view>
<view class="con_phone">
<view class="phone_ico">
<image src="../../static/login/手机1.png" mode=""></image>
<text class="phone_line">|</text>
<input class="uni-input" focus placeholder="请输入手机号码" v-model="user_plone" />
</view>
</view>
<view class="line">
</view>
<view class="con_password">
<view class="phone_ico">
<image src="../../static/login/矩形 4.png" mode=""></image>
<text class="phone_line">|</text>
<input class="uni-input" placeholder="请输入密码" :password="showPassword" v-model="user_password" />
<image src="../../static/login/num.png"
style="width: 33rpx;height: 23rpx;opacity: 0.75;position: absolute;right: 91rpx;line-height: 23rpx;"
@click="changePassword">
</view>
</view>
<view class="btn">
<view class="log_in" @click="tap_login">
登 录
</view>
</view>
<view class="login_agreement">
<checkbox-group @change="handleChange">
<label class="checkbox">
<checkbox v-model="select" :checked="select" style="transform:scale(0.7);" />
登录代表你已经同意<text>《用户协议》</text>和<text>《隐私权政策》</text>
</label>
</checkbox-group>
</view>
</view>
<!-- 登录成功弹出层 -->
<view class="popup">
<!-- 认证通不通过的弹出层 -->
<uni-popup ref="popup" type="center" :animation="false" :mask-click="false" v-if="popup1Visible">
<image class="popup_img" src="../../static/login/图层 2.png" mode="">
</image>
<view class="popup_ok" :style="popup_title=='认证不通过！'?'color:red':''">
{{popup_title}}
</view>
<button type="default" class="popup_btn" style="background-color:#5581FF; color: #fff;"
@click="btn_ok">确定</button>
</uni-popup>
<!-- 协议勾没勾选的弹出层 -->
<uni-popup ref="popup" type="center" :animation="false" :mask-click="false" v-if="popup2Visible">
<view class="agreement">
<view class="agreement_title">
服务协议及隐私保护
</view>
<view class="agreement_content">
<view>
尊敬的用户，为了更好地保障您的合法权益，我们依据相关法律法规制定了用户注册使用协议、隐私保护指引以及个人信息授权书，请您在点击同意注册之前仔细阅读并充分理解相关条款，其中的重点条款已经为您标注，方便您了解自己的权利。我们将通过《隐私保护指引》以及《个人信息处理授权书》向您说明:
</view>
<view class="agreement_empty">
</view>
<view>
1、为了更好地为您提供服务，我们会根据您的授权，收集和使用对应的必要信息(如您的姓名、联系电话等);
</view>
<view>
2、您可以对上述信息进行访问、更正、删除为了更好地为您提供服务，我们会根据您的授权，收集和使用对应的必要信息(如您的姓名、联系电话等);
</view>
</view>
<view class="agreement_but">
<button type="default" class="but_no" @click="notArgree">不同意</button>
<button type="primary" class="but_yes" @click="agree">同意</button>
</view>
</view>
</uni-popup>
</view>
<!-- 内部使用 -->
<view class="tips">
<uni-icons type="info" size="35rpx" color="#5581FF" style="margin-right: 5rpx;height:30rpx;width: 30rpx;"></uni-icons><text>仅限内部人员使用</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
// 用户密码查看
showPassword: true,
// 用户手机号
user_plone: '',
//用户密码
user_password: '',
//用户认证提示标题
popup_title: '',
//协议是否选中
select: false,
//显示用户认证
popup1Visible: true,
//显示协议
popup2Visible: true,
}
},
onLoad() {
},
watch: {
popup_title(newVal) {
if (newVal === '认证完成' || newVal === '认证不通过！') {
this.popup1Visible = true; // 如果popup_title的值是'认证完成'或'认证不通过！'，则显示第一个弹出框
this.popup2Visible = false; // 隐藏第二个弹出框
} else if (newVal === '') {
this.popup1Visible = false;
this.popup2Visible = true;
}
}
},
methods: {
// 查看密码
changePassword() {
this.showPassword = !this.showPassword;
},
//点击登录
tap_login() {
if (this.user_plone !== '' && this.user_password !== '' && this.select == true) {
uni.request({
url: 'http://192.168.0.15:8080/wechat/authentication', // 后端服务的地址
method: 'POST', // 请求方法，根据实际情况选择
data: {username:'test',password:'e10adc3949ba59abbe56e057f20f883e'}, // 发送给后端的数据，根据实际情况填写
success: (res)=>{
// 请求成功时的处理逻辑
if(res.data.errmsg=='ok'){
//设置提示标题
this.popup_title = '认证完成'
this.$refs.popup.open('center')
}
},
fail: function(err) {
console.error(err); // 请求失败时的处理逻辑
}
});
} else if (!this.select && this.user_plone !== '' && this.user_password !== '') {
this.popup_title = ''
this.$refs.popup.open('center')
} else {
//设置提示标题
this.popup_title = '认证不通过！'
this.$refs.popup.open('center')
}
},
//认证成功时登录
btn_ok() {
if (this.popup_title == '认证完成') {
//跳转
uni.navigateTo({
url: '/pages/accredit/accredit'
});
this.$refs.popup.close()
this.user_plone = ''
this.user_password = ''
this.select = false
} else {
//弹窗关闭
this.$refs.popup.close()
}
},
//协议弹出层确定
agree() {
//弹出层关闭
this.$refs.popup.close()
this.select = true
this.popup_title = '认证完成'
},
//协议弹出层取消
notArgree() {
//弹出层关闭
this.$refs.popup.close()
this.select = false
},
//协议选中不选中
handleChange(value) {
var values = value.detail.value
// 如果选中的值数组不为空，则将 select 设为 true，否则设为 false
this.select = values.length > 0;
}
}
}
</script>
<style lang="scss" scoped>
.content {
width: 750rpx;
height: 1334rpx;
position: relative;
}
.top_img {
width: 750rpx;
height: 600rpx;
}
.logo_car {
position: absolute;
left: 303rpx;
top: 134rpx;
width: 447rpx;
height: 333rpx;
z-index: 10;
}
.top_title {
width: 100rpx;
height: 21rpx;
position: absolute;
top: 166rpx;
left: 52rpx;
font-weight: 400;
font-size: 26rpx;
color: #FFFFFF;
text-align: left;
font-style: normal;
text-transform: none;
color: #80A5EE;
}
.top_login {
width: 275rpx;
height: 68rpx;
position: absolute;
left: 51rpx;
top: 221rpx;
font-weight: 400;
font-size: 63rpx;
color: #FFFFFF;
}
.top_Firstaid {
position: absolute;
top: 306rpx;
left: 51rpx;
width: 220rpx;
height: 52rpx;
font-size: 55rpx;
color: #FFFFFF;
text-align: left;
}
.logo {
height: 600rpx;
width: 750rpx;
}
.con_rectangle {
width: 726rpx;
height: 581rpx;
position: absolute;
left: 13rpx;
top: 391rpx;
background-color: #FFFFFF;
border-radius: 31rpx 31rpx 31rpx 31rpx;
}
.con_view {
width: 726rpx;
height: 120rpx;
}
.con_phone {
width: 567rpx;
height: 90rpx;
padding-left: 88rpx;
display: flex;
align-items: center;
}
.line {
width: 547rpx;
height: 1rpx;
position: absolute;
left: 88rpx;
background: #848484;
}
.con_password {
width: 567rpx;
height: 100rpx;
padding-left: 88rpx;
display: flex;
align-items: center;
position: relative;
}
.phone_ico {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.phone_ico image {
width: 24rpx;
height: 34rpx;
vertical-align: middle;
}
.phone_line {
width: 1rpx;
opacity: 0.22;
padding-left: 21rpx;
}
.uni-input {
padding-left: 30rpx;
width: 210rpx;
height: 24rpx;
padding-top: 9rpx;
}
.uni-icon {
width: 33rpx;
height: 23rpx;
opacity: 0.75;
position: absolute;
right: 91rpx;
line-height: 23rpx;
}
.btn {
width: 567rpx;
height: 104rpx;
box-shadow: 6rpx 0rpx 10rpx 0rpx #1579FD;
background-color: #1579FD;
border-radius: 18rpx 18rpx 18rpx 18rpx;
margin-left: 72rpx;
display: flex;
align-items: center;
justify-content: center;
margin-top: 30rpx;
margin-bottom: 30rpx;
}
.log_in {
width: 77rpx;
height: 34rpx;
font-weight: 400;
font-size: 36rpx;
color: #FFFFFF;
line-height: 34rpx;
text-align: center;
font-style: normal;
text-transform: none;
}
.login_agreement {
width: 500rpx;
height: 20rpx;
margin-left: 120rpx;
margin-top: 30rpx;
font-weight: 400;
font-size: 18rpx;
color: #666666;
line-height: 20rpx;
text-align: left;
font-style: normal;
text-transform: none;
}
.login_agreement text {
color: #F34141;
}
// 登录成功的弹出层
.popup {
.popup_img {
width: 361rpx;
height: 381rpx;
position: relative;
}
.popup_ok {
position: absolute;
top: 45%;
left: 30%;
font-size: 31rpx;
color: #333333;
line-height: 31rpx;
width: 124rpx;
height: 30rpx;
}
.popup_btn {
position: absolute;
width: 237rpx;
height: 63rpx;
background: #5581FF;
border-radius: 31rpx 31rpx 31rpx 31rpx;
top: 70%;
left: 15%;
font-size: 28rpx;
color: #FFFFFF;
line-height: 63rpx;
}
}
// 服务协议弹出层
.agreement {
width: 594rpx;
height: 779rpx;
background: #FFFFFF;
border-radius: 20rpx 20rpx 20rpx 20rpx;
position: relative;
text-align: left;
font-style: normal;
text-transform: none;
.agreement_title {
width: 311rpx;
height: 34rpx;
font-weight: 400;
font-size: 34rpx;
color: #141414;
line-height: 34rpx;
position: absolute;
left: 137rpx;
top: 45rpx;
}
.agreement_content {
width: 493rpx;
height: 505rpx;
font-weight: 400;
font-size: 26rpx;
color: #141414;
line-height: 40rpx;
position: absolute;
left: 50rpx;
top: 115rpx;
margin-top: 26rpx;
overflow-y: auto;
.agreement_empty {
height: 15rpx;
}
}
.agreement_but {
width: 493rpx;
height: 85rpx;
position: absolute;
left: 42rpx;
top: 657rpx;
display: flex;
justify-content: space-between;
align-items: center;
button {
width: 230rpx;
height: 82rpx;
border-radius: 40rpx 40rpx 40rpx 40rpx;
text-align: center;
line-height: 82rpx;
font-weight: 400;
font-size: 32rpx;
}
.but_no {
background: #F3F5F7;
color: #141414;
}
.but_yes {
background: #538DEB;
color: #FFFFFF;
}
}
}
//提示信息
.tips{
position: absolute;
left: 72rpx;
top: 1235rpx;
width: 600rpx;
height: 60rpx;
color: #5581FF;
font-size: 26rpx;
display: flex;
align-items: center;
justify-content: center;
}
</style>