From 0bafa6aa253c9ef6f5cb24e9a24c5282860e4c59 Mon Sep 17 00:00:00 2001
From: zhangback <zhangback@163.com>
Date: 星期一, 30 三月 2026 11:44:37 +0800
Subject: [PATCH] 新增线上配置
---
ui/car_wx_app/pages/paymentList/index.vue | 497 ++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 346 insertions(+), 151 deletions(-)
diff --git a/ui/car_wx_app/pages/paymentList/index.vue b/ui/car_wx_app/pages/paymentList/index.vue
index 46cb66c..0c74f4e 100644
--- a/ui/car_wx_app/pages/paymentList/index.vue
+++ b/ui/car_wx_app/pages/paymentList/index.vue
@@ -1,210 +1,405 @@
<template>
<view class="container">
- <!-- 鏍囬鏍� -->
- <Nav title="鍨粯鍒楄〃" :customBack="customUrl"></Nav>
+ <Nav title="鍨粯鍒楄〃" @back="goBack" />
- <!-- 鍨粯鍒楄〃-鍙笅鎷夋粴鍔� -->
- <scroll-view class="advance-scroll" scroll-y="true" style="height: calc(100vh - 80rpx);">
- <view class="advance-item" v-for="(item, index) in advanceList" :key="index">
- <view class="item-field">
- <view class="field-label">璋冨害鍗曞彿</view>
- <view class="field-value">{{ item.dispatchNo }}</view>
+ <!-- 鍔犺浇鐘舵�� -->
+ <view v-if="loading && !list.length" class="center-state">
+ <u-loading-icon size="32" text="鍔犺浇涓�..." />
+ </view>
+
+ <!-- 绌虹姸鎬� -->
+ <view v-else-if="!loading && !list.length" class="center-state">
+ <u-empty mode="data" text="鏆傛棤鍨粯璁板綍" />
+ </view>
+
+ <!-- 鍒楄〃 -->
+ <scroll-view
+ v-else
+ class="list-scroll"
+ scroll-y
+ @scrolltolower="loadMore"
+ >
+ <!-- 姹囨�诲崱鐗� -->
+ <view class="summary-card">
+ <view class="summary-item">
+ <text class="summary-num">{{ total }}</text>
+ <text class="summary-label">鍨粯绗旀暟</text>
</view>
- <view class="item-field">
- <view class="field-label">瀹㈡埛</view>
- <view class="field-value">{{ item.customerName }}</view>
+ <view class="summary-divider" />
+ <view class="summary-item">
+ <text class="summary-num amount">楼{{ totalAmount }}</text>
+ <text class="summary-label">鍨粯鎬婚</text>
</view>
- <view class="item-field">
- <view class="field-label">涓婁紶鏃堕棿</view>
- <view class="field-value">{{ item.feeCreateTime }}</view>
+ </view>
+
+ <!-- 鍨粯璁板綍鍒楄〃 -->
+ <view
+ v-for="(item, index) in list"
+ :key="index"
+ class="pay-card"
+ >
+ <!-- 鍗＄墖澶撮儴 -->
+ <view class="pay-header">
+ <view class="pay-type-tag">{{ item.statusStr }}</view>
+ <text class="pay-time">{{ item.feeCreateTime }}</text>
</view>
- <view class="item-field">
- <view class="field-label">鍨粯璐圭敤绫诲瀷</view>
- <view class="field-value">{{ item.statusStr }}</view>
+
+ <!-- 閲戦琛� -->
+ <view class="pay-amount-row">
+ <text class="pay-amount">楼{{ item.actualFeeAmount || 0 }}</text>
+ <text v-if="item.currencyStr" class="pay-currency">{{ item.currencyStr }}</text>
</view>
- <view class="item-field">
- <view class="field-label">鍨粯璐圭敤閲戦</view>
- <view class="field-value fee-amount">楼{{ item.actualFeeAmount }}</view>
- </view>
- <!-- 鏇挎崲鍘熸湁鐨剉oucher-grid閮ㄥ垎 -->
- <view class="item-field">
- <view class="field-label">鍨粯鍑瘉</view>
- <view class="voucher-grid">
- <view class="voucher-item" v-for="(img, imgIndex) in item.feeVoucherUrl" :key="imgIndex">
- <image class="voucher-img" :src="img" mode="aspectFill"></image>
- </view>
- <!-- 褰撴病鏈夊浘鐗囨椂鏄剧ず鎻愮ず -->
- <view v-if="!item.feeVoucherUrl || item.feeVoucherUrl.length === 0" class="no-voucher">
- 鏆傛棤鍑瘉
- </view>
+
+ <!-- 淇℃伅琛� -->
+ <view class="pay-info">
+ <view class="pay-info-row">
+ <text class="pay-info-label">璋冨害鍗曞彿</text>
+ <text class="pay-info-value">{{ item.dispatchNo || '-' }}</text>
+ </view>
+ <view class="pay-info-row">
+ <text class="pay-info-label">瀹㈡埛</text>
+ <text class="pay-info-value">{{ item.customerName || '-' }}</text>
</view>
</view>
+
+ <!-- 鍑瘉鍥剧墖锛氱敤 index 浼犲弬锛屼笉浼犳暟缁� -->
+ <view v-if="item.images && item.images.length" class="pay-images">
+ <text class="pay-images-label">鍨粯鍑瘉</text>
+ <view class="pay-images-grid">
+ <image
+ v-for="(img, i) in item.images"
+ :key="i"
+ class="pay-thumb"
+ :src="img"
+ mode="aspectFill"
+ lazy-load
+ @tap="onPreview(index, i)"
+ />
+ </view>
+ </view>
+ </view>
+
+ <!-- 搴曢儴鍔犺浇鐘舵�� -->
+ <view class="load-more">
+ <u-loadmore :status="loadStatus" />
</view>
</scroll-view>
</view>
</template>
<script>
-import { getTmsFinanceDetailList } from "@/common/paymentList";
-import { getcarType, } from "@/common/examine";
+import { getTmsFinanceDetailList } from '@/common/paymentList'
+import { getcarType } from '@/common/examine'
export default {
data() {
return {
- advanceList: [
-
- ],
- formData: {},
+ loading: false,
+ list: [],
feeTypeList: [],
- customUrl: 'pages/beReferred/index'
- };
+ currencyList: [],
+ formData: {},
+ // 鍒嗛〉
+ pageNum: 1,
+ pageSize: 10,
+ total: 0,
+ totalAmount: '0.00',
+ finished: false
+ }
+ },
+
+ computed: {
+ loadStatus() {
+ if (this.loading) return 'loading'
+ if (this.finished) return 'nomore'
+ return 'loadmore'
+ }
},
onLoad(options) {
- this.formData = options;
- if (options.id){
- this.customUrl ='pages/examine/index?id=' + options.id+'&name='+'涓婁紶琛岀▼'+'&router='+'pages/beReferred/index'
- }else{
- this.customUrl ='pages/beReferred/index'
- }
- // 鑾峰彇 URL 鍙傛暟
-
- }, created() {
- this.getList();
+ this.formData = options || {}
+ this.initData()
},
+
methods: {
- getList() {
-
-
- getcarType('fee_type').then((res) => {
- this.feeTypeList = res
- if (res.length > 0) {
- getTmsFinanceDetailList({dispatchId:this.formData.id}).then((res1) => {
- this.advanceList = res1;
- this.advanceList.forEach(item => {
- // 鏌ユ壘鍖归厤鐨刣ictLabel
- const matchedDict = this.feeTypeList.find(dictItem => dictItem.dictValue == item.feeType);
- item.statusStr = matchedDict ? matchedDict.dictLabel : '';
-
- // 杞崲voucherUrl涓烘暟缁�
- if (item.feeVoucherUrl) {
- item.feeVoucherUrl = item.feeVoucherUrl.split(',').filter(url => url.trim() !== '');
- } else {
- item.feeVoucherUrl = [];
- }
- });
-
-
-
-
- }).catch(err => {
- console.error('鑾峰彇璋冨害淇℃伅澶辫触:', err);
- });
+ goBack() {
+ const pages = getCurrentPages()
+ for (let i = pages.length - 2; i >= 0; i--) {
+ if (pages[i].route && pages[i].route.includes('pages/examine')) {
+ uni.navigateBack({ delta: pages.length - 1 - i })
+ return
}
-
-
- }).catch(err => {
- });
+ }
+ uni.navigateBack({ delta: 1 })
},
+ getDictLabel(dictList, value) {
+ const found = dictList.find(d => d.dictValue == value)
+ return found?.dictLabel || ''
+ },
+ parseImages(urlStr) {
+ if (!urlStr) return []
+ return urlStr.split(',').filter(u => u.trim())
+ },
+
+ // 棣栨鍔犺浇锛氬瓧鍏� + 绗竴椤垫暟鎹�
+ async initData() {
+ this.loading = true
+ try {
+ const [feeTypes, currencyTypes] = await Promise.all([
+ getcarType('fee_type'),
+ getcarType('sys_currency')
+ ])
+ this.feeTypeList = feeTypes || []
+ this.currencyList = currencyTypes || []
+ await this.loadPage()
+ } catch {
+ uni.$u.toast('鍔犺浇澶辫触')
+ } finally {
+ this.loading = false
+ }
+ },
+
+ // 鍔犺浇涓�椤垫暟鎹紙鏃� id 鏃舵煡鍏ㄩ儴锛�
+ async loadPage() {
+ this.loading = true
+ try {
+ const params = { pageNum: this.pageNum, pageSize: this.pageSize }
+ if (this.formData.id) {
+ params.dispatchId = this.formData.id
+ }
+ const res = await getTmsFinanceDetailList(params)
+
+ // 鍏煎鍒嗛〉鍜岄潪鍒嗛〉涓ょ鍚庣杩斿洖鏍煎紡
+ let rows, total, totalAmount
+ if (res && res.rows) {
+ // 鍒嗛〉鏍煎紡锛歿 rows: [], total: 0, totalAmount: 0 }
+ rows = res.rows || []
+ total = res.total || 0
+ totalAmount = res.totalAmount
+ } else {
+ // 闈炲垎椤垫牸寮忥紙鍚庣鏈敼鏃跺吋瀹癸級锛氱洿鎺ヨ繑鍥炴暟缁�
+ rows = Array.isArray(res) ? res : []
+ total = rows.length
+ this.finished = true
+ }
+
+ const processed = rows.map(item => ({
+ ...item,
+ statusStr: this.getDictLabel(this.feeTypeList, item.feeType),
+ currencyStr: this.getDictLabel(this.currencyList, item.currency),
+ images: this.parseImages(item.feeVoucherUrl)
+ }))
+
+ if (this.pageNum === 1) {
+ this.list = processed
+ } else {
+ this.list = this.list.concat(processed)
+ }
+
+ this.total = total
+ if (totalAmount !== undefined) {
+ this.totalAmount = Number(totalAmount).toFixed(2)
+ } else {
+ // 闈炲垎椤垫椂鍓嶇鑷繁绠�
+ const sum = this.list.reduce((acc, i) => acc + (Number(i.actualFeeAmount) || 0), 0)
+ this.totalAmount = sum.toFixed(2)
+ }
+
+ // 鍒ゆ柇鏄惁杩樻湁鏇村
+ if (this.list.length >= total || rows.length < this.pageSize) {
+ this.finished = true
+ }
+ } catch {
+ uni.$u.toast('鍔犺浇澶辫触')
+ } finally {
+ this.loading = false
+ }
+ },
+
+ // 涓婃媺鍔犺浇鏇村
+ loadMore() {
+ if (this.loading || this.finished) return
+ this.pageNum++
+ this.loadPage()
+ },
+
+ // 鍥剧墖棰勮锛氶�氳繃绱㈠紩鍙栨暟鎹紝閬垮厤灏忕▼搴忔ā鏉夸紶鏁扮粍鐨勫潙
+ onPreview(itemIndex, imgIndex) {
+ const item = this.list[itemIndex]
+ if (item && item.images && item.images.length) {
+ uni.previewImage({
+ urls: item.images,
+ current: item.images[imgIndex]
+ })
+ }
+ }
}
-};
+}
</script>
-<style scoped>
+<style lang="scss" scoped>
.container {
display: flex;
flex-direction: column;
- height: 100vh;
- background-color: #f7f7f7;
+ min-height: 100vh;
+ background-color: #f5f7fa;
}
-/* 鏍囬鏍� */
-.title-bar {
- height: 80rpx;
- line-height: 80rpx;
- text-align: center;
- font-size: 32rpx;
- font-weight: 500;
- background-color: #fff;
- border-bottom: 1rpx solid #ccc;
+.center-state {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 60vh;
}
-/* 鍨粯鍒楄〃婊氬姩鍖哄煙 */
-.advance-scroll {
+.list-scroll {
flex: 1;
- padding: 20rpx;
+ height: calc(100vh - 88rpx);
box-sizing: border-box;
}
-/* 鍨粯椤� */
-.advance-item {
- background-color: #fff;
- border: 1rpx solid #eee;
- border-radius: 12rpx;
- padding: 30rpx;
- margin-bottom: 20rpx;
- box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
-}
-
-/* 瀛楁琛� */
-.item-field {
+/* 姹囨�诲崱鐗� */
+.summary-card {
display: flex;
- margin-bottom: 20rpx;
- align-items: flex-start;
+ align-items: center;
+ background: linear-gradient(135deg, #4285f4 0%, #5b9ef4 100%);
+ margin: 24rpx 24rpx 0;
+ padding: 36rpx 0;
+ border-radius: 16rpx;
+ box-shadow: 0 8rpx 24rpx rgba(66, 133, 244, 0.25);
}
-/* 瀛楁鏍囩 */
-.field-label {
- width: 180rpx;
- color: #666;
- font-size: 28rpx;
-}
-
-/* 瀛楁鍊� */
-.field-value {
+.summary-item {
flex: 1;
- color: #333;
- font-size: 28rpx;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
}
-/* 璐圭敤閲戦鐗规畩鏍峰紡 */
-.fee-amount {
- color: #e53e3e;
+.summary-num {
+ font-size: 40rpx;
+ font-weight: 700;
+ color: #fff;
+ margin-bottom: 8rpx;
+
+ &.amount { font-size: 36rpx; }
+}
+
+.summary-label {
+ font-size: 24rpx;
+ color: rgba(255, 255, 255, 0.8);
+}
+
+.summary-divider {
+ width: 1rpx;
+ height: 60rpx;
+ background-color: rgba(255, 255, 255, 0.3);
+}
+
+/* 鍨粯鍗＄墖 */
+.pay-card {
+ background: #fff;
+ margin: 20rpx 24rpx 0;
+ border-radius: 16rpx;
+ padding: 28rpx;
+ box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
+}
+
+.pay-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 20rpx;
+}
+
+.pay-type-tag {
+ padding: 6rpx 20rpx;
+ border-radius: 8rpx;
+ font-size: 24rpx;
font-weight: 500;
+ background-color: rgba(230, 162, 60, 0.1);
+ color: #e6a23c;
}
-/* 鍑瘉缃戞牸 */
-.voucher-grid {
-display: flex;
- flex-wrap: wrap; /* 鍏佽鎹㈣ */
- gap: 10rpx;
+.pay-time {
+ font-size: 24rpx;
+ color: #909399;
}
-/* 鍑瘉椤� */
-.voucher-item {
- width: 120rpx;
- height: 120rpx;
- position: relative;
- border: 1rpx solid #eee;
+.pay-amount-row {
+ display: flex;
+ align-items: baseline;
+ gap: 12rpx;
+ margin-bottom: 24rpx;
+ padding-bottom: 24rpx;
+ border-bottom: 1rpx solid #f2f3f5;
+}
+
+.pay-amount {
+ font-size: 44rpx;
+ font-weight: 700;
+ color: #f56c6c;
+}
+
+.pay-currency {
+ font-size: 24rpx;
+ color: #909399;
+ padding: 4rpx 12rpx;
+ background-color: #f5f7fa;
border-radius: 6rpx;
- overflow: hidden;
- flex-shrink: 0; /* 闃叉鍘嬬缉 */
}
-/* 鍑瘉鍥剧墖 */
-.voucher-img {
- width: 100%;
- height: 100%;
- position: absolute;
- top: 0;
- left: 0;
+.pay-info { margin-bottom: 4rpx; }
+
+.pay-info-row {
+ display: flex;
+ align-items: center;
+ padding: 10rpx 0;
}
-/* 娣诲姞鏃犲嚟璇佹彁绀烘牱寮� */
-.no-voucher {
- color: #999;
- font-size: 28rpx;
- padding: 20rpx 0;
+
+.pay-info-label {
+ font-size: 26rpx;
+ color: #909399;
+ width: 140rpx;
+ flex-shrink: 0;
}
-</style>
\ No newline at end of file
+
+.pay-info-value {
+ font-size: 26rpx;
+ color: #303133;
+ flex: 1;
+}
+
+.pay-images {
+ margin-top: 20rpx;
+ padding-top: 20rpx;
+ border-top: 1rpx solid #f2f3f5;
+}
+
+.pay-images-label {
+ font-size: 26rpx;
+ color: #909399;
+ margin-bottom: 16rpx;
+ display: block;
+}
+
+.pay-images-grid {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 16rpx;
+}
+
+.pay-thumb {
+ width: 140rpx;
+ height: 140rpx;
+ border-radius: 10rpx;
+ border: 1rpx solid #ebeef5;
+ background-color: #f5f7fa;
+}
+
+.load-more {
+ padding: 30rpx 0 50rpx;
+}
+</style>
--
Gitblit v1.8.0