From 7eebd7981c1f5d2c569556d1e87f7818cef18cce Mon Sep 17 00:00:00 2001 From: gaoluyang <2820782392@qq.com> Date: 星期四, 21 八月 2025 13:15:15 +0800 Subject: [PATCH] 1.样式修改 --- src/pages/sales/receiptPaymentLedger/index.vue | 300 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 300 insertions(+), 0 deletions(-) diff --git a/src/pages/sales/receiptPaymentLedger/index.vue b/src/pages/sales/receiptPaymentLedger/index.vue new file mode 100644 index 0000000..068f4e6 --- /dev/null +++ b/src/pages/sales/receiptPaymentLedger/index.vue @@ -0,0 +1,300 @@ +<template> + <view class="receipt-payment-ledger"> + <!-- 浣跨敤閫氱敤椤甸潰澶撮儴缁勪欢 --> + <PageHeader title="瀹㈡埛寰�鏉�" @back="goBack" /> + + <!-- 鎼滅储鍖哄煙 --> + <view class="search-section"> + <view class="search-bar"> + <view class="search-input"> + <input + class="search-text" + placeholder="璇疯緭鍏ュ鎴峰悕绉�" + v-model="searchForm.searchText" + @input="handleQuery" + /> + </view> + <view class="search-button" @click="handleQuery"> + <up-icon name="search" size="24" color="#999"></up-icon> + </view> + </view> + </view> + + <!-- 瀹㈡埛鍒楄〃 --> + <view class="customer-list-container"> + <view class="customer-list" v-if="tableData.length > 0"> + <view + v-for="(item, index) in tableData" + :key="item.id" + class="customer-item" + @click="rowClickMethod(item)" + > + <view class="item-header"> + <view class="item-left"> + <view class="customer-icon"> + <up-icon name="file-text" size="16" color="#ffffff"></up-icon> + </view> + <text class="customer-name">{{ item.customerName }}</text> + </view> + <view class="item-right"> + <up-icon name="arrow-right" size="16" color="#999"></up-icon> + </view> + </view> + <up-divider></up-divider> + <view class="item-details"> + <view class="detail-row"> + <text class="detail-label">寮�绁ㄩ噾棰�(鍏�)</text> + <text class="detail-value">{{ formattedNumber(item.invoiceTotal) }}</text> + </view> + <view class="detail-row"> + <text class="detail-label">鍥炴閲戦(鍏�)</text> + <text class="detail-value">{{ formattedNumber(item.receiptPaymentAmount) }}</text> + </view> + <view class="detail-row"> + <text class="detail-label">搴旀敹閲戦(鍏�)</text> + <text class="detail-value highlight danger">{{ formattedNumber(item.unReceiptPaymentAmount) }}</text> + </view> + </view> + </view> + </view> + <view v-else class="no-data"> + <text>鏆傛棤瀹㈡埛鏁版嵁</text> + </view> + </view> + </view> +</template> + +<script setup> +import { onMounted, ref, reactive, toRefs } from "vue"; +import { onShow } from '@dcloudio/uni-app'; +import { invoiceLedgerSalesAccount } from "@/api/salesManagement/invoiceLedger"; + + +const tableData = ref([]); + +const page = reactive({ + current: -1, + size: -1, +}); + + + +const data = reactive({ + searchForm: { + searchText: "", + invoiceDate: "", + }, +}); + +const { searchForm } = toRefs(data); + +// 杩斿洖涓婁竴椤� +const goBack = () => { + uni.navigateBack(); +}; + +// 鏌ヨ鍒楄〃 +const handleQuery = () => { + getList(); +}; + +const getList = () => { + invoiceLedgerSalesAccount({ ...searchForm.value, ...page }).then((res) => { + tableData.value = res.data.records; + }).catch(() => { + uni.showToast({ + title: '鏌ヨ澶辫触', + icon: 'error' + }); + }); +}; + +const formattedNumber = (value) => { + return parseFloat(value || 0).toFixed(2); +}; + + + +const rowClickMethod = (row) => { + // 璺宠浆鍒板洖娆捐褰曟槑缁嗛〉闈� + uni.navigateTo({ + url: `/pages/sales/receiptPaymentLedger/detail?customerId=${row.id}` + }); +}; + +onShow(() => { + // 椤甸潰鏄剧ず鏃跺埛鏂板垪琛� + getList(); +}); + +onMounted(() => { + getList(); +}); +</script> + +<style scoped lang="scss"> +.u-divider { + margin: 0 !important; +} + +.receipt-payment-ledger { + min-height: 100vh; + background: #f8f9fa; + position: relative; +} + +.search-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; +} + +.search-button { + width: 40px; + height: 40px; + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; +} + +.customer-list-container { + padding: 20px; +} + +.customer-list { + display: flex; + flex-direction: column; + gap: 16px; +} + +.customer-item { + background: #ffffff; + border-radius: 12px; + overflow: hidden; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); + padding: 0 16px; + transition: all 0.3s ease; + + &:active { + transform: scale(0.98); + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); + } +} + +.item-header { + padding: 16px 0; + display: flex; + align-items: center; + justify-content: space-between; +} + +.item-left { + display: flex; + align-items: center; + gap: 8px; +} + +.item-right { + display: flex; + align-items: center; + gap: 8px; +} + +.customer-icon { + width: 24px; + height: 24px; + background: #2979ff; + border-radius: 4px; + display: flex; + align-items: center; + justify-content: center; +} + +.customer-name { + font-size: 14px; + color: #333; + font-weight: 500; +} + +.item-index { + font-size: 12px; + color: #999; + background: #f5f5f5; + padding: 2px 8px; + border-radius: 12px; +} + +.item-details { + padding: 16px 0; +} + +.detail-row { + display: flex; + align-items: flex-end; + 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; +} + +.detail-value.highlight { + color: #2979ff; + font-weight: 500; +} + +.detail-value.danger { + color: #ff4757; + font-weight: 500; +} + +.no-data { + padding: 40px 0; + text-align: center; + color: #999; +} +</style> \ No newline at end of file -- Gitblit v1.9.3