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="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 {Dialog, Toast} from "vant";
import {submitComplaintsAndSuggestions} from "../../api/assessments";

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 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
                Dialog.alert({
                    title: '提示',
                    message: '提交成功！',
                })
            })
        }

        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>