crm-app-vue3/pages/order/components/orderCenter/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="send_status_wrap">
			<scroll-view scroll-x="true">
				<view class="clue_state_list">
					<view @click="handleSendStatusClick(item)" v-for="(item, index) in clueSendStatusCountList " :key="index"
						class="clue_state_item" :class="{ active : queryParams.status === item.status }">
						<text>{{item.statusName}}</text>
						<text>({{item.count}})</text>
					</view>
				</view>
			</scroll-view>
		</view>


		<view class="order_item_wrap">
			<order-item v-for="item in listData" :key="item.id" :item="item" :type="type" :dicts="dicts"></order-item>
		</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 filterQuery from "./filterQuery.vue";
	import orderItem from "./orderItem.vue";
	export default {
		mixins: [pullUpRefresh],
		props: {
			type: {
				type: String,
				default: '2'
			},
			dicts: {
				type: Object,
				required: true
			}
		},
		components: {
			filterQuery,
			orderItem
		},
		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,
				},
				
				clueSendStatusCountList : [],

				mapHeight: "0px"
			}
		},
		methods: {
			getOtherData() {
				this.statisticsSendStatus();
			},
			async statisticsSendStatus() {
				const {
					data
				} = await uni.$u.api.statisticsSendStatus(this.queryParams);
				this.clueSendStatusCountList = data;
			},
			handleSendStatusClick(item) {
				this.queryParams.status = item.status;
				this.resetData();
			},
			handleKeyword() {
				this.resetData();
			},
			handleKeywordClear() {
				// 组件有bug 清空后的值还是存在
				this.queryParams.phone = "";
				this.resetData();
			},
			handleshowFilter() {
				this.$refs.filter.show();
			},
			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 - 100) + 'px';
				}
			});
		},
	}
</script>

<style lang="scss" scoped>
	.send_status_wrap {
		width: 690rpx;
		padding: 0 30rpx;
		margin-top: 20rpx;
		display: flex;
	
		.clue_state_list {
			display: flex;
	
			.clue_state_item {
				font-size: 30rpx;
				display: inline-flex;
				/* 关键改动：改为行内弹性盒子 */
				align-items: center;
				/* 垂直居中 */
				background: #fff;
				margin-right: 30rpx;
				padding: 8rpx 16rpx;
				/* 增加内边距 */
				white-space: nowrap;
				/* 关键：禁止文本换行 */
				border-radius: 6rpx;
	
				&.active {
					color: #fff;
					background: #4c8afe;
				}
			}
		}
	}
	.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: 10px 20px;
	}

	.empty_wrap {
		margin-top: 100px;
	}
</style>