uniapp-app/pages_chat/chat/message/message-custom.vue

<template>
  <div class="msg-custom" :style="{ fontSize: (fontSize || 16) + 'px' }">
    <view
      class="customCell cloumn"
      v-if="JSON.parse(msg.attachment.raw).gdxz_ext_data == '[肝胆商城]'"
      @click="goToDetail(JSON.parse(msg.attachment.raw).gdxz_url)"
    >
      <view class="title">{{ JSON.parse(msg.attachment.raw).gdxz_title }}</view>
      <view class="row">
        <view class="left"> 肝胆相照®肝胆病在线公共服务平台 </view>
        <view class="right">
          <image
            src="http://doc.igandan.com/app/html/img/2016/20160714132557.png"
            mode="widthFix"
          ></image>
        </view>
      </view>
    </view>
    <view
      class="customCell cloumn"
      v-else-if="JSON.parse(msg.attachment.raw).gdxz_ext_data == '[公益咨询]'"
      @click="goDetail(JSON.parse(msg.attachment.raw).gdxz_id)"
    >
      <view class="title">{{ JSON.parse(msg.attachment.raw).gdxz_title }}</view>
      <view class="row">
        <view class="left"> 点击查看问题详情 </view>
        <view class="right">
          <image
            src="http://doc.igandan.com/app/html/img/2016/20160714132557.png"
            mode="widthFix"
          ></image>
        </view>
      </view>
    </view>
    <view
      class="customCell cloumn"
      v-else-if="JSON.parse(msg.attachment.raw).gdxz_ext_data == '[门诊公告]'"
      @click="goToDetail(JSON.parse(msg.attachment.raw).gdxz_url)"
    >
    
      <view class="title">{{ JSON.parse(msg.attachment.raw).gdxz_title }}</view>
      <view class="row">
        <view class="left"> 肝胆相照®肝胆病在线公共服务平台 </view>
        <view class="right">
          <image
            src="http://doc.igandan.com/app/html/img/2016/20160714132557.png"
            mode="widthFix"
          ></image>
        </view>
      </view>
    </view>
    <view
      class="customCell cloumn"
      v-else-if="
        JSON.parse(msg.attachment.raw).gdxz_ext_data == '[图文科普]' ||
        JSON.parse(msg.attachment.raw).gdxz_ext_data == '[视频科普]'
      "
      @click="goToDetail(JSON.parse(msg.attachment.raw).gdxz_url)"
    >
      <view class="title">{{ JSON.parse(msg.attachment.raw).gdxz_title }}</view>
      <view class="row">
        <view class="left">
          {{ JSON.parse(msg.attachment.raw).gdxz_content }}
        </view>
        <view class="right">
          <image
            src="http://doc.igandan.com/app/html/img/2016/20160714132557.png"
            mode="widthFix"
          ></image>
        </view>
      </view>
    </view>

    <view
      class="customCell cloumn"
      v-else-if="JSON.parse(msg.attachment.raw).gdxz_ext_data == '[互联网医院]'"
      @click="goToMiniProgram"
    >
      
      <view class="title">肝胆相照互联网医院</view>
      <view class="row">
        <view class="left">
          {{ JSON.parse(msg.attachment.raw).gdxz_content }}
        </view>
        <view class="right">
          <image
            src="http://doc.igandan.com/app/html/img/2016/20160714132557.png"
            mode="widthFix"
          ></image>
        </view>
      </view>
    </view>
  </div>
</template>
  
  <script lang="ts" setup>
/**文本消息组件 */
import Icon from "@/components/Icon.vue";
// @ts-ignore
import UniLink from "@/components/uni-components/uni-link/components/uni-link/uni-link.vue";
import { parseText } from "@/utils/im/parseText";
import { EMOJI_ICON_MAP_CONFIG } from "@/utils/im/emoji";
import { V2NIMMessageForUI } from "@xkit-yx/im-store-v2/dist/types/types";
import { t } from "@/utils/im/i18n";
import { isHarmonyOs } from "@/utils/im/index";
import navTo from "@/utils/navTo";
const props = withDefaults(
  defineProps<{
    msg: V2NIMMessageForUI;
    fontSize?: number;
  }>(),
  {}
);
const goToDetail = (url: string) => {
  navTo({
    url: `/pages_app/webview/webview?url=${encodeURIComponent(url)}`,
  });
};
const goDetail = (id: string) => {
  navTo({
    url: `/pages_app/consultDetail/consultDetail?uuid=${id}`,
  });
};
// 跳转到微信小程序
const goToMiniProgram = () => {
  // 检查是否在App端
  // #ifdef APP-PLUS
  // App端跳转小程序的逻辑
  plus.share.getServices((res) => {
    let sweixin = null;
    for (let i in res) {
      if (res[i].id == "weixin") {
        sweixin = res[i];
      }
    }
    //唤醒微信小程序
    if (sweixin) {
      uni.hideLoading();
      sweixin.launchMiniProgram({
        id: "wxc83296720404aa7b", // 小程序的原始ID，微信公众平台设置里有
        type: 0, //小程序版本  0-正式版； 1-测试版； 2-体验版。
        path: "Pages/index/index", //小程序的页面,用传的参数在小程序接值判断跳转指定页面
      });
    }
  });
  // #endif

  // #ifdef MP-WEIXIN
  // 微信小程序端跳转其他小程序
  uni.navigateToMiniProgram({
    appId: "wxc83296720404aa7b",
    path: "Pages/index/index",
    extraData: {
      // 可以传递额外数据给小程序
    },
    envVersion: "release",
    success: (res) => {
      console.log("跳转小程序成功", res);
    },
    fail: (err) => {
      console.log("跳转小程序失败", err);
      uni.showToast({
        title: "跳转失败",
        icon: "none",
      });
    },
  });
  // #endif
};
/**解析文本 */
const textArr = parseText(props.msg?.text || "", props.msg?.serverExtension);

/**unilink 不支持鸿蒙 故提示在浏览器打开链接 */
const openInBrowser = (url: string) => {
  uni.setClipboardData({
    data: url,
    showToast: false,
    success: () => {
      uni.showToast({
        title: t("openUrlText"),
        icon: "none",
      });
    },
  });
};
</script>
  
  <style lang="scss" scoped>
.msg-custom {
  color: #333;
  display: flex;
  text-align: left;
  overflow-y: auto;
  word-break: break-all;
  word-wrap: break-word;
  white-space: break-spaces;
}
.customCell {
  display: flex;
}
.customCell.cloumn {
  flex-direction: column;
}
.customCell .title {
  font-size: 30rpx;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 注意：这不是标准的CSS属性 */
  -webkit-box-orient: vertical;
}
.customCell .row {
  margin-top: 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.left {
  font-size: 26rpx;
  color: #999;
  margin-right: 20rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 注意：这不是标准的CSS属性 */
  -webkit-box-orient: vertical;
}
.right image {
  width: 100rpx;
  height: auto;
}
</style>