“wangzihua”
3 months ago
9 changed files with 1195 additions and 8 deletions
@ -0,0 +1,90 @@ |
|||
import { createRouter, createWebHistory } from 'vue-router' |
|||
|
|||
// 设备检测函数
|
|||
function isMobileDevice() { |
|||
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) |
|||
} |
|||
|
|||
// 检查登录状态
|
|||
function isLoggedIn() { |
|||
const token = localStorage.getItem('token') |
|||
return !!token && token !== 'null' && token !== 'undefined' |
|||
} |
|||
|
|||
// 获取用户信息
|
|||
function getUserInfo() { |
|||
try { |
|||
return JSON.parse(localStorage.getItem('userInfo') || '{}') |
|||
} catch { |
|||
return {} |
|||
} |
|||
} |
|||
|
|||
const mobileRoutes = [ |
|||
{ |
|||
path: '/mobile/login', |
|||
name: 'MobileLogin', |
|||
component: () => import('/@/views/mobile/login.vue') |
|||
}, |
|||
{ |
|||
path: '/mobile/agreement', |
|||
name: 'MobileAgreement', |
|||
component: () => import('/@/views/mobile/agreement.vue'), |
|||
meta: { requiresAuth: true, mobileOnly: true } |
|||
}, |
|||
{ |
|||
path: '/mobile/service', |
|||
name: 'MobileService', |
|||
component: () => import('/@/views/mobile/index.vue'), |
|||
meta: { requiresAuth: true, mobileOnly: true } |
|||
}, |
|||
{ |
|||
path: '/mobile/service/create', |
|||
name: 'MobileServiceCreate', |
|||
component: () => import('/@/views/mobile/service/create.vue'), |
|||
meta: { requiresAuth: true, mobileOnly: true } |
|||
}, |
|||
{ |
|||
path: '/mobile', |
|||
redirect: '/mobile/login' |
|||
} |
|||
] |
|||
|
|||
// 移动端路由守卫函数
|
|||
function mobileRouteGuard(to, from, next) { |
|||
if (to.path.startsWith('/mobile')) { |
|||
// 设备检测（开发环境暂时跳过）
|
|||
if (process.env.NODE_ENV === 'development') { |
|||
// 开发环境跳过设备检测，方便测试
|
|||
} else if (!isMobileDevice()) { |
|||
next('/') |
|||
return |
|||
} |
|||
|
|||
// 登录检查
|
|||
if (to.meta.requiresAuth && !isLoggedIn()) { |
|||
next('/mobile/login') |
|||
return |
|||
} |
|||
|
|||
// 已登录用户的智能跳转
|
|||
if (isLoggedIn() && to.path === '/mobile/login') { |
|||
const userInfo = getUserInfo() |
|||
const isUserOrCto = ['user', 'cto'].includes((userInfo.roleCode || '').toLowerCase()) |
|||
const isSigned = userInfo.agreementSignFlag === true |
|||
|
|||
if (isUserOrCto && !isSigned) { |
|||
next('/mobile/agreement') |
|||
} else { |
|||
next('/mobile/service') |
|||
} |
|||
return |
|||
} |
|||
} |
|||
|
|||
next() |
|||
} |
|||
|
|||
// 导出移动端路由数组和守卫函数
|
|||
export const mobileRouters = mobileRoutes |
|||
export { mobileRouteGuard } |
|||
@ -0,0 +1,131 @@ |
|||
<template> |
|||
<div class="mobile-agreement"> |
|||
<header class="agreement-header"> |
|||
<h2>承诺书签署</h2> |
|||
</header> |
|||
|
|||
<div class="agreement-content"> |
|||
<div class="agreement-text"> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="agreement-actions"> |
|||
<button @click="handleAgree" :disabled="loading" class="agree-btn"> |
|||
{{ loading ? '签署中...' : '同意并继续' }} |
|||
</button> |
|||
<button @click="handleCancel" class="cancel-btn"> |
|||
不同意 |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { ref } from 'vue' |
|||
import { useRouter } from 'vue-router' |
|||
import { letterApi } from '/@/api/business/letter/letter-api' |
|||
import { message } from 'ant-design-vue' |
|||
|
|||
const router = useRouter() |
|||
const loading = ref(false) |
|||
|
|||
// 同意并继续 |
|||
async function handleAgree() { |
|||
loading.value = true |
|||
|
|||
try { |
|||
await letterApi.add() |
|||
message.success('承诺书签署成功') |
|||
|
|||
// 签署成功后刷新页面，重新获取用户信息 |
|||
setTimeout(() => { |
|||
window.location.reload() |
|||
}, 500) |
|||
} catch (error) { |
|||
console.error('签署失败:', error) |
|||
message.error('签署失败，请稍后重试') |
|||
} finally { |
|||
loading.value = false |
|||
} |
|||
} |
|||
|
|||
// 不同意 |
|||
function handleCancel() { |
|||
// 不同意则退出登录 |
|||
router.push('/mobile/login') |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.mobile-agreement { |
|||
padding: 20px; |
|||
min-height: 100vh; |
|||
background: #f5f5f5; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.agreement-header { |
|||
text-align: center; |
|||
margin-bottom: 20px; |
|||
padding-top: 20px; |
|||
} |
|||
|
|||
.agreement-header h2 { |
|||
font-size: 20px; |
|||
color: #333; |
|||
} |
|||
|
|||
.agreement-content { |
|||
flex: 1; |
|||
background: white; |
|||
padding: 20px; |
|||
border-radius: 8px; |
|||
margin-bottom: 20px; |
|||
box-shadow: 0 2px 10px rgba(0,0,0,0.1); |
|||
overflow-y: auto; |
|||
} |
|||
|
|||
.agreement-text h3 { |
|||
text-align: center; |
|||
margin-bottom: 20px; |
|||
color: #333; |
|||
} |
|||
|
|||
.agreement-text p { |
|||
margin-bottom: 15px; |
|||
line-height: 1.6; |
|||
color: #666; |
|||
} |
|||
|
|||
.agreement-actions { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 10px; |
|||
} |
|||
|
|||
.agree-btn { |
|||
padding: 15px; |
|||
background: #1890ff; |
|||
color: white; |
|||
border: none; |
|||
border-radius: 8px; |
|||
font-size: 16px; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.agree-btn:disabled { |
|||
background: #ccc; |
|||
cursor: not-allowed; |
|||
} |
|||
|
|||
.cancel-btn { |
|||
padding: 15px; |
|||
background: #f5f5f5; |
|||
color: #666; |
|||
border: 1px solid #ddd; |
|||
border-radius: 8px; |
|||
font-size: 16px; |
|||
cursor: pointer; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,373 @@ |
|||
<template> |
|||
<div class="mobile-home"> |
|||
<!-- 页面头部 --> |
|||
<header class="home-header"> |
|||
<h2>服务申报</h2> |
|||
<div class="user-info"> |
|||
<span>{{ userInfo.actualName }}</span> |
|||
<button @click="handleLogout" class="logout-btn">退出</button> |
|||
</div> |
|||
</header> |
|||
|
|||
<!-- 主要内容 --> |
|||
<div class="home-content"> |
|||
<!-- 新建申报按钮：非协会角色且非CEO角色显示（与PC端相同逻辑） --> |
|||
<button v-if="!isAssociationRole && !isCeo" @click="handleCreate" class="create-btn"> |
|||
+ 新建申报 |
|||
</button> |
|||
|
|||
<!-- 服务申报列表 --> |
|||
<div class="service-section"> |
|||
<h3>服务申报列表</h3> |
|||
|
|||
<div v-if="loading" class="loading"> |
|||
加载中... |
|||
</div> |
|||
|
|||
<div v-else class="service-list"> |
|||
<div v-for="item in serviceList" :key="item.applicationId" class="service-item" @click="viewDetail(item)"> |
|||
<div class="item-main"> |
|||
<div class="item-title">{{ item.activityName || '服务申报' }}</div> |
|||
<div class="item-meta"> |
|||
<div class="item-duration">{{ item.serviceDuration }}小时</div> |
|||
<div class="item-status" :class="getStatusClass(item.firmAuditStatus)"> |
|||
{{ getStatusText(item.firmAuditStatus) }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="item-time"> |
|||
{{ formatTime(item.serviceStart) }} |
|||
</div> |
|||
</div> |
|||
|
|||
<div v-if="serviceList.length === 0" class="empty-state"> |
|||
<div class="empty-icon">📋</div> |
|||
<div class="empty-text">暂无申报记录</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { ref, onMounted } from 'vue' |
|||
import { useRouter } from 'vue-router' |
|||
import { loginApi } from '/@/api/system/login-api' |
|||
import { serviceApplicationsApi } from '/@/api/business/service-applications/service-applications-api' |
|||
import { message } from 'ant-design-vue' |
|||
|
|||
const router = useRouter() |
|||
const userInfo = ref({}) |
|||
const serviceList = ref([]) |
|||
const loading = ref(false) |
|||
|
|||
// 角色判断（与PC端相同逻辑） |
|||
const isCeo = ref(false) |
|||
const isAssociationRole = ref(false) |
|||
|
|||
// 获取用户信息 |
|||
async function getUserInfo() { |
|||
try { |
|||
const res = await loginApi.getLoginInfo() |
|||
userInfo.value = res.data |
|||
checkUserRole() // 获取登录信息后检查用户角色 |
|||
} catch (error) { |
|||
console.error('获取用户信息失败:', error) |
|||
} |
|||
} |
|||
|
|||
// 检查用户角色（与PC端相同逻辑） |
|||
function checkUserRole() { |
|||
if (userInfo.value) { |
|||
const userRole = userInfo.value.roleCode || userInfo.value.roleName || '' |
|||
const roleLower = userRole.toLowerCase() |
|||
|
|||
// CEO角色判断（CEO不显示新建申报按钮） |
|||
isCeo.value = roleLower === 'ceo' |
|||
|
|||
// 协会角色判断 |
|||
isAssociationRole.value = roleLower.includes('协会') || |
|||
roleLower.includes('association') || |
|||
roleLower.includes('律协') || |
|||
roleLower.includes('律师协会') |
|||
|
|||
console.log('用户角色:', userRole, '是CEO:', isCeo.value, '是协会角色:', isAssociationRole.value) |
|||
} |
|||
} |
|||
|
|||
// 获取服务申报列表 |
|||
async function getServiceList() { |
|||
loading.value = true |
|||
try { |
|||
const res = await serviceApplicationsApi.queryPage({ |
|||
pageNum: 1, |
|||
pageSize: 20 |
|||
}) |
|||
|
|||
if (res.code === 0) { |
|||
// 根据PC端逻辑，返回的数据结构是 res.data.list |
|||
serviceList.value = res.data.list || [] |
|||
console.log('获取到的申报列表:', serviceList.value) |
|||
} else { |
|||
message.error('获取申报列表失败') |
|||
} |
|||
} catch (error) { |
|||
console.error('获取申报列表失败:', error) |
|||
message.error('网络错误，请稍后重试') |
|||
} finally { |
|||
loading.value = false |
|||
} |
|||
} |
|||
|
|||
// 新建申报 |
|||
function handleCreate() { |
|||
router.push('/mobile/service/create') |
|||
} |
|||
|
|||
// 查看详情 |
|||
function viewDetail(item) { |
|||
// 这里可以跳转到详情页面或显示详情弹窗 |
|||
console.log('查看申报详情:', item) |
|||
// router.push(`/mobile/service/detail/${item.id}`) |
|||
} |
|||
|
|||
// 退出登录 |
|||
function handleLogout() { |
|||
localStorage.removeItem('token') |
|||
localStorage.removeItem('userInfo') |
|||
router.push('/mobile/login') |
|||
} |
|||
|
|||
// 状态文本映射（与PC端保持一致） |
|||
function getStatusText(status) { |
|||
const statusMap = { |
|||
0: '待审核', |
|||
1: '审核通过', |
|||
2: '审核拒绝', |
|||
3: '已完成', |
|||
4: '草稿' |
|||
} |
|||
return statusMap[status] || '未知状态' |
|||
} |
|||
|
|||
// 状态样式类（与PC端保持一致） |
|||
function getStatusClass(status) { |
|||
const classMap = { |
|||
0: 'status-pending', |
|||
1: 'status-approved', |
|||
2: 'status-rejected', |
|||
3: 'status-completed', |
|||
4: 'status-draft' |
|||
} |
|||
return classMap[status] || 'status-unknown' |
|||
} |
|||
|
|||
// 时间格式化 |
|||
function formatTime(time) { |
|||
if (!time) return '' |
|||
return time.split(' ')[0] // 只显示日期部分 |
|||
} |
|||
|
|||
onMounted(() => { |
|||
getUserInfo() |
|||
getServiceList() |
|||
}) |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.mobile-home { |
|||
min-height: 100vh; |
|||
background: #f5f5f5; |
|||
} |
|||
|
|||
.home-header { |
|||
position: sticky; |
|||
top: 0; |
|||
background: white; |
|||
padding: 15px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
border-bottom: 1px solid #e8e8e8; |
|||
z-index: 100; |
|||
} |
|||
|
|||
.home-header h2 { |
|||
font-size: 18px; |
|||
color: #333; |
|||
margin: 0; |
|||
} |
|||
|
|||
.user-info { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 10px; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.logout-btn { |
|||
padding: 6px 12px; |
|||
background: #f5f5f5; |
|||
color: #666; |
|||
border: 1px solid #ddd; |
|||
border-radius: 4px; |
|||
font-size: 12px; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.home-content { |
|||
padding: 15px; |
|||
} |
|||
|
|||
.create-btn { |
|||
width: 100%; |
|||
padding: 15px; |
|||
background: #1890ff; |
|||
color: white; |
|||
border: none; |
|||
border-radius: 8px; |
|||
font-size: 16px; |
|||
cursor: pointer; |
|||
margin-bottom: 20px; |
|||
box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3); |
|||
} |
|||
|
|||
.service-section { |
|||
background: white; |
|||
border-radius: 8px; |
|||
padding: 15px; |
|||
margin-top:10px; |
|||
box-shadow: 0 1px 3px rgba(0,0,0,0.1); |
|||
min-height:200px; |
|||
} |
|||
|
|||
.service-section h3 { |
|||
font-size: 16px; |
|||
color: #333; |
|||
margin: 0 0 15px 0; |
|||
padding-bottom: 10px; |
|||
border-bottom: 1px solid #f0f0f0; |
|||
} |
|||
|
|||
.loading { |
|||
text-align: center; |
|||
padding: 20px; |
|||
color: #666; |
|||
} |
|||
|
|||
.service-item { |
|||
padding: 15px 0; |
|||
border-bottom: 1px solid #f0f0f0; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.service-item:last-child { |
|||
border-bottom: none; |
|||
} |
|||
|
|||
.item-main { |
|||
flex: 1; |
|||
} |
|||
|
|||
.item-title { |
|||
font-size: 16px; |
|||
color: #333; |
|||
margin-bottom: 5px; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.item-status { |
|||
font-size: 12px; |
|||
padding: 2px 8px; |
|||
border-radius: 12px; |
|||
display: inline-block; |
|||
} |
|||
|
|||
.status-pending { |
|||
background: #fff7e6; |
|||
color: #fa8c16; |
|||
} |
|||
|
|||
.status-approved { |
|||
background: #f6ffed; |
|||
color: #52c41a; |
|||
} |
|||
|
|||
.status-rejected { |
|||
background: #fff2f0; |
|||
color: #ff4d4f; |
|||
} |
|||
|
|||
.status-completed { |
|||
background: #f0f5ff; |
|||
color: #1890ff; |
|||
} |
|||
|
|||
.status-draft { |
|||
background: #f5f5f5; |
|||
color: #666; |
|||
} |
|||
|
|||
.item-meta { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 10px; |
|||
} |
|||
|
|||
.item-time { |
|||
font-size: 12px; |
|||
color: #999; |
|||
} |
|||
|
|||
.item-arrow { |
|||
color: #ccc; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.empty-state { |
|||
text-align: center; |
|||
padding: 40px 20px; |
|||
} |
|||
|
|||
.empty-icon { |
|||
font-size: 48px; |
|||
margin-bottom: 15px; |
|||
} |
|||
|
|||
.empty-text { |
|||
color: #666; |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.empty-btn { |
|||
padding: 10px 20px; |
|||
background: #1890ff; |
|||
color: white; |
|||
border: none; |
|||
border-radius: 6px; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
/* 移动端优化 */ |
|||
@media (max-width: 768px) { |
|||
.home-header { |
|||
padding: 12px; |
|||
} |
|||
|
|||
.home-content { |
|||
padding: 12px; |
|||
} |
|||
|
|||
.service-section { |
|||
padding: 12px; |
|||
} |
|||
|
|||
.service-item { |
|||
padding: 12px 0; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,324 @@ |
|||
<template> |
|||
<div class="mobile-login"> |
|||
<div class="login-header"> |
|||
<h2>合肥市律师公益法律服务</h2> |
|||
<p>管理系统</p> |
|||
</div> |
|||
|
|||
<div class="login-form"> |
|||
<div class="form-group"> |
|||
<label>用户名</label> |
|||
<a-input v-model:value.trim="loginForm.loginName" placeholder="请输入用户名" /> |
|||
</div> |
|||
|
|||
<div class="form-group"> |
|||
<label>密码</label> |
|||
<a-input-password |
|||
v-model:value="loginForm.password" |
|||
autocomplete="on" |
|||
placeholder="请输入密码" |
|||
/> |
|||
</div> |
|||
|
|||
<div class="form-group captcha-group"> |
|||
<label>验证码</label> |
|||
<div class="captcha-container"> |
|||
<a-input |
|||
class="captcha-input" |
|||
v-model:value.trim="loginForm.captchaCode" |
|||
placeholder="请输入验证码" |
|||
/> |
|||
<img |
|||
class="captcha-img" |
|||
:src="captchaBase64Image" |
|||
@click="getCaptcha" |
|||
alt="验证码" |
|||
/> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="form-group"> |
|||
<a-checkbox v-model:checked="rememberPwd">记住密码</a-checkbox> |
|||
</div> |
|||
|
|||
<button |
|||
type="button" |
|||
@click="onLogin" |
|||
:disabled="loading" |
|||
class="login-btn" |
|||
> |
|||
{{ loading ? '登录中...' : '登录' }} |
|||
</button> |
|||
</div> |
|||
|
|||
<div v-if="error" class="error-message"> |
|||
{{ error }} |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { ref, reactive, onMounted } from 'vue' |
|||
import { useRouter } from 'vue-router' |
|||
import { loginApi } from '/@/api/system/login-api' |
|||
import { message } from 'ant-design-vue' |
|||
import { LOGIN_DEVICE_ENUM } from '/@/constants/system/login-device-const' |
|||
import { encryptData } from '/@/lib/encrypt' |
|||
import { SmartLoading } from '/@/components/framework/smart-loading'; |
|||
import { smartSentry } from '/@/lib/smart-sentry'; |
|||
import { buildRoutes } from '/@/router/index'; |
|||
|
|||
import { localSave } from '/@/utils/local-util.js'; |
|||
import LocalStorageKeyConst from '/@/constants/local-storage-key-const.js'; |
|||
import { useUserStore } from '/@/store/modules/system/user'; |
|||
import { dictApi } from '/@/api/support/dict-api.js'; |
|||
import { useDictStore } from '/@/store/modules/system/dict.js'; |
|||
|
|||
const router = useRouter() |
|||
const loading = ref(false) |
|||
const error = ref('') |
|||
const captchaBase64Image = ref('') |
|||
const rememberPwd = ref(false) |
|||
|
|||
// 登录表单（与PC端保持一致） |
|||
const loginForm = reactive({ |
|||
loginName: '', |
|||
password: '', |
|||
captchaCode: '', |
|||
captchaUuid: '', |
|||
loginDevice: LOGIN_DEVICE_ENUM.H5.value, // 移动端设备标识（H5） |
|||
}) |
|||
|
|||
// 表单验证规则（与PC端保持一致） |
|||
const rules = { |
|||
loginName: [{ required: true, message: '用户名不能为空' }], |
|||
password: [{ required: true, message: '密码不能为空' }], |
|||
captchaCode: [{ required: true, message: '验证码不能为空' }], |
|||
} |
|||
|
|||
// 获取验证码 |
|||
async function getCaptcha() { |
|||
try { |
|||
const res = await loginApi.getCaptcha() |
|||
if (res.code === 0) { |
|||
captchaBase64Image.value = res.data.captchaBase64Image |
|||
loginForm.captchaUuid = res.data.captchaUuid |
|||
} else { |
|||
message.error('获取验证码失败') |
|||
} |
|||
} catch (err) { |
|||
console.error('获取验证码错误:', err) |
|||
message.error('获取验证码失败，请稍后重试') |
|||
} |
|||
} |
|||
let refreshCaptchaInterval = null; |
|||
function beginRefreshCaptchaInterval(expireSeconds) { |
|||
if (refreshCaptchaInterval === null) { |
|||
refreshCaptchaInterval = setInterval(getCaptcha, (expireSeconds - 5) * 1000); |
|||
} |
|||
} |
|||
|
|||
function stopRefreshCaptchaInterval() { |
|||
if (refreshCaptchaInterval != null) { |
|||
clearInterval(refreshCaptchaInterval); |
|||
refreshCaptchaInterval = null; |
|||
} |
|||
} |
|||
// 表单验证 |
|||
function validateForm() { |
|||
if (!loginForm.loginName.trim()) { |
|||
message.error('请输入用户名') |
|||
return false |
|||
} |
|||
|
|||
if (!loginForm.password) { |
|||
message.error('请输入密码') |
|||
return false |
|||
} |
|||
|
|||
if (!loginForm.captchaCode.trim()) { |
|||
message.error('请输入验证码') |
|||
return false |
|||
} |
|||
|
|||
return true |
|||
} |
|||
|
|||
//登录 |
|||
async function onLogin() { |
|||
|
|||
try { |
|||
SmartLoading.show(); |
|||
// 密码加密 |
|||
let encryptPasswordForm = Object.assign({}, loginForm, { |
|||
password: encryptData(loginForm.password), |
|||
}); |
|||
const res = await loginApi.login(encryptPasswordForm); |
|||
stopRefreshCaptchaInterval(); |
|||
localSave(LocalStorageKeyConst.USER_TOKEN, res.data.token ? res.data.token : ''); |
|||
message.success('登录成功'); |
|||
//更新用户信息到pinia |
|||
useUserStore().setUserLoginInfo(res.data); |
|||
// 初始化数据字典 |
|||
const dictRes = await dictApi.getAllDictData(); |
|||
useDictStore().initData(dictRes.data); |
|||
//构建系统的路由 |
|||
buildRoutes(); |
|||
router.push('/mobile/service'); |
|||
} catch (e) { |
|||
if (e.data && e.data.code !== 0) { |
|||
loginForm.captchaCode = ''; |
|||
getCaptcha(); |
|||
} |
|||
smartSentry.captureError(e); |
|||
} finally { |
|||
SmartLoading.hide(); |
|||
} |
|||
|
|||
} |
|||
|
|||
// 回车键登录 |
|||
function handleKeyup(event) { |
|||
if (event.keyCode === 13) { |
|||
onLogin() |
|||
} |
|||
} |
|||
|
|||
onMounted(() => { |
|||
// 绑定回车键事件 |
|||
document.addEventListener('keyup', handleKeyup) |
|||
|
|||
// 初始化验证码 |
|||
getCaptcha() |
|||
|
|||
// 如果有记住的用户名，自动填充 |
|||
const rememberedLoginName = localStorage.getItem('rememberedLoginName') |
|||
if (rememberedLoginName) { |
|||
loginForm.loginName = rememberedLoginName |
|||
rememberPwd.value = true |
|||
} |
|||
}) |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.mobile-login { |
|||
padding: 20px; |
|||
min-height: 100vh; |
|||
background: #f5f5f5; |
|||
} |
|||
|
|||
.login-header { |
|||
text-align: center; |
|||
margin-bottom: 40px; |
|||
padding-top: 60px; |
|||
} |
|||
|
|||
.login-header h2 { |
|||
font-size: 24px; |
|||
color: #333; |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.login-header p { |
|||
color: #666; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.login-form { |
|||
background: white; |
|||
padding: 30px 20px; |
|||
border-radius: 8px; |
|||
box-shadow: 0 2px 10px rgba(0,0,0,0.1); |
|||
} |
|||
|
|||
.form-group { |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.form-group label { |
|||
display: block; |
|||
margin-bottom: 8px; |
|||
font-weight: 500; |
|||
color: #333; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.captcha-group { |
|||
margin-bottom: 15px; |
|||
} |
|||
|
|||
.captcha-container { |
|||
display: flex; |
|||
gap: 10px; |
|||
align-items: center; |
|||
} |
|||
|
|||
.captcha-input { |
|||
flex: 1; |
|||
} |
|||
|
|||
.captcha-img { |
|||
width: 100px; |
|||
height: 40px; |
|||
border: 1px solid #d9d9d9; |
|||
border-radius: 4px; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.login-btn { |
|||
width: 100%; |
|||
padding: 12px; |
|||
background: #1890ff; |
|||
color: white; |
|||
border: none; |
|||
border-radius: 4px; |
|||
font-size: 16px; |
|||
cursor: pointer; |
|||
margin-top: 10px; |
|||
} |
|||
|
|||
.login-btn:disabled { |
|||
background: #ccc; |
|||
cursor: not-allowed; |
|||
} |
|||
|
|||
.error-message { |
|||
margin-top: 15px; |
|||
padding: 10px; |
|||
background: #fff2f0; |
|||
border: 1px solid #ffccc7; |
|||
border-radius: 4px; |
|||
color: #a8071a; |
|||
text-align: center; |
|||
} |
|||
|
|||
/* 移动端优化 */ |
|||
@media (max-width: 768px) { |
|||
.mobile-login { |
|||
padding: 15px; |
|||
} |
|||
|
|||
.login-form { |
|||
padding: 20px 15px; |
|||
} |
|||
|
|||
.form-group { |
|||
margin-bottom: 15px; |
|||
} |
|||
|
|||
.captcha-container { |
|||
/* 保持水平排列，不换行 */ |
|||
flex-direction: row; |
|||
gap: 10px; |
|||
} |
|||
|
|||
.captcha-input { |
|||
flex: 1; |
|||
} |
|||
|
|||
.captcha-img { |
|||
width: 120px; |
|||
height: 44px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,231 @@ |
|||
<script setup> |
|||
import { ref, reactive, onMounted } from 'vue' |
|||
import { useRouter } from 'vue-router' |
|||
import { serviceApplicationsApi } from '/@/api/business/service-applications/service-applications-api' |
|||
import { loginApi } from '/@/api/system/login-api' |
|||
import { positionApi } from '/@/api/system/position-api' // 引入职务API |
|||
import { categoryApi } from '/@/api/business/category-api' // 引入分类API |
|||
import { activityApi } from '/@/api/business/activity-api' // 引入活动API |
|||
import { message } from 'ant-design-vue' |
|||
|
|||
const router = useRouter() |
|||
const loading = ref(false) |
|||
const readonlyMode = ref(false) |
|||
|
|||
// 表单数据（与PC端完全一致） |
|||
const form = reactive({ |
|||
actualName: '', |
|||
certificateNumber: '', |
|||
firmName: '', |
|||
positionId: '', |
|||
serviceStart: '', |
|||
serviceEnd: '', |
|||
serviceDuration: null, |
|||
activityCategoryId: '', |
|||
activityNameId: '', |
|||
beneficiaryCount: null, |
|||
organizerName: '', |
|||
organizerContact: '', |
|||
organizerPhone: '', |
|||
serviceContent: '', |
|||
proofMaterials: [] |
|||
}) |
|||
|
|||
// 下拉选项数据 |
|||
const positionList = ref([]) |
|||
const activityCategoryList = ref([]) |
|||
const activityList = ref([]) |
|||
const uploadedFiles = ref([]) |
|||
|
|||
// 获取用户信息并填充表单 |
|||
async function getUserInfo() { |
|||
try { |
|||
const res = await loginApi.getLoginInfo() |
|||
const userInfo = res.data |
|||
|
|||
// 填充用户信息（与PC端逻辑一致） |
|||
form.actualName = userInfo.actualName || '' |
|||
form.certificateNumber = userInfo.licenseNumber || '' |
|||
form.firmName = userInfo.departmentName || '' |
|||
} catch (error) { |
|||
console.error('获取用户信息失败:', error) |
|||
} |
|||
} |
|||
|
|||
// 获取下拉选项数据 |
|||
async function getSelectOptions() { |
|||
try { |
|||
// 获取职务列表 - 使用现有的接口 |
|||
const positionRes = await positionApi.getPositionList() |
|||
positionList.value = positionRes.data || [] |
|||
|
|||
// 获取活动类型列表 - 使用现有的接口 |
|||
const categoryRes = await categoryApi.getCategoryList({ |
|||
categoryType: 'ACTIVITY' // 根据实际情况调整 |
|||
}) |
|||
activityCategoryList.value = categoryRes.data || [] |
|||
} catch (error) { |
|||
console.error('获取选项数据失败:', error) |
|||
|
|||
} |
|||
} |
|||
|
|||
// 活动类型改变事件 |
|||
async function onActivityCategoryChange() { |
|||
if (form.activityCategoryId) { |
|||
try { |
|||
// 根据活动类型获取活动名称列表 - 使用现有的接口 |
|||
const activityRes = await activityApi.getActivityList({ |
|||
categoryId: form.activityCategoryId |
|||
}) |
|||
activityList.value = activityRes.data || [] |
|||
} catch (error) { |
|||
console.error('获取活动列表失败:', error) |
|||
activityList.value = [] |
|||
} |
|||
} else { |
|||
activityList.value = [] |
|||
} |
|||
form.activityNameId = '' |
|||
} |
|||
|
|||
// 文件上传处理 |
|||
function handleFileUpload(event) { |
|||
const files = event.target.files |
|||
if (files.length + uploadedFiles.value.length > 5) { |
|||
message.error('最多只能上传5个文件') |
|||
return |
|||
} |
|||
|
|||
for (let file of files) { |
|||
if (file.size > 10 * 1024 * 1024) { |
|||
message.error(`文件 ${file.name} 超过10MB限制`) |
|||
continue |
|||
} |
|||
|
|||
uploadedFiles.value.push({ |
|||
id: Date.now() + Math.random(), |
|||
name: file.name, |
|||
file: file |
|||
}) |
|||
} |
|||
|
|||
// 清空input |
|||
event.target.value = '' |
|||
} |
|||
|
|||
// 删除文件 |
|||
function removeFile(fileId) { |
|||
uploadedFiles.value = uploadedFiles.value.filter(file => file.id !== fileId) |
|||
} |
|||
|
|||
// 保存草稿 |
|||
async function handleSave() { |
|||
loading.value = true |
|||
try { |
|||
// 调用保存草稿接口 - 使用现有的接口 |
|||
const res = await serviceApplicationsApi.add({ |
|||
...form, |
|||
// 添加必要的参数 |
|||
status: 4 // 草稿状态 |
|||
}) |
|||
|
|||
if (res.code === 0) { |
|||
message.success('保存成功') |
|||
router.push('/mobile/service') |
|||
} else { |
|||
message.error(res.msg || '保存失败') |
|||
} |
|||
} catch (error) { |
|||
console.error('保存失败:', error) |
|||
message.error('保存失败，请稍后重试') |
|||
} finally { |
|||
loading.value = false |
|||
} |
|||
} |
|||
|
|||
// 提交申报 |
|||
async function handleSubmit() { |
|||
// 表单验证（与PC端相同的验证逻辑） |
|||
if (!form.positionId) { |
|||
message.error('请选择职务') |
|||
return |
|||
} |
|||
|
|||
if (!form.serviceStart) { |
|||
message.error('请选择服务开始时间') |
|||
return |
|||
} |
|||
|
|||
if (!form.serviceEnd) { |
|||
message.error('请选择服务结束时间') |
|||
return |
|||
} |
|||
|
|||
if (!form.activityCategoryId) { |
|||
message.error('请选择活动类型') |
|||
return |
|||
} |
|||
|
|||
if (!form.activityNameId) { |
|||
message.error('请选择活动名称') |
|||
return |
|||
} |
|||
|
|||
if (!form.serviceContent) { |
|||
message.error('请输入服务内容描述') |
|||
return |
|||
} |
|||
|
|||
if (uploadedFiles.value.length === 0) { |
|||
message.error('请上传证明材料') |
|||
return |
|||
} |
|||
|
|||
loading.value = true |
|||
|
|||
try { |
|||
// 准备上传的文件 |
|||
const formData = new FormData() |
|||
|
|||
// 添加表单数据 |
|||
Object.keys(form).forEach(key => { |
|||
if (form[key] !== null && form[key] !== undefined) { |
|||
formData.append(key, form[key]) |
|||
} |
|||
}) |
|||
|
|||
// 添加文件 |
|||
uploadedFiles.value.forEach(file => { |
|||
formData.append('files', file.file) |
|||
}) |
|||
|
|||
// 调用提交接口（与PC端相同的接口） |
|||
const res = await serviceApi.add(formData) |
|||
|
|||
if (res.code === 0) { |
|||
message.success('申报提交成功') |
|||
setTimeout(() => { |
|||
router.push('/mobile/service') |
|||
}, 1000) |
|||
} else { |
|||
message.error(res.msg || '提交失败') |
|||
} |
|||
} catch (error) { |
|||
console.error('提交失败:', error) |
|||
message.error('提交失败，请稍后重试') |
|||
} finally { |
|||
loading.value = false |
|||
} |
|||
} |
|||
|
|||
// 返回 |
|||
function handleBack() { |
|||
router.back() |
|||
} |
|||
|
|||
onMounted(() => { |
|||
getUserInfo() |
|||
getSelectOptions() |
|||
}) |
|||
</script> |
|||
@ -0,0 +1,17 @@ |
|||
<template> |
|||
<div class="mobile-service"> |
|||
<h2>服务申报页面</h2> |
|||
<p>这是移动端的服务申报首页</p> |
|||
<router-link to="/mobile/service/create">新建申报</router-link> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
// 移动端服务申报首页 |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.mobile-service { |
|||
padding: 20px; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue