| | |
| | | <template> |
| | | <view class="client-visit-list"> |
| | | <view class="sales-accoun"> |
| | | <!-- 使用通用页面头部组件 --> |
| | | <PageHeader title="客户拜访" @back="goBack" /> |
| | | |
| | | <!-- 搜索和筛选区域 --> |
| | | <view class="search-filter-section"> |
| | | <view class="search-section"> |
| | | <view class="search-bar"> |
| | | <view class="search-input"> |
| | | <input |
| | | <up-input |
| | | class="search-text" |
| | | placeholder="请输入客户名称" |
| | | v-model="customerName" |
| | | confirm-type="search" |
| | | @confirm="getList" |
| | | @blur="getList" |
| | | clearable |
| | | /> |
| | | </view> |
| | | <view class="filter-button" @click="getList"> |
| | | <up-icon name="search" size="24" color="#999"></up-icon> |
| | | <u-icon name="search" size="24" color="#999"></u-icon> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | |
| | | <!-- 拜访记录列表 --> |
| | | <view class="visit-list" v-if="visitList.length > 0"> |
| | | <view class="ledger-list" v-if="visitList.length > 0"> |
| | | <view v-for="(item, index) in visitList" :key="index"> |
| | | <view class="visit-item"> |
| | | <view class="ledger-item"> |
| | | <view class="item-header"> |
| | | <view class="item-left"> |
| | | <view class="document-icon"> |
| | | <up-icon name="user" size="16" color="#ffffff"></up-icon> |
| | | <up-icon name="file-text" size="16" color="#ffffff"></up-icon> |
| | | </view> |
| | | <text class="item-id">客户:{{ item.customerName }}</text> |
| | | </view> |
| | | <view class="visit-status"> |
| | | <!-- 替换标签和按钮 --> |
| | | <template> |
| | | <u-tag type="success">已完成</u-tag> |
| | | |
| | | <!-- 操作按钮 --> |
| | | <view class="action-buttons"> |
| | | <u-button |
| | | type="primary" |
| | | size="small" |
| | | class="action-btn" |
| | | @click="openDetail(item)" |
| | | > |
| | | 查看详情 |
| | | </u-button> |
| | | <u-button |
| | | type="warning" |
| | | size="small" |
| | | class="action-btn" |
| | | @click="editVisit(item)" |
| | | > |
| | | 编辑 |
| | | </u-button> |
| | | </view> |
| | | </template> |
| | | </view> |
| | | </view> |
| | | <up-divider></up-divider> |
| | |
| | | type="primary" |
| | | size="small" |
| | | class="action-btn" |
| | | @click="viewDetail(item.id)" |
| | | @click="viewDetail(item)" |
| | | > |
| | | 查看详情 |
| | | </u-button> |
| | | <u-button |
| | | type="error" |
| | | size="small" |
| | | plain |
| | | class="action-btn" |
| | | @click="deleteRecord(item.id)" |
| | | > |
| | | 删除 |
| | | </u-button> |
| | | </view> |
| | | </view> |
| | |
| | | import { ref, onMounted } from 'vue' |
| | | import { onShow } from '@dcloudio/uni-app' |
| | | import PageHeader from '@/components/PageHeader.vue' |
| | | import { getVisitRecords, deleteVisitRecord } from '@/api/cooperativeOffice/clientVisit' |
| | | import { getVisitRecords } from '@/api/cooperativeOffice/clientVisit' |
| | | import useUserStore from "@/store/modules/user" |
| | | // 替换 toast 方法 |
| | | defineOptions({name: 'client-visit-index'}) |
| | |
| | | uni.navigateBack() |
| | | } |
| | | |
| | | // 格式化日期时间 |
| | | const formatDateTime = (dateStr) => { |
| | | if (!dateStr) return '' |
| | | return dayjs(dateStr).format("YYYY-MM-DD HH:mm") |
| | | } |
| | | |
| | | // 查询列表 |
| | | const getList = () => { |
| | | showLoadingToast('加载中...') |
| | | const params = { |
| | | current: -1, |
| | | size: -1, |
| | | customerName: customerName.value || undefined, |
| | | customerName: customerName.value, |
| | | } |
| | | getVisitRecords(params) |
| | | .then((res) => { |
| | | visitList.value = res.records || res.data?.records || [] |
| | | closeToast() |
| | | }) |
| | | .catch(() => { |
| | | closeToast() |
| | | showToast('获取数据失败') |
| | | }) |
| | | } |
| | | |
| | | // 显示加载提示 |
| | | const showLoadingToast = (message) => { |
| | | uni.showLoading({ |
| | | title: message, |
| | | mask: true |
| | | }); |
| | | }; |
| | | |
| | | // 关闭提示 |
| | | const closeToast = () => { |
| | | uni.hideLoading(); |
| | | }; |
| | | |
| | | // 新增拜访 - 跳转到登记页面 |
| | | const addVisit = () => { |
| | |
| | | } |
| | | |
| | | // 查看详情 |
| | | const viewDetail = (id) => { |
| | | if (!id) return |
| | | const viewDetail = (item) => { |
| | | uni.setStorageSync('clientVisit', item) |
| | | // 查看详情跳转到只读展示页面 |
| | | uni.navigateTo({ |
| | | url: `/pages/cooperativeOffice/clientVisit/detail?id=${id}` |
| | | }) |
| | | } |
| | | |
| | | // 删除记录 |
| | | const deleteRecord = async (id) => { |
| | | if (!id) return |
| | | uni.showModal({ |
| | | title: '提示', |
| | | content: '此操作将永久删除该拜访记录, 是否继续?', |
| | | success: async (res) => { |
| | | if (!res.confirm) return |
| | | try { |
| | | await deleteVisitRecord(id) |
| | | showToast('删除成功') |
| | | getList() |
| | | } catch (e) { |
| | | showToast('删除失败') |
| | | } |
| | | } |
| | | url: '/pages/cooperativeOffice/clientVisit/view' |
| | | }) |
| | | } |
| | | |
| | |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | | .u-divider { |
| | | margin: 0 !important; |
| | | } |
| | | @import "../../../styles/sales-common.scss"; |
| | | |
| | | .client-visit-list { |
| | | // 页面特定的样式覆盖 |
| | | .sales-accoun { |
| | | min-height: 100vh; |
| | | background: #f8f9fa; |
| | | position: relative; |
| | | padding-bottom: 80px; |
| | | } |
| | | |
| | | .search-filter-section { |
| | | padding: 10px 20px; |
| | | background: #ffffff; |
| | | } |
| | | |
| | | .search-bar { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 12px; |
| | | } |
| | | |
| | | .search-input { |
| | | flex: 1; |
| | | background: #f5f5f5; |
| | | border-radius: 24px; |
| | | padding: 10px 16px; |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 8px; |
| | | } |
| | | |
| | | .search-text { |
| | | flex: 1; |
| | | font-size: 14px; |
| | | color: #333; |
| | | background: transparent; |
| | | border: none; |
| | | outline: none; |
| | | } |
| | | |
| | | .search-text::placeholder { |
| | | color: #999; |
| | | } |
| | | |
| | | .filter-button { |
| | | width: 40px; |
| | | height: 40px; |
| | | border-radius: 8px; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | } |
| | | |
| | | .visit-list { |
| | | padding: 20px; |
| | | } |
| | | |
| | | .visit-item { |
| | | background: #ffffff; |
| | | border-radius: 12px; |
| | | margin-bottom: 16px; |
| | | overflow: hidden; |
| | | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); |
| | | padding: 0 16px; |
| | | } |
| | | |
| | | .item-header { |
| | | padding: 16px 0; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | } |
| | | |
| | | .item-left { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 8px; |
| | | } |
| | | |
| | | // 特定的图标样式 |
| | | .document-icon { |
| | | width: 24px; |
| | | height: 24px; |
| | | background: #667eea; |
| | | border-radius: 4px; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | background: #667eea; // 保持页面特有的背景色 |
| | | } |
| | | |
| | | .item-id { |
| | | font-size: 14px; |
| | | color: #333; |
| | | font-weight: 500; |
| | | } |
| | | |
| | | // 特有样式 |
| | | .visit-status { |
| | | display: flex; |
| | | align-items: center; |
| | | } |
| | | |
| | | .item-details { |
| | | padding: 16px 0; |
| | | } |
| | | |
| | | .detail-row { |
| | | display: flex; |
| | | align-items: flex-start; |
| | | justify-content: space-between; |
| | | margin-bottom: 8px; |
| | | |
| | | &:last-child { |
| | | margin-bottom: 0; |
| | | } |
| | | } |
| | | |
| | | .detail-label { |
| | | font-size: 12px; |
| | | color: #777777; |
| | | min-width: 60px; |
| | | } |
| | | |
| | | .detail-value { |
| | | font-size: 12px; |
| | | color: #000000; |
| | | text-align: right; |
| | | flex: 1; |
| | | margin-left: 16px; |
| | | word-break: break-all; |
| | | word-break: break-all; // 保留页面特有的文本换行样式 |
| | | } |
| | | |
| | | .no-data { |
| | | padding: 40px 0; |
| | | text-align: center; |
| | | color: #999; |
| | | } |
| | | |
| | | .action-buttons { |
| | | display: flex; |
| | | gap: 12px; |
| | | padding: 0 0 16px 0; |
| | | justify-content: space-between; |
| | | } |
| | | |
| | | .action-btn { |
| | | flex: 1; |
| | | } |
| | | |
| | | // 特定的浮动按钮样式 |
| | | .fab-button { |
| | | position: fixed; |
| | | bottom: calc(30px + env(safe-area-inset-bottom)); |
| | | right: 30px; |
| | | width: 56px; |
| | | height: 56px; |
| | | background: #667eea; |
| | | border-radius: 50%; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3); |
| | | z-index: 1000; |
| | | background: #667eea; // 保持页面特有的背景色 |
| | | box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3); // 保持页面特有的阴影效果 |
| | | } |
| | | </style> |
| | | |