接单的中心和我的分成的post拆分成独立的组件

pages/order/components/commission/commissionItem.vue

@@ -0,0 +1,166 @@
+<template>
+	<view class="commission_item">
+		<view class="commission_top">
+			<view class="top_left">{{item.item}}</view>
+			<view class="top_right">
+				<text class="account_type">{{ item.accountType === '1' ? '前端' : '后端' }}</text>
+			</view>
+		</view>
+		<view class="commission_info">
+			<view class="info_row">
+				<view class="info_item">
+					<text class="label">电话: </text>
+					<show-real-text :real="item.phone" :type='type'></show-real-text>
+				</view>
+			</view>
+			<view class="info_row">
+				<view class="info_item">
+					<text class="label">收单时间: </text>
+					<text class="value">{{item.receiptDate || '-'}}</text>
+				</view>
+			</view>
+			<view class="info_row">
+				<view class="info_item">
+					<text class="label">收单人: </text>
+					<text class="value">{{item.receiptNickName || '-'}}</text>
+				</view>
+				<view class="info_item">
+					<text class="label">公司: </text>
+					<text class="value">{{item.orgName || '-'}}</text>
+				</view>
+			</view>
+			<view class="info_row">
+				<view class="info_item">
+					<text class="label">分成所属人: </text>
+					<text class="value">{{item.userName || '-'}}</text>
+				</view>
+				<view class="info_item">
+					<text class="label">分成比例: </text>
+					<text class="value">{{item.commissionRate || '-'}}%</text>
+				</view>
+			</view>
+		</view>
+		<view class="commission_amount">
+			<view class="amount_item">
+				<view class="amount_label">业绩</view>
+				<view class="amount_value primary">{{formatAmount(item.commissionAmount)}}</view>
+			</view>
+			<view class="amount_item">
+				<view class="amount_label">毛业绩</view>
+				<view class="amount_value">{{formatAmount(item.grossAmount)}}</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	props: {
+		item: {
+			type: Object,
+			required: true
+		},
+		type: {
+			type: String,
+			default: '2'
+		}
+	},
+	methods: {
+		formatAmount(amount) {
+			if (!amount) return '-';
+			return parseFloat(amount).toLocaleString();
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+	.commission_item {
+		background: #fff;
+		border-radius: 20px;
+		padding: 20px;
+		margin-bottom: 20px;
+		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+
+		.commission_top {
+			display: flex;
+			justify-content: space-between;
+			margin-bottom: 15px;
+
+			.top_left {
+				font-size: 18px;
+				font-weight: bold;
+				color: #202020;
+			}
+
+			.top_right {
+				.account_type {
+					background: #108cff;
+					color: #fff;
+					padding: 4px 8px;
+					border-radius: 10px;
+					font-size: 12px;
+				}
+			}
+		}
+
+		.commission_info {
+			margin-bottom: 15px;
+
+			.info_row {
+				display: flex;
+				margin-bottom: 8px;
+
+				&:last-child {
+					margin-bottom: 0;
+				}
+
+				.info_item {
+					flex: 1;
+					display: flex;
+					align-items: center;
+					font-size: 14px;
+
+					.label {
+						color: #9b9aa2;
+						margin-right: 8px;
+						min-width: 60px;
+					}
+
+					.value {
+						color: #202020;
+					}
+				}
+			}
+		}
+
+		.commission_amount {
+			display: flex;
+			justify-content: space-around;
+			padding: 15px 0;
+			border-top: 1px solid #f0f0f0;
+			background: #f8f9fb;
+			border-radius: 10px;
+
+			.amount_item {
+				text-align: center;
+
+				.amount_label {
+					font-size: 12px;
+					color: #9b9aa2;
+					margin-bottom: 5px;
+				}
+
+				.amount_value {
+					font-size: 16px;
+					font-weight: bold;
+					color: #202020;
+
+					&.primary {
+						color: #108cff;
+					}
+				}
+			}
+		}
+	}
+</style>

pages/order/components/commission/myCommission.vue

@@ -13,58 +13,7 @@
 
 		<view class="commission_item_wrap">
 			<!-- 统计信息 -->
-			<view class="commission_item" v-for="item in listData" :key="item.id">
-				<view class="commission_top">
-					<view class="top_left">{{item.item}}</view>
-					<view class="top_right">
-						<text class="account_type">{{ item.accountType === '1' ? '前端' : '后端' }}</text>
-					</view>
-				</view>
-				<view class="commission_info">
-					<view class="info_row">
-						<view class="info_item">
-							<text class="label">电话: </text>
-							<show-real-text :real="item.phone" :type='type'></show-real-text>
-						</view>
-					</view>
-					<view class="info_row">
-						<view class="info_item">
-							<text class="label">收单时间: </text>
-							<text class="value">{{item.receiptDate || '-'}}</text>
-						</view>
-					</view>
-					<view class="info_row">
-						<view class="info_item">
-							<text class="label">收单人: </text>
-							<text class="value">{{item.receiptNickName || '-'}}</text>
-						</view>
-						<view class="info_item">
-							<text class="label">公司: </text>
-							<text class="value">{{item.orgName || '-'}}</text>
-						</view>
-					</view>
-					<view class="info_row">
-						<view class="info_item">
-							<text class="label">分成所属人: </text>
-							<text class="value">{{item.userName || '-'}}</text>
-						</view>
-						<view class="info_item">
-							<text class="label">分成比例: </text>
-							<text class="value">{{item.commissionRate || '-'}}%</text>
-						</view>
-					</view>
-				</view>
-				<view class="commission_amount">
-					<view class="amount_item">
-						<view class="amount_label">业绩</view>
-						<view class="amount_value primary">{{formatAmount(item.commissionAmount)}}</view>
-					</view>
-					<view class="amount_item">
-						<view class="amount_label">毛业绩</view>
-						<view class="amount_value">{{formatAmount(item.grossAmount)}}</view>
-					</view>
-				</view>
-			</view>
+			<commission-item v-for="item in listData" :key="item.id" :item="item" :type="type"></commission-item>
 		</view>
 
 		<filter-query ref="filter" v-model="queryParams" @getList="resetData" :mapHeight="mapHeight"></filter-query>
@@ -79,11 +28,13 @@
 <script>
 	import pullUpRefresh from "@/utils/pullUpRefresh";
 	import filterQuery from "./filterQuery.vue";
+	import commissionItem from "./commissionItem.vue";
 	import dayjs from "dayjs";
 	export default {
 		mixins: [pullUpRefresh],
 		components: {
 			filterQuery,
+			commissionItem
 		},
 		props: {
 			type: {
@@ -122,10 +73,6 @@
 			handleshowFilter() {
 				this.$refs.filter.show();
 			},
-			formatAmount(amount) {
-				if (!amount) return '-';
-				return parseFloat(amount).toLocaleString();
-			},
 			async getList() {
 				const {
 					pageNum,
@@ -230,95 +177,6 @@
 		padding: 20px 20px;
 	}
 
-	.commission_item {
-		background: #fff;
-		border-radius: 20px;
-		padding: 20px;
-		margin-bottom: 20px;
-		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-
-		.commission_top {
-			display: flex;
-			justify-content: space-between;
-			margin-bottom: 15px;
-
-			.top_left {
-				font-size: 18px;
-				font-weight: bold;
-				color: #202020;
-			}
-
-			.top_right {
-				.account_type {
-					background: #108cff;
-					color: #fff;
-					padding: 4px 8px;
-					border-radius: 10px;
-					font-size: 12px;
-				}
-			}
-		}
-
-		.commission_info {
-			margin-bottom: 15px;
-
-			.info_row {
-				display: flex;
-				margin-bottom: 8px;
-
-				&:last-child {
-					margin-bottom: 0;
-				}
-
-				.info_item {
-					flex: 1;
-					display: flex;
-					align-items: center;
-					font-size: 14px;
-
-					.label {
-						color: #9b9aa2;
-						margin-right: 8px;
-						min-width: 60px;
-					}
-
-					.value {
-						color: #202020;
-					}
-				}
-			}
-		}
-
-		.commission_amount {
-			display: flex;
-			justify-content: space-around;
-			padding: 15px 0;
-			border-top: 1px solid #f0f0f0;
-			background: #f8f9fb;
-			border-radius: 10px;
-
-			.amount_item {
-				text-align: center;
-
-				.amount_label {
-					font-size: 12px;
-					color: #9b9aa2;
-					margin-bottom: 5px;
-				}
-
-				.amount_value {
-					font-size: 16px;
-					font-weight: bold;
-					color: #202020;
-
-					&.primary {
-						color: #108cff;
-					}
-				}
-			}
-		}
-	}
-
 	.empty_wrap {
 		margin-top: 100px;
 	}

pages/order/components/orderCenter/orderCenter.vue

@@ -14,54 +14,7 @@
 
 
 		<view class="order_item_wrap">
-			<view class="order_item" v-for="item in listData" :key="item.id" @click="handleToDetail(item)">
-				<view class="order_top">
-					<view class="top_left">{{item.item}}</view>
-					<view class="top_right">
-						<text :class="getStatusClass(item.status)">{{getStatusText(item.status)}}</text>
-					</view>
-				</view>
-				<view class="order_info">
-					<view class="telPhone">
-						<view class="phone">
-							<text>电话: </text>
-							<show-real-text :real="item.phone" :type='type'
-								:style="{ color : item.repetitionOperationName ? 'red' : 'black' }"></show-real-text>
-						</view>
-						<view class="copy_btn" @click.stop="handleCopy(item)" v-if="type != '1'">复制</view>
-					</view>
-					<view class="info">
-						<view class="createUser" style="margin-right: 20px;">发单人:
-							{{ item.createNickName ? item.createNickName : "-" }}
-						</view>
-						<view class="orgName">机构: {{ item.orgName ? item.orgName : "-" }}</view>
-					</view>
-					<view class="info">
-						<view class="sendDate" style="margin-right: 20px;">发单日期:
-							{{ item.sendDate ? item.sendDate : "-" }}
-						</view>
-					</view>
-					<view class="info">
-						<view class="owner">所属人 {{ item.clueOwnerName ? item.clueOwnerName : "-" }}</view>
-						<view class="operation" style="margin-right: 20px;">运营人
-							{{ item.clueOperationName ? item.clueOperationName : "-" }}
-						</view>
-					</view>
-				</view>
-				<view class="clue_state_wrap">
-					<view class="clue_state">
-						<view class="state_wrap">
-							<view class="label">阶段:</view>{{crm_form_state(item.state)}}
-						</view>
-						<view class="clueTag">
-							<view class="label">标签:</view>
-							<u-tag :text="tag.name" plain plainFill borderColor="#fff" size="mini"
-								v-for="(tag) in item.tags" :key="tag.id" style="margin-right: 10px;"
-								:bgColor="tag.color" color="#fff"></u-tag>
-						</view>
-					</view>
-				</view>
-			</view>
+			<order-item v-for="item in listData" :key="item.id" :item="item" :type="type" :dicts="dicts"></order-item>
 		</view>
 
 		<!-- 加载更多 -->
@@ -76,10 +29,8 @@
 
 <script>
 	import pullUpRefresh from "@/utils/pullUpRefresh";
-	import {
-		selectDictLabel
-	} from "@/utils/util";
 	import filterQuery from "./filterQuery.vue";
+	import orderItem from "./orderItem.vue";
 	export default {
 		mixins: [pullUpRefresh],
 		props: {
@@ -94,6 +45,7 @@
 		},
 		components: {
 			filterQuery,
+			orderItem
 		},
 		data() {
 			return {
@@ -118,16 +70,6 @@
 			}
 		},
 		methods: {
-			handleToDetail(row) {
-				const {
-					id,
-					item,
-					clueId
-				} = row;
-				uni.navigateTo({
-					url: `/pages/orderDetail/index?orderId=${id}&item=${item}&type=${this.queryParams.type}&clueId=${clueId}`,
-				});
-			},
 			handleKeyword() {
 				this.resetData();
 			},
@@ -139,36 +81,6 @@
 			handleshowFilter() {
 				this.$refs.filter.show();
 			},
-			// 字典翻译
-			crm_form_state(state) {
-				return selectDictLabel(this.dicts.crmFormStateDict, state);
-			},
-			getStatusText(status) {
-				const statusMap = {
-					'1': '发单',
-					'2': '接单',
-					'3': '收单',
-					'4': '未收'
-				};
-				return statusMap[status] || status;
-			},
-			getStatusClass(status) {
-				const classMap = {
-					'1': 'status_pending',
-					'2': 'status_received',
-					'3': 'status_confirmed',
-					'4': 'status_rejected'
-				};
-				return classMap[status] || 'status_default';
-			},
-			handleCopy(item) {
-				uni.setClipboardData({
-					data: item.phone,
-					success: function() {
-						uni.$u.toast("复制成功");
-					}
-				});
-			},
 			async getList() {
 				const {
 					pageNum,
@@ -245,90 +157,7 @@
 		padding: 20px 20px;
 	}
 
-	.order_item {
-		background: #fff;
-		border-radius: 20px;
-		padding: 20px;
-		margin-bottom: 20px;
-		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-
-		.order_top {
-			display: flex;
-			justify-content: space-between;
-			margin-bottom: 15px;
-
-			.top_left {
-				font-size: 18px;
-				font-weight: bold;
-				color: #202020;
-			}
-
-			.top_right {
-				.status_pending {
-					color: #e65d6f;
-				}
-
-				.status_received {
-					color: #ff9900;
-				}
-
-				.status_confirmed {
-					color: #67c23a;
-				}
-
-				.status_rejected {
-					color: #909399;
-				}
-			}
-		}
-
-		.order_info {
-			font-size: 14px;
-			color: #666;
-
-			.telPhone {
-				display: flex;
-				margin-bottom: 10px;
-
-				.copy_btn {
-					color: #4fa5fe;
-					margin-left: 10px;
-				}
-			}
-
-			.info {
-				display: flex;
-				margin-bottom: 8px;
-
-				view {
-					flex: 1;
-				}
-			}
-		}
-	}
-
 	.empty_wrap {
 		margin-top: 100px;
 	}
-
-	.clue_state_wrap {
-		font-size: 14px;
-		background: #f8f9fb;
-		padding: 10px;
-		color: #9b9aa2;
-		overflow: hidden;
-
-		.state_wrap {
-			display: flex;
-			margin-bottom: 10px;
-		}
-
-		.label {
-			flex: 0 0 40px !important;
-		}
-
-		.clueTag {
-			display: flex;
-		}
-	}
 </style>

pages/order/components/orderCenter/orderItem.vue

@@ -0,0 +1,193 @@
+<template>
+	<view class="order_item" @click="handleToDetail">
+		<view class="order_top">
+			<view class="top_left">{{item.item}}</view>
+			<view class="top_right">
+				<text :class="getStatusClass(item.status)">{{getStatusText(item.status)}}</text>
+			</view>
+		</view>
+		<view class="order_info">
+			<view class="telPhone">
+				<view class="phone">
+					<text>电话: </text>
+					<show-real-text :real="item.phone" :type='type'
+						:style="{ color : item.repetitionOperationName ? 'red' : 'black' }"></show-real-text>
+				</view>
+				<view class="copy_btn" @click.stop="handleCopy" v-if="type != '1'">复制</view>
+			</view>
+			<view class="info">
+				<view class="createUser" style="margin-right: 20px;">发单人:
+					{{ item.createNickName ? item.createNickName : "-" }}
+				</view>
+				<view class="orgName">机构: {{ item.orgName ? item.orgName : "-" }}</view>
+			</view>
+			<view class="info">
+				<view class="sendDate" style="margin-right: 20px;">发单日期:
+					{{ item.sendDate ? item.sendDate : "-" }}
+				</view>
+			</view>
+			<view class="info">
+				<view class="owner">所属人 {{ item.clueOwnerName ? item.clueOwnerName : "-" }}</view>
+				<view class="operation" style="margin-right: 20px;">运营人
+					{{ item.clueOperationName ? item.clueOperationName : "-" }}
+				</view>
+			</view>
+		</view>
+		<view class="clue_state_wrap">
+			<view class="clue_state">
+				<view class="state_wrap">
+					<view class="label">阶段:</view>{{crm_form_state(item.state)}}
+				</view>
+				<view class="clueTag">
+					<view class="label">标签:</view>
+					<u-tag :text="tag.name" plain plainFill borderColor="#fff" size="mini"
+						v-for="(tag) in item.tags" :key="tag.id" style="margin-right: 10px;"
+						:bgColor="tag.color" color="#fff"></u-tag>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { selectDictLabel } from "@/utils/util";
+	export default {
+		props: {
+			item: {
+				type: Object,
+				required: true
+			},
+			type: {
+				type: String,
+				default: '2'
+			},
+			dicts: {
+				type: Object,
+				required: true
+			}
+		},
+		methods: {
+			handleToDetail() {
+				const { id, item: itemType, clueId } = this.item;
+				uni.navigateTo({
+					url: `/pages/orderDetail/index?orderId=${id}&item=${itemType}&type=${this.type}&clueId=${clueId}`,
+				});
+			},
+			// 字典翻译
+			crm_form_state(state) {
+				return selectDictLabel(this.dicts.crmFormStateDict, state);
+			},
+			getStatusText(status) {
+				const statusMap = {
+					'1': '发单',
+					'2': '接单',
+					'3': '收单',
+					'4': '未收'
+				};
+				return statusMap[status] || status;
+			},
+			getStatusClass(status) {
+				const classMap = {
+					'1': 'status_pending',
+					'2': 'status_received',
+					'3': 'status_confirmed',
+					'4': 'status_rejected'
+				};
+				return classMap[status] || 'status_default';
+			},
+			handleCopy() {
+				uni.setClipboardData({
+					data: this.item.phone,
+					success: function() {
+						uni.$u.toast("复制成功");
+					}
+				});
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.order_item {
+		background: #fff;
+		border-radius: 20px;
+		padding: 20px;
+		margin-bottom: 20px;
+		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+
+		.order_top {
+			display: flex;
+			justify-content: space-between;
+			margin-bottom: 15px;
+
+			.top_left {
+				font-size: 18px;
+				font-weight: bold;
+				color: #202020;
+			}
+
+			.top_right {
+				.status_pending {
+					color: #e65d6f;
+				}
+
+				.status_received {
+					color: #ff9900;
+				}
+
+				.status_confirmed {
+					color: #67c23a;
+				}
+
+				.status_rejected {
+					color: #909399;
+				}
+			}
+		}
+
+		.order_info {
+			font-size: 14px;
+			color: #666;
+
+			.telPhone {
+				display: flex;
+				margin-bottom: 10px;
+
+				.copy_btn {
+					color: #4fa5fe;
+					margin-left: 10px;
+				}
+			}
+
+			.info {
+				display: flex;
+				margin-bottom: 8px;
+
+				view {
+					flex: 1;
+				}
+			}
+		}
+
+		.clue_state_wrap {
+			font-size: 14px;
+			background: #f8f9fb;
+			padding: 10px;
+			color: #9b9aa2;
+			overflow: hidden;
+
+			.state_wrap {
+				display: flex;
+				margin-bottom: 10px;
+			}
+
+			.label {
+				flex: 0 0 40px !important;
+			}
+
+			.clueTag {
+				display: flex;
+			}
+		}
+	}
+</style>