接单中心详情创建

pages.json

@@ -206,6 +206,14 @@
 				"enablePullDownRefresh": true,
 				"navigationStyle": "custom"
 			}
+		},
+		{
+			"path": "pages/orderDetail/index",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": true,
+				"navigationStyle": "custom"
+			}
 		}
 	],
 	"globalStyle": {

pages/order/components/commission/filterQuery.vue

@@ -5,7 +5,7 @@
 				<view class="filterQuery" :style="{ height : mapHeight }">
 						<view class="query_wrap">
 							<view class="title">
-								发单日期
+								收单日期
 							</view>
 							<view class="dept_wrap form_input_pointer_events" @click="handleShowJtimePickerPopup">
 								<u--input v-model="createTimeTxt" disabled style='pointer-events: none !important'
@@ -13,44 +13,28 @@
 								</u--input>
 								<u-icon slot="right" name="arrow-right"></u-icon>
 							</view>
-				
+
 							<view class="title">
-								机构部门
+								物品
 							</view>
-							<view class="dept_wrap form_input_pointer_events" @click="handleShowDept">
-								<u--input v-model="value.deptName" disabled style='pointer-events: none !important'
-									disabledColor="#ffffff" placeholder="点击选择" border="none">
-								</u--input>
-								<u-icon slot="right" name="arrow-right"></u-icon>
+							<view class="search_input">
+								<u--input clearable prefixIcon="search" v-model="value.item"
+									placeholder="请输入物品名字"></u--input>
 							</view>
 				
 							<view class="title">
-								接单人
+								电话
 							</view>
-							<view class="person_wrap">
-								<view class="person_item" v-for="(item,index) in identificationUserInfos" :key="item.userId">
-									<view class="person_top">
-										<u-avatar :src="$avatar(item.avatar)" size="40px"></u-avatar>
-									</view>
-									<view class="person_bottom">
-										{{item.nickName}}
-									</view>
-								</view>
-								<view class="person_item more_item" @click="handleShowIdentificationUser">
-									<view class="person_top">
-										<image src="/static/case/icon-more.png" mode="" class="more"></image>
-									</view>
-									<view class="person_bottom">
-										更多
-									</view>
-								</view>
+							<view class="search_input">
+								<u--input clearable prefixIcon="search" v-model="value.phone"
+									placeholder="请输入电话"></u--input>
 							</view>
 
 							<view class="title">
-								发单人
+								收单人
 							</view>
 							<view class="person_wrap">
-								<view class="person_item" v-for="(item,index) in createByUserInfos" :key="item.userId">
+								<view class="person_item" v-for="(item,index) in receiptUserInfos" :key="item.userId">
 									<view class="person_top">
 										<u-avatar :src="$avatar(item.avatar)" size="40px"></u-avatar>
 									</view>
@@ -58,7 +42,7 @@
 										{{item.nickName}}
 									</view>
 								</view>
-								<view class="person_item more_item" @click="handleShowCreateByUser">
+								<view class="person_item more_item" @click="handleShowReceiptUser">
 									<view class="person_top">
 										<image src="/static/case/icon-more.png" mode="" class="more"></image>
 									</view>
@@ -67,37 +51,6 @@
 									</view>
 								</view>
 							</view>
-
-							<view class="title">
-								物品
-							</view>
-							<view class="search_input">
-								<u--input clearable prefixIcon="search" v-model="value.item"
-									placeholder="请输入物品名字"></u--input>
-							</view>
-				
-							<view class="title">
-								品牌
-							</view>
-							<view class="search_input">
-								<u--input clearable prefixIcon="search" v-model="value.brand" placeholder="请输入品牌名字"></u--input>
-							</view>
-				
-							<view class="title">
-								电话
-							</view>
-							<view class="search_input">
-								<u--input clearable prefixIcon="search" v-model="value.phone"
-									placeholder="请输入电话"></u--input>
-							</view>
-
-							<view class="title">
-								标签
-							</view>
-							<view class="option_list">
-								<ld-select :list="clueTagGroupVoList" label-key="name" value-key="id" placeholder="请选择标签"
-									v-model="value.allTagList" multiple clearable></ld-select>
-							</view>
 				
 						</view>
 						<u-tabbar :fixed="true" inactiveColor="#ffffff" class="case_tabbar" :placeholder="true"
@@ -108,24 +61,15 @@
 								@click="handleEnter"></u-tabbar-item>
 						</u-tabbar>
 				
-						<ba-tree-picker :selectParent="false" v-if="identificationUserListData.length > 0" ref="identificationUser" :multiple="false"
-							border title="接单人" :localdata="identificationUserListData" valueKey="id" textKey="label" childrenKey="children"
-							:selectedValues="value.identification" @select-change="identificationUserSeletchang" />
-				
-						<ba-tree-picker :selectParent="false" v-if="createByUserListData.length > 0" ref="createByUser" :multiple="false"
-							border title="发单人" :localdata="createByUserListData" valueKey="id" textKey="label" childrenKey="children"
-							:selectedValues="value.createBy" @select-change="createByUserSeletchang" />
-				
-						<ba-tree-picker :selectParent="true" v-if="deptList.length > 0" ref="dept" :multiple='false'
-							@select-change="deptSeletchang" border title="机构部门" :localdata="deptList" valueKey="deptId"
-							textKey="deptName" childrenKey="children" :selectedValues="value.deptId"
-							:personNames="value.deptName" />
+						<ba-tree-picker :selectParent="false" v-if="receiptUserListData.length > 0" ref="receiptUser" :multiple="false"
+							border title="收单人" :localdata="receiptUserListData" valueKey="id" textKey="label" childrenKey="children"
+							:selectedValues="value.receiptUserId" @select-change="receiptUserSeletchang" />
 				
 						<jtimePickerPopup :isShowShortTimeList="true" shortTimeTitle="快捷时间" :shortTimeList="shortTimeList"
 							:isShowSeletTimeTitle="true" seletTimeTitle="时间选择" cancelText="取消" confirmText="确认"
 							:endSelectMonth="-1" :endSelectDay="-1" beginTimePlaceHolder='开始时间' endTimePlaceHolder="结束时间"
 							:isDateTypeRange="true" :isShowSelectedTimeEcho="true" @confirm="getSelectTime"
-							ref="jtimePickerPopup">
+							ref="jtimePickerPopup" :default-select="1">
 						</jtimePickerPopup>
 				
 					</view>
@@ -136,8 +80,7 @@
 
 <script>
 	import {
-		filterCustomerManager,
-		handleTree
+		filterCustomerManager
 	} from '@/utils/util';
 	import jtimePickerPopup from '@/uni_modules/jtime-picker-popup/components/JTimePicker/JTimePicker.vue';
 	export default {
@@ -155,51 +98,8 @@
 		emits: ["getList"],
 		data() {
 			return {
-
-				statusDict: [{
-						dictLabel: '待处理',
-						dictValue: '1'
-					},
-					{
-						dictLabel: '进行中',
-						dictValue: '2'
-					},
-					{
-						dictLabel: '已完成',
-						dictValue: '3'
-					},
-					{
-						dictLabel: '已取消',
-						dictValue: '4'
-					},
-				],
-				
-				stateDict: [{
-						dictLabel: '初始阶段',
-						dictValue: '1'
-					},
-					{
-						dictLabel: '处理阶段',
-						dictValue: '2'
-					},
-					{
-						dictLabel: '完成阶段',
-						dictValue: '3'
-					},
-				],
-
-
 				showFilter: false,
-
-				dictCascadeData: [],
-
-				identificationUserListData: [], // 接单人列表 
-				createByUserListData: [], // 发单人列表 
-
-				deptList: [],
-
-				dateRange: [], // 日期范围
-
+				receiptUserListData: [], // 收单人列表 
 				shortTimeList: [{
 						unit: 'day',
 						key: '全部',
@@ -241,45 +141,12 @@
 						value: -1
 					},
 				],
-
 				createTimeTxt: null,
-
-				identificationUserInfos: [], // 接单人用户信息
-				createByUserInfos: [], // 发单人用户信息
-
-				clueTagGroupVoList: [],
-
-				defaultRegion: ['广东省', '广州市', '番禺区'],
-
-				sortParams: [{
-					value: 1,
-					text: '企业名称'
-				}, {
-					value: 2,
-					text: '项目名称'
-				}, {
-					value: 3,
-					text: '项目状态'
-				}, {
-					value: 4,
-					text: '项目等级'
-				}, {
-					value: 5,
-					text: '省市区'
-				}, {
-					value: 6,
-					text: '委托日期'
-				}, {
-					value: 7,
-					text: '创建日期'
-				}, {
-					value: 8,
-					text: '跟进时间'
-				}]
+				receiptUserInfos: [], // 收单人用户信息
 			}
 		},
 		mounted() {
-			this.handleInitTag();
+			this.handleInitReceiptUser();
 		},
 		methods: {
 			handleOpen(){
@@ -287,131 +154,58 @@
 					this.$refs.jtimePickerPopup.handleInit();
 				}
 			},
-
 			getSelectTime(timeValue) {
-				this.value.sendDateStart = timeValue.beginTime;
-				this.value.sendDateEnd = timeValue.endTime;
-				if (this.value.sendDateStart && this.value.sendDateEnd) {
-					this.createTimeTxt = this.value.sendDateStart + "至" + this.value.sendDateEnd;
+				this.value.receiptDateStart = timeValue.beginTime;
+				this.value.receiptDateEnd = timeValue.endTime;
+				if (this.value.receiptDateStart && this.value.receiptDateEnd) {
+					this.createTimeTxt = this.value.receiptDateStart + "至" + this.value.receiptDateEnd;
 				} else {
 					this.createTimeTxt = "";
 				}
 			},
-			deptSeletchang(ids, names) {
-				this.value.deptId = ids[0];
-				this.value.deptName = names[0];
-			},
 			handleShowJtimePickerPopup() {
 				this.$refs.jtimePickerPopup.pickerShow();
 			},
-			handleShowDept() {
-				this.$refs.dept._show();
-			},
-
-
-			identificationUserSeletchang(ids, names) {
-				this.value.identification = ids[0];
+			receiptUserSeletchang(ids, names) {
+				this.value.receiptUserId = ids[0];
 				if (ids.length > 0) {
-					// 暂时只做单向
 					uni.$u.api.getUserByUserIds({
 						userIds: ids.join(",")
 					}).then(res => {
 						const {
 							data
 						} = res;
-						this.identificationUserInfos = data;
+						this.receiptUserInfos = data;
 					})
 				} else {
-					this.identificationUserInfos = [];
+					this.receiptUserInfos = [];
 				}
 			},
-			createByUserSeletchang(ids, names) {
-				this.value.createBy = ids[0];
-				if (ids.length > 0) {
-					// 暂时只做单向
-					uni.$u.api.getUserByUserIds({
-						userIds: ids.join(",")
-					}).then(res => {
-						const {
-							data
-						} = res;
-						this.createByUserInfos = data;
-					})
-				} else {
-					this.createByUserInfos = [];
-				}
-			},
-			handleShowIdentificationUser() {
-				this.$refs.identificationUser._show();
-			},
-			handleShowCreateByUser() {
-				this.$refs.createByUser._show();
+			handleShowReceiptUser() {
+				this.$refs.receiptUser._show();
 			},
-			handleInitTag() {
-				uni.$u.api.selectAllDeptList({
-					isDept: 2
-				}).then(({
-					data
-				}) => {
-					this.deptList = handleTree(data, 'deptId');
-				});
-
-				// 获取接单人
+			handleInitReceiptUser() {
+				// 获取收单人数据
 				uni.$u.api.getDeptOwner({ excludeDeptIds : [100,369,378,356] }).then(res => {
-					this.identificationUserListData = filterCustomerManager(res.data);
-				});
-				
-				// 获取发单人
-				uni.$u.api.getDeptCustomerByOrg({ deptId : 369 }).then(res => {
-					this.createByUserListData = filterCustomerManager(res.data);
-				});
-
-				// 获取所有标签
-				uni.$u.api.getClueTagGroupVoList({ tagGroupApplication : '2' }).then(({
-					data
-				}) => {
-					this.clueTagGroupVoList = data.reduce((acc, cur) => {
-						return acc.concat(cur.clueTagDataList);
-					}, []);
+					this.receiptUserListData = filterCustomerManager(res.data);
 				});
 			},
 			handleClose() {
 				this.showFilter = false;
 			},
-			handleClickTag(item, attr) {
-				if (item.isCheck) {
-					const index = this.value[attr].findIndex(v => v == item.dictValue);
-					this.value[attr].splice(index, 1);
-				} else {
-					this.value[attr].push(item.dictValue);
-				}
-			},
 			handleReset() {
-				this.value.sendDateStart = undefined;
-				this.value.sendDateEnd = undefined;
-				this.value.deptId = undefined;
-				this.value.deptName = undefined;
-				this.value.status = '';
-				this.value.state = '';
-				this.value.identification = undefined;
-				this.value.createBy = undefined;
+				this.value.receiptDateStart = undefined;
+				this.value.receiptDateEnd = undefined;
 				this.value.item = '';
 				this.value.phone = '';
-				this.value.allTagList = [];
+				this.value.receiptUserId = undefined;
 				this.createTimeTxt = null;
-				this.identificationUserInfos = [];
-				this.createByUserInfos = [];
+				this.receiptUserInfos = [];
 			},
 			handleEnter() {
 				this.$emit("getList");
 				this.showFilter = false;
 			},
-			handleChangeSort(sort) {
-				this.value.sort = sort;
-			},
-			handleChangeSortField(value) {
-				this.value.sortField = value;
-			},
 			show() {
 				this.showFilter = true;
 			}
@@ -433,8 +227,6 @@
 			margin-bottom: 20rpx;
 		}
 
-		.pick_regions_wrap {}
-
 		.person_wrap {
 			display: flex;
 			flex-wrap: wrap;
@@ -490,35 +282,6 @@
 				color: #202020;
 				margin-bottom: 10px;
 			}
-
-			.option_list {
-				display: flex;
-				flex-wrap: wrap;
-				margin-bottom: 15px;
-
-				.option_item {
-					width: calc(33.33% - 10px);
-					margin-right: 10px;
-					margin-bottom: 10px;
-
-					::v-deep .u-tag__text {
-						margin: auto;
-						font-size: 14px;
-					}
-
-					&:nth-child(6n) {
-						margin-right: 0px;
-					}
-				}
-			}
-
-			.follow_option_list {
-				.option_item {
-					::v-deep .u-tag__text {
-						font-size: 12px;
-					}
-				}
-			}
 		}
 	}
 

pages/order/components/commission/myCommission.vue

@@ -66,7 +66,7 @@
 				</view>
 			</view>
 		</view>
-		
+
 		<filter-query ref="filter" v-model="queryParams" @getList="resetData" :mapHeight="mapHeight"></filter-query>
 
 		<!-- 加载更多 -->
@@ -79,6 +79,7 @@
 <script>
 	import pullUpRefresh from "@/utils/pullUpRefresh";
 	import filterQuery from "./filterQuery.vue";
+	import dayjs from "dayjs";
 	export default {
 		mixins: [pullUpRefresh],
 		components: {
@@ -97,11 +98,15 @@
 		data() {
 			return {
 				queryParams: {
-					phone : "",
+					receiptDateEnd: dayjs().format("YYYY-MM-DD"),
+					receiptDateStart: dayjs().startOf('month').format("YYYY-MM-DD"),
+					item: undefined,
+					phone: undefined,
+					receiptUserId: undefined,
 					pageNum: 1,
 					pageSize: 10,
 				},
-				
+
 				mapHeight: "0px"
 			}
 		},
@@ -163,8 +168,8 @@
 			display: flex;
 			background: #fff;
 			padding: 14px 0;
-		
-		
+
+
 			.query,
 			.search {
 				display: flex;
@@ -174,11 +179,11 @@
 				font-weight: 700;
 				color: #202020;
 			}
-		
+
 			.query {
 				flex: 1;
 			}
-		
+
 			.search {
 				flex: 2;
 				padding-left: 20px;

pages/order/components/orderCenter/orderCenter.vue

@@ -118,6 +118,15 @@
 			}
 		},
 		methods: {
+			handleToDetail(row) {
+				const {
+					id,
+					item
+				} = row;
+				uni.navigateTo({
+					url: `/pages/orderDetail/index?orderId=${id}&item=${item}&type=${this.queryParams.type}`,
+				});
+			},
 			handleKeyword() {
 				this.resetData();
 			},
@@ -159,12 +168,6 @@
 					}
 				});
 			},
-			handleToDetail(item) {
-				// 跳转到详情页面
-				uni.navigateTo({
-					url: `/pages/orderDetail/index?id=${item.id}`
-				});
-			},
 			async getList() {
 				const {
 					pageNum,

pages/orderDetail/index.vue

@@ -0,0 +1,62 @@
+<template>
+	<view>
+		<u-navbar placeholder :autoBack="true" v-hideNav>
+			<template slot="center">
+				<view class="navbar_center_wrap">
+					<text class="name">{{item}}</text>
+				</view>
+			</template>
+		</u-navbar>
+		<detail :orderId="orderId" :params="params"></detail>
+	</view>
+</template>
+
+<script>
+	import detail from "./page/detail.vue";
+	import qs from 'qs';
+	export default {
+		components: {
+			detail
+		},
+		onPullDownRefresh() {
+			uni.stopPullDownRefresh();
+			// 刷新
+			uni.redirectTo({
+				url : `/pages/clueDetail/index?` + qs.stringify(this.params),
+			})
+		},
+		onLoad(option) {
+			const {	item , orderId , type } = option;
+			console.log(option);
+			this.item = item;
+			this.orderId = orderId;
+			this.params = option;
+			uni.setNavigationBarTitle({
+				title: item
+			});
+		},
+		data() {
+			return {
+				item: "", 
+				orderId: "",
+				params : {},
+			}
+		},
+		mounted(){
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.navbar_center_wrap{
+		text-align: center;
+		width: 200rpx;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		.pinyin{
+			font-size: 22rpx;
+			color: #b3b3c6;
+		}
+	}
+</style>

pages/orderDetail/page/detail.vue

@@ -0,0 +1,492 @@
+<template>
+	<view class="clueDetail_wrap">
+		<view class="telPhone">
+			<view class="left">
+				<view class="phone">电话:
+					<show-real-text :real="clueDetail.telephone" :type='params.type'
+						v-if="clueDetail.telephone"></show-real-text>
+					<template v-if="clueDetail.telAddr">
+						({{clueDetail.telAddr}})
+					</template>
+				</view>
+				<view class="copy_btn" v-if="params.type != '1'" @click="handleCopy(clueDetail)">复制</view>
+			</view>
+			<view class="right">
+				运营人 : {{ clueDetail.clueOperationName }}
+			</view>
+		</view>
+		<view class="clueDetail_top_info">
+			<view class="top_info_item">
+				<view class="top">
+					{{defaultText(clueDetail.clueOwnerName)}}
+				</view>
+				<view class="bottom">
+					线索所属人
+				</view>
+			</view>
+			<view class="top_info_item">
+				<view class="top">
+					{{defaultText(clueDetail.appName)}}
+				</view>
+				<view class="bottom">
+					流量来源
+				</view>
+			</view>
+			<view class="top_info_item">
+				<view class="top">
+					{{defaultText(clueDetail.clueType)}}
+				</view>
+				<view class="bottom">
+					线索类型
+				</view>
+			</view>
+			<view class="top_info_item">
+				<view class="top">
+					{{defaultText(clueDetail.createTime)}}
+				</view>
+				<view class="bottom">
+					线索创建时间
+				</view>
+			</view>
+			<view class="top_info_item">
+				<view class="top">
+					{{defaultText(clueDetail.clueDataSource)}}
+				</view>
+				<view class="bottom">
+					线索渠道
+				</view>
+			</view>
+			<view class="top_info_item">
+				<view class="top">
+					{{crmFollowStatusFormat(clueDetail.handleState)}}
+				</view>
+				<view class="bottom">
+					跟进状态
+				</view>
+			</view>
+		</view>
+
+
+		<view class="clue_state_wrap">
+			<view class="clue_state_top_wrap">
+				<view class="top_left">线索阶段</view>
+				<view class="top_right" @click="handleIsInvalid">
+					<template v-if="clueDetail.clueState === '6'">已标记无效</template>
+					<template v-else>标记无效</template>
+				</view>
+			</view>
+			<view class="steps_wrap">
+				<u-steps :current="currentSteps" dot>
+					<u-steps-item :title="item.dictLabel" @click.native="handleClickStepsItem(item)"
+						v-for="(item,index) in crmCluePhaseDict" :key="index"></u-steps-item>
+				</u-steps>
+			</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 clueDetail.clueTags" :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 #clueInfo>
+				<clueInfo :clueId="clueDetail.id" v-if="clueDetail.id" :params="params" ref="clueInfoRef" type="1"></clueInfo>
+			</template>
+			<template #advertising>
+				<advertising :clueId="clueDetail.id" v-if="clueDetail.id" ref="advertisingRef"></advertising>
+			</template>
+			<template #followRecord>
+				<followRecord :clueId="clueDetail.id" v-if="clueDetail.id" ref="followRecordRef" type="1"></followRecord>
+			</template>
+			<template #callRecord>
+				<callRecord :clueId="clueDetail.id" :clueDetail="clueDetail" v-if="clueDetail.id" ref="callRecordRef">
+				</callRecord>
+			</template>
+			<template #orderFollow>
+				<followRecord :clueId="clueDetail.id" v-if="clueDetail.id" ref="followRecordRef" type="3"></followRecord>
+			</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/clueDetail/icon-clue.png"
+				@click="handleDistribution"></u-tabbar-item> -->
+			<u-tabbar-item text="发单" icon="../../static/clueDetail/icon-order.png"
+				@click="handleClueSend"></u-tabbar-item>
+			<u-tabbar-item text="写新跟进" icon="../../static/caseDetail/icon-follow.png"
+				@click="handleAddFollow"></u-tabbar-item>
+			<u-tabbar-item text="上传录音" icon="../../static/caseDetail/icon-record.png"
+				@click="handleUploadRecord"></u-tabbar-item>
+		</u-tabbar>
+
+		<distribution-modal :clueDetail="clueDetail" ref="distribution"
+			@handleSuccess="distributionSuccess"></distribution-modal>
+
+		<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 clueInfo from "../tabs/clueInfo/index";
+	import advertising from "../tabs/advertising/index";
+	import followRecord from "../tabs/followRecord/index";
+	import callRecord from "../tabs/callRecord/index";
+	export default {
+		components: {
+			clueInfo,
+			advertising,
+			followRecord,
+			callRecord,
+		},
+		props: {
+			clueId: {
+				type: String,
+				required: true
+			},
+			params: {
+				type: Object,
+				required: true
+			},
+		},
+		computed: {
+			currentSteps() {
+				const index = this.crmCluePhaseDict.findIndex(v => v.dictValue === this.clueDetail.clueState);
+				return index;
+			},
+		},
+		data() {
+			return {
+
+				showModal: false,
+
+				clueDetail: {},
+
+				checkTags: [],
+
+				clueTagGroupVoList: [],
+
+				crmHandelStatusDict: [],
+				crmCluePhaseDict: [],
+
+				tabs: [{
+						label: '基础信息',
+						slot: 'clueInfo'
+					}, {
+						label: '广告信息',
+						slot: 'advertising'
+					}, {
+						label: '跟进记录',
+						slot: 'followRecord'
+					},
+					{
+						label: '通话记录',
+						slot: 'callRecord'
+					},
+					{
+						label: '后端跟进',
+						slot: 'orderFollow'
+					}
+				],
+				activeIndex: 0,
+			}
+		},
+		methods: {
+			distributionSuccess() {
+				this.handleInit();
+			},
+			async hanldeTagClose(tag) {
+				const {
+					cfId: id,
+					clueTags
+				} = this.clueDetail;
+				const copyClueTags = cloneDeep(clueTags);
+				if (id == null) {
+					this.$message.error("修改异常");
+					return;
+				}
+				const index = copyClueTags.findIndex(v => v.id === tag.id);
+				if (index !== -1) {
+					copyClueTags.splice(index, 1);
+					const allTags = copyClueTags.map(v => v.id).join(",");
+					await uni.$u.api.updateClueFixedFieldsAllTags({
+						id,
+						allTags
+					});
+					this.clueDetail.clueTags = copyClueTags;
+					this.checkTags = this.clueDetail.clueTags.map(v => v.id);
+				}
+			},
+			handleDistribution() {
+				this.$refs.distribution.show();
+			},
+			confirm() {
+
+			},
+			async handleClueTagConfirm() {
+				const allTags = this.checkTags.join(",");
+				await uni.$u.api.updateClueFixedFieldsAllTags({
+					id: this.clueDetail.cfId,
+					allTags
+				});
+				this.getDetail();
+			},
+			handleAddClueTag() {
+				this.$refs.clueTag.showModal();
+			},
+			handleIsInvalid() {
+				const invalidDict = {
+					dictValue: '6'
+				};
+				this.handleClickStepsItem(invalidDict);
+			},
+			async handleClickStepsItem(item) {
+				const {
+					cfId: id,
+					clueState
+				} = this.clueDetail;
+				if (clueState === '6') {
+					if (clueState === item.dictValue) {
+						item.dictValue = '1';
+					} else {
+						uni.$u.toast("当前标记无效,请先取消");
+						return;
+					}
+				}
+				if (clueState === item.dictValue) {
+					return;
+				}
+				if (id == null) {
+					this.$message.error("修改异常");
+					return;
+				}
+				uni.$u.api.updateClueFixedFieldsClueState({
+					id,
+					clueState: item.dictValue
+				}).then(() => {
+					this.$set(this.clueDetail, "clueState", item.dictValue);
+				});
+			},
+			defaultText(text) {
+				return text ? text : "-";
+			},
+			crmFollowStatusFormat(v) {
+				return selectDictLabel(this.crmHandelStatusDict, v);
+			},
+			handleCopy(item) {
+				uni.setClipboardData({
+					data: item.telephone,
+					success: function() {
+						uni.$u.toast("复制成功");
+					}
+				});
+			},
+			// 添加联系人
+			handleCallPhone() {
+				uni.makePhoneCall({
+					phoneNumber: this.clueDetail.telephone,
+					success: () => {
+						this.$store.commit("call/SET_FORM", {
+							clueId: this.clueId,
+							type: '3',
+							callee: this.clueDetail.telephone
+						})
+					}
+				});
+			},
+			// 发单
+			async handleClueSend() {
+				const {
+					data: count
+				} = await uni.$u.api.getClueSendFormCountByClueId({
+					clueId: this.clueId
+				});
+				if (count > 0) {
+					uni.showModal({
+						title: '该线索已发单是否再次发单？',
+						success: function (res) {
+							if (res.confirm) {
+								uni.navigateTo({
+									url: `/pages/orderForm/index?clueId=${this.clueId}`
+								})
+							}
+						}
+					});
+				}else{
+					uni.navigateTo({
+						url: `/pages/orderForm/index?clueId=${this.clueId}`
+					})
+				}
+			},
+			// 添加催记
+			handleAddFollow() {
+				uni.navigateTo({
+					url: `/pages/addFollow/index?clueId=${this.clueId}`
+				})
+			},
+			handleUploadRecord() {
+				uni.navigateTo({
+					url: `/pages/uploadRecord/index?clueId=${this.clueId}`
+				})
+			},
+			// 初始化详情页
+			async handleInit() {
+				this.$getDicts('crm_follow_status').then((res => {
+					this.crmHandelStatusDict = res;
+				}))
+				this.$getDicts('crm_clue_phase').then((res => {
+					this.crmCluePhaseDict = res.filter(v => v.dictValue !== '6');
+				}))
+				uni.$u.api.getClueTagGroupVoList({
+					tagGroupApplication: '1'
+				}).then(({
+					data
+				}) => {
+					this.clueTagGroupVoList = data;
+				});
+				this.getDetail();
+			},
+			getDetail() {
+				uni.$u.api.getClueMainInfoVoById({
+					id: this.clueId
+				}).then(res => {
+					this.clueDetail = res.data;
+					this.checkTags = this.clueDetail.clueTags.map(v => v.id);
+				});
+			},
+			// 标签点击事件
+			tabClick(index, item) {
+				// // 根据索引调用对应组件的getData方法
+				// const componentRefs = [
+				// 	this.$refs.clueInfoRef,
+				// 	this.$refs.advertisingRef,
+				// 	this.$refs.followRecordRef,
+				// 	this.$refs.callRecordRef
+				// ];
+
+				// const currentComponent = componentRefs[index];
+				// if (currentComponent && typeof currentComponent.getData === 'function') {
+				// 	currentComponent.getData();
+				// }
+			},
+			// 标签切换事件
+			tabChange(index, item) {
+				// console.log("tabChange", index, item);
+			},
+		},
+		created() {
+			this.handleInit();
+		},
+	}
+</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;
+
+		.clue_state_top_wrap {
+			display: flex;
+			justify-content: space-between;
+			margin-bottom: 10px;
+
+			.top_left {
+				font-size: 16px;
+			}
+
+			.top_right {
+				font-size: 14px;
+				color: #4fa5fe;
+			}
+		}
+
+		.steps_wrap {}
+	}
+
+	.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>

pages/orderDetail/tabs/advertising/index.vue

@@ -0,0 +1,196 @@
+<template>
+	<view class="caseInfo_wrap">
+		<template>
+			<view class="caseInfo_content_wrap">
+				<view class="caseInfo_title">
+					<image src="/static/clueDetail/icon-caseInfo.png" mode=""></image>
+					<text class="info_text">广告信息</text>
+				</view>
+				<view class="caseInfo_main_wrap">
+					<view class="Info_item" v-for="(item,index) in caseInfoColumn" :key="item.prop">
+						<text class="label">{{item.label}}</text>
+						<view v-if="item.prop === 'advName'" class="advName_wrap">
+							<view class="copy_btn" @click="handleCopy(clueAdInfo[item.prop])">复制</view>
+							<text class="value">{{clueAdInfo[item.prop] ? clueAdInfo[item.prop] : '-'}}</text>
+						</view>
+						<text v-else-if="item.color" class="value highlight" :style="handleStyle(item.color)">
+							{{clueAdInfo[item.prop]}}
+						</text>
+						<show-real-text v-else-if="item.dsProp" class="value" :real="clueAdInfo[item.prop]"
+							:normal="clueAdInfo[item.dsProp]" :accessType="item.accessType" :key="item.prop + index">
+						</show-real-text>
+						<text v-else class="value">{{clueAdInfo[item.prop] ? clueAdInfo[item.prop] : '-'}}</text>
+					</view>
+				</view>
+			</view>
+		</template>
+	</view>
+</template>
+
+<script>
+	const caseInfoColumn = [{
+			prop: 'advId',
+			label: '广告主ID',
+		},
+		{
+			prop: 'advName',
+			label: '广告主名称',
+		},
+		{
+			prop: 'promotionId',
+			label: '广告ID',
+		},
+		{
+			prop: 'promotionName',
+			label: '广告名称',
+		},
+		{
+			prop: 'originExternalUrl',
+			label: '落地页链接',
+		},
+		{
+			prop: 'titleId',
+			label: '标题ID',
+		},
+		{
+			prop: 'videoId',
+			label: '视频ID',
+		},
+		{
+			prop: 'imageId',
+			label: '图片ID',
+		},
+		{
+			prop: 'douyinId',
+			label: '企业号ID',
+		},
+		{
+			prop: 'douyinName',
+			label: '企业号名称',
+		},
+		{
+			prop: 'corporateToolName',
+			label: '企业号工具',
+		},
+		{
+			prop: 'clueDataSourceDetail',
+			label: '线索渠道详情',
+		},
+	]
+	export default {
+		props: {
+			clueId: {
+				required: true
+			},
+		},
+		methods: {
+			handleCopy(value) {
+				uni.setClipboardData({
+					data: value,
+					success: function() {
+						uni.$u.toast("复制成功");
+					}
+				});
+			},
+			async getData() {
+				const {
+					data
+				} = await uni.$u.api.getClueAdInfoByClueId({
+					clueId: this.clueId
+				});
+				this.clueAdInfo = data ? data : {};
+			}
+		},
+		created() {
+			this.getData();
+		},
+		data() {
+			return {
+				clueAdInfo: {},
+
+				caseInfoColumn,
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.caseInfo_wrap {
+		min-height: 400px;
+		.caseInfo_title {
+			display: flex;
+			align-items: center;
+			height: 80rpx;
+			background: #f4f4f6;
+			padding-left: 40rpx;
+
+			image {
+				width: 24rpx;
+				height: 24rpx;
+				margin-right: 10rpx;
+			}
+
+			.info_text {
+				font-size: 24rpx;
+				color: #202020;
+			}
+
+			.tabs_wrap {
+				display: flex;
+
+				.tab_item {
+					margin-left: 30rpx;
+				}
+			}
+		}
+
+		.caseInfo_main_wrap {
+			.caseCards_list_wrap {
+				background: #ebf6ff;
+				margin-bottom: 10rpx;
+				margin-left: 10rpx;
+				margin-right: 10rpx;
+			}
+			
+
+			.Info_item {
+				padding: 18rpx 40rpx;
+				display: flex;
+				justify-content: space-between;
+
+				.label {
+					color: #999999;
+					font-size: 26rpx;
+					width: 160rpx;
+				}
+
+				.value {
+					font-size: 26rpx;
+					color: #202020;
+					border-radius: 100rpx;
+					text-align: right;
+					width: 500rpx;
+				}
+
+				.highlight {
+					font-size: 22rpx;
+					font-weight: 900;
+					padding: 6rpx 20rpx;
+				}
+			}
+			
+			.advName_wrap{
+				display: flex;
+				align-items: center;
+				.copy_btn {
+					color: #4fa5fe;
+					margin-right: 10px;
+				}
+				.value{
+					width: auto;
+				}
+			}
+		}
+
+	}
+</style>

pages/orderDetail/tabs/callRecord/index.vue

@@ -0,0 +1,204 @@
+<template>
+	<view class="callRecord_wrap">
+		<view v-if="dataList.length > 0" class="timeline-list">
+			<view v-for="(data, index) in dataList" :key="index" class="timeline-item">
+				<view class="timeline-icon">
+					<uni-icons type="phone" size="20" color="#6cc040"></uni-icons>
+				</view>
+				<view class="timeline-content">
+					<view class="timestamp">{{ titleText(data) }}</view>
+					<view class="info_top">
+						<view class="info_left">
+							<text class="name_text">{{ data.caller }} 打给 {{ data.callee }}</text>
+						</view>
+						<view class="info_right">
+							{{ data.type === 1 ? data.followState : '' }}
+						</view>
+						<view class="delete-btn" @tap="handleDelete({ id: data.id })">
+							<uni-icons type="trash" size="20" color="#ff6666"></uni-icons>
+						</view>
+					</view>
+					<view class="file_name" v-if="data.type === '3'">{{data.fileName}}</view>
+					<view class="call_file">
+						<view class="audio-container">
+							<audio :src="data.fileUrl" controls ></audio>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view v-else class="empty_wrap">
+			<uni-icons type="empty" size="60" color="#cccccc"></uni-icons>
+			<text class="empty-text">暂无通话记录</text>
+		</view>
+	</view>
+</template>
+<script>
+	export default {
+		props: {
+			clueId: {
+				type: [String, Number],
+				required: true
+			},
+			clueDetail: {
+				type: Object,
+				default: () => ({})
+			}
+		},
+		data() {
+			return {
+				dataList: []
+			}
+		},
+		methods: {
+			titleText(data) {
+				return `${data.createTime} 号码(${data.caller}) ${(data.type === 1 ?  data.hangupCauseName: '上传录音')}`
+			},
+			handleDelete({
+				id
+			}) {
+				uni.showModal({
+					title: '提示',
+					content: '是否确定删除?',
+					confirmColor: '#6cc040',
+					success: async (res) => {
+						if (res.confirm) {
+							try {
+								await uni.$u.api.deleteClueFile([id])
+								uni.showToast({
+									title: '删除成功',
+									icon: 'success',
+									duration: 2000
+								})
+								this.getData()
+							} catch (error) {
+								uni.showToast({
+									title: '删除失败',
+									icon: 'error',
+									duration: 2000
+								})
+							}
+						}
+					}
+				})
+			},
+			async getData() {
+				const {
+					data
+				} = await uni.$u.api.getCallClueFileByClueId({
+					clueId: this.clueId
+				});
+				this.dataList = data;
+			},
+		},
+		mounted() {
+			this.getData();
+		},
+		beforeDestroy(){
+			uni.$off('uploadRecordSuccess');  
+		},
+		created() {
+			uni.$on('uploadRecordSuccess',()=>{
+				this.getData();
+			});
+		}
+	}
+</script>
+<style lang="scss" scoped>
+	.callRecord_wrap {
+		position: relative;
+		padding: 20rpx;
+		min-height: 400px;
+		box-sizing: border-box;
+
+		.loading-mask {
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			background-color: rgba(255, 255, 255, 0.8);
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			z-index: 999;
+		}
+
+		.timeline-list {
+			.timeline-item {
+				display: flex;
+				margin-bottom: 30rpx;
+
+				.timeline-icon {
+					width: 60rpx;
+					height: 60rpx;
+					border-radius: 50%;
+					background-color: #f1f3f4;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					margin-right: 20rpx;
+					flex-shrink: 0;
+				}
+
+				.timeline-content {
+					width:690rpx;
+
+					.timestamp {
+						font-size: 24rpx;
+						color: #999;
+						margin-bottom: 10rpx;
+					}
+
+					.info_top {
+						display: flex;
+						justify-content: space-between;
+						align-items: center;
+						margin-bottom: 20rpx;
+
+						.info_left {
+							.name_text {
+								font-size: 28rpx;
+								font-weight: 500;
+							}
+						}
+
+						.info_right {
+							color: #6cc040;
+							font-size: 26rpx;
+						}
+					}
+					.file_name{
+						color: #999;
+						font-size: 26rpx;
+					}
+
+					.call_file {
+						width: 100%;
+						border-radius: 12rpx;
+						display: flex;
+						align-items: center;
+						justify-content: space-between;
+						box-sizing: border-box;
+
+						.audio-container {
+							width: 100%;
+						}
+					}
+				}
+			}
+		}
+
+		.empty_wrap {
+			text-align: center;
+			padding: 100rpx 0;
+
+			.empty-text {
+				display: block;
+				margin-top: 30rpx;
+				color: #999;
+				font-size: 28rpx;
+			}
+		}
+	}
+</style>

pages/orderDetail/tabs/clueInfo/index.vue

@@ -0,0 +1,232 @@
+<template>
+	<view class="caseInfo_wrap">
+		<template v-if="clueDetail.id">
+			<view class="caseInfo_content_wrap">
+				<view class="caseInfo_title">
+					<image src="/static/clueDetail/icon-caseInfo.png" mode=""></image>
+					<text class="info_text">线索基础信息</text>
+				</view>
+				<view class="caseInfo_main_wrap">
+					<template v-if="params.type === '1'">
+						<view class="Info_item" v-for="(item,index) in caseInfoColumn" :key="item.prop">
+							<text class="label">{{item.label}}</text>
+							<text v-if="item.color" class="value highlight" :style="handleStyle(item.color)">
+								{{clueDetail[item.prop]}}
+							</text>
+							<show-real-text :real="clueDetail.telephone" :type='params.type'
+								v-if="item.prop === 'telephone'"></show-real-text>
+							<text v-else class="value">{{clueDetail[item.prop]}}</text>
+						</view>
+					</template>
+					<template v-if="params.type === '2'">
+						<view class="Info_item" v-for="(item,index) in caseInfoColumn" :key="item.prop">
+							<text class="label">{{item.label}}</text>
+							<view class="input_wrap" v-if="item.input">
+								<input v-model="clueDetail[item.prop]" style="text-align: right; padding-right: 10px;"
+									@blur="updateClueMainInfo" />
+							</view>
+							<text v-else-if="item.color" class="value highlight" :style="handleStyle(item.color)">
+								{{clueDetail[item.prop]}}
+							</text>
+							<text v-else class="value">{{clueDetail[item.prop]}}</text>
+						</view>
+					</template>
+				</view>
+			</view>
+		</template>
+	</view>
+</template>
+
+<script>
+	import {
+		cloneDeep,
+		isEqual
+	} from 'lodash';
+
+	const caseInfoColumn = [{
+			prop: 'name',
+			label: '姓名',
+			input: true
+		},
+		{
+			prop: 'telephone',
+			label: '电话',
+			input: true
+		},
+		{
+			prop: 'genderTypeCode',
+			label: '性别',
+		},
+		{
+			prop: 'age',
+			label: '年龄',
+		},
+		{
+			prop: 'weixin',
+			label: '微信',
+			input: true
+		},
+		{
+			prop: 'corporateStatus',
+			label: '企业号状态',
+		},
+		{
+			prop: 'userDouyinId',
+			label: '抖音号',
+		},
+		{
+			prop: 'autoAddress',
+			label: '自动定位城市',
+		},
+		{
+			prop: 'telAddr',
+			label: '手机号归属地',
+		},
+		{
+			prop: 'createTime',
+			label: '线索创建时间',
+		},
+		{
+			prop: 'updateTime',
+			label: '最新修改时间',
+		},
+		{
+			prop: 'address',
+			label: '详细地址',
+		},
+		{
+			prop: 'remark',
+			label: '备注',
+		},
+		{
+			prop: 'qq',
+			label: 'QQ号',
+		},
+		{
+			prop: 'email',
+			label: '邮箱',
+		},
+		{
+			prop: 'date',
+			label: '日期',
+		},
+		{
+			prop: 'manualAddressCode',
+			label: '手动填写地域',
+		}
+	]
+	export default {
+		props: {
+			clueId: {
+				required: true
+			},
+			params: {
+				type: Object,
+				required: true
+			},
+		},
+		methods: {
+			async updateClueMainInfo() {
+				if (!this.clueDetail.name) {
+					uni.$u.toast("姓名不能为空");
+					return;
+				}
+				if (!isEqual(this.cloneClueDetail, this.clueDetail)) {
+					await uni.$u.api.updateClueMainInfo(this.clueDetail);
+					uni.$u.toast("修改成功");
+					this.getData();
+				}
+			},
+			async getData() {
+				const {
+					data
+				} = await uni.$u.api.getClueMainInfoById({
+					id: this.clueId
+				});
+				this.clueDetail = data;
+				this.cloneClueDetail = cloneDeep(data);
+			}
+		},
+		created() {
+			this.getData();
+		},
+		data() {
+			return {
+				cloneClueDetail: {},
+				clueDetail: {},
+
+				caseInfoColumn,
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.caseInfo_wrap {
+		min-height: 400px;
+
+		.caseInfo_title {
+			display: flex;
+			align-items: center;
+			height: 80rpx;
+			background: #f4f4f6;
+			padding-left: 40rpx;
+
+			image {
+				width: 24rpx;
+				height: 24rpx;
+				margin-right: 10rpx;
+			}
+
+			.info_text {
+				font-size: 24rpx;
+				color: #202020;
+			}
+
+			.tabs_wrap {
+				display: flex;
+
+				.tab_item {
+					margin-left: 30rpx;
+				}
+			}
+		}
+
+		.caseInfo_main_wrap {
+			.caseCards_list_wrap {
+				background: #ebf6ff;
+				margin-bottom: 10rpx;
+				margin-left: 10rpx;
+				margin-right: 10rpx;
+			}
+
+			.Info_item {
+				padding: 18rpx 40rpx;
+				display: flex;
+				justify-content: space-between;
+
+				.label {
+					color: #999999;
+					font-size: 26rpx;
+				}
+
+				.input_wrap {
+					border-bottom: 1px solid #ddd;
+				}
+
+				.value {
+					font-size: 26rpx;
+					color: #202020;
+					border-radius: 100rpx;
+				}
+
+				.highlight {
+					font-size: 22rpx;
+					font-weight: 900;
+					padding: 6rpx 20rpx;
+				}
+			}
+		}
+
+	}
+</style>

pages/orderDetail/tabs/followRecord/index.vue

@@ -0,0 +1,249 @@
+<template>
+	<view class="followRecord_wrap">
+		<rxl-timeline class="followRecord_timeLine_wrap" v-if="!isEmpty(dataList)">
+			<rxl-timeline-item :timestamp="key" :size="10" color="#108cff" v-for="(followList,key,index) in dataList"
+				:key="key+index">
+				<view slot="body">
+					<view class="body_wrap" v-for="(item) in followList" :key="item.id">
+						<view class="body_top">
+							<view class="body_top_left">
+								<image src="@/static/case/icon-avatar.png" mode=""></image>
+								<text class="follow">{{item.createNickname}}</text>
+							</view>
+							<view class="body_top_right" @click="handleDelete(item)">
+								删除
+							</view>
+						</view>
+						<view class="body_center">
+							{{item.content}}
+						</view>
+						<view class="body_bottom">
+							<u-icon name="clock" color="#C0C0C7"></u-icon>
+							<text class="date">{{item.createTime}}</text>
+						</view>
+					</view>
+				</view>
+			</rxl-timeline-item>
+		</rxl-timeline>
+		<view v-else class="empty_wrap">
+			暂无跟进记录
+		</view>
+		
+		<u-modal :show="showModal"
+			@confirm="confirm" 
+			ref="uModal" 
+			:asyncClose="true" 
+			showCancelButton
+			@cancel="showModal = false"
+			cancelColor="#409eff"
+			:confirmText="'删除'" confirmColor="#f8836c">
+			<view class="modal_box">
+				确定要删除跟进记录
+			</view>
+		</u-modal>
+	</view>
+</template>
+<script>
+	import {
+		groupBy,
+		isEmpty
+	} from "lodash";
+	export default {
+		props: {
+			clueId: {
+				required: true
+			},
+			orderId: {
+				type: String | Number,
+				required: false
+			},
+			type: {
+				type: String,
+				required: true
+				// '1' : 线索跟进
+				// '2' : 订单跟进(通过orderId)
+				// '3' : 订单跟进(通过clueId)
+				// '4' : 重复线索跟进
+				// 其他 : 重复订单跟进
+			}
+		},
+		data() {
+			return {
+				list: [0, 1],
+				dataList: {},
+				loading: false,
+				
+				showModal: false,
+				currentDeleteFollowId : undefined
+			}
+		},
+		methods: {
+			handleDelete(item){
+				const { id } = item;
+				this.currentDeleteFollowId = id;
+				this.showModal = true;
+			},
+			isEmpty,
+			async getData() {
+				this.loading = true;
+				let data;
+				
+				// 根据type类型调用不同接口
+				if (this.type === '1') {
+					// 线索跟进
+					data = await uni.$u.api.getClueFollowList({
+						clueId: this.clueId
+					});
+				} else if (this.type === '2') {
+					// 订单跟进(通过orderId)
+					data = await uni.$u.api.getOrderFollowList({
+						orderId: this.orderId
+					});
+				} else if (this.type === '3') {
+					// 订单跟进(通过clueId)
+					data = await uni.$u.api.getOrderFollowListByClueId({
+						clueId: this.clueId
+					});
+				} else if (this.type === '4') {
+					// 重复线索跟进
+					data = await uni.$u.api.getDuplicateClueFollowByClueId({
+						clueId: this.clueId
+					});
+				} else {
+					// 重复订单跟进
+					data = await uni.$u.api.getDuplicateOrderFollowListByClueId({
+						clueId: this.clueId
+					});
+				}
+				
+				this.dataList = data.data;
+				this.loading = false;
+			},
+			async confirm() {
+				try {
+					// 根据type类型调用不同删除接口
+					if (this.type === '1' || this.type === '4') {
+						// 线索跟进和重复线索跟进使用deleteClueFollow
+						await uni.$u.api.deleteClueFollow([this.currentDeleteFollowId]);
+					} else {
+						// 订单跟进(通过orderId)、订单跟进(通过clueId)、重复订单跟进使用deleteOrderFollow
+						await uni.$u.api.deleteOrderFollow([this.currentDeleteFollowId]);
+					}
+					
+					uni.$u.toast("删除成功");
+					this.getData();
+				} catch (error) {
+					console.error('删除跟进记录失败:', error);
+					uni.$u.toast("删除失败");
+				} finally {
+					this.showModal = false;
+					this.currentDeleteFollowId = undefined;
+				}
+			},
+		},
+		mounted() {
+			this.getData();
+		},
+		beforeDestroy(){
+			uni.$off('addFollowSuccess');  
+		},
+		created() {
+			uni.$on('addFollowSuccess',()=>{
+				this.getData();
+			});
+		}
+	}
+</script>
+<style lang="scss" scoped>
+	.followRecord_wrap {
+		min-height: 400px;
+		background: #f5f6f8;
+		position: relative;
+
+		.empty_wrap {
+			text-align: center;
+			color: #999999;
+			position: absolute;
+			left: 50%;
+			top: 50%;
+			transform: translate(-50%, -50%);
+		}
+	}
+
+	.followRecord_timeLine_wrap {
+		background: #ffffff;
+
+		.timeline-item {
+			&:last-child {
+				::v-deep .left-line .timeline-item-tail {
+					display: none;
+				}
+			}
+		}
+	}
+
+	.body_wrap {
+		margin-bottom: 20rpx;
+		background-color: #f6f7f8;
+		padding: 20rpx;
+		border-radius: 20rpx;
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+
+		.body_top {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+
+			.body_top_left {
+				display: flex;
+				align-items: center;
+
+				image {
+					width: 46rpx;
+					height: 46rpx;
+					margin-right: 12rpx;
+				}
+
+				.follow {
+					color: #202020;
+					font-size: 30rpx;
+					margin-right: 12rpx;
+				}
+
+				.debt {
+					color: #999999;
+					font-size: 24rpx;
+				}
+			}
+
+			.body_top_right {
+				color: #108CFF;
+				font-size: 24rpx;
+			}
+		}
+
+		.body_center {
+			margin: 30rpx 0;
+			padding-left: 56rpx;
+			overflow: hidden;
+		}
+
+		.body_bottom {
+			display: flex;
+			padding-left: 56rpx;
+
+			::v-deep .u-icon__icon {
+				font-size: 24rpx !important;
+			}
+
+			.date {
+				color: #c0c0c7;
+				font-size: 22rpx;
+				margin-left: 10rpx;
+			}
+		}
+	}
+</style>