接种中心

components/show-emtry/show-emtry.vue

@@ -27,7 +27,7 @@
 
 <style lang="scss" scoped>
 	.emtry_wrap{
-		width: 750rpx;
+		width: 100%;
 		display: flex;
 		flex-direction: column;
 		align-items: center;

pages.json

@@ -202,7 +202,9 @@
 		{
 			"path": "pages/order/index",
 			"style": {
-				"navigationBarTitleText": "接单中心"
+				"navigationBarTitleText": "接单中心",
+				"enablePullDownRefresh": true,
+				"navigationStyle": "custom"
 			}
 		}
 	],
@@ -238,8 +240,8 @@
 		}, {
 			"text": "接单中心",
 			"pagePath": "pages/order/index",
-			"iconPath": "static/tabs/private.png",
-			"selectedIconPath": "static/tabs/private1.png"
+			"iconPath": "static/tabs/order.png",
+			"selectedIconPath": "static/tabs/order1.png"
 		},{
 			"text": "我的",
 			"pagePath": "pages/person/index",

pages/order/components/myCommission.vue

@@ -0,0 +1,249 @@
+<template>
+	<view class="my_commission_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>
+
+		<!-- 加载更多 -->
+		<u-loadmore :status="loadStatus" v-if="listData.length > 0" />
+		<!-- 空状态 -->
+		<show-emtry v-if="listData.length === 0"></show-emtry>
+	</view>
+</template>
+
+<script>
+	import pullUpRefresh from "@/utils/pullUpRefresh";
+	export default {
+		mixins: [pullUpRefresh],
+		props: {
+			type: {
+				type: String,
+				default: '2'
+			},
+			showStats: {
+				type: Boolean,
+				default: true
+			}
+		},
+		data() {
+			return {
+				queryParams: {
+					pageNum: 1,
+					pageSize: 10,
+				},
+			}
+		},
+		methods: {
+			formatAmount(amount) {
+				if (!amount) return '-';
+				return parseFloat(amount).toLocaleString();
+			},
+			async getList() {
+				const {
+					pageNum,
+					pageSize,
+				} = this.queryParams;
+				this.queryParams.type = this.type;
+				// 调用分成接口
+				const {
+					rows,
+					total
+				} = await uni.$u.api.selectCommissionList({
+					pageSize,
+					pageNum,
+				}, this.queryParams);
+				return rows;
+			},
+			handleOnReachBottom() {
+				this.handleReachBottom();
+			}
+		},
+		mounted() {
+			this.resetData();
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.my_commission_wrap {
+		padding: 20px;
+	}
+
+	.stats_info_wrap {
+		margin-bottom: 30px;
+	}
+
+	.stats_info_top {
+		display: flex;
+		margin-bottom: 20px;
+
+		.info_item {
+			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+			width: 23%;
+			margin-right: 2.6%;
+			height: 120px;
+			padding: 15px;
+			background: #fff;
+			border-radius: 15px;
+
+			&:last-child {
+				margin-right: 0;
+			}
+
+			.info_title {
+				font-size: 14px;
+				color: #6b7280;
+				margin-bottom: 15px;
+			}
+
+			.info_value {
+				font-size: 24px;
+				font-weight: bold;
+				color: #202020;
+			}
+		}
+	}
+
+	.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;
+	}
+</style>

pages/order/components/orderCenter.vue

@@ -0,0 +1,235 @@
+<template>
+	<view class="order_center_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>
+
+		<!-- 加载更多 -->
+		<u-loadmore :status="loadStatus" v-if="listData.length > 0" />
+		<!-- 空状态 -->
+		<show-emtry v-if="listData.length === 0"></show-emtry>
+	</view>
+</template>
+
+<script>
+	import pullUpRefresh from "@/utils/pullUpRefresh";
+	import { selectDictLabel } from "@/utils/util";
+	export default {
+		mixins: [pullUpRefresh],
+		props: {
+			type: {
+				type: String,
+				default: '2'
+			},
+			dicts: {
+				type: Object,
+				required: true
+			}
+		},
+		data() {
+			return {
+				// 可以添加特定于接单中心的参数
+				queryParams: {
+					pageNum: 1,
+					pageSize: 10,
+				},
+			}
+		},
+		methods: {
+			// 字典翻译
+			crm_form_state(state) {
+				return selectDictLabel(this.dicts.crmFormStateDicts, 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("复制成功");
+					}
+				});
+			},
+			handleToDetail(item) {
+				// 跳转到详情页面
+				uni.navigateTo({
+					url: `/pages/orderDetail/index?id=${item.id}`
+				});
+			},
+			async getList() {
+				const {
+					pageNum,
+					pageSize,
+				} = this.queryParams;
+				this.queryParams.type = this.type;
+				// 调用接单中心的接口
+				const {
+					rows,
+					total
+				} = await uni.$u.api.selectClueOrderFormList({
+						pageSize,
+						pageNum
+					},
+					this.queryParams
+				);
+				return rows;
+			},
+			handleOnReachBottom() {
+				this.handleReachBottom();
+			}
+		},
+		mounted() {
+			this.resetData();
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.order_center_wrap {
+		padding: 20px;
+		box-sizing: border-box;
+		min-height: 100vh;
+	}
+
+	.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/index.vue

@@ -1,22 +1,102 @@
 <template>
-	<view>
-		
+	<view class="order_wrap">
+		<u-navbar title="接单中心" :autoBack="true" :placeholder="true" v-hideNav></u-navbar>
+		<yui-tabs :tabs="tabs" v-model="activeIndex" :lineWidth="'120rpx'" :isLazyRender="true" color="#108cff"
+			titleActiveColor="#108cff" :swipeable="true" :swiper="false" :ellipsis="false" :scroll-threshold="3"
+			:sticky="true" :sticky-threshold="0" :offset-top="offsetTop" :z-index="99">
+			<template #orderCenter>
+				<orderCenter ref="orderCenter" type="1" :dicts="dicts"></orderCenter>
+			</template>
+			<template #myOrder>
+				<orderCenter ref="myOrder" type="2" :dicts="dicts"></orderCenter>
+			</template>
+			<template #myCommission>
+				<myCommission ref="myCommission" type="2" :showStats="true"></myCommission>
+			</template>
+		</yui-tabs>
 	</view>
 </template>
 
 <script>
+	import orderCenter from "./components/orderCenter";
+	import myCommission from "./components/myCommission";
+
 	export default {
+		components: {
+			orderCenter,
+			myCommission
+		},
+		onPullDownRefresh() {
+			uni.stopPullDownRefresh();
+			this.$refs[this.activeTel].resetData();
+		},
+		onReachBottom() {
+			this.$refs[this.activeTel].handleOnReachBottom();
+		},
+		computed: {
+			activeTel() {
+				return this.tabs.find(v => v.activeIndex === this.activeIndex).slot;
+			},
+		},
 		data() {
 			return {
-				
+				activeIndex: 0,
+				offsetTop: 0,
+				tabs: [{
+						label: '接单中心',
+						slot: 'orderCenter',
+						activeIndex: 0,
+					}, {
+						label: '我的接发单',
+						slot: 'myOrder',
+						activeIndex: 1,
+					},
+					{
+						label: '我的分成',
+						slot: 'myCommission',
+						activeIndex: 2,
+					}
+				],
+				dicts : {
+					crmFormStateDicts : [],
+				}
 			}
 		},
+		mounted() {
+			// 页面初始化后的逻辑
+			uni.getSystemInfo({
+				success: (e) => {
+					let offsetTop = 0
+					// #ifdef H5
+					offsetTop = 43
+					// #endif
+					this.offsetTop = offsetTop;
+				}
+			});
+			this.$getDicts('crm_follow_status').then(res => {
+				this.dicts.crmFormStateDicts = res;
+			});
+		},
 		methods: {
-			
-		}
+			// tab切换事件处理
+			handleTabChange(index) {
+				this.activeIndex = index;
+			}
+		},
+		// 页面滚动触发事件
+		onPageScroll(e) {
+			//页面滚动事件
+			uni.$emit('onPageScroll', e)
+		},
 	}
 </script>
 
-<style>
+<style lang="scss" scoped>
+	::v-deep .yui-tabs__content {
+		background-color: transparent;
 
+		.yui-tabs__track {
+			background-color: transparent;
+		}
+	}
 </style>

utils/api.js

@@ -75,12 +75,23 @@ const install = (Vue, vm) => {
 		deleteClueFile : (data)=> http.delete(store.state.user.path + '/clueFile/deleteClueFile',data),
 		getCallClueFileByClueId : (params)=> http.get(store.state.user.path + '/clueFile/getCallClueFileByClueId',{params, custom : { noAuth: true }}),
 		getClueSendFormCountByClueId : (params = {},config = {})=>http.get(store.state.user.path + '/clueSendForm/getClueSendFormCountByClueId',{ params }),
-		saveClueOrderForm:(data,config={})=>http.post(store.state.user.path + '/clueSendForm/saveClueOrderForm',data),
+		// 订单相关接口
+		selectClueOrderFormList:(params={},data={})=>http.post(store.state.user.path + '/clueSendForm/list?' + qs.stringify(params),data),
+		oderForm:(data={})=>http.post(store.state.user.path + '/clueSendForm/oderForm',data),
+		updateTags:(data={})=>http.post(store.state.user.path + '/clueSendForm/updateTags',data),
+		addOrderFollow:(data={})=>http.post(store.state.user.path + '/orderFollow/addOrderFollow',data),
+		getOrderFollowListByOrderId:(params={})=>http.get(store.state.user.path + '/orderFollow/getOrderFollowListByOrderId',{params}),
+		deleteOrder:(data={})=>http.post(store.state.user.path + '/clueSendForm/deleteOrder',data),
+		updateOrderState:(data={})=>http.post(store.state.user.path + '/clueSendForm/updateOrderState',data),
+		updateClueOrderForm:(data={})=>http.post(store.state.user.path + '/clueSendForm/updateClueOrderForm',data),
+		
 		getOrderFollowListByClueId:(params = {},config = {})=>http.get(store.state.user.path + '/orderFollow/getOrderFollowListByClueId',{ params }),
 		getDuplicateOrderFollowListByClueId:(params = {},config = {})=>http.get(store.state.user.path + '/orderFollow/getDuplicateOrderFollowListByClueId',{ params }),
 		deleteOrderFollow:(data,config={})=>http.post(store.state.user.path + '/orderFollow/deleteOrderFollow',data),
 		getOrderFollowList:(params = {},config = {})=>http.get(store.state.user.path + '/orderFollow/getOrderFollowList',{ params }),
 		getDuplicateClueFollowByClueId:(params = {},config = {})=>http.get(store.state.user.path + '/clueFollow/getDuplicateClueFollowByClueId',{ params }),
+		
+		selectCommissionList:(params={},data={})=>http.post(store.state.user.path + '/clueCommissionForm/list?' + qs.stringify(params),data),
 	}
 }