crm-app-vue3/pages/orderDetail/tabs/receiptFormList/receiptFormList.vue

<template>
	<view class="receipt-form-list">
		<view v-if="loading" class="loading_wrap">
			<u-loading-icon text="加载中" textSize="18"></u-loading-icon>
		</view>
		<view v-else-if="receiptFormList.length === 0" class="empty_wrap">
			<u-empty text="暂无收单数据"></u-empty>
		</view>
		<view v-else class="card_list">
			<view class="card_item" v-for="(row) in receiptFormList" :key="row.id" >
				<view class="card_header">
					<view class="card_title">{{ row.item || '-' }}</view>
					<view class="card_actions">
						<u-button size="mini" type="error" @click="handleDelete(row)" icon="trash"></u-button>
					</view>
				</view>
				<view class="card_body" @click="handleUpdate(row)">
					<view class="info_row">
						<view class="info_label">品牌:</view>
						<view class="info_value">{{ row.brand || '-' }}</view>
					</view>
					<view class="info_row">
						<view class="info_label">分单比例:</view>
						<view class="info_value">{{ row.splitRatio || '-' }}</view>
					</view>
					<view class="info_row">
						<view class="info_label">卖价:</view>
						<view class="info_value">￥{{ formatPrice(row.sellingPrice) }}</view>
					</view>
					<view class="info_row">
						<view class="info_label">业绩:</view>
						<view class="info_value highlight">￥{{ formatPrice(row.performance) }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>

export default {
	name: 'ReceiptFormList',
	props: {
		receiptDetail: {
			type: Object,
			default: () => {}
		},
		sendFormId: {
			type: [Number, String],
			required: true
		},
		clueId: {
			type: [Number, String],
			required: true
		}
	},
	data() {
		return {
			// 遮罩层
			loading: false,
			// 收单信息列表
			receiptFormList: [],
			// 表单参数
			form: {}
		}
	},
	methods: {
		/** 查询收单信息列表 */
		async getList() {
			this.loading = true
			try {
				const response = await uni.$u.api.listReceiptFormByOrderId(this.sendFormId)
				this.receiptFormList = response.data || []
			} catch (error) {
				uni.$u.toast(`获取列表失败：${error.message}`)
				this.receiptFormList = []
			} finally {
				this.loading = false
			}
		},

		// 格式化价格
		formatPrice(price) {
			if (!price && price !== 0) return '-'
			return Number(price).toFixed(2)
		},

		/** 去小葫芦线上支付按钮操作 */
		async handleTransfer() {
			try {
				const response = await uni.$u.api.saveOrderFileAndTransfer({
					id: this.sendFormId,
					clueId: this.clueId
				})
				uni.$u.toast(response.msg || '支付成功')
			} catch (error) {
				uni.$u.toast(`支付失败：${error.message}`)
			}
		},

		/** 修改按钮操作 */
		async handleUpdate(row) {
			uni.navigateTo({
			  url: `/pages/receiptForm/index?orderId=${this.sendFormId}&clueId=${this.clueId}&receiptId=${row.id}`,
			});
		},

		// 处理更新成功事件
		handleUpdateSuccess() {
			this.getList()
		},

		/** 删除按钮操作 */
		handleDelete(row) {
			uni.showModal({
				title: '警告',
				content: '是否确认删除收单信息？',
				success: (res) => {
					if (res.confirm) {
						this.deleteRow(row.id)
					}
				}
			})
		},

		async deleteRow(id) {
			try {
				await uni.$u.api.delReceiptForm(id)
				uni.$u.toast('删除成功')
				this.getList()
			} catch (error) {
				uni.$u.toast(`删除失败：${error.message}`)
			}
		},
	},
	created() {
		this.getList();
		uni.$on('addReceiptFormSuccess',()=>{
			this.getList();
		});
	},
	beforeDestroy(){
		uni.$off('addReceiptFormSuccess');  
	}
}
</script>

<style lang="scss" scoped>
.receipt-form-list {
	padding: 20px 20px 20px;
	background: #f5f6f8;
}

.card_list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.card_item {
	background-color: #fff;
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.card_header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid #f0f0f0;
}

.card_title {
	font-size: 18px;
	font-weight: bold;
	color: #202020;
}

.card_actions {
	display: flex;
	gap: 8px;
}

.card_body {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.info_row {
	display: flex;
	align-items: center;
	font-size: 14px;
}

.info_label {
	color: #666;
	min-width: 80px;
	font-weight: 500;
}

.info_value {
	color: #202020;
	flex: 1;
	
	&.highlight {
		color: #f56c6c;
		font-weight: bold;
		font-size: 16px;
	}
}

.loading_wrap,
.empty_wrap {
	padding: 40px 20px;
	text-align: center;
}

.dialog_header {
	padding: 20px;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	border-bottom: 1px solid #e9ecef;
}

.dialog_body {
	padding: 0;
}
</style>