crm-app-vue3/pages/clueDetail/page/clueDetail.vue

<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" :swipeThreshold="10" v-model="activeIndex" :lineWidth="'120rpx'" :isLazyRender="false"
			color="#108cff" titleActiveColor="#108cff" @click="tabClick" @change="tabChange" :swipeable="false">
			<template #clueInfo>
				<clueInfo :clueId="clueDetail.id" v-if="clueDetail.id" :params="params"></clueInfo>
			</template>
			<template #advertising>
				<advertising :clueId="clueDetail.id" v-if="clueDetail.id"></advertising>
			</template>
			<template #followRecord>
				<followRecord :clueId="clueDetail.id" v-if="clueDetail.id"></followRecord>
			</template>
		<!-- 	<template #callRecord>
				<callRecord :clueId="clueDetail.id" v-if="clueDetail.id"></callRecord>
			</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/caseDetail/icon-follow.png"
				@click="handleAddFollow"></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'
				// }
				],
				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
				});
			},
			// 添加催记
			handleAddFollow() {
				uni.navigateTo({
					url:`/pages/addFollow/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) {
				// console.log("tabClick", index, item);
			},
			// 标签切换事件
			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>