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

<template>
  <view class="container">
    <view class="content">
      <swiper indicator-dots class="swiper">
        <swiper-item v-for="(item, index) in photoArr" :key="index">
          <image :src="item" mode="aspectFill" @click="imgClick(item)"></image>
        </swiper-item>
      </swiper>
      <view class="content_inner">
        <view class="title">{{hospitalInfo.HospitalName}}</view>
        <view class="tip">
          <text class="tip_tow">综合医院</text>
          <text class="tip_tow border_left">{{hospitalInfo.HospitalLevel}}</text>
          <text class="tip_tow border_left">医保定点</text>
        </view>
        <view class="details">
          <view :class="['details_text', showMore ? 'infoTxtMore' : 'infoTxt']">
            <view>
              <rich-text :nodes="processedIntro"></rich-text>
              <view></view>
            </view>
          </view>
          <view class="details_an" @click="moreClick">
            {{showMore?'收起':'展开'}}
            <image :class="['right_img', showMore ? 'right_img_up' : '']" :src="iconUrl.icon_right"></image>
          </view>
        </view>
        <view class="basis_info">
          <view class="info_item">
            <view class="item_title">门诊时间</view>
            <view class="item_tip">{{hospitalInfo.OfficeHours}}</view>
          </view>
          <view class="info_item">
            <view class="item_title">公交路线</view>
            <view class="item_tip">{{hospitalInfo.HospitalTraffic}}</view>
          </view>
        </view>
        <view class="message">
          <view class="message_list border_bottom" @click="optionClick('mobile')">
            <image class="item_img" :src="iconUrl.icon_phone"></image>
            <text>{{hospitalInfo.Contact}}</text>
            <image class="public_right_img" :src="iconUrl.icon_right"></image>
          </view>
          <view class="message_list" @click="optionClick('address')">
            <image class="item_img" :src="iconUrl.icon_address"></image>
            <text class="address">{{(hospitalInfo.ProvinceName || '') + (hospitalInfo.CityName || '') + (hospitalInfo.AreaName || '') + (hospitalInfo.HospitalAddress || '')}}</text>
            <image class="public_right_img" :src="iconUrl.icon_right"></image>
          </view>
        </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';
import { queryBHospitalList } from '@/pagesPatient/service/new/index';
import { REQUEST_CONFIG } from '@/config';

const iconUrl = icon;
const hospitalInfo = ref<any>({});
const photoArr = ref<string[]>([]);
const showMore = ref(false);
const processedIntro = ref('');
const app = getApp();

onLoad((options) => {
  main();
});

const main = async () => {
  let hospitalLocalData = {
    HospitalId: app.globalData.districtId || app.globalData.hosId
  };
  let hospitalLocalResp = await queryBHospitalList(hospitalLocalData);
  if (!common.isEmpty(hospitalLocalResp)) {
    let infoObj = hospitalLocalResp[0];
    let photos: string[] = [];
    if (!common.isEmpty(infoObj.PhotoUrl)) {
      try {
        let parsedPhotos = JSON.parse(infoObj.PhotoUrl);
        // 处理图片url
        for (let i in parsedPhotos) {
          parsedPhotos[i] = parsedPhotos[i].indexOf('http') != -1 ? parsedPhotos[i] : `${REQUEST_CONFIG.BASE_URL}${parsedPhotos[i]}`;
          photos.push(parsedPhotos[i]);
        }
      } catch (e) {
        // Fallback if parse fails
        photos.push(infoObj.PhotoUrl);
      }
    } else {
      if (infoObj.HospitalPicture) {
        photos.push(infoObj.HospitalPicture);
      }
    }
    
    // Process intro
    if (infoObj.HosBrief) {
        let info = unescape(infoObj.HosBrief).replace(/ style=".*?"/g, '');
        processedIntro.value = info;
    }

    photoArr.value = photos;
    hospitalInfo.value = infoObj;
  }
};

const imgClick = (url: string) => {
  uni.previewImage({
    urls: photoArr.value,
    current: url
  });
};

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

const optionClick = (type: string) => {
  let mobile = hospitalInfo.value.Contact;
  if (type == 'address') {
    // Attempt to open location
    if (hospitalInfo.value.Latitude && hospitalInfo.value.Longitude) {
        uni.openLocation({
            latitude: parseFloat(hospitalInfo.value.Latitude),
            longitude: parseFloat(hospitalInfo.value.Longitude),
            name: hospitalInfo.value.HospitalName,
            address: (hospitalInfo.value.ProvinceName || '') + (hospitalInfo.value.CityName || '') + (hospitalInfo.value.AreaName || '') + (hospitalInfo.value.HospitalAddress || '')
        });
    } else {
        common.showToast('暂无位置信息');
    }
  } else if (type == "mobile") {
    uni.makePhoneCall({
      phoneNumber: mobile,
    });
  }
};
</script>

<style lang="scss" scoped>
.banner_img {
  width: 100%;
  height: 424upx;
}

.content_inner, .tabber_inner, .view_details {
  padding: 28upx 30upx 40upx;
  background-color: #fff;
}

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

.tip {
  font-size: 26upx;
  font-weight: 400;
  color: rgba(166, 166, 166, 1);
  padding: 22upx 0 40upx;
}

.tip .tip_tow {
  display: inline-block;
  padding: 0 8upx;
}

.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: 30upx 0 40upx;
  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;
}


/* 基础信息 */

.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;
}
.address {
    max-width: 90%;
}
</style>