新增，修改有权限的可以修改和pc端一样的字段

pages/clueDetail/tabs/clueInfo/index.vue

@@ -8,35 +8,99 @@
 				</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>
+						<view class="Info_item" v-for="(item, index) in caseInfoColumn" :key="item.prop">
+							<text class="label">{{ item.label }}</text>
 							<show-real-text :real="clueDetail.telephone" :type='params.type'
-								v-if="item.prop === 'telephone'"></show-real-text>
+								v-if="item.prop === 'telephone' && !hasEditPermission"></show-real-text>
+							<view class="phone_display value"
+								v-else-if="item.prop === 'telephone' && hasEditPermission && !phoneEditing"
+								@click="phoneEditing = true">{{ clueDetail.dsPhone || '点击编辑' }}</view>
+							<view class="input_wrap"
+								v-else-if="item.prop === 'telephone' && hasEditPermission && phoneEditing">
+								<input v-model="clueDetail.telephone" :focus="phoneEditing"
+									style="text-align: right; padding-right: 10px;" @blur="onPhoneBlur" />
+							</view>
+							<view class="input_wrap" v-else-if="item.type === 'date'">
+								<picker mode="date"
+									:value="clueDetail[item.prop] ? clueDetail[item.prop].slice(0, 10) : ''"
+									:disabled="!hasEditPermission" @change="onDateChange">
+									<view class="picker_value">{{ clueDetail[item.prop] ? clueDetail[item.prop].slice(0,
+										10) : '请选择日期' }}</view>
+								</picker>
+							</view>
+							<view class="input_wrap corporate_select" v-else-if="item.prop === 'genderTypeCode'">
+								<view class="corporate_select_inner">
+									<ld-select v-if="hasEditPermission" :list="sysUserSexDict" label-key="dictLabel"
+										value-key="dictValue" placeholder="请选择" v-model="clueDetail.genderTypeCode"
+										:border="false" @change="updateClueMainInfo" />
+									<text v-else class="value">{{ genderTypeCodeLabel }}</text>
+								</view>
+							</view>
+							<view class="input_wrap corporate_select" v-else-if="item.prop === 'corporateStatus'">
+								<view class="corporate_select_inner">
+									<ld-select v-if="hasEditPermission" :list="crmCorporateStatusDict"
+										label-key="dictLabel" value-key="dictValue" placeholder="请选择"
+										v-model="clueDetail.corporateStatus" :border="false"
+										@change="updateClueMainInfo" />
+									<text v-else class="value">{{ corporateStatusLabel }}</text>
+								</view>
+							</view>
 							<view class="input_wrap" v-else-if="item.input">
-								<input v-model="clueDetail[item.prop]" 
-									:disabled="!hasEditPermission"
-									style="text-align: right; padding-right: 10px;"
-									@blur="updateClueMainInfo" />
+								<input v-model="clueDetail[item.prop]" :disabled="!hasEditPermission"
+									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]}}
+								{{ clueDetail[item.prop] }}
 							</text>
-							<text v-else class="value">{{clueDetail[item.prop]}}</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]" 
-									:disabled="!hasEditPermission"
-									style="text-align: right; padding-right: 10px;"
-									@blur="updateClueMainInfo" />
+						<view class="Info_item" v-for="(item, index) in caseInfoColumn" :key="item.prop">
+							<text class="label">{{ item.label }}</text>
+							<view class="phone_display value"
+								v-if="item.prop === 'telephone' && hasEditPermission && !phoneEditing"
+								@click="phoneEditing = true">{{ clueDetail.dsPhone || '点击编辑' }}</view>
+							<view class="input_wrap"
+								v-else-if="item.prop === 'telephone' && hasEditPermission && phoneEditing">
+								<input v-model="clueDetail.telephone" :focus="phoneEditing"
+									style="text-align: right; padding-right: 10px;" @blur="onPhoneBlur" />
+							</view>
+							<text v-else-if="item.prop === 'telephone'" class="value">{{ clueDetail.dsPhone ||
+								clueDetail.telephone }}</text>
+							<view class="input_wrap" v-else-if="item.type === 'date'">
+								<picker mode="date"
+									:value="clueDetail[item.prop] ? clueDetail[item.prop].slice(0, 10) : ''"
+									:disabled="!hasEditPermission" @change="onDateChange">
+									<view class="picker_value">{{ clueDetail[item.prop] ? clueDetail[item.prop].slice(0,
+										10) : '请选择日期' }}</view>
+								</picker>
+							</view>
+							<view class="input_wrap corporate_select" v-else-if="item.prop === 'genderTypeCode'">
+								<view class="corporate_select_inner">
+									<ld-select v-if="hasEditPermission" :list="sysUserSexDict" label-key="dictLabel"
+										value-key="dictValue" placeholder="请选择" v-model="clueDetail.genderTypeCode"
+										:border="false" @change="updateClueMainInfo" />
+									<text v-else class="value">{{ genderTypeCodeLabel }}</text>
+								</view>
+							</view>
+							<view class="input_wrap corporate_select" v-else-if="item.prop === 'corporateStatus'">
+								<view class="corporate_select_inner">
+									<ld-select v-if="hasEditPermission" :list="crmCorporateStatusDict"
+										label-key="dictLabel" value-key="dictValue" placeholder="请选择"
+										v-model="clueDetail.corporateStatus" :border="false"
+										@change="updateClueMainInfo" />
+									<text v-else class="value">{{ corporateStatusLabel }}</text>
+								</view>
+							</view>
+							<view class="input_wrap" v-else-if="item.input">
+								<input v-model="clueDetail[item.prop]" :disabled="!hasEditPermission"
+									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]}}
+								{{ clueDetail[item.prop] }}
 							</text>
-							<text v-else class="value">{{clueDetail[item.prop]}}</text>
+							<text v-else class="value">{{ clueDetail[item.prop] }}</text>
 						</view>
 					</template>
 					<template v-if="parsedRemarkDict && Object.keys(parsedRemarkDict).length > 0">
@@ -52,223 +116,313 @@
 </template>
 
 <script>
-	import {
-		cloneDeep,
-		isEqual
-	} from 'lodash';
-	import { checkPermi } from '@/utils/permission';
+import {
+	cloneDeep,
+	isEqual
+} from 'lodash';
+import { checkPermi } from '@/utils/permission';
+import ldSelect from '@/components/ld-select/ld-select.vue';
 
-	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: '自动定位城市',
+const caseInfoColumn = [{
+	prop: 'name',
+	label: '姓名',
+	input: true
+},
+{
+	prop: 'telephone',
+	label: '电话',
+	input: true
+},
+{
+	prop: 'genderTypeCode',
+	label: '性别',
+	type: 'select',
+	dictType: 'sys_user_sex'
+},
+{
+	prop: 'age',
+	label: '年龄',
+	input: true
+},
+{
+	prop: 'weixin',
+	label: '微信',
+	input: true
+},
+{
+	prop: 'corporateStatus',
+	label: '企业号状态',
+	type: 'select',
+	dictType: 'crm_corporate_status'
+},
+{
+	prop: 'userDouyinId',
+	label: '抖音号',
+},
+{
+	prop: 'autoAddress',
+	label: '自动定位城市',
+},
+{
+	prop: 'telAddr',
+	label: '手机号归属地',
+},
+{
+	prop: 'createTime',
+	label: '线索创建时间',
+},
+{
+	prop: 'updateTime',
+	label: '最新修改时间',
+},
+{
+	prop: 'address',
+	label: '详细地址',
+	input: true
+},
+{
+	prop: 'remark',
+	label: '备注',
+	input: true
+},
+{
+	prop: 'qq',
+	label: 'QQ号',
+	input: true
+},
+{
+	prop: 'email',
+	label: '邮箱',
+	input: true
+},
+{
+	prop: 'date',
+	label: '日期',
+	type: 'date'
+},
+{
+	prop: 'manualAddressCode',
+	label: '手动填写地域',
+	input: true
+}
+]
+export default {
+	components: { ldSelect },
+	props: {
+		clueId: {
+			required: true
 		},
-		{
-			prop: 'telAddr',
-			label: '手机号归属地',
+		params: {
+			type: Object,
+			required: true
 		},
-		{
-			prop: 'createTime',
-			label: '线索创建时间',
+		clueDetailVo: {
+			type: Object,
+			required: true
 		},
-		{
-			prop: 'updateTime',
-			label: '最新修改时间',
-		},
-		{
-			prop: 'address',
-			label: '详细地址',
-		},
-		{
-			prop: 'remark',
-			label: '备注',
-		},
-		{
-			prop: 'qq',
-			label: 'QQ号',
+	},
+	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
+			}
 		},
-		{
-			prop: 'email',
-			label: '邮箱',
+		corporateStatusLabel() {
+			if (!this.clueDetail.corporateStatus || !this.crmCorporateStatusDict.length) return this.clueDetail.corporateStatus || ''
+			const item = this.crmCorporateStatusDict.find(d => d.dictValue === this.clueDetail.corporateStatus)
+			return item ? item.dictLabel : this.clueDetail.corporateStatus
 		},
-		{
-			prop: 'date',
-			label: '日期',
+		genderTypeCodeLabel() {
+			if (!this.clueDetail.genderTypeCode || !this.sysUserSexDict.length) return this.clueDetail.genderTypeCode || ''
+			const item = this.sysUserSexDict.find(d => d.dictValue === this.clueDetail.genderTypeCode)
+			return item ? item.dictLabel : this.clueDetail.genderTypeCode
 		},
-		{
-			prop: 'manualAddressCode',
-			label: '手动填写地域',
+		hasEditPermission() {
+			if (this.params?.type === '2') return true;
+			if (this.params?.type === '1') return checkPermi(['crm:PublicClue:detail:edit']);
+			return false;
 		}
-	]
-	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
-			      }
-			    },
-			hasEditPermission() {
-				if (this.params?.type === '2') return true;
-				if (this.params?.type === '1') return checkPermi(['crm:PublicClue:detail:edit']);
-				return false;
+	},
+	methods: {
+		onDateChange(e) {
+			const val = e.detail && e.detail.value;
+			if (val) {
+				this.$set(this.clueDetail, 'date', val);
+				this.updateClueMainInfo();
 			}
 		},
-		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);
+		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();
 			}
 		},
-		created() {
-			this.getData();
-		},
-		data() {
-			return {
-				cloneClueDetail: {},
-				clueDetail: {},
-
-				caseInfoColumn,
+		async getData() {
+			const {
+				data
+			} = await uni.$u.api.getClueMainInfoById({
+				id: this.clueId
+			});
+			if (data.telephone && data.telephone.length >= 7) {
+				const phone = data.telephone.substring(3, data.telephone.length - 4);
+				data.dsPhone = data.telephone.replace(phone, '****');
+			} else {
+				data.dsPhone = data.telephone || '';
 			}
+			this.phoneEditing = false;
+			this.clueDetail = data;
+			this.cloneClueDetail = cloneDeep(data);
+		},
+		onPhoneBlur() {
+			this.phoneEditing = false;
+			this.updateClueMainInfo();
+		}
+	},
+	data() {
+		return {
+			cloneClueDetail: {},
+			clueDetail: {},
+			phoneEditing: false,
+			crmCorporateStatusDict: [],
+			sysUserSexDict: [],
+			caseInfoColumn,
 		}
+	},
+	created() {
+		this.getData();
+		this.$getDicts('crm_corporate_status').then(res => {
+			this.crmCorporateStatusDict = res || [];
+		});
+		this.$getDicts('sys_user_sex').then(res => {
+			this.sysUserSexDict = res || [];
+		});
 	}
+}
 </script>
 
 <style lang="scss" scoped>
-	.caseInfo_wrap {
-		min-height: 400px;
+.caseInfo_wrap {
+	min-height: 400px;
 
-		.caseInfo_title {
+	.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;
-			align-items: center;
-			height: 80rpx;
-			background: #f4f4f6;
-			padding-left: 40rpx;
 
-			image {
-				width: 24rpx;
-				height: 24rpx;
-				margin-right: 10rpx;
+			.tab_item {
+				margin-left: 30rpx;
 			}
+		}
+	}
 
-			.info_text {
-				font-size: 24rpx;
-				color: #202020;
+	.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;
 			}
 
-			.tabs_wrap {
-				display: flex;
+			.input_wrap {
+				border-bottom: 1px solid #ddd;
+			}
 
-				.tab_item {
-					margin-left: 30rpx;
-				}
+			.picker_value {
+				text-align: right;
+				padding-right: 10px;
+				font-size: 26rpx;
+				color: #202020;
 			}
-		}
 
-		.caseInfo_main_wrap {
-			.caseCards_list_wrap {
-				background: #ebf6ff;
-				margin-bottom: 10rpx;
-				margin-left: 10rpx;
-				margin-right: 10rpx;
+			.phone_display {
+				text-align: right;
+				font-size: 26rpx;
+				color: #202020;
 			}
 
-			.Info_item {
-				padding: 18rpx 40rpx;
+			.corporate_select {
+				flex: 1;
 				display: flex;
-				justify-content: space-between;
+				justify-content: flex-end;
+				min-width: 0;
+				border-bottom: none;
+			}
 
-				.label {
-					color: #999999;
-					font-size: 26rpx;
-				}
+			.corporate_select_inner {
+				display: inline-block;
+				border-bottom: 1px solid #ddd;
+				min-width: 120rpx;
+			}
 
-				.input_wrap {
-					border-bottom: 1px solid #ddd;
-				}
+			.corporate_select .value {
+				text-align: right;
+			}
 
-				.value {
-					font-size: 26rpx;
-					color: #202020;
-					border-radius: 100rpx;
-				}
+			::v-deep .corporate_select .main,
+			::v-deep .corporate_select .ldSelectInput {
+				justify-content: flex-end;
+				text-align: right;
+			}
 
-				.highlight {
-					font-size: 22rpx;
-					font-weight: 900;
-					padding: 6rpx 20rpx;
-				}
+			::v-deep .corporate_select input {
+				text-align: right !important;
+			}
+
+			.value {
+				font-size: 26rpx;
+				color: #202020;
+				border-radius: 100rpx;
 			}
-		}
 
+			.highlight {
+				font-size: 22rpx;
+				font-weight: 900;
+				padding: 6rpx 20rpx;
+			}
+		}
 	}
+
+}
 </style>