crm-app-vue3/pages/clueDetail/tabs/clueInfo/index.vue

<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>
					<template v-if="parsedRemarkDict && Object.keys(parsedRemarkDict).length > 0">
						<view class="Info_item" v-for="(value, key) in parsedRemarkDict" :key="key">
							<text class="label">{{ key }}</text>
							<text class="value">{{ value }}</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
			},
			clueDetailVo : {
				type : Object,
				required : true
			},
		},
		computed : {
			parsedRemarkDict() {
			      try {
			        const remarkDict = this.clueDetailVo.remarkDict
			        if (!remarkDict) {
			          return null
			        }
			        if (typeof remarkDict === 'string') {
			          const parsed = JSON.parse(remarkDict)
			          return typeof parsed === 'object' && parsed !== null ? parsed : null
			        }
			        return typeof remarkDict === 'object' && remarkDict !== null ? remarkDict : null
			      } catch (error) {
			        console.error('解析remarkDict失败:', error)
			        return null
			      }
			    }
		},
		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>