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

<template>
	<view class="custom" @click.stop="handleCustomerItem" @touchstart="handleTouchStart" @longpress="handleLongPress">
		<template v-if="isCustom === 'order'">
			<view class="wechat-bill-card">
				<view class="wechat-bill-header">
					<text class="wechat-bill-title">问诊订单</text>
					<text class="wechat-bill-status">已创建</text>
				</view>
				<view class="wechat-bill-body">
					<view class="wechat-bill-row">
						<text class="wechat-bill-label">患者信息</text>
						<text class="wechat-bill-value">{{ extension.patientName }} {{ extension.sex }} {{ extension.mobile }}</text>
					</view>
					<view class="wechat-bill-row">
						<text class="wechat-bill-label">患病时间</text>
						<text class="wechat-bill-value">{{ extension.duration }}</text>
					</view>
					<view class="wechat-bill-row">
						<text class="wechat-bill-label">就诊情况</text>
						<text class="wechat-bill-value">{{ extension.isVisit }}</text>
					</view>
					<view class="wechat-bill-row">
						<text class="wechat-bill-label">病情描述</text>
						<text class="wechat-bill-value wechat-bill-value-multi">{{ extension.title }}</text>
					</view>
				</view>
				<view class="wechat-bill-footer">
					<text class="wechat-bill-action">查看订单详情</text>
					<text class="wechat-bill-arrow">></text>
				</view>
			</view>
		</template>
		
		<template v-else-if="isCustom === 'prescribe'">
			<view class="wechat-service-card">
				<view class="wechat-service-header">
					<text class="wechat-service-icon">💊</text>
					<text class="wechat-service-title">电子处方单</text>
				</view>
				<view class="wechat-service-body">
					<text class="wechat-service-desc">诊断结果：{{ extension.diagnose }}</text>
				</view>
				<view class="wechat-service-footer">
					<text class="wechat-service-action">查看处方</text>
				</view>
			</view>
		</template>
		
		<template v-else-if="isCustom === 'report'">
			<view class="wechat-service-card">
				<view class="wechat-service-header">
					<text class="wechat-service-icon">📝</text>
					<text class="wechat-service-title">问诊报告单</text>
				</view>
				<view class="wechat-service-body">
					<text class="wechat-service-desc">点击查看详细问诊报告</text>
				</view>
				<view class="wechat-service-footer">
					<text class="wechat-service-action">查看报告单</text>
				</view>
			</view>
		</template>
		
		<template v-else-if="isCustom === 'follow'">
			<view class="wechat-service-card">
				<view class="wechat-service-header">
					<text class="wechat-service-icon">📋</text>
					<text class="wechat-service-title">随访单</text>
				</view>
				<view class="wechat-service-body">
					<text class="wechat-service-desc">请填写随访记录</text>
				</view>
				<view class="wechat-service-footer">
					<text class="wechat-service-action">查看随访</text>
				</view>
			</view>
		</template>
		
		<template v-else-if="isCustom === 'drugReport'">
			<view class="wechat-service-card">
				<view class="wechat-service-header">
					<text class="wechat-service-icon">🔬</text>
					<text class="wechat-service-title">用药报告单</text>
				</view>
				<view class="wechat-service-body">
					<text class="wechat-service-desc">点击查看详细用药报告</text>
				</view>
				<view class="wechat-service-footer">
					<text class="wechat-service-action">查看报告单</text>
				</view>
			</view>
		</template>
		
		<template v-else-if="isCustom === 'package'">
			<view class="wechat-link-card">
				<view class="wechat-link-content">
					<text class="wechat-link-title">{{extension.title}}</text>
				</view>
				<image class="wechat-link-image" :src="extension.image" mode="aspectFill" v-if="!!extension.image"></image>
				<view class="wechat-link-placeholder" v-else>
					<text class="wechat-link-icon">🔗</text>
				</view>
			</view>
		</template>
		
		
		<template v-else-if="isCustom === 'couponPackage'">
			<view class="wechat-coupon-card">
				<view class="wechat-coupon-body">
					<view class="wechat-coupon-left">
						<text class="wechat-coupon-symbol">¥</text>
						<text class="wechat-coupon-price">{{ extension.price.toFixed(2) }}</text>
					</view>
					<view class="wechat-coupon-right">
						<text class="wechat-coupon-title">{{extension.title}}</text>
						<text class="wechat-coupon-cond">满{{ extension.minPrice.toFixed(2) }}元可用</text>
					</view>
				</view>
				<view class="wechat-coupon-footer">
					<text class="wechat-coupon-date">{{ extension.limitTime }} 到期</text>
					<text class="wechat-coupon-action">查看详情 ></text>
				</view>
			</view>
		</template>
		
		<template v-else-if="isCustom === 'inquirySelect'">
			<view class="wechat-link-card">
				<view class="wechat-link-content">
					<text class="wechat-link-title">{{extension.title}}</text>
					<text class="wechat-link-desc">医疗专家团队远程咨询</text>
				</view>
				<image class="wechat-link-image" :src="extension.image" mode="aspectFill" v-if="!!extension.image"></image>
				<view class="wechat-link-placeholder" v-else>
					<text class="wechat-link-icon">🔗</text>
				</view>
			</view>
		</template>
		
		<template v-else-if="isCustom === 'applyForm'">
			<view class="package-item">
				<view class="title">{{extension.diagnose}}</view>
				<!-- <view class="stitle">医疗专家团队远程咨询</view> -->
				<view  class="btns">
					<view class="btn">申请确认</view>
				</view>
			</view>
		</template>
		
		<template v-else-if="isCustom === 'startInquiry'">
			<view class="system-bubble">
			  <text class="system-bubble-text">{{ extension.title }}</text>
			</view>
		</template>
		
		<template v-else-if="isCustom === 'finishInquiry'">
			<view class="system-bubble">
			    <text class="system-bubble-text">{{ extension.title }}</text>
			</view>
		</template>
		
		<template v-else-if="isCustom === 'course'">
			<view class="wechat-link-card">
				<view class="wechat-link-content course-item" style="min-height: 80px;">
					<text class="wechat-link-title course-title" style="font-size: 21px; ">{{extension.title}}</text>
					<text class="wechat-link-desc course-desc" v-if="extension.courseName">{{extension.courseName}}</text>
				</view>
				<image class="wechat-link-image" style="width: 130rpx;height: 130rpx;margin-top:3px " :src="extension.courseUrl" mode="aspectFill" v-if="!!extension.courseUrl"></image>
				<view class="wechat-link-placeholder" v-else>
					<text class="wechat-link-icon">🎬</text>
				</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,
      payload: {},
      extension: {},
      touchStartTime: 0,
      isLongPress: false
    };
  },
  watch: {
  	message: {
  		handler(val) {
  			this.safeParseData();
  		},
  		deep: true,
  		immediate: true
  	}
  },
  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
			});
      }
    },

    /**
     * 处理触摸开始事件，记录时间戳
     */
    handleTouchStart() {
      this.touchStartTime = Date.now();
      this.isLongPress = false;
    },

    /**
     * 处理长按事件
     */
    handleLongPress() {
      this.isLongPress = true;
      this.$emit('longpress', this.message);
    },

    /**
     * 处理点击事件，根据触摸时长拦截长按触发的点击
     */
    handleCustomerItem() {
      // 如果是长按触发的（通过标志位或时间差判断），则拦截点击
      const duration = Date.now() - this.touchStartTime;
      if (this.isLongPress || duration > 350) return;
      
      const rawData = this.message?.customElem.data;
      let item = JSON.parse(rawData);
	  // console.log("handleCustomerItem:::", item);
      if (item.payload.data == 'order') {
		this.$emit('enterSubPage');
      	uni.navigateTo({
      		url: '/pages/store/inquiryOrderDetails?orderId=' + item.payload.description
      	});
      } else if (item.payload.data == 'prescribe') {
      	var prescribe = item.payload.extension;
		this.$emit('enterSubPage');
      	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;
			this.$emit('enterSubPage');
			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";
			this.$emit('enterSubPage');
			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;
			this.$emit('enterSubPage');
			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;
		this.$emit('enterSubPage');
      	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') {
			this.$emit('enterSubPage');
			uni.navigateTo({
				url: '/pages/store/inquiryOrderReport?orderId=' + item.payload.description
			});
      } else if (item.payload.data == 'drugReport') {
			// var report=JSON.parse(item.payload.extension);
			this.$emit('enterSubPage');
			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) {
				this.$emit('enterSubPage');
				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: "福袋信息为空",
				});
			}
		}
    }
  }
};
</script>

<style lang="scss" scoped>
	
.card_message_container {
	display: flex;
	flex-direction: column;
	background-color: #fff;
	box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
	border-radius: 12rpx;
	width: 444rpx;
	border-width: 1px;
	border-style: solid;
	border-color: #ececec;
}

.card_info {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 24rpx 32rpx;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #e9e9e9;
}

.card_name {
	overflow: hidden;
	text-overflow: ellipsis;
	lines: 1;
	margin-left: 24rpx;
	font-size: 16px;
}

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


.custom {
	padding:0 0 12px 0;
}

.order-item {
	width: 400rpx;
	padding: 15rpx;
	border-width: 1rpx;
	border-style: solid;
	border-color: #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;
}

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

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

.prescribe-item {
	width: 400rpx;
	padding: 15rpx;
	border-width: 1rpx;
	border-style: solid;
	border-color: #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;
}

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

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

.prescribe-item-btns {
	padding: 15rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	width: 100%;
}

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


.report-item {
	width: 400rpx;
	padding: 15rpx;
	border-width: 1rpx;
	border-style: solid;
	border-color: #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;
}

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

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

.report-item-btns {
	padding: 15rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	width: 100%;
}

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


.package-item {
	width: 450rpx;
	padding: 15rpx;
	border-width: 1rpx;
	border-style: solid;
	border-color: #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;
}

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

.package-item-stitle {
	font-size: 15px;
	font-family: PingFang SC;
	font-weight: 500;
	color: #666;
	margin-bottom: 10rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.package-item-stitle-text {
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #666;
}

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

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

.package-item-stitle1 {
	font-size: 16px;
}

.package-item-cover {
	width: 100%;
	height: 400rpx;
	border-radius: 16rpx;
	box-sizing: border-box;
}

.package-item-image {
	width: 100%;
	height: 100%;
}

.package-item-btns {
	padding: 15rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	width: 100%;
}

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


.content {
	padding: 10px;
	background-color: #f0f0f0;
}

.content-in {
	border-radius: 0px 10px 10px 10px;
}

.content-ou {
	border-radius: 10px 0px 10px 10px;
}

.content-text {
    font-size: 16px;
    color: #333;
}


.list-item {
	width: 450rpx;
	padding: 0rpx;
	border-width: 1rpx;
	border-style: solid;
	border-color: #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: 16px;
	color: #333333;
	line-height: 36rpx;
}

.list-cover-image {
	width: 150rpx;
	height: 120rpx;
	margin-left: 16rpx;
	background-color: #F5F6F6;
	border-radius: 10rpx 10rpx 10rpx 10rpx;
}


.list-con {
	width: 100%;
	padding: 24rpx;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
}

.list-cover {
	width: 100%;
	margin-top: 20rpx;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-end;
}


.list-itemtxt {
	flex: 1;
	overflow: hidden;
	word-break: break-all;
	display: flex;
	flex-direction: column;
}

.list-title {
	word-break: break-all;
}

.list-desc {
	margin-top: 0rpx;
	font-size: 16px;
	color: #333;
	line-height: 22px;
}

.list-time {
	font-size: 14px;
	color: #999999;
}

.list-footer {
	padding: 20rpx 24rpx;
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	position: relative;
}

.list-footer-view {
    display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
}

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


/* WeChat Style Link Card (Package) */
.wechat-link-card {
	width: 500rpx;
	background-color: #FFFFFF;
	border-radius: 10rpx;
	padding: 24rpx;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
	border-width: 1rpx;
	border-style: solid;
	border-color: #ededed;
}

.wechat-link-content {
	flex: 1;
	margin-right: 20rpx;
	min-height: 100rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.wechat-link-title {
	font-size: 19px;
	color: #333333;
	lines: 2;
	text-overflow: ellipsis;
	line-height: 44rpx;
	font-weight: 400;
}

.wechat-link-desc {
	font-size: 16px;
	color: #666666;
	lines: 1;
	text-overflow: ellipsis;
	margin-top: 8rpx;
}

.course-title{
	text-overflow: ellipsis;
	lines: 3;
}

.course-item {
	justify-content: center;
}

.course-desc {
	text-overflow: inherit;
}

.wechat-link-image {
	width: 100rpx;
	height: 100rpx;
	border-radius: 8rpx;
	background-color: #f5f5f5;
}

.wechat-link-placeholder {
	width: 100rpx;
	height: 100rpx;
	border-radius: 8rpx;
	background-color: #f5f5f5;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wechat-link-icon {
	font-size: 40rpx;
}


/* WeChat Style Coupon Card (CouponPackage) */
.wechat-coupon-card {
	width: 500rpx;
	background-color: #FFFFFF;
	border-radius: 12rpx;
	border-width: 1rpx;
	border-style: solid;
	border-color: #ededed;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.wechat-coupon-body {
	display: flex;
	flex-direction: row;
	padding: 30rpx 24rpx;
	align-items: center;
}

.wechat-coupon-left {
	display: flex;
	flex-direction: row;
	align-items: baseline;
}

.wechat-coupon-symbol {
	font-size: 14px;
	color: #fa5151;
	font-weight: 500;
	margin-right: 4rpx;
}

.wechat-coupon-price {
	font-size: 56rpx;
	color: #fa5151;
	font-weight: bold;
	line-height: 56rpx;
}

.wechat-coupon-right {
	flex: 1;
	margin-left: 24rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.wechat-coupon-title {
	font-size: 17px;
	color: #333333;
	font-weight: bold;
	lines: 1;
	text-overflow: ellipsis;
	margin-bottom: 8rpx;
}

.wechat-coupon-cond {
	font-size: 14px;
	color: #999999;
	lines: 1;
	text-overflow: ellipsis;
}

.wechat-coupon-footer {
	background-color: #fafafa;
	padding: 16rpx 24rpx;
	border-top-width: 1rpx;
	border-top-style: dashed;
	border-top-color: #e0e0e0;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.wechat-coupon-date {
	font-size: 14px;
	color: #999999;
}

.wechat-coupon-action {
	font-size: 14px;
	color: #999999;
}


/* WeChat Style Bill Card (Order) */
.wechat-bill-card {
	width: 500rpx;
	background-color: #FFFFFF;
	border-radius: 12rpx;
	border-width: 1rpx;
	border-style: solid;
	border-color: #ededed;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.wechat-bill-header {
	padding: 24rpx;
	border-bottom-width: 1rpx;
	border-bottom-style: solid;
	border-bottom-color: #f0f0f0;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.wechat-bill-title {
	font-size: 17px;
	font-weight: bold;
	color: #333333;
}

.wechat-bill-status {
	font-size: 14px;
	color: #fa5151; /* Or green #07c160 depending on state */
}

.wechat-bill-body {
	padding: 24rpx;
	display: flex;
	flex-direction: column;
}

.wechat-bill-row {
	display: flex;
	flex-direction: row;
	margin-bottom: 12rpx;
	align-items: flex-start;
}

.wechat-bill-label {
	font-size: 14px;
	color: #999999;
	width: 140rpx;
	flex-shrink: 0;
}

.wechat-bill-value {
	font-size: 14px;
	color: #333333;
	flex: 1;
}

.wechat-bill-value-multi {
	lines: 2;
	text-overflow: ellipsis;
}

.wechat-bill-footer {
	padding: 20rpx 24rpx;
	border-top-width: 1rpx;
	border-top-style: solid;
	border-top-color: #f0f0f0;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.wechat-bill-action {
	font-size: 14px;
	color: #333333;
}

.wechat-bill-arrow {
	font-size: 14px;
	color: #c7c7cc;
}


/* WeChat Style Service Card (Prescribe, Report, Follow) */
.wechat-service-card {
	width: 500rpx;
	background-color: #FFFFFF;
	border-radius: 12rpx;
	border-width: 1rpx;
	border-style: solid;
	border-color: #ededed;
	padding: 30rpx 24rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.wechat-service-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 16rpx;
}

.wechat-service-icon {
	font-size: 60rpx;
	margin-bottom: 10rpx;
}

.wechat-service-title {
	font-size: 17px;
	font-weight: bold;
	color: #333333;
}

.wechat-service-body {
	margin-bottom: 24rpx;
}

.wechat-service-desc {
	font-size: 14px;
	color: #666666;
	text-align: center;
	lines: 2;
	text-overflow: ellipsis;
}

.wechat-service-footer {
	width: 100%;
}

.wechat-service-action {
	width: 100%;
	height: 72rpx;
	line-height: 72rpx;
	text-align: center;
	background-color: #f7f7f7;
	border-radius: 8rpx;
	font-size: 28rpx;
	color: #576b95; /* WeChat Link Blue */
	font-weight: 500;
}


/* System Bubble */
.system-bubble {
	padding: 10rpx 24rpx;
	background-color: rgba(0, 0, 0, 0.1); /* Semi-transparent gray */
	border-radius: 8rpx;
	align-self: center; /* Center in chat flow */
	margin: 10rpx 0;
}

.system-bubble-text {
	font-size: 17px;
	color: #FFFFFF; 
	color: #666666; 
}

.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>