crm-app-vue3/pages/orderDetail/page/detail.vue

<template>
	<view class="clueDetail_wrap">
		<view class="telPhone">
			<view class="left">
				<view class="phone">电话:
					<show-real-text :real="receiptDetail.phone" :type="params.type"
						v-if="receiptDetail.phone"></show-real-text>
				</view>
				<view class="copy_btn" v-if="params.type != '1'" @click="handleCopy(receiptDetail)">复制</view>
			</view>
			<view class="right"> 发单人 : {{ receiptDetail.createNickName }} </view>
		</view>
		<view class="clueDetail_top_info">
			<view class="top_info_item">
				<view class="top">
					{{ defaultText(receiptDetail.clueOwnerName) }}
				</view>
				<view class="bottom"> 线索所属人 </view>
			</view>
			<view class="top_info_item">
				<view class="top">
					{{ defaultText(receiptDetail.brand) }}
				</view>
				<view class="bottom"> 品牌 </view>
			</view>
			<view class="top_info_item">
				<view class="top">
					{{ defaultText(receiptDetail.identificationName) }}
				</view>
				<view class="bottom"> 接单人 </view>
			</view>
			<view class="top_info_item">
				<view class="top">
					{{ crmFormCategoryFormat(receiptDetail.category) }}
				</view>
				<view class="bottom"> 类别 </view>
			</view>
			<view class="top_info_item">
				<view class="top">
					{{ crmFormTacticFormat(receiptDetail.tactic) }}
				</view>
				<view class="bottom"> 采用战术 </view>
			</view>
			<view class="top_info_item status-item">
				<view class="top">
					{{ crmFollowStatusFormat(receiptDetail.status) }}
				</view>
				<view class="bottom"> 跟进状态 </view>
			</view>
		</view>

		<view class="clue_state_wrap">
			<view class="top_left">阶段:</view>
			<view class="steps_wrap">
				<ld-select v-model="receiptDetail.state" :list="crmFormStateDict" value-key="dictValue"
					label-key="dictLabel" placeholder="点击选择阶段" @change="handleStateConfirm">
				</ld-select>
			</view>
		</view>

		<!-- 跟进状态 -->
		<view class="order_action_wrap">
			<view class="action_title">状态:</view>
			<view class="action_buttons" v-if="['1', '2'].includes(receiptDetail.status)">
				<u-button v-if="receiptDetail.status === '1'" type="success" size="small" text="接单"
					@click="handleOrderForm" customStyle="margin-right: 20rpx;"></u-button>
				<u-button v-if="receiptDetail.status === '2'" type="primary" size="small" text="收单"
					@click="handleReceiptForm" customStyle="margin-right: 20rpx;"></u-button>
				<u-button v-if="receiptDetail.status === '2'" type="warning" size="small" text="未收"
					@click="handleDenialForm" customStyle="margin-right: 20rpx;"></u-button>
				<u-button v-if="receiptDetail.status === '1'" type="error" size="small" text="撤销" @click="handleDelete"
					customStyle="margin-right: 20rpx;"></u-button>
			</view>
			<view v-else class="last_status">
				该订单{{ crmFollowStatusFormat(receiptDetail.status) }}不可再操作
			</view>
		</view>

		<view class="clue_tag_wrap">
			<view class="clue_tag_add_btn" @click="handleAddClueTag">
				+ 添加标签
			</view>
			<u-tag :text="tag.name" plain plainFill :closable="true" @close="hanldeTagClose(tag)" borderColor="#fff"
				v-for="tag in receiptDetail.tags" :key="tag.id" style="margin-left: 10px; margin-bottom: 10px"
				:bgColor="tag.color" color="#fff"></u-tag>
		</view>

		<yui-tabs :tabs="tabs" v-model="activeIndex" :lineWidth="'120rpx'" :isLazyRender="false" color="#108cff"
			titleActiveColor="#108cff" :swipeable="true" :swiper="false" :ellipsis="false" :scroll-threshold="3">
			<template #chatFile>
				<upload-file :clueId="clueId" :sourceId="orderId" ref="uploadFile1" type="2" orderFileType="1"
					isDuplicate="1"></upload-file>
			</template>
			<template #quoteFile>
				<upload-file :clueId="clueId" :sourceId="orderId" ref="uploadFile2" type="2" orderFileType="2"
					isDuplicate="1"></upload-file>
			</template>
			<template #hdImageFile>
				<upload-file :clueId="clueId" :sourceId="orderId" ref="uploadFile3" type="2" orderFileType="3"
					isDuplicate="1"></upload-file>
			</template>
			<template #otherFile>
				<upload-file :clueId="clueId" :sourceId="orderId" ref="uploadFile4" type="2" orderFileType="4"
					isDuplicate="1"></upload-file>
			</template>
			<template #frontendFile>
				<upload-file :clueId="clueId" ref="uploadFile5" type="6" isDuplicate="1"></upload-file>
			</template>
			<template #frontendFollow>
				<clue-follow :clueId="clueId" ref="clueFollow" type="4"></clue-follow>
			</template>
			<template #followRecord>
				<clue-follow :clueId="clueId" ref="follow" type="5"></clue-follow>
			</template>
			<template #receiptInfo>
				<receipt-form-list :sendFormId="orderId" :clueId="clueId" :receiptDetail="receiptDetail"
					ref="receiptFormList"></receipt-form-list>
			</template>
			<template #commissionInfo>
				<commission-form-list :sendFormId="orderId" :clueId="clueId"
					ref="commissionFormList"></commission-form-list>
			</template>
			<template #sendInfo>
				<sendInfo :sendFormId="orderId" :clueId="clueId" :receiptDetail="receiptDetail" ref="sendInfo">
				</sendInfo>
			</template>
		</yui-tabs>

		<u-tabbar class="clueDetail_tabber" :fixed="true" inactiveColor="#ffffff" :placeholder="true"
			:safeAreaInsetBottom="true">
			<u-tabbar-item text="拨打电话" icon="../../static/clueDetail/icon-phone.png"
				@click="handleCallPhone"></u-tabbar-item>
			<u-tabbar-item text="添加收单" icon="../../static/orderDetail/tjsd.png"
				@click="handleAddReceiptForm"></u-tabbar-item>
			<u-tabbar-item text="新增分成" icon="../../static/orderDetail/xzfc.png"
				@click="handleAddCommission"></u-tabbar-item>
			<u-tabbar-item text="添加跟进" icon="../../static/caseDetail/icon-follow.png"
				@click="handleAddFollow"></u-tabbar-item>
		</u-tabbar>

		<group-select class="clueTagsSelect" :list="clueTagGroupVoList" scrollHeight="720rpx" groupName="groupName"
			groupChild="clueTagDataList" label-key="name" value-key="id" placeholder="请选择线索标签" v-model="checkTags"
			multiple clearable ref="clueTag" @confirm="handleClueTagConfirm"></group-select>
	</view>
</template>

<script>
import {
	cloneDeep
} from "lodash";
import {
	selectDictLabel
} from "@/utils/util";
import uploadFile from "../tabs/uploadFile/index.vue";
import clueFollow from "../tabs/followRecord/index.vue";
import receiptFormList from "../tabs/receiptFormList/receiptFormList.vue";
import commissionFormList from "../tabs/commissionFormList/commissionFormList.vue";
import sendInfo from "../tabs/sendInfo/index.vue";
export default {
	components: {
		uploadFile,
		clueFollow,
		receiptFormList,
		commissionFormList,
		sendInfo
	},
	props: {
		orderId: {
			type: [String, Number],
			required: true,
		},
		clueId: {
			type: [String, Number],
			required: true,
		},
		params: {
			type: Object,
			required: true,
		},
	},
	data() {
		return {
			showModal: false,
			showStateSelect: false,
			receiptDetail: {},
			checkTags: [],
			clueTagGroupVoList: [],
			crmFormCategoryDict: [],
			crmFormTacticDict: [],
			crmFormStateDict: [],
			crmHandelStatusDict: [],
			tabs: [{
				label: "发单信息",
				slot: "sendInfo",
			},
			{
				label: "聊天附件",
				slot: "chatFile",
			},
			{
				label: "报价附件",
				slot: "quoteFile",
			},
			{
				label: "高清图附件",
				slot: "hdImageFile",
			},
			{
				label: "其他附件",
				slot: "otherFile",
			},
			{
				label: "前端附件",
				slot: "frontendFile",
			},
			{
				label: "前端跟进",
				slot: "frontendFollow",
			},
			{
				label: "跟进记录",
				slot: "followRecord",
			},
			{
				label: "收单信息",
				slot: "receiptInfo",
			},
			{
				label: "收单分成",
				slot: "commissionInfo",
			},
			],
			activeIndex: 0,
		};
	},
	methods: {
		async hanldeTagClose(tag) {
			const {
				id,
				tags
			} = this.receiptDetail;
			const copyTags = cloneDeep(tags);
			if (id == null) {
				uni.$u.toast("修改异常");
				return;
			}
			const index = copyTags.findIndex((v) => v.id === tag.id);
			if (index !== -1) {
				copyTags.splice(index, 1);
				const allTags = copyTags.map((v) => v.id).join(",");
				await uni.$u.api.updateTags({
					id: id,
					allTags,
				});
				this.receiptDetail.tags = copyTags;
				this.checkTags = this.receiptDetail.tags.map((v) => v.id);
			}
		},
		async handleClueTagConfirm() {
			const allTags = this.checkTags.join(",");
			await uni.$u.api.updateTags({
				id: this.receiptDetail.id,
				allTags,
			});
			this.getDetail();
		},
		handleAddClueTag() {
			this.$refs.clueTag.showModal();
		},
		async handleStateConfirm(e) {
			const state = e.dictValue;
			await uni.$u.api.updateOrderState({
				id: this.receiptDetail.id,
				state,
			});
			uni.$u.toast("操作成功");
		},
		defaultText(text) {
			return text ? text : "-";
		},
		crmFormCategoryFormat(v) {
			return v ? selectDictLabel(this.crmFormCategoryDict, v) : "-";
		},
		crmFormTacticFormat(v) {
			return v ? selectDictLabel(this.crmFormTacticDict, v) : "-";
		},
		crmFollowStatusFormat(v) {
			return selectDictLabel(this.crmHandelStatusDict, v);
		},
		selectDictLabel,
		handleCopy(item) {
			uni.setClipboardData({
				data: item.phone,
				success: function () {
					uni.$u.toast("复制成功");
				},
			});
		},
		// 添加联系人
		handleCallPhone() {
			uni.makePhoneCall({
				phoneNumber: this.receiptDetail.phone,
				success: () => {
					this.$store.commit("call/SET_FORM", {
						clueId: this.receiptDetail.clueId,
						type: "3",
						callee: this.receiptDetail.phone,
					});
				},
			});
		},
		// 添加跟进记录
		handleAddFollow() {
			uni.navigateTo({
				url: `/pages/addFollow/index?orderId=${this.orderId}`,
			});
		},
		// 跳转到收单表单页面
		handleAddReceiptForm() {
			uni.navigateTo({
				url: `/pages/receiptForm/index?orderId=${this.orderId}&clueId=${this.clueId}`,
			});
		},
		// 跳转到新增分成页面
		handleAddCommission() {
			if (this.receiptDetail.status != "3") {
				uni.$u.toast("未收单不可添加分成");
				return;
			}
			uni.navigateTo({
				url: `/pages/commissionForm/index?sendFormId=${this.orderId}&clueId=${this.clueId}`,
			});
		},
		handleUploadRecord() {
			uni.navigateTo({
				url: `/pages/uploadRecord/index?clueId=${this.orderId}`,
			});
		},
		// 接单操作
		async handleOrderForm() {
			if (this.receiptDetail.status === "2") {
				uni.$u.toast("当前订单已经被接单");
				return;
			}
			uni.showModal({
				title: "提示",
				content: "确定要接单吗？",
				success: async (res) => {
					if (res.confirm) {
						try {
							await uni.$u.api.oderForm({
								status: "2",
								id: this.receiptDetail.id,
							});
							uni.$u.toast("接单成功");
							this.getDetail(); // 刷新详情
						} catch (error) {
							uni.$u.toast("接单失败");
						}
					}
				},
			});
		},
		// 收单操作
		async handleReceiptForm() {
			if (
				this.receiptDetail.status === "3" ||
				this.receiptDetail.status === "4"
			) {
				uni.$u.toast("当前订单已经被收单或未收");
				return;
			}
			uni.showModal({
				title: "提示",
				content: "确定要收单吗？",
				success: async (res) => {
					if (res.confirm) {
						try {
							await uni.$u.api.oderForm({
								status: "3",
								id: this.receiptDetail.id,
							});
							uni.$u.toast("收单成功");
							this.getDetail(); // 刷新详情
						} catch (error) {
							uni.$u.toast("收单失败");
						}
					}
				},
			});
		},
		// 未收操作
		async handleDenialForm() {
			if (
				this.receiptDetail.status === "3" ||
				this.receiptDetail.status === "4"
			) {
				uni.$u.toast("当前订单已经被收单或未收");
				return;
			}
			uni.showModal({
				title: "提示",
				content: "确定要标记为未收吗？",
				success: async (res) => {
					if (res.confirm) {
						try {
							await uni.$u.api.oderForm({
								status: "4",
								id: this.receiptDetail.id,
							});
							uni.$u.toast("标记未收成功");
							this.getDetail(); // 刷新详情
						} catch (error) {
							uni.$u.toast("操作失败");
						}
					}
				},
			});
		},
		// 撤销操作
		async handleDelete() {
			uni.showModal({
				title: "提示",
				content: "是否确定撤销?",
				success: async (res) => {
					if (res.confirm) {
						try {
							await uni.$u.api.deleteOrder([this.receiptDetail.id]);
							uni.$u.toast("撤销成功");
							// 撤销后返回上一页
							setTimeout(() => {
								uni.navigateBack();
							}, 1500);
						} catch (error) {
							uni.$u.toast("撤销失败");
						}
					}
				},
			});
		},
		// 初始化详情页
		async handleInit() {
			this.getDetail();
			this.$getDicts("crm_form_category").then((res) => {
				this.crmFormCategoryDict = res;
			});
			this.$getDicts("crm_form_tactic").then((res) => {
				this.crmFormTacticDict = res;
			});
			this.$getDicts("crm_form_state").then((res) => {
				this.crmFormStateDict = res;
			});
			this.$getDicts("crm_form_status").then((res) => {
				this.crmHandelStatusDict = res;
			});
			uni.$u.api
				.getClueTagGroupVoList({
					tagGroupApplication: "2",
				})
				.then(({
					data
				}) => {
					this.clueTagGroupVoList = data;
				});
		},
		getDetail() {
			uni.$u.api
				.getClueSendFormVoByOrderId({
					id: this.orderId,
				})
				.then((res) => {
					this.receiptDetail = res.data;
					this.checkTags = this.receiptDetail.tags ?
						this.receiptDetail.tags.map((v) => v.id) :
						[];
				});
		},
	},
	created() {
		this.handleInit();
		uni.$on('updateSendFormSuccess', () => {
			this.getDetail();
		});
	},
	beforeUnmount() {
		uni.$off('updateSendFormSuccess');
	}
};
</script>

<style lang="scss" scoped>
.clueTagsSelect {
	height: 0;
	overflow: hidden;
}

.clue_tag_wrap {
	display: flex;
	align-items: center;
	background-color: #fff;
	padding: 0 10px;
	margin: 20px 0;
	flex-wrap: wrap;
	min-height: 50px;

	.clue_tag_add_btn {
		font-size: 14px;
		color: #108cff;
	}
}

.clue_state_wrap {
	background-color: #fff;
	padding: 10px;
	margin-bottom: 20px;
	display: flex;
	align-items: center;

	.top_left {
		font-size: 16px;
		flex: 0 0 50px;
	}

	.steps_wrap {
		flex: 1;
	}
}

.order_action_wrap {
	padding: 10px;
	margin: 15px 0;
	background: #fff;
	display: flex;
	align-items: center;

	.action_title {
		font-size: 16px;
		flex: 0 0 50px;
	}

	.last_status {
		color: #c0c0c7;
		font-size: 14px;
	}

	.action_buttons {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;

		::v-deep .u-button {
			height: 30px !important;
			font-size: 12px !important;
			border-radius: 8px !important;
			border: 1px solid #e2e8f0 !important;
			background: #ffffff !important;
			color: #2d3748 !important;
			font-weight: 500 !important;
			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
			transition: all 0.3s ease !important;

			&.u-button--success {
				background: #ffd025 !important;
				color: white !important;
				border-color: #ffd025 !important;
			}

			// 特别样式化不同按钮类型
			&.u-button--primary {
				background: #35dbd9 !important;
				color: white !important;
				border-color: #35dbd9 !important;
			}

			&.u-button--warning {
				background: #ba9fb0 !important;
				color: white !important;
				border-color: #ba9fb0 !important;
			}

			&.u-button--error {
				background: #e53e3e !important;
				color: white !important;
				border-color: #e53e3e !important;
			}
		}
	}
}

.clueDetail_tabber {
	::v-deep .u-tabbar__content {
		background: #108cff;
		border-top-right-radius: 10px;
		border-top-left-radius: 10px;
	}
}

.clueDetail_wrap {
	.telPhone {
		display: flex;
		background: #fff;
		padding: 20px;
		justify-content: space-between;

		.left {
			display: flex;
		}

		.copy_btn {
			color: #4fa5fe;
			margin-left: 10px;
		}
	}

	.clueDetail_top_info {
		display: flex;
		flex-wrap: wrap;
		background-color: #ffffff;
		padding-top: 20px;
		margin: 18px 0;

		.top_info_item {
			width: 33.33%;
			text-align: center;
			margin-bottom: 20px;

			.top {
				font-size: 15px;
				color: #202020;
				margin-bottom: 5px;
				font-weight: bold;
			}

			.bottom {
				font-size: 15px;
				color: #c0c0c7;
			}
		}
	}
}
</style>