com.kasite.client.uniapp.patient/pagesPatient/st1/business/news/deptDetails/deptDetails.vue

<template>
  <view class="container">
    <view class="content" v-if="currentModal == 'base'">
      <image class="public_right_imgs" :src="iconUrl.deptlist"></image>
      <view class="content_inner contentStyle">
        <view class="title">{{queryBean.DeptName}}</view>
        <image class="public_right_imgs" :src="iconUrl.deptlist"></image>
        <view class="tip">
          <text class="tip_tow backgroundCustom">科室简介</text>
        </view>
        <view class="details">
          <view :class="['details_text', showMore ? 'infoTxtMore' : 'infoTxt']" v-if="queryBean.DeptIntro" @click="moreClick">
            <rich-text :nodes="processedIntro"></rich-text>
          </view>
          <view class="details_an" @click="moreClick" v-if="queryBean.DeptIntro">
            {{showMore?'收起':'展开'}}
            <image :class="['right_img', showMore ? 'right_img_up' : '']" :src="iconUrl.icon_right"></image>
          </view>
          <view v-else style="text-align: center;">暂无科室介绍</view>
        </view>
        <view class="doctor_subject" @click="Doctorlist">查看科室医生简介</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { common } from '@/utils';
import icon from '@/utils/icon';

const iconUrl = icon;
const showMore = ref(false);
const currentModal = ref('base');
const queryBean = ref<any>({});
const processedIntro = ref('');

onLoad((options: any) => {
  currentModal.value = options.currentModal || 'base';
  if (options.queryBean) {
    try {
      queryBean.value = JSON.parse(decodeURIComponent(options.queryBean));
      processIntro();
    } catch (e) {
      console.error('Parse error', e);
    }
  }
});

const processIntro = () => {
  if (queryBean.value.DeptIntro) {
    // 模拟原逻辑：去除 style 标签
    let info = unescape(queryBean.value.DeptIntro).replace(/ style=".*?"/g, '');
    processedIntro.value = info;
  }
};

const moreClick = () => {
  showMore.value = !showMore.value;
};

const Doctorlist = () => {
  const qb = JSON.stringify(queryBean.value);
  const url = `/pagesPatient/st1/business/news/doctorList/doctorList?queryBean=${qb}&DeptCode=${queryBean.value.DeptCode}`;
  common.goToUrl(url);
};
</script>

<style lang="scss" scoped>
.banner_img {
  width: 100%;
  height: 424upx;
}
.content{
  padding-bottom: 210upx;
}
.content_inner, .tabber_inner, .view_details {
  padding: 28upx 30upx 40upx;
  background-color: #fff;
}

.title {
  /* width: 142upx; */
  height: 34upx;
  font-size: 36upx;
  font-family: PingFang SC;
  font-weight: 800;
  color: #222326;
  line-height: 40upx;
}

.tip {
  font-size: 26upx;
  font-weight: 400;
  color: rgba(166, 166, 166, 1);
  padding: 10upx 0 17upx;
  overflow: hidden;
}

.tip .tip_tow {
  display: inline-block;
  padding: 0 8upx;
}
.tip_tow {
  width: 148upx;
  height: 52upx;
  margin-top: 48upx;
  line-height: 46upx;
  font-family: PingFang SC;
  font-weight: 500;
  text-align: center;
  border-radius: 12upx 12upx 12upx 0upx;
}
.tip_tow::after {
  border-color: #a6a6a6;
}

.details_text view {
  font-family: Source Han Sans CN !important;
  color: rgba(85, 85, 85, 1) !important;
  font-size: 30upx !important;
  font-weight: 400 !important;
  line-height: 48upx !important;
}

.infoTxtMore {
  word-wrap: break-word;
  text-align: justify;
}

.infoTxt {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  text-align: justify;
  font-family: PingFangSC-Regular;
}

.details .details_an {
  padding-top: 30upx ;
  font-size: 26upx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a6a6a6;
}

.right_img {
  width: 12upx;
  height: 21upx;
  margin-left: 14upx;
  transform: rotateZ(90deg);
}

.right_img_up {
  transform: rotateZ(-90deg);
}

.message {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0upx 0upx 40upx 0upx rgba(0, 0, 0, 0.06);
  border-radius: 20upx;
}

.message_list {
  min-height: 100upx;
  font-size: 30upx;
  font-weight: 400;
  color: rgba(85, 85, 85, 1);
  display: flex;
  align-items: center;
  padding: 20upx 30upx;
  position: relative;
}

.item_img {
  width: 32upx;
  height: 32upx;
  margin-right: 26upx;
}

.public_right_img {
  right: 30upx;
}
.public_right_imgs {
  right: 30upx;
  width: 100%;
  height: 80upx;
  top: 0px;
  position: absolute;
}

/* 基础信息 */

.info_item {
  padding-bottom: 58upx;
}

.item_title {
  font-size: 32upx;
  font-weight: 500;
  color: rgba(0, 0, 0, 1);
}

.item_tip {
  font-size: 28upx;
  font-weight: 400;
  color: rgba(85, 85, 85, 1);
  line-height: 44upx;
  margin-top: 29upx;
}
.tip_subject{
  width: 670upx;
height: 168upx;
font-size: 30upx;
font-family: PingFang SC;
font-weight: 500;
color: #43434A;
line-height: 46upx;
}
.subject_tow{
  height: 6upx;
  font-size: 30upx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #43434A;
  line-height: 24upx;
}
.doctor_subject{
  position: fixed;
  bottom: 32upx;
  width: 690upx;
  height: 102upx;
  background: var(--auxiliaryColor);
  border-radius: 55upx;
  line-height: 102upx;
  text-align: center;
  font-size: 34upx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #FFFFFF;
}
.contentStyle{
  overflow: auto;
}
</style>