first commit
This commit is contained in:
zoujiandong
@@ -0,0 +1,487 @@
|
||||
<template>
|
||||
<uni-nav-bar title="登录" fixed color="#8B2316" height="160rpx" :border="false" backgroundColor="#eeeeee"></uni-nav-bar>
|
||||
<view class="login-container">
|
||||
|
||||
<!-- 主要内容区域 -->
|
||||
<view class="main-content" >
|
||||
|
||||
<!-- 应用图标和名称 -->
|
||||
<view class="app-info">
|
||||
<view class="app-icon">
|
||||
|
||||
<up-image :src="logo" width="164rpx" height="167rpx" ></up-image>
|
||||
|
||||
</view>
|
||||
<text class="app-name">专家端</text>
|
||||
</view>
|
||||
|
||||
<!-- 手机号输入 -->
|
||||
<view class="input-section">
|
||||
<view class="input-group">
|
||||
<up-image :src="phoneImg" width="36rpx" height="36rpx" ></up-image>
|
||||
<input
|
||||
class="phone-input"
|
||||
type="number"
|
||||
placeholder="请输入手机号"
|
||||
v-model="phoneNumber"
|
||||
maxlength="11"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 密码输入 -->
|
||||
<view class="input-group">
|
||||
<up-image :src="pwdImg" width="36rpx" height="36rpx" ></up-image>
|
||||
<input
|
||||
class="password-input"
|
||||
type="text"
|
||||
placeholder="请输入密码"
|
||||
:password="!showPassword"
|
||||
v-model="password"
|
||||
/>
|
||||
<view class="password-toggle" @click="togglePassword">
|
||||
<up-image :src="showPassword ? eyeOpenImg : eyeCloseImg" width="36rpx" height="36rpx" ></up-image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 登录按钮 -->
|
||||
<view class="login-button" @click="onPasswordLogin" >
|
||||
<text class="button-text">登录</text>
|
||||
</view>
|
||||
<view class="sms-login" @click="goSmsLogin">
|
||||
<text class="sms-text">短信验证码登录</text>
|
||||
</view>
|
||||
<!-- 其他登录方式 -->
|
||||
<view class="other-login">
|
||||
|
||||
|
||||
<!-- 微信登录 -->
|
||||
<view class="wechat-login" @click="onWechatLogin">
|
||||
<view class="wechat-icon">
|
||||
<up-image :src="wxImg" width="100rpx" height="100rpx" ></up-image>
|
||||
</view>
|
||||
<text class="wechat-text">微信登录</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 底部协议 -->
|
||||
<view class="agreement-section">
|
||||
<view class="agreement-content">
|
||||
|
||||
<view class="checkbox" @click="toggleAgreement">
|
||||
<up-image :src="checkImg" width="45rpx" height="45rpx" v-if="!isAgreed"></up-image>
|
||||
<up-image :src="checkOnImg" width="45rpx" height="45rpx" v-else></up-image>
|
||||
</view>
|
||||
<view class="agreement-text">
|
||||
<text class="text-content">我已阅读并同意</text>
|
||||
<text class="link-text" @click="onServiceTerms">《中国移动认证服务条款》</text>
|
||||
<text class="text-content">和</text>
|
||||
<text class="link-text" @click="onPrivacyPolicy">《肝胆相照隐私政策》</text>
|
||||
<text class="text-content">、</text>
|
||||
<text class="link-text" @click="onUserAgreement">《肝胆相照用户服务协议》</text>
|
||||
<text class="text-content">并使用本机号码登录并注册</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, computed } from 'vue';
|
||||
import { onShow, onLoad } from "@dcloudio/uni-app";
|
||||
import auth from "@/utils/auth";
|
||||
import logo from "@/static/icon_login_logo.png"
|
||||
import wxImg from "@/static/weixin_login.png"
|
||||
import checkImg from "@/static/login_new_unselect.png"
|
||||
import checkOnImg from "@/static/login_new_select.png"
|
||||
import phoneImg from "@/static/phone.png"
|
||||
import pwdImg from "@/static/pwd.png"
|
||||
import eyeOpenImg from "@/static/eye_open.png"
|
||||
import eyeCloseImg from "@/static/eye_close.png"
|
||||
|
||||
const customStyle = reactive({
|
||||
height: "100rpx",
|
||||
fontSize: "36rpx",
|
||||
backgroundColor:'#8B2316',
|
||||
borderRadius: '50rpx'
|
||||
});
|
||||
|
||||
// 协议同意状态
|
||||
const isAgreed = ref(false);
|
||||
|
||||
// 手机号和密码
|
||||
const phoneNumber = ref('');
|
||||
const password = ref('');
|
||||
|
||||
// 密码显示状态
|
||||
const showPassword = ref(false);
|
||||
|
||||
// 是否可以登录
|
||||
const canLogin = computed(() => {
|
||||
return isAgreed.value && phoneNumber.value.length === 11 && password.value.length >= 6;
|
||||
});
|
||||
const goSmsLogin=()=>{
|
||||
uni.redirectTo({
|
||||
url:'/pages_app/smsLogin/smsLogin'
|
||||
})
|
||||
}
|
||||
const alertAgree=()=>{
|
||||
uni.showToast({
|
||||
title: '请先同意用户协议',
|
||||
icon:'none'
|
||||
})
|
||||
};
|
||||
|
||||
// 切换密码显示
|
||||
const togglePassword = () => {
|
||||
showPassword.value = !showPassword.value;
|
||||
};
|
||||
|
||||
// 密码登录
|
||||
const onPasswordLogin = () => {
|
||||
if (!isAgreed.value) {
|
||||
uni.showToast({
|
||||
title: '请先同意相关协议',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (!phoneNumber.value) {
|
||||
uni.showToast({
|
||||
title: '请输入手机号',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (!/^1[3-9]\d{9}$/.test(phoneNumber.value)) {
|
||||
uni.showToast({
|
||||
title: '请输入正确的手机号',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (!password.value) {
|
||||
uni.showToast({
|
||||
title: '请输入密码',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (password.value.length < 6) {
|
||||
uni.showToast({
|
||||
title: '密码长度不能少于6位',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('密码登录');
|
||||
uni.showLoading({
|
||||
title: '登录中...'
|
||||
});
|
||||
|
||||
// 模拟登录过程
|
||||
setTimeout(() => {
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: '登录成功',
|
||||
icon: 'success'
|
||||
});
|
||||
|
||||
// 跳转到首页
|
||||
setTimeout(() => {
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
});
|
||||
}, 1500);
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
// 微信登录
|
||||
const onWechatLogin = () => {
|
||||
if (!isAgreed.value) {
|
||||
uni.showToast({
|
||||
title: '请先同意相关协议',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('微信登录');
|
||||
uni.showToast({
|
||||
title: '微信登录功能开发中',
|
||||
icon: 'none'
|
||||
});
|
||||
};
|
||||
|
||||
// 切换协议同意状态
|
||||
const toggleAgreement = () => {
|
||||
isAgreed.value = !isAgreed.value;
|
||||
};
|
||||
|
||||
// 查看服务条款
|
||||
const onServiceTerms = () => {
|
||||
console.log('查看服务条款');
|
||||
uni.navigateTo({
|
||||
url: '/pages_app/agreement/service-terms'
|
||||
});
|
||||
};
|
||||
|
||||
// 查看隐私政策
|
||||
const onPrivacyPolicy = () => {
|
||||
console.log('查看隐私政策');
|
||||
uni.navigateTo({
|
||||
url: '/pages_app/agreement/privacy-policy'
|
||||
});
|
||||
};
|
||||
|
||||
// 查看用户协议
|
||||
const onUserAgreement = () => {
|
||||
console.log('查看用户协议');
|
||||
uni.navigateTo({
|
||||
url: '/pages_app/agreement/user-agreement'
|
||||
});
|
||||
};
|
||||
|
||||
// 页面加载
|
||||
onLoad(() => {
|
||||
console.log('密码登录页面加载完成');
|
||||
});
|
||||
|
||||
// 页面显示
|
||||
onShow(() => {
|
||||
console.log('密码登录页面显示');
|
||||
});
|
||||
|
||||
// 组件挂载后
|
||||
onMounted(() => {
|
||||
console.log('密码登录页面组件已挂载');
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.login-container {
|
||||
min-height: calc(100vh - 160rpx);
|
||||
background-color: #ffffff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 主要内容区域 */
|
||||
.main-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 100rpx 60rpx 0;
|
||||
}
|
||||
|
||||
/* 应用信息 */
|
||||
.app-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 80rpx;
|
||||
}
|
||||
|
||||
.app-icon {
|
||||
border-radius: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 20rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.app-name {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #8B2316;
|
||||
}
|
||||
|
||||
/* 输入区域 */
|
||||
.input-section {
|
||||
width: 100%;
|
||||
margin-bottom: 60rpx;
|
||||
border: 2rpx solid #e5e5e5;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
display: flex;
|
||||
padding-left: 20rpx;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.input-group:first-child{
|
||||
border-bottom: 2rpx solid #e5e5e5;
|
||||
}
|
||||
|
||||
.phone-input {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
padding: 0 40rpx;
|
||||
font-size: 32rpx;
|
||||
background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.password-input {
|
||||
flex: 1;
|
||||
height: 80rpx;
|
||||
padding: 0 40rpx;
|
||||
font-size: 32rpx;
|
||||
background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.password-toggle {
|
||||
width: 60rpx;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 登录按钮 */
|
||||
.login-button {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
background-color: #8B2316;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 10rpx;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.login-button:active {
|
||||
background-color: #6B1A0F;
|
||||
}
|
||||
|
||||
.button-text {
|
||||
font-size: 32rpx;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 其他登录方式 */
|
||||
.other-login {
|
||||
width: 100%;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
/* 微信登录 */
|
||||
.wechat-login {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.wechat-icon {
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.wechat-text {
|
||||
font-size: 28rpx;
|
||||
color: #8B2316;
|
||||
}
|
||||
|
||||
/* 底部协议 */
|
||||
.agreement-section {
|
||||
padding: 40rpx 60rpx 60rpx;
|
||||
}
|
||||
|
||||
.agreement-content {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
width: 45rpx;
|
||||
height:45rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
margin-top: 4rpx;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.agreement-text {
|
||||
flex: 1;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.text-content {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.link-text {
|
||||
color: #8B2316;
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 750rpx) {
|
||||
.main-content {
|
||||
padding: 80rpx 40rpx 0;
|
||||
}
|
||||
|
||||
.app-icon {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
}
|
||||
|
||||
.phone-input,
|
||||
.password-input {
|
||||
height: 90rpx;
|
||||
}
|
||||
|
||||
.login-button {
|
||||
height: 90rpx;
|
||||
}
|
||||
|
||||
.button-text {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.agreement-section {
|
||||
padding: 30rpx 40rpx 50rpx;
|
||||
}
|
||||
|
||||
.agreement-text {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
}
|
||||
.sms-login {
|
||||
width:100%;
|
||||
margin-bottom: 0rpx;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sms-text {
|
||||
font-size: 28rpx;
|
||||
color: #8B2316;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user