baiyuApp/pages_im/pages/conversation/chating/components/MessageItem/CustomMessageRender.vue

<template>
	<view class="custom" @click="handleCustomerItem">
		<template v-if="isCustom === 'order'">
			<view class="order-item">
				<view class="title">问诊订单</view>
				<view class="text">患者:{{ extension.patientName }} {{ extension.sex }} {{ extension.mobile }}</view>
				<view class="text">患病时间:{{ extension.duration }}</view>
				<view class="text">就诊情况:{{ extension.isVisit }}</view>
				<view class="text">病情描述:{{ extension.title }}</view>
			</view>
		</template>

		<template v-else-if="isCustom === 'prescribe'">
			<view class="prescribe-item">
				<view class="title">电子处方单</view>
				<view class="text">诊断:{{ extension.diagnose }}</view>
				<view class="btns">
					<view class="btn">查看处方</view>
				</view>
			</view>
		</template>

		<template v-else-if="isCustom === 'report'">
			<view class="report-item">
				<view class="title">问诊报告单</view>
				<view class="btns">
					<view class="btn">查看报告单</view>
				</view>
			</view>
		</template>

		<template v-else-if="isCustom === 'follow'">
			<view class="prescribe-item">
				<view class="title">随访单</view>
				<view class="btns">
					<view class="btn">查看随访</view>
				</view>
			</view>
		</template>

		<template v-else-if="isCustom === 'drugReport'">
			<view class="report-item">
				<view class="title">用药报告单</view>
				<view class="btns">
					<view class="btn">查看报告单</view>
				</view>
			</view>
		</template>

		<template v-else-if="isCustom === 'package'">
			<view class="package-item">
				<view class="title">{{extension.title}}</view>
				<view class="cover" v-if="!!extension.image">
					<image :src="extension.image" mode="aspectFill"></image>
				</view>
				<view v-else class="btns">
					<view class="btn">查看疗法</view>
				</view>
			</view>
		</template>


		<template v-else-if="isCustom === 'couponPackage'">
			<view class="package-item">
				<view class="title">{{extension.title}}</view>
				<view class="stitle"><i class="psub">￥</i> <i class="psub price"> {{ extension.price.toFixed(2) }} </i>
					{{ "(满"+extension.minPrice.toFixed(2)+"元可用)" }}
				</view>
				<view class="stitle stitle1">{{ extension.limitTime+"到期 不可叠加使用"}}</view>
				<view class="cover" v-if="!!extension.image">
					<image :src="extension.image" mode="aspectFill"></image>
				</view>
				<view v-else class="btns">
					<view class="btn">查看私域疗法券</view>
				</view>
			</view>
		</template>

		<template v-else-if="isCustom === 'inquirySelect'">
			<view class="package-item">
				<view class="title">{{extension.title}}</view>
				<view class="stitle">医疗专家团队远程咨询</view>
				<view class="cover" v-if="!!extension.image">
					<image :src="extension.image" mode="aspectFill"></image>
				</view>
				<view v-else class="btns">
					<view class="btn">查看会诊</view>
				</view>
			</view>
		</template>

		<template v-else-if="isCustom === 'startInquiry'">
			<view class="content content-in">
				<span>{{ extension.title }}</span>
			</view>
		</template>

		<template v-else-if="isCustom === 'finishInquiry'">
			<view class="content content-ou">
				<span>{{ extension.title }}</span>
			</view>
		</template>

		<template v-else-if="isCustom === 'course'">
			<view class="box">
				<view class="list-item">
					<view class="list-con border-line">
						<view class="list-itemtxt">
							<!-- <text class="list-title textOne">{{extension.courseName}}</text> -->
							<text class="list-desc textTwo">{{extension.title}}</text>
						</view>
						<view class="list-cover">
							<image :src="extension.courseUrl" mode="aspectFill"></image>
						</view>
					</view>

					<!-- <view class="list-footer">
						<view style="flex: 1;overflow: hidden;">
							<image :src="extension.imageUrl" mode="aspectFill"></image>
							<text class="list-time textOne">{{extension.qwUserName}}</text>
						</view>
						<text class="list-time">过期时间：{{extension.updateTime}}</text>
					</view> -->

				</view>
			</view>
		</template>

		<template v-else-if="isCustom === 'live'">
			<view class="box">
				<view class="liveList">
					<view class="list-item">
						<image :src="liveDefUrl" mode="aspectFill"></image>
						<view class="info">
							<text>{{extension.liveName}}</text>
						</view>
						<view class="livebox">直播</view>
					</view>
				</view>
			</view>
		</template>

		<template v-else-if="isCustom === 'luckyBag'">
			<view class="box">
				<view class="luckyBagBox">
					<view class="u-f">
						<view class="u-f-ajc es-mr-20">
							<image class="es-icon-56" src="/pages_im/static/images/luckyBag/new_lucky_bag_icon.png"
								mode=""></image>
						</view>
						<view class="es-fs-32 es-fw-500 es-c-white">
							福袋
						</view>
					</view>
					<view class="es-mt-16 luckyBagBox-line"></view>
					<view class="es-mt-16 es-fs-20 es-c-white">
						专属福袋
					</view>
				</view>
			</view>
		</template>

		<template v-else>
			<view class="content"></view>
		</template>

		<CollectLuckyBag :luckyBagExtension="luckyBagExtension" @close="collectLuckyBagShow=false"
			:show="collectLuckyBagShow" />
	</view>
</template>

<script>
	import {
		getLuckyBagInfo
	} from '@/pages_im/api/luckyBag.js'
	import CollectLuckyBag from '@/pages_im/pages/conversation/chating/components/ChatingFooter/CollectLuckyBag.vue'
	import MyAvatar from '../../../../../components/MyAvatar/index.vue';

	export default {
		name: 'CustomMessageRender',
		components: {
			MyAvatar,
			CollectLuckyBag
		},
		props: {
			message: {
				type: Object,
				default: () => ({
					customElem: {
						data: '{}' // 默认空JSON
					},
					cardElem: {
						userID: ''
					}
				})
			}
		},
		data() {
			return {
				isCustom: {}, // 明确初始化null
				payload: {}, // 与服务端数据结构对齐
				extension: {}, // 保持响应式基础结构
				liveDefUrl: "https://fbylive.obs.cn-southwest-2.myhuaweicloud.com/fs/20250920/1758354962430.png",
				collectLuckyBagShow: false,
				luckyBagExtension: '',
			};
		},
		mounted() {
			this.safeParseData();
		},
		methods: {
			safeParseData() {
				try {

					const rawData = this.message?.customElem?.data || '{}';
					const parsed = JSON.parse(rawData);

					//结构化赋值
					this.payload = parsed.payload || {};
					this.extension = this.payload.extension || {};
					this.isCustom = this.payload.data ?? null;

				} catch (e) {
					console.error('[消息解析失败]', e);
					this.$emit('parse-error', {
						raw: this.message,
						error: e
					});
				}
			},
			async handleCustomerItem() {
				const rawData = this.message?.customElem.data;
				let item = JSON.parse(rawData);
				console.log("handleCustomerItem:::");
				console.log(item);
				if (item.payload.data == 'order') {
					uni.navigateTo({
						url: '/pages/store/inquiryOrderDetails?orderId=' + item.payload.description
					});
				} else if (item.payload.data == 'prescribe') {
					var prescribe = item.payload.extension;
					uni.navigateTo({
						url: '/pages/store/prescribeDetails?prescribeId=' + prescribe.prescribeId
					});
				} else if (item.payload.data == 'package') {
					var packageItem = item.payload.extension;
					let companyId = packageItem.companyId;
					let companyUserId = packageItem.companyUserId;
					let nUrl = "/pages/store/packageDetails?packageId=" + packageItem.packageId + "&companyId=" +
						companyId + "&companyUserId=" + companyUserId;
					uni.navigateTo({
						url: nUrl
					});
				} else if (item.payload.data == 'couponPackage') {
					console.log("qxj item", item);
					var cItem = item.payload.extension;
					let companyId = cItem.companyId;
					let companyUserId = cItem.companyUserId;
					let nUrl = '/pages/company/couponDetails?couponId=' + cItem.couponId;
					if (this.$companyUserIsLogin()) {
						nUrl += "&isShare=1"
					}
					uni.navigateTo({
						url: nUrl
					});
				} else if (item.payload.data == 'inquirySelect') {
					var cItem = item.payload.extension;
					let companyId = cItem.companyId;
					let companyUserId = cItem.companyUserId;
					let type = cItem.type;
					if (type == 3) {
						let nUrl = "/pages/store/inquiryForm2_2?inquiryType=2&orderType=2&inquirySubType=" + type +
							"&companyId=" + companyId + "&companyUserId=" + companyUserId;
						if (this.$companyUserIsLogin()) {
							nUrl += "&isShare=1"
						}
						uni.navigateTo({
							url: nUrl
						});
					} else if (type == 4) {

					} else {
						let nUrl = "/pages/store/inquiryForm2_1?inquiryType=2&orderType=2&inquirySubType=" + type +
							"&companyId=" + companyId + "&companyUserId=" + companyUserId;
						if (this.$companyUserIsLogin()) {
							nUrl += "&isShare=1"
						}
						uni.navigateTo({
							url: nUrl
						});
					}
				} else if (item.payload.data == 'follow') {
					var follow = item.payload.extension;
					if (follow.writeStatus == 0) {
						uni.navigateTo({
							url: '/pages/user/doFollow?followId=' + follow.followId
						});
					} else if (follow.writeStatus == 1) {
						uni.navigateTo({
							url: '/pages/user/followDetails?followId=' + follow.followId
						});
					}
				} else if (item.payload.data == 'report') {
					uni.navigateTo({
						url: '/pages/store/inquiryOrderReport?orderId=' + item.payload.description
					});
				} else if (item.payload.data == 'drugReport') {
					// var report=JSON.parse(item.payload.extension);
					uni.navigateTo({
						url: '/pages/user/drugReportDetails?reportId=' + item.payload.description
					});

				} else if (item.payload.data == 'course') {
					uni.removeStorageSync('showCourseBox')
					console.log("qxj extension", item);
					let couseItem = item.payload.extension;
					if (uni.getStorageSync('companyUserId')) {
						const queryString = couseItem.appRealLink.split('?')[1] || '';
						const courseParamMatch = queryString.match(/course=({[^&]+})/);
						if (!courseParamMatch) {
							uni.showToast({
								icon: 'none',
								title: '看课链接不存在'
							})
						}
						const courseJson = decodeURIComponent(courseParamMatch[1]);
						const courseData = JSON.parse(courseJson);
						return uni.navigateTo({
							url: `/pages_managedata/coursedetail?videoId=${courseData.videoId}&id=${courseData.id}&periodId=${courseData.periodId}`
						});
					}
					if (couseItem.appRealLink) {
						if (/^\//.test(couseItem.appRealLink)) {
							uni.navigateTo({
								url: couseItem.appRealLink,
							})
						} else {
							uni.navigateTo({
								url: "/pages_im/pages/common/webH5/index?url=" + couseItem.appRealLink
							});
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: "暂无看课链接",
						});
					}
				} else if (item.payload.data == 'live') {
					var liveItem = item.payload.extension;
					let userInfo = JSON.parse(uni.getStorageSync("userInfo"));
					let timeSpan = (new Date()).getTime();
					let liveUrl =
						`http://h5.fbylive.com/videoH5/pages/home/living?liveId=${liveItem.liveId}&userId=${userInfo.userId}&t=${timeSpan}`;
					console.log("qxj liveUrl", liveUrl);
					//let liveUrl=`http://localhost:8081/videoH5/pages/home/living?liveId=${liveItem.liveId}&name=直播间`
					if (liveUrl) {
						uni.navigateTo({
							url: "/pages_im/pages/common/webH5/index?url=" + liveUrl + "&name=直播间"
						});
					} else {
						uni.showToast({
							icon: 'none',
							title: "暂无直播间链接",
						});
					}
				} else if (item.payload.data == "luckyBag") {
					const res = await getLuckyBagInfo({
						recordId: item.payload.extension.recordId
					})
					if (res.code == 200) {
						let msg = ''
						if (res.data.collectType == 0) {
							let companyUserInfo = uni.getStorageSync('companyUserInfo')
							if (companyUserInfo) {
								return uni.showToast({
									icon: 'none',
									title: '福袋还未领取'
								})
							}
							this.luckyBagExtension = item.payload.extension
							this.collectLuckyBagShow = true
							return
						} else if (res.data.collectType == 1) {
							msg = '福袋已领取'
						} else if (res.data.collectType == 2) {
							msg = '福袋已失效'
						}
						uni.showToast({
							icon: 'none',
							title: msg
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	@mixin u-flex($flexD, $alignI, $justifyC) {
		display: flex;
		flex-direction: $flexD;
		align-items: $alignI;
		justify-content: $justifyC;
	}

	.card_message_container {
		@include colBox(false);
		background-color: #fff;
		box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
		border-radius: 12rpx;
		width: 444rpx;
		border: 1px solid #ececec;

		.card_info {
			@include vCenterBox();
			padding: 24rpx 32rpx;
			border-bottom: 1px solid #e9e9e9;

			.card_name {
				@include ellipsisWithLine(1);
				margin-left: 24rpx;
			}
		}

		.card_desc {
			padding: 8rpx 0 8rpx 42rpx;
			color: #999;
		}
	}


	.custom {
		padding: 0 0 12px 0;

		.order-item {
			width: 400rpx;
			padding: 15rpx;
			padding: 15rpx;
			border: 1rpx solid #ececec;
			box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.05);
			background-color: #fff;
			border-radius: 15rpx;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: flex-start;

			.title {
				font-size: 16px;
				font-family: PingFang SC;
				font-weight: bold;
				color: #111111;
			}

			.text {
				font-size: 12px;
				font-family: PingFang SC;
				color: #9a9a9c;
				padding: 6rpx 0;
			}
		}

		.prescribe-item {
			width: 400rpx;
			padding: 15rpx;
			border: 1rpx solid #ececec;
			box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.05);
			background-color: #fff;
			border-radius: 15rpx;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: flex-start;

			.title {
				font-size: 16px;
				font-family: PingFang SC;
				font-weight: bold;
				color: #111111;
			}

			.text {
				margin-top: 10rpx;
				font-size: 12px;
				font-family: PingFang SC;
				color: #9a9a9c;
			}

			.btns {
				padding: 15rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;

				.btn {
					border-radius: 30rpx;
					padding: 15rpx 30rpx;
					border: 1rpx solid #ececec;
					font-family: PingFang SC;
					color: #333333;
				}
			}
		}

		.report-item {
			width: 400rpx;
			padding: 15rpx;
			border: 1rpx solid #ececec;
			box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.05);
			background-color: #fff;
			border-radius: 15rpx;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: flex-start;

			.title {
				font-size: 16px;
				font-family: PingFang SC;
				font-weight: bold;
				color: #111111;
			}

			.text {
				margin-top: 10rpx;
				font-size: 12px;
				font-family: PingFang SC;
				color: #9a9a9c;
			}

			.btns {
				padding: 15rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;

				.btn {
					border-radius: 30rpx;
					padding: 15rpx 30rpx;
					border: 1rpx solid #ececec;
					font-family: PingFang SC;
					color: #333333;
				}
			}
		}

		.package-item {
			width: 450rpx;
			padding: 15rpx;
			border: 1rpx solid #ececec;
			box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.05);
			background-color: #fff;
			border-radius: 15rpx;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: flex-start;

			.title {
				font-size: 16px;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333;
				margin-bottom: 10rpx;
			}

			.stitle {
				font-size: 15px;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666;
				margin-bottom: 10rpx;
			}

			.psub {
				color: #e41f19;
				font-size: 15px;
				font-style: normal;
			}

			.price {
				font-size: 18px;
				font-style: normal;
				font-weight: bold;
			}

			.stitle1 {
				font-size: 14px;
			}

			.cover {
				width: calc(100%);
				height: 400rpx;
				border-radius: 16rpx;
				box-sizing: border-box;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

	}


	.content {
		padding: 10px;
		background: #f0f0f0;

		&-in {
			border-radius: 0px 10px 10px 10px;
		}

		&-out {

			border-radius: 10px 0px 10px 10px;
		}
	}


	.list {

		&-item {
			width: 450rpx;
			padding: 0rpx;
			border: 1rpx solid #ececec;
			box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.05);
			background-color: #fff;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			box-sizing: border-box;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 15px;
			color: #333333;
			line-height: 36rpx;

			image {
				flex-shrink: 0;
				width: 150rpx;
				height: 120rpx;
				margin-left: 16rpx;
				background: #F5F6F6;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				overflow: hidden;
			}
		}

		&-con {
			width: 100%;
			padding: 24rpx;
			box-sizing: border-box;
			@include u-flex(column, flex-start, space-between);
		}

		&-cover {
			width: 100%;
			margin-top: 20rpx;
			@include u-flex(row, flex-start, flex-end);
		}


		&-itemtxt {
			flex: 1;
			overflow: hidden;
			word-break: break-all;
			display: block;
		}

		&-title {
			word-break: break-all;
			display: block;
		}

		&-desc {
			margin-top: 0rpx;
			font-size: 18px;
			color: #333;
			line-height: 44rpx;
		}

		&-time {
			font-size: 11px;
			color: #999999;
		}

		&-footer {
			padding: 20rpx 24rpx;
			box-sizing: border-box;
			@include u-flex(row, center, space-between);
			position: relative;

			view {
				@include u-flex(row, center, flex-start);
			}

			image {
				height: 50rpx;
				width: 50rpx;
				border-radius: 50%;
				margin: 0 10rpx 0 0;
			}
		}
	}


	.liveList {

		// display: flex;
		// justify-content: space-between;
		// flex-wrap: wrap;
		.list-item {
			border-radius: 16rpx;
			width: 300rpx;
			height: 500rpx;
			background-color: #0d0d0d;
			margin-bottom: 24rpx;
			overflow: hidden;
			position: relative;

			.livebox {
				background: #ff5500;
				border-radius: 20rpx;
				font-size: 26rpx;
				color: #fff;
				text-align: center;
				position: absolute;
				left: 18rpx;
				top: 18rpx;
				padding: 8rpx 14rpx;
			}

			image {
				width: 100%;
				height: 100%;
				margin-left: 0;
			}

			video {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

			.info {
				position: absolute;
				left: 20rpx;
				bottom: 14rpx;
				right: 20rpx;
				color: #ffffff;
				display: flex;
				align-items: center;

				.live-badge {
					background-color: #e74c3c;
					padding: 4rpx 12rpx;
					border-radius: 8rpx;
					font-size: 20rpx;
					margin-right: 12rpx;
				}

				.record-badge {
					background-color: #3498db;
					padding: 4rpx 12rpx;
					border-radius: 8rpx;
					font-size: 20rpx;
					margin-right: 12rpx;
				}
			}

			.error-tip {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				color: #fff;
				background-color: rgba(0, 0, 0, 0.7);
				padding: 16rpx 24rpx;
				border-radius: 8rpx;
				font-size: 24rpx;
			}
		}

		// 使列表项均匀分布
		.list-item:nth-child(2n) {
			margin-right: 0;
		}
	}

	.luckyBagBox {
		width: 384rpx;
		height: 160rpx;
		border-radius: 8rpx;
		padding: 24rpx;
		background: linear-gradient(180deg, #FD303D 0%, #FEB6A7 99.99%);

		.luckyBagBox-line {
			width: 100%;
			height: 1rpx;
			background: rgba(255, 255, 255, 0.2);
		}
	}
</style>