rtliveCompany/pages_speaker/lecturerDetail.vue

<template>
	<view class="container">
		<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
		<view class="top">
			<image class="return" @click="goBack" src="/static/image/back_white.png"></image>
			<text>讲者信息</text>
			<view class="top-right">
				<image class="icon" src="/static/image/icon_more.png"></image>
				<image class="icon" src="/static/image/icon_scan.png"></image>
			</view>
		</view>
		<scroll-view class="content" scroll-y>
			<!-- 个人基本信息卡片 -->
			<view class="profile-card">
				<view class="profile-info">
					<view class="profile-main">
						<view class="name-section">
							<text class="name">{{ lecturerInfo.name }}</text>
							<text class="identity">{{ lecturerInfo.identity }}</text>
						</view>
						<text class="phone">{{ lecturerInfo.phone }}</text>
					</view>
					<image class="avatar" :src="lecturerInfo.avatar"></image>
				</view>
			</view>

			<!-- 基础信息 -->
			<view class="info-section">
				<view class="section-header">
					<view class="section-indicator"></view>
					<text class="section-title">基础信息</text>
				</view>
				<view class="info-list">
					<view class="info-item">
						<text class="info-label">身份证号:</text>
						<text class="info-value">{{ lecturerInfo.idCard }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">公司:</text>
						<text class="info-value">{{ lecturerInfo.company }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">机构名称:</text>
						<text class="info-value">{{ lecturerInfo.institution }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">注册时间:</text>
						<text class="info-value">{{ lecturerInfo.registerTime }}</text>
					</view>
				</view>
			</view>

			<!-- 执业信息 -->
			<view class="info-section">
				<view class="section-header">
					<view class="section-indicator"></view>
					<text class="section-title">执业信息</text>
				</view>
				<view class="info-list">
					<view class="info-item">
						<text class="info-label">地址:</text>
						<text class="info-value">{{ lecturerInfo.address }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">科室:</text>
						<text class="info-value">{{ lecturerInfo.department }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">职称:</text>
						<text class="info-value">{{ lecturerInfo.title }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">第三方业务编码:</text>
						<text class="info-value">{{ lecturerInfo.thirdPartyCode }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">研究者编码:</text>
						<text class="info-value">{{ lecturerInfo.researcherCode }}</text>
					</view>
				</view>
			</view>

			<!-- 资质信息 -->
			<view class="info-section">
				<view class="section-header">
					<view class="section-indicator"></view>
					<text class="section-title">资质信息</text>
				</view>
				<view class="qualification-list">
					<view class="qualification-item">
						<text class="qualification-label">医师执业证</text>
						<view class="image-grid">
							<image class="qualification-image" v-for="(img, index) in lecturerInfo.qualifications.medicalLicense" :key="index" :src="img"></image>
						</view>
					</view>
					<view class="qualification-item">
						<text class="qualification-label">医师职称证/工牌</text>
						<view class="image-grid">
							<image class="qualification-image" v-for="(img, index) in lecturerInfo.qualifications.titleLicense" :key="index" :src="img"></image>
						</view>
					</view>
				</view>
			</view>

			<!-- 签约与结算 -->
			<view class="info-section">
				<view class="section-header">
					<view class="section-indicator"></view>
					<text class="section-title">签约与结算</text>
				</view>
				<view class="info-list">
					<view class="info-item">
						<text class="info-label">签约协议状态:</text>
						<text class="info-value">{{ lecturerInfo.contractStatus }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">银行卡号:</text>
						<text class="info-value">{{ lecturerInfo.bankCard }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">开户银行:</text>
						<text class="info-value">{{ lecturerInfo.bankName }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">支行信息:</text>
						<text class="info-value">{{ lecturerInfo.branchBank }}</text>
					</view>
				</view>
			</view>

			<!-- 安全信息 -->
			<view class="info-section">
				<view class="section-header">
					<view class="section-indicator"></view>
					<text class="section-title">安全信息</text>
				</view>
				<view class="info-list">
					<view class="info-item">
						<text class="info-label">密码:</text>
						<text class="info-value password">{{ maskedPassword }}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import { getStoreActivityDetails } from '@/api/speaker'
	export default {
		data() {
			return {
				// 仅获取微信小程序状态栏高度，无多余逻辑
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				id: '',
				// 讲者信息
				lecturerInfo: {
					name: '',
					identity: '',
					phone: '',
					avatar: '/static/image/doctor_avatar.png',
					idCard: '',
					company: '',
					institution: '',
					registerTime: '',
					address: '',
					department: '',
					title: '',
					thirdPartyCode: '',
					researcherCode: '',
					contractStatus: '',
					bankCard: '',
					bankName: '',
					branchBank: '',
					password: '******',
					qualifications: {
						medicalLicense: [],
						titleLicense: []
					}
				}
			}
		},
		onLoad(options) {
			if (options.id) {
				this.id = options.id
				this.loadData()
			}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			async loadData() {
				try {
					uni.showLoading({
						title: '加载中...'
					})
					// 调用getStoreActivityDetails接口，传递id参数
					const res = await getStoreActivityDetails(this.id)
					uni.hideLoading()
					if (res.code === 200 && res.data) {
						// 这里可以根据接口返回的数据结构更新lecturerInfo
						this.lecturerInfo = res.data
						console.log('获取讲师信息成功', res.data)
					} else {
						uni.showToast({
							icon: 'none',
							title: '获取讲师信息失败'
						})
					}
				} catch (e) {
					uni.hideLoading()
					console.error('加载数据失败', e)
					uni.showToast({
						icon: 'none',
						title: '加载数据失败'
					})
				}
			}
		},
		computed: {
			maskedPassword() {
				if (!this.lecturerInfo.password) return '';
				return '*'.repeat(this.lecturerInfo.password.length);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background: #f5f5f5;
		display: flex;
		flex-direction: column;
		height: auto;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			width: 100%;
			height: 300rpx;
			background: linear-gradient(180deg, rgba(56, 139, 255, 0.79) 0%, rgba(56, 139, 255, 0) 100%);
		}
	}

	.top {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 88rpx;
		position: relative;
		font-weight: 600;
		font-size: 36rpx;
		color: #FFFFFF;

		.return {
			position: absolute;
			left: 32rpx;
			width: 40rpx;
			height: 40rpx;
		}

		.top-right {
			position: absolute;
			right: 32rpx;
			display: flex;
			align-items: center;

			.icon {
				width: 40rpx;
				height: 40rpx;
				margin-left: 32rpx;
			}
		}
	}

	.content {
		flex: 1;
		padding: 24rpx;
		box-sizing: border-box;
		padding-bottom: 100rpx;
	}

	/* 个人基本信息卡片 */
	.profile-card {
		background: #fff;
		border-radius: 16rpx;
		padding: 32rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);

		.profile-info {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.profile-main {
				flex: 1;

				.name-section {
					display: flex;
					align-items: center;
					margin-bottom: 16rpx;

					.name {
						font-size: 36rpx;
						font-weight: 600;
						color: #333333;
						margin-right: 24rpx;
					}

					.identity {
						font-size: 24rpx;
						color: #666666;
						padding: 4rpx 12rpx;
						background: #F7F8FA;
						border-radius: 8rpx;
					}
				}

				.phone {
					font-size: 28rpx;
					color: #666666;
				}
			}

			.avatar {
				width: 96rpx;
				height: 96rpx;
				border-radius: 50%;
			}
		}
	}

	/* 通用信息区块样式 */
	.info-section {
		background: #fff;
		border-radius: 16rpx;
		padding: 24rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);

		.section-header {
			display: flex;
			align-items: center;
			margin-bottom: 24rpx;

			.section-indicator {
				width: 6rpx;
				height: 32rpx;
				background: #388BFF;
				border-radius: 3rpx;
				margin-right: 16rpx;
			}

			.section-title {
				font-weight: 600;
				font-size: 32rpx;
				color: #333333;
			}
		}

		.info-list {
			.info-item {
				display: flex;
				margin-bottom: 24rpx;

				&:last-child {
					margin-bottom: 0;
				}

				.info-label {
					width: 30%;
					font-size: 28rpx;
					color: #666;
					flex-shrink: 0;
				}

				.info-value {
					flex: 1;
					text-align: end;
					font-size: 28rpx;
					color: #333;

					&.password {
						font-family: monospace;
					}
				}
			}
		}

		/* 资质信息样式 */
		.qualification-list {
			.qualification-item {
				margin-bottom: 32rpx;

				&:last-child {
					margin-bottom: 0;
				}

				.qualification-label {
					display: block;
					font-size: 28rpx;
					color: #666666;
					margin-bottom: 16rpx;
				}

				.image-grid {
					display: flex;
					flex-wrap: wrap;
					gap: 16rpx;

					.qualification-image {
						width: calc((100% - 32rpx) / 2);
						height: 240rpx;
						border-radius: 8rpx;
						object-fit: cover;
					}
				}
			}
		}
	}

	/* 响应式调整 */
	@media (max-width: 750rpx) {
		.profile-card {
			padding: 24rpx;
		}

		.info-section {
			padding: 20rpx;
		}

		.qualification-image {
			height: 200rpx !important;
		}
	}
</style>