up
This commit is contained in:
@@ -0,0 +1,42 @@
|
||||
/**
|
||||
* 认证相关 API
|
||||
* 对标 PC 前端 src/api/auth.js
|
||||
*/
|
||||
import { request } from './request.js'
|
||||
|
||||
export const authApi = {
|
||||
/** 登录 */
|
||||
login(username, password, remember = false) {
|
||||
return request.post('/users/login', { username, password, remember })
|
||||
},
|
||||
|
||||
/** 注册 */
|
||||
register(username, email, password) {
|
||||
return request.post('/users/register', { username, useremail: email, userpass: password })
|
||||
},
|
||||
|
||||
/** 通过 cookie 获取用户信息 */
|
||||
getUserInfo() {
|
||||
return request.post('/users/getinfo', {})
|
||||
},
|
||||
|
||||
/** 修改密码 */
|
||||
changePassword(oldPass, newPass) {
|
||||
return request.post('/users/changePassword', { oldpass: oldPass, newpass: newPass })
|
||||
},
|
||||
|
||||
/** 修改邮箱 */
|
||||
changeEmail(newEmail) {
|
||||
return request.post('/users/changeEmail', { newemail: newEmail })
|
||||
},
|
||||
|
||||
/** 修改用户信息 */
|
||||
updateInfo(data) {
|
||||
return request.post('/users/updateInfo', data)
|
||||
},
|
||||
|
||||
/** 更新头像（文件上传） */
|
||||
updateAvatar(filePath) {
|
||||
return request.upload('/users/updateAvatar', filePath)
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
/**
|
||||
* 采购订单相关 API
|
||||
* 对标 PC 前端 src/api/purchase.js
|
||||
*/
|
||||
import { request } from './request.js'
|
||||
|
||||
export const purchaseApi = {
|
||||
/** 获取订单列表（分页+搜索+状态过滤） */
|
||||
getOrders(params = {}) {
|
||||
return request.post('/purchase/getorders', params)
|
||||
},
|
||||
|
||||
/** 获取单个订单详情 */
|
||||
getOrder(id) {
|
||||
return request.post('/purchase/getorder', { id })
|
||||
},
|
||||
|
||||
/** 获取各状态订单数量统计 */
|
||||
getOrderCount() {
|
||||
return request.post('/purchase/getordercount', {})
|
||||
},
|
||||
|
||||
/** 新增订单 */
|
||||
addOrder(data) {
|
||||
return request.post('/purchase/addorder', data)
|
||||
},
|
||||
|
||||
/** 更新订单 */
|
||||
updateOrder(data) {
|
||||
return request.post('/purchase/updateorder', data)
|
||||
},
|
||||
|
||||
/** 更新订单状态 */
|
||||
updateStatus(data) {
|
||||
return request.post('/purchase/updatestatus', data)
|
||||
},
|
||||
|
||||
/** 删除订单 */
|
||||
deleteOrder(id) {
|
||||
return request.post('/purchase/deleteorder', { id })
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,97 @@
|
||||
/**
|
||||
* 统一网络请求封装
|
||||
* 对标 PC 前端 src/api/index.js 的设计
|
||||
* - 自动注入 cookie
|
||||
* - 统一解析 err_code / return 字段
|
||||
* - Cookie 过期自动清理并跳转登录
|
||||
*/
|
||||
|
||||
import { userStore } from '../store/user.js'
|
||||
|
||||
const API_BASE = '/api'
|
||||
|
||||
/**
|
||||
* 底层 POST 请求
|
||||
* @param {string} path - 接口路径，如 /users/login
|
||||
* @param {object} data - 业务数据（会被包在 data 字段下）
|
||||
* @returns {Promise<{errCode, data, raw}>}
|
||||
*/
|
||||
function post(path, data = {}) {
|
||||
const body = { data }
|
||||
|
||||
// 自动注入 cookie
|
||||
const cookieValue = userStore.getCookieValue()
|
||||
if (cookieValue) {
|
||||
body.userCookieValue = cookieValue
|
||||
}
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.request({
|
||||
url: API_BASE + path,
|
||||
method: 'POST',
|
||||
header: { 'Content-Type': 'application/json' },
|
||||
data: body,
|
||||
timeout: 15000,
|
||||
success(res) {
|
||||
const raw = res.data
|
||||
const errCode = raw?.err_code ?? -1
|
||||
|
||||
// Cookie 过期（err_code === -44），自动登出并跳转登录
|
||||
if (errCode === -44) {
|
||||
userStore.logout()
|
||||
uni.reLaunch({ url: '/pages/signin' })
|
||||
reject(new Error('Cookie expired'))
|
||||
return
|
||||
}
|
||||
|
||||
resolve({
|
||||
errCode,
|
||||
data: raw?.return ?? null,
|
||||
raw,
|
||||
})
|
||||
},
|
||||
fail(err) {
|
||||
uni.showToast({ title: '网络连接失败', icon: 'none' })
|
||||
reject(err)
|
||||
},
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 上传文件（FormData）
|
||||
* @param {string} path - 接口路径
|
||||
* @param {string} filePath - 本地文件路径（uni.chooseImage 返回的 tempFilePaths[0]）
|
||||
* @param {string} name - 文件字段名，默认 'file'
|
||||
*/
|
||||
function upload(path, filePath, name = 'file') {
|
||||
const cookieValue = userStore.getCookieValue()
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.uploadFile({
|
||||
url: API_BASE + path,
|
||||
filePath,
|
||||
name,
|
||||
formData: cookieValue ? { cookie: cookieValue } : {},
|
||||
timeout: 30000,
|
||||
success(res) {
|
||||
try {
|
||||
const raw = JSON.parse(res.data)
|
||||
resolve({
|
||||
errCode: raw?.err_code ?? -1,
|
||||
data: raw?.return ?? null,
|
||||
raw,
|
||||
})
|
||||
} catch {
|
||||
reject(new Error('JSON parse error'))
|
||||
}
|
||||
},
|
||||
fail(err) {
|
||||
uni.showToast({ title: '上传失败', icon: 'none' })
|
||||
reject(err)
|
||||
},
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
export const request = { post, upload }
|
||||
@@ -0,0 +1,27 @@
|
||||
/**
|
||||
* 日程相关 API
|
||||
* 对标 PC 前端 src/api/schedule.js
|
||||
*/
|
||||
import { request } from './request.js'
|
||||
|
||||
export const scheduleApi = {
|
||||
/** 获取日程列表 */
|
||||
getEvents(params = {}) {
|
||||
return request.post('/schedule/getevents', params)
|
||||
},
|
||||
|
||||
/** 新增日程 */
|
||||
addEvent(data) {
|
||||
return request.post('/schedule/addevent', data)
|
||||
},
|
||||
|
||||
/** 编辑日程 */
|
||||
editEvent(data) {
|
||||
return request.post('/schedule/editevent', data)
|
||||
},
|
||||
|
||||
/** 删除日程 */
|
||||
deleEvent(data) {
|
||||
return request.post('/schedule/deleevent', data)
|
||||
},
|
||||
}
|
||||
@@ -1,17 +1,14 @@
|
||||
<script>
|
||||
import { userStore } from './store/user.js'
|
||||
|
||||
export default {
|
||||
onLaunch: function() {
|
||||
console.log('App Launch')
|
||||
// 应用启动时恢复登录状态（对标 PC 端 App.vue 的 restoreSession）
|
||||
userStore.restoreSession()
|
||||
},
|
||||
onShow: function() {
|
||||
console.log('App Show')
|
||||
},
|
||||
onHide: function() {
|
||||
console.log('App Hide')
|
||||
}
|
||||
onShow: function() {},
|
||||
onHide: function() {}
|
||||
}
|
||||
import "/static/dist/js/tabler.min.js"
|
||||
import "/static/dist/libs/bootstrap/dist/js/bootstrap.min.js"
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
@@ -71,18 +71,7 @@
|
||||
"vueVersion" : "3",
|
||||
"h5" : {
|
||||
"devServer" : {
|
||||
"disableHostCheck" : true,
|
||||
"proxy" : {
|
||||
"/api" : {
|
||||
"target" : "http://127.0.0.1:8080",
|
||||
"changeOrigin" : true,
|
||||
"secure" : false,
|
||||
"ws": false,
|
||||
"pathRewrite" : {
|
||||
"^/api" : ""
|
||||
}
|
||||
}
|
||||
}
|
||||
"disableHostCheck" : true
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,46 +1,47 @@
|
||||
{
|
||||
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
|
||||
{
|
||||
"path": "pages/index/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "uni-app"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/test/test",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/setting/my_info",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/signin",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "components/setting-menu/setting-menu",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : ""
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationBarTitleText": "uni-app",
|
||||
"navigationBarBackgroundColor": "#F8F8F8",
|
||||
"backgroundColor": "#F8F8F8",
|
||||
"navigationStyle": "custom"
|
||||
},
|
||||
"uniIdRouter": {}
|
||||
"pages": [
|
||||
{
|
||||
"path": "pages/index/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "Operations",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/signin",
|
||||
"style": {
|
||||
"navigationBarTitleText": "登录",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/setting/my_info",
|
||||
"style": {
|
||||
"navigationBarTitleText": "个人设置",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/schedule/schedule",
|
||||
"style": {
|
||||
"navigationBarTitleText": "日程",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/purchase/list",
|
||||
"style": {
|
||||
"navigationBarTitleText": "采购订单",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationBarTitleText": "Operations",
|
||||
"navigationBarBackgroundColor": "#FFFFFF",
|
||||
"backgroundColor": "#F3F4F6",
|
||||
"navigationStyle": "custom"
|
||||
},
|
||||
"uniIdRouter": {}
|
||||
}
|
||||
|
||||
@@ -1,55 +1,484 @@
|
||||
<template>
|
||||
<view class="d-flex flex-column ">
|
||||
<div class="page">
|
||||
<tabler-header></tabler-header>
|
||||
|
||||
<tabler-footer></tabler-footer>
|
||||
</div>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'Hello'
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
/**
|
||||
* 首页
|
||||
* 对标 PC 前端 src/views/HomeView.vue
|
||||
* 展示：今日日程 + 待处理采购订单数量
|
||||
*/
|
||||
import { userStore } from '../../store/user.js'
|
||||
import { scheduleApi } from '../../@api/schedule.js'
|
||||
import { purchaseApi } from '../../@api/purchase.js'
|
||||
|
||||
},
|
||||
methods: {
|
||||
// 颜色类型映射（与 PC 端保持一致）
|
||||
const COLOR_MAP = {
|
||||
'#066FD1': '工作',
|
||||
'#09D119': '值班',
|
||||
'#FF00FF': '考试',
|
||||
'#FFFF00': '待机',
|
||||
'#D16C13': '个人假期',
|
||||
'#D10D21': '公共假期',
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
const WEEKDAYS = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 用户信息
|
||||
isLoggedIn: false,
|
||||
displayName: '',
|
||||
avatarUrl: '/static/ava.svg',
|
||||
|
||||
// 今日日程
|
||||
todaySchedules: [],
|
||||
loadingSchedules: false,
|
||||
|
||||
// 采购订单
|
||||
pendingOrderCount: 0,
|
||||
loadingOrders: false,
|
||||
|
||||
// 今日显示
|
||||
todayDisplay: '',
|
||||
todayStr: '',
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
// ── 工具方法 ──
|
||||
|
||||
getTodayStr() {
|
||||
return new Date().toISOString().split('T')[0]
|
||||
},
|
||||
|
||||
getTodayDisplay() {
|
||||
const today = new Date()
|
||||
const m = today.getMonth() + 1
|
||||
const d = today.getDate()
|
||||
const w = WEEKDAYS[today.getDay()]
|
||||
return `${m}月${d}日 ${w}`
|
||||
},
|
||||
|
||||
getColorLabel(color) {
|
||||
return COLOR_MAP[color] || ''
|
||||
},
|
||||
|
||||
formatDateRange(startDate, endDate) {
|
||||
if (!startDate) return ''
|
||||
if (startDate === endDate) return startDate
|
||||
return `${startDate} ~ ${endDate}`
|
||||
},
|
||||
|
||||
getWeekday(dateStr) {
|
||||
if (!dateStr) return ''
|
||||
return WEEKDAYS[new Date(dateStr).getDay()]
|
||||
},
|
||||
|
||||
// ── 数据加载 ──
|
||||
|
||||
async fetchTodaySchedules() {
|
||||
this.loadingSchedules = true
|
||||
try {
|
||||
const today = this.getTodayStr()
|
||||
const { errCode, data } = await scheduleApi.getEvents({
|
||||
start: today,
|
||||
end: today,
|
||||
})
|
||||
if (errCode === 0 && data?.list) {
|
||||
this.todaySchedules = data.list
|
||||
}
|
||||
} catch {
|
||||
// 静默处理
|
||||
} finally {
|
||||
this.loadingSchedules = false
|
||||
}
|
||||
},
|
||||
|
||||
async fetchPendingOrders() {
|
||||
if (!userStore.isLoggedIn) return
|
||||
this.loadingOrders = true
|
||||
try {
|
||||
const { errCode, data } = await purchaseApi.getOrderCount()
|
||||
if (errCode === 0 && data) {
|
||||
this.pendingOrderCount = data.pending || 0
|
||||
}
|
||||
} catch {
|
||||
// 静默处理
|
||||
} finally {
|
||||
this.loadingOrders = false
|
||||
}
|
||||
},
|
||||
|
||||
refreshUserState() {
|
||||
this.isLoggedIn = userStore.isLoggedIn
|
||||
this.displayName = userStore.getDisplayName()
|
||||
this.avatarUrl = userStore.getAvatarUrl()
|
||||
},
|
||||
|
||||
// ── 导航 ──
|
||||
|
||||
goToSchedule() {
|
||||
uni.navigateTo({ url: '/pages/schedule/schedule' })
|
||||
},
|
||||
|
||||
goToPurchase() {
|
||||
uni.navigateTo({ url: '/pages/purchase/list' })
|
||||
},
|
||||
|
||||
goToLogin() {
|
||||
uni.navigateTo({ url: '/pages/signin' })
|
||||
},
|
||||
|
||||
goToSettings() {
|
||||
uni.navigateTo({ url: '/pages/setting/my_info' })
|
||||
},
|
||||
},
|
||||
|
||||
onShow() {
|
||||
// 每次回到首页都刷新用户状态（登录/登出后回来）
|
||||
this.refreshUserState()
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
this.todayStr = this.getTodayStr()
|
||||
this.todayDisplay = this.getTodayDisplay()
|
||||
this.refreshUserState()
|
||||
this.fetchTodaySchedules()
|
||||
this.fetchPendingOrders()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
<template>
|
||||
<view class="home-page">
|
||||
|
||||
.logo {
|
||||
height: 200rpx;
|
||||
width: 200rpx;
|
||||
margin-top: 200rpx;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
<!-- ── 顶部导航栏 ── -->
|
||||
<view class="navbar">
|
||||
<view class="navbar-left">
|
||||
<image src="/static/logo.svg" class="nav-logo" mode="aspectFit" />
|
||||
<text class="nav-title">Operations</text>
|
||||
</view>
|
||||
<view class="navbar-right">
|
||||
<view v-if="isLoggedIn" class="user-info" @tap="goToSettings">
|
||||
<image :src="avatarUrl" class="avatar" mode="aspectFill" />
|
||||
<text class="username">{{ displayName }}</text>
|
||||
</view>
|
||||
<view v-else class="login-btn" @tap="goToLogin">
|
||||
<text class="login-btn-text">登录</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
.text-area {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
<!-- ── 页面主体 ── -->
|
||||
<scroll-view scroll-y class="content">
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
color: #8f8f94;
|
||||
}
|
||||
</style>
|
||||
<!-- 欢迎语 -->
|
||||
<view class="welcome-row">
|
||||
<text class="welcome-text">
|
||||
{{ isLoggedIn ? `你好，${displayName}` : '欢迎使用' }}
|
||||
</text>
|
||||
<text class="date-text">{{ todayDisplay }}</text>
|
||||
</view>
|
||||
|
||||
<!-- ── 今日日程卡片 ── -->
|
||||
<view class="card" @tap="goToSchedule">
|
||||
<view class="card-header">
|
||||
<view class="card-header-left">
|
||||
<view class="card-icon schedule-icon">
|
||||
<text class="icon-emoji">📅</text>
|
||||
</view>
|
||||
<text class="card-title">日程</text>
|
||||
</view>
|
||||
<text class="card-count">今日 {{ todaySchedules.length }} 项</text>
|
||||
</view>
|
||||
|
||||
<!-- 加载中 -->
|
||||
<view v-if="loadingSchedules" class="empty-hint">
|
||||
<text>加载中…</text>
|
||||
</view>
|
||||
|
||||
<!-- 有日程 -->
|
||||
<view v-else-if="todaySchedules.length > 0" class="schedule-list">
|
||||
<view
|
||||
v-for="item in todaySchedules"
|
||||
:key="item.ID"
|
||||
class="schedule-item"
|
||||
>
|
||||
<!-- 颜色标签 -->
|
||||
<view
|
||||
class="schedule-badge"
|
||||
:style="{ backgroundColor: item.BgColor || '#999' }"
|
||||
>
|
||||
<text class="badge-text">{{ getColorLabel(item.BgColor) }}</text>
|
||||
</view>
|
||||
<!-- 内容 -->
|
||||
<view class="schedule-info">
|
||||
<text class="schedule-title">{{ item.Title }}</text>
|
||||
<text class="schedule-date">
|
||||
{{ formatDateRange(item.StartDate, item.EndDate) }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 无日程 -->
|
||||
<view v-else class="empty-hint">
|
||||
<text>今日暂无日程</text>
|
||||
</view>
|
||||
|
||||
<view class="card-arrow">
|
||||
<text class="arrow-text">查看全部 ›</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- ── 采购订单卡片（仅登录后显示待处理数） ── -->
|
||||
<view class="card" @tap="goToPurchase">
|
||||
<view class="card-header">
|
||||
<view class="card-header-left">
|
||||
<view class="card-icon purchase-icon">
|
||||
<text class="icon-emoji">🛒</text>
|
||||
</view>
|
||||
<text class="card-title">采购订单</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="isLoggedIn" class="stat-row">
|
||||
<view class="stat-item">
|
||||
<text class="stat-num" :class="{ 'num-warning': pendingOrderCount > 0 }">
|
||||
{{ loadingOrders ? '…' : pendingOrderCount || '—' }}
|
||||
</text>
|
||||
<text class="stat-label">待处理</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="empty-hint">
|
||||
<text>登录后查看</text>
|
||||
</view>
|
||||
|
||||
<view class="card-arrow">
|
||||
<text class="arrow-text">查看全部 ›</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* ── 页面容器 ── */
|
||||
.home-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
background-color: #f3f4f6;
|
||||
}
|
||||
|
||||
/* ── 顶部导航 ── */
|
||||
.navbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 88rpx 32rpx 24rpx;
|
||||
background: #fff;
|
||||
border-bottom: 1rpx solid #e5e7eb;
|
||||
}
|
||||
.navbar-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
}
|
||||
.nav-logo {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
.nav-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
}
|
||||
.navbar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
}
|
||||
.avatar {
|
||||
width: 68rpx;
|
||||
height: 68rpx;
|
||||
border-radius: 50%;
|
||||
background: #e5e7eb;
|
||||
}
|
||||
.username {
|
||||
font-size: 28rpx;
|
||||
color: #374151;
|
||||
max-width: 160rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.login-btn {
|
||||
background: #2563eb;
|
||||
border-radius: 40rpx;
|
||||
padding: 12rpx 32rpx;
|
||||
}
|
||||
.login-btn-text {
|
||||
font-size: 28rpx;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ── 内容区 ── */
|
||||
.content {
|
||||
flex: 1;
|
||||
padding: 32rpx 32rpx 40rpx;
|
||||
}
|
||||
|
||||
/* ── 欢迎语 ── */
|
||||
.welcome-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
.welcome-text {
|
||||
font-size: 40rpx;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
}
|
||||
.date-text {
|
||||
font-size: 26rpx;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
/* ── 通用卡片 ── */
|
||||
.card {
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 36rpx;
|
||||
margin-bottom: 28rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
/* ── 卡片头部 ── */
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 28rpx;
|
||||
}
|
||||
.card-header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
}
|
||||
.card-icon {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.schedule-icon { background: #eff6ff; }
|
||||
.purchase-icon { background: #fefce8; }
|
||||
.icon-emoji {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
.card-title {
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
}
|
||||
.card-count {
|
||||
font-size: 26rpx;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
/* ── 日程列表 ── */
|
||||
.schedule-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.schedule-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 20rpx;
|
||||
background: #f9fafb;
|
||||
border-radius: 16rpx;
|
||||
padding: 20rpx 24rpx;
|
||||
}
|
||||
.schedule-badge {
|
||||
border-radius: 8rpx;
|
||||
padding: 6rpx 14rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.badge-text {
|
||||
font-size: 22rpx;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
.schedule-info {
|
||||
flex: 1;
|
||||
}
|
||||
.schedule-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: #1f2937;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.schedule-date {
|
||||
font-size: 24rpx;
|
||||
color: #9ca3af;
|
||||
display: block;
|
||||
margin-top: 6rpx;
|
||||
}
|
||||
|
||||
/* ── 统计行 ── */
|
||||
.stat-row {
|
||||
display: flex;
|
||||
gap: 40rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.stat-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.stat-num {
|
||||
font-size: 56rpx;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
line-height: 1;
|
||||
}
|
||||
.num-warning {
|
||||
color: #d97706;
|
||||
}
|
||||
.stat-label {
|
||||
font-size: 24rpx;
|
||||
color: #9ca3af;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
/* ── 空提示 & 箭头 ── */
|
||||
.empty-hint {
|
||||
padding: 24rpx 0;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
color: #9ca3af;
|
||||
}
|
||||
.card-arrow {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
.arrow-text {
|
||||
font-size: 26rpx;
|
||||
color: #2563eb;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,827 @@
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted } from 'vue'
|
||||
import { purchaseApi } from '../../@api/purchase.js'
|
||||
import { userStore } from '../../store/user.js'
|
||||
|
||||
// ───────────── 状态定义 ─────────────
|
||||
const loading = ref(false)
|
||||
const orders = ref([])
|
||||
const total = ref(0)
|
||||
const page = ref(1)
|
||||
const pageSize = 20
|
||||
const hasMore = ref(true)
|
||||
const loadingMore = ref(false)
|
||||
|
||||
// 搜索和过滤
|
||||
const searchText = ref('')
|
||||
const activeStatus = ref('') // '' = 全部
|
||||
|
||||
// 订单详情
|
||||
const showDetail = ref(false)
|
||||
const detailLoading = ref(false)
|
||||
const detailOrder = ref(null)
|
||||
const detailCosts = ref([])
|
||||
const detailPhotos = ref([])
|
||||
const detailCommits = ref([])
|
||||
const detailCanModify = ref(false)
|
||||
|
||||
// 状态变更弹窗
|
||||
const showStatusModal = ref(false)
|
||||
const pendingStatus = ref('')
|
||||
const pendingComment = ref('')
|
||||
const updatingStatus = ref(false)
|
||||
|
||||
// 统计数字
|
||||
const countMap = reactive({
|
||||
pending: 0, ordered: 0, arrived: 0, received: 0, lost: 0, returned: 0,
|
||||
})
|
||||
|
||||
// ───────────── 常量 ─────────────
|
||||
const statusOptions = [
|
||||
{ value: '', label: '全部', color: '#6b7280' },
|
||||
{ value: 'pending', label: '待订购', color: '#d97706' },
|
||||
{ value: 'ordered', label: '已下单', color: '#2563eb' },
|
||||
{ value: 'arrived', label: '已到货', color: '#7c3aed' },
|
||||
{ value: 'received', label: '已收货', color: '#059669' },
|
||||
{ value: 'lost', label: '已丢失', color: '#dc2626' },
|
||||
{ value: 'returned', label: '已退回', color: '#9ca3af' },
|
||||
]
|
||||
|
||||
const currencyMap = { 1: 'CNY', 2: 'MOP', 3: 'HKD', 4: 'USD' }
|
||||
const costTypeMap = { 1: '单价', 2: '运费' }
|
||||
|
||||
// ───────────── 工具函数 ─────────────
|
||||
function getStatusLabel(val) {
|
||||
return statusOptions.find(o => o.value === val)?.label || val
|
||||
}
|
||||
|
||||
function getStatusColor(val) {
|
||||
return statusOptions.find(o => o.value === val)?.color || '#6b7280'
|
||||
}
|
||||
|
||||
function formatDate(str) {
|
||||
if (!str) return '-'
|
||||
const d = new Date(str)
|
||||
if (isNaN(d.getTime())) return '-'
|
||||
return d.toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })
|
||||
}
|
||||
|
||||
function formatPrice(cents) {
|
||||
if (!cents) return '0.00'
|
||||
return (cents / 100).toFixed(2)
|
||||
}
|
||||
|
||||
function getPhotoUrl(hash) {
|
||||
return `/api/files/get/${hash}`
|
||||
}
|
||||
|
||||
// 按货币分组合计
|
||||
const costsByCurrency = computed(() => {
|
||||
const groups = {}
|
||||
detailCosts.value.forEach(c => {
|
||||
const cur = currencyMap[c.CurrencyType] || 'Unknown'
|
||||
const amount = c.Price && c.Quantity ? (c.Price * c.Quantity / 100) : 0
|
||||
groups[cur] = (groups[cur] || 0) + amount
|
||||
})
|
||||
return Object.entries(groups).map(([currency, total]) => ({
|
||||
currency,
|
||||
total: total.toFixed(2),
|
||||
}))
|
||||
})
|
||||
|
||||
// ───────────── 数据加载 ─────────────
|
||||
async function loadOrderCount() {
|
||||
try {
|
||||
const { errCode, data } = await purchaseApi.getOrderCount()
|
||||
if (errCode === 0 && data) {
|
||||
Object.assign(countMap, data)
|
||||
}
|
||||
} catch {}
|
||||
}
|
||||
|
||||
async function loadOrders(reset = true) {
|
||||
if (reset) {
|
||||
page.value = 1
|
||||
hasMore.value = true
|
||||
orders.value = []
|
||||
}
|
||||
if (!hasMore.value) return
|
||||
loading.value = reset
|
||||
loadingMore.value = !reset
|
||||
try {
|
||||
const { errCode, data } = await purchaseApi.getOrders({
|
||||
page: page.value,
|
||||
pageSize,
|
||||
search: searchText.value.trim(),
|
||||
status: activeStatus.value,
|
||||
})
|
||||
if (errCode === 0 && data) {
|
||||
const list = data.list || []
|
||||
total.value = data.total || 0
|
||||
if (reset) {
|
||||
orders.value = list
|
||||
} else {
|
||||
orders.value.push(...list)
|
||||
}
|
||||
hasMore.value = orders.value.length < total.value
|
||||
page.value++
|
||||
}
|
||||
} finally {
|
||||
loading.value = false
|
||||
loadingMore.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function onSearch() {
|
||||
loadOrders(true)
|
||||
}
|
||||
|
||||
function setStatus(val) {
|
||||
activeStatus.value = val
|
||||
loadOrders(true)
|
||||
}
|
||||
|
||||
function loadMore() {
|
||||
if (!loadingMore.value && hasMore.value) {
|
||||
loadOrders(false)
|
||||
}
|
||||
}
|
||||
|
||||
// ───────────── 订单详情 ─────────────
|
||||
async function openDetail(order) {
|
||||
showDetail.value = true
|
||||
detailLoading.value = true
|
||||
detailOrder.value = null
|
||||
try {
|
||||
const { errCode, data } = await purchaseApi.getOrder(order.ID)
|
||||
if (errCode === 0 && data) {
|
||||
detailOrder.value = data.order ?? null
|
||||
detailCanModify.value = data.canModify ?? false
|
||||
detailCosts.value = data.costs ?? []
|
||||
detailPhotos.value = data.photos ?? []
|
||||
detailCommits.value = data.commits ?? []
|
||||
}
|
||||
} finally {
|
||||
detailLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function closeDetail() {
|
||||
showDetail.value = false
|
||||
}
|
||||
|
||||
// ───────────── 状态变更 ─────────────
|
||||
function openStatusModal(status) {
|
||||
if (status === detailOrder.value?.OrderStatus) return
|
||||
pendingStatus.value = status
|
||||
pendingComment.value = ''
|
||||
showStatusModal.value = true
|
||||
}
|
||||
|
||||
function closeStatusModal() {
|
||||
showStatusModal.value = false
|
||||
pendingStatus.value = ''
|
||||
pendingComment.value = ''
|
||||
}
|
||||
|
||||
async function confirmStatusChange() {
|
||||
if (!pendingStatus.value) return
|
||||
updatingStatus.value = true
|
||||
try {
|
||||
const { errCode } = await purchaseApi.updateStatus({
|
||||
id: detailOrder.value.ID,
|
||||
status: pendingStatus.value,
|
||||
comment: pendingComment.value,
|
||||
})
|
||||
if (errCode === 0) {
|
||||
uni.showToast({ title: '状态已更新', icon: 'success' })
|
||||
closeStatusModal()
|
||||
// 刷新详情
|
||||
await openDetail(detailOrder.value)
|
||||
// 刷新列表
|
||||
loadOrders(true)
|
||||
loadOrderCount()
|
||||
} else {
|
||||
uni.showToast({ title: '操作失败', icon: 'none' })
|
||||
}
|
||||
} catch {
|
||||
uni.showToast({ title: '网络错误', icon: 'none' })
|
||||
} finally {
|
||||
updatingStatus.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// ───────────── 生命周期 ─────────────
|
||||
onMounted(() => {
|
||||
if (!userStore.isLoggedIn) {
|
||||
uni.reLaunch({ url: '/pages/signin' })
|
||||
return
|
||||
}
|
||||
loadOrderCount()
|
||||
loadOrders()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="page-wrap">
|
||||
<!-- 顶部搜索栏 -->
|
||||
<view class="search-bar">
|
||||
<view class="search-input-wrap">
|
||||
<text class="search-icon">🔍</text>
|
||||
<input
|
||||
v-model="searchText"
|
||||
class="search-input"
|
||||
placeholder="搜索订单名称…"
|
||||
confirm-type="search"
|
||||
@confirm="onSearch"
|
||||
/>
|
||||
<text v-if="searchText" class="search-clear" @tap="searchText = ''; onSearch()">✕</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 状态过滤标签 -->
|
||||
<scroll-view scroll-x class="status-tabs">
|
||||
<view class="status-tabs-inner">
|
||||
<view
|
||||
v-for="opt in statusOptions"
|
||||
:key="opt.value"
|
||||
class="status-tab"
|
||||
:class="{ 'status-tab-active': activeStatus === opt.value }"
|
||||
:style="activeStatus === opt.value ? { borderColor: opt.color, color: opt.color } : {}"
|
||||
@tap="setStatus(opt.value)"
|
||||
>
|
||||
{{ opt.label }}
|
||||
<text v-if="opt.value && countMap[opt.value]" class="tab-badge">
|
||||
{{ countMap[opt.value] }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 加载中 -->
|
||||
<view v-if="loading" class="loading-box">
|
||||
<text class="loading-text">加载中…</text>
|
||||
</view>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<view v-else-if="!orders.length" class="empty-box">
|
||||
<text class="empty-icon">📦</text>
|
||||
<text class="empty-text">暂无采购订单</text>
|
||||
</view>
|
||||
|
||||
<!-- 订单列表 -->
|
||||
<scroll-view v-else scroll-y class="list-scroll" @scrolltolower="loadMore">
|
||||
<view
|
||||
v-for="order in orders"
|
||||
:key="order.ID"
|
||||
class="order-card"
|
||||
@tap="openDetail(order)"
|
||||
>
|
||||
<view class="order-card-top">
|
||||
<text class="order-title">{{ order.Title }}</text>
|
||||
<view
|
||||
class="order-status-badge"
|
||||
:style="{ backgroundColor: getStatusColor(order.OrderStatus) + '20', color: getStatusColor(order.OrderStatus) }"
|
||||
>
|
||||
{{ getStatusLabel(order.OrderStatus) }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="order-card-meta">
|
||||
<text class="meta-text">#{{ order.ID }}</text>
|
||||
<text class="meta-sep">·</text>
|
||||
<text class="meta-text">{{ formatDate(order.CreatedAt) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="loadingMore" class="load-more-tip">
|
||||
<text class="loading-text">加载更多…</text>
|
||||
</view>
|
||||
<view v-else-if="!hasMore && orders.length" class="load-more-tip">
|
||||
<text style="color:#d1d5db;font-size:24rpx;">已加载全部 {{ total }} 条</text>
|
||||
</view>
|
||||
<view style="height:40rpx;" />
|
||||
</scroll-view>
|
||||
|
||||
<!-- ─────────────────────────────────────────
|
||||
订单详情底部抽屉
|
||||
───────────────────────────────────────── -->
|
||||
<view v-if="showDetail" class="drawer-mask" @tap.self="closeDetail">
|
||||
<view class="drawer-box">
|
||||
<!-- 抽屉头部 -->
|
||||
<view class="drawer-header">
|
||||
<text class="drawer-title">订单详情</text>
|
||||
<text class="drawer-close" @tap="closeDetail">✕</text>
|
||||
</view>
|
||||
|
||||
<!-- 加载中 -->
|
||||
<view v-if="detailLoading" class="loading-box" style="height:300rpx;">
|
||||
<text class="loading-text">加载中…</text>
|
||||
</view>
|
||||
|
||||
<scroll-view v-else-if="detailOrder" scroll-y class="drawer-scroll">
|
||||
<!-- 基本信息 -->
|
||||
<view class="detail-section">
|
||||
<view class="detail-row">
|
||||
<text class="detail-label">名称</text>
|
||||
<text class="detail-value">{{ detailOrder.Title }}</text>
|
||||
</view>
|
||||
<view class="detail-row">
|
||||
<text class="detail-label">当前状态</text>
|
||||
<view
|
||||
class="order-status-badge"
|
||||
:style="{ backgroundColor: getStatusColor(detailOrder.OrderStatus) + '20', color: getStatusColor(detailOrder.OrderStatus) }"
|
||||
>
|
||||
{{ getStatusLabel(detailOrder.OrderStatus) }}
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="detailOrder.Styles" class="detail-row">
|
||||
<text class="detail-label">款式备注</text>
|
||||
<text class="detail-value">{{ detailOrder.Styles }}</text>
|
||||
</view>
|
||||
<view v-if="detailOrder.Remark" class="detail-row">
|
||||
<text class="detail-label">备注</text>
|
||||
<text class="detail-value">{{ detailOrder.Remark }}</text>
|
||||
</view>
|
||||
<view v-if="detailOrder.Link" class="detail-row">
|
||||
<text class="detail-label">链接</text>
|
||||
<text class="detail-value detail-link" @tap="uni.setClipboardData({ data: detailOrder.Link, success: () => uni.showToast({ title: '链接已复制', icon: 'none' }) })">
|
||||
{{ detailOrder.Link }}（点击复制）
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 状态切换（仅可修改者显示） -->
|
||||
<view v-if="detailCanModify" class="detail-section">
|
||||
<text class="section-title">变更状态</text>
|
||||
<view class="status-change-grid">
|
||||
<view
|
||||
v-for="opt in statusOptions.slice(1)"
|
||||
:key="opt.value"
|
||||
class="status-change-btn"
|
||||
:class="{ 'status-change-active': detailOrder.OrderStatus === opt.value }"
|
||||
:style="detailOrder.OrderStatus === opt.value
|
||||
? { backgroundColor: opt.color, color: '#fff' }
|
||||
: { borderColor: opt.color, color: opt.color }"
|
||||
@tap="openStatusModal(opt.value)"
|
||||
>
|
||||
{{ opt.label }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 费用明细 -->
|
||||
<view v-if="detailCosts.length" class="detail-section">
|
||||
<text class="section-title">费用明细</text>
|
||||
<view v-for="c in detailCosts" :key="c.ID" class="cost-row">
|
||||
<text class="cost-type">{{ costTypeMap[c.CostType] || c.CostType }}</text>
|
||||
<text class="cost-num">x{{ c.Quantity }}</text>
|
||||
<text class="cost-price">{{ formatPrice(c.Price) }}</text>
|
||||
<text class="cost-cur">{{ currencyMap[c.CurrencyType] || '-' }}</text>
|
||||
</view>
|
||||
<!-- 合计 -->
|
||||
<view class="cost-total-row">
|
||||
<text class="cost-total-label">合计</text>
|
||||
<view class="cost-total-values">
|
||||
<text v-for="g in costsByCurrency" :key="g.currency" class="cost-total-tag">
|
||||
{{ g.currency }} {{ g.total }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 图片备注 -->
|
||||
<view v-if="detailPhotos.length" class="detail-section">
|
||||
<text class="section-title">图片备注</text>
|
||||
<view class="photo-grid">
|
||||
<image
|
||||
v-for="p in detailPhotos"
|
||||
:key="p.ID"
|
||||
:src="getPhotoUrl(p.Sha256)"
|
||||
mode="aspectFill"
|
||||
class="photo-thumb"
|
||||
@tap="uni.previewImage({ urls: detailPhotos.map(ph => getPhotoUrl(ph.Sha256)), current: getPhotoUrl(p.Sha256) })"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 状态记录 -->
|
||||
<view v-if="detailCommits.length" class="detail-section">
|
||||
<text class="section-title">变更记录</text>
|
||||
<view v-for="c in detailCommits" :key="c.id" class="commit-row">
|
||||
<view
|
||||
class="commit-dot"
|
||||
:style="{ backgroundColor: getStatusColor(c.status) }"
|
||||
/>
|
||||
<view class="commit-body">
|
||||
<view class="commit-top">
|
||||
<view
|
||||
class="commit-badge"
|
||||
:style="{ backgroundColor: getStatusColor(c.status) + '20', color: getStatusColor(c.status) }"
|
||||
>{{ getStatusLabel(c.status) }}</view>
|
||||
<text class="commit-date">{{ formatDate(c.createdAt) }}</text>
|
||||
</view>
|
||||
<text v-if="c.comment" class="commit-comment">{{ c.comment }}</text>
|
||||
<view v-if="c.photos?.length" class="commit-photos">
|
||||
<image
|
||||
v-for="hash in c.photos"
|
||||
:key="hash"
|
||||
:src="getPhotoUrl(hash)"
|
||||
mode="aspectFill"
|
||||
class="commit-photo"
|
||||
@tap="uni.previewImage({ urls: c.photos.map(h => getPhotoUrl(h)), current: getPhotoUrl(hash) })"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view style="height:60rpx;" />
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- ─────────────────────────────────────────
|
||||
状态变更弹窗
|
||||
───────────────────────────────────────── -->
|
||||
<view v-if="showStatusModal" class="modal-mask" @tap.self="closeStatusModal">
|
||||
<view class="modal-box">
|
||||
<view class="modal-header">
|
||||
<text class="modal-title">变更状态</text>
|
||||
<text class="modal-close" @tap="closeStatusModal">✕</text>
|
||||
</view>
|
||||
<view class="modal-body">
|
||||
<view class="form-item">
|
||||
<text class="form-label">目标状态</text>
|
||||
<view
|
||||
class="status-preview"
|
||||
:style="{ backgroundColor: getStatusColor(pendingStatus) + '20', color: getStatusColor(pendingStatus) }"
|
||||
>
|
||||
{{ getStatusLabel(pendingStatus) }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="form-label">变更备注（可选）</text>
|
||||
<textarea
|
||||
v-model="pendingComment"
|
||||
class="form-textarea"
|
||||
placeholder="填写变更原因或说明"
|
||||
maxlength="500"
|
||||
auto-height
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="modal-footer" style="justify-content: flex-end;">
|
||||
<view class="footer-right">
|
||||
<button class="btn-cancel" @tap="closeStatusModal">取消</button>
|
||||
<button class="btn-primary" :disabled="updatingStatus" @tap="confirmStatusChange">
|
||||
{{ updatingStatus ? '提交中…' : '确认变更' }}
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.page-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
background: #f3f4f6;
|
||||
}
|
||||
|
||||
/* 搜索栏 */
|
||||
.search-bar {
|
||||
background: #fff;
|
||||
padding: 48rpx 24rpx 16rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
|
||||
}
|
||||
.search-input-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #f3f4f6;
|
||||
border-radius: 48rpx;
|
||||
padding: 12rpx 24rpx;
|
||||
gap: 12rpx;
|
||||
}
|
||||
.search-icon { font-size: 28rpx; color: #9ca3af; }
|
||||
.search-input { flex: 1; font-size: 28rpx; color: #111827; background: transparent; }
|
||||
.search-clear { font-size: 28rpx; color: #9ca3af; padding: 4rpx; }
|
||||
|
||||
/* 状态标签 */
|
||||
.status-tabs {
|
||||
background: #fff;
|
||||
white-space: nowrap;
|
||||
border-bottom: 1rpx solid #f3f4f6;
|
||||
}
|
||||
.status-tabs-inner {
|
||||
display: inline-flex;
|
||||
padding: 0 16rpx;
|
||||
gap: 8rpx;
|
||||
}
|
||||
.status-tab {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
padding: 16rpx 20rpx;
|
||||
font-size: 26rpx;
|
||||
color: #6b7280;
|
||||
border-bottom: 4rpx solid transparent;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.status-tab-active {
|
||||
font-weight: 600;
|
||||
border-bottom-color: currentColor;
|
||||
}
|
||||
.tab-badge {
|
||||
background: #f3f4f6;
|
||||
color: inherit;
|
||||
font-size: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
padding: 2rpx 10rpx;
|
||||
}
|
||||
|
||||
/* 加载/空状态 */
|
||||
.loading-box, .empty-box {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 16rpx;
|
||||
}
|
||||
.loading-text { color: #9ca3af; font-size: 28rpx; }
|
||||
.empty-icon { font-size: 80rpx; }
|
||||
.empty-text { color: #9ca3af; font-size: 28rpx; }
|
||||
|
||||
/* 订单列表 */
|
||||
.list-scroll { flex: 1; padding: 20rpx; }
|
||||
.order-card {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 16rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
|
||||
}
|
||||
.order-card-top {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
.order-title {
|
||||
flex: 1;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
}
|
||||
.order-status-badge {
|
||||
font-size: 22rpx;
|
||||
font-weight: 500;
|
||||
padding: 4rpx 16rpx;
|
||||
border-radius: 20rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.order-card-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
}
|
||||
.meta-text { font-size: 24rpx; color: #9ca3af; }
|
||||
.meta-sep { font-size: 24rpx; color: #d1d5db; }
|
||||
|
||||
.load-more-tip {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 16rpx 0;
|
||||
}
|
||||
|
||||
/* ─── 抽屉 ─── */
|
||||
.drawer-mask {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.5);
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.drawer-box {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-radius: 32rpx 32rpx 0 0;
|
||||
height: 85vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.drawer-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 32rpx;
|
||||
border-bottom: 1rpx solid #f3f4f6;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.drawer-title { font-size: 32rpx; font-weight: 600; color: #111827; }
|
||||
.drawer-close { font-size: 36rpx; color: #9ca3af; }
|
||||
.drawer-scroll { flex: 1; }
|
||||
|
||||
/* 详情区块 */
|
||||
.detail-section {
|
||||
padding: 24rpx 32rpx;
|
||||
border-bottom: 1rpx solid #f9fafb;
|
||||
}
|
||||
.section-title {
|
||||
display: block;
|
||||
font-size: 26rpx;
|
||||
color: #6b7280;
|
||||
font-weight: 600;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
.detail-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 16rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
.detail-label {
|
||||
font-size: 26rpx;
|
||||
color: #9ca3af;
|
||||
width: 120rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.detail-value {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
color: #111827;
|
||||
word-break: break-all;
|
||||
}
|
||||
.detail-link { color: #2563eb; }
|
||||
|
||||
/* 状态切换网格 */
|
||||
.status-change-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16rpx;
|
||||
}
|
||||
.status-change-btn {
|
||||
text-align: center;
|
||||
padding: 16rpx 8rpx;
|
||||
border-radius: 12rpx;
|
||||
font-size: 26rpx;
|
||||
border: 2rpx solid;
|
||||
}
|
||||
.status-change-active { font-weight: 600; }
|
||||
|
||||
/* 费用明细 */
|
||||
.cost-row {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
padding: 12rpx 0;
|
||||
border-bottom: 1rpx solid #f9fafb;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.cost-type { flex: 1; color: #374151; }
|
||||
.cost-num { color: #9ca3af; }
|
||||
.cost-price { font-weight: 500; color: #111827; }
|
||||
.cost-cur { color: #6b7280; width: 80rpx; text-align: right; }
|
||||
.cost-total-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-top: 16rpx;
|
||||
}
|
||||
.cost-total-label { font-size: 26rpx; color: #6b7280; font-weight: 600; }
|
||||
.cost-total-values { display: flex; gap: 8rpx; flex-wrap: wrap; }
|
||||
.cost-total-tag {
|
||||
background: #dbeafe;
|
||||
color: #1d4ed8;
|
||||
font-size: 22rpx;
|
||||
font-weight: 600;
|
||||
padding: 4rpx 16rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
/* 图片网格 */
|
||||
.photo-grid { display: flex; flex-wrap: wrap; gap: 12rpx; }
|
||||
.photo-thumb {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
border-radius: 12rpx;
|
||||
background: #f3f4f6;
|
||||
}
|
||||
|
||||
/* 变更记录 */
|
||||
.commit-row {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
padding: 16rpx 0;
|
||||
border-bottom: 1rpx solid #f9fafb;
|
||||
}
|
||||
.commit-dot {
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
.commit-body { flex: 1; min-width: 0; }
|
||||
.commit-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
.commit-badge {
|
||||
font-size: 22rpx;
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
.commit-date { font-size: 22rpx; color: #9ca3af; }
|
||||
.commit-comment { font-size: 26rpx; color: #374151; display: block; margin-top: 4rpx; }
|
||||
.commit-photos { display: flex; flex-wrap: wrap; gap: 8rpx; margin-top: 8rpx; }
|
||||
.commit-photo {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 8rpx;
|
||||
background: #f3f4f6;
|
||||
}
|
||||
|
||||
/* ─── 模态框 ─── */
|
||||
.modal-mask {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.5);
|
||||
z-index: 200;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.modal-box {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-radius: 32rpx 32rpx 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 32rpx 32rpx 24rpx;
|
||||
border-bottom: 1rpx solid #f3f4f6;
|
||||
}
|
||||
.modal-title { font-size: 32rpx; font-weight: 600; color: #111827; }
|
||||
.modal-close { font-size: 36rpx; color: #9ca3af; }
|
||||
.modal-body { padding: 24rpx 32rpx; }
|
||||
.form-item { margin-bottom: 28rpx; }
|
||||
.form-label {
|
||||
display: block;
|
||||
font-size: 26rpx;
|
||||
color: #6b7280;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
.status-preview {
|
||||
display: inline-flex;
|
||||
padding: 8rpx 24rpx;
|
||||
border-radius: 20rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
.form-textarea {
|
||||
width: 100%;
|
||||
min-height: 120rpx;
|
||||
border: 2rpx solid #e5e7eb;
|
||||
border-radius: 12rpx;
|
||||
padding: 16rpx 20rpx;
|
||||
font-size: 28rpx;
|
||||
color: #111827;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 32rpx 48rpx;
|
||||
border-top: 1rpx solid #f3f4f6;
|
||||
}
|
||||
.footer-right { display: flex; gap: 16rpx; margin-left: auto; }
|
||||
.btn-cancel {
|
||||
background: #f3f4f6;
|
||||
color: #374151;
|
||||
border: none;
|
||||
border-radius: 12rpx;
|
||||
padding: 16rpx 32rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.btn-primary {
|
||||
background: #2563eb;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 12rpx;
|
||||
padding: 16rpx 32rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
button[disabled] { opacity: 0.5; }
|
||||
</style>
|
||||
@@ -0,0 +1,627 @@
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, onUnmounted } from 'vue'
|
||||
import { scheduleApi } from '../../@api/schedule.js'
|
||||
import { userStore } from '../../store/user.js'
|
||||
|
||||
// ───────────── 状态 ─────────────
|
||||
const loading = ref(false)
|
||||
const events = ref([])
|
||||
const showModal = ref(false)
|
||||
|
||||
// 当前选中月份（YYYY-MM）
|
||||
const today = new Date()
|
||||
const curYear = ref(today.getFullYear())
|
||||
const curMonth = ref(today.getMonth() + 1) // 1~12
|
||||
|
||||
// 事件表单
|
||||
const form = reactive({
|
||||
id: 0,
|
||||
title: '',
|
||||
startDate: '',
|
||||
endDate: '',
|
||||
color: '#066FD1',
|
||||
isEditing: false,
|
||||
isEditable: true,
|
||||
})
|
||||
|
||||
// 颜色选项（对标 PC 端 scheduleView.vue）
|
||||
const colorOptions = [
|
||||
{ value: '#066FD1', label: '工作' },
|
||||
{ value: '#09D119', label: '值班' },
|
||||
{ value: '#FF00FF', label: '考试' },
|
||||
{ value: '#FFFF00', label: '待命' },
|
||||
{ value: '#D16C13', label: '私假' },
|
||||
{ value: '#D10D21', label: '公假' },
|
||||
]
|
||||
|
||||
// ───────────── 工具函数 ─────────────
|
||||
function pad(n) { return String(n).padStart(2, '0') }
|
||||
|
||||
function todayStr() {
|
||||
return `${today.getFullYear()}-${pad(today.getMonth() + 1)}-${pad(today.getDate())}`
|
||||
}
|
||||
|
||||
function monthStart() {
|
||||
return `${curYear.value}-${pad(curMonth.value)}-01`
|
||||
}
|
||||
|
||||
function monthEnd() {
|
||||
// 下个月第 0 天 = 本月最后一天
|
||||
const last = new Date(curYear.value, curMonth.value, 0)
|
||||
return `${curYear.value}-${pad(curMonth.value)}-${pad(last.getDate())}`
|
||||
}
|
||||
|
||||
function formatDate(str) {
|
||||
if (!str) return ''
|
||||
return str.slice(0, 10)
|
||||
}
|
||||
|
||||
function isToday(dateStr) {
|
||||
return dateStr && dateStr.slice(0, 10) === todayStr()
|
||||
}
|
||||
|
||||
// 判断 event 是否在当天日期范围内
|
||||
function isTodayEvent(item) {
|
||||
const t = todayStr()
|
||||
const s = (item.StartDate || '').slice(0, 10)
|
||||
const e = (item.EndDate || item.StartDate || '').slice(0, 10)
|
||||
return s <= t && t <= e
|
||||
}
|
||||
|
||||
function colorLabel(hex) {
|
||||
return colorOptions.find(c => c.value === hex)?.label || ''
|
||||
}
|
||||
|
||||
// ───────────── API 调用 ─────────────
|
||||
async function loadEvents() {
|
||||
loading.value = true
|
||||
try {
|
||||
const { errCode, data } = await scheduleApi.getEvents({
|
||||
start: monthStart(),
|
||||
end: monthEnd(),
|
||||
})
|
||||
if (errCode === 0 && data?.list) {
|
||||
events.value = data.list
|
||||
}
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// ───────────── 月份切换 ─────────────
|
||||
function prevMonth() {
|
||||
if (curMonth.value === 1) { curYear.value--; curMonth.value = 12 }
|
||||
else curMonth.value--
|
||||
loadEvents()
|
||||
}
|
||||
|
||||
function nextMonth() {
|
||||
if (curMonth.value === 12) { curYear.value++; curMonth.value = 1 }
|
||||
else curMonth.value++
|
||||
loadEvents()
|
||||
}
|
||||
|
||||
function goToday() {
|
||||
curYear.value = today.getFullYear()
|
||||
curMonth.value = today.getMonth() + 1
|
||||
loadEvents()
|
||||
}
|
||||
|
||||
// ───────────── 日程按日期分组 ─────────────
|
||||
function groupByDate(list) {
|
||||
const map = {}
|
||||
list.forEach(item => {
|
||||
const key = (item.StartDate || '').slice(0, 10)
|
||||
if (!map[key]) map[key] = []
|
||||
map[key].push(item)
|
||||
})
|
||||
return Object.keys(map).sort().map(date => ({ date, items: map[date] }))
|
||||
}
|
||||
|
||||
// ───────────── 模态框操作 ─────────────
|
||||
function openAdd() {
|
||||
if (!userStore.isLoggedIn) {
|
||||
uni.showToast({ title: '请先登录', icon: 'none' })
|
||||
return
|
||||
}
|
||||
Object.assign(form, {
|
||||
id: 0,
|
||||
title: '',
|
||||
startDate: todayStr(),
|
||||
endDate: todayStr(),
|
||||
color: '#066FD1',
|
||||
isEditing: false,
|
||||
isEditable: true,
|
||||
})
|
||||
showModal.value = true
|
||||
}
|
||||
|
||||
function openEdit(item) {
|
||||
Object.assign(form, {
|
||||
id: item.ID,
|
||||
title: item.Title,
|
||||
startDate: (item.StartDate || '').slice(0, 10),
|
||||
endDate: (item.EndDate || item.StartDate || '').slice(0, 10),
|
||||
color: item.BgColor || '#066FD1',
|
||||
isEditing: true,
|
||||
isEditable: item.edit !== false,
|
||||
})
|
||||
showModal.value = true
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
showModal.value = false
|
||||
}
|
||||
|
||||
async function submitForm() {
|
||||
if (!form.title.trim()) {
|
||||
uni.showToast({ title: '请输入日程内容', icon: 'none' })
|
||||
return
|
||||
}
|
||||
try {
|
||||
let res
|
||||
if (form.isEditing) {
|
||||
res = await scheduleApi.editEvent({
|
||||
id: form.id,
|
||||
title: form.title.trim(),
|
||||
start: form.startDate,
|
||||
end: form.startDate === form.endDate ? form.endDate : form.endDate,
|
||||
color: form.color,
|
||||
})
|
||||
} else {
|
||||
res = await scheduleApi.addEvent({
|
||||
title: form.title.trim(),
|
||||
start: form.startDate,
|
||||
end: form.startDate === form.endDate ? form.endDate : form.endDate,
|
||||
color: form.color,
|
||||
})
|
||||
}
|
||||
if (res.errCode === 0 && res.data?.err_code === 0 || res.raw?.err_code === 0) {
|
||||
uni.showToast({ title: form.isEditing ? '修改成功' : '添加成功', icon: 'success' })
|
||||
closeModal()
|
||||
loadEvents()
|
||||
} else {
|
||||
uni.showToast({ title: '操作失败', icon: 'none' })
|
||||
}
|
||||
} catch {
|
||||
uni.showToast({ title: '网络错误', icon: 'none' })
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteEvent() {
|
||||
if (!form.isEditable) return
|
||||
uni.showModal({
|
||||
title: '确认删除',
|
||||
content: '确定要删除这个日程吗？',
|
||||
success: async (res) => {
|
||||
if (!res.confirm) return
|
||||
try {
|
||||
const r = await scheduleApi.deleEvent({ id: form.id })
|
||||
if (r.raw?.err_code === 0) {
|
||||
uni.showToast({ title: '已删除', icon: 'success' })
|
||||
closeModal()
|
||||
loadEvents()
|
||||
}
|
||||
} catch {
|
||||
uni.showToast({ title: '删除失败', icon: 'none' })
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// ───────────── 生命周期 ─────────────
|
||||
let timer = null
|
||||
onMounted(() => {
|
||||
loadEvents()
|
||||
timer = setInterval(loadEvents, 30000)
|
||||
})
|
||||
onUnmounted(() => {
|
||||
if (timer) clearInterval(timer)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="page-wrap">
|
||||
<!-- 顶部导航 -->
|
||||
<view class="nav-bar">
|
||||
<view class="nav-left" @tap="prevMonth">
|
||||
<text class="nav-arrow">‹</text>
|
||||
</view>
|
||||
<view class="nav-center" @tap="goToday">
|
||||
<text class="nav-title">{{ curYear }} 年 {{ curMonth }} 月</text>
|
||||
<text class="nav-sub">点击回今天</text>
|
||||
</view>
|
||||
<view class="nav-right" @tap="nextMonth">
|
||||
<text class="nav-arrow">›</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 加载中 -->
|
||||
<view v-if="loading" class="loading-box">
|
||||
<text class="loading-text">加载中…</text>
|
||||
</view>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<view v-else-if="!events.length" class="empty-box">
|
||||
<text class="empty-icon">📅</text>
|
||||
<text class="empty-text">本月暂无日程</text>
|
||||
</view>
|
||||
|
||||
<!-- 日程列表（按日期分组） -->
|
||||
<scroll-view v-else scroll-y class="list-scroll">
|
||||
<view v-for="group in groupByDate(events)" :key="group.date" class="date-group">
|
||||
<!-- 日期标题 -->
|
||||
<view class="date-header" :class="{ 'date-today': isToday(group.date) }">
|
||||
<text class="date-text">{{ group.date }}</text>
|
||||
<text v-if="isToday(group.date)" class="today-badge">今天</text>
|
||||
</view>
|
||||
<!-- 该日期下的事件 -->
|
||||
<view
|
||||
v-for="item in group.items"
|
||||
:key="item.ID"
|
||||
class="event-card"
|
||||
@tap="openEdit(item)"
|
||||
>
|
||||
<view class="event-color-bar" :style="{ backgroundColor: item.BgColor || '#066FD1' }" />
|
||||
<view class="event-body">
|
||||
<text class="event-title">{{ item.Title }}</text>
|
||||
<text class="event-meta">
|
||||
{{ colorLabel(item.BgColor) }}
|
||||
<text v-if="item.StartDate !== item.EndDate">
|
||||
· {{ formatDate(item.StartDate) }} ~ {{ formatDate(item.EndDate) }}
|
||||
</text>
|
||||
</text>
|
||||
</view>
|
||||
<text v-if="item.edit !== false" class="event-edit-icon">›</text>
|
||||
</view>
|
||||
</view>
|
||||
<view style="height: 80px;" />
|
||||
</scroll-view>
|
||||
|
||||
<!-- 悬浮添加按钮（已登录才显示） -->
|
||||
<view v-if="userStore.isLoggedIn" class="fab" @tap="openAdd">
|
||||
<text class="fab-icon">＋</text>
|
||||
</view>
|
||||
|
||||
<!-- 弹出模态框 -->
|
||||
<view v-if="showModal" class="modal-mask" @tap.self="closeModal">
|
||||
<view class="modal-box">
|
||||
<view class="modal-header">
|
||||
<text class="modal-title">{{ form.isEditing ? '编辑日程' : '添加日程' }}</text>
|
||||
<text class="modal-close" @tap="closeModal">✕</text>
|
||||
</view>
|
||||
|
||||
<view class="modal-body">
|
||||
<!-- 日程内容 -->
|
||||
<view class="form-item">
|
||||
<text class="form-label">日程内容</text>
|
||||
<input
|
||||
v-model="form.title"
|
||||
class="form-input"
|
||||
placeholder="请输入日程内容"
|
||||
maxlength="140"
|
||||
:disabled="!form.isEditable"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 开始日期 -->
|
||||
<view class="form-item">
|
||||
<text class="form-label">开始日期</text>
|
||||
<picker mode="date" :value="form.startDate" @change="e => form.startDate = e.detail.value">
|
||||
<view class="form-picker">
|
||||
<text>{{ form.startDate || '请选择' }}</text>
|
||||
<text class="picker-arrow">›</text>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<!-- 结束日期 -->
|
||||
<view class="form-item">
|
||||
<text class="form-label">结束日期</text>
|
||||
<picker mode="date" :value="form.endDate" @change="e => form.endDate = e.detail.value">
|
||||
<view class="form-picker">
|
||||
<text>{{ form.endDate || '请选择' }}</text>
|
||||
<text class="picker-arrow">›</text>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<!-- 颜色选择 -->
|
||||
<view class="form-item">
|
||||
<text class="form-label">类型</text>
|
||||
<view class="color-grid">
|
||||
<view
|
||||
v-for="c in colorOptions"
|
||||
:key="c.value"
|
||||
class="color-item"
|
||||
:class="{ 'color-selected': form.color === c.value }"
|
||||
@tap="form.isEditable && (form.color = c.value)"
|
||||
>
|
||||
<view class="color-dot" :style="{ backgroundColor: c.value }" />
|
||||
<text class="color-label">{{ c.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="modal-footer">
|
||||
<button
|
||||
v-if="form.isEditing && form.isEditable"
|
||||
class="btn-danger"
|
||||
@tap="deleteEvent"
|
||||
>删除</button>
|
||||
<view class="footer-right">
|
||||
<button class="btn-cancel" @tap="closeModal">取消</button>
|
||||
<button
|
||||
v-if="form.isEditable"
|
||||
class="btn-primary"
|
||||
@tap="submitForm"
|
||||
>{{ form.isEditing ? '保存' : '添加' }}</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.page-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
background: #f3f4f6;
|
||||
}
|
||||
|
||||
/* 顶部导航 */
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: #fff;
|
||||
padding: 48rpx 32rpx 24rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
|
||||
}
|
||||
.nav-arrow {
|
||||
font-size: 48rpx;
|
||||
color: #374151;
|
||||
padding: 0 24rpx;
|
||||
}
|
||||
.nav-center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.nav-title {
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
}
|
||||
.nav-sub {
|
||||
font-size: 22rpx;
|
||||
color: #9ca3af;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
/* 加载/空状态 */
|
||||
.loading-box, .empty-box {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 16rpx;
|
||||
}
|
||||
.loading-text { color: #9ca3af; font-size: 28rpx; }
|
||||
.empty-icon { font-size: 80rpx; }
|
||||
.empty-text { color: #9ca3af; font-size: 28rpx; }
|
||||
|
||||
/* 列表滚动区 */
|
||||
.list-scroll {
|
||||
flex: 1;
|
||||
padding: 24rpx 24rpx 0;
|
||||
}
|
||||
|
||||
/* 日期分组 */
|
||||
.date-group { margin-bottom: 24rpx; }
|
||||
.date-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
padding: 8rpx 0 12rpx;
|
||||
}
|
||||
.date-text { font-size: 26rpx; color: #6b7280; font-weight: 500; }
|
||||
.date-today .date-text { color: #2563eb; }
|
||||
.today-badge {
|
||||
background: #2563eb;
|
||||
color: #fff;
|
||||
font-size: 20rpx;
|
||||
padding: 2rpx 12rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
/* 事件卡片 */
|
||||
.event-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 12rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
|
||||
}
|
||||
.event-color-bar {
|
||||
width: 8rpx;
|
||||
align-self: stretch;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.event-body {
|
||||
flex: 1;
|
||||
padding: 20rpx 20rpx 20rpx 16rpx;
|
||||
min-width: 0;
|
||||
}
|
||||
.event-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: #111827;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.event-meta {
|
||||
font-size: 24rpx;
|
||||
color: #9ca3af;
|
||||
margin-top: 6rpx;
|
||||
display: block;
|
||||
}
|
||||
.event-edit-icon {
|
||||
color: #d1d5db;
|
||||
font-size: 36rpx;
|
||||
padding-right: 20rpx;
|
||||
}
|
||||
|
||||
/* FAB 悬浮按钮 */
|
||||
.fab {
|
||||
position: fixed;
|
||||
right: 40rpx;
|
||||
bottom: 120rpx;
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
border-radius: 48rpx;
|
||||
background: #2563eb;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 8rpx 24rpx rgba(37,99,235,0.4);
|
||||
}
|
||||
.fab-icon { color: #fff; font-size: 52rpx; line-height: 1; }
|
||||
|
||||
/* 模态框 */
|
||||
.modal-mask {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.5);
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.modal-box {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-radius: 32rpx 32rpx 0 0;
|
||||
max-height: 90vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 32rpx 32rpx 24rpx;
|
||||
border-bottom: 1rpx solid #f3f4f6;
|
||||
}
|
||||
.modal-title { font-size: 32rpx; font-weight: 600; color: #111827; }
|
||||
.modal-close { font-size: 36rpx; color: #9ca3af; padding: 8rpx; }
|
||||
|
||||
.modal-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 24rpx 32rpx;
|
||||
}
|
||||
|
||||
/* 表单 */
|
||||
.form-item { margin-bottom: 28rpx; }
|
||||
.form-label {
|
||||
display: block;
|
||||
font-size: 26rpx;
|
||||
color: #6b7280;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
.form-input {
|
||||
width: 100%;
|
||||
border: 2rpx solid #e5e7eb;
|
||||
border-radius: 12rpx;
|
||||
padding: 16rpx 20rpx;
|
||||
font-size: 30rpx;
|
||||
color: #111827;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.form-picker {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border: 2rpx solid #e5e7eb;
|
||||
border-radius: 12rpx;
|
||||
padding: 16rpx 20rpx;
|
||||
font-size: 30rpx;
|
||||
color: #111827;
|
||||
background: #fff;
|
||||
}
|
||||
.picker-arrow { color: #d1d5db; font-size: 32rpx; }
|
||||
|
||||
/* 颜色网格 */
|
||||
.color-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16rpx;
|
||||
}
|
||||
.color-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
padding: 14rpx 16rpx;
|
||||
border: 2rpx solid #e5e7eb;
|
||||
border-radius: 12rpx;
|
||||
background: #fff;
|
||||
}
|
||||
.color-selected {
|
||||
border-color: #2563eb;
|
||||
background: #eff6ff;
|
||||
}
|
||||
.color-dot {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.color-label { font-size: 24rpx; color: #374151; }
|
||||
|
||||
/* 底部按钮 */
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 32rpx 48rpx;
|
||||
border-top: 1rpx solid #f3f4f6;
|
||||
}
|
||||
.footer-right {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
margin-left: auto;
|
||||
}
|
||||
.btn-danger {
|
||||
background: #fee2e2;
|
||||
color: #dc2626;
|
||||
border: none;
|
||||
border-radius: 12rpx;
|
||||
padding: 16rpx 32rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.btn-cancel {
|
||||
background: #f3f4f6;
|
||||
color: #374151;
|
||||
border: none;
|
||||
border-radius: 12rpx;
|
||||
padding: 16rpx 32rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.btn-primary {
|
||||
background: #2563eb;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 12rpx;
|
||||
padding: 16rpx 32rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -1,417 +1,465 @@
|
||||
<template>
|
||||
|
||||
<tabler-header type="mini" ref="heard"></tabler-header>
|
||||
<div class="page-wrapper">
|
||||
<!-- Page header -->
|
||||
<div class="page-header d-print-none">
|
||||
<div class="container-xl">
|
||||
<div class="row g-2 align-items-center">
|
||||
<div class="col">
|
||||
<h2 class="page-title">
|
||||
设置
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Page body -->
|
||||
<div class="page-body">
|
||||
<div class="container-xl">
|
||||
<div class="card">
|
||||
<div class="row g-0">
|
||||
|
||||
<setting-menu></setting-menu>
|
||||
|
||||
<div class="col-12 col-md-9 d-flex flex-column">
|
||||
<div class="card-body">
|
||||
|
||||
<h2 class="mb-4">信息设置</h2>
|
||||
<!-- <h3 class="card-title">Profile Details</h3> -->
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto">
|
||||
|
||||
<avatar size="xl" :url="user_info.AvatarPath"></avatar>
|
||||
</div>
|
||||
<div class="col-auto"><a class="btn" @click="showPopup">更改头像 </a></div>
|
||||
<!-- <div class="col-auto"><a href="#" class="btn btn-ghost-danger">
|
||||
删除头像
|
||||
</a></div> -->
|
||||
</div>
|
||||
<!-- <h3 class="card-title mt-4">Business Profile</h3> -->
|
||||
<div class="row g-3">
|
||||
<div class="col-md">
|
||||
<div class="form-label">名字</div>
|
||||
<input type="text" class="my_input_field" v-model="user_info.Username"
|
||||
maxlength="30">
|
||||
</div>
|
||||
|
||||
<div class="col-md">
|
||||
<div class="form-label">备注</div>
|
||||
<input type="text" class="my_input_field" v-model="user_info.FirstName"
|
||||
maxlength="50">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">生日</label>
|
||||
<div class="row g-2">
|
||||
<div class="col-5">
|
||||
|
||||
<uni-datetime-picker type="date" :clear-icon="false" v-model="birthdate" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="card-footer bg-transparent mt-auto">
|
||||
<div class="btn-list justify-content-end">
|
||||
|
||||
<a href="#" class="btn btn-primary">
|
||||
提交
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<tabler-footer></tabler-footer>
|
||||
|
||||
<uni-popup ref="popup" type="center">
|
||||
<view class="popup-content">
|
||||
<div class="card card-body container">
|
||||
<h1>头像裁剪工具</h1>
|
||||
|
||||
<div class="flex-wrapper">
|
||||
<!-- 左侧裁剪区 -->
|
||||
<div class="crop-section">
|
||||
<div ref="image_wrapper">
|
||||
<img ref="cropper_image"
|
||||
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=">
|
||||
</div>
|
||||
<!-- 上传进度 -->
|
||||
<div class="progress-container">
|
||||
<div class="progress-bar"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="preview-stats">
|
||||
<!-- <p>当前缩放: <span id="zoomValue">100%</span></p> -->
|
||||
<p>图片尺寸: <span ref="imageSize">0 x 0</span></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧预览区 -->
|
||||
<div class="preview-section">
|
||||
<h3>实时预览</h3>
|
||||
<div class="preview-box">
|
||||
<img ref="preview_img"
|
||||
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=">
|
||||
</div>
|
||||
|
||||
<!-- 控制按钮 -->
|
||||
<div class="controls">
|
||||
|
||||
<button class="btn btn-primary" @click="selefile">📁 选择图片</button>
|
||||
<button class="btn btn-secondary " onclick="rotateImage(-90)">↩️ 左旋</button>
|
||||
<button class="btn btn-success " id="uploadBtn">✂️ 裁剪头像</button>
|
||||
|
||||
<button class="btn btn-danger " style="margin-top: 150px;" @click="closePopup">❌ 取消</button>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
</uni-popup>
|
||||
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import "/static/dist/libs/cropper/cropper.min.js"
|
||||
/**
|
||||
* 用户设置页（个人信息）
|
||||
* 对标 PC 前端 src/views/settings/AccountView.vue
|
||||
*/
|
||||
import { userStore } from '../../store/user.js'
|
||||
import { authApi } from '../../@api/auth.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
user_info: {
|
||||
AvatarPath: "",
|
||||
Username: "",
|
||||
FirstName: "",
|
||||
Birthdate: "",
|
||||
},
|
||||
birthdate: "",
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showPopup() {
|
||||
this.$refs.popup.open();
|
||||
},
|
||||
closePopup() {
|
||||
this.$refs.popup.close();
|
||||
},
|
||||
updateImageInfo() {
|
||||
if (this.cropper) {
|
||||
const data = this.cropper.getData();
|
||||
// document.getElementById('zoomValue').textContent =
|
||||
// `${Math.round(currentScale * 100)}%`;
|
||||
// document.getElementById('imageSize').textContent =
|
||||
// `${Math.round(data.width)} x ${Math.round(data.height)}`;
|
||||
}
|
||||
},
|
||||
updatePreview() {
|
||||
const canvas = this.cropper.getCroppedCanvas({
|
||||
width: 250,
|
||||
height: 250,
|
||||
imageSmoothingQuality: 'high'
|
||||
});
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isLoggedIn: false,
|
||||
|
||||
if (canvas) {
|
||||
var that = this
|
||||
canvas.toBlob(blob => {
|
||||
const previewUrl = URL.createObjectURL(blob);
|
||||
that.$refs.preview_img.src = previewUrl;
|
||||
// 清理旧URL
|
||||
setTimeout(() => URL.revokeObjectURL(previewUrl), 1000);
|
||||
}, 'image/jpeg', 0.85);
|
||||
this.updateImageInfo();
|
||||
}
|
||||
},
|
||||
initCropper(imageSrc) {
|
||||
var that = this
|
||||
// 初始化Cropper
|
||||
if (this.cropper) {
|
||||
this.cropper.destroy();
|
||||
}
|
||||
const image = this.$refs.cropper_image
|
||||
console.log(image)
|
||||
image.src = imageSrc;
|
||||
this.cropper = new Cropper(image, {
|
||||
aspectRatio: 1,
|
||||
viewMode: 2,
|
||||
autoCropArea: 0.8,
|
||||
zoomable: true,
|
||||
zoomOnWheel: true,
|
||||
zoomOnTouch: true,
|
||||
wheelZoomRatio: 0.1,
|
||||
//minCanvasWidth: 400,
|
||||
//minCanvasHeight: 400,
|
||||
crop: that.updatePreview,
|
||||
ready() {
|
||||
that.updateImageInfo();
|
||||
//document.querySelector('.progress-container').style.display = 'none';
|
||||
}
|
||||
});
|
||||
},
|
||||
selefile() {
|
||||
var that=this
|
||||
uni.chooseImage({
|
||||
count: 1, // 最多9张
|
||||
sourceType: ['album', 'camera'], // 来源相册或相机
|
||||
success: (res) => {
|
||||
// 表单
|
||||
form: {
|
||||
username: '',
|
||||
remark: '',
|
||||
birthday: '',
|
||||
},
|
||||
avatarUrl: '/static/ava.svg',
|
||||
|
||||
console.log(res);
|
||||
// 如果需要得到原始的File对象（在H5中），则使用res.tempFiles
|
||||
const file = res.tempFiles[0];
|
||||
if (!file) return;
|
||||
// 状态
|
||||
loading: false,
|
||||
avatarUploading: false,
|
||||
}
|
||||
},
|
||||
|
||||
if (!file.type.startsWith('image/')) {
|
||||
that.$refs.footer.alert('warning', "⚠️ 请选择有效的图片文件")
|
||||
return;
|
||||
}
|
||||
methods: {
|
||||
// ── 初始化 ──
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => {
|
||||
that.initCropper(reader.result);
|
||||
//currentScale = 1;
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
});
|
||||
// this.initCropper(
|
||||
// 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='
|
||||
// );
|
||||
initForm() {
|
||||
this.isLoggedIn = userStore.isLoggedIn
|
||||
this.avatarUrl = userStore.getAvatarUrl()
|
||||
const info = userStore.userInfo
|
||||
if (info) {
|
||||
this.form.username = info.Username || ''
|
||||
this.form.remark = info.FirstName || ''
|
||||
this.form.birthday = userStore.getBirthday()
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
// ── 日期选择 ──
|
||||
|
||||
},
|
||||
onBirthdayChange(e) {
|
||||
this.form.birthday = e.detail.value
|
||||
},
|
||||
|
||||
mounted() {
|
||||
// ── 头像上传 ──
|
||||
|
||||
if (this.$refs.heard.is_login) {
|
||||
this.user_info = this.$refs.heard.user_info
|
||||
this.birthdate = this.user_info.Birthdate.substring(0, 10)
|
||||
} else {
|
||||
chooseAvatar() {
|
||||
if (!this.isLoggedIn) {
|
||||
uni.showToast({ title: '请先登录', icon: 'none' })
|
||||
return
|
||||
}
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sourceType: ['album', 'camera'],
|
||||
success: async (res) => {
|
||||
const filePath = res.tempFilePaths[0]
|
||||
if (!filePath) return
|
||||
this.avatarUploading = true
|
||||
try {
|
||||
const { errCode } = await authApi.updateAvatar(filePath)
|
||||
if (errCode === 0) {
|
||||
uni.showToast({ title: '头像更新成功', icon: 'success' })
|
||||
// 刷新用户信息（含新头像路径）
|
||||
await userStore.fetchUserInfo()
|
||||
this.avatarUrl = userStore.getAvatarUrl()
|
||||
} else {
|
||||
uni.showToast({ title: '头像上传失败', icon: 'none' })
|
||||
}
|
||||
} catch {
|
||||
// request.js 已处理
|
||||
} finally {
|
||||
this.avatarUploading = false
|
||||
}
|
||||
},
|
||||
})
|
||||
},
|
||||
|
||||
}
|
||||
// ── 保存信息 ──
|
||||
|
||||
// 初始化默认图片
|
||||
async saveInfo() {
|
||||
if (!this.isLoggedIn) {
|
||||
uni.showToast({ title: '请先登录', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (!this.form.username.trim()) {
|
||||
uni.showToast({ title: '名字不能为空', icon: 'none' })
|
||||
return
|
||||
}
|
||||
this.loading = true
|
||||
try {
|
||||
const { errCode } = await authApi.updateInfo({
|
||||
username: this.form.username.trim(),
|
||||
remark: this.form.remark.trim(),
|
||||
birthday: this.form.birthday,
|
||||
})
|
||||
if (errCode === 0) {
|
||||
uni.showToast({ title: '保存成功', icon: 'success' })
|
||||
await userStore.fetchUserInfo()
|
||||
} else {
|
||||
uni.showToast({ title: '保存失败', icon: 'none' })
|
||||
}
|
||||
} catch {
|
||||
// request.js 已处理
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
|
||||
// ── 登出 ──
|
||||
|
||||
handleLogout() {
|
||||
uni.showModal({
|
||||
title: '确认登出',
|
||||
content: '确定要退出登录吗？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
userStore.logout()
|
||||
uni.reLaunch({ url: '/pages/index/index' })
|
||||
}
|
||||
},
|
||||
})
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
goToLogin() {
|
||||
uni.navigateTo({ url: '/pages/signin' })
|
||||
},
|
||||
},
|
||||
|
||||
onShow() {
|
||||
this.initForm()
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
this.initForm()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url("/static/dist/libs/cropper/cropper.min.css");
|
||||
/* 头像裁剪器样式*/
|
||||
<template>
|
||||
<view class="settings-page">
|
||||
|
||||
.container {
|
||||
width: 95%;
|
||||
/* 改为百分比宽度 */
|
||||
margin: 20px auto;
|
||||
/* 增加上下边距 */
|
||||
max-width: 1200px;
|
||||
/* 保留最大宽度 */
|
||||
background: white;
|
||||
padding: 30px;
|
||||
border-radius: 12px;
|
||||
<!-- 顶部导航 -->
|
||||
<view class="navbar">
|
||||
<view class="back-btn" @tap="() => uni.navigateBack()">
|
||||
<text class="back-icon">‹</text>
|
||||
</view>
|
||||
<text class="navbar-title">个人设置</text>
|
||||
<view style="width: 80rpx;" />
|
||||
</view>
|
||||
|
||||
}
|
||||
<scroll-view scroll-y class="content">
|
||||
|
||||
.flex-wrapper {
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
margin-top: 20px;
|
||||
flex-wrap: wrap;
|
||||
/* 添加换行支持 */
|
||||
}
|
||||
<!-- ── 未登录提示 ── -->
|
||||
<view v-if="!isLoggedIn" class="not-login-card">
|
||||
<text class="icon-emoji" style="font-size: 80rpx;">👤</text>
|
||||
<text class="not-login-title">尚未登录</text>
|
||||
<text class="not-login-desc">登录后可查看和修改个人信息</text>
|
||||
<button class="primary-btn" @tap="goToLogin">立即登录</button>
|
||||
</view>
|
||||
|
||||
/* 裁剪区域 */
|
||||
.crop-section {
|
||||
background-color: aqua;
|
||||
flex: 1 1 60%;
|
||||
/* 弹性布局基础宽度 */
|
||||
min-width: 300px;
|
||||
/* 降低最小宽度 */
|
||||
height: auto;
|
||||
/* 移除固定高度 */
|
||||
min-height: 400px;
|
||||
/* 设置最小高度 */
|
||||
}
|
||||
<!-- ── 已登录内容 ── -->
|
||||
<view v-else>
|
||||
|
||||
#image-wrapper {
|
||||
width: 100%;
|
||||
height: 60vh;
|
||||
/* 改用视窗单位 */
|
||||
max-height: 600px;
|
||||
/* 设置最大高度 */
|
||||
background: #f8f9fa;
|
||||
border: 2px dashed #ddd;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
<!-- 头像区域 -->
|
||||
<view class="avatar-card">
|
||||
<view class="avatar-wrap" @tap="chooseAvatar">
|
||||
<image :src="avatarUrl" class="avatar" mode="aspectFill" />
|
||||
<view class="avatar-overlay">
|
||||
<text class="camera-icon">📷</text>
|
||||
</view>
|
||||
<view v-if="avatarUploading" class="uploading-mask">
|
||||
<text class="uploading-text">上传中…</text>
|
||||
</view>
|
||||
</view>
|
||||
<text class="avatar-hint">点击更换头像</text>
|
||||
</view>
|
||||
|
||||
/* 预览区域自适应 */
|
||||
.preview-section {
|
||||
flex: 1 1 35%;
|
||||
/* 弹性布局基础宽度 */
|
||||
min-width: 250px;
|
||||
/* 设置合理最小宽度 */
|
||||
}
|
||||
<!-- 信息表单 -->
|
||||
<view class="form-card">
|
||||
<text class="section-title">基本信息</text>
|
||||
|
||||
/* 移动端适配 */
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
padding: 15px;
|
||||
/* 减少内边距 */
|
||||
}
|
||||
<!-- 名字 -->
|
||||
<view class="field">
|
||||
<text class="label">名字</text>
|
||||
<input
|
||||
v-model="form.username"
|
||||
class="input"
|
||||
placeholder="输入你的名字"
|
||||
maxlength="30"
|
||||
/>
|
||||
</view>
|
||||
|
||||
.flex-wrapper {
|
||||
flex-direction: column;
|
||||
/* 垂直排列 */
|
||||
}
|
||||
<!-- 备注 -->
|
||||
<view class="field">
|
||||
<text class="label">备注</text>
|
||||
<input
|
||||
v-model="form.remark"
|
||||
class="input"
|
||||
placeholder="个人简介或备注"
|
||||
maxlength="50"
|
||||
/>
|
||||
</view>
|
||||
|
||||
.crop-section,
|
||||
.preview-section {
|
||||
width: 100% !important;
|
||||
/* 强制全宽 */
|
||||
min-width: unset;
|
||||
/* 移除最小宽度 */
|
||||
}
|
||||
<!-- 生日 -->
|
||||
<view class="field">
|
||||
<text class="label">生日</text>
|
||||
<picker
|
||||
mode="date"
|
||||
:value="form.birthday"
|
||||
@change="onBirthdayChange"
|
||||
>
|
||||
<view class="picker-display">
|
||||
<text :class="form.birthday ? 'picker-value' : 'picker-placeholder'">
|
||||
{{ form.birthday || '选择生日' }}
|
||||
</text>
|
||||
<text class="picker-arrow">›</text>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
#image-wrapper {
|
||||
height: 50vh;
|
||||
/* 调整移动端高度 */
|
||||
}
|
||||
<!-- 保存按钮 -->
|
||||
<button
|
||||
class="primary-btn"
|
||||
:class="{ 'btn-loading': loading }"
|
||||
:disabled="loading"
|
||||
@tap="saveInfo"
|
||||
>
|
||||
{{ loading ? '保存中…' : '保存修改' }}
|
||||
</button>
|
||||
</view>
|
||||
|
||||
.preview-box {
|
||||
width: 120px;
|
||||
/* 缩小预览区域 */
|
||||
height: 120px;
|
||||
}
|
||||
<!-- 安全操作 -->
|
||||
<view class="danger-card">
|
||||
<button class="logout-btn" @tap="handleLogout">退出登录</button>
|
||||
</view>
|
||||
|
||||
.controls {
|
||||
flex-direction: column;
|
||||
/* 垂直排列按钮 */
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* ── 页面 ── */
|
||||
.settings-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
background: #f3f4f6;
|
||||
}
|
||||
|
||||
#cropper-image {
|
||||
max-width: none !important;
|
||||
max-height: none !important;
|
||||
}
|
||||
/* ── 顶部导航 ── */
|
||||
.navbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 88rpx 24rpx 24rpx;
|
||||
background: #fff;
|
||||
border-bottom: 1rpx solid #e5e7eb;
|
||||
}
|
||||
.back-btn {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.back-icon {
|
||||
font-size: 56rpx;
|
||||
color: #374151;
|
||||
line-height: 1;
|
||||
}
|
||||
.navbar-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
/* 控制区域 */
|
||||
.controls {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
/* ── 内容区 ── */
|
||||
.content {
|
||||
flex: 1;
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
/* 预览区域 */
|
||||
.preview-section {
|
||||
flex: 1;
|
||||
min-width: 50px;
|
||||
}
|
||||
/* ── 未登录 ── */
|
||||
.not-login-card {
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 80rpx 40rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
.not-login-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
}
|
||||
.not-login-desc {
|
||||
font-size: 28rpx;
|
||||
color: #9ca3af;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.preview-box {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
/* border-radius: 50%; */
|
||||
border: 3px solid var(--primary-color);
|
||||
overflow: hidden;
|
||||
margin: 0 auto 20px;
|
||||
}
|
||||
/* ── 头像区 ── */
|
||||
.avatar-card {
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 48rpx 32rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
margin-bottom: 28rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
|
||||
}
|
||||
.avatar-wrap {
|
||||
position: relative;
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
}
|
||||
.avatar {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
border-radius: 50%;
|
||||
background: #e5e7eb;
|
||||
}
|
||||
.avatar-overlay {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
background: #2563eb;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 4rpx solid #fff;
|
||||
}
|
||||
.camera-icon { font-size: 28rpx; }
|
||||
.uploading-mask {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.5);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.uploading-text {
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
}
|
||||
.avatar-hint {
|
||||
font-size: 26rpx;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
#preview-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
/* ── 表单卡片 ── */
|
||||
.form-card {
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 36rpx;
|
||||
margin-bottom: 28rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
|
||||
}
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
display: block;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
.field {
|
||||
margin-bottom: 36rpx;
|
||||
}
|
||||
.label {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #374151;
|
||||
display: block;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
.input {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
border: 2rpx solid #d1d5db;
|
||||
border-radius: 16rpx;
|
||||
padding: 0 28rpx;
|
||||
font-size: 30rpx;
|
||||
color: #111827;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* ── Picker ── */
|
||||
.picker-display {
|
||||
height: 88rpx;
|
||||
border: 2rpx solid #d1d5db;
|
||||
border-radius: 16rpx;
|
||||
padding: 0 28rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: #fff;
|
||||
}
|
||||
.picker-value {
|
||||
font-size: 30rpx;
|
||||
color: #111827;
|
||||
}
|
||||
.picker-placeholder {
|
||||
font-size: 30rpx;
|
||||
color: #9ca3af;
|
||||
}
|
||||
.picker-arrow {
|
||||
font-size: 36rpx;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
/* ── 按钮 ── */
|
||||
.primary-btn {
|
||||
width: 100%;
|
||||
height: 96rpx;
|
||||
background: #2563eb;
|
||||
color: #fff;
|
||||
border-radius: 16rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
.primary-btn[disabled] {
|
||||
background: #93c5fd;
|
||||
}
|
||||
|
||||
/* 上传进度 */
|
||||
.progress-container {
|
||||
height: 8px;
|
||||
background: #eee;
|
||||
border-radius: 4px;
|
||||
margin-top: 20px;
|
||||
overflow: hidden;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 0%;
|
||||
height: 100%;
|
||||
background: var(--primary-color);
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
</style>
|
||||
/* ── 危险区 ── */
|
||||
.danger-card {
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 36rpx;
|
||||
margin-bottom: 40rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
|
||||
}
|
||||
.logout-btn {
|
||||
width: 100%;
|
||||
height: 96rpx;
|
||||
background: #fee2e2;
|
||||
color: #dc2626;
|
||||
border-radius: 16rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,192 +1,297 @@
|
||||
<template>
|
||||
|
||||
<view class="d-flex flex-column">
|
||||
<tabler-header type="mini"></tabler-header>
|
||||
|
||||
<div class="page page-center">
|
||||
|
||||
<div class="container container-normal py-4">
|
||||
<div class="row align-items-center g-4">
|
||||
<div class="col-lg">
|
||||
<div class="container-tight">
|
||||
<div class="text-center mb-4">
|
||||
<div class="navbar-brand navbar-brand-autodark"><img src="/static/logo.svg" height="36"
|
||||
alt=""></div>
|
||||
</div>
|
||||
<div class="card card-md">
|
||||
<div class="card-body">
|
||||
<h2 class="h2 text-center mb-4">登录你的账号</h2>
|
||||
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label mb-0 ms-1">用户名</label>
|
||||
|
||||
<input type="text" class="my_input_field"
|
||||
:placeholder-class="is_username_err?'my_input_placeholder_error':'my_input_placeholder'"
|
||||
:placeholder="ph_username" autocomplete="off" maxlength="25"
|
||||
v-model="post_data.username">
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label mb-0 ms-1">密码</label>
|
||||
|
||||
<input type="password" class="my_input_field"
|
||||
:placeholder-class="is_password_err?'my_input_placeholder_error':'my_input_placeholder'"
|
||||
password="true" :placeholder="ph_password" autocomplete="off"
|
||||
maxlength="100" v-model="post_data.password">
|
||||
|
||||
</div>
|
||||
<!-- <div class="mb-2">
|
||||
<checkbox-group @change="chack_box_change">
|
||||
<label class="d-flex">
|
||||
<checkbox value="keep_login_in" />
|
||||
<span class="form-check-label">保持登录</span>
|
||||
</label>
|
||||
</checkbox-group>
|
||||
</div> -->
|
||||
<div class="form-footer">
|
||||
<button class="btn btn-primary w-100" @click="submit_data">登录</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="text-center text-secondary mt-3">
|
||||
还没账号？
|
||||
<a href="/sign-up/" tabindex="-1">点击注册</a>
|
||||
<span class="form-label-description">
|
||||
<a href="./forgot-password.html">忘记密码？</a>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg d-none d-lg-block">
|
||||
<img src="/static/illustrations/undraw_secure_login_pdn4.svg" height="300"
|
||||
class="d-block mx-auto" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<tabler-footer ref="footer"></tabler-footer>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
my_network_func
|
||||
} from '../my_network_func'
|
||||
import {
|
||||
myfunc
|
||||
} from '../myfunc'
|
||||
/**
|
||||
* 登录页
|
||||
* 对标 PC 前端 src/views/LoginView.vue
|
||||
*/
|
||||
import { authApi } from '../@api/auth.js'
|
||||
import { userStore } from '../store/user.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
username: '',
|
||||
password: '',
|
||||
remember: false,
|
||||
},
|
||||
errors: {
|
||||
username: '',
|
||||
password: '',
|
||||
},
|
||||
showPassword: false,
|
||||
loading: false,
|
||||
}
|
||||
},
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
ph_username: "",
|
||||
ph_password: "",
|
||||
is_username_err: false,
|
||||
is_password_err: false,
|
||||
post_data: {
|
||||
is_keep_login: true,
|
||||
username: "",
|
||||
password: "",
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initdata(){
|
||||
this.ph_username="输入你的用户名"
|
||||
this.ph_password="输入你的密码"
|
||||
this.is_username_err=false
|
||||
this.is_password_err=false
|
||||
this.post_data.is_keep_login=true
|
||||
this.post_data.username=""
|
||||
this.post_data.password=""
|
||||
},
|
||||
methods: {
|
||||
validate() {
|
||||
let ok = true
|
||||
this.errors.username = ''
|
||||
this.errors.password = ''
|
||||
if (!this.form.username.trim()) {
|
||||
this.errors.username = '请输入用户名'
|
||||
ok = false
|
||||
}
|
||||
if (!this.form.password) {
|
||||
this.errors.password = '请输入密码'
|
||||
ok = false
|
||||
}
|
||||
return ok
|
||||
},
|
||||
|
||||
chack_box_change(val) {
|
||||
//console.log(val.detail.value[0])
|
||||
if (val.detail.value[0] === 'keep_login_in') {
|
||||
this.post_data.is_keep_login = true
|
||||
} else {
|
||||
this.post_data.is_keep_login = false
|
||||
}
|
||||
},
|
||||
submit_data() {
|
||||
//提交登录数据，
|
||||
//先验证数据合法性
|
||||
|
||||
|
||||
if (this.post_data.username == "") {
|
||||
this.is_username_err = true
|
||||
this.ph_username = "用户名不能为空"
|
||||
|
||||
} else {
|
||||
this.is_username_err = false
|
||||
}
|
||||
|
||||
if (this.post_data.password == "") {
|
||||
this.is_password_err = true
|
||||
this.ph_password = "密码不能为空"
|
||||
|
||||
} else {
|
||||
this.is_password_err = false
|
||||
}
|
||||
|
||||
if (this.is_username_err === false && this.is_password_err === false) {
|
||||
|
||||
my_network_func.post_json("/user/login", this.post_data, (c) => {
|
||||
|
||||
if (c.statusCode == 200) {
|
||||
if (c.data.err_code == 0) {
|
||||
this.$refs.footer.alert('success', "登录成功")
|
||||
myfunc.save_json("cookie", c.data.return.cookie)
|
||||
myfunc.save_json("user_info", c.data.return.user_info)
|
||||
this.initdata()
|
||||
setTimeout(() => {
|
||||
uni.navigateTo({
|
||||
url: '/'
|
||||
});
|
||||
}, 1000);
|
||||
|
||||
} else {
|
||||
this.$refs.footer.alert('warning', "账号或密码不正确")
|
||||
}
|
||||
} else {
|
||||
this.$refs.footer.alert('danger', "网络连接错误：" + c.statusCode)
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
} else {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initdata()
|
||||
}
|
||||
}
|
||||
async handleLogin() {
|
||||
if (!this.validate()) return
|
||||
this.loading = true
|
||||
try {
|
||||
const { errCode, data } = await authApi.login(
|
||||
this.form.username,
|
||||
this.form.password,
|
||||
this.form.remember,
|
||||
)
|
||||
switch (errCode) {
|
||||
case 0:
|
||||
userStore.login(data.cookie)
|
||||
uni.showToast({ title: '登录成功', icon: 'success' })
|
||||
setTimeout(() => {
|
||||
uni.reLaunch({ url: '/pages/index/index' })
|
||||
}, 800)
|
||||
break
|
||||
case -41:
|
||||
case -42:
|
||||
uni.showToast({ title: '用户名或密码错误', icon: 'none' })
|
||||
break
|
||||
default:
|
||||
uni.showToast({ title: '服务器错误，请稍后重试', icon: 'none' })
|
||||
}
|
||||
} catch {
|
||||
// request.js 已处理网络错误提示
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.my123 {
|
||||
/* 设置边框：宽度、样式、颜色 */
|
||||
border: 1px solid #e3e3e3;
|
||||
/* 2像素宽的红色实线边框 */
|
||||
<template>
|
||||
<view class="signin-page">
|
||||
<!-- 顶部 Logo -->
|
||||
<view class="header">
|
||||
<image src="/static/logo.svg" class="logo" mode="aspectFit" />
|
||||
<text class="app-name">Operations</text>
|
||||
</view>
|
||||
|
||||
/* 设置圆角，值越大，角越圆 */
|
||||
border-radius: 3px;
|
||||
/* 也可以使用百分比，例如50%会变成圆形 */
|
||||
<!-- 登录卡片 -->
|
||||
<view class="card">
|
||||
<text class="card-title">登录你的账号</text>
|
||||
|
||||
font-size: 24px;
|
||||
<!-- 用户名 -->
|
||||
<view class="field">
|
||||
<text class="label">用户名</text>
|
||||
<input
|
||||
v-model="form.username"
|
||||
class="input"
|
||||
:class="{ 'input-error': errors.username }"
|
||||
placeholder="输入你的用户名"
|
||||
maxlength="25"
|
||||
@confirm="handleLogin"
|
||||
/>
|
||||
<text v-if="errors.username" class="err-msg">{{ errors.username }}</text>
|
||||
</view>
|
||||
|
||||
}
|
||||
</style>
|
||||
<!-- 密码 -->
|
||||
<view class="field">
|
||||
<text class="label">密码</text>
|
||||
<view class="input-wrap">
|
||||
<input
|
||||
v-model="form.password"
|
||||
class="input"
|
||||
:class="{ 'input-error': errors.password }"
|
||||
:password="!showPassword"
|
||||
placeholder="输入你的密码"
|
||||
maxlength="100"
|
||||
@confirm="handleLogin"
|
||||
/>
|
||||
<view class="eye-btn" @tap="showPassword = !showPassword">
|
||||
<text class="eye-icon">{{ showPassword ? '👁' : '🙈' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<text v-if="errors.password" class="err-msg">{{ errors.password }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 记住我 -->
|
||||
<view class="remember-row" @tap="form.remember = !form.remember">
|
||||
<view class="checkbox" :class="{ checked: form.remember }">
|
||||
<text v-if="form.remember" class="check-mark">✓</text>
|
||||
</view>
|
||||
<text class="remember-text">在此设备上保持登录</text>
|
||||
</view>
|
||||
|
||||
<!-- 登录按钮 -->
|
||||
<button
|
||||
class="submit-btn"
|
||||
:class="{ 'btn-loading': loading }"
|
||||
:disabled="loading"
|
||||
@tap="handleLogin"
|
||||
>
|
||||
<text v-if="loading" class="loading-icon">⟳</text>
|
||||
<text>{{ loading ? '登录中…' : '登 录' }}</text>
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.signin-page {
|
||||
min-height: 100vh;
|
||||
background-color: #f3f4f6;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 80rpx 40rpx 60rpx;
|
||||
}
|
||||
|
||||
/* ── 顶部 logo ── */
|
||||
.header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 60rpx;
|
||||
}
|
||||
.logo {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 24rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.app-name {
|
||||
font-size: 44rpx;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
/* ── 卡片 ── */
|
||||
.card {
|
||||
width: 100%;
|
||||
max-width: 680rpx;
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 60rpx 48rpx;
|
||||
box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
.card-title {
|
||||
font-size: 40rpx;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
text-align: center;
|
||||
display: block;
|
||||
margin-bottom: 48rpx;
|
||||
}
|
||||
|
||||
/* ── 表单字段 ── */
|
||||
.field {
|
||||
margin-bottom: 36rpx;
|
||||
}
|
||||
.label {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #374151;
|
||||
display: block;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
.input-wrap {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.input {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
border: 2rpx solid #d1d5db;
|
||||
border-radius: 16rpx;
|
||||
padding: 0 32rpx;
|
||||
font-size: 30rpx;
|
||||
color: #111827;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.input-error {
|
||||
border-color: #ef4444;
|
||||
}
|
||||
.eye-btn {
|
||||
position: absolute;
|
||||
right: 24rpx;
|
||||
height: 88rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 8rpx;
|
||||
}
|
||||
.eye-icon {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
.err-msg {
|
||||
font-size: 24rpx;
|
||||
color: #ef4444;
|
||||
margin-top: 8rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ── 记住我 ── */
|
||||
.remember-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 48rpx;
|
||||
gap: 16rpx;
|
||||
}
|
||||
.checkbox {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border: 2rpx solid #d1d5db;
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #fff;
|
||||
}
|
||||
.checkbox.checked {
|
||||
background: #2563eb;
|
||||
border-color: #2563eb;
|
||||
}
|
||||
.check-mark {
|
||||
color: #fff;
|
||||
font-size: 26rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
.remember-text {
|
||||
font-size: 28rpx;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
/* ── 登录按钮 ── */
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
height: 96rpx;
|
||||
background: #2563eb;
|
||||
color: #fff;
|
||||
border-radius: 16rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12rpx;
|
||||
border: none;
|
||||
}
|
||||
.submit-btn[disabled] {
|
||||
background: #93c5fd;
|
||||
}
|
||||
.loading-icon {
|
||||
font-size: 36rpx;
|
||||
animation: spin 1s linear infinite;
|
||||
display: inline-block;
|
||||
}
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,136 @@
|
||||
/**
|
||||
* 用户状态管理（轻量 Store，对标 PC 前端 src/stores/user.js）
|
||||
*
|
||||
* uni-app 不支持 Pinia，这里用模块化单例替代，
|
||||
* 提供与 PC 前端完全一致的接口语义。
|
||||
*/
|
||||
|
||||
import { authApi } from '../@api/auth.js'
|
||||
|
||||
const STORAGE_KEY_COOKIE = 'userCookie'
|
||||
const STORAGE_KEY_USER = 'userData'
|
||||
const STORAGE_KEY_INFO = 'userInfo'
|
||||
|
||||
// ── 内部状态 ──────────────────────────────────────────────
|
||||
const _state = {
|
||||
user: null, // TabUser_ 基本信息
|
||||
userInfo: null, // TabUserInfo_ 详情
|
||||
userCookie: null, // Cookie 对象
|
||||
isLoggedIn: false,
|
||||
}
|
||||
|
||||
// ── 辅助方法 ──────────────────────────────────────────────
|
||||
function _loadJson(key) {
|
||||
try {
|
||||
const raw = uni.getStorageSync(key)
|
||||
return raw ? JSON.parse(raw) : null
|
||||
} catch { return null }
|
||||
}
|
||||
|
||||
function _saveJson(key, data) {
|
||||
uni.setStorageSync(key, JSON.stringify(data))
|
||||
}
|
||||
|
||||
function _remove(key) {
|
||||
uni.removeStorageSync(key)
|
||||
}
|
||||
|
||||
// ── 对外接口（与 PC 端 useUserStore 语义一致） ─────────────
|
||||
export const userStore = {
|
||||
|
||||
// ── Getters ──
|
||||
|
||||
get isLoggedIn() { return _state.isLoggedIn },
|
||||
get user() { return _state.user },
|
||||
get userInfo() { return _state.userInfo },
|
||||
get userCookie() { return _state.userCookie },
|
||||
|
||||
/** 获取 Cookie Value 字符串（供 request.js 自动注入） */
|
||||
getCookieValue() {
|
||||
return _state.userCookie?.Value ?? ''
|
||||
},
|
||||
|
||||
/** 头像 URL */
|
||||
getAvatarUrl() {
|
||||
if (_state.userInfo?.AvatarPath) {
|
||||
return `/api/static/avatar/${_state.userInfo.AvatarPath}`
|
||||
}
|
||||
return '/static/ava.svg'
|
||||
},
|
||||
|
||||
/** 生日（YYYY-MM-DD） */
|
||||
getBirthday() {
|
||||
if (!_state.userInfo?.Birthdate) return ''
|
||||
return String(_state.userInfo.Birthdate).substring(0, 10)
|
||||
},
|
||||
|
||||
/** 用户名（显示名 > 账号名） */
|
||||
getDisplayName() {
|
||||
return _state.userInfo?.Username || _state.user?.Name || ''
|
||||
},
|
||||
|
||||
// ── Actions ──
|
||||
|
||||
/**
|
||||
* 登录成功后调用，保存 cookie 并拉取用户信息
|
||||
* @param {object} cookie - 后端返回的 Cookie 对象
|
||||
*/
|
||||
login(cookie) {
|
||||
_state.userCookie = cookie
|
||||
_state.isLoggedIn = true
|
||||
_saveJson(STORAGE_KEY_COOKIE, cookie)
|
||||
// 验证是否过期
|
||||
if (cookie.ExpiresAt && new Date(cookie.ExpiresAt) < new Date()) {
|
||||
this.logout()
|
||||
return
|
||||
}
|
||||
this.fetchUserInfo()
|
||||
},
|
||||
|
||||
/** 登出，清理所有本地状态 */
|
||||
logout() {
|
||||
_state.user = null
|
||||
_state.userInfo = null
|
||||
_state.userCookie = null
|
||||
_state.isLoggedIn = false
|
||||
_remove(STORAGE_KEY_COOKIE)
|
||||
_remove(STORAGE_KEY_USER)
|
||||
_remove(STORAGE_KEY_INFO)
|
||||
},
|
||||
|
||||
/** 拉取用户信息并缓存 */
|
||||
async fetchUserInfo() {
|
||||
try {
|
||||
const { errCode, data } = await authApi.getUserInfo()
|
||||
if (errCode === 0) {
|
||||
_state.user = data?.user ?? null
|
||||
_state.userInfo = data?.userInfo ?? null
|
||||
if (_state.user) _saveJson(STORAGE_KEY_USER, _state.user)
|
||||
if (_state.userInfo) _saveJson(STORAGE_KEY_INFO, _state.userInfo)
|
||||
}
|
||||
} catch { /* request.js 已处理提示 */ }
|
||||
},
|
||||
|
||||
/**
|
||||
* 应用启动时恢复登录状态（在 App.vue 的 onLaunch 中调用）
|
||||
*/
|
||||
restoreSession() {
|
||||
const cookie = _loadJson(STORAGE_KEY_COOKIE)
|
||||
if (cookie) {
|
||||
// 验证 cookie 是否还在有效期
|
||||
if (cookie.ExpiresAt && new Date(cookie.ExpiresAt) < new Date()) {
|
||||
this.logout()
|
||||
return
|
||||
}
|
||||
_state.userCookie = cookie
|
||||
_state.isLoggedIn = true
|
||||
// 恢复缓存的用户信息（避免冷启动白屏）
|
||||
_state.user = _loadJson(STORAGE_KEY_USER)
|
||||
_state.userInfo = _loadJson(STORAGE_KEY_INFO)
|
||||
// 后台静默刷新
|
||||
this.fetchUserInfo()
|
||||
} else {
|
||||
this.logout()
|
||||
}
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
/**
|
||||
* uni-app + Vue3 Vite 配置
|
||||
*
|
||||
* 解决：API 模块目录命名为 @api/，避免与 /api 代理前缀冲突。
|
||||
* 真正的后端 API 请求走 /api（代理到 8080）。
|
||||
*/
|
||||
import { defineConfig } from 'vite'
|
||||
import uni from '@dcloudio/vite-plugin-uni'
|
||||
import path from 'path'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [uni()],
|
||||
|
||||
resolve: {
|
||||
alias: [
|
||||
// @api/* → 本地 @api/ 目录（存放 API 模块文件）
|
||||
{ find: /^@api\/(.*)/, replacement: path.resolve(__dirname, '@api/$1') },
|
||||
],
|
||||
},
|
||||
|
||||
server: {
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://127.0.0.1:8080',
|
||||
changeOrigin: true,
|
||||
secure: false,
|
||||
ws: false,
|
||||
bypass(req) {
|
||||
// .js 等模块文件不走代理（@api/ 模块不带 /api 前缀，不会走到这里）
|
||||
if (req.url && /\.\w+$/.test(req.url)) {
|
||||
return false
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user