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

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