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 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 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('/nightClinic')">
          <img src="../../assets/hospital-service/night-clinic.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-row>
      <div style="height: 10px"></div>
      <van-row gutter="5">
        <van-col span="6" @click="routeTo(filterPath('/inPatientService/', '/selectInpatientCard'))">
          <img src="../../assets/hospital-service/zhuyuanfuwu.png"/>
          <div class="icon-label">住院服务</div>
        </van-col>
        <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-row>
      <div style="height: 10px"></div>
      <van-row gutter="5">
        <van-col span="6" @click="routeTo('/onlineConsult')">
          <img src="../../assets/hospital-service/online-consult.png"/>
          <div class="icon-label">在线咨询</div>
        </van-col>
        <van-col span="6" @click="routeTo('/selectTargetPatient')">
          <img src="../../assets/hospital-service/appointmentmanagement.png"/>
          <div class="icon-label">挂号管理</div>
        </van-col>
        <van-col span="6" @click="routeTo('/selectPriceQueryBranch')">
          <img src="../../assets/hospital-service/price-query.png"/>
          <div class="icon-label">价格查询</div>
        </van-col>
        <van-col span="6" @click="clickComplaintsAndSuggestions">
          <img src="../../assets/hospital-service/complaints_and_suggestions.png"/>
          <div class="icon-label">投诉与建议</div>
        </van-col>
      </van-row>
    </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>
    <div class="van-overlay" style="z-index: 2001" v-show="showComplaintsAndSuggestions">
      <div
          style="position: absolute; top: 60px; left: 30px; right: 30px; background: white; border-radius: 10px; padding-bottom: 20px">
        <div
            style="margin: 20px 0 20px 20px;font-size: 15px; font-weight: bold; padding-bottom: 10px; border-bottom: 1px solid gray">
          投诉与建议
        </div>
        <van-field required v-model="complaintsAndSuggestions.department" label="投诉科室"></van-field>
        <van-field required v-model="complaintsAndSuggestions.object" label="投诉对象"></van-field>
        <van-field required v-model="complaintsAndSuggestions.content" label="投诉与建议"></van-field>
        <van-field required v-model="complaintsAndSuggestions.contact" label="联系方式"></van-field>
        <van-field v-model="complaintsAndSuggestions.name" label="您的姓名"></van-field>
        <div style="padding: 0 20px; color: orangered; font-size: 12px">
          我们将在48小时之内和您进行联系，您的建议和意见是我们进步的动力！
        </div>
        <div style="display: flex; margin-top: 30px">
          <div style="width: 50%; padding: 12px">
            <van-button block @click="showComplaintsAndSuggestions = false">取消</van-button>
          </div>
          <div style="width: 50%; padding: 12px">
            <van-button block type="primary" @click="confirmComplaints">提交</van-button>
          </div>
        </div>
      </div>
    </div>
  </window-size>
</template>

<script>
import {computed, onMounted, reactive, ref} from 'vue'
import store from '../../store'
import {getDate} from '../../utils/date'
import router from '../../router'
import axios from 'axios'
import {submitComplaintsAndSuggestions} from "../../api/assessments";
import {showDialog} from "vant";

export default {
  setup() {
    const screenSize = store.state.screenSize
    const swipeStyle = {
      width: '90%',
      marginLeft: '5%',
      marginTop: '5px',
      height: screenSize.h - 460 + 'px',
      h: screenSize.h - 460,
      w: screenSize.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 showComplaintsAndSuggestions = ref(false)
    const complaintsAndSuggestions = reactive({
      openId: localStorage.getItem('openId'),
      department: null,
      object: null,
      content: null,
      contact: null,
      name: null,
    })
    const clickComplaintsAndSuggestions = () => {
      showComplaintsAndSuggestions.value = true
    }
    const confirmComplaints = () => {
      submitComplaintsAndSuggestions(complaintsAndSuggestions).then(res => {
        showComplaintsAndSuggestions.value = false
        complaintsAndSuggestions.department = null
        complaintsAndSuggestions.object = null
        complaintsAndSuggestions.content = null
        complaintsAndSuggestions.contact = null
        complaintsAndSuggestions.name = null
        showDialog({
          title: '提示',
          message: '提交成功！',
        }).then(() => {})
      })
    }

    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,
      showComplaintsAndSuggestions,
      complaintsAndSuggestions,
      clickComplaintsAndSuggestions,
      confirmComplaints
    }
  },
}
</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>