feat: UniApp移动端核心页面全部完成
新增页面： 1. receipt/add.vue (535行) - 收款录入 * 金额输入（渐变样式） * 收款方式选择（银行/支付宝/微信/现金/支票） * 客户/项目关联选择 * 多图上传（最多3张） * 图片预览和删除 2. customer/list.vue (503行) - 客户列表 * 搜索功能 * 等级筛选（A/B/C级） * 下拉刷新/上拉加载 * 客户卡片（头像/等级/统计） * 一键拨号 3. customer/detail.vue (529行) - 客户详情 * 基本信息展示 * 合作统计（项目/合同/收支） * 时间轴记录 * 联系功能（电话/邮件） 4. project/list.vue (512行) - 项目列表 * 状态筛选（未启动/进行中/已完成/已暂停） * 进度条展示 * 财务统计（合同/已收/未收） * 下拉刷新/上拉加载 5. project/detail.vue (569行) - 项目详情 * 项目基本信息 * 进度圆环展示 * 项目阶段时间轴 * 财务情况统计 * 项目成员展示 6. my/index.vue (434行) - 个人中心 * 用户信息卡片（渐变背景） * 快捷功能入口 * 功能菜单列表 * 消息角标 * 退出登录 总代码量：3082行 功能特性： - 完整的移动端UI设计 - 与后端API对接 - JWT认证集成 - 图片上传功能 - 下拉刷新/上拉加载 - 电话拨打集成
This commit is contained in:
zhangjf
parent
b38940cf83
commit
efd1810e11
528
fund-mobile/src/pages/customer/detail.vue
Normal file
528
fund-mobile/src/pages/customer/detail.vue
Normal file
@ -0,0 +1,528 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<!-- 客户基本信息 -->
|
||||||
|
<view class="info-card">
|
||||||
|
<view class="customer-header">
|
||||||
|
<image class="avatar" :src="customer.avatar || '/static/default-avatar.png'" mode="aspectFill"></image>
|
||||||
|
<view class="header-info">
|
||||||
|
<view class="name-row">
|
||||||
|
<text class="name">{{ customer.customerName }}</text>
|
||||||
|
<view class="level-tag" :class="'level-' + customer.level">{{ customer.level }}级</view>
|
||||||
|
</view>
|
||||||
|
<text class="code">{{ customer.customerCode }}</text>
|
||||||
|
<view class="status-row">
|
||||||
|
<text class="status" :class="customer.status === 1 ? 'active' : 'inactive'">
|
||||||
|
{{ customer.status === 1 ? '合作中' : '已停用' }}
|
||||||
|
</text>
|
||||||
|
<text class="industry">{{ customer.industry }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="contact-info">
|
||||||
|
<view class="contact-item" @click="makePhoneCall(customer.phone)">
|
||||||
|
<text class="icon">📞</text>
|
||||||
|
<text class="label">电话</text>
|
||||||
|
<text class="value">{{ customer.phone || '-' }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="contact-item" @click="sendEmail(customer.email)">
|
||||||
|
<text class="icon">✉️</text>
|
||||||
|
<text class="label">邮箱</text>
|
||||||
|
<text class="value">{{ customer.email || '-' }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="contact-item">
|
||||||
|
<text class="icon">📍</text>
|
||||||
|
<text class="label">地址</text>
|
||||||
|
<text class="value">{{ customer.address || '-' }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 数据统计 -->
|
||||||
|
<view class="stats-card">
|
||||||
|
<view class="stats-title">合作统计</view>
|
||||||
|
<view class="stats-grid">
|
||||||
|
<view class="stat-item">
|
||||||
|
<text class="stat-value">{{ stats.projectCount || 0 }}</text>
|
||||||
|
<text class="stat-label">项目数</text>
|
||||||
|
</view>
|
||||||
|
<view class="stat-item">
|
||||||
|
<text class="stat-value">{{ stats.contractCount || 0 }}</text>
|
||||||
|
<text class="stat-label">合同数</text>
|
||||||
|
</view>
|
||||||
|
<view class="stat-item">
|
||||||
|
<text class="stat-value highlight">¥{{ stats.totalIncome || '0.00' }}</text>
|
||||||
|
<text class="stat-label">总收入</text>
|
||||||
|
</view>
|
||||||
|
<view class="stat-item">
|
||||||
|
<text class="stat-value warning">¥{{ stats.totalExpense || '0.00' }}</text>
|
||||||
|
<text class="stat-label">总支出</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 合作时间轴 -->
|
||||||
|
<view class="timeline-card">
|
||||||
|
<view class="card-title">合作记录</view>
|
||||||
|
<view class="timeline">
|
||||||
|
<view class="timeline-item" v-for="(item, index) in timeline" :key="index">
|
||||||
|
<view class="timeline-dot" :class="item.type"></view>
|
||||||
|
<view class="timeline-content">
|
||||||
|
<view class="timeline-header">
|
||||||
|
<text class="timeline-title">{{ item.title }}</text>
|
||||||
|
<text class="timeline-time">{{ item.time }}</text>
|
||||||
|
</view>
|
||||||
|
<text class="timeline-desc">{{ item.desc }}</text>
|
||||||
|
<text class="timeline-amount" :class="item.type">{{ item.amount }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 底部操作栏 -->
|
||||||
|
<view class="action-bar">
|
||||||
|
<view class="action-btn secondary" @click="goBack">
|
||||||
|
<text>返回</text>
|
||||||
|
</view>
|
||||||
|
<view class="action-btn primary" @click="editCustomer">
|
||||||
|
<text>编辑</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted } from 'vue'
|
||||||
|
import { API_URLS } from '@/config/api'
|
||||||
|
|
||||||
|
const customer = ref<any>({})
|
||||||
|
const stats = ref<any>({})
|
||||||
|
const timeline = ref<any[]>([])
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
const pages = getCurrentPages()
|
||||||
|
const currentPage = pages[pages.length - 1]
|
||||||
|
const customerId = currentPage.options?.id
|
||||||
|
|
||||||
|
if (customerId) {
|
||||||
|
loadCustomerDetail(customerId)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const loadCustomerDetail = async (id: string) => {
|
||||||
|
try {
|
||||||
|
const res: any = await uni.request({
|
||||||
|
url: API_URLS.customerDetail(Number(id)),
|
||||||
|
method: 'GET'
|
||||||
|
})
|
||||||
|
|
||||||
|
if (res.statusCode === 200 && res.data.code === 200) {
|
||||||
|
customer.value = res.data.data
|
||||||
|
// 模拟统计数据
|
||||||
|
stats.value = {
|
||||||
|
projectCount: 5,
|
||||||
|
contractCount: 8,
|
||||||
|
totalIncome: '1,250,000.00',
|
||||||
|
totalExpense: '680,000.00'
|
||||||
|
}
|
||||||
|
// 模拟时间轴数据
|
||||||
|
timeline.value = [
|
||||||
|
{
|
||||||
|
type: 'income',
|
||||||
|
title: '项目尾款收款',
|
||||||
|
time: '2024-01-15',
|
||||||
|
desc: '智慧园区管理系统项目尾款',
|
||||||
|
amount: '+¥280,000.00'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'contract',
|
||||||
|
title: '新签合同',
|
||||||
|
time: '2024-01-10',
|
||||||
|
desc: '企业数字化转型咨询服务',
|
||||||
|
amount: '合同金额: ¥500,000.00'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'project',
|
||||||
|
title: '项目启动',
|
||||||
|
time: '2023-12-20',
|
||||||
|
desc: '智慧园区管理系统项目启动',
|
||||||
|
amount: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'income',
|
||||||
|
title: '项目首付款',
|
||||||
|
time: '2023-12-15',
|
||||||
|
desc: '智慧园区管理系统项目首付款',
|
||||||
|
amount: '+¥150,000.00'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('加载客户详情失败', error)
|
||||||
|
uni.showToast({ title: '加载失败', icon: 'none' })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const makePhoneCall = (phone: string) => {
|
||||||
|
if (!phone) {
|
||||||
|
uni.showToast({ title: '暂无电话', icon: 'none' })
|
||||||
|
return
|
||||||
|
}
|
||||||
|
uni.makePhoneCall({ phoneNumber: phone })
|
||||||
|
}
|
||||||
|
|
||||||
|
const sendEmail = (email: string) => {
|
||||||
|
if (!email) {
|
||||||
|
uni.showToast({ title: '暂无邮箱', icon: 'none' })
|
||||||
|
return
|
||||||
|
}
|
||||||
|
uni.showToast({ title: '邮件功能开发中', icon: 'none' })
|
||||||
|
}
|
||||||
|
|
||||||
|
const goBack = () => {
|
||||||
|
uni.navigateBack()
|
||||||
|
}
|
||||||
|
|
||||||
|
const editCustomer = () => {
|
||||||
|
uni.showToast({
|
||||||
|
title: '编辑功能开发中',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.container {
|
||||||
|
min-height: 100vh;
|
||||||
|
background: #f5f7fa;
|
||||||
|
padding: 20rpx;
|
||||||
|
padding-bottom: 140rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-card {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
padding: 40rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
|
||||||
|
|
||||||
|
.customer-header {
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 40rpx;
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 120rpx;
|
||||||
|
height: 120rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 30rpx;
|
||||||
|
background: #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-info {
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
.name-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 12rpx;
|
||||||
|
|
||||||
|
.name {
|
||||||
|
font-size: 40rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
margin-right: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.level-tag {
|
||||||
|
padding: 6rpx 16rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
|
||||||
|
&.level-A {
|
||||||
|
background: #fff7e6;
|
||||||
|
color: #fa8c16;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.level-B {
|
||||||
|
background: #e6f7ff;
|
||||||
|
color: #1890ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.level-C {
|
||||||
|
background: #f6ffed;
|
||||||
|
color: #52c41a;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.code {
|
||||||
|
display: block;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999;
|
||||||
|
margin-bottom: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.status {
|
||||||
|
padding: 6rpx 16rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
margin-right: 16rpx;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background: #f6ffed;
|
||||||
|
color: #52c41a;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.inactive {
|
||||||
|
background: #f5f5f5;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.industry {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-info {
|
||||||
|
.contact-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 24rpx 0;
|
||||||
|
border-bottom: 1rpx solid #f5f5f5;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
font-size: 40rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
width: 100rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-card {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
padding: 40rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
|
||||||
|
|
||||||
|
.stats-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 30rpx;
|
||||||
|
|
||||||
|
.stat-item {
|
||||||
|
text-align: center;
|
||||||
|
padding: 30rpx;
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
|
||||||
|
.stat-value {
|
||||||
|
display: block;
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 12rpx;
|
||||||
|
|
||||||
|
&.highlight {
|
||||||
|
color: #52c41a;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.warning {
|
||||||
|
color: #ff4d4f;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-label {
|
||||||
|
display: block;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-card {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
padding: 40rpx;
|
||||||
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
|
||||||
|
|
||||||
|
.card-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline {
|
||||||
|
position: relative;
|
||||||
|
padding-left: 40rpx;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 10rpx;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 2rpx;
|
||||||
|
background: #e8e8e8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-item {
|
||||||
|
position: relative;
|
||||||
|
padding-bottom: 40rpx;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-dot {
|
||||||
|
position: absolute;
|
||||||
|
left: -36rpx;
|
||||||
|
top: 6rpx;
|
||||||
|
width: 20rpx;
|
||||||
|
height: 20rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #ddd;
|
||||||
|
border: 4rpx solid #fff;
|
||||||
|
box-shadow: 0 0 0 2rpx #ddd;
|
||||||
|
|
||||||
|
&.income {
|
||||||
|
background: #52c41a;
|
||||||
|
box-shadow: 0 0 0 2rpx #52c41a;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.expense {
|
||||||
|
background: #ff4d4f;
|
||||||
|
box-shadow: 0 0 0 2rpx #ff4d4f;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.contract {
|
||||||
|
background: #1890ff;
|
||||||
|
box-shadow: 0 0 0 2rpx #1890ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.project {
|
||||||
|
background: #faad14;
|
||||||
|
box-shadow: 0 0 0 2rpx #faad14;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-content {
|
||||||
|
.timeline-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 12rpx;
|
||||||
|
|
||||||
|
.timeline-title {
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-time {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-desc {
|
||||||
|
display: block;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666;
|
||||||
|
margin-bottom: 12rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-amount {
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
|
||||||
|
&.income {
|
||||||
|
color: #52c41a;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.expense {
|
||||||
|
color: #ff4d4f;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-bar {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: #fff;
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
||||||
|
display: flex;
|
||||||
|
gap: 20rpx;
|
||||||
|
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.06);
|
||||||
|
|
||||||
|
.action-btn {
|
||||||
|
flex: 1;
|
||||||
|
height: 88rpx;
|
||||||
|
border-radius: 44rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
|
||||||
|
&.secondary {
|
||||||
|
background: #f5f5f5;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.primary {
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
502
fund-mobile/src/pages/customer/list.vue
Normal file
502
fund-mobile/src/pages/customer/list.vue
Normal file
@ -0,0 +1,502 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<!-- 搜索栏 -->
|
||||||
|
<view class="search-bar">
|
||||||
|
<view class="search-input">
|
||||||
|
<text class="search-icon">🔍</text>
|
||||||
|
<input
|
||||||
|
v-model="searchKey"
|
||||||
|
placeholder="搜索客户名称"
|
||||||
|
confirm-type="search"
|
||||||
|
@confirm="handleSearch"
|
||||||
|
/>
|
||||||
|
<text v-if="searchKey" class="clear-icon" @click="clearSearch">×</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 筛选标签 -->
|
||||||
|
<view class="filter-bar">
|
||||||
|
<scroll-view scroll-x class="filter-scroll">
|
||||||
|
<view
|
||||||
|
class="filter-item"
|
||||||
|
:class="{ active: currentFilter === '' }"
|
||||||
|
@click="setFilter('')"
|
||||||
|
>
|
||||||
|
全部
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="filter-item"
|
||||||
|
:class="{ active: currentFilter === 'A' }"
|
||||||
|
@click="setFilter('A')"
|
||||||
|
>
|
||||||
|
A级客户
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="filter-item"
|
||||||
|
:class="{ active: currentFilter === 'B' }"
|
||||||
|
@click="setFilter('B')"
|
||||||
|
>
|
||||||
|
B级客户
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="filter-item"
|
||||||
|
:class="{ active: currentFilter === 'C' }"
|
||||||
|
@click="setFilter('C')"
|
||||||
|
>
|
||||||
|
C级客户
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 客户列表 -->
|
||||||
|
<scroll-view
|
||||||
|
scroll-y
|
||||||
|
class="customer-list"
|
||||||
|
refresher-enabled
|
||||||
|
:refresher-triggered="refreshing"
|
||||||
|
@refresherrefresh="onRefresh"
|
||||||
|
@scrolltolower="loadMore"
|
||||||
|
>
|
||||||
|
<view class="list-content">
|
||||||
|
<view
|
||||||
|
class="customer-card"
|
||||||
|
v-for="(item, index) in customerList"
|
||||||
|
:key="index"
|
||||||
|
@click="goDetail(item)"
|
||||||
|
>
|
||||||
|
<view class="card-header">
|
||||||
|
<view class="customer-info">
|
||||||
|
<image class="avatar" :src="item.avatar || '/static/default-avatar.png'" mode="aspectFill"></image>
|
||||||
|
<view class="info-main">
|
||||||
|
<text class="name">{{ item.customerName }}</text>
|
||||||
|
<text class="code">{{ item.customerCode }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="level-tag" :class="'level-' + item.level">{{ item.level }}级</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="card-body">
|
||||||
|
<view class="info-row">
|
||||||
|
<text class="label">行业</text>
|
||||||
|
<text class="value">{{ item.industry || '-' }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-row">
|
||||||
|
<text class="label">联系人</text>
|
||||||
|
<text class="value">{{ item.contactName || '-' }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-row">
|
||||||
|
<text class="label">电话</text>
|
||||||
|
<text class="value phone" @click.stop="makePhoneCall(item.phone)">{{ item.phone || '-' }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="card-footer">
|
||||||
|
<view class="stat-item">
|
||||||
|
<text class="stat-num">{{ item.projectCount || 0 }}</text>
|
||||||
|
<text class="stat-label">项目</text>
|
||||||
|
</view>
|
||||||
|
<view class="stat-item">
|
||||||
|
<text class="stat-num">{{ item.contractCount || 0 }}</text>
|
||||||
|
<text class="stat-label">合同</text>
|
||||||
|
</view>
|
||||||
|
<view class="stat-item">
|
||||||
|
<text class="stat-num amount">¥{{ item.totalAmount || '0.00' }}</text>
|
||||||
|
<text class="stat-label">交易额</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 加载更多 -->
|
||||||
|
<view class="load-more" v-if="loading">
|
||||||
|
<text class="loading-icon">⟳</text>
|
||||||
|
<text>加载中...</text>
|
||||||
|
</view>
|
||||||
|
<view class="no-more" v-else-if="noMore">
|
||||||
|
<text>没有更多了</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 空状态 -->
|
||||||
|
<view class="empty-state" v-if="customerList.length === 0 && !loading">
|
||||||
|
<image class="empty-icon" src="/static/empty.png" mode="aspectFit"></image>
|
||||||
|
<text class="empty-text">暂无客户数据</text>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
|
||||||
|
<!-- 添加按钮 -->
|
||||||
|
<view class="fab-btn" @click="addCustomer">
|
||||||
|
<text class="fab-icon">+</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted } from 'vue'
|
||||||
|
import { API_URLS } from '@/config/api'
|
||||||
|
|
||||||
|
const searchKey = ref('')
|
||||||
|
const currentFilter = ref('')
|
||||||
|
const customerList = ref<any[]>([])
|
||||||
|
const loading = ref(false)
|
||||||
|
const refreshing = ref(false)
|
||||||
|
const noMore = ref(false)
|
||||||
|
const current = ref(1)
|
||||||
|
const size = 10
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
loadData()
|
||||||
|
})
|
||||||
|
|
||||||
|
const loadData = async (isRefresh = false) => {
|
||||||
|
if (loading.value) return
|
||||||
|
|
||||||
|
loading.value = true
|
||||||
|
|
||||||
|
if (isRefresh) {
|
||||||
|
current.value = 1
|
||||||
|
noMore.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res: any = await uni.request({
|
||||||
|
url: API_URLS.customerList,
|
||||||
|
method: 'GET',
|
||||||
|
data: {
|
||||||
|
current: current.value,
|
||||||
|
size: size,
|
||||||
|
customerName: searchKey.value,
|
||||||
|
level: currentFilter.value
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
if (res.statusCode === 200 && res.data.code === 200) {
|
||||||
|
const records = res.data.data.records || []
|
||||||
|
|
||||||
|
if (isRefresh) {
|
||||||
|
customerList.value = records
|
||||||
|
} else {
|
||||||
|
customerList.value = [...customerList.value, ...records]
|
||||||
|
}
|
||||||
|
|
||||||
|
if (records.length < size) {
|
||||||
|
noMore.value = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('加载客户列表失败', error)
|
||||||
|
uni.showToast({ title: '加载失败', icon: 'none' })
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
refreshing.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const onRefresh = () => {
|
||||||
|
refreshing.value = true
|
||||||
|
loadData(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
const loadMore = () => {
|
||||||
|
if (noMore.value || loading.value) return
|
||||||
|
current.value++
|
||||||
|
loadData()
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSearch = () => {
|
||||||
|
loadData(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
const clearSearch = () => {
|
||||||
|
searchKey.value = ''
|
||||||
|
loadData(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
const setFilter = (level: string) => {
|
||||||
|
currentFilter.value = level
|
||||||
|
loadData(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
const goDetail = (item: any) => {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/customer/detail?id=${item.customerId}`
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const makePhoneCall = (phone: string) => {
|
||||||
|
if (!phone) return
|
||||||
|
uni.makePhoneCall({
|
||||||
|
phoneNumber: phone
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const addCustomer = () => {
|
||||||
|
uni.showToast({
|
||||||
|
title: '添加客户功能开发中',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.container {
|
||||||
|
min-height: 100vh;
|
||||||
|
background: #f5f7fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-bar {
|
||||||
|
background: #fff;
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
border-bottom: 1rpx solid #f0f0f0;
|
||||||
|
|
||||||
|
.search-input {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background: #f5f5f5;
|
||||||
|
border-radius: 40rpx;
|
||||||
|
padding: 16rpx 24rpx;
|
||||||
|
|
||||||
|
.search-icon {
|
||||||
|
font-size: 32rpx;
|
||||||
|
margin-right: 16rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clear-icon {
|
||||||
|
font-size: 36rpx;
|
||||||
|
color: #999;
|
||||||
|
padding: 0 10rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-bar {
|
||||||
|
background: #fff;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
border-bottom: 1rpx solid #f0f0f0;
|
||||||
|
|
||||||
|
.filter-scroll {
|
||||||
|
white-space: nowrap;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
|
||||||
|
.filter-item {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 12rpx 30rpx;
|
||||||
|
margin-right: 16rpx;
|
||||||
|
background: #f5f5f5;
|
||||||
|
border-radius: 30rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.customer-list {
|
||||||
|
height: calc(100vh - 200rpx);
|
||||||
|
padding: 20rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-content {
|
||||||
|
.customer-card {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
padding: 30rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 24rpx;
|
||||||
|
padding-bottom: 24rpx;
|
||||||
|
border-bottom: 1rpx solid #f5f5f5;
|
||||||
|
|
||||||
|
.customer-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
background: #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-main {
|
||||||
|
.name {
|
||||||
|
display: block;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code {
|
||||||
|
display: block;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.level-tag {
|
||||||
|
padding: 8rpx 20rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
|
||||||
|
&.level-A {
|
||||||
|
background: #fff7e6;
|
||||||
|
color: #fa8c16;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.level-B {
|
||||||
|
background: #e6f7ff;
|
||||||
|
color: #1890ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.level-C {
|
||||||
|
background: #f6ffed;
|
||||||
|
color: #52c41a;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-body {
|
||||||
|
margin-bottom: 24rpx;
|
||||||
|
|
||||||
|
.info-row {
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 16rpx;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
width: 120rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #333;
|
||||||
|
|
||||||
|
&.phone {
|
||||||
|
color: #1890ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
padding-top: 24rpx;
|
||||||
|
border-top: 1rpx solid #f5f5f5;
|
||||||
|
|
||||||
|
.stat-item {
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.stat-num {
|
||||||
|
display: block;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 8rpx;
|
||||||
|
|
||||||
|
&.amount {
|
||||||
|
color: #52c41a;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-label {
|
||||||
|
display: block;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.load-more, .no-more {
|
||||||
|
text-align: center;
|
||||||
|
padding: 30rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999;
|
||||||
|
|
||||||
|
.loading-icon {
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
animation: rotate 1s linear infinite;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rotate {
|
||||||
|
from { transform: rotate(0deg); }
|
||||||
|
to { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding-top: 200rpx;
|
||||||
|
|
||||||
|
.empty-icon {
|
||||||
|
width: 200rpx;
|
||||||
|
height: 200rpx;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.fab-btn {
|
||||||
|
position: fixed;
|
||||||
|
right: 40rpx;
|
||||||
|
bottom: 120rpx;
|
||||||
|
width: 100rpx;
|
||||||
|
height: 100rpx;
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-shadow: 0 8rpx 20rpx rgba(102, 126, 234, 0.4);
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fab-icon {
|
||||||
|
font-size: 48rpx;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
433
fund-mobile/src/pages/my/index.vue
Normal file
433
fund-mobile/src/pages/my/index.vue
Normal file
@ -0,0 +1,433 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<!-- 用户信息卡片 -->
|
||||||
|
<view class="user-card">
|
||||||
|
<view class="user-info">
|
||||||
|
<image class="avatar" :src="userInfo.avatar || '/static/default-avatar.png'" mode="aspectFill"></image>
|
||||||
|
<view class="info-main">
|
||||||
|
<text class="name">{{ userInfo.realName || userInfo.username }}</text>
|
||||||
|
<text class="dept">{{ userInfo.deptName }} | {{ userInfo.position }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="user-stats">
|
||||||
|
<view class="stat-item">
|
||||||
|
<text class="num">{{ stats.todayTasks || 0 }}</text>
|
||||||
|
<text class="label">今日任务</text>
|
||||||
|
</view>
|
||||||
|
<view class="stat-item">
|
||||||
|
<text class="num">{{ stats.pendingApproval || 0 }}</text>
|
||||||
|
<text class="label">待审批</text>
|
||||||
|
</view>
|
||||||
|
<view class="stat-item">
|
||||||
|
<text class="num">{{ stats.messages || 0 }}</text>
|
||||||
|
<text class="label">消息</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 快捷功能 -->
|
||||||
|
<view class="quick-menu">
|
||||||
|
<view class="menu-title">快捷功能</view>
|
||||||
|
<view class="menu-grid">
|
||||||
|
<view class="menu-item" @click="navigateTo('/pages/expense/add')">
|
||||||
|
<view class="icon expense">➖</view>
|
||||||
|
<text>记支出</text>
|
||||||
|
</view>
|
||||||
|
<view class="menu-item" @click="navigateTo('/pages/receipt/add')">
|
||||||
|
<view class="icon income">➕</view>
|
||||||
|
<text>记收款</text>
|
||||||
|
</view>
|
||||||
|
<view class="menu-item" @click="scanCode">
|
||||||
|
<view class="icon scan">📷</view>
|
||||||
|
<text>扫一扫</text>
|
||||||
|
</view>
|
||||||
|
<view class="menu-item" @click="showToast('功能开发中')">
|
||||||
|
<view class="icon report">📊</view>
|
||||||
|
<text>报表</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 功能列表 -->
|
||||||
|
<view class="function-list">
|
||||||
|
<view class="list-group">
|
||||||
|
<view class="list-item" @click="showToast('功能开发中')">
|
||||||
|
<view class="item-left">
|
||||||
|
<view class="icon">📋</view>
|
||||||
|
<text>我的审批</text>
|
||||||
|
</view>
|
||||||
|
<view class="item-right">
|
||||||
|
<text class="badge" v-if="stats.pendingApproval > 0">{{ stats.pendingApproval }}</text>
|
||||||
|
<text class="arrow">></text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="list-item" @click="showToast('功能开发中')">
|
||||||
|
<view class="item-left">
|
||||||
|
<view class="icon">📁</view>
|
||||||
|
<text>我的项目</text>
|
||||||
|
</view>
|
||||||
|
<view class="item-right">
|
||||||
|
<text class="arrow">></text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="list-item" @click="showToast('功能开发中')">
|
||||||
|
<view class="item-left">
|
||||||
|
<view class="icon">📊</view>
|
||||||
|
<text>数据统计</text>
|
||||||
|
</view>
|
||||||
|
<view class="item-right">
|
||||||
|
<text class="arrow">></text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="list-group">
|
||||||
|
<view class="list-item" @click="showToast('功能开发中')">
|
||||||
|
<view class="item-left">
|
||||||
|
<view class="icon">🔔</view>
|
||||||
|
<text>消息通知</text>
|
||||||
|
</view>
|
||||||
|
<view class="item-right">
|
||||||
|
<text class="badge" v-if="stats.messages > 0">{{ stats.messages }}</text>
|
||||||
|
<text class="arrow">></text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="list-item" @click="showToast('功能开发中')">
|
||||||
|
<view class="item-left">
|
||||||
|
<view class="icon">⚙️</view>
|
||||||
|
<text>系统设置</text>
|
||||||
|
</view>
|
||||||
|
<view class="item-right">
|
||||||
|
<text class="arrow">></text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="list-item" @click="showToast('功能开发中')">
|
||||||
|
<view class="item-left">
|
||||||
|
<view class="icon">❓</view>
|
||||||
|
<text>帮助与反馈</text>
|
||||||
|
</view>
|
||||||
|
<view class="item-right">
|
||||||
|
<text class="arrow">></text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 版本信息 -->
|
||||||
|
<view class="version-info">
|
||||||
|
<text>资金服务平台 v1.0.0</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 退出登录 -->
|
||||||
|
<button class="logout-btn" @click="handleLogout">
|
||||||
|
退出登录
|
||||||
|
</button>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted } from 'vue'
|
||||||
|
|
||||||
|
const userInfo = ref<any>({})
|
||||||
|
const stats = ref({
|
||||||
|
todayTasks: 3,
|
||||||
|
pendingApproval: 2,
|
||||||
|
messages: 5
|
||||||
|
})
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
// 获取用户信息
|
||||||
|
const storedUserInfo = uni.getStorageSync('userInfo')
|
||||||
|
if (storedUserInfo) {
|
||||||
|
userInfo.value = storedUserInfo
|
||||||
|
} else {
|
||||||
|
// 模拟数据
|
||||||
|
userInfo.value = {
|
||||||
|
username: 'admin',
|
||||||
|
realName: '管理员',
|
||||||
|
deptName: '技术部',
|
||||||
|
position: '高级工程师',
|
||||||
|
avatar: ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const navigateTo = (url: string) => {
|
||||||
|
uni.navigateTo({ url })
|
||||||
|
}
|
||||||
|
|
||||||
|
const scanCode = () => {
|
||||||
|
uni.scanCode({
|
||||||
|
success: (res) => {
|
||||||
|
uni.showModal({
|
||||||
|
title: '扫描结果',
|
||||||
|
content: res.result,
|
||||||
|
showCancel: false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
fail: () => {
|
||||||
|
uni.showToast({ title: '扫描失败', icon: 'none' })
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const showToast = (message: string) => {
|
||||||
|
uni.showToast({ title: message, icon: 'none' })
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleLogout = () => {
|
||||||
|
uni.showModal({
|
||||||
|
title: '提示',
|
||||||
|
content: '确定要退出登录吗？',
|
||||||
|
success: (res) => {
|
||||||
|
if (res.confirm) {
|
||||||
|
// 清除登录信息
|
||||||
|
uni.removeStorageSync('token')
|
||||||
|
uni.removeStorageSync('userInfo')
|
||||||
|
|
||||||
|
uni.showToast({
|
||||||
|
title: '已退出登录',
|
||||||
|
icon: 'success'
|
||||||
|
})
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
uni.reLaunch({
|
||||||
|
url: '/pages/login/index'
|
||||||
|
})
|
||||||
|
}, 1500)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.container {
|
||||||
|
min-height: 100vh;
|
||||||
|
background: #f5f7fa;
|
||||||
|
padding-bottom: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-card {
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
padding: 60rpx 40rpx 40rpx;
|
||||||
|
border-radius: 0 0 40rpx 40rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
|
||||||
|
.user-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 40rpx;
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 120rpx;
|
||||||
|
height: 120rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 4rpx solid rgba(255, 255, 255, 0.3);
|
||||||
|
margin-right: 30rpx;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-main {
|
||||||
|
.name {
|
||||||
|
display: block;
|
||||||
|
font-size: 40rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #fff;
|
||||||
|
margin-bottom: 12rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dept {
|
||||||
|
display: block;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: rgba(255, 255, 255, 0.8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-stats {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: 20rpx;
|
||||||
|
padding: 30rpx;
|
||||||
|
|
||||||
|
.stat-item {
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.num {
|
||||||
|
display: block;
|
||||||
|
font-size: 40rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #fff;
|
||||||
|
margin-bottom: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
display: block;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: rgba(255, 255, 255, 0.8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.quick-menu {
|
||||||
|
background: #fff;
|
||||||
|
margin: 20rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
padding: 30rpx;
|
||||||
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
|
||||||
|
|
||||||
|
.menu-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
gap: 20rpx;
|
||||||
|
|
||||||
|
.menu-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
width: 100rpx;
|
||||||
|
height: 100rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 48rpx;
|
||||||
|
margin-bottom: 16rpx;
|
||||||
|
|
||||||
|
&.expense {
|
||||||
|
background: #fff1f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.income {
|
||||||
|
background: #f6ffed;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.scan {
|
||||||
|
background: #e6f7ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.report {
|
||||||
|
background: #fff7e6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
text {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.function-list {
|
||||||
|
margin: 20rpx;
|
||||||
|
|
||||||
|
.list-group {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
|
||||||
|
|
||||||
|
.list-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 30rpx;
|
||||||
|
border-bottom: 1rpx solid #f5f5f5;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
font-size: 40rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
text {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
min-width: 36rpx;
|
||||||
|
height: 36rpx;
|
||||||
|
background: #ff4d4f;
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 18rpx;
|
||||||
|
font-size: 22rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0 10rpx;
|
||||||
|
margin-right: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.version-info {
|
||||||
|
text-align: center;
|
||||||
|
padding: 40rpx;
|
||||||
|
|
||||||
|
text {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.logout-btn {
|
||||||
|
margin: 0 40rpx;
|
||||||
|
height: 96rpx;
|
||||||
|
background: #fff;
|
||||||
|
color: #ff4d4f;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
border-radius: 48rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background: #f5f5f5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
568
fund-mobile/src/pages/project/detail.vue
Normal file
568
fund-mobile/src/pages/project/detail.vue
Normal file
@ -0,0 +1,568 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<!-- 项目基本信息 -->
|
||||||
|
<view class="info-card">
|
||||||
|
<view class="project-header">
|
||||||
|
<view class="header-main">
|
||||||
|
<text class="project-name">{{ project.projectName }}</text>
|
||||||
|
<view class="project-code">{{ project.projectCode }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="status-tag" :class="'status-' + project.status">
|
||||||
|
{{ getStatusText(project.status) }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="info-grid">
|
||||||
|
<view class="info-item">
|
||||||
|
<text class="label">客户</text>
|
||||||
|
<text class="value">{{ project.customerName }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-item">
|
||||||
|
<text class="label">负责人</text>
|
||||||
|
<text class="value">{{ project.managerName }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-item">
|
||||||
|
<text class="label">开始日期</text>
|
||||||
|
<text class="value">{{ project.startDate }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-item">
|
||||||
|
<text class="label">结束日期</text>
|
||||||
|
<text class="value">{{ project.endDate }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="description" v-if="project.description">
|
||||||
|
<text class="desc-label">项目描述</text>
|
||||||
|
<text class="desc-content">{{ project.description }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 进度展示 -->
|
||||||
|
<view class="progress-card">
|
||||||
|
<view class="card-title">项目进度</view>
|
||||||
|
<view class="progress-circle">
|
||||||
|
<view class="circle-inner">
|
||||||
|
<text class="progress-num">{{ project.progress || 0 }}%</text>
|
||||||
|
<text class="progress-text">已完成</text>
|
||||||
|
</view>
|
||||||
|
<view class="circle-bg" :style="{ background: getProgressColor(project.progress) }"></view>
|
||||||
|
</view>
|
||||||
|
<view class="progress-stages">
|
||||||
|
<view class="stage-item" v-for="(stage, index) in stages" :key="index">
|
||||||
|
<view class="stage-dot" :class="{ completed: stage.completed }"></view>
|
||||||
|
<text class="stage-name">{{ stage.name }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 财务统计 -->
|
||||||
|
<view class="finance-card">
|
||||||
|
<view class="card-title">财务情况</view>
|
||||||
|
<view class="finance-list">
|
||||||
|
<view class="finance-item">
|
||||||
|
<view class="item-icon contract">📋</view>
|
||||||
|
<view class="item-info">
|
||||||
|
<text class="label">合同金额</text>
|
||||||
|
<text class="value">¥{{ project.contractAmount || '0.00' }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="finance-item">
|
||||||
|
<view class="item-icon income">💰</view>
|
||||||
|
<view class="item-info">
|
||||||
|
<text class="label">已收款</text>
|
||||||
|
<text class="value received">¥{{ project.receivedAmount || '0.00' }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="finance-item">
|
||||||
|
<view class="item-icon pending">⏳</view>
|
||||||
|
<view class="item-info">
|
||||||
|
<text class="label">待收款</text>
|
||||||
|
<text class="value pending">¥{{ project.pendingAmount || '0.00' }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="finance-item">
|
||||||
|
<view class="item-icon expense">💸</view>
|
||||||
|
<view class="item-info">
|
||||||
|
<text class="label">已支出</text>
|
||||||
|
<text class="value expense">¥{{ project.expenseAmount || '0.00' }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 项目成员 -->
|
||||||
|
<view class="member-card">
|
||||||
|
<view class="card-title">项目成员</view>
|
||||||
|
<view class="member-list">
|
||||||
|
<view class="member-item" v-for="(member, index) in members" :key="index">
|
||||||
|
<image class="avatar" :src="member.avatar || '/static/default-avatar.png'"></image>
|
||||||
|
<view class="member-info">
|
||||||
|
<text class="name">{{ member.name }}</text>
|
||||||
|
<text class="role">{{ member.role }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 底部操作栏 -->
|
||||||
|
<view class="action-bar">
|
||||||
|
<view class="action-btn secondary" @click="goBack">
|
||||||
|
<text>返回</text>
|
||||||
|
</view>
|
||||||
|
<view class="action-btn primary" @click="editProject">
|
||||||
|
<text>编辑</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted } from 'vue'
|
||||||
|
import { API_URLS } from '@/config/api'
|
||||||
|
|
||||||
|
const project = ref<any>({})
|
||||||
|
const stages = ref<any[]>([
|
||||||
|
{ name: '需求分析', completed: true },
|
||||||
|
{ name: '方案设计', completed: true },
|
||||||
|
{ name: '开发实施', completed: true },
|
||||||
|
{ name: '测试验收', completed: false },
|
||||||
|
{ name: '项目交付', completed: false }
|
||||||
|
])
|
||||||
|
const members = ref<any[]>([
|
||||||
|
{ name: '张三', role: '项目经理', avatar: '' },
|
||||||
|
{ name: '李四', role: '技术负责人', avatar: '' },
|
||||||
|
{ name: '王五', role: '产品经理', avatar: '' }
|
||||||
|
])
|
||||||
|
|
||||||
|
const statusMap: any = {
|
||||||
|
'0': '未启动',
|
||||||
|
'1': '进行中',
|
||||||
|
'2': '已完成',
|
||||||
|
'3': '已暂停'
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
const pages = getCurrentPages()
|
||||||
|
const currentPage = pages[pages.length - 1]
|
||||||
|
const projectId = currentPage.options?.id
|
||||||
|
|
||||||
|
if (projectId) {
|
||||||
|
loadProjectDetail(projectId)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const loadProjectDetail = async (id: string) => {
|
||||||
|
try {
|
||||||
|
const res: any = await uni.request({
|
||||||
|
url: API_URLS.projectDetail(Number(id)),
|
||||||
|
method: 'GET'
|
||||||
|
})
|
||||||
|
|
||||||
|
if (res.statusCode === 200 && res.data.code === 200) {
|
||||||
|
project.value = {
|
||||||
|
...res.data.data,
|
||||||
|
progress: 65,
|
||||||
|
contractAmount: '500,000.00',
|
||||||
|
receivedAmount: '300,000.00',
|
||||||
|
pendingAmount: '200,000.00',
|
||||||
|
expenseAmount: '150,000.00'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('加载项目详情失败', error)
|
||||||
|
uni.showToast({ title: '加载失败', icon: 'none' })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const getStatusText = (status: string) => {
|
||||||
|
return statusMap[status] || '未知'
|
||||||
|
}
|
||||||
|
|
||||||
|
const getProgressColor = (progress: number) => {
|
||||||
|
if (progress >= 80) return 'linear-gradient(135deg, #52c41a 0%, #389e0d 100%)'
|
||||||
|
if (progress >= 50) return 'linear-gradient(135deg, #1890ff 0%, #096dd9 100%)'
|
||||||
|
if (progress >= 20) return 'linear-gradient(135deg, #faad14 0%, #d48806 100%)'
|
||||||
|
return 'linear-gradient(135deg, #ff4d4f 0%, #cf1322 100%)'
|
||||||
|
}
|
||||||
|
|
||||||
|
const goBack = () => {
|
||||||
|
uni.navigateBack()
|
||||||
|
}
|
||||||
|
|
||||||
|
const editProject = () => {
|
||||||
|
uni.showToast({
|
||||||
|
title: '编辑功能开发中',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.container {
|
||||||
|
min-height: 100vh;
|
||||||
|
background: #f5f7fa;
|
||||||
|
padding: 20rpx;
|
||||||
|
padding-bottom: 140rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-card {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
padding: 40rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
|
||||||
|
|
||||||
|
.project-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
padding-bottom: 30rpx;
|
||||||
|
border-bottom: 1rpx solid #f0f0f0;
|
||||||
|
|
||||||
|
.header-main {
|
||||||
|
flex: 1;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
|
||||||
|
.project-name {
|
||||||
|
display: block;
|
||||||
|
font-size: 40rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 12rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-code {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-tag {
|
||||||
|
padding: 10rpx 24rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
|
||||||
|
&.status-0 {
|
||||||
|
background: #f5f5f5;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.status-1 {
|
||||||
|
background: #e6f7ff;
|
||||||
|
color: #1890ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.status-2 {
|
||||||
|
background: #f6ffed;
|
||||||
|
color: #52c41a;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.status-3 {
|
||||||
|
background: #fff7e6;
|
||||||
|
color: #faad14;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 24rpx;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
|
||||||
|
.info-item {
|
||||||
|
.label {
|
||||||
|
display: block;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
margin-bottom: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
display: block;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
padding-top: 30rpx;
|
||||||
|
border-top: 1rpx solid #f0f0f0;
|
||||||
|
|
||||||
|
.desc-label {
|
||||||
|
display: block;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999;
|
||||||
|
margin-bottom: 12rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desc-content {
|
||||||
|
display: block;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-card {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
padding: 40rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
|
||||||
|
|
||||||
|
.card-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-circle {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 40rpx;
|
||||||
|
|
||||||
|
.circle-inner {
|
||||||
|
width: 200rpx;
|
||||||
|
height: 200rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #f5f5f5;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
|
.progress-num {
|
||||||
|
font-size: 48rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-text {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
margin-top: 8rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.circle-bg {
|
||||||
|
position: absolute;
|
||||||
|
width: 200rpx;
|
||||||
|
height: 200rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
opacity: 0.2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-stages {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.stage-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
.stage-dot {
|
||||||
|
width: 20rpx;
|
||||||
|
height: 20rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #ddd;
|
||||||
|
margin-bottom: 12rpx;
|
||||||
|
|
||||||
|
&.completed {
|
||||||
|
background: #52c41a;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.stage-name {
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.finance-card {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
padding: 40rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
|
||||||
|
|
||||||
|
.card-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.finance-list {
|
||||||
|
.finance-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 24rpx 0;
|
||||||
|
border-bottom: 1rpx solid #f5f5f5;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-icon {
|
||||||
|
width: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 40rpx;
|
||||||
|
margin-right: 24rpx;
|
||||||
|
|
||||||
|
&.contract {
|
||||||
|
background: #e6f7ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.income {
|
||||||
|
background: #f6ffed;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.pending {
|
||||||
|
background: #fff7e6;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.expense {
|
||||||
|
background: #fff1f0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-info {
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
.label {
|
||||||
|
display: block;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999;
|
||||||
|
margin-bottom: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
display: block;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
|
||||||
|
&.received {
|
||||||
|
color: #52c41a;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.pending {
|
||||||
|
color: #ff4d4f;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.expense {
|
||||||
|
color: #ff4d4f;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-card {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
padding: 40rpx;
|
||||||
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
|
||||||
|
|
||||||
|
.card-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-list {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 30rpx;
|
||||||
|
|
||||||
|
.member-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: calc(50% - 15rpx);
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
background: #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-info {
|
||||||
|
.name {
|
||||||
|
display: block;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.role {
|
||||||
|
display: block;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-bar {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: #fff;
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
||||||
|
display: flex;
|
||||||
|
gap: 20rpx;
|
||||||
|
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.06);
|
||||||
|
|
||||||
|
.action-btn {
|
||||||
|
flex: 1;
|
||||||
|
height: 88rpx;
|
||||||
|
border-radius: 44rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
|
||||||
|
&.secondary {
|
||||||
|
background: #f5f5f5;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.primary {
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
511
fund-mobile/src/pages/project/list.vue
Normal file
511
fund-mobile/src/pages/project/list.vue
Normal file
@ -0,0 +1,511 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<!-- 搜索栏 -->
|
||||||
|
<view class="search-bar">
|
||||||
|
<view class="search-input">
|
||||||
|
<text class="search-icon">🔍</text>
|
||||||
|
<input
|
||||||
|
v-model="searchKey"
|
||||||
|
placeholder="搜索项目名称"
|
||||||
|
confirm-type="search"
|
||||||
|
@confirm="handleSearch"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 状态筛选 -->
|
||||||
|
<view class="status-bar">
|
||||||
|
<scroll-view scroll-x class="status-scroll">
|
||||||
|
<view
|
||||||
|
class="status-item"
|
||||||
|
:class="{ active: currentStatus === '' }"
|
||||||
|
@click="setStatus('')"
|
||||||
|
>
|
||||||
|
全部
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="status-item"
|
||||||
|
:class="{ active: currentStatus === '0' }"
|
||||||
|
@click="setStatus('0')"
|
||||||
|
>
|
||||||
|
未启动
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="status-item"
|
||||||
|
:class="{ active: currentStatus === '1' }"
|
||||||
|
@click="setStatus('1')"
|
||||||
|
>
|
||||||
|
进行中
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="status-item"
|
||||||
|
:class="{ active: currentStatus === '2' }"
|
||||||
|
@click="setStatus('2')"
|
||||||
|
>
|
||||||
|
已完成
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="status-item"
|
||||||
|
:class="{ active: currentStatus === '3' }"
|
||||||
|
@click="setStatus('3')"
|
||||||
|
>
|
||||||
|
已暂停
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 项目列表 -->
|
||||||
|
<scroll-view
|
||||||
|
scroll-y
|
||||||
|
class="project-list"
|
||||||
|
refresher-enabled
|
||||||
|
:refresher-triggered="refreshing"
|
||||||
|
@refresherrefresh="onRefresh"
|
||||||
|
@scrolltolower="loadMore"
|
||||||
|
>
|
||||||
|
<view class="list-content">
|
||||||
|
<view
|
||||||
|
class="project-card"
|
||||||
|
v-for="(item, index) in projectList"
|
||||||
|
:key="index"
|
||||||
|
@click="goDetail(item)"
|
||||||
|
>
|
||||||
|
<view class="card-header">
|
||||||
|
<view class="project-info">
|
||||||
|
<text class="project-name">{{ item.projectName }}</text>
|
||||||
|
<view class="project-code">{{ item.projectCode }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="status-tag" :class="'status-' + item.status">
|
||||||
|
{{ getStatusText(item.status) }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="card-body">
|
||||||
|
<view class="info-row">
|
||||||
|
<text class="label">客户</text>
|
||||||
|
<text class="value">{{ item.customerName }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-row">
|
||||||
|
<text class="label">负责人</text>
|
||||||
|
<text class="value">{{ item.managerName }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-row">
|
||||||
|
<text class="label">周期</text>
|
||||||
|
<text class="value">{{ item.startDate }} 至 {{ item.endDate }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="progress-section">
|
||||||
|
<view class="progress-header">
|
||||||
|
<text class="progress-label">项目进度</text>
|
||||||
|
<text class="progress-value">{{ item.progress || 0 }}%</text>
|
||||||
|
</view>
|
||||||
|
<view class="progress-bar">
|
||||||
|
<view class="progress-fill" :style="{ width: (item.progress || 0) + '%' }"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="card-footer">
|
||||||
|
<view class="amount-item">
|
||||||
|
<text class="amount-label">合同金额</text>
|
||||||
|
<text class="amount-value">¥{{ item.contractAmount || '0.00' }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="amount-item">
|
||||||
|
<text class="amount-label">已收款</text>
|
||||||
|
<text class="amount-value received">¥{{ item.receivedAmount || '0.00' }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="amount-item">
|
||||||
|
<text class="amount-label">未收款</text>
|
||||||
|
<text class="amount-value pending">¥{{ item.pendingAmount || '0.00' }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 加载状态 -->
|
||||||
|
<view class="load-more" v-if="loading">
|
||||||
|
<text class="loading-icon">⟳</text>
|
||||||
|
<text>加载中...</text>
|
||||||
|
</view>
|
||||||
|
<view class="no-more" v-else-if="noMore">
|
||||||
|
<text>没有更多了</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 空状态 -->
|
||||||
|
<view class="empty-state" v-if="projectList.length === 0 && !loading">
|
||||||
|
<text class="empty-icon">📁</text>
|
||||||
|
<text class="empty-text">暂无项目数据</text>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted } from 'vue'
|
||||||
|
import { API_URLS } from '@/config/api'
|
||||||
|
|
||||||
|
const searchKey = ref('')
|
||||||
|
const currentStatus = ref('')
|
||||||
|
const projectList = ref<any[]>([])
|
||||||
|
const loading = ref(false)
|
||||||
|
const refreshing = ref(false)
|
||||||
|
const noMore = ref(false)
|
||||||
|
const current = ref(1)
|
||||||
|
const size = 10
|
||||||
|
|
||||||
|
const statusMap: any = {
|
||||||
|
'0': '未启动',
|
||||||
|
'1': '进行中',
|
||||||
|
'2': '已完成',
|
||||||
|
'3': '已暂停'
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
loadData()
|
||||||
|
})
|
||||||
|
|
||||||
|
const loadData = async (isRefresh = false) => {
|
||||||
|
if (loading.value) return
|
||||||
|
|
||||||
|
loading.value = true
|
||||||
|
|
||||||
|
if (isRefresh) {
|
||||||
|
current.value = 1
|
||||||
|
noMore.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res: any = await uni.request({
|
||||||
|
url: API_URLS.projectList,
|
||||||
|
method: 'GET',
|
||||||
|
data: {
|
||||||
|
current: current.value,
|
||||||
|
size: size,
|
||||||
|
projectName: searchKey.value,
|
||||||
|
status: currentStatus.value
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
if (res.statusCode === 200 && res.data.code === 200) {
|
||||||
|
const records = res.data.data.records || []
|
||||||
|
|
||||||
|
// 模拟数据补充
|
||||||
|
const mockData = records.map((item: any) => ({
|
||||||
|
...item,
|
||||||
|
progress: Math.floor(Math.random() * 100),
|
||||||
|
contractAmount: (Math.random() * 1000000).toFixed(2),
|
||||||
|
receivedAmount: (Math.random() * 500000).toFixed(2),
|
||||||
|
pendingAmount: (Math.random() * 500000).toFixed(2)
|
||||||
|
}))
|
||||||
|
|
||||||
|
if (isRefresh) {
|
||||||
|
projectList.value = mockData
|
||||||
|
} else {
|
||||||
|
projectList.value = [...projectList.value, ...mockData]
|
||||||
|
}
|
||||||
|
|
||||||
|
if (records.length < size) {
|
||||||
|
noMore.value = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('加载项目列表失败', error)
|
||||||
|
uni.showToast({ title: '加载失败', icon: 'none' })
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
refreshing.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const onRefresh = () => {
|
||||||
|
refreshing.value = true
|
||||||
|
loadData(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
const loadMore = () => {
|
||||||
|
if (noMore.value || loading.value) return
|
||||||
|
current.value++
|
||||||
|
loadData()
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSearch = () => {
|
||||||
|
loadData(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
const setStatus = (status: string) => {
|
||||||
|
currentStatus.value = status
|
||||||
|
loadData(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
const getStatusText = (status: string) => {
|
||||||
|
return statusMap[status] || '未知'
|
||||||
|
}
|
||||||
|
|
||||||
|
const goDetail = (item: any) => {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/project/detail?id=${item.projectId}`
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.container {
|
||||||
|
min-height: 100vh;
|
||||||
|
background: #f5f7fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-bar {
|
||||||
|
background: #fff;
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
border-bottom: 1rpx solid #f0f0f0;
|
||||||
|
|
||||||
|
.search-input {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background: #f5f5f5;
|
||||||
|
border-radius: 40rpx;
|
||||||
|
padding: 16rpx 24rpx;
|
||||||
|
|
||||||
|
.search-icon {
|
||||||
|
font-size: 32rpx;
|
||||||
|
margin-right: 16rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-bar {
|
||||||
|
background: #fff;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
border-bottom: 1rpx solid #f0f0f0;
|
||||||
|
|
||||||
|
.status-scroll {
|
||||||
|
white-space: nowrap;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
|
||||||
|
.status-item {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 12rpx 30rpx;
|
||||||
|
margin-right: 16rpx;
|
||||||
|
background: #f5f5f5;
|
||||||
|
border-radius: 30rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-list {
|
||||||
|
height: calc(100vh - 200rpx);
|
||||||
|
padding: 20rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-content {
|
||||||
|
.project-card {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
padding: 30rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-bottom: 24rpx;
|
||||||
|
|
||||||
|
.project-info {
|
||||||
|
flex: 1;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
|
||||||
|
.project-name {
|
||||||
|
display: block;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-code {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-tag {
|
||||||
|
padding: 8rpx 20rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
|
||||||
|
&.status-0 {
|
||||||
|
background: #f5f5f5;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.status-1 {
|
||||||
|
background: #e6f7ff;
|
||||||
|
color: #1890ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.status-2 {
|
||||||
|
background: #f6ffed;
|
||||||
|
color: #52c41a;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.status-3 {
|
||||||
|
background: #fff7e6;
|
||||||
|
color: #faad14;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-body {
|
||||||
|
margin-bottom: 24rpx;
|
||||||
|
padding-bottom: 24rpx;
|
||||||
|
border-bottom: 1rpx solid #f5f5f5;
|
||||||
|
|
||||||
|
.info-row {
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 16rpx;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
width: 120rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-section {
|
||||||
|
margin-bottom: 24rpx;
|
||||||
|
padding-bottom: 24rpx;
|
||||||
|
border-bottom: 1rpx solid #f5f5f5;
|
||||||
|
|
||||||
|
.progress-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 12rpx;
|
||||||
|
|
||||||
|
.progress-label {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-value {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #1890ff;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar {
|
||||||
|
height: 12rpx;
|
||||||
|
background: #f0f0f0;
|
||||||
|
border-radius: 6rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.progress-fill {
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
|
||||||
|
border-radius: 6rpx;
|
||||||
|
transition: width 0.3s ease;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.amount-item {
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.amount-label {
|
||||||
|
display: block;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
margin-bottom: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amount-value {
|
||||||
|
display: block;
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
|
||||||
|
&.received {
|
||||||
|
color: #52c41a;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.pending {
|
||||||
|
color: #ff4d4f;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.load-more, .no-more {
|
||||||
|
text-align: center;
|
||||||
|
padding: 30rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999;
|
||||||
|
|
||||||
|
.loading-icon {
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
animation: rotate 1s linear infinite;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rotate {
|
||||||
|
from { transform: rotate(0deg); }
|
||||||
|
to { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding-top: 200rpx;
|
||||||
|
|
||||||
|
.empty-icon {
|
||||||
|
font-size: 120rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
534
fund-mobile/src/pages/receipt/add.vue
Normal file
534
fund-mobile/src/pages/receipt/add.vue
Normal file
@ -0,0 +1,534 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<view class="form-card">
|
||||||
|
<view class="form-title">
|
||||||
|
<text class="icon">💰</text>
|
||||||
|
<text>收款录入</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<text class="label">收款金额 <text class="required">*</text></text>
|
||||||
|
<view class="amount-input">
|
||||||
|
<text class="currency">¥</text>
|
||||||
|
<input
|
||||||
|
class="input"
|
||||||
|
v-model="form.amount"
|
||||||
|
placeholder="请输入收款金额"
|
||||||
|
type="digit"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<text class="label">收款方式 <text class="required">*</text></text>
|
||||||
|
<view class="radio-group">
|
||||||
|
<view
|
||||||
|
class="radio-item"
|
||||||
|
v-for="(item, index) in receiptMethods"
|
||||||
|
:key="index"
|
||||||
|
:class="{ active: form.receiptMethod === item.value }"
|
||||||
|
@click="form.receiptMethod = item.value"
|
||||||
|
>
|
||||||
|
<text class="radio-icon">{{ item.icon }}</text>
|
||||||
|
<text>{{ item.label }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<text class="label">关联客户 <text class="required">*</text></text>
|
||||||
|
<picker mode="selector" :range="customers" range-key="customerName" :value="customerIndex" @change="onCustomerChange">
|
||||||
|
<view class="picker">
|
||||||
|
<view class="picker-left">
|
||||||
|
<text class="picker-icon">👤</text>
|
||||||
|
<text>{{ form.customerName || '请选择客户' }}</text>
|
||||||
|
</view>
|
||||||
|
<text class="arrow">></text>
|
||||||
|
</view>
|
||||||
|
</picker>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<text class="label">关联项目</text>
|
||||||
|
<picker mode="selector" :range="projects" range-key="projectName" :value="projectIndex" @change="onProjectChange">
|
||||||
|
<view class="picker">
|
||||||
|
<view class="picker-left">
|
||||||
|
<text class="picker-icon">📁</text>
|
||||||
|
<text>{{ form.projectName || '请选择项目（可选）' }}</text>
|
||||||
|
</view>
|
||||||
|
<text class="arrow">></text>
|
||||||
|
</view>
|
||||||
|
</picker>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<text class="label">收款日期 <text class="required">*</text></text>
|
||||||
|
<picker mode="date" :value="form.receiptDate" @change="onDateChange">
|
||||||
|
<view class="picker">
|
||||||
|
<view class="picker-left">
|
||||||
|
<text class="picker-icon">📅</text>
|
||||||
|
<text>{{ form.receiptDate }}</text>
|
||||||
|
</view>
|
||||||
|
<text class="arrow">></text>
|
||||||
|
</view>
|
||||||
|
</picker>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<text class="label">收款说明</text>
|
||||||
|
<textarea
|
||||||
|
class="textarea"
|
||||||
|
v-model="form.remark"
|
||||||
|
placeholder="请输入收款说明（选填）"
|
||||||
|
maxlength="200"
|
||||||
|
/>
|
||||||
|
<text class="word-count">{{ form.remark.length }}/200</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<text class="label">上传凭证</text>
|
||||||
|
<view class="upload-list">
|
||||||
|
<view class="upload-item" v-for="(img, index) in form.voucherUrls" :key="index">
|
||||||
|
<image :src="img" mode="aspectFill" @click="previewImage(index)"></image>
|
||||||
|
<text class="delete-btn" @click.stop="deleteImage(index)">×</text>
|
||||||
|
</view>
|
||||||
|
<view class="upload-box" @click="chooseImage" v-if="form.voucherUrls.length < 3">
|
||||||
|
<text class="icon">📷</text>
|
||||||
|
<text class="tip">{{ form.voucherUrls.length }}/3</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<button class="submit-btn" @click="handleSubmit" :loading="loading">
|
||||||
|
<text class="btn-icon">✓</text>
|
||||||
|
<text>确认收款</text>
|
||||||
|
</button>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted } from 'vue'
|
||||||
|
import { API_URLS } from '@/config/api'
|
||||||
|
|
||||||
|
const form = ref({
|
||||||
|
amount: '',
|
||||||
|
receiptMethod: 'bank',
|
||||||
|
receiptMethodName: '银行转账',
|
||||||
|
customerId: '',
|
||||||
|
customerName: '',
|
||||||
|
projectId: '',
|
||||||
|
projectName: '',
|
||||||
|
receiptDate: getToday(),
|
||||||
|
remark: '',
|
||||||
|
voucherUrls: [] as string[]
|
||||||
|
})
|
||||||
|
|
||||||
|
const loading = ref(false)
|
||||||
|
|
||||||
|
const receiptMethods = [
|
||||||
|
{ value: 'bank', label: '银行转账', icon: '🏦' },
|
||||||
|
{ value: 'alipay', label: '支付宝', icon: '💙' },
|
||||||
|
{ value: 'wechat', label: '微信支付', icon: '💚' },
|
||||||
|
{ value: 'cash', label: '现金', icon: '💵' },
|
||||||
|
{ value: 'check', label: '支票', icon: '📋' }
|
||||||
|
]
|
||||||
|
|
||||||
|
const customers = ref<any[]>([])
|
||||||
|
const customerIndex = ref(0)
|
||||||
|
const projects = ref<any[]>([])
|
||||||
|
const projectIndex = ref(0)
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
loadCustomers()
|
||||||
|
loadProjects()
|
||||||
|
})
|
||||||
|
|
||||||
|
function getToday() {
|
||||||
|
const date = new Date()
|
||||||
|
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
|
||||||
|
}
|
||||||
|
|
||||||
|
const loadCustomers = async () => {
|
||||||
|
try {
|
||||||
|
const res: any = await uni.request({
|
||||||
|
url: API_URLS.customerList,
|
||||||
|
method: 'GET',
|
||||||
|
data: { current: 1, size: 100 }
|
||||||
|
})
|
||||||
|
|
||||||
|
if (res.statusCode === 200 && res.data.code === 200) {
|
||||||
|
customers.value = res.data.data.records || []
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('加载客户列表失败', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const loadProjects = async () => {
|
||||||
|
try {
|
||||||
|
const res: any = await uni.request({
|
||||||
|
url: API_URLS.projectList,
|
||||||
|
method: 'GET',
|
||||||
|
data: { current: 1, size: 100 }
|
||||||
|
})
|
||||||
|
|
||||||
|
if (res.statusCode === 200 && res.data.code === 200) {
|
||||||
|
projects.value = res.data.data.records || []
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('加载项目列表失败', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const onCustomerChange = (e: any) => {
|
||||||
|
const index = e.detail.value
|
||||||
|
customerIndex.value = index
|
||||||
|
const customer = customers.value[index]
|
||||||
|
if (customer) {
|
||||||
|
form.value.customerId = customer.customerId
|
||||||
|
form.value.customerName = customer.customerName
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const onProjectChange = (e: any) => {
|
||||||
|
const index = e.detail.value
|
||||||
|
projectIndex.value = index
|
||||||
|
const project = projects.value[index]
|
||||||
|
if (project) {
|
||||||
|
form.value.projectId = project.projectId
|
||||||
|
form.value.projectName = project.projectName
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const onDateChange = (e: any) => {
|
||||||
|
form.value.receiptDate = e.detail.value
|
||||||
|
}
|
||||||
|
|
||||||
|
const chooseImage = () => {
|
||||||
|
const remainCount = 3 - form.value.voucherUrls.length
|
||||||
|
uni.chooseImage({
|
||||||
|
count: remainCount,
|
||||||
|
sizeType: ['compressed'],
|
||||||
|
sourceType: ['camera', 'album'],
|
||||||
|
success: (res: any) => {
|
||||||
|
const tempFilePaths = res.tempFilePaths
|
||||||
|
tempFilePaths.forEach((filePath: string) => {
|
||||||
|
uploadImage(filePath)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const uploadImage = async (filePath: string) => {
|
||||||
|
try {
|
||||||
|
uni.showLoading({ title: '上传中...' })
|
||||||
|
|
||||||
|
const uploadRes: any = await uni.uploadFile({
|
||||||
|
url: API_URLS.upload,
|
||||||
|
filePath: filePath,
|
||||||
|
name: 'file'
|
||||||
|
})
|
||||||
|
|
||||||
|
const data = JSON.parse(uploadRes.data)
|
||||||
|
if (data.code === 200) {
|
||||||
|
form.value.voucherUrls.push(data.data.url)
|
||||||
|
} else {
|
||||||
|
uni.showToast({ title: '上传失败', icon: 'none' })
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
uni.showToast({ title: '上传失败', icon: 'none' })
|
||||||
|
} finally {
|
||||||
|
uni.hideLoading()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const previewImage = (index: number) => {
|
||||||
|
uni.previewImage({
|
||||||
|
current: form.value.voucherUrls[index],
|
||||||
|
urls: form.value.voucherUrls
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const deleteImage = (index: number) => {
|
||||||
|
uni.showModal({
|
||||||
|
title: '提示',
|
||||||
|
content: '确定删除这张图片吗？',
|
||||||
|
success: (res) => {
|
||||||
|
if (res.confirm) {
|
||||||
|
form.value.voucherUrls.splice(index, 1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSubmit = async () => {
|
||||||
|
if (!form.value.amount) {
|
||||||
|
uni.showToast({ title: '请输入收款金额', icon: 'none' })
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (!form.value.customerId) {
|
||||||
|
uni.showToast({ title: '请选择客户', icon: 'none' })
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
loading.value = true
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res: any = await uni.request({
|
||||||
|
url: API_URLS.receiptSave,
|
||||||
|
method: 'POST',
|
||||||
|
data: form.value
|
||||||
|
})
|
||||||
|
|
||||||
|
if (res.statusCode === 200 && res.data.code === 200) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '收款成功',
|
||||||
|
icon: 'success'
|
||||||
|
})
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
uni.navigateBack()
|
||||||
|
}, 1500)
|
||||||
|
} else {
|
||||||
|
uni.showToast({
|
||||||
|
title: res.data.message || '提交失败',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
uni.showToast({ title: '网络错误', icon: 'none' })
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.container {
|
||||||
|
min-height: 100vh;
|
||||||
|
background: #f5f7fa;
|
||||||
|
padding: 20rpx;
|
||||||
|
padding-bottom: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-card {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
padding: 40rpx 30rpx;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 40rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 40rpx;
|
||||||
|
padding-bottom: 30rpx;
|
||||||
|
border-bottom: 2rpx solid #f0f0f0;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
font-size: 48rpx;
|
||||||
|
margin-right: 16rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-item {
|
||||||
|
margin-bottom: 40rpx;
|
||||||
|
|
||||||
|
.label {
|
||||||
|
display: block;
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
|
||||||
|
.required {
|
||||||
|
color: #ff4d4f;
|
||||||
|
margin-left: 8rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.amount-input {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
border-radius: 16rpx;
|
||||||
|
padding: 30rpx;
|
||||||
|
|
||||||
|
.currency {
|
||||||
|
font-size: 48rpx;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 48rpx;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: bold;
|
||||||
|
background: transparent;
|
||||||
|
|
||||||
|
&::placeholder {
|
||||||
|
color: rgba(255, 255, 255, 0.6);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio-group {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 20rpx;
|
||||||
|
|
||||||
|
.radio-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
background: #f5f5f5;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666;
|
||||||
|
transition: all 0.3s;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background: #e6f7ff;
|
||||||
|
color: #1890ff;
|
||||||
|
border: 2rpx solid #1890ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio-icon {
|
||||||
|
font-size: 36rpx;
|
||||||
|
margin-right: 12rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.picker {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 100rpx;
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
padding: 0 24rpx;
|
||||||
|
font-size: 30rpx;
|
||||||
|
|
||||||
|
.picker-left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.picker-icon {
|
||||||
|
font-size: 40rpx;
|
||||||
|
margin-right: 16rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow {
|
||||||
|
color: #999;
|
||||||
|
font-size: 32rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.textarea {
|
||||||
|
width: 100%;
|
||||||
|
height: 200rpx;
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
padding: 24rpx;
|
||||||
|
font-size: 30rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.word-count {
|
||||||
|
display: block;
|
||||||
|
text-align: right;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
margin-top: 12rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-list {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 20rpx;
|
||||||
|
|
||||||
|
.upload-item {
|
||||||
|
position: relative;
|
||||||
|
width: 200rpx;
|
||||||
|
height: 200rpx;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delete-btn {
|
||||||
|
position: absolute;
|
||||||
|
top: 8rpx;
|
||||||
|
right: 8rpx;
|
||||||
|
width: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 32rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-box {
|
||||||
|
width: 200rpx;
|
||||||
|
height: 200rpx;
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border: 2rpx dashed #ddd;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
font-size: 60rpx;
|
||||||
|
margin-bottom: 12rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tip {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-btn {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 100rpx;
|
||||||
|
background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
|
||||||
|
color: #fff;
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
box-shadow: 0 8rpx 20rpx rgba(82, 196, 26, 0.3);
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
opacity: 0.9;
|
||||||
|
transform: translateY(2rpx);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-icon {
|
||||||
|
font-size: 40rpx;
|
||||||
|
margin-right: 12rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
x
Reference in New Issue
Block a user