crm-app-vue3/pages/order/components/orderCenter.vue

<template>
	<view class="order_center_wrap">

		<view class="queryParams_wrap">
			<view class="search">
				<u--input clearable prefixIcon="search" v-model="queryParams.phone" shape="circle" clearable
					@blur="handleKeyword" @clear="handleKeywordClear" placeholder="请输入电话"></u--input>
			</view>
			<view class="query">
				<view style="margin-right: 10rpx;" @click="handleshowFilter">筛选</view>
				<u-icon name="arrow-down-fill" color="#aaa" size="10"></u-icon>
			</view>
		</view>


		<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>
		</view>

		<!-- 加载更多 -->
		<u-loadmore :status="loadStatus" v-if="listData.length > 0" />
		<!-- 空状态 -->
		<show-emtry v-if="listData.length === 0"></show-emtry>

		<filter-query ref="filter" v-model="queryParams" @getList="resetData" :mapHeight="mapHeight"
			:dicts="dicts"></filter-query>
	</view>
</template>

<script>
	import pullUpRefresh from "@/utils/pullUpRefresh";
	import {
		selectDictLabel
	} from "@/utils/util";
	import filterQuery from "./filterQuery.vue";
	export default {
		mixins: [pullUpRefresh],
		props: {
			type: {
				type: String,
				default: '2'
			},
			dicts: {
				type: Object,
				required: true
			}
		},
		components: {
			filterQuery,
		},
		data() {
			return {
				// 可以添加特定于接单中心的参数
				queryParams: {
					sendDateStart: '',
					sendDateEnd: '',
					type: '2',
					item: undefined,
					phone: undefined,
					deptId: undefined,
					state: undefined,
					status: undefined,
					allTagList: [],
					identification: undefined,
					createBy: undefined,
					pageNum: 1,
					pageSize: 10,
				},

				mapHeight: "0px"
			}
		},
		methods: {
			handleKeyword() {
				this.resetData();
			},
			handleKeywordClear() {
				// 组件有bug 清空后的值还是存在
				this.queryParams.phone = "";
				this.resetData();
			},
			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("复制成功");
					}
				});
			},
			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();
			// 根据路由名称设置类型
			this.queryParams.type = this.type;
			uni.getSystemInfo({
				success: (e) => {
					const {
						windowTop,
						windowBottom,
						windowHeight
					} = e;
					this.mapHeight = windowHeight + 'px';
				}
			});
		},
	}
</script>

<style lang="scss" scoped>
	.order_center_wrap {
		box-sizing: border-box;
		min-height: 100vh;

		.queryParams_wrap {
			display: flex;
			background: #fff;
			padding: 14px 0;


			.query,
			.search {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 16px;
				font-weight: 700;
				color: #202020;
			}

			.query {
				flex: 1;
			}

			.search {
				flex: 2;
				padding-left: 20px;
			}
		}
	}

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