heshanApp/pages_im/pages/conversation/chating1/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>
			</view>
		</template>
		
		<template v-else-if="isCustom === 'live'">
			<view class="box">
				<view class="liveList">
					<view class="list-item">
						<image  :src="extension.appRealLink" 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" :class="isSender ? 'image_right' : 'image_left'">
					<view class="u-f es-ac">
						<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>
		
	</view>
</template>

<script>
import MyAvatar from '../../../../../components/MyAvatar/index.vue';

export default {
  name: 'CustomMessageRender',
  components: { MyAvatar },
  props: {
    message: {
      type: Object,
      default: () => ({
			customElem: {
			  data: '{}' // 默认空JSON
			},
			cardElem: {
			  userID: ''
			}
      })
    },
	isSender: {
		type: Boolean,
		default: false
	}
  },
  data() {
    return {
		  isCustom: null,  // 明确初始化null
		  payload: {},   // 与服务端数据结构对齐
		  extension: {}    // 保持响应式基础结构
    };
  },
  computed: {
  	customDataStr() {
  		return this.message?.customElem?.data;
  	}
  },
  watch: {
  	customDataStr: {
  		handler() {
  			this.safeParseData();
  		},
  		immediate: true
  	},
  	message: {
  		handler: function(newVal, oldVal) {
  			this.safeParseData();
  		},
  		immediate: true,
  		deep: true
  	}
  },
  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
			});
      }
    },

    handleCustomerItem() {
      const rawData = this.message?.customElem.data;
      let item = JSON.parse(rawData);
      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+"&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+"&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+"&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') {
		    console.log("qxj extension:",item);
			var couseItem=item.payload.extension;
			if(couseItem.appRealLink) {
				uni.navigateTo({
					url: couseItem.appRealLink
				});
			}else {
				uni.showToast({
					icon:'none',
					title: "暂无看课链接",
				});
			}
		} 
	  else if (item.payload.data == "luckyBag") {
			console.log("qxj extension:",item);
			let luckyBagItem=item.payload.extension;
			if(luckyBagItem.appRealLink) {
				let str = luckyBagItem.appRealLink.split('?link=')[1]
				uni.navigateTo({
					url: '/pages/courseAnswer/luckyBag?link='+str
				});
			}else {
				uni.showToast({
					icon:'none',
					title: "福袋信息为空",
				});
			}
		}
	  else if (item.payload.data == 'live') {
			var liveItem=item.payload.extension;
			console.log("qxj liveItem:",JSON.stringify(liveItem));
			let url='/pages_live/index?liveId=' + liveItem.liveId;
			if(liveItem.companyId){
				url += "&companyId="+liveItem.companyId;
			}
			if(liveItem.companyUserId){
				url += "&companyUserId="+liveItem.companyUserId;
			}
			console.log("qxj url:"+url);
			uni.navigateTo({
				url: url
			}); 
			return;
			if(couseItem.appRealLink) {
				uni.navigateTo({
					url: couseItem.appRealLink
				});
			}else {
				uni.showToast({
					icon:'none',
					title: "暂无看课链接",
				});
			}
		}
		
    }
  }
};
</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 {
	
	.order-item {
		width: 450rpx;
		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: normal;
			color: #111111;
		}
		.text {
			font-size: 12px;
			font-family: PingFang SC;
			color: #9a9a9c;
			padding:6rpx 0;
		}
	}
	.prescribe-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: normal;
			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: 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: normal;
			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;
				font-size: 16px;
			}
		}
	}
 
    .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;
			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: 0rpx;
		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: 16px;
		color: #333;
		line-height: 22px;
	}

	&-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 {
	.list-item {
		border-radius: 4rpx;
		width: 300rpx;
		height: 500rpx;
		background-color: #ececec;
		margin-bottom: 24rpx;
		overflow: hidden;
		position: relative;
		.livebox{
			background: #ff5500;
			border-radius: 8rpx;
			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 24rpx 20rpx 24rpx;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	.luckyBagBox-line {
		width: 100%;
		height: 1rpx;
		background: rgba(255, 255, 255,0.2);
	}
}
.image_right {
	background-image: url('/pages_im/static/images/luckyBag/lucky_bag_new_bg_right.png');
}
.image_left {
	background-image: url('/pages_im/static/images/luckyBag/lucky_bag_new_bg_left.png');
}
</style>