yijianbao_user_uniapp/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 === 'startInquiry'">
			<span class="content content-in">{{ extension.title }}</span>
		</template>
		<template v-else-if="isCustom === 'finishInquiry'">
			<span class="content  content-out">{{ extension.title }}</span>
		</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>
			<span class="content"></span>
		</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: ''
        }
      })
    }
  },
  data() {
    return {
		  isCustom: {},  // 明确初始化null
		  payload: {},   // 与服务端数据结构对齐
		  extension: {}    // 保持响应式基础结构
    };
  },
  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() {
	
	   console.log(this.message.customElem.data);
       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_order/inquiryOrderDetails?orderId=' + item.payload.description
      	});
      } else if (item.payload.data == 'prescribe') {
      	var prescribe = item.payload.extension;
      	uni.navigateTo({
      		url: '/pages_order/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_index/packageDetails?packageId="+packageItem.packageId+"&companyId="+companyId+"&companyUserId="+companyUserId;
      	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_order/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.showToast({
		     	icon:'none',
		     	title: "请前往App看课",
		     });
			 return;
		    console.log("qxj extension:");
			console.log(item.payload.extension);
			var couseItem=item.payload.extension;
			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 {
	padding: 12px 0;
	border-radius: 10px 0px 10px 10px;
	.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: 32upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #111111;
		}
		.text {
			font-size: 24upx;
			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: 32upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #111111;
		}
		.text {
			margin-top: 10rpx;
			font-size: 24upx;
			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: 32upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #111111;
		}
		.text {
			margin-top: 10rpx;
			font-size: 24upx;
			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: 32upx;
    		font-family: PingFang SC;
    		font-weight: bold;
    		color: #333;
    		margin-bottom: 20rpx;
    	}
    	.cover{
    		width:calc(100%);
    		height: 400rpx;
    		border-radius: 16rpx;
    		box-sizing: border-box;
    		image{
    			width: 100%;
    			height: 100%;
    		}
    	}
    }
    


}
.content {
	padding: 10px;
	&-in {
		background: #f0f0f0;
		border-radius: 0px 10px 10px 10px;
	}
	&-out {
		background: #f0f0f0;
		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: 30rpx;
		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: 8rpx;
		font-size: 34rpx;
		color: #333;
		line-height: 44rpx;
		
	}

	&-time {
		font-size: 22rpx;
		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;
		}
	}
}




</style>