wxservice-web/src/views/hospital-service/HospitalServiceHome.vue

<template>
  <window-size :showBackNav="false">
    <div class="logo-div">
      <div style="display: flex">
        <div><img src="../../assets/thyy_logo.png" style="height: 60px" /></div>
        <div style="color: #00525e">
          <h3>医疗服务平台</h3>
        </div>
      </div>
      <div style="font-size: 13px">
        <i class="van-icon van-icon-user-o"></i>
        <span style="margin-left: 4px; color: #777" @click="router.push('/myPatientIdCards')">{{
          defaultPatientId
        }}</span>
      </div>
    </div>
    <div class="big-box xinguanjiance" @click="routeTo(filterPath('/selectCovidBranch/', '/selectOrderCovidPatient'))">
      <div>
        <img class="large-icon" src="../../assets/hospital-service/xinguanjiance2.png" />
      </div>
      <div class="hsjctext">核酸检测</div>
    </div>
    <div id="router-lane">
      <div style="height: 10px"></div>
      <van-row gutter="5">
        <van-col span="6" @click="routeTo('/appointment')">
          <img src="../../assets/hospital-service/yuyueguahao.png" />
          <div class="icon-label">预约挂号</div>
        </van-col>
        <van-col span="6" @click="routeTo(filterPath('/unPaidList/', '/selectPayPatient'))">
          <img src="../../assets/hospital-service/menzhenjiaofei.png" />
          <div class="icon-label">门诊缴费</div>
        </van-col>
        <van-col span="6" @click="routeTo(filterPath('/checkExamIndex/', '/selectExamPatient'))">
          <img src="../../assets/hospital-service/baogaochaxun.png" />
          <div class="icon-label">报告查询</div>
        </van-col>
        <van-col span="6" @click="routeTo(filterPath('/inPatientService/', '/selectInpatientCard'))">
          <img src="../../assets/hospital-service/zhuyuanfuwu.png" />
          <div class="icon-label">住院服务</div>
        </van-col>
      </van-row>
      <div style="height: 10px"></div>
      <van-row gutter="5">
        <van-col span="6" @click="routeTo(filterPath('/assessments/', '/selectAssessmentPatient'))">
          <img src="../../assets/hospital-service/wenjuandiaocha.png" />
          <div class="icon-label">问卷调查</div>
        </van-col>
        <van-col span="6" @click="routeTo(filterPath('/physicalExamIndex/', '/selectPhysicalExamPatient'))">
          <img src="../../assets/hospital-service/tijianbaogao.png" />
          <div class="icon-label">体检报告</div>
        </van-col>
        <van-col span="6" @click="routeTo(filterPath('/healthCartCategory/', '/selectHealthCartPatient'))">
          <img src="../../assets/hospital-service/gouwuche.png" />
          <div class="icon-label">自助预约</div>
        </van-col>

        <van-col span="6" @click="routeTo('/onlineConsult')">
          <img src="../../assets/hospital-service/online-consult.png" />
          <div class="icon-label">在线咨询</div>
        </van-col>
      </van-row>
    </div>

    <div style="position: relative; width: 95%; margin-top: 10px; height: 70px; display: flex">
      <div
        style="
          width: 45%;
          margin-left: 5%;
          height: 70px;
          background-size: 100%;
          border-radius: 8px;
          display: flex;
          align-items: center;
          background-image: url('http://staticweb.hnthyy.cn/images/ybdzpzrk.png');
        "
        @click="toybdzpz"
      >
      </div>
      <div
        style="
          width: 45%;
          margin-left: 5%;
          height: 70px;
          background-size: 100%;
          border-radius: 8px;
          display: flex;
          align-items: center;
          background-image: url('http://staticweb.hnthyy.cn/images/dzjkkrk.png');
        "
          @click="todzjkk"
      >
      </div>
    </div>

    <div style="width: 90%; margin-left: 5%; margin-top: 15px">
      <van-tag size="large" type="warning">名医直达</van-tag>
    </div>
    <div :style="swipeStyle">
      <div :style="loadingStyle" v-show="loading">
        <van-loading size="24px" type="spinner" vertical></van-loading>
      </div>
      <van-swipe :autoplay="10000" :show-indicators="false" vertical style="height: 100%">
        <van-swipe-item v-for="(arr, index) in doctors" :key="index">
          <div :style="swipeRowStyle" v-for="item in arr" :key="item.doctorCode" @click="clickDoctor(item)">
            <van-image
              round
              fit="cover"
              style="margin-top: 5px; margin-left: 5px"
              :width="portraitWidth"
              :height="portraitHeight"
              :src="'data:image/png;base64,' + item.portrait"
            />
            <div :style="infoStyle">
              {{ item.doctorName }} | {{ item.deptName }} | {{ item.doctorTitle }}
              <div v-show="item.introduction" :style="specialtyStyle">{{ item.introduction }}</div>
            </div>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
  </window-size>
</template>

<script>
import { computed, onMounted, ref } from 'vue'
import store from '../../store'
import { getDate } from '../../utils/date'
import router from '../../router'
import axios from 'axios'
import {Toast} from "vant";
export default {
  setup() {
    const windowSize = store.state.windowSize
    const swipeStyle = {
      width: '90%',
      marginLeft: '5%',
      marginTop: '5px',
      height: windowSize.h - 460 + 'px',
      h: windowSize.h - 460,
      w: windowSize.w * 0.9,
    }

    const swipeRowStyle = {
      width: '100%',
      height: swipeStyle.h / 3 - 5 + 'px',
      marginBottom: '5px',
      borderRadius: '8px',
      backgroundColor: '#00525e',
      backgroundImage: 'linear-gradient(to bottom right, #03a0b8, #00525e)',
      display: 'flex',
      h: swipeStyle.h / 3 - 5,
      color: 'white',
    }

    const loadingStyle = {
      position: 'fixed',
      top: 400 + swipeStyle.h / 2 - 32 + 'px',
      left: 0,
      right: 0,
      bottom: '50px',
    }

    const portraitHeight = swipeRowStyle.h - 10 + 'px'
    const portraitWidth = swipeRowStyle.h * 0.65 + 'px'

    const infoStyle = {
      width: swipeStyle.w - swipeRowStyle.h * 0.65 - 10 + 'px',
      height: '32px',
      fontSize: '13px',
      fontWeight: 'bold',
      marginLeft: '10px',
      marginTop: swipeRowStyle.h / 2 - 20 + 'px',
    }

    const specialtyStyle = {
      overflow: 'hidden',
      textOverflow: 'ellipsis',
      whiteSpace: 'nowrap',
      fontSize: '12px',
      fontWeight: 'normal',
      paddingRight: '15px',
    }
    const cards = computed(() => {
      return store.state.patientCards
    })
    const filterPath = (singleCardPath, multipleCardsPath) => {
      return cards.value.length === 1 ? singleCardPath + cards.value[0].patientId : multipleCardsPath
    }
    const defaultPatientId = computed(() => {
      if (cards.value.length === 0) {
        return '未绑卡'
      }
      if (cards.value.length === 1) {
        return cards.value[0].patientId
      }
      for (let i = 0; i < cards.value.length; i++) {
        if (cards.value[i].isDefault === 1) {
          return cards.value[i].patientId
        }
      }
    })

    const doctors = computed(() => {
      return store.state.homePageDoctors
    })
    const date = getDate()
    const clickDoctor = (val) => {
      const path = '/doctorArrangement/' + date + '/' + val.deptCode + '/' + val.doctorCode
      router.push(path)
    }

    const routeTo = (val) => {
      router.push(val)
    }

    const toVaccinateAppointment = () => {
      if (cards.value.length === 1) {
        window.open('http://www.hnthyy.cn:8080/covidVaccinate/' + cards.value[0].patientId, '_self')
      } else {
        router.push('/selectCovidVaccinatePatient')
      }
    }

    const toybdzpz = () => {
      store.commit('SET_LOADING', true)
      window.location.href =
        'https://mp.weixin.qq.com/insurance/card/creditjump?cityid=430100&from=u1ZYLGrYTJspxoHAQoU96w.%3D#wechat_redirect'
    }

    const todzjkk = () => {
      router.push('/electronicHealthCardHome')
    }

    const loading = ref(false)
    onMounted(() => {
      if (doctors.value.length === 0) {
        loading.value = true
        const url = import.meta.env.VITE_BASE_URL + '/homepage/selectHomePageDoctors'
        axios({
          withCredentials: true,
          url: url,
        }).then((res) => {
          store.commit('SET_HOMEPAGEDOCTORS', res.data.data)
          loading.value = false
        })
      }
    })
    return {
      filterPath,
      doctors,
      router,
      clickDoctor,
      swipeStyle,
      swipeRowStyle,
      portraitHeight,
      portraitWidth,
      infoStyle,
      specialtyStyle,
      defaultPatientId,
      routeTo,
      toVaccinateAppointment,
      loadingStyle,
      loading,
      toybdzpz,
      todzjkk,
    }
  },
}
</script>

<style scoped>
.logo-div {
  width: 92.5%;
  margin-left: 3%;
  height: 60px;
  line-height: 60px;
  display: flex;
  justify-content: space-between;
}
.big-box {
  margin-top: 10px;
  width: 90%;
  margin-left: 5%;
  height: 70px;
  background-size: 100%;
  border-radius: 8px;
  display: flex;
  align-items: center;
}
.hsjctext {
  font-size: 36px;
  color: rgba(4, 59, 104, 0.9);
  font-weight: bold;
  padding-left: 8px;
}
.large-icon {
  margin-left: 10px;
  margin-top: 11px;
}

.xinguanjiance {
  background: url('../../assets/hospital-service/xinguanjiancebackground.png') no-repeat !important;
  background-size: 100% !important;
}

.bold-text {
  font-weight: bold;
}

#router-lane .van-col {
  text-align: center;
}

#router-lane img {
  width: 32px;
  height: 32px;
}

.icon-label {
  font-size: 13px;
  color: #333;
  /* color:#048a9e; */
}

.doctor-loading-box {
  position: fixed;
  display: inline-block;
  width: 120px;
  padding: 15px 0;
  vertical-align: middle;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  box-shadow: 1px 2px 9px 5px rgba(0, 0, 0, 0.1);
}
</style>