crm-app-vue3/pages/clue/post/index.vue

<template>
	<view class="post_item">
		<view class="post_top">
			<view class="top_left">{{ item.name }}</view>
			<view class="top_right">{{ item.assignStateCode === '1' ? "已分配" : "未分配" }}</view>
		</view>
		<view class="post_info">
			<view class="telPhone">
				<view class="phone">
					<text>电话: </text>
					<show-real-text :real="item.telephone" :type='type'
						:style="{ color: item.repetitionOperationName ? 'red' : 'black' }"></show-real-text>
					<template v-if="item.telAddr">
						({{ item.telAddr }})
					</template>
					<text v-if="item.repetitionOperationName">( 撞 : {{ item.repetitionOperationName }})</text>
				</view>
				<view class="copy_btn" @click.stop="handleCopy(item)" v-if="type != '1'">复制</view>
			</view>
			<view class="telPhone" v-if="item.weixin">
				<text>微信: </text>
				<view class="phone">
					<text :style="{ color: item.repetitionOperWeixinName ? 'red' : 'black' }">{{ item.weixin }}</text>
					<text v-if="item.repetitionOperWeixinName">( 撞 : {{ item.repetitionOperWeixinName }})</text>
				</view>
			</view>
			<view class="info">
				<view class="createTime">{{ item.createTime }}</view>
				<view>{{ item.appName }}</view>
			</view>
			<view class="info">
				<view class="owner" style="margin-right: 20px;">所属人 {{ item.clueOwnerName ? item.clueOwnerName : "-" }}
				</view>
				<view class="operation">运营人 {{ 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_clue_phase(item.clueState) }}
				</view>
				<view class="clueTag">
					<view class="label">线索标签:</view>
					<u-tag :text="tag.name" plain plainFill borderColor="#fff" size="mini"
						v-for="(tag) in item.clueTags" :key="tag.id" style="margin-right: 10px;" :bgColor="tag.color"
						color="#fff"></u-tag>
				</view>
			</view>
		</view>
		<view class="sendOrder" @click.stop="handleSendOrder(item)">
			<image src='/static/publicClue/littlePlane.png' mode="aspectFit" class="sendOrder_img"></image>
			<view>发单</view>
		</view>
	</view>
</template>

<script>
import {
	selectDictLabel
} from "@/utils/util";
export default {
	props: {
		item: {
			type: Object,
			required: true
		},
		dicts: {
			type: Object,
			required: true
		},
		type: {
			type: String | Number,
			required: true
		},
	},
	data() {
		return {
			caseStatusDicts: [],
		}
	},
	methods: {
		// 字典翻译
		crm_clue_phase(caseStatus) {
			return selectDictLabel(this.dicts.caseStatusDicts, caseStatus);
		},
		handleCopy(item) {
			uni.setClipboardData({
				data: item.telephone,
				success: function () {
					uni.$u.toast("复制成功");
				}
			});
		},
		// 主页面的发单
		async handleSendOrder(item) {
			console.log(item);
			const {
				data: count
			} = await uni.$u.api.getClueSendFormCountByClueId({
				clueId: item.id
			});
			console.log(count);
			if (count > 0) {
				uni.showModal({
					title: '该线索已发单是否再次发单？',
					success: (res) => {
						if (res.confirm) {
							this.toOrderForm(item)
						}
					}
				});
			} else {
				this.toOrderForm(item)
			}
		},
		toOrderForm(item) {
			console.log(item);
			const {
				id,
				ownLatestDynamicTime,
				createTime,
				clueOwnerId
			} = item;
			if (this.$store.state.user.userInfo.userId === clueOwnerId) {
				uni.navigateTo({
					url: `/pages/orderForm/index?clueId=${id}`
				})
			} else {
				// 确定用于判断的目标时间（ownLatestDynamicTime，为null则用createTime）
				const date = ownLatestDynamicTime || createTime

				const twoDaysLater = new Date(date)
				twoDaysLater.setDate(twoDaysLater.getDate() + 2) // 日期加2天

				// 是否大于当前时间 小于可以发单
				let isOrderForm = false
				if (twoDaysLater) {
					isOrderForm = twoDaysLater.getTime() <= new Date().getTime()
				}
				if (isOrderForm) {
					uni.navigateTo({
						url: `/pages/orderForm/index?clueId=${id}`
					})
				} else {
					uni.$u.toast('非所属人需两天内无跟进记录才可发单')
				}
			}
		},
	},
}
</script>

<style lang="scss" scoped>
.post_item {
	background: #fff;
	border-radius: 20px;
	padding: 20px;
	margin-bottom: 20px;
	position: relative;

	.post_top {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;

		.top_left {
			font-size: 18px;
		}

		.top_right {
			color: #87bf66;
		}
	}

	.post_info {
		font-size: 14px;

		.telPhone {
			display: flex;
			margin-bottom: 6px;

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

		.info {
			display: flex;
			margin-bottom: 10px;

			.createTime {
				margin-right: 10px;
			}

			.copy_btn {
				display: flex;
				flex-wrap: wrap;
			}
		}
	}

	.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 66px;
		}

		.clueTag {
			display: flex;
		}
	}


	.sendOrder {
		width: 50px;
		height: 50px;
		background-color: rgb(36, 98, 234);
		color: #fff;
		border-radius: 50%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		font-size: 10px;
		font-weight: 700;
		font-family: "uicon";

		position: absolute;
		right: 20px;
		bottom: 115px;


		.sendOrder_img {
			width: 20px;
			height: 20px;
		}
	}
}
</style>