fnvtk/cunkebao_v3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

门店端优化

Browse Source
This commit is contained in:
wong
2025-11-03 14:07:15 +08:00
parent 367a76a54f
commit 469ab4a085
10 changed files with 1326 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

558
Store_vue/pages/login/index.vue
View File

@@ -1,80 +1,214 @@
<template>
<view class="login-page">
<!-- 页面顶部导航 -->
<view class="page-header">
<view class="back-btn"></view>
<view class="page-title">登录/注册</view>
<!-- #ifdef APP-PLUS -->
<!-- APP端：返回按钮（仅显示登录表单时） -->
<view class="back-button" v-if="showLoginForm" @tap="handleBack">
<u-icon name="arrow-left" size="24" color="#333"></u-icon>
</view>
<!-- 内容区域 -->
<view class="content-area">
<!-- 登录标题 -->
<view class="login-title">账号密码登录</view>
<!-- 账号输入 -->
<view class="form-item">
<view class="input-item">
<u-input
v-model="account"
placeholder="请输入账号"
class="input-field"
border="0"
prefixIcon="account"
/>
</view>
<!-- APP端：主界面 -->
<view class="main-screen" v-if="!showLoginForm">
<!-- Logo 区域 -->
<view class="logo-section">
<image class="logo-image" src="/static/logo.png" mode="aspectFit"></image>
<text class="app-title">AI数智员工</text>
</view>
<!-- 密码输入 -->
<view class="form-item">
<view class="input-item">
<u-input
:type="passwordVisible ? 'text' : 'password'"
v-model="password"
placeholder="请输入密码"
class="input-field"
border="0"
prefixIcon="lock"
/>
<view class="password-icon" @tap="passwordVisible = !passwordVisible">
<u-icon :name="passwordVisible ? 'eye' : 'eye-off'" size="20" color="#999"></u-icon>
</view>
</view>
<!-- 主按钮区域 -->
<view class="main-buttons">
<!-- 免密登录按钮 -->
<u-button
text="免密登录"
type="primary"
shape="circle"
@click="showQuickLogin"
:custom-style="{width: '100%', marginBottom: '30rpx', backgroundColor: '#4A90E2'}"
></u-button>
<!-- 账号登录按钮 -->
<u-button
text="账号登录"
shape="circle"
:hairline="false"
@click="showAccountLogin"
:custom-style="{width: '100%', backgroundColor: '#f5f5f5', color: '#666', border: 'none'}"
></u-button>
</view>
<!-- 用户协议 -->
<view class="agreement-container">
<checkbox-group @change="checkboxChange">
<checkbox :value="agreement" :checked="agreement" class="agreement-checkbox" color="#4080ff" />
<checkbox-group @change="checkboxChange">
<checkbox :value="agreement" :checked="agreement" class="agreement-checkbox" color="#4A90E2" />
</checkbox-group>
<text class="agreement-text">已阅读并同意</text>
<text class="agreement-link" @tap="openAgreement('user')">用户协议</text>
<text class="agreement-text">阅读并同意</text>
<text class="agreement-link" @tap="openAgreement('user')">《用户协议》</text>
<text class="agreement-text">与</text>
<text class="agreement-link" @tap="openAgreement('privacy')">隐私政策</text>
</view>
<!-- 登录按钮 -->
<view
class="login-btn"
:class="{ active: canLogin }"
@tap="handleLogin"
>
登录
</view>
<!-- 免密登录按钮 -->
<view
class="no-password-login-btn"
@tap="handleNoPasswordLogin"
>
免密登录
</view>
<!-- 联系我们 -->
<view class="contact-us" @tap="contactUs">
联系我们
<text class="agreement-link" @tap="openAgreement('privacy')">《隐私权限》</text>
</view>
</view>
<!-- APP端：登录表单 -->
<view v-if="showLoginForm" class="login-form">
<!-- Logo 区域 -->
<view class="logo-section-form">
<image class="logo-image-form" src="/static/logo.png" mode="aspectFit"></image>
</view>
<text class="form-title">{{ formTitle }}</text>
<!-- 账号登录表单 -->
<view v-if="loginMode === 'account'" class="form-content">
<!-- 账号输入 -->
<view class="input-group">
<text class="input-label">账号</text>
<u-input
v-model="account"
:clearable="true"
placeholder="请输入账号"
:border="true"
></u-input>
</view>
<!-- 密码输入 -->
<view class="input-group">
<text class="input-label">密码</text>
<u-input
v-model="password"
type="password"
:password="!passwordVisible"
placeholder="请输入密码"
:border="true"
>
<template slot="suffix">
<u-icon
:name="passwordVisible ? 'eye-fill' : 'eye-off'"
size="22"
color="#c0c4cc"
@click="passwordVisible = !passwordVisible"
></u-icon>
</template>
</u-input>
</view>
<!-- 登录按钮 -->
<u-button
text="登录"
type="primary"
shape="circle"
:disabled="!canLogin"
@click="handleLogin"
:custom-style="{marginTop: '60rpx', width: '100%', backgroundColor: '#4A90E2'}"
></u-button>
<!-- 用户协议 -->
<view class="agreement-container form-agreement">
<checkbox-group @change="checkboxChange">
<checkbox :value="agreement" :checked="agreement" class="agreement-checkbox" color="#4A90E2" />
</checkbox-group>
<text class="agreement-text">阅读并同意</text>
<text class="agreement-link" @tap="openAgreement('user')">《用户协议》</text>
<text class="agreement-text">与</text>
<text class="agreement-link" @tap="openAgreement('privacy')">《隐私权限》</text>
</view>
</view>
<!-- 免密登录表单 -->
<view v-else-if="loginMode === 'quick'" class="form-content">
<!-- 设备ID显示（仅用于调试） -->
<view class="input-group">
<text class="input-label">设备ID</text>
<u-input
v-model="deviceId"
:disabled="true"
placeholder="自动获取设备ID"
:border="true"
></u-input>
</view>
<!-- 登录按钮 -->
<u-button
text="登录"
type="primary"
shape="circle"
:disabled="!deviceId"
@click="handleNoPasswordLogin"
:custom-style="{marginTop: '60rpx', width: '100%', backgroundColor: '#4A90E2'}"
></u-button>
</view>
</view>
<!-- #endif -->
<!-- #ifndef APP-PLUS -->
<!-- 非APP端：直接显示账号登录表单 -->
<view class="login-form h5-login">
<!-- Logo 区域 -->
<view class="logo-section-form">
<image class="logo-image-form" src="/static/logo.png" mode="aspectFit"></image>
</view>
<text class="form-title">{{ formTitle }}</text>
<view class="form-content">
<!-- 账号输入 -->
<view class="input-group">
<text class="input-label">账号</text>
<u-input
v-model="account"
:clearable="true"
placeholder="请输入账号"
:border="true"
></u-input>
</view>
<!-- 密码输入 -->
<view class="input-group">
<text class="input-label">密码</text>
<u-input
v-model="password"
type="password"
:password="!passwordVisible"
placeholder="请输入密码"
:border="true"
>
<template slot="suffix">
<u-icon
:name="passwordVisible ? 'eye-fill' : 'eye-off'"
size="22"
color="#c0c4cc"
@click="passwordVisible = !passwordVisible"
></u-icon>
</template>
</u-input>
</view>
<!-- 登录按钮 -->
<u-button
text="登录"
type="primary"
shape="circle"
:disabled="!canLogin"
@click="handleLogin"
:custom-style="{marginTop: '60rpx', width: '100%', backgroundColor: '#4A90E2'}"
></u-button>
<!-- 用户协议 -->
<view class="agreement-container form-agreement">
<checkbox-group @change="checkboxChange">
<checkbox :value="agreement" :checked="agreement" class="agreement-checkbox" color="#4A90E2" />
</checkbox-group>
<text class="agreement-text">阅读并同意</text>
<text class="agreement-link" @tap="openAgreement('user')">《用户协议》</text>
<text class="agreement-text">与</text>
<text class="agreement-link" @tap="openAgreement('privacy')">《隐私权限》</text>
</view>
</view>
</view>
<!-- #endif -->
</view>
</template>
<script>
@@ -85,11 +219,19 @@
export default {
data() {
return {
// #ifdef APP-PLUS
showLoginForm: false, // APP端：是否显示登录表单
loginMode: '', // APP端：'account' 或 'quick'
// #endif
// #ifndef APP-PLUS
showLoginForm: true, // 非APP端：始终显示登录表单
loginMode: 'account', // 非APP端：始终为账号登录
// #endif
account: '', // 账号
password: '', // 密码
passwordVisible: false, // 密码是否可见
agreement: true, // 是否同意协议
deviceId: '' // 设备ID
agreement: true, // 是否同意协议
deviceId: '' // 设备ID
}
},
// 页面加载时检查token
@@ -102,15 +244,65 @@
this.checkTokenStatus();
},
computed: {
formTitle() {
// #ifdef APP-PLUS
return this.loginMode === 'account' ? '账号登录' : '免密登录';
// #endif
// #ifndef APP-PLUS
return '账号登录';
// #endif
},
// 验证是否可以登录
canLogin() {
return this.account &&
this.password &&
this.password.length >= 6 &&
this.agreement;
// #ifdef APP-PLUS
if (this.loginMode === 'account') {
return this.account && this.password && this.password.length >= 6 && this.agreement;
} else if (this.loginMode === 'quick') {
return this.deviceId && this.agreement;
}
return false;
// #endif
// #ifndef APP-PLUS
return this.account && this.password && this.password.length >= 6 && this.agreement;
// #endif
}
},
methods: {
// 返回主界面
handleBack() {
this.showLoginForm = false;
this.loginMode = '';
this.account = '';
this.password = '';
},
// 免密登录 - 直接登录，不跳转页面
async showQuickLogin() {
if (!this.agreement) {
uni.showToast({
title: '请先同意用户协议和隐私政策',
icon: 'none'
});
return;
}
// 直接调用免密登录
await this.handleNoPasswordLogin();
},
// 显示账号登录表单
showAccountLogin() {
if (!this.agreement) {
uni.showToast({
title: '请先同意用户协议和隐私政策',
icon: 'none'
});
return;
}
this.loginMode = 'account';
this.showLoginForm = true;
},
// 获取设备ID（仅APP端）
getDeviceId() {
// #ifdef APP-PLUS
@@ -135,10 +327,10 @@
}
// #endif
// #ifdef H5
// H5端不传设备ID
// #ifndef APP-PLUS
// 非APP端不传设备ID
this.deviceId = '';
console.log('H5端不传设备ID');
console.log('非APP端不传设备ID');
// #endif
},
@@ -150,17 +342,11 @@
}
},
// 返回上一页
goBack() {
uni.navigateBack();
},
// 用户协议复选框变化
checkboxChange(){
this.agreement = !this.agreement
},
// 处理登录
async handleLogin() {
// 检查是否同意协议
@@ -211,8 +397,8 @@
// #ifdef APP-PLUS
console.log('APP端登录 - 设备ID:', this.deviceId);
// #endif
// #ifdef H5
console.log('H5端登录 - 不传设备ID');
// #ifndef APP-PLUS
console.log('非APP端登录 - 不传设备ID');
// #endif
if (response.code === 200) { // 成功code是200
@@ -284,7 +470,7 @@
uni.setStorageSync('token_expired', token_expired);
uni.showToast({
title: '免密登录成功',
title: '登录成功',
icon: 'success'
});
@@ -313,19 +499,12 @@
// 打开协议
openAgreement(type) {
// TODO: 跳转到对应的协议页面
const title = type === 'user' ? '用户协议' : '隐私权限';
uni.showToast({
title: `打开${type === 'user' ? '用户协议' : '隐私政策'}`,
title: `打开${title}`,
icon: 'none'
});
},
// 联系我们
contactUs() {
uni.showToast({
title: '联系方式: zhiqun@qq.com',
icon: 'none',
duration: 3000
});
}
}
}
@@ -334,132 +513,153 @@
<style lang="scss">
.login-page {
min-height: 100vh;
background-color: #fff;
background-color: #ffffff;
display: flex;
flex-direction: column;
padding-top: 40px; /* 为状态栏预留空间 */
}
.page-header {
display: flex;
align-items: center;
position: relative;
padding: 10px 0;
margin-bottom: 10px;
}
.back-btn {
/* 返回按钮 */
.back-button {
position: absolute;
left: 15px;
width: 30px;
height: 30px;
display: flex;
align-items: center;
z-index: 2;
top: 40rpx;
left: 30rpx;
z-index: 100;
padding: 10rpx;
}
.page-title {
text-align: center;
font-size: 18px;
font-weight: bold;
/* 主界面 */
.main-screen {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
}
.content-area {
flex: 1;
padding: 0 30px;
/* Logo 区域 - 主界面 */
.logo-section {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 120rpx;
}
.login-title {
font-size: 24px;
.logo-image {
width: 200rpx;
height: 200rpx;
border-radius: 40rpx;
margin-bottom: 40rpx;
}
.app-title {
font-size: 40rpx;
font-weight: bold;
color: #333;
margin: 30px 0 40px;
text-align: center;
}
.input-item {
/* Logo 区域 - 登录表单 */
.logo-section-form {
display: flex;
justify-content: center;
align-items: center;
border-bottom: 1px solid #eee;
padding: 12px 0;
min-height: 50px;
position: relative;
margin-bottom: 60rpx;
}
.input-field {
flex: 1;
height: 24px;
font-size: 15px;
.logo-image-form {
width: 200rpx;
height: 200rpx;
border-radius: 40rpx;
}
.password-icon {
position: absolute;
right: 0;
padding: 0 5px;
height: 100%;
/* 主按钮区域 */
.main-buttons {
padding: 0 60rpx;
display: flex;
align-items: center;
flex-direction: column;
margin-bottom: 40rpx;
}
/* 登录表单 */
.login-form {
padding: 60rpx;
width: 100%;
min-height: 100vh;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
}
/* 表单内容区域 */
.form-content {
display: flex;
flex-direction: column;
}
/* H5端登录表单 */
.h5-login {
display: flex;
flex-direction: column;
justify-content: center;
padding: 60rpx;
}
.form-title {
font-size: 44rpx;
font-weight: bold;
color: #333;
margin-bottom: 60rpx;
display: block;
}
.input-group {
margin-bottom: 40rpx;
}
.input-label {
display: block;
font-size: 28rpx;
color: #333;
margin-bottom: 15rpx;
}
/* 用户协议 */
.agreement-container {
display: flex;
align-items: center;
margin: 15px 0;
justify-content: center;
padding: 40rpx 0 60rpx;
}
/* 表单内的用户协议 */
.form-agreement {
justify-content: flex-start;
padding: 30rpx 0 0;
margin-top: 40rpx;
}
.h5-agreement {
justify-content: flex-start;
padding: 30rpx 0;
margin-top: 0;
}
.agreement-checkbox {
transform: scale(0.8);
margin-right: 5px;
margin-right: 5rpx;
}
.agreement-text {
font-size: 13px;
color: #666;
font-size: 24rpx;
color: #999;
margin-left: 10rpx;
}
.agreement-link {
font-size: 13px;
color: #4080ff;
font-size: 24rpx;
color: #4A90E2;
margin: 0 4rpx;
}
.login-btn {
height: 44px;
line-height: 44px;
text-align: center;
background-color: #dddddd;
color: #ffffff;
border-radius: 22px;
margin: 20px 0;
font-size: 16px;
transition: background-color 0.3s;
}
.login-btn.active {
background-color: #4080ff;
}
.no-password-login-btn {
height: 44px;
line-height: 44px;
text-align: center;
background-color: #fff;
color: #4080ff;
border: 1px solid #4080ff;
border-radius: 22px;
margin: 10px 0 20px;
font-size: 16px;
transition: all 0.3s;
}
.no-password-login-btn:active {
background-color: #f0f5ff;
}
.contact-us {
text-align: center;
color: #999;
font-size: 14px;
margin-top: 40px;
}
</style>
</style>