银行端口添加客户拜访功能
This commit is contained in:
471
src/pagesBank/visit/list.vue
Normal file
471
src/pagesBank/visit/list.vue
Normal file
@@ -0,0 +1,471 @@
|
||||
<script lang="ts" setup>
|
||||
import { getVisitPlanList, deleteVisitPlan } from '@/pagesBank/api'
|
||||
import type { VisitPlan } from '@/typings/bank'
|
||||
import { VisitStatus } from '@/typings/bank'
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '拜访计划',
|
||||
enablePullDownRefresh: true
|
||||
},
|
||||
})
|
||||
|
||||
const visitPlans = ref<VisitPlan[]>([])
|
||||
const loading = ref(false)
|
||||
const keyword = ref('')
|
||||
const activeStatus = ref('')
|
||||
const customerId = ref('')
|
||||
|
||||
const statusTabs = [
|
||||
{ label: '全部', value: '' },
|
||||
{ label: '待拜访', value: 'pending' },
|
||||
{ label: '已完成', value: 'completed' },
|
||||
{ label: '已取消', value: 'cancelled' },
|
||||
]
|
||||
|
||||
async function loadData() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getVisitPlanList({
|
||||
status: activeStatus.value || undefined,
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
keyword: keyword.value
|
||||
})
|
||||
// 如果有客户ID筛选，过滤结果
|
||||
let list = res.list
|
||||
if (customerId.value) {
|
||||
list = list.filter(item => item.customerId === customerId.value)
|
||||
}
|
||||
visitPlans.value = list
|
||||
} finally {
|
||||
loading.value = false
|
||||
uni.stopPullDownRefresh()
|
||||
}
|
||||
}
|
||||
|
||||
function handleSearch() {
|
||||
loadData()
|
||||
}
|
||||
|
||||
function handleTabChange(value: string) {
|
||||
activeStatus.value = value
|
||||
loadData()
|
||||
}
|
||||
|
||||
function handleDetail(id: string) {
|
||||
uni.navigateTo({ url: `/pagesBank/visit/detail?id=${id}` })
|
||||
}
|
||||
|
||||
function handleDelete(id: string) {
|
||||
uni.showModal({
|
||||
title: '删除确认',
|
||||
content: '确定要删除这条拜访计划吗？',
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
uni.showLoading({ title: '删除中...' })
|
||||
try {
|
||||
await deleteVisitPlan(id)
|
||||
uni.showToast({ title: '删除成功', icon: 'success' })
|
||||
loadData()
|
||||
} finally {
|
||||
uni.hideLoading()
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function getStatusInfo(status: string) {
|
||||
const map: Record<string, { text: string; color: string; bgColor: string }> = {
|
||||
pending: { text: '待拜访', color: '#ff8f0d', bgColor: 'rgba(255, 143, 13, 0.1)' },
|
||||
completed: { text: '已完成', color: '#00c05a', bgColor: 'rgba(0, 192, 90, 0.1)' },
|
||||
cancelled: { text: '已取消', color: '#adb5bd', bgColor: 'rgba(173, 181, 189, 0.1)' },
|
||||
}
|
||||
return map[status] || { text: '未知', color: '#999', bgColor: '#f5f5f5' }
|
||||
}
|
||||
|
||||
function formatDate(dateStr: string) {
|
||||
const date = new Date(dateStr)
|
||||
const month = date.getMonth() + 1
|
||||
const day = date.getDate()
|
||||
const weekdays = ['日', '一', '二', '三', '四', '五', '六']
|
||||
const weekday = weekdays[date.getDay()]
|
||||
return `${month}月${day}日 周${weekday}`
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadData()
|
||||
})
|
||||
|
||||
onPullDownRefresh(() => {
|
||||
loadData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="visit-list-page">
|
||||
<view class="sticky-header">
|
||||
<view class="search-bar">
|
||||
<view class="search-input">
|
||||
<text class="i-carbon-search"></text>
|
||||
<input
|
||||
v-model="keyword"
|
||||
placeholder="搜索客户/主题"
|
||||
confirm-type="search"
|
||||
@confirm="handleSearch"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tabs">
|
||||
<view
|
||||
v-for="tab in statusTabs"
|
||||
:key="tab.value"
|
||||
class="tab-item"
|
||||
:class="{ active: activeStatus === tab.value }"
|
||||
@click="handleTabChange(tab.value)"
|
||||
>
|
||||
{{ tab.label }}
|
||||
<view class="line"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="list-container">
|
||||
<view v-if="loading && visitPlans.length === 0" class="loading-state">
|
||||
<text>加载中...</text>
|
||||
</view>
|
||||
|
||||
<view v-else-if="visitPlans.length === 0" class="empty-state">
|
||||
<text class="i-carbon-calendar"></text>
|
||||
<text>暂无拜访计划</text>
|
||||
</view>
|
||||
|
||||
<view
|
||||
v-for="item in visitPlans"
|
||||
:key="item.id"
|
||||
class="visit-card"
|
||||
@click="handleDetail(item.id)"
|
||||
>
|
||||
<view class="card-header">
|
||||
<view class="date-badge">
|
||||
<text class="month">{{ new Date(item.date).getMonth() + 1 }}月</text>
|
||||
<text class="day">{{ new Date(item.date).getDate() }}</text>
|
||||
</view>
|
||||
<view class="header-info">
|
||||
<text class="customer-name">{{ item.customerName }}</text>
|
||||
<text class="topic">{{ item.topic }}</text>
|
||||
</view>
|
||||
<text
|
||||
class="status-tag"
|
||||
:style="{ color: getStatusInfo(item.status).color, backgroundColor: getStatusInfo(item.status).bgColor }"
|
||||
>
|
||||
{{ getStatusInfo(item.status).text }}
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<view class="card-body">
|
||||
<view class="info-row">
|
||||
<text class="i-carbon-location-filled"></text>
|
||||
<text class="location">{{ item.location }}</text>
|
||||
</view>
|
||||
|
||||
<view v-if="item.products.length > 0" class="info-row">
|
||||
<text class="i-carbon-tag"></text>
|
||||
<text class="products">{{ item.products.map(p => p.name).join('、') }}</text>
|
||||
</view>
|
||||
|
||||
<view v-if="item.photos.length > 0" class="photos-row">
|
||||
<image
|
||||
v-for="(photo, index) in item.photos.slice(0, 3)"
|
||||
:key="index"
|
||||
:src="photo"
|
||||
mode="aspectFill"
|
||||
class="photo"
|
||||
/>
|
||||
<view v-if="item.photos.length > 3" class="photo-more">
|
||||
+{{ item.photos.length - 3 }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card-footer">
|
||||
<text class="time">{{ formatDate(item.date) }}</text>
|
||||
<view class="actions" @click.stop>
|
||||
<view class="action-btn delete" @click="handleDelete(item.id)">
|
||||
<text class="i-carbon-trash-can"></text>
|
||||
删除
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.visit-list-page {
|
||||
min-height: 100vh;
|
||||
background: #f8f9fa;
|
||||
padding-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.sticky-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
background: #fff;
|
||||
padding: 20rpx 0 0;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
padding: 0 30rpx 20rpx;
|
||||
|
||||
.search-input {
|
||||
height: 72rpx;
|
||||
background: #f1f3f5;
|
||||
border-radius: 36rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 30rpx;
|
||||
gap: 16rpx;
|
||||
|
||||
text {
|
||||
font-size: 32rpx;
|
||||
color: #adb5bd;
|
||||
}
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
border-bottom: 1rpx solid #f1f3f5;
|
||||
|
||||
.tab-item {
|
||||
padding: 20rpx 0;
|
||||
font-size: 28rpx;
|
||||
color: #495057;
|
||||
position: relative;
|
||||
|
||||
&.active {
|
||||
color: #00c05a;
|
||||
font-weight: 700;
|
||||
|
||||
.line {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 6rpx;
|
||||
background: #00c05a;
|
||||
border-radius: 3rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-container {
|
||||
padding: 24rpx 30rpx;
|
||||
}
|
||||
|
||||
.visit-card {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.02);
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.date-badge {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
background: linear-gradient(135deg, #00c05a 0%, #34d19d 100%);
|
||||
border-radius: 12rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
flex-shrink: 0;
|
||||
|
||||
.month {
|
||||
font-size: 20rpx;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
|
||||
.day {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.header-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
.customer-name {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.topic {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
font-size: 22rpx;
|
||||
padding: 4rpx 16rpx;
|
||||
border-radius: 8rpx;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
background: #f8f9fa;
|
||||
border-radius: 16rpx;
|
||||
padding: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
margin-bottom: 12rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
text:first-child {
|
||||
font-size: 28rpx;
|
||||
color: #adb5bd;
|
||||
}
|
||||
|
||||
.location,
|
||||
.products {
|
||||
flex: 1;
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.photos-row {
|
||||
display: flex;
|
||||
gap: 12rpx;
|
||||
margin-top: 16rpx;
|
||||
|
||||
.photo {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.photo-more {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-top: 1rpx solid #f1f3f5;
|
||||
padding-top: 20rpx;
|
||||
|
||||
.time {
|
||||
font-size: 24rpx;
|
||||
color: #adb5bd;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
|
||||
.action-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
font-size: 24rpx;
|
||||
padding: 8rpx 20rpx;
|
||||
border-radius: 20rpx;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
&.delete {
|
||||
color: #fa4350;
|
||||
background: rgba(250, 67, 80, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 100rpx 0;
|
||||
color: #adb5bd;
|
||||
gap: 20rpx;
|
||||
|
||||
text:first-child {
|
||||
font-size: 80rpx;
|
||||
}
|
||||
|
||||
text:last-child {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 100rpx 0;
|
||||
color: #adb5bd;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user