You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
304 lines
7.0 KiB
304 lines
7.0 KiB
<template>
|
|
<view class="login-container">
|
|
<!-- 背景图 -->
|
|
<image class="bg-image" :src="appBg" mode="aspectFill"></image>
|
|
|
|
<!-- 内容区域 -->
|
|
<view class="content">
|
|
<!-- 标题图片 -->
|
|
<view class="title-section">
|
|
<!-- <image class="title-image" src="/subPages/static/登录_标题.png" mode="widthFix"></image> -->
|
|
<view class="login-title">{{ loginTitle }}</view>
|
|
</view>
|
|
|
|
<!-- 按钮区域 -->
|
|
<view class="button-section">
|
|
<!-- 授权手机号登录按钮 -->
|
|
<view class="login-btn primary" @click="phoneLogin">
|
|
<text class="btn-text">授权手机号登录</text>
|
|
</view>
|
|
|
|
<!-- 取消登录按钮 -->
|
|
<view class="login-btn secondary" @click="cancelLogin">
|
|
<text class="btn-text">取消登录</text>
|
|
</view>
|
|
|
|
<!-- 协议文字 -->
|
|
<view class="agreement-text-container">
|
|
<view class="agreement-checkbox-row">
|
|
<view class="custom-checkbox" @click="toggleAgreement">
|
|
<uv-icon
|
|
v-if="!isAgreed"
|
|
name="checkmark-circle"
|
|
size="20"
|
|
color="#cccccc">
|
|
</uv-icon>
|
|
<uv-icon
|
|
v-else
|
|
name="checkmark-circle-fill"
|
|
size="20"
|
|
color="#1488DB">
|
|
</uv-icon>
|
|
</view>
|
|
<view class="agreement-text-content">
|
|
<text class="agreement-text">阅读并同意我们的 </text>
|
|
<text class="agreement-link" @click="showPolicy">《服务协议与隐私条款》</text>
|
|
<text class="agreement-text"> 以及 </text>
|
|
<text class="agreement-link" @click="showPrivacy">《个人信息保护指引》</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<uv-modal ref="modalPolicy" title="服务协议与隐私条款">
|
|
<view class="slot-content">
|
|
<rich-text :nodes="loginPolicy"></rich-text>
|
|
</view>
|
|
</uv-modal>
|
|
<uv-modal ref="modalPrivacy" title="个人信息保护指引">
|
|
<view class="slot-content">
|
|
<rich-text :nodes="loginPrivacy"></rich-text>
|
|
</view>
|
|
</uv-modal>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'Login',
|
|
data() {
|
|
return {
|
|
isAgreed: false
|
|
}
|
|
},
|
|
computed:{
|
|
appBg(){
|
|
return this.$store.state.configList['config_login_bg'].paramImage
|
|
},
|
|
loginTitle(){
|
|
return this.$store.state.configList['config_login_title'].paramText
|
|
},
|
|
loginPolicy(){
|
|
return this.$store.state.configList['config_login_policy'].paramTextarea
|
|
},
|
|
loginPrivacy(){
|
|
return this.$store.state.configList['config_login_privacy'].paramTextarea
|
|
},
|
|
},
|
|
methods: {
|
|
// 切换协议同意状态
|
|
toggleAgreement() {
|
|
this.isAgreed = !this.isAgreed;
|
|
console.log('协议同意状态:', this.isAgreed);
|
|
},
|
|
|
|
// 手机号授权登录
|
|
phoneLogin() {
|
|
if (!this.isAgreed) {
|
|
uni.showToast({
|
|
title: '请先同意协议条款',
|
|
icon: 'none'
|
|
});
|
|
return;
|
|
}
|
|
|
|
uni.login({
|
|
provider: 'weixin',
|
|
success: async (loginRes) => {
|
|
const res = await this.$api.login.login({
|
|
code: loginRes.code
|
|
})
|
|
uni.setStorageSync('token', res.result.token)
|
|
const userInfo = res.result.userInfo
|
|
if (!userInfo.headImage || !userInfo.nickName || !userInfo.phone) {
|
|
uni.showToast({
|
|
title: '请先完善个人信息',
|
|
icon: 'none'
|
|
})
|
|
setTimeout(() => {
|
|
uni.navigateTo({
|
|
url: '/subPages/login/userInfo'
|
|
})
|
|
|
|
}, 500)
|
|
}else {
|
|
uni.showToast({
|
|
title: '登录成功',
|
|
icon: 'success'
|
|
})
|
|
setTimeout(() => {
|
|
uni.switchTab({
|
|
url: '/pages/index/index'
|
|
})
|
|
}, 500)
|
|
}
|
|
|
|
},
|
|
fail: (error) => {
|
|
uni.showToast({
|
|
title: `${error.errMsg}`,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
|
|
// 取消登录
|
|
cancelLogin() {
|
|
console.log('取消登录');
|
|
// 重定向到首页
|
|
uni.switchTab({
|
|
url: '/pages/index/index'
|
|
})
|
|
},
|
|
|
|
// 显示服务协议
|
|
showPolicy() {
|
|
this.$refs.modalPolicy.open()
|
|
},
|
|
|
|
// 显示隐私条款
|
|
showPrivacy() {
|
|
this.$refs.modalPrivacy.open()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.login-container {
|
|
position: relative;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.bg-image {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 40%;
|
|
z-index: 1;
|
|
}
|
|
|
|
.content {
|
|
position: relative;
|
|
z-index: 2;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0 40rpx;
|
|
}
|
|
|
|
.title-section {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: center;
|
|
padding: 120rpx;
|
|
.login-title{
|
|
color: #1488db;
|
|
font-size: 48rpx;
|
|
font-weight: bold;
|
|
position: relative;
|
|
}
|
|
.login-title::after{
|
|
content: '';
|
|
position: absolute;
|
|
left: 20rpx;
|
|
bottom: -8rpx;
|
|
width: 100%;
|
|
height: 24rpx;
|
|
border-radius: 50%;
|
|
background: linear-gradient(to bottom, #0085e4, transparent);
|
|
}
|
|
}
|
|
|
|
// .welcome-section {
|
|
// display: flex;
|
|
// justify-content: center;
|
|
// margin-bottom: 100rpx;
|
|
|
|
// .welcome-box {
|
|
// border: 2rpx dashed #1488DB;
|
|
// border-radius: 10rpx;
|
|
// padding: 20rpx 40rpx;
|
|
// background: rgba(255, 255, 255, 0.9);
|
|
|
|
// .welcome-text {
|
|
// font-size: 28rpx;
|
|
// color: #1488DB;
|
|
// font-weight: 500;
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
.button-section {
|
|
flex: 1;
|
|
margin-bottom: 60rpx;
|
|
align-items: flex-start;
|
|
|
|
.login-btn {
|
|
width: 100%;
|
|
height: 88rpx;
|
|
border-radius: 44rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 30rpx;
|
|
|
|
&.primary {
|
|
background: #1488DB;
|
|
|
|
.btn-text {
|
|
color: #ffffff;
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
&.secondary {
|
|
background: rgba(255, 255, 255, 0.9);
|
|
border: 2rpx solid #cccccc;
|
|
|
|
.btn-text {
|
|
color: #666666;
|
|
font-size: 32rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.agreement-text-container {
|
|
margin-top: 40rpx;
|
|
|
|
.agreement-checkbox-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.custom-checkbox {
|
|
margin-right: 10rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.agreement-text-content {
|
|
flex: 1;
|
|
text-align: left;
|
|
|
|
.agreement-text {
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
}
|
|
|
|
.agreement-link {
|
|
font-size: 24rpx;
|
|
color: #1488DB;
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|