From 7a0ffb0048adeda9ebfbca1d0b525eb224c173e3 Mon Sep 17 00:00:00 2001 From: gaoluyang <2820782392@qq.com> Date: 星期五, 29 八月 2025 17:00:16 +0800 Subject: [PATCH] 修改组件 --- src/pages/cooperativeOffice/clientVisit/index.vue | 418 ++++++----------------------------------------------------- 1 files changed, 44 insertions(+), 374 deletions(-) diff --git a/src/pages/cooperativeOffice/clientVisit/index.vue b/src/pages/cooperativeOffice/clientVisit/index.vue index afcb5d6..6e22066 100644 --- a/src/pages/cooperativeOffice/clientVisit/index.vue +++ b/src/pages/cooperativeOffice/clientVisit/index.vue @@ -1,389 +1,59 @@ +// 瀹㈡埛鎷滆 <template> - <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="page-header"> + <view class="header-left"> + <up-icon name="arrow-left" size="20" color="#333" @click="goBack"></up-icon> </view> - </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 class="header-center"> + <text class="page-title">瀹㈡埛鎷滆</text> </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 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" -// 鏇挎崲 Vant 鐨� toast -// import { showToast } from 'vant' -// 鏇挎崲 toast 鏂规硶 -const showToast = (message) => { - uni.showToast({ - title: message, - icon: 'none' - }) -} -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('鍒犻櫎澶辫触') - } +<script> +export default { + data() { + return { + title: '瀹㈡埛鎷滆' } - }) -} - -onMounted(() => { - getList() -}) - -onShow(() => { - getList() -}) -</script> - -<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; -} - -.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; -} - -.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; + }, + methods: { + goBack() { + uni.navigateBack({ + delta: 1 + }) + } } } - -.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%; +</script> +<style> +.page-header { display: flex; align-items: center; + justify-content: space-between; + padding: 10px 20px; + background-color: #f5f5f5; + position: relative; +} +.header-left { + display: flex; + align-items: center; +} +.header-center { + flex: 1; + display: flex; justify-content: center; - box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3); - z-index: 1000; + align-items: center; + position: absolute; + left: 0; + right: 0; + pointer-events: none; +} +.page-title { + font-size: 18px; + font-weight: bold; + pointer-events: auto; } </style> -- Gitblit v1.9.3