crm-app-vue3/pages/orderDetail/tabs/advertising/index.vue

<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>