Skip to content

basic-uniapp-v3
basic-uniapp-v3
提交 accf23df 作者: 吴佳伟
操作

fix: 打开APP时，服务协议和隐私政策弹窗风格与APP内弹窗风格保持一致；

上级 8e39ceea
正在显示 包含 398 行增加 和 284 行删除
src/pages/login/login.vue
......@@ -147,10 +147,10 @@
const params = {
/* mobile: model.form.data.username,
smsmode: '0', */
mobile: model.form.data.username,
smsmode: 1,
smsmode: '0', */
mobile: model.form.data.username,
smsmode: 1,
}
API.sysSms(params)
.then(async (body) => {
......@@ -196,154 +196,168 @@
model.show = false
})
function onReadConfirm(val) {
if (val.index === 0) {
model.form.data.read = false
} else {
model.form.data.read = true
login()
}
function handleConfirm() {
model.form.data.read = true
login()
readConfirmShow.value = false
}
function handleCancel() {
model.form.data.read = false
readConfirmShow.value = false
}
</script>
<template>
<view class="login_warp">
<image class="login_top_bg" src="/static/images/login/login_top_bg.png" />
<view class="login_top_warp">
<view class="login_hello">
<text class="text_hello">您好，欢迎使用</text>
<view class="login_server_name"><text class="text_server_name">湘农数智服务平台</text></view>
</view>
</view>
<fui-form class="form" ref="form" top="0" :padding="['0rpx', '0rpx']" background="#e46962">
<view class="login_content">
<view class="login-input-area">
<view class="user_phone">
<image class="user_phone_img" src="/static/images/register/user.png" />
<view class="user_text_view"><text class="view_text">手机号</text></view>
</view>
<view class="input-bottom-border">
<fui-input
height="94rpx"
:padding="['0rpx', '0rpx', '0rpx', '12rpx']"
class="input"
autocomplete="off"
:required="false"
clearable
trim
type="number"
placeholder="请输入手机号"
v-model="model.form.data.username"
name="mobile"
backgroundColor="transparent"
borderColor="transparent"
maxlength="11"
>
</fui-input>
</view>
<view class="user_phone mt50">
<image class="user_phone_img" src="/static/images/register/sms.png" />
<view class="user_text_view"><text class="view_text">验证码</text></view>
</view>
<view class="input-bottom-border">
<fui-input
height="94rpx"
:padding="['0rpx', '0rpx', '0rpx', '12rpx']"
class="input"
type="number"
placeholder="请输入验证码"
v-model="model.form.data.code"
backgroundColor="transparent"
borderColor="transparent"
><fui-button
width="200rpx"
height="64rpx"
:background="model.countdown > 0 ? '#CCCCCC' : '#67c17a'"
:color="model.countdown > 0 ? '#67c17a' : '#fff'"
@click="smsCode"
:size="28"
:disabled="model.countdown > 0"
:text="model.countdown > 0 ? `${model.countdown}秒后重试` : '获取验证码'"
/>
</fui-input>
</view>
</view>
<view class="submit_btn_view">
<fui-button
height="72rpx"
background="#5DB66F"
size="28rpx"
radius="36rpx"
text="立即登录"
@click="login"
:disabled="model.loading"
:loading="model.loading"
/>
</view>
</view>
</fui-form>
<!-- </view> -->
<fui-checkbox-group class="checkbox" name="checkbox">
<view class="fui-list__item fiexdText">
<view class="fui-align__center" style="justify-content: center">
<view
class="fui-text privacy-wrap"
style="font-size: 28rpx; text-align: center; align-items: center"
>
<fui-label style="display: inline-flex; align-items: center">
<fui-checkbox
value="true"
color="#4da25b"
:checked="model.form.data.read"
@change="(e) => (model.form.data.read = e.checked)"
style="margin-right: 10rpx; width: 32rpx; height: 32rpx; margin-top: 2rpx"
/>
<text style="color: #999;;font-size:28rpx;">已阅读并同意</text>
</fui-label>
<fui-text
@tap="Link.to(Link.services, '服务协议')"
size="28rpx"
text="《服务协议》"
color="#4da25b"
/><text style="color: #999;;font-size:28rpx;">与</text>
<fui-text
@tap="Link.to(Link.privacy, '隐私政策')"
size="28rpx"
text="《隐私政策》"
color="#4da25b"
/>
</view>
</view>
<!-- 安全区 -->
<fui-safe-area />
</view>
</fui-checkbox-group>
<fui-modal
:show="readConfirmShow"
title="服务协议及隐私保护"
:buttons="[
{ text: '不同意', plain: true },
{ text: '同意', plain: false, color: '#fff' },
]"
@click="onReadConfirm"
>
<text class="fui-descr">
<text> 为了更好地保障您的合法权益，请您阅读并同意以下协议 </text>
<fui-text
@tap="Link.to(Link.services, '服务协议')"
size="28rpx"
text="《服务协议》"
color="#1890FF"
/>和
<fui-text @tap="Link.to(Link.privacy, '隐私政策')" size="28rpx" text="《隐私政策》" color="#1890FF" />
</text>
</fui-modal>
<image class="login_top_bg" src="/static/images/login/login_top_bg.png" />
<view class="login_top_warp">
<view class="login_hello">
<text class="text_hello">您好，欢迎使用</text>
<view class="login_server_name"><text class="text_server_name">湘农数智服务平台</text></view>
</view>
</view>
<fui-form class="form" ref="form" top="0" :padding="['0rpx', '0rpx']" background="#e46962">
<view class="login_content">
<view class="login-input-area">
<view class="user_phone">
<image class="user_phone_img" src="/static/images/register/user.png" />
<view class="user_text_view"><text class="view_text">手机号</text></view>
</view>
<view class="input-bottom-border">
<fui-input
height="94rpx"
:padding="['0rpx', '0rpx', '0rpx', '12rpx']"
class="input"
autocomplete="off"
:required="false"
clearable
trim
type="number"
placeholder="请输入手机号"
v-model="model.form.data.username"
name="mobile"
backgroundColor="transparent"
borderColor="transparent"
maxlength="11"
/>
</view>
<view class="user_phone mt50">
<image class="user_phone_img" src="/static/images/register/sms.png" />
<view class="user_text_view"><text class="view_text">验证码</text></view>
</view>
<view class="input-bottom-border">
<fui-input
height="94rpx"
:padding="['0rpx', '0rpx', '0rpx', '12rpx']"
class="input"
type="number"
placeholder="请输入验证码"
v-model="model.form.data.code"
backgroundColor="transparent"
borderColor="transparent"
><fui-button
width="200rpx"
height="64rpx"
:background="model.countdown > 0 ? '#CCCCCC' : '#67c17a'"
:color="model.countdown > 0 ? '#67c17a' : '#fff'"
@click="smsCode"
:size="28"
:disabled="model.countdown > 0"
:text="model.countdown > 0 ? `${model.countdown}秒后重试` : '获取验证码'"
/>
</fui-input>
</view>
</view>
<view class="submit_btn_view">
<fui-button
height="72rpx"
background="#5DB66F"
size="28rpx"
radius="36rpx"
text="立即登录"
@click="login"
:disabled="model.loading"
:loading="model.loading"
/>
</view>
</view>
</fui-form>
<!-- </view> -->
<fui-checkbox-group class="checkbox" name="checkbox">
<view class="fui-list__item fiexdText">
<view class="fui-align__center" style="justify-content: center">
<view
class="fui-text privacy-wrap"
style="font-size: 28rpx; text-align: center; align-items: center"
>
<fui-label style="display: inline-flex; align-items: center">
<fui-checkbox
value="true"
color="#4da25b"
:checked="model.form.data.read"
@change="(e) => (model.form.data.read = e.checked)"
style="margin-right: 10rpx; width: 32rpx; height: 32rpx; margin-top: 2rpx"
/>
<text style="color: #999; font-size: 28rpx">已阅读并同意</text>
</fui-label>
<fui-text
@tap="Link.to(Link.services, '服务协议')"
size="28rpx"
text="《服务协议》"
color="#4da25b"
/><text style="color: #999; font-size: 28rpx">与</text>
<fui-text
@tap="Link.to(Link.privacy, '隐私政策')"
size="28rpx"
text="《隐私政策》"
color="#4da25b"
/>
</view>
</view>
<!-- 安全区 -->
<fui-safe-area />
</view>
</fui-checkbox-group>
<view class="confirm-dialog-overlay" v-show="readConfirmShow">
<view class="confirm-dialog-container">
<!-- 标题 -->
<view class="dialog-title">服务协议及隐私保护</view>
<!-- 内容 -->
<view class="dialog-content">
<text class="fui-descr">
<text> 为了更好地保障您的合法权益，请您阅读并同意以下协议 </text>
<fui-text
@tap="Link.to(Link.services, '服务协议')"
size="28rpx"
text="《服务协议》"
color="#4da25b"
/>和
<fui-text
@tap="Link.to(Link.privacy, '隐私政策')"
size="28rpx"
text="《隐私政策》"
color="#4da25b"
/>
</text>
</view>
<!-- 按钮组 -->
<view class="dialog-buttons">
<view class="cancel-btn" @click="handleCancel">
<text class="cancel-text">不同意</text>
</view>
<view class="confirm-btn" @click="handleConfirm">
<text class="confirm-text">同意</text>
</view>
</view>
</view>
</view>
</view>
</template>
......@@ -366,143 +380,243 @@
block-size: 100% 100%;
background-color: #fafefc;
.login_top_bg{
width:750rpx;
height:1324rpx;
position:absolute;
left:0rpx;
top:0rpx;
}
.login_top_warp{
width:750rpx;
height:482rpx;
position: relative;
.login_hello{
position: absolute;
left: 50rpx;
top: 226rpx;
color: rgb(51 51 51 / 100%);
.text_hello{
font-size: 32rpx;
font-weight: 400;
letter-spacing: 0rpx;
line-height: 40rpx;
}
.login_server_name{
margin-top:32rpx;
.text_server_name{
font-size: 40rpx;
font-weight: 500;
letter-spacing: 0rpx;
line-height: 40rpx;
}
}
}
}
.login_content{
display:flex;
justify-content: center;
flex-wrap:wrap;
position: relative;
.login-input-area{
width: 650rpx;
// border:1rpx red solid;
.user_phone{
display:flex;
align-items: center;
.user_phone_img{
width: 40rpx;
height: 40rpx;
}
}
.user_text_view{
margin-left:12rpx;
height: 40rpx;
line-height: 40rpx;
.view_text{
font-size: 30rpx;
font-weight: 500;
letter-spacing: 0rpx;
color: rgb(51 51 51 / 100%);
}
}
.input-bottom-border{
border-bottom: 2rpx #eee solid;
}
.mt50{
margin-top:50rpx;
}
}
}
.submit_btn_view{
margin-top:120rpx;
width:650rpx;
}
.fui-descr {
letter-spacing: 1rpx;
padding: 50rpx;
font-size: 24rpx;
color: #b2b2b2;
padding-top: 12rpx;
padding-bottom: 48rpx;
::v-deep(.fui-text__content) {
text-indent: 0 !important;
}
}
.form {
position: absolute;
top: 480rpx;
z-index: 10;
}
.checkbox {
position: fixed;
left: 0rpx;
bottom: 32rpx;
width: 100%;
z-index: 10;
}
.privacy-wrap {
display: flex;
justify-content: center;
align-items: center;
}
.input,
.btn__box {
width: 100%;
height: 100rpx;
margin-top: 60rpx;
}
.fiexdText {
width: 100%;
margin-top: 40rpx;
}
:deep(.fui-input__border-bottom) {
right: 32rpx !important;
}
.btn-register {
color: cadetblue;
}
.login_top_bg {
width: 750rpx;
height: 1324rpx;
position: absolute;
left: 0rpx;
top: 0rpx;
}
.login_top_warp {
width: 750rpx;
height: 482rpx;
position: relative;
.login_hello {
position: absolute;
left: 50rpx;
top: 226rpx;
color: rgb(51 51 51 / 100%);
.text_hello {
font-size: 32rpx;
font-weight: 400;
letter-spacing: 0rpx;
line-height: 40rpx;
}
.login_server_name {
margin-top: 32rpx;
.text_server_name {
font-size: 40rpx;
font-weight: 500;
letter-spacing: 0rpx;
line-height: 40rpx;
}
}
}
}
.login_content {
display: flex;
justify-content: center;
flex-wrap: wrap;
position: relative;
.login-input-area {
width: 650rpx;
// border:1rpx red solid;
.user_phone {
display: flex;
align-items: center;
.user_phone_img {
width: 40rpx;
height: 40rpx;
}
}
.user_text_view {
margin-left: 12rpx;
height: 40rpx;
line-height: 40rpx;
.view_text {
font-size: 30rpx;
font-weight: 500;
letter-spacing: 0rpx;
color: rgb(51 51 51 / 100%);
}
}
.input-bottom-border {
border-bottom: 2rpx #eee solid;
}
.mt50 {
margin-top: 50rpx;
}
}
}
.submit_btn_view {
margin-top: 120rpx;
width: 650rpx;
}
.fui-descr {
letter-spacing: 1rpx;
padding: 50rpx;
font-size: 24rpx;
color: #b2b2b2;
padding-top: 12rpx;
padding-bottom: 48rpx;
::v-deep(.fui-text__content) {
text-indent: 0 !important;
}
}
.form {
position: absolute;
top: 480rpx;
z-index: 10;
}
.checkbox {
position: fixed;
left: 0rpx;
bottom: 32rpx;
width: 100%;
z-index: 10;
}
.privacy-wrap {
display: flex;
justify-content: center;
align-items: center;
}
.input,
.btn__box {
width: 100%;
height: 100rpx;
margin-top: 60rpx;
}
.fiexdText {
width: 100%;
margin-top: 40rpx;
}
:deep(.fui-input__border-bottom) {
right: 32rpx !important;
}
.btn-register {
color: cadetblue;
}
}
.confirm-dialog-overlay {
position: fixed;
inset: 0;
background-color: rgb(0 0 0 / 50%);
display: flex;
align-items: center;
justify-content: center;
z-index: 99999;
}
.confirm-dialog-container {
position: relative;
width: 600rpx;
background: linear-gradient(180deg, #e8f5e9 0%, #fff 30%);
border-radius: 32rpx;
padding: 60rpx 48rpx 48rpx;
box-shadow: 0 8rpx 32rpx rgb(0 0 0 / 10%);
}
.close-btn {
position: absolute;
top: 24rpx;
right: 24rpx;
width: 48rpx;
height: 48rpx;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.close-icon {
font-size: 36rpx;
color: #999;
font-weight: 300;
}
.dialog-title {
font-size: 36rpx;
font-weight: 600;
color: #333;
text-align: center;
margin-bottom: 32rpx;
}
.dialog-content {
font-size: 28rpx;
color: #666;
text-align: center;
line-height: 40rpx;
margin-bottom: 48rpx;
}
.dialog-buttons {
display: flex;
gap: 24rpx;
}
.cancel-btn,
.confirm-btn {
flex: 1;
height: 80rpx;
border-radius: 40rpx;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.cancel-btn {
background-color: #fff;
border: 2rpx solid #5db66f;
}
.cancel-text {
font-size: 28rpx;
color: #5db66f;
font-weight: 500;
}
.confirm-btn {
background: linear-gradient(135deg, #5db66f 0%, #4caf50 100%);
box-shadow: 0 4rpx 12rpx rgb(93 182 111 / 30%);
}
.confirm-text {
font-size: 28rpx;
color: #fff;
font-weight: 500;
}
.cancel-btn:active {
opacity: 0.8;
}
.confirm-btn:active {
opacity: 0.9;
transform: scale(0.98);
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论