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.
379 lines
9.2 KiB
379 lines
9.2 KiB
<template>
|
|
<view class="login-container">
|
|
<!-- 应用标题和副标题 -->
|
|
<view class="app-header">
|
|
<image :src="logoImage" alt="logo" style="width: 120rpx; height: 120rpx; display: block; margin: 0 auto;" />
|
|
<view class="app-title">{{ logoName }}</view>
|
|
<!-- <view class="app-subtitle">旧物很有用·回收很简单</view> -->
|
|
</view>
|
|
|
|
<!-- 登录操作区域 -->
|
|
<view class="login-actions">
|
|
<button class="login-btn" @click="handleLogin">登录</button>
|
|
<button class="cancel-btn" @click="handleCancel">取消登录</button>
|
|
|
|
<view class="agreement">
|
|
<checkbox-group @change="handleAgreementChange" class="radio-group">
|
|
<label class="radio-label">
|
|
<checkbox :checked="agreed" color="#fdbd3e" class="custom-radio"/>
|
|
<text class="agreement-text">我已阅读并同意</text>
|
|
<text class="protocol-link" @click.stop="openProtocol('service')">《服务协议》</text>
|
|
<text class="agreement-text">和</text>
|
|
<text class="protocol-link" @click.stop="openProtocol('privacy')">《隐私政策》</text>
|
|
</label>
|
|
</checkbox-group>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<!-- <uv-divider :dashed = "true"></uv-divider> -->
|
|
|
|
<!-- <view class="admin-login" @click="goToAdminLogin">管理员登录→</view> -->
|
|
|
|
|
|
<PrivacyPopup
|
|
ref="privacyPopup"
|
|
:needPhone="needPhone"
|
|
@agree="handleAgreePrivacy"
|
|
@reject="handleRejectPrivacy"
|
|
@open-protocol="openProtocol"
|
|
/>
|
|
<ProtocolDialog
|
|
ref="protocolDialog"
|
|
:show="showProtocolDialog"
|
|
:title="protocolDialogTitle"
|
|
:content="protocolDialogContent"
|
|
@close="showProtocolDialog = false"
|
|
@agree="handleProtocolAgree"
|
|
@reject="handleProtocolReject"
|
|
/>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import PrivacyPopup from '@/wxcomponents/privacy-popup/privacy-popup.vue'
|
|
import ProtocolDialog from '@/wxcomponents/protocol-dialog/protocol-dialog.vue'
|
|
// import {banner} from '@/api.uts'
|
|
export default {
|
|
components: {
|
|
PrivacyPopup,
|
|
ProtocolDialog
|
|
},
|
|
data() {
|
|
return {
|
|
agreed: false,
|
|
showProtocolDialog: false,
|
|
protocolDialogTitle: '',
|
|
protocolDialogContent: '',
|
|
configData: [], // 存储 getConfig 返回的 result
|
|
needPhone: false // 控制是否需要手机号授权
|
|
}
|
|
},
|
|
computed: {
|
|
logoImage() {
|
|
const item = this.configData.find(i => i.keyName === 'logo_image')
|
|
return item ? item.keyContent : ''
|
|
},
|
|
logoName() {
|
|
const item = this.configData.find(i => i.keyName === 'logo_name')
|
|
return item ? item.keyContent : ''
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.getConfigData()
|
|
},
|
|
methods: {
|
|
getConfigData() {
|
|
this.$api('getConfig', {}, res => {
|
|
// console.log('Config data response:', JSON.parse(JSON.stringify(res)) )
|
|
if (res && res.success && Array.isArray(res.result)) {
|
|
this.configData = res.result
|
|
console.log('Config data set:', JSON.parse(JSON.stringify(this.configData)) )
|
|
}
|
|
})
|
|
},
|
|
getConfigByKey(key) {
|
|
const item = this.configData.find(i => i.keyName === key)
|
|
return item ? item.keyContent : ''
|
|
},
|
|
handleLogin() {
|
|
if (!this.agreed) {
|
|
uni.showToast({
|
|
title: '请阅读并勾选服务协议和隐私声明',
|
|
icon: 'none'
|
|
});
|
|
return;
|
|
}
|
|
|
|
this.$refs.privacyPopup.open()
|
|
// uni.showLoading({
|
|
// title: '登录中...'
|
|
// });
|
|
// setTimeout(() => {
|
|
// uni.hideLoading();
|
|
// uni.showToast({
|
|
// title: '登录成功'
|
|
// });
|
|
// uni.reLaunch({
|
|
// url: '/pages/index/index'
|
|
// });
|
|
// }, 1500);
|
|
},
|
|
handleCancel() {
|
|
uni.navigateBack();
|
|
},
|
|
|
|
handleAgreementChange(e) {
|
|
// console.log(this.agreed);
|
|
// this.agreed = e.detail.value.length > 0;
|
|
if(this.agreed){
|
|
this.agreed = false;
|
|
}else{
|
|
this.agreed = true;
|
|
}
|
|
},
|
|
|
|
openProtocol(type) {
|
|
console.log('Opening protocol:', type)
|
|
console.log('Current configData:', this.configData)
|
|
let protocol = null
|
|
if (type === 'privacy') {
|
|
protocol = this.configData.find(i => i.keyName === 'user_ys')
|
|
} else if (type === 'service') {
|
|
protocol = this.configData.find(i => i.keyName === 'user_xy')
|
|
}
|
|
console.log('Found protocol:', protocol)
|
|
this.protocolDialogTitle = protocol ? protocol.keyValue : (type === 'privacy' ? '隐私政策' : '服务协议')
|
|
this.protocolDialogContent = protocol && protocol.keyContent ? protocol.keyContent :
|
|
(type === 'privacy' ?
|
|
'<div style="padding: 20rpx;">暂无隐私政策内容</div>' :
|
|
'<div style="padding: 20rpx;">暂无服务协议内容</div>')
|
|
this.showProtocolDialog = true
|
|
console.log('Dialog state:', {
|
|
title: this.protocolDialogTitle,
|
|
content: this.protocolDialogContent,
|
|
show: this.showProtocolDialog
|
|
})
|
|
},
|
|
|
|
goToAdminLogin() {
|
|
uni.navigateTo({
|
|
url: '/pages/component/admin_login'
|
|
});
|
|
},
|
|
|
|
// 同意隐私政策
|
|
handleAgreePrivacy() {
|
|
uni.showLoading({
|
|
title: '登录中...'
|
|
})
|
|
// 执行登录逻辑...
|
|
|
|
let self = this
|
|
|
|
wx.login({
|
|
success (res) {
|
|
// console.log(res.code,'code')
|
|
if (res.code) {
|
|
self.$api('wxLogin', {code : res.code}, res => {
|
|
console.log(res,'login')
|
|
if (res.code == 200) {
|
|
uni.hideLoading();
|
|
// console.log(res)
|
|
uni.setStorageSync('token',res.result.token);
|
|
uni.setStorageSync('openid',res.result.userInfo && res.result.userInfo.appletOpenid);
|
|
getApp().globalData.login_status = true;
|
|
if (res.result.userInfo) {
|
|
const userInfo = res.result.userInfo;
|
|
if (!userInfo.avatarUrl || !userInfo.nickName) {
|
|
uni.navigateTo({
|
|
url: '/pages/wxUserInfo'
|
|
});
|
|
} else {
|
|
uni.reLaunch({
|
|
url: '/pages/component/home'
|
|
});
|
|
}
|
|
} else {
|
|
uni.navigateTo({
|
|
url: '/pages/wxUserInfo'
|
|
});
|
|
}
|
|
}
|
|
})
|
|
} else {
|
|
uni.hideLoading();
|
|
console.log('登录失败！' + res.errMsg)
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
// 拒绝隐私政策
|
|
handleRejectPrivacy() {
|
|
uni.reLaunch({ url: '/pages/component/home' });
|
|
},
|
|
|
|
// 打开协议页面
|
|
openProtocolPage(type) {
|
|
this.openProtocol(type)
|
|
},
|
|
handleProtocolAgree() {
|
|
this.showProtocolDialog = false
|
|
this.agreed = true
|
|
// 你可以在这里添加同意后的其他逻辑
|
|
},
|
|
handleProtocolReject() {
|
|
this.showProtocolDialog = false
|
|
if (this.agreed) {
|
|
this.agreed = false
|
|
}
|
|
// 你可以在这里添加拒绝后的其他逻辑
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped scss>
|
|
view {
|
|
padding-bottom: 0 !important;
|
|
}
|
|
|
|
.login-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
background-color: #f9ece5;
|
|
padding: 0 40rpx;
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
|
|
.app-header {
|
|
margin-top: 220rpx;
|
|
margin-bottom: 180rpx;
|
|
text-align: center;
|
|
height: 30%;
|
|
}
|
|
image{
|
|
width: 50%;
|
|
height: 50%;
|
|
}
|
|
|
|
.app-title {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-family: Alimama ShuHeiTi;
|
|
font-weight: 700;
|
|
font-size: 28px;
|
|
line-height: 140%;
|
|
letter-spacing: 0%;
|
|
/* background-color: rgba(254, 208, 116, 0.8); */
|
|
border-radius: 3em;
|
|
letter-spacing: 0.2em;
|
|
/* text-shadow: 1px 2px #f7b737; */
|
|
}
|
|
|
|
.app-subtitle {
|
|
font-size: 28rpx;
|
|
color: #fef6e3;
|
|
margin-top: 1rem;
|
|
letter-spacing: 0.11em;
|
|
}
|
|
|
|
.login-actions {
|
|
/* height: 30%; */
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #f9ece5;
|
|
border-radius: 30rpx;
|
|
}
|
|
|
|
.login-btn, .cancel-btn {
|
|
width: 82%;
|
|
height: 90rpx;
|
|
line-height: 90rpx;
|
|
border-radius: 45rpx;
|
|
font-size: 32rpx;
|
|
margin-bottom: 20rpx;
|
|
border: none;
|
|
}
|
|
|
|
.login-btn {
|
|
background-color: #f79400;
|
|
color: white;
|
|
}
|
|
|
|
.cancel-btn {
|
|
background-color: rgba(255, 253, 249);
|
|
color: #f7990c;
|
|
border: 1px solid rgba(249, 178, 71);
|
|
}
|
|
|
|
.agreement {
|
|
/* margin-top: 40rpx; */
|
|
font-size: 24rpx;
|
|
color: #333;
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
}
|
|
|
|
.radio-group {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
/* 自定义圆形checkbox样式 */
|
|
.custom-radio {
|
|
/* border-radius: 50%; */
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
transform: scale(0.7);
|
|
margin-right: 8rpx;
|
|
}
|
|
|
|
/* 覆盖uniapp默认checkbox样式 */
|
|
.custom-radio .wx-checkbox-input,
|
|
.custom-radio .uni-checkbox-input {
|
|
border-radius: 50% !important;
|
|
width: 32rpx !important;
|
|
height: 32rpx !important;
|
|
}
|
|
|
|
.custom-radio .wx-checkbox-input.wx-checkbox-input-checked,
|
|
.custom-radio .uni-checkbox-input.uni-checkbox-input-checked {
|
|
background-color: #07C160 !important;
|
|
border-color: #07C160 !important;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
/* .radio-label {
|
|
display: flex;
|
|
align-items: center;
|
|
} */
|
|
|
|
|
|
|
|
.agreement-text {
|
|
margin: 0 4rpx;
|
|
}
|
|
|
|
.protocol-link {
|
|
color: #fabe65;
|
|
}
|
|
|
|
.admin-login {
|
|
text-align: center;
|
|
color: #fffffe;
|
|
font-size: 28rpx;
|
|
letter-spacing: 0.15em;
|
|
}
|
|
|
|
</style>
|