Augcl
/
recycle-front
generated from hly/uniapp-shop-templates
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

1

master
前端-胡立永 4 weeks ago
parent
d767f1647a
commit
3da9073988
1 changed files with 343 additions and 357 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +343
    -357
      pages/index/index.vue

+ 343
- 357
pages/index/index.vue View File

@ -1,380 +1,366 @@
<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>
<view class="login-container">
<!-- 应用标题和副标题 -->
<view class="app-header">
<image :src="logoImage"
mode="aspectFill"
style="width: 170rpx; height: 170rpx; 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;
console.log(userInfo,'userInfo')
if (!userInfo.headImage || !userInfo.nickName) {
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;
console.log(userInfo, 'userInfo')
if (!userInfo.headImage || !userInfo.nickName) {
uni.navigateTo({
url: '/pages/wxUserInfo'
});
} else {
uni.reLaunch({
url: '/pages/component/home'
});
}
} else {
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
}
// 你可以在这里添加拒绝后的其他逻辑
}
}
}
})
} 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;
}
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;
}
.login-container {
display: flex;
flex-direction: column;
height: 100vh;
background-color: #f9ece5;
padding: 0 40rpx;
padding-bottom: env(safe-area-inset-bottom);
}
.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 {
.app-header {
margin-top: 320rpx;
margin-bottom: 280rpx;
text-align: center;
}
.app-title {
display: flex;
justify-content: center;
align-items: center;
font-family: Alimama ShuHeiTi;
font-weight: 700;
font-size: 28px;
margin-top: 20rpx;
}
.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;
}
.agreement-text {
margin: 0 4rpx;
}
.admin-login {
text-align: center;
color: #fffffe;
font-size: 28rpx;
letter-spacing: 0.15em;
}
.protocol-link {
color: #fabe65;
}
.admin-login {
text-align: center;
color: #fffffe;
font-size: 28rpx;
letter-spacing: 0.15em;
}
</style>

Write Preview
Loading…
Cancel
Save