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

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