From adeb8b768926ed50a3fb0857f366d6a0308d2cc0 Mon Sep 17 00:00:00 2001 From: gaoluyang <2820782392@qq.com> Date: 星期五, 29 八月 2025 17:45:57 +0800 Subject: [PATCH] 修改组件 --- src/pages/cooperativeOffice/clientVisit/index.vue | 399 +++++++++++++++++++++++++++++++++++++++++++++++++++----- 1 files changed, 361 insertions(+), 38 deletions(-) diff --git a/src/pages/cooperativeOffice/clientVisit/index.vue b/src/pages/cooperativeOffice/clientVisit/index.vue index 6e22066..fd307fe 100644 --- a/src/pages/cooperativeOffice/clientVisit/index.vue +++ b/src/pages/cooperativeOffice/clientVisit/index.vue @@ -1,59 +1,382 @@ -// 瀹㈡埛鎷滆 <template> - <view> - <view class="page-header"> - <view class="header-left"> - <up-icon name="arrow-left" size="20" color="#333" @click="goBack"></up-icon> + <view class="client-visit-list"> + <!-- 浣跨敤閫氱敤椤甸潰澶撮儴缁勪欢 --> + <PageHeader title="瀹㈡埛鎷滆" @back="goBack" /> + + <!-- 鎼滅储鍜岀瓫閫夊尯鍩� --> + <view class="search-filter-section"> + <view class="search-bar"> + <view class="search-input"> + <input + class="search-text" + placeholder="璇疯緭鍏ュ鎴峰悕绉�" + v-model="customerName" + confirm-type="search" + @confirm="getList" + /> + </view> + <view class="filter-button" @click="getList"> + <up-icon name="search" size="24" color="#999"></up-icon> + </view> </view> - <view class="header-center"> - <text class="page-title">瀹㈡埛鎷滆</text> + </view> + + <!-- 鎷滆璁板綍鍒楄〃 --> + <view class="visit-list" v-if="visitList.length > 0"> + <view v-for="(item, index) in visitList" :key="index"> + <view class="visit-item"> + <view class="item-header"> + <view class="item-left"> + <view class="document-icon"> + <up-icon name="user" 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> + + <view class="item-details"> + <view class="detail-row"> + <text class="detail-label">鑱旂郴浜�</text> + <text class="detail-value">{{ item.contact || '-' }}</text> + </view> + <view class="detail-row"> + <text class="detail-label">鑱旂郴鐢佃瘽</text> + <text class="detail-value">{{ item.contactPhone || '-' }}</text> + </view> + <view class="detail-row"> + <text class="detail-label">鎷滆鐩殑</text> + <text class="detail-value">{{ item.purposeVisit || '-' }}</text> + </view> + <view class="detail-row"> + <text class="detail-label">鎷滆鏃堕棿</text> + <text class="detail-value">{{ item.purposeDate }}</text> + </view> + <view class="detail-row"> + <text class="detail-label">鎷滆鍦板潃</text> + <text class="detail-value">{{ item.visitAddress || '-' }}</text> + </view> + <view class="detail-row"> + <text class="detail-label">鎷滆浜�</text> + <text class="detail-value">{{ item.visitingPeople || '-' }}</text> + </view> + <view class="detail-row" v-if="item.remark"> + <text class="detail-label">澶囨敞</text> + <text class="detail-value">{{ item.remark }}</text> + </view> + </view> + + <!-- 鎸夐挳鍖哄煙 --> + <view class="action-buttons"> + <van-button + type="primary" + size="small" + class="action-btn" + @click="viewDetail(item.id)" + > + 鏌ョ湅璇︽儏 + </van-button> + <van-button + type="danger" + size="small" + plain + class="action-btn" + @click="deleteRecord(item.id)" + > + 鍒犻櫎 + </van-button> + </view> + </view> </view> + </view> + + <view v-else class="no-data"> + <text>鏆傛棤鎷滆璁板綍</text> + </view> + + <!-- 娴姩鏂板鎸夐挳 --> + <view class="fab-button" @click="addVisit"> + <up-icon name="plus" size="24" color="#ffffff"></up-icon> </view> </view> </template> -<script> -export default { - data() { - return { - title: '瀹㈡埛鎷滆' - } - }, - methods: { - goBack() { - uni.navigateBack({ - delta: 1 - }) - } - } + +<script setup> +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 useUserStore from "@/store/modules/user" +// 鏇挎崲 toast 鏂规硶 + +import dayjs from "dayjs" + +const userStore = useUserStore() + +// 鎼滅储鍏抽敭璇� +const customerName = ref('') + +// 鎷滆璁板綍鏁版嵁 +const visitList = ref([]) + +// 杩斿洖涓婁竴椤� +const goBack = () => { + uni.navigateBack() } + +// 鏍煎紡鍖栨棩鏈熸椂闂� +const formatDateTime = (dateStr) => { + if (!dateStr) return '' + return dayjs(dateStr).format("YYYY-MM-DD HH:mm") +} + +// 鏌ヨ鍒楄〃 +const getList = () => { + const params = { + current: -1, + size: -1, + customerName: customerName.value || undefined, + } + getVisitRecords(params) + .then((res) => { + visitList.value = res.records || res.data?.records || [] + }) + .catch(() => { + showToast('鑾峰彇鏁版嵁澶辫触') + }) +} + +// 鏂板鎷滆 - 璺宠浆鍒扮櫥璁伴〉闈� +const addVisit = () => { + uni.navigateTo({ + url: '/pages/cooperativeOffice/clientVisit/detail' + }) +} + +// 鏌ョ湅璇︽儏 +const viewDetail = (id) => { + if (!id) return + 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('鍒犻櫎澶辫触') + } + } + }) +} + +onMounted(() => { + getList() +}) + +onShow(() => { + getList() +}) </script> -<style> -.page-header { + +<style scoped lang="scss"> +.u-divider { + margin: 0 !important; +} + +.client-visit-list { + 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; - padding: 10px 20px; - background-color: #f5f5f5; - position: relative; } -.header-left { + +.item-left { display: flex; align-items: center; + gap: 8px; } -.header-center { - flex: 1; + +.document-icon { + width: 24px; + height: 24px; + background: #667eea; + border-radius: 4px; display: flex; + align-items: center; justify-content: center; - align-items: center; - position: absolute; - left: 0; - right: 0; - pointer-events: none; } -.page-title { - font-size: 18px; - font-weight: bold; - pointer-events: auto; + +.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; +} + +.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; } </style> -- Gitblit v1.9.3