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