登录流程改版

This commit is contained in:
FengHui
2026-04-10 01:01:03 +08:00
parent 9b2cdecc16
commit 8bfc1dc683
12 changed files with 1219 additions and 50 deletions

View File

@@ -6,8 +6,8 @@
*/
export default {
// baseUrl: 'http://39.98.44.136:8080', // 测试
baseUrl: 'https://www.xjksly.cn/api/ks', // 正式环境
// baseUrl: 'http://ks.zhaopinzao8dian.com/api/ks', // 测试
// baseUrl: 'https://www.xjksly.cn/api/ks', // 正式环境
baseUrl: 'http://ks.zhaopinzao8dian.com/api/ks', // 测试
// LCBaseUrl:'http://10.110.145.145:9100',//内网端口
// LCBaseUrlInner:'http://10.110.145.145:10100',//招聘、培训、帮扶

View File

@@ -3,8 +3,7 @@
<!-- 自定义tabbar -->
<CustomTabBar :currentPage="2" />
<!-- 微信授权登录弹窗 -->
<WxAuthLogin ref="wxAuthLoginRef" @success="handleLoginSuccess"></WxAuthLogin>
<!-- 抽屉遮罩层 -->
<view v-if="isDrawerOpen" class="overlay" @click="toggleDrawer"></view>
@@ -89,7 +88,7 @@ import useUserStore from '@/stores/useUserStore';
import { tabbarManager } from '@/utils/tabbarManager';
import aiPaging from './components/ai-paging.vue';
import { storeToRefs } from 'pinia';
import WxAuthLogin from '@/components/WxAuthLogin/WxAuthLogin.vue';
const { isTyping, tabeList, chatSessionID } = storeToRefs(useChatGroupDBStore());
const { userInfo } = storeToRefs(useUserStore());
const isDrawerOpen = ref(false);
@@ -97,7 +96,7 @@ const scrollIntoView = ref(false);
const searchText = ref('');
const paging = ref(null);
const wxAuthLoginRef = ref(null);
// 实时过滤
const filteredList = computed(() => {
@@ -123,7 +122,7 @@ onShow(() => {
onMounted(() => {
// 监听退出登录事件,显示微信登录弹窗
uni.$on('showLoginModal', () => {
wxAuthLoginRef.value?.open();
uni.navigateTo({ url: '/pages/login/wx-login' });
});
});

View File

@@ -400,11 +400,7 @@
<!-- 筛选 -->
<select-filter ref="selectFilterModel"></select-filter>
<!-- 微信授权登录弹窗 -->
<WxAuthLogin
ref="wxAuthLoginRef"
@success="handleLoginSuccess"
></WxAuthLogin>
<!-- <view class="maskFristEntry" v-if="maskFristEntry">
<view class="entry-content">
@@ -531,7 +527,7 @@ import {
} from "@/stores/useRecommedIndexedDBStore.js";
import { useScrollDirection } from "@/hook/useScrollDirection";
import { useColumnCount } from "@/hook/useColumnCount";
import WxAuthLogin from "@/components/WxAuthLogin/WxAuthLogin.vue";
import IconfontIcon from "@/components/IconfontIcon/IconfontIcon.vue";
// 企业卡片组件已内联到模板中
// 滚动状态管理
@@ -584,7 +580,7 @@ const loadmoreRef = ref(null);
const conditionSearch = ref({});
const waterfallcolumn = ref(2);
const maskFristEntry = ref(false);
const wxAuthLoginRef = ref(null);
const state = reactive({
tabIndex: "all",
});
@@ -684,7 +680,7 @@ onMounted(() => {
// 监听退出登录事件,显示微信登录弹窗
uni.$on("showLoginModal", () => {
wxAuthLoginRef.value?.open();
uni.navigateTo({ url: '/pages/login/wx-login' });
});
});
@@ -712,8 +708,8 @@ watch(
const checkLogin = () => {
const tokenValue = uni.getStorageSync("token") || "";
if (!tokenValue || !hasLogin.value) {
// 未登录,打开授权弹窗
wxAuthLoginRef.value?.open();
// 未登录,跳转到登录页面
uni.navigateTo({ url: '/pages/login/wx-login' });
return false;
}
return true;

View File

@@ -76,6 +76,20 @@
"navigationStyle": "custom"
}
},
{
"path": "pages/login/wx-login",
"style": {
"navigationBarTitleText": "登录",
"navigationStyle": "custom"
}
},
{
"path": "pages/login/sms-verify",
"style": {
"navigationBarTitleText": "短信验证",
"navigationStyle": "custom"
}
},
{
"path": "pages/resume-guide/resume-guide",
"style": {

View File

@@ -161,7 +161,7 @@
import {
tabbarManager
} from "@/utils/tabbarManager";
import WxAuthLogin from "@/components/WxAuthLogin/WxAuthLogin.vue";
import config from "@/config.js";
import CryptoJS from 'crypto-js'
const {

View File

@@ -486,8 +486,7 @@
@update:show="(value) => showNewFilter = value"
/>
<!-- 微信授权登录弹窗 -->
<WxAuthLogin ref="wxAuthLoginRef" @success="handleLoginSuccess" />
<!-- <view class="maskFristEntry" v-if="maskFristEntry">
<view class="entry-content">
@@ -612,7 +611,7 @@ import newFilterPage from '@/components/new-filter-page/new-filter-page.vue';
import { useRecommedIndexedDBStore, jobRecommender } from '@/stores/useRecommedIndexedDBStore.js';
import { useScrollDirection } from '@/hook/useScrollDirection';
import { useColumnCount } from '@/hook/useColumnCount';
import WxAuthLogin from '@/components/WxAuthLogin/WxAuthLogin.vue';
import IconfontIcon from '@/components/IconfontIcon/IconfontIcon.vue'
// 企业卡片组件已内联到模板中
// 滚动状态管理
@@ -703,7 +702,7 @@ const loadmoreRef = ref(null);
const conditionSearch = ref({});
const waterfallcolumn = ref(2);
const maskFristEntry = ref(false);
const wxAuthLoginRef = ref(null);
const state = reactive({
tabIndex: 'all',
});
@@ -818,7 +817,7 @@ onMounted(() => {
getCompanyInfo();
// pageNull.value = 0;
uni.$on('showLoginModal', () => {
wxAuthLoginRef.value?.open();
uni.navigateTo({ url: '/pages/login/wx-login' });
pageNull.value = 0;
});
});
@@ -832,7 +831,7 @@ onMounted(() => {
// 绑定新的监听
uni.$on('showLoginModal', () => {
console.log('收到showLoginModal事件打开登录弹窗');
wxAuthLoginRef.value?.open();
uni.navigateTo({ url: '/pages/login/wx-login' });
pageNull.value = 0;
});

593
pages/login/sms-verify.vue Normal file
View File

@@ -0,0 +1,593 @@
<template>
<view class="sms-verify-page">
<!-- 顶部导航栏 -->
<view class="nav-bar">
<view class="nav-back" @click="goBack">
<uni-icons type="arrowleft" size="24" color="#333"></uni-icons>
</view>
<view class="nav-title">短信验证</view>
<view class="nav-placeholder"></view>
</view>
<!-- 页面内容 -->
<view class="page-content">
<!-- 安全提示 -->
<view class="security-tip">
<view class="tip-icon">
<uni-icons type="auth-filled" size="32" color="#256BFA"></uni-icons>
</view>
<view class="tip-text">为了您的账户安全需要您进行验证</view>
</view>
<!-- 手机号显示 -->
<view class="phone-display">
<view class="phone-label">验证码将发送至</view>
<view class="phone-number">{{ formattedPhone }}</view>
</view>
<!-- 验证码输入区域 -->
<view class="sms-input-area">
<view class="input-label">请输入6位数字验证码</view>
<view class="single-input-container">
<input
ref="smsInput"
class="single-input"
type="tel"
inputmode="numeric"
pattern="[0-9]*"
autocomplete="one-time-code"
maxlength="6"
:value="smsCode"
@input="onCodeInput"
@paste="onPaste"
placeholder="请输入验证码"
:focus="autoFocus"
/>
</view>
</view>
<!-- 倒计时和重发 -->
<view class="countdown-section">
<view v-if="countdown > 0" class="countdown-text">
{{ countdown }}秒后重新获取
</view>
<view v-else class="resend-text" @click="resendSms">
重新获取验证码
</view>
<view class="paste-section">
<view class="paste-text" @click="pasteFromClipboard">
<uni-icons type="clipboard" size="16" color="#256BFA"></uni-icons>
<text>粘贴验证码</text>
</view>
</view>
</view>
<!-- 提交按钮 -->
<button class="submit-btn" :disabled="!canSubmit" @click="submitVerification">
<text v-if="!loading">确认</text>
<view v-else class="loading-spinner"></view>
</button>
</view>
</view>
</template>
<script setup>
import { ref, inject, computed, onMounted, onUnmounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
const { $api } = inject('globalFunction');
// 从页面参数获取数据
const phone = ref('');
const openid = ref('');
const unionid = ref('');
const userType = ref('');
const orgType = ref('');
// 验证码相关
const smsCode = ref(''); // 单个字符串验证码
const smsInput = ref(null); // 输入框引用
const countdown = ref(60); // 倒计时
const timer = ref(null);
const loading = ref(false);
const autoFocus = ref(true); // 自动聚焦
// 格式化手机号:只显示前三位和后四位,中间用星号代替
const formattedPhone = computed(() => {
console.log('formattedPhone computed called, phone.value:', phone.value);
if (!phone.value || phone.value.trim() === '') {
console.log('手机号为空,显示未知号码');
return '未知号码';
}
// 清理手机号,移除空格和特殊字符
const cleanPhone = phone.value.replace(/\D/g, '');
if (cleanPhone.length < 11) {
console.log('手机号长度不足11位显示原始值', phone.value);
return phone.value;
}
const prefix = cleanPhone.substring(0, 3);
const suffix = cleanPhone.substring(cleanPhone.length - 4);
const formatted = `${prefix}****${suffix}`;
console.log('格式化后的手机号:', formatted);
return formatted;
});
// 是否可以提交
const canSubmit = computed(() => {
const can = smsCode.value.length === 6 && !loading.value;
console.log('canSubmit计算属性调用', {
smsCodeLength: smsCode.value.length,
loading: loading.value,
canSubmit: can
});
return can;
});
// 页面加载时获取参数
onLoad(async (options) => {
console.log('短信验证页面参数:', options);
console.log('所有参数键值对:');
Object.keys(options).forEach(key => {
console.log(` ${key}: ${options[key]}`);
});
// 尝试多种可能的手机号字段名(按优先级)
const possiblePhoneFields = [
'phone', 'mobile', 'phoneNumber', 'tel',
'phoneNum', 'userPhone', 'telephone', 'mobilePhone', 'cellphone',
'userTel', 'userMobile', 'contactPhone'
];
let foundPhone = '';
for (const field of possiblePhoneFields) {
if (options[field]) {
foundPhone = options[field];
console.log(`找到手机号字段 "${field}": ${foundPhone}`);
break;
}
}
// 如果没找到尝试从URL参数中解析
if (!foundPhone) {
console.log('未在options中找到手机号字段尝试从当前页面URL解析');
const currentPages = getCurrentPages();
if (currentPages.length > 0) {
const currentPage = currentPages[currentPages.length - 1];
console.log('当前页面对象:', currentPage);
// 尝试从页面路由参数中获取
if (currentPage.$page && currentPage.$page.fullPath) {
const urlParams = new URLSearchParams(currentPage.$page.fullPath.split('?')[1] || '');
for (const field of possiblePhoneFields) {
const value = urlParams.get(field);
if (value) {
foundPhone = value;
console.log(`从URL参数中找到手机号字段 "${field}": ${foundPhone}`);
break;
}
}
}
}
}
phone.value = foundPhone || '';
openid.value = options.openid || '';
unionid.value = options.unionid || '';
userType.value = options.userType || '';
orgType.value = options.orgType || '';
console.log('最终获取到的手机号:', phone.value);
console.log('手机号长度:', phone.value.length);
console.log('formattedPhone值', formattedPhone.value);
// 检查所有可能包含手机号的字段
console.log('所有可能包含手机号的字段值:');
possiblePhoneFields.forEach(field => {
if (options[field]) {
console.log(` ${field}: ${options[field]}`);
}
});
// 如果手机号仍然为空,显示错误信息
if (!phone.value) {
console.error('无法获取手机号,请检查参数传递');
uni.showToast({ title: '无法获取手机号,请返回重试', icon: 'none' });
}
// 开始倒计时
startCountdown();
// 自动聚焦到输入框
setTimeout(() => {
if (smsInput.value && typeof smsInput.value.focus === 'function') {
smsInput.value.focus();
}
}, 300);
});
// 开始倒计时
const startCountdown = () => {
clearInterval(timer.value);
countdown.value = 60;
timer.value = setInterval(() => {
if (countdown.value > 0) {
countdown.value--;
} else {
clearInterval(timer.value);
}
}, 1000);
};
// 重发验证码
const resendSms = async () => {
if (countdown.value > 0) return;
// 调用重新发送验证码接口(如果需要)
uni.showLoading({ title: '发送中...' });
try {
// 假设有一个重新发送验证码的接口
// await $api.createRequest('/app/resendSms', { phone: phone.value }, 'post');
uni.hideLoading();
uni.showToast({ title: '验证码已发送', icon: 'success' });
startCountdown();
} catch (error) {
uni.hideLoading();
uni.showToast({ title: error.msg || '发送失败', icon: 'none' });
}
};
// 验证码输入处理
const onCodeInput = (e) => {
let value = e.detail.value.replace(/\D/g, ''); // 只保留数字
// 限制为6位数字
if (value.length > 6) {
value = value.substring(0, 6);
}
smsCode.value = value;
// 如果输入了6位数字可以自动提交可选
if (value.length === 6) {
// 这里可以添加自动提交逻辑,或者让用户手动点击按钮
console.log('6位验证码已输入完整');
}
};
// 粘贴事件处理
const onPaste = (e) => {
console.log('onPaste event triggered', e);
// #ifdef MP-WEIXIN
// 微信小程序中,使用异步方式获取剪贴板
console.log('MP-WEIXIN: onPaste called, using async clipboard API');
setTimeout(() => {
pasteFromClipboard();
}, 50);
// 尝试阻止默认行为
if (e && e.preventDefault) {
e.preventDefault();
}
if (e && e.stopPropagation) {
e.stopPropagation();
}
// #endif
// #ifndef MP-WEIXIN
// 其他平台H5/App使用标准粘贴处理
console.log('Non-MP-WEIXIN: Standard paste handling');
e.preventDefault();
e.stopPropagation();
let pasteText = '';
if (e.clipboardData && e.clipboardData.getData) {
pasteText = e.clipboardData.getData('text');
console.log('Got pasteText from clipboardData:', pasteText);
}
if (pasteText) {
// 处理粘贴的文本
handlePaste(pasteText);
} else {
// 使用异步方式获取剪贴板
setTimeout(() => {
pasteFromClipboard();
}, 100);
}
return false;
// #endif
};
// 处理粘贴的文本
const handlePaste = (text) => {
// 提取数字
const digits = text.replace(/\D/g, '');
console.log('Extracted digits from paste:', digits);
if (digits.length === 0) {
uni.showToast({ title: '剪贴板中没有找到验证码', icon: 'none' });
return;
}
// 限制为6位数字
const code = digits.substring(0, 6);
smsCode.value = code;
uni.showToast({ title: '已粘贴验证码', icon: 'success' });
// 如果粘贴了6位数字可以自动提交可选
if (code.length === 6) {
console.log('6位验证码已通过粘贴输入完整');
}
};
// 从剪贴板粘贴验证码
const pasteFromClipboard = () => {
console.log('pasteFromClipboard called');
uni.getClipboardData({
success: (res) => {
console.log('getClipboardData success, data:', res.data);
const text = res.data || '';
handlePaste(text);
},
fail: (err) => {
console.error('读取剪贴板失败:', err);
uni.showToast({ title: '读取剪贴板失败', icon: 'none' });
}
});
};
// 提交验证
const submitVerification = async () => {
console.log('submitVerification called, canSubmit:', canSubmit.value, 'loading:', loading.value);
if (!canSubmit.value) {
console.log('不能提交,直接返回');
return;
}
console.log('开始提交验证设置loading为true');
loading.value = true;
const code = smsCode.value;
console.log('提交的验证码:', code, '手机号:', phone.value);
// 检查手机号是否为空
if (!phone.value) {
console.error('手机号为空,无法提交验证');
uni.showToast({ title: '手机号获取失败,请返回重试', icon: 'none' });
loading.value = false;
return;
}
try {
// 调用接口 /app/appLoginPhone
const res = await $api.createRequest('/app/appLoginPhone', {
smsCode: code,
phone: phone.value,
openid: openid.value,
unionid: unionid.value,
userType: userType.value,
orgType: orgType.value
}, 'post');
console.log('短信验证接口返回:', res);
if (res.token) {
// 登录成功存储token
const userStore = useUserStore();
await userStore.loginSetToken(res.token);
// 更新用户类型到缓存
if (res.isCompanyUser !== undefined) {
const userInfo = uni.getStorageSync('userInfo') || {};
userInfo.isCompanyUser = res.isCompanyUser ? 0 : 1;
uni.setStorageSync('userInfo', userInfo);
}
uni.showToast({ title: '登录成功', icon: 'success' });
// 返回上一页或跳转到首页
setTimeout(() => {
uni.navigateBack({ delta: 2 }); // 返回两页(跳过登录页面)
}, 1500);
} else {
uni.showToast({ title: res.msg || '验证失败', icon: 'none' });
}
} catch (error) {
console.error('短信验证失败:', error);
uni.showToast({ title: error.msg || '验证失败,请重试', icon: 'none' });
} finally {
console.log('submitVerification finally块执行设置loading为false');
loading.value = false;
console.log('loading设置完成当前loading值', loading.value);
}
};
// 返回上一页
const goBack = () => {
uni.navigateBack();
};
// 组件销毁时清除定时器
onUnmounted(() => {
clearInterval(timer.value);
});
// 需要导入useUserStore
import useUserStore from '@/stores/useUserStore';
</script>
<style lang="stylus" scoped>
.sms-verify-page
min-height: 100vh
background: #FFFFFF
.nav-bar
display: flex
align-items: center
justify-content: space-between
height: 88rpx
padding: 0 32rpx
border-bottom: 1rpx solid #f5f5f5
.nav-back
width: 60rpx
height: 60rpx
display: flex
align-items: center
justify-content: center
.nav-title
font-size: 32rpx
font-weight: 600
color: #333333
.nav-placeholder
width: 60rpx
.page-content
padding: 60rpx 40rpx 40rpx
.security-tip
display: flex
align-items: center
justify-content: center
margin-bottom: 40rpx
.tip-icon
margin-right: 16rpx
.tip-text
font-size: 28rpx
font-weight: 500
color: #333333
.phone-display
text-align: center
margin-bottom: 60rpx
.phone-label
font-size: 26rpx
color: #666666
margin-bottom: 12rpx
.phone-number
font-size: 36rpx
font-weight: 600
color: #333333
.sms-input-area
margin-bottom: 40rpx
.input-label
font-size: 28rpx
color: #666666
text-align: center
margin-bottom: 20rpx
.single-input-container
margin-bottom: 16rpx
.single-input
width: 100%
height: 100rpx
border: 2rpx solid #E5E5E5
border-radius: 16rpx
font-size: 40rpx
font-weight: 600
color: #333333
background: #F7F8FA
text-align: center
padding: 0 32rpx
box-sizing: border-box
outline: none
caret-color: #256BFA
transition: all 0.3s ease
&:focus
border-color: #256BFA
background: #FFFFFF
box-shadow: 0 4rpx 12rpx rgba(37, 107, 250, 0.15)
&::placeholder
color: #999999
font-size: 32rpx
font-weight: normal
.input-hint
font-size: 24rpx
color: #999999
text-align: center
.countdown-section
text-align: center
margin-bottom: 60rpx
.countdown-text
font-size: 26rpx
color: #999999
.resend-text
font-size: 26rpx
color: #256BFA
text-decoration: underline
cursor: pointer
.paste-section
margin-top: 20rpx
.paste-text
display: inline-flex
align-items: center
justify-content: center
font-size: 26rpx
color: #256BFA
cursor: pointer
text
margin-left: 8rpx
.submit-btn
width: 100%
height: 88rpx
background: linear-gradient(135deg, #256BFA 0%, #1E5BFF 100%)
border-radius: 44rpx
color: #FFFFFF
font-size: 32rpx
font-weight: 500
border: none
display: flex
align-items: center
justify-content: center
&:disabled
opacity: 0.5
cursor: not-allowed
.loading-spinner
width: 40rpx
height: 40rpx
border: 4rpx solid rgba(255, 255, 255, 0.3)
border-radius: 50%
border-top: 4rpx solid #FFFFFF
animation: spin 1s linear infinite
// 按钮重置样式
button::after
border: none
// 动画定义
@keyframes spin
0%
transform: rotate(0deg)
100%
transform: rotate(360deg)
</style>

580
pages/login/wx-login.vue Normal file
View File

@@ -0,0 +1,580 @@
<template>
<view class="wx-login-page">
<!-- 顶部导航栏 -->
<view class="nav-bar">
<view class="nav-back" @click="goBack">
<uni-icons type="arrowleft" size="24" color="#333"></uni-icons>
</view>
<view class="nav-title">登录</view>
<view class="nav-placeholder"></view>
</view>
<!-- 页面内容 -->
<view class="page-content">
<!-- Logo和标题 -->
<view class="auth-header">
<image class="auth-logo" src="@/static/logo2-S.png" mode="aspectFit"></image>
<view class="auth-title">欢迎使用就业服务</view>
</view>
<!-- 角色选择 -->
<view class="role-select">
<view class="role-title">请选择您的角色</view>
<view class="role-options">
<view
class="role-item"
:class="{ active: userType === 1 }"
@click="selectRole(1)"
>
<view class="role-icon">
<uni-icons type="person" size="32" :color="userType === 1 ? '#256BFA' : '#999'"></uni-icons>
</view>
<view class="role-text">个人</view>
</view>
<view
class="role-item"
:class="{ active: userType === 0 }"
@click="selectRole(0)"
>
<view class="role-icon">
<uni-icons type="shop" size="32" :color="userType === 0 ? '#256BFA' : '#999'"></uni-icons>
</view>
<view class="role-text">单位</view>
</view>
</view>
</view>
<!-- 机构类型选择仅单位角色显示 -->
<view v-if="userType === 0" class="org-type-select">
<view class="org-type-title">请选择机构类型</view>
<view class="org-type-options">
<view
v-for="option in orgTypeOptions"
:key="option.value"
class="org-type-item"
:class="{ active: orgType === option.value }"
@click="selectOrgType(option.value)"
>
<view class="org-type-text">{{ option.label }}</view>
</view>
</view>
</view>
<!-- 授权说明 -->
<view class="auth-tips">
<view class="tip-item">
<uni-icons type="checkmarkempty" size="16" color="#256BFA"></uni-icons>
<text>保护您的个人信息安全</text>
</view>
<view class="tip-item">
<uni-icons type="checkmarkempty" size="16" color="#256BFA"></uni-icons>
<text>为您推荐更合适的岗位</text>
</view>
<view class="tip-item">
<uni-icons type="checkmarkempty" size="16" color="#256BFA"></uni-icons>
<text>享受完整的就业服务</text>
</view>
</view>
<!-- 授权按钮 -->
<view class="auth-actions">
<!-- 微信小程序使用 open-type="getPhoneNumber" -->
<!-- #ifdef MP-WEIXIN -->
<button
class="auth-btn primary"
open-type="getPhoneNumber"
@getphonenumber="getPhoneNumber"
:disabled="!canSubmit"
>
<uni-icons type="phone" size="20" color="#FFFFFF"></uni-icons>
<text>手机号快捷登录</text>
</button>
<!-- #endif -->
<!-- H5和App使用普通按钮 -->
<!-- #ifndef MP-WEIXIN -->
<button class="auth-btn primary" @click="wxLogin" :disabled="!canSubmit">
<uni-icons type="phone" size="20" color="#FFFFFF"></uni-icons>
<text>手机号快捷登录</text>
</button>
<!-- #endif -->
<!-- 测试登录按钮仅开发环境 -->
<!-- #ifdef APP-PLUS || H5 -->
<button class="auth-btn secondary" @click="testLogin" :disabled="!canSubmit">
<text>测试账号登录</text>
</button>
<!-- #endif -->
</view>
<!-- 用户协议 -->
<view class="auth-agreement">
<view class="agreement-checkbox" @click="toggleAgreement">
<uni-icons
:type="agreedToAgreement ? 'checkbox-filled' : 'circle'"
size="20"
:color="agreedToAgreement ? '#256BFA' : '#999'"
></uni-icons>
<text class="agreement-text">我已阅读并同意</text>
</view>
<text class="link" @click="openAgreement('user')">隐私协议</text>
</view>
</view>
</view>
</template>
<script setup>
import { ref, inject, onMounted, computed } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import useUserStore from '@/stores/useUserStore';
import useDictStore from '@/stores/useDictStore';
const { $api } = inject('globalFunction');
const userStore = useUserStore();
const dictStore = useDictStore();
const userType = ref(null); // 用户角色1-求职者0-企业
const orgType = ref(null); // 机构类型
const orgTypeOptions = ref([]); // 机构类型选项
const agreedToAgreement = ref(false); // 是否同意用户协议
// 计算是否可提交
const canSubmit = computed(() => {
if (userType.value === null) return false;
if (userType.value === 0 && orgType.value === null) return false;
if (!agreedToAgreement.value) return false;
return true;
});
// 获取机构类型字典
const getOrgTypeDict = async () => {
try {
const options = await dictStore.getDictSelectOption('org_type');
orgTypeOptions.value = options;
} catch (error) {
console.error('获取机构类型字典失败:', error);
// 使用备用数据
orgTypeOptions.value = [
{ label: '有限责任公司', value: '1' },
{ label: '股份有限公司', value: '2' },
{ label: '个人独资企业', value: '3' },
{ label: '合伙企业', value: '4' },
{ label: '外商投资企业', value: '5' },
{ label: '其他', value: '6' }
];
}
};
// 选择角色
const selectRole = (type) => {
userType.value = type;
orgType.value = null; // 切换角色时重置机构类型选择
};
// 选择机构类型
const selectOrgType = (type) => {
orgType.value = type;
};
// 切换协议同意状态
const toggleAgreement = () => {
agreedToAgreement.value = !agreedToAgreement.value;
};
// 打开用户协议
const openAgreement = (type) => {
const urls = {
user: '/packageA/pages/agreement/user',
privacy: '/packageA/pages/agreement/privacy'
};
uni.navigateTo({
url: urls[type]
});
};
// 返回上一页
const goBack = () => {
uni.navigateBack();
};
// 微信获取手机号
const getPhoneNumber = async (e) => {
console.log('获取手机号:', e);
if (!canSubmit.value) {
$api.msg('请先完成上述选择并同意隐私协议');
return;
}
if (e.detail.errMsg === 'getPhoneNumber:ok') {
uni.login({
provider: 'weixin',
success: (loginRes) => {
console.log('微信登录code获取成功', loginRes.code);
const { encryptedData, iv } = e.detail;
const code = loginRes.code;
// 调用接口 /app/appWxphoneSmsCode
uni.showLoading({ title: '获取验证码中...' });
$api.createRequest('/app/appWxphoneSmsCode', {
code,
encryptedData,
iv,
userType: userType.value,
orgType: orgType.value
}, 'post').then((resData) => {
uni.hideLoading();
console.log('获取验证码接口返回:', resData);
console.log('接口返回的所有字段:', Object.keys(resData));
// 检查可能的手机号字段
const possiblePhoneFields = ['phone', 'mobile', 'phoneNumber', 'tel', 'mobilePhone'];
let phoneValue = '';
for (const field of possiblePhoneFields) {
if (resData[field]) {
phoneValue = resData[field];
console.log(`从接口返回中找到手机号字段 "${field}": ${phoneValue}`);
break;
}
}
if (resData.code === 200 || resData.success) {
// 跳转到短信验证页面,传递参数
const params = {
phone: phoneValue || '', // 接口返回的手机号
openid: resData.openid || '',
unionid: resData.unionid || '',
userType: userType.value,
orgType: orgType.value
};
uni.navigateTo({
url: '/pages/login/sms-verify?' + Object.keys(params)
.map(key => `${key}=${encodeURIComponent(params[key])}`)
.join('&')
});
} else {
$api.msg(resData.msg || '获取验证码失败');
}
}).catch((err) => {
uni.hideLoading();
$api.msg(err.msg || '获取验证码失败,请重试');
});
},
fail: (err) => {
console.error('获取微信登录code失败', err);
$api.msg('获取登录信息失败,请重试');
}
});
} else if (e.detail.errMsg === 'getPhoneNumber:fail user deny') {
$api.msg('您取消了授权');
} else {
$api.msg('获取手机号失败');
}
};
// H5/App 微信登录(暂保持原有逻辑,后续可调整)
const wxLogin = () => {
if (!canSubmit.value) {
$api.msg('请先完成上述选择并同意隐私协议');
return;
}
// #ifdef H5
// H5端跳转到H5登录页面
uni.navigateTo({
url: '/pages/login/h5-login'
});
return;
// #endif
// #ifdef APP-PLUS
// App微信登录逻辑暂保持原有逻辑
uni.getProvider({
service: 'oauth',
success: (res) => {
if (~res.provider.indexOf('weixin')) {
uni.login({
provider: 'weixin',
success: (loginRes) => {
console.log('微信登录成功:', loginRes);
// 调用后端接口进行登录
$api.createRequest('/app/appLogin', {
code: loginRes.code,
userType: userType.value,
orgType: orgType.value
}, 'post').then((resData) => {
if (resData.token) {
userStore.loginSetToken(resData.token).then((resume) => {
// 更新用户类型到缓存
if (resData.isCompanyUser !== undefined) {
const userInfo = uni.getStorageSync('userInfo') || {};
userInfo.isCompanyUser = resData.isCompanyUser ? 0 : 1;
uni.setStorageSync('userInfo', userInfo);
}
$api.msg('登录成功');
// 登录成功后返回上一页
uni.navigateBack();
});
}
});
},
fail: (err) => {
console.error('微信登录失败:', err);
$api.msg('微信登录失败');
}
});
}
}
});
// #endif
};
// 测试账号登录(仅开发环境)
const testLogin = () => {
if (!canSubmit.value) {
$api.msg('请先完成上述选择并同意隐私协议');
return;
}
uni.showLoading({ title: '登录中...' });
const params = {
username: 'test',
password: 'test',
};
$api.createRequest('/app/login', params, 'post').then((resData) => {
uni.hideLoading();
userStore.loginSetToken(resData.token).then((resume) => {
// 更新用户类型到缓存
if (resData.isCompanyUser !== undefined) {
const userInfo = uni.getStorageSync('userInfo') || {};
userInfo.isCompanyUser = resData.isCompanyUser ? 0 : 1;
uni.setStorageSync('userInfo', userInfo);
}
$api.msg('测试登录成功');
// 登录成功后返回上一页
uni.navigateBack();
}).catch(() => {
$api.msg('获取用户信息失败');
});
}).catch((err) => {
uni.hideLoading();
$api.msg(err.msg || '登录失败');
});
};
// 页面加载时获取字典数据
onLoad(() => {
getOrgTypeDict();
});
</script>
<style lang="stylus" scoped>
.wx-login-page
min-height: 100vh
background: #FFFFFF
.nav-bar
display: flex
align-items: center
justify-content: space-between
height: 88rpx
padding: 0 32rpx
border-bottom: 1rpx solid #f5f5f5
.nav-back
width: 60rpx
height: 60rpx
display: flex
align-items: center
justify-content: center
.nav-title
font-size: 32rpx
font-weight: 600
color: #333333
.nav-placeholder
width: 60rpx
.page-content
padding: 40rpx 40rpx 60rpx
.auth-header
text-align: center
margin-bottom: 40rpx
.auth-logo
width: 120rpx
height: 120rpx
margin: 0 auto 24rpx
.auth-title
font-size: 36rpx
font-weight: 600
color: #333333
margin-bottom: 12rpx
.role-select
margin-bottom: 32rpx
.role-title
font-size: 28rpx
font-weight: 500
color: #333333
margin-bottom: 20rpx
text-align: center
.role-options
display: flex
justify-content: space-between
gap: 20rpx
.role-item
flex: 1
background: #F7F8FA
border: 2rpx solid #E5E5E5
border-radius: 16rpx
padding: 32rpx 20rpx
display: flex
flex-direction: column
align-items: center
position: relative
transition: all 0.3s ease
cursor: pointer
&.active
background: #F0F5FF
border-color: #256BFA
box-shadow: 0 4rpx 12rpx rgba(37, 107, 250, 0.15)
.role-icon
margin-bottom: 16rpx
.role-text
font-size: 28rpx
color: #333333
font-weight: 500
.org-type-select
margin-bottom: 22rpx
.org-type-title
font-size: 28rpx
font-weight: 500
color: #333333
margin-bottom: 20rpx
text-align: center
.org-type-options
display: flex
flex-wrap: wrap
gap: 16rpx
.org-type-item
display:inline-block
background: #F7F8FA
border: 2rpx solid #E5E5E5
border-radius: 10rpx
padding: 10rpx 10rpx
transition: all 0.3s ease
cursor: pointer
text-align: center
&.active
background: #F0F5FF
border-color: #256BFA
box-shadow: 0 4rpx 12rpx rgba(37, 107, 250, 0.15)
.org-type-text
font-size: 22rpx
color: #333333
font-weight: 500
.auth-tips
background: #F7F8FA
border-radius: 16rpx
padding: 24rpx
margin-bottom: 40rpx
.tip-item
display: flex
align-items: center
margin-bottom: 16rpx
font-size: 26rpx
color: #666666
&:last-child
margin-bottom: 0
text
margin-left: 12rpx
.auth-actions
margin-bottom: 32rpx
.auth-btn
width: 100%
height: 88rpx
border-radius: 44rpx
display: flex
align-items: center
justify-content: center
font-size: 32rpx
font-weight: 500
border: none
margin-bottom: 20rpx
&:last-child
margin-bottom: 0
&.primary
background: linear-gradient(135deg, #256BFA 0%, #1E5BFF 100%)
color: #FFFFFF
box-shadow: 0 8rpx 20rpx rgba(37, 107, 250, 0.3)
&.secondary
background: #F7F8FA
color: #666666
&:disabled
opacity: 0.5
cursor: not-allowed
text
margin-left: 12rpx
.auth-agreement
display: flex
align-items: center
justify-content: center
font-size: 24rpx
color: #999999
line-height: 1.6
flex-wrap: wrap
gap: 8rpx
.agreement-checkbox
display: flex
align-items: center
cursor: pointer
.agreement-text
margin-left: 8rpx
color: #666666
.link
color: #256BFA
text-decoration: underline
// 按钮重置样式
button::after
border: none
</style>

View File

@@ -163,9 +163,9 @@ onShow(() => {
onMounted(() => {
uni.$on('showLoginModal', () => {
// 这里可以显示微信登录弹窗
// 由于这个页面没有 WxAuthLogin 组件,我们跳转到首页让首页处理
uni.reLaunch({
url: '/pages/index/index'
// 跳转到微信登录页面
uni.navigateTo({
url: '/pages/login/wx-login'
});
});
});

View File

@@ -175,9 +175,9 @@ onShow(() => {
onMounted(() => {
uni.$on('showLoginModal', () => {
// 这里可以显示微信登录弹窗
// 由于这个页面没有 WxAuthLogin 组件,我们跳转到首页让首页处理
uni.reLaunch({
url: '/pages/index/index'
// 跳转到微信登录页面
uni.navigateTo({
url: '/pages/login/wx-login'
});
});
});

View File

@@ -31,8 +31,7 @@
<!-- 自定义tabbar -->
<CustomTabBar :currentPage="3" />
<!-- 微信授权登录弹窗 -->
<WxAuthLogin ref="wxAuthLoginRef" @success="handleLoginSuccess"></WxAuthLogin>
<!-- 统一使用系统tabBar -->
</view>
@@ -46,14 +45,14 @@ import Tabbar from '@/components/tabbar/midell-box.vue';
import ReadComponent from './read.vue';
import UnreadComponent from './unread.vue';
import { tabbarManager } from '@/utils/tabbarManager';
import WxAuthLogin from '@/components/WxAuthLogin/WxAuthLogin.vue';
const loadedMap = reactive([false, false]);
const swiperRefs = [ref(null), ref(null)];
const components = [ReadComponent, UnreadComponent];
import { storeToRefs } from 'pinia';
import { useReadMsg } from '@/stores/useReadMsg';
const { unreadCount } = storeToRefs(useReadMsg());
const wxAuthLoginRef = ref(null);
onShow(() => {
// 获取消息列表
@@ -71,7 +70,7 @@ onMounted(() => {
// 监听退出登录事件,显示微信登录弹窗
uni.$on('showLoginModal', () => {
wxAuthLoginRef.value?.open();
uni.navigateTo({ url: '/pages/login/wx-login' });
});
});

View File

@@ -44,22 +44,11 @@ export function navigateToLoginPage(options = {}) {
switch (platform) {
case 'mp-weixin':
// 小程序端使用微信授权登录,直接显示微信授权弹窗
uni.$emit('showLoginModal', { loginType: 'wechat' });
return;
case 'h5':
uni.showToast({
title: '请先登录',
icon: 'none',
duration: 2000
});
return;
case 'app':
// App端使用微信授权登录
uni.$emit('showLoginModal', { loginType: 'wechat' });
return;
case 'h5':
// 跳转到微信登录页面
loginPage = '/pages/login/wx-login';
break;
default:
loginPage = '/pages/login/h5-login';