544 lines
16 KiB
Vue
544 lines
16 KiB
Vue
<template >
|
||
|
||
<div class="edu-head">
|
||
|
||
<div class="department">
|
||
<nut-image class="dicon" width="40" height="40" :src=hospitalLogo alt="图片描述" round />
|
||
<div class="dtitle">
|
||
<nut-ellipsis
|
||
:content=hospital
|
||
rows="1"
|
||
direction="end"
|
||
v-if="hospital.length>10"
|
||
></nut-ellipsis>
|
||
<nut-ellipsis
|
||
:content=dtitle
|
||
v-if="hospital.length>10"
|
||
rows="1"
|
||
direction="end"
|
||
></nut-ellipsis>
|
||
<div v-if="hospital.length<11">{{ hospital}}</div>
|
||
<div v-if="hospital.length<11">{{dtitle }}</div>
|
||
</div>
|
||
|
||
<div class="changedepart" @click="changedepart" v-if="hospital.length<11">
|
||
<img src='../assets/change_depart.png' style=" width: 16px;height: 16px;">
|
||
切换科室</div>
|
||
</div>
|
||
<search :message="searchMessage" />
|
||
</div>
|
||
<div style="background: var(--back-color-01);">
|
||
<nut-overlay v-model:visible="show" :close-on-click-overlay="false">
|
||
<div class="wrapper">
|
||
<div class="content" v-if="showPop">
|
||
<div class="raido_title">切换科室</div>
|
||
<nut-radio-group v-model="radioVal" @change="handleChange" class="contentchild">
|
||
<div v-for="(item, index) in departemntlist">
|
||
<nut-radio :label=index>
|
||
<template #icon>
|
||
<!-- <IconFont size="16" name= 'src/assets/radio_no.png' :style="{ 'margin-top': '3px' }" /> -->
|
||
<IconFont size="16" :name=radio_no :style="{ 'margin-top': '3px' }" />
|
||
</template>
|
||
<template #checkedIcon>
|
||
<!-- <IconFont size="16" name= 'src/assets/radio_sel.png' :style="{ 'margin-top': '3px' }" /> -->
|
||
<IconFont size="16" :name=radio_sel :style="{ 'margin-top': '3px' }" />
|
||
</template>
|
||
{{ item.officeName }}
|
||
</nut-radio>
|
||
</div>
|
||
</nut-radio-group>
|
||
<div :style="{
|
||
display: 'flex', background: '#FFFFFF',
|
||
'border-radius': '0px 0px 12px 12px'
|
||
}">
|
||
<div class="bt_no" @click.stop="handleclick(false)">取消</div>
|
||
<div class="bt_yes" @click.stop="handleclick(true)">确认</div>
|
||
</div>
|
||
</div>
|
||
<div class="content1" v-if="showPop1">
|
||
<div class="raido_title">温馨提示</div>
|
||
<div class="raido_title1">{{ '您确定要跳转到：' + hospitaltmp + '-' + dtitletmp }}</div>
|
||
<div class="raido_title2">{{ '您当前浏览的科室为：' + hospital + '-' + dtitle }}</div>
|
||
<div :style="{ display: 'flex' }">
|
||
<div class="bt_no" @click.stop="handleclick(false)">取消</div>
|
||
<div class="bt_yes" @click.stop="handleclick(true, true)">确认</div>
|
||
</div>
|
||
|
||
<div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</nut-overlay>
|
||
<div class="classgrid">
|
||
<div v-if="appOfficeCeecList.length > 0" :style="{
|
||
|
||
'background-size': '100% 100%', 'height': '188px', 'background-repeat': 'no-repeat', 'border-radius': '8px'
|
||
}" @click="gotoNextPage(appOfficeCeecList[0])" v-lazy:background-image="imgurl + appOfficeCeecList[0].ceecImg">
|
||
<div class="ftitle">{{ appOfficeCeecList[0].ceecName }}</div>
|
||
<div class="fcontent" v-if="appOfficeCeecList[0].ceecArticleNum > 0">{{ '共' + appOfficeCeecList[0].ceecArticleNum
|
||
+ '篇'
|
||
}}</div>
|
||
</div>
|
||
<div class="classgrid1">
|
||
<div :style="{
|
||
'height': '88px',
|
||
'background-size': '100% 100%', 'background-repeat': 'no-repeat', 'border-radius': '8px'
|
||
}" @click="gotoNextPage(appOfficeCeecList[1])" v-if="appOfficeCeecList.length > 1" v-lazy:background-image="imgurl + appOfficeCeecList[1].ceecImg">
|
||
<div class="ftitle">{{ appOfficeCeecList[1].ceecName }}</div>
|
||
<div class="fcontent" v-if="appOfficeCeecList[1].ceecName=='科普直播'"><img src='../assets/nowb.gif' style=" width: 20px;height: 20px;"></div>
|
||
<div class="fcontent" v-else-if="appOfficeCeecList[1].ceecArticleNum > 0">{{
|
||
'共' + appOfficeCeecList[1].ceecArticleNum + '篇' }}</div>
|
||
</div>
|
||
<div :style="{
|
||
'height': '88px',
|
||
'background-size': '100% 100%', 'background-repeat': 'no-repeat', 'border-radius': '8px'
|
||
}" @click="gotoNextPage(appOfficeCeecList[2])" v-if="appOfficeCeecList.length > 2" v-lazy:background-image="imgurl + appOfficeCeecList[2].ceecImg">
|
||
<div class="ftitle">{{ appOfficeCeecList[2].ceecName }}</div>
|
||
<div class="fcontent" v-if="appOfficeCeecList[2].ceecName=='科普直播'"><img src='../assets/nowb.gif' style=" width: 20px;height: 20px;"></div>
|
||
<div class="fcontent" v-else-if="appOfficeCeecList[2].ceecArticleNum > 0">{{
|
||
'共' + appOfficeCeecList[2].ceecArticleNum + '篇' }}</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div v-for="(item, index) in appOfficeCeecList.slice(3)" :style="{
|
||
'height': '88px',
|
||
'background-size': '100% 100%', 'background-repeat': 'no-repeat', 'border-radius': '8px'
|
||
}" @click="gotoNextPage(item)" v-lazy:background-image="imgurl + item.ceecImg">
|
||
<div class="ftitle">{{ item.ceecName }} </div>
|
||
<div class="fcontent" v-if="item.ceecName=='科普直播'"><img src='../assets/nowb.gif' style=" width: 20px;height: 20px;"></div>
|
||
<div class="fcontent" v-else-if="item.ceecArticleNum > 0">{{ '共' + item.ceecArticleNum + '篇' }}</div>
|
||
|
||
</div>
|
||
<!-- <div class="third" @click="gotoLiving">
|
||
<div class="ftitle">科普直播 </div>
|
||
<div class="fcontent"><img src='../assets/nowb.gif' style=" width: 20px;height: 20px;"></div>
|
||
|
||
|
||
</div> -->
|
||
</div>
|
||
|
||
<TabTools></TabTools>
|
||
</div>
|
||
</template>
|
||
<script setup >
|
||
import { showToast } from '@nutui/nutui';
|
||
// import now from '../assets/nowb.gif'
|
||
import radio_no from '../assets/radio_no.png'
|
||
import radio_sel from '../assets/radio_sel.png'
|
||
import TabTools from '@/components/tabTools.vue';
|
||
// import change_depart from '../assets/change_depart.png'
|
||
import { IconFont } from '@nutui/icons-vue';
|
||
import { useRouter, useRoute } from 'vue-router';
|
||
import { WXSHAREHOME } from '../utils/wxshare-1.6.0';
|
||
import search from '../components/search.vue'
|
||
import { getIndex, imgurl,roootUrl } from '../utils/api.js'
|
||
// const Logos = ref('https://health-edu.oss-cn-beijing.aliyuncs.com/system/getheadimg.png');
|
||
const router = useRouter();
|
||
const routerr = useRoute();
|
||
const searchMessage = ref('请输入文章标题/疾病/关键词…');
|
||
const hospital = ref('');
|
||
const hospitalLogo = ref('https://health-edu.oss-cn-beijing.aliyuncs.com/system/getheadimg.png');
|
||
const show = ref(false);
|
||
const dtitle = ref('');
|
||
const dtitletmp = ref('');
|
||
const hospitaltmp = ref('');
|
||
const urltmp = ref('');
|
||
const radioVal = ref(dtitle.value);
|
||
const showPop1 = ref(false)
|
||
const showPop = ref(true)
|
||
let officeid = ''
|
||
let appid = ''
|
||
const urlSearchParams = new URLSearchParams(window.location.search)
|
||
const departemntlist = reactive([
|
||
])
|
||
const appOfficeCeecList = reactive([])
|
||
const handleChange = (value) => {
|
||
console.log('handleChange', value);
|
||
// window.location.href='http://dev.edu.igandan.com/h5/index.html?officeid='+departemntlist[value].offidId+'&appid='+departemntlist[value].appid
|
||
if (isNaN(value)) {
|
||
|
||
} else {
|
||
dtitletmp.value = departemntlist[value].officeName;
|
||
hospitaltmp.value = departemntlist[value].hospitalName;
|
||
officeid=departemntlist[value].officeId
|
||
urltmp.value = roootUrl+ departemntlist[value].officeId + '&appid=' + departemntlist[value].appid
|
||
}
|
||
|
||
|
||
};
|
||
onMounted(() => {
|
||
|
||
// appid = urlSearchParams.get('appid')
|
||
// officeid = urlSearchParams.get('officeid')
|
||
// alert("appid:"+appid)
|
||
// alert("officeid:"+officeid)
|
||
// console.log("appid", appid);
|
||
// console.log("officeid", officeid);
|
||
// localStorage.setItem("officeid", officeid);
|
||
// const token = localStorage.getItem(officeid + '-token');
|
||
// alert("token:"+token)
|
||
// console.log(officeid + '-token', token);
|
||
// if (token) {
|
||
|
||
|
||
const urlSearchParams = new URLSearchParams(window.location.search)
|
||
let officeid = urlSearchParams.get('officeid')
|
||
|
||
if(typeof officeid === "undefined"||officeid ==null|| officeid == "undefined")
|
||
{
|
||
|
||
}
|
||
else
|
||
{
|
||
localStorage.setItem("officeid", officeid);
|
||
}
|
||
appid = urlSearchParams.get('appid')
|
||
|
||
if(typeof appid === "undefined"||appid ==null|| appid == "undefined")
|
||
{
|
||
|
||
}
|
||
else
|
||
{
|
||
localStorage.setItem("appid", appid);
|
||
}
|
||
|
||
initData()
|
||
|
||
|
||
// } else {
|
||
// goGreet()
|
||
// }
|
||
})
|
||
|
||
// function goGreet() {
|
||
// const code = urlSearchParams.get('code')
|
||
// alert(code)
|
||
// if (code) {
|
||
// oauth2greet(appid, officeid, code).then((res) => {
|
||
// console.log("oauth2greetapp", res);
|
||
// localStorage.setItem(officeid + '-token', res.data);
|
||
// localStorage.setItem('default' + '-token', res.data);
|
||
// if(res.code === 30001){
|
||
// let encodedUrl = encodeURIComponent(window.location.href)
|
||
// window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appid + "&redirect_uri=" + encodedUrl + "&response_type=code&scope=snsapi_userinfo&state=1&component_appid=wx61944e1d991e380e&connect_redirect=1#wechat_redirect";
|
||
// return
|
||
// }
|
||
// }).then(()=>{
|
||
// initData()
|
||
// })
|
||
// } else {
|
||
// let encodedUrl = encodeURIComponent(window.location.href)
|
||
// window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appid + "&redirect_uri=" + encodedUrl + "&response_type=code&scope=snsapi_userinfo&state=1&component_appid=wx61944e1d991e380e&connect_redirect=1#wechat_redirect";
|
||
// }
|
||
// }
|
||
|
||
function initData() {
|
||
getIndex().then((data) => {
|
||
|
||
|
||
// if (data.code == 30007 || data.code == 40007) {
|
||
// goGreet()
|
||
// } else {
|
||
console.log("getIndex", data);
|
||
// Logos.value=data.data.hospitalLogo
|
||
hospital.value = data.data.appOffice.hospitalName
|
||
dtitle.value = data.data.appOffice.officeName
|
||
dtitletmp.value = data.data.appOffice.officeName
|
||
hospitalLogo.value = imgurl + data.data.appOffice.hospitalLogo
|
||
appOfficeCeecList.push(...data.data.appOfficeCeecList)
|
||
departemntlist.push(...data.data.appOfficeRecord)
|
||
localStorage.setItem("hospitalName", hospital.value);
|
||
localStorage.setItem("officeName", dtitle.value);
|
||
// }
|
||
WXSHAREHOME("宣教中心", '肝胆相照-肝胆病在线公共服务平台', window.location.href,"");
|
||
});
|
||
|
||
}
|
||
function handleclick(choose, close) {
|
||
if (close) {
|
||
|
||
window.location.href = urltmp.value
|
||
// showPop.value=true;
|
||
// showPop1.value=false;
|
||
// show.value=false;
|
||
// dtitle.value=dtitletmp.value;
|
||
}
|
||
else if (choose) {
|
||
if (dtitle.value == dtitletmp.value) {
|
||
show.value = false;
|
||
}
|
||
else {
|
||
showPop.value = false;
|
||
showPop1.value = true;
|
||
}
|
||
|
||
|
||
}
|
||
else {
|
||
showPop.value = true;
|
||
showPop1.value = false;
|
||
|
||
radioVal.value = dtitle.value
|
||
dtitletmp.value = dtitle.value
|
||
show.value = false;
|
||
|
||
}
|
||
}
|
||
|
||
function gotoLiving() {
|
||
router.push({ path: '/live' });
|
||
}
|
||
|
||
function gotoNextPage(item) {
|
||
if(item.ceecName=='科普直播')
|
||
{
|
||
router.push({ path: '/live' });
|
||
}
|
||
else if (item.ceecType == 2) {
|
||
window.location.href = item.ceecLink;
|
||
}
|
||
else {
|
||
// let json = { type: item.ceecName, ceecId: item.ceecId, from: 'edu-center' }
|
||
// router.push({
|
||
// path: '/information', state:
|
||
// {
|
||
// data: JSON.stringify(json)
|
||
|
||
// }
|
||
// });
|
||
router.push({ name: 'information', query:{type:item.ceecName,ceecId:item.ceecId,from:'edu-center'} });
|
||
|
||
}
|
||
|
||
}
|
||
function changedepart() {
|
||
if (departemntlist.length > 0) {
|
||
show.value = true
|
||
}
|
||
else {
|
||
showToast.text('暂无可切换的科室');
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped>
|
||
.edu-head {
|
||
background-image: url(../assets/edubg1.png);
|
||
background-size: cover;
|
||
padding-bottom: 48px;
|
||
}
|
||
|
||
.department {
|
||
width: 100%;
|
||
padding-top: 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
z-index: 1;
|
||
}
|
||
|
||
.dicon {
|
||
margin-left: 16px;
|
||
|
||
}
|
||
|
||
/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
|
||
|
||
.dtitle {
|
||
margin-left: 8px;
|
||
margin-right: 8px;
|
||
width: 100%;
|
||
flex: 1;
|
||
/* font-size: var(--font-size-14); */
|
||
font-size:18px;
|
||
font-family: AlibabaPuHuiTiM;
|
||
;
|
||
color: var(--text-color-normal);
|
||
line-height: 24px;
|
||
|
||
}
|
||
|
||
.changedepart {
|
||
display: flex;
|
||
background: rgba(255, 255, 255, 0.65);
|
||
border-radius: 14px;
|
||
margin-left: 16px;
|
||
margin-right: 8px;
|
||
padding: 3px 10px 3px 8px;
|
||
/* font-size: var(--font-size-12); */
|
||
font-size:14px;
|
||
font-family: AlibabaPuHuiTiR;
|
||
color: var(--text-color-normal);
|
||
line-height: 17px;
|
||
}
|
||
|
||
.wrapper {
|
||
display: flex;
|
||
height: 100%;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.content {
|
||
|
||
width: 80%;
|
||
min-height: 256px;
|
||
/* height: 256px; */
|
||
background: url(../assets/popbg.png);
|
||
background-size: contain;
|
||
|
||
background-repeat: no-repeat;
|
||
|
||
}
|
||
|
||
.contentchild {
|
||
/* height: 300px; */
|
||
min-height: 100px;
|
||
max-height: 300px;
|
||
overflow: scroll
|
||
}
|
||
|
||
.content1 {
|
||
|
||
width: 80%;
|
||
min-height: 256px;
|
||
/* height: 256px; */
|
||
background: linear-gradient(184deg, #F1FAFF 0%, #FFFFFF 100%);
|
||
box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05);
|
||
border-radius: 12px;
|
||
|
||
}
|
||
|
||
.raido_title {
|
||
margin: 16px;
|
||
font-size: var(--font-size-18);
|
||
font-family: AlibabaPuHuiTiM;
|
||
color: rgba(0, 0, 0, 0.85);
|
||
line-height: 24px;
|
||
}
|
||
|
||
.raido_title1 {
|
||
margin: 16px;
|
||
font-size: var(--font-size-16);
|
||
font-family: AlibabaPuHuiTiM;
|
||
color: rgba(0, 0, 0, 0.85);
|
||
line-height: 24px;
|
||
text-shadow: 0px 9px 28px rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.raido_title2 {
|
||
margin: 16px;
|
||
background: rgba(0, 0, 0, 0.04);
|
||
box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05);
|
||
border-radius: 4px;
|
||
padding: 8px;
|
||
font-size: var(--font-size-14);
|
||
font-family: AlibabaPuHuiTiR;
|
||
color: rgba(0, 0, 0, 0.65);
|
||
line-height: 22px;
|
||
text-shadow: 0px 9px 28px rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.nut-radio-group {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
background: #FFFFFF;
|
||
|
||
}
|
||
|
||
.nut-radio {
|
||
margin: 16px;
|
||
--nut-radio-label-margin-left: 8px;
|
||
--nut-radio-label-font-size: var(--font-size-16);
|
||
align-items: self-start;
|
||
font-family: AlibabaPuHuiTiR;
|
||
color: rgba(0, 0, 0, 0.85);
|
||
/* line-height: 24px; */
|
||
}
|
||
|
||
.bt_no {
|
||
flex: 1;
|
||
height: 48px;
|
||
background: rgba(0, 0, 0, 0.08);
|
||
border-radius: 8px;
|
||
margin-left: 16px;
|
||
margin-top: 16px;
|
||
font-size: var(--font-size-18);
|
||
font-family: AlibabaPuHuiTiM;
|
||
color: rgba(0, 0, 0, 0.45);
|
||
line-height: 48px;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text-align: center;
|
||
}
|
||
|
||
.bt_yes {
|
||
flex: 1;
|
||
height: 48px;
|
||
background: #3BB5FE;
|
||
border-radius: 8px;
|
||
margin: 16px;
|
||
font-size: var(--font-size-18);
|
||
font-family: AlibabaPuHuiTiM;
|
||
color: white;
|
||
line-height: 48px;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text-align: center;
|
||
}
|
||
|
||
.classgrid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
grid-gap: 12px;
|
||
/* margin: 16px; */
|
||
margin-top: -24px;
|
||
margin-left: 16px;
|
||
margin-right: 16px;
|
||
margin-bottom: 16px;
|
||
padding-bottom: 80px;
|
||
}
|
||
|
||
.classgrid1 {
|
||
display: grid;
|
||
grid-template-rows: repeat(2, 1fr);
|
||
grid-gap: 12px;
|
||
}
|
||
|
||
.ftitle {
|
||
margin-top: 21px;
|
||
margin-left: 16px;
|
||
font-size: var(--font-size-18);
|
||
font-family: AlibabaPuHuiTiM;
|
||
color: #314E4D;
|
||
line-height: 24px;
|
||
}
|
||
|
||
.fcontent {
|
||
margin-top: 4px;
|
||
margin-left: 16px;
|
||
/* font-size: var(--font-size-12); */
|
||
font-size: 14px;
|
||
font-family: AlibabaPuHuiTiR;
|
||
color: rgba(0, 0, 0, 0.45);
|
||
line-height: 17px;
|
||
}
|
||
|
||
.second {
|
||
height: 88px;
|
||
background: url(../assets/second.png);
|
||
background-size: contain;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
.third {
|
||
height: 88px;
|
||
background: url(../assets/liviing.png);
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
border-radius: 8px;
|
||
}
|
||
</style>
|