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

<template>
	<view class="receipt-form-list">
		<!-- 头部按钮组 -->
		<view class="receipt-form-header">
			<u-button type="primary" size="mini" icon="plus" @click="handleAdd">新增收单信息</u-button>
			<u-button type="primary" size="mini" icon="share" @click="handleTransfer">去小葫芦线上支付</u-button>
		</view>

		<!-- 收单信息卡片列表 -->
		<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, index) 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="text" @click="handleUpdate(row)">详情</u-button>
						<u-button size="mini" type="text" @click="handleDelete(row)" style="color: #f56c6c">删除</u-button>
					</view>
				</view>
				<view class="card_body">
					<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>

		<!-- 收单表单对话框 -->
		<u-popup v-model="dialogVisible" mode="center" :width="dialogWidth" border-radius="16">
			<view class="dialog_header">{{ dialogTitle }}</view>
			<view class="dialog_body">
				<receiptForm
					:receipt-detail="form"
					:send-form-id="sendFormId"
					:clue-id="clueId"
					@update-success="handleUpdateSuccess"
				></receiptForm>
			</view>
		</u-popup>
	</view>
</template>

<script>
import receiptForm from './receiptForm/index.vue'

export default {
	name: 'ReceiptFormList',
	components: {
		receiptForm
	},
	props: {
		receiptDetail: {
			type: Object,
			default: () => {}
		},
		sendFormId: {
			type: [Number, String],
			required: true
		},
		clueId: {
			type: [Number, String],
			required: true
		}
	},
	data() {
		return {
			// 对话框控制
			dialogVisible: false,
			dialogTitle: '收单信息',
			dialogWidth: '860rpx',

			// 遮罩层
			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}`)
			}
		},

		/** 新增按钮操作 */
		handleAdd() {
			this.reset()
			this.dialogTitle = '新增收单信息'
			this.dialogVisible = true
		},

		/** 修改按钮操作 */
		async handleUpdate(row) {
			this.reset()
			try {
				const response = await uni.$u.api.getReceiptForm(row.id)
				this.form = response.data
				this.dialogTitle = '修改收单信息'
				this.dialogVisible = true
			} catch (error) {
				uni.$u.toast(`获取详情失败：${error.message}`)
			}
		},

		// 处理更新成功事件
		handleUpdateSuccess() {
			this.dialogVisible = false
			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}`)
			}
		},

		/** 表单重置 */
		reset() {
			this.form = Object.assign({
				id: undefined,
				sendFormId: this.sendFormId,
				clueId: this.clueId,
				item: '',
				brand: '',
				needCheckCode: 1,
				code: '',
				tableFee: undefined,
				benefitFee: undefined,
				freight: undefined,
				checkCodeFee: undefined,
				totalCost: undefined,
				sellingPrice: undefined,
				performance: undefined,
				receiptRemark: '',
				repairAmount: undefined,
				grossPerformance: undefined,
				expressOrderNo: '',
				fileIds: ''
			}, this.receiptDetail)
		}
	},
	created() {
		this.getList()
	}
}
</script>

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

.receipt-form-header {
	margin-bottom: 16px;
	display: flex;
	gap: 10px;
}

.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>