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>
</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("复制成功");
					}
				});
			},
		},
	}
</script>

<style lang="scss" scoped>
	.post_item {
		background: #fff;
		border-radius: 20px;
		padding: 20px;
		margin-bottom: 20px;
		.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;
			}
		}
	}
</style>