his_user_miniapp/pages/TUIKit/TUIPages/TUIChat/components/message-elements/message-custom.vue

<template>
  <view class="custom">
    <template v-if="isCustom === 'order'">
      <!-- <div>
        <h1></h1>
         {{extension.title}}
      </div> -->
	  <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 === 'startInquiry'">
	   <span :class="['content content-' + message.flow]">{{extension.title}}</span>
	</template>
	<template v-else-if="isCustom === 'finishInquiry'">
	   <span :class="['content content-' + message.flow]">{{extension.title}}</span>
	</template>
    <template v-else>
      <span :class="['content content-' + message.flow]">{{data.custom}}</span>
    </template>
  </view>
</template>

<script lang="ts">
import store from "@/store";
import { defineComponent, watchEffect, reactive, toRefs } from 'vue';
const MessageCustom =  defineComponent({
  props: {
    data: {
      type: Object,
      default: () => {
        return {};
      }
    },
		messageData: {
			type: Object,
			default: () => {
			  return {};
			}
		}
  },
  setup(props:any, ctx:any) {
    const data = reactive({
      data: {},
      extension: {},
      isCustom: '',
      payload: {},
			message: {},
    });
    watchEffect(()=>{
		data.data = props.data;
		data.message = props.messageData;
		data.isCustom = props.data.message.payload.data;
		data.payload = props.data.message.payload;
		data.extension = JSON.parse(props.data.message.payload.extension);
	});
    return {
      ...toRefs(data),
    };
  }
});
export default MessageCustom
</script>
<style lang="scss" scoped>
a {
  color: #679CE1;
}

.custom {
	padding: 12px 0;
	border-radius: 10px 0px 10px 10px;
 
  .order-item{
	  width: 400rpx;
	  padding: 15rpx;
	  padding: 15rpx;
	  border: 1rpx solid #54ab9f;
	  box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.05);
	  background-color: #f6fffe;
	  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;
	  }
  }
  .prescribe-item{
  	  width: 400rpx;
  	  padding: 15rpx;
	  border: 1rpx solid #54ab9f;
  	  box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.05);
  	  background-color: #f6fffe;
  	  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 #54ab9f;
				font-family: PingFang SC;
				color: #3bb697; 
		  }
	  }
  }
  .report-item{
  	  width: 400rpx;
  	  padding: 15rpx;
  	  border: 1rpx solid #54ab9f;
  	  box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.05);
  	  background-color: #f6fffe;
  	  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 #54ab9f;
  				font-family: PingFang SC;
  				color: #3bb697; 
  		  }
  	  }
  }
}
.content {
		padding: 10px;
    &-in {
      background: #e1e1e1;
      border-radius: 0px 10px 10px 10px;
    }
    &-out {
      background: #DCEAFD;
      border-radius: 10px 0px 10px 10px;
    }
  }
</style>