2024-10-29 11:14:25 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
|
<title>Document</title>
|
2024-10-31 04:27:27 +00:00
|
|
|
<link rel="stylesheet" href="/css/common.css" />
|
|
|
|
|
<link rel="stylesheet" href="/css/school.css" />
|
2024-11-04 11:01:08 +00:00
|
|
|
|
|
|
|
|
<script src="/js/axios.min.js"></script>
|
|
|
|
|
<script src="/js/vue.global.js"></script>
|
|
|
|
|
<script src="/js/common.js"></script>
|
|
|
|
|
<script src="/js/base.js"></script>
|
2024-11-05 11:00:36 +00:00
|
|
|
<script src="/js/masonry.pkgd.min.js"></script>
|
2024-11-04 11:01:08 +00:00
|
|
|
<style>
|
|
|
|
|
[v-cloak] {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
2024-10-29 11:14:25 +00:00
|
|
|
</head>
|
|
|
|
|
<body>
|
2024-11-04 11:01:08 +00:00
|
|
|
<div id="app" class="main">
|
2024-10-29 11:14:25 +00:00
|
|
|
<img class="index-icon" src="/img/index-icon.png" />
|
|
|
|
|
|
2024-11-04 11:01:08 +00:00
|
|
|
<div class="boxbox">
|
2024-10-29 11:14:25 +00:00
|
|
|
<div class="tab flexacenter">
|
|
|
|
|
首页
|
|
|
|
|
<img class="img" src="/img/arrows.svg" />
|
|
|
|
|
按学校查看
|
|
|
|
|
<img class="img" src="/img/arrows.svg" />
|
2024-11-04 11:01:08 +00:00
|
|
|
<div class="current">{{ info.name }}</div>
|
2024-10-29 11:14:25 +00:00
|
|
|
</div>
|
|
|
|
|
<div class="details flexflex">
|
|
|
|
|
<div class="logo flexcenter">
|
|
|
|
|
<img class="bj" src="/img/logo-bj.png" />
|
|
|
|
|
<img class="img" src="https://axure-file.lanhuapp.com/md5__68256768938198d279381608ea82d345.png" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="right">
|
2024-11-04 11:01:08 +00:00
|
|
|
<div class="name">{{ info.name }}</div>
|
|
|
|
|
<div class="name-en">{{ info.enname }}</div>
|
2024-10-29 11:14:25 +00:00
|
|
|
<div class="world">
|
|
|
|
|
<div class="head flexcenter">
|
|
|
|
|
<div class="icon flexcenter">
|
|
|
|
|
<img class="img" src="https://app.gter.net/image/miniApp/offer/world-ranking-icon.png" mode="widthFix" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="list flexacenter">
|
2024-11-04 11:01:08 +00:00
|
|
|
<div class="item flex1 flexacenter" v-for="item in info.ranks">
|
2024-10-29 11:14:25 +00:00
|
|
|
<div class="quantity">16</div>
|
|
|
|
|
<div class="ranking-name">
|
2024-11-04 11:01:08 +00:00
|
|
|
{{ item.mechanism }}
|
|
|
|
|
<img v-if="item.mechanism == 'QS'" class="ranking-icon" src="/img/triangle-QS.svg" />
|
|
|
|
|
<img v-if="item.mechanism == '泰晤士'" class="ranking-icon" src="/img/triangle-TIMES.svg" />
|
|
|
|
|
<img v-if="item.mechanism == 'USNEWS'" class="ranking-icon" src="/img/triangle-US-News.svg" />
|
|
|
|
|
<img v-if="item.mechanism == '软科'" class="ranking-icon" src="/img/triangle-Soft.svg" />
|
2024-10-29 11:14:25 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-11-04 11:01:08 +00:00
|
|
|
<div class="brief" :style="{'height': (briefShow?briefHeight : 40) + 'px'}" :class="{'brief-show': briefShow}">
|
|
|
|
|
<div ref="briefRef" class="brief-dom">{{ info.message }}</div>
|
|
|
|
|
<div class="text one-line-display">{{ info.message }}</div>
|
|
|
|
|
<img class="img" @click="cutBriefShow" src="/img/arrows-gray-icon.png" />
|
2024-10-29 11:14:25 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 热门项目 -->
|
|
|
|
|
<div class="hot">
|
|
|
|
|
<div class="header flexacenter">
|
|
|
|
|
<div class="icon flexcenter">
|
|
|
|
|
<img class="img" src="/img/hot-icon.png" />
|
|
|
|
|
</div>
|
|
|
|
|
热门项目
|
|
|
|
|
</div>
|
2024-11-04 11:01:08 +00:00
|
|
|
<div class="list flexflex" ref="hotListRef">
|
|
|
|
|
<div class="list-item" v-for="(item,index) in hotList">
|
|
|
|
|
<div class="item flexacenter" v-for="(item,i) in item">
|
2024-10-29 11:14:25 +00:00
|
|
|
<div class="left flex1">
|
2024-11-04 11:01:08 +00:00
|
|
|
<div class="name">{{ item.name_zh }}</div>
|
2024-10-29 11:14:25 +00:00
|
|
|
<div class="text flexacenter">
|
2024-11-04 11:01:08 +00:00
|
|
|
{{ item.name_en }}
|
2024-10-29 11:14:25 +00:00
|
|
|
<div class="ranking flexacenter">
|
|
|
|
|
<div class="vertical">|</div>
|
|
|
|
|
专业排名
|
|
|
|
|
<div class="number">52</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="operate flexcenter">
|
2024-11-04 11:01:08 +00:00
|
|
|
<div v-if="item.contraststatus == 1" class="already flexacenter">
|
2024-10-29 11:14:25 +00:00
|
|
|
<div class="tick-box flexcenter">
|
|
|
|
|
<img class="img-tick" src="/img/tick-icon.svg" />
|
|
|
|
|
</div>
|
|
|
|
|
已加入
|
|
|
|
|
</div>
|
2024-11-04 11:01:08 +00:00
|
|
|
<div v-else class="circle flexcenter" :class="'add' + item.random" @click.stop="handleClick('hot',item,index,i)">
|
2024-10-29 11:14:25 +00:00
|
|
|
<img class="img-add" src="/img/add-thick.svg" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="indicate flexcenter">
|
2024-11-04 11:01:08 +00:00
|
|
|
<img class="icon" @click="cutHotListPage('left')" :src="reversedMessage('left')" />
|
|
|
|
|
<div class="text">{{ hotListPage }}/{{ hotListTotalPage }}</div>
|
|
|
|
|
<img class="icon btn-right" @click="cutHotListPage('right')" :src="reversedMessage('right')" />
|
2024-10-29 11:14:25 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- -->
|
|
|
|
|
<div class="content">
|
|
|
|
|
<div class="header flexcenter">项目筛选</div>
|
|
|
|
|
<div class="body flexflex">
|
|
|
|
|
<div class="left">
|
2024-11-05 11:00:36 +00:00
|
|
|
<div class="item flexacenter" :class="{'pitch': screen.pitch == 'all'}" @click="selectScreen('all')"><img class="img" src="/img/side-all.png" /><img class="img img-pitch" src="/img/side-all-pitch.png" />全部项目</div>
|
|
|
|
|
<div class="item flexacenter" :class="{'pitch': screen.pitch == 'subject'}" @click="selectScreen('subject')"><img class="img" src="/img/side-subject.png" /><img class="img img-pitch" src="/img/side-subject-pitch.png" />按学科</div>
|
|
|
|
|
<div class="item flexacenter" :class="{'pitch': screen.pitch == 'school'}" @click="selectScreen('school')"><img class="img" src="/img/side-school.png" /><img class="img img-pitch" src="/img/side-school-pitch.png" />按学院</div>
|
2024-10-29 11:14:25 +00:00
|
|
|
</div>
|
|
|
|
|
<div class="right flex1">
|
2024-11-05 11:00:36 +00:00
|
|
|
<div class="screen" v-if="screen.pitch == 'subject'">
|
2024-10-29 11:14:25 +00:00
|
|
|
<div class="title">按学科查看：</div>
|
|
|
|
|
<div class="list flexflex">
|
2024-11-05 11:00:36 +00:00
|
|
|
<div class="item flexcenter" :class="{'pitch': screen.disciplineid == item.disciplineid }" v-for="item in screen.list" @click="selectScreenItem(item)">{{ item.name }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="screen" v-if="screen.pitch == 'school'">
|
|
|
|
|
<div class="title">按学院查看：</div>
|
|
|
|
|
<div class="list flexflex">
|
|
|
|
|
<div class="item flexcenter" :class="{'pitch': screen.university == item.value }" v-for="item in screen.list" @click="selectScreenItem(item)">{{ item.value }}</div>
|
2024-10-29 11:14:25 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="h flexacenter">
|
2024-11-05 11:00:36 +00:00
|
|
|
<div class="total">共 {{ count }} 个项目</div>
|
2024-10-29 11:14:25 +00:00
|
|
|
<div class="sort flexacenter">
|
|
|
|
|
学费由低到高
|
|
|
|
|
<img class="img" src="/img/sort-icon.png" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2024-11-05 11:00:36 +00:00
|
|
|
<div class="list flexflex" ref="dataListRef">
|
|
|
|
|
<div class="item" v-for="(item ,index) in showList">
|
2024-10-29 11:14:25 +00:00
|
|
|
<div class="operate flexcenter">
|
2024-11-05 11:00:36 +00:00
|
|
|
<div v-if="item.contraststatus?.status === 1 && item.contraststatus?.ismanage === 1" class="already flexacenter">
|
|
|
|
|
<div class="tick-box flexcenter">
|
|
|
|
|
<img class="img-tick" src="/img/tick-icon.svg" />
|
|
|
|
|
</div>
|
|
|
|
|
已加入
|
2024-10-29 11:14:25 +00:00
|
|
|
</div>
|
2024-11-05 11:00:36 +00:00
|
|
|
<div v-else-if="item.contraststatus?.status === 0 || item.contraststatus?.ismanage === 0" @click="openMoreSelect(index)" class="circle flexcenter">
|
2024-10-29 11:14:25 +00:00
|
|
|
<img class="img-dot" src="/img/dot-dot-dot.png" />
|
|
|
|
|
</div>
|
2024-11-05 11:00:36 +00:00
|
|
|
<div v-else class="circle flexcenter" :class="'add' + item.random" @click="handleClick('list',item,index)">
|
|
|
|
|
<img class="img-add" src="/img/add-thick.svg" />
|
|
|
|
|
</div>
|
|
|
|
|
<div v-if="item.moreState" class="select-mask" @click="closeMoreSelectAll()"></div>
|
|
|
|
|
<div class="select flexflex" :class="{'show': item.moreState}">
|
2024-10-29 11:14:25 +00:00
|
|
|
<div class="title flexacenter">
|
|
|
|
|
<div class="dot"></div>
|
2024-11-05 11:00:36 +00:00
|
|
|
{{ item.contraststatus?.status == 1 ? '该项目已加入对比单，未加入项目管理' : '该项目已加入项目管理，未加入对比单' }}
|
2024-10-29 11:14:25 +00:00
|
|
|
</div>
|
2024-11-05 11:00:36 +00:00
|
|
|
<div class="btn flexcenter" @click="handleClick('list',item,index)"><img class="img" src="/img/add-circle.svg" />加入{{ item.contraststatus?.status == 1 ? '项目管理' : '对比单' }}</div>
|
2024-10-29 11:14:25 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-11-05 11:00:36 +00:00
|
|
|
<div class="name flexflex">{{ item.name_zh }}</div>
|
|
|
|
|
<div class="english">{{ item.name_en }}</div>
|
2024-10-29 11:14:25 +00:00
|
|
|
<div class="introduce flexacenter">
|
2024-11-05 11:00:36 +00:00
|
|
|
{{ item.department }}
|
|
|
|
|
<div class="flexacenter" v-if="item.rank">
|
2024-10-29 11:14:25 +00:00
|
|
|
<div class="line">|</div>
|
|
|
|
|
专业排名
|
2024-11-05 11:00:36 +00:00
|
|
|
<div class="quantity">{{ item.rank }}</div>
|
2024-10-29 11:14:25 +00:00
|
|
|
</div>
|
2024-11-05 11:00:36 +00:00
|
|
|
<div class="flexacenter" v-if="item.tuition_fee_text">
|
2024-10-29 11:14:25 +00:00
|
|
|
<div class="line">|</div>
|
2024-11-05 11:00:36 +00:00
|
|
|
学费HK$
|
|
|
|
|
<div class="quantity">{{ item.tuition_fee_text }}</div>
|
2024-10-29 11:14:25 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-11-05 11:00:36 +00:00
|
|
|
<div class="word" v-if="item.distinctive">{{ item.distinctive }}</div>
|
2024-10-29 11:14:25 +00:00
|
|
|
<div class="tag flexflex">
|
2024-11-05 11:00:36 +00:00
|
|
|
<div class="tag-item admissions" v-if="item.admissionsproject">招生官项目</div>
|
|
|
|
|
<div class="tag-item gray" :class="{'semester': item.semesterState}">{{ item.semester.text }}</div>
|
|
|
|
|
<div class="tag-item" v-for="item in item.tags">{{ item }}</div>
|
2024-10-29 11:14:25 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- 底部 -->
|
2024-11-04 11:01:08 +00:00
|
|
|
<base-bottom ref="baseRef"></base-bottom>
|
2024-10-29 11:14:25 +00:00
|
|
|
</div>
|
2024-11-04 11:01:08 +00:00
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
const { createApp, ref, onMounted, nextTick, onUnmounted, computed } = Vue
|
|
|
|
|
const projectSchool = createApp({
|
|
|
|
|
setup() {
|
2024-11-05 11:00:36 +00:00
|
|
|
const dataListRef = ref(null)
|
2024-11-04 11:01:08 +00:00
|
|
|
onMounted(() => {
|
2024-11-05 11:00:36 +00:00
|
|
|
window.addEventListener("scroll", handleScroll)
|
|
|
|
|
getBaseData().then(data => {
|
|
|
|
|
console.log("data", data)
|
|
|
|
|
})
|
2024-11-04 11:01:08 +00:00
|
|
|
getinit()
|
2024-11-05 11:00:36 +00:00
|
|
|
getProjectData()
|
|
|
|
|
|
|
|
|
|
listMasonryInstance = new Masonry(dataListRef.value, {
|
|
|
|
|
itemSelector: ".item",
|
|
|
|
|
gutter: 10,
|
|
|
|
|
})
|
2024-11-04 11:01:08 +00:00
|
|
|
})
|
|
|
|
|
|
2024-11-05 11:00:36 +00:00
|
|
|
const handleScroll = () => {
|
|
|
|
|
const scrollHeight = document.documentElement.scrollHeight
|
|
|
|
|
const clientHeight = document.documentElement.clientHeight
|
|
|
|
|
const scrollTop = window.pageYOffset
|
|
|
|
|
|
|
|
|
|
if (scrollTop + clientHeight >= scrollHeight) {
|
|
|
|
|
calculateShowList()
|
|
|
|
|
}
|
|
|
|
|
}
|
2024-11-04 11:01:08 +00:00
|
|
|
|
2024-11-05 11:00:36 +00:00
|
|
|
let id = 309
|
2024-11-04 11:01:08 +00:00
|
|
|
let info = ref({})
|
|
|
|
|
let hotList = ref([])
|
|
|
|
|
let discipline = ref([])
|
|
|
|
|
let universitydepartment = ref([])
|
|
|
|
|
|
|
|
|
|
const getinit = () => {
|
|
|
|
|
$ajaxget("/api/project.university/getInfo", {
|
|
|
|
|
id,
|
|
|
|
|
}).then(res => {
|
|
|
|
|
if (res.code != 200) return
|
|
|
|
|
const data = res.data
|
|
|
|
|
let list = data.hot_projects || []
|
|
|
|
|
list.forEach(element => {
|
|
|
|
|
element["random"] = randomString(6)
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// 将一维数组转换成二维数组，每两个元素为一组
|
|
|
|
|
let twoDimensionalArray = []
|
|
|
|
|
for (let i = 0; i < list.length; i += 4) {
|
|
|
|
|
twoDimensionalArray.push(list.slice(i, i + 4))
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
info.value = data.info
|
|
|
|
|
hotList.value = twoDimensionalArray
|
|
|
|
|
hotListTotalPage.value = twoDimensionalArray.length
|
|
|
|
|
discipline.value = data.discipline
|
|
|
|
|
universitydepartment.value = data.universitydepartment || []
|
|
|
|
|
|
|
|
|
|
// wx.nextTick(() => this.getBriefHeight())
|
|
|
|
|
|
|
|
|
|
nextTick(() => {
|
|
|
|
|
getBriefHeight()
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const briefRef = ref(null)
|
|
|
|
|
let briefHeight = ref(40)
|
|
|
|
|
let briefShow = ref(false)
|
|
|
|
|
|
|
|
|
|
const getBriefHeight = () => {
|
|
|
|
|
briefHeight.value = briefRef.value.clientHeight + 16 + 12 + 15
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const cutBriefShow = () => {
|
|
|
|
|
briefShow.value = !briefShow.value
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let hotListPage = ref(1)
|
|
|
|
|
let hotListTotalPage = ref(0) // 总页数
|
|
|
|
|
|
|
|
|
|
let hotListRef = ref(null)
|
|
|
|
|
const cutHotListPage = type => {
|
|
|
|
|
if (type == "left") {
|
|
|
|
|
if (hotListPage.value > 1) hotListPage.value--
|
|
|
|
|
} else {
|
|
|
|
|
if (hotListPage.value < hotListTotalPage.value) hotListPage.value++
|
|
|
|
|
}
|
|
|
|
|
hotListRef.value.scrollTo({
|
2024-11-05 11:00:36 +00:00
|
|
|
left: 1153.2 * (hotListPage.value - 1),
|
2024-11-04 11:01:08 +00:00
|
|
|
behavior: "smooth",
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 计算
|
|
|
|
|
const reversedMessage = type => {
|
|
|
|
|
if (type == "left") {
|
|
|
|
|
if (hotListPage.value == 1) return "/img/arrows-triangle-gray.svg"
|
|
|
|
|
else return "/img/arrows-triangle-blue.png"
|
|
|
|
|
} else {
|
|
|
|
|
if (hotListPage.value == hotListTotalPage.value) return "/img/arrows-triangle-gray.svg"
|
|
|
|
|
else return "/img/arrows-triangle-blue.png"
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const baseRef = ref(null)
|
|
|
|
|
|
|
|
|
|
// 点击事件
|
|
|
|
|
const handleClick = (type, item, index, i) => {
|
|
|
|
|
const random = item.random
|
|
|
|
|
|
|
|
|
|
if (item.status == 1) return
|
|
|
|
|
$ajax("/api/project.contrast/add", {
|
|
|
|
|
projectid: item.id,
|
|
|
|
|
}).then(res => {
|
|
|
|
|
baseRef.value.calculate(random, res.data.count)
|
|
|
|
|
if (type == "hot") hotList.value[index][i]["contraststatus"] = 1
|
2024-11-05 11:00:36 +00:00
|
|
|
if (type == "list") {
|
|
|
|
|
const uniqid = item["uniqid"]
|
|
|
|
|
listAll.forEach(element => {
|
|
|
|
|
if (element.uniqid == uniqid) {
|
|
|
|
|
element["contraststatus"] = {
|
|
|
|
|
status: 1,
|
|
|
|
|
ismanage: 1,
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
showList.value[index]["contraststatus"] = {
|
|
|
|
|
status: 1,
|
|
|
|
|
ismanage: 1,
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
showList.value[index]["moreState"] = false
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let count = ref(0)
|
|
|
|
|
let listAll = []
|
|
|
|
|
let screenList = []
|
|
|
|
|
let showList = ref([])
|
|
|
|
|
let page = ref(1)
|
|
|
|
|
let screen = ref({
|
|
|
|
|
pitch: "all",
|
|
|
|
|
name: "",
|
|
|
|
|
state: "",
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
const getProjectData = () => {
|
|
|
|
|
$ajaxget("/api/project.lists", {
|
|
|
|
|
limit: 2000,
|
|
|
|
|
page: 1,
|
|
|
|
|
sid: id,
|
|
|
|
|
}).then(res => {
|
|
|
|
|
if (res.code != 200) return
|
|
|
|
|
const data = res.data
|
|
|
|
|
|
|
|
|
|
let list = data.data || []
|
|
|
|
|
const date = new Date()
|
|
|
|
|
const month = date.getMonth() + 1
|
|
|
|
|
const year = date.getFullYear()
|
|
|
|
|
|
|
|
|
|
list.forEach(element => {
|
|
|
|
|
const semester = element.semester || {}
|
|
|
|
|
|
|
|
|
|
if (month > semester.month && year + 1 <= semester.year) element["semesterState"] = true
|
|
|
|
|
|
|
|
|
|
element["tuition_fee_text"] = formatNumberWithSpaces(element.tuition_fee)
|
|
|
|
|
element["random"] = randomString(6)
|
|
|
|
|
element["rankk"] = convertRankToRankText(element.rank)
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
listAll = list
|
|
|
|
|
// screenList = list
|
|
|
|
|
count.value = data.count
|
|
|
|
|
|
|
|
|
|
screenData()
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const convertRankToRankText = rank => {
|
|
|
|
|
if (!rank) return 0
|
|
|
|
|
if (rank.indexOf("-")) {
|
|
|
|
|
const range = rank.split("-")
|
|
|
|
|
const start = parseInt(range[0]) * 1
|
|
|
|
|
const end = parseInt(range[1]) * 1
|
|
|
|
|
return start || end || 0
|
|
|
|
|
} else return rank
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let sortIndex = ref(0) // 排名由高到低 0 学费由低到高 1 学费由高到低 2
|
|
|
|
|
|
|
|
|
|
// 筛选数据
|
|
|
|
|
const screenData = () => {
|
|
|
|
|
const sort = sortIndex.value
|
|
|
|
|
const disciplineid = screen.value["disciplineid"]
|
|
|
|
|
const university = screen.value["university"]
|
|
|
|
|
let list = []
|
|
|
|
|
if (disciplineid > 0) {
|
|
|
|
|
screenList = listAll.filter(item => item.disciplineid === disciplineid)
|
|
|
|
|
} else if (university) {
|
|
|
|
|
screenList = listAll.filter(item => item.department === university)
|
|
|
|
|
} else {
|
|
|
|
|
screenList = listAll
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (sort == 0) {
|
|
|
|
|
screenList.sort((a, b) => {
|
|
|
|
|
// a 排在后面
|
|
|
|
|
if (a.rankk == 0) return 1
|
|
|
|
|
// b 排在后面
|
|
|
|
|
if (b.rankk == 0) return -1
|
|
|
|
|
|
|
|
|
|
return a.rankk - b.rankk
|
|
|
|
|
})
|
|
|
|
|
} else if (sort == 1) {
|
|
|
|
|
// 按学费由低到高排序
|
|
|
|
|
screenList.sort((a, b) => {
|
|
|
|
|
if (a.tuition_fee == null) return 1
|
|
|
|
|
if (b.tuition_fee == null) return -1
|
|
|
|
|
return a.tuition_fee - b.tuition_fee
|
|
|
|
|
})
|
|
|
|
|
} else if (sort == 2) {
|
|
|
|
|
// 按学费由高到低排序
|
|
|
|
|
screenList.sort((a, b) => {
|
|
|
|
|
if (a.tuition_fee == null) return 1
|
|
|
|
|
if (b.tuition_fee == null) return -1
|
|
|
|
|
return b.tuition_fee - a.tuition_fee
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
count.value = screenList.length
|
|
|
|
|
showList.value = []
|
|
|
|
|
page.value = 1
|
|
|
|
|
calculateShowList()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let listMasonryInstance = null
|
|
|
|
|
|
|
|
|
|
// 在 screenList 数据截取要显示的数据
|
|
|
|
|
const calculateShowList = () => {
|
|
|
|
|
const limit = 20
|
|
|
|
|
if (page.value == 0) return
|
|
|
|
|
const startIndex = (page.value - 1) * limit
|
|
|
|
|
const endIndex = startIndex + limit
|
|
|
|
|
let list = screenList.slice(startIndex, endIndex)
|
|
|
|
|
showList.value = showList.value.concat(list)
|
|
|
|
|
|
|
|
|
|
// console.log(showList.value)
|
|
|
|
|
page.value = endIndex >= screenList.length ? 0 : page.value + 1
|
|
|
|
|
nextTick(() => {
|
|
|
|
|
listMasonryInstance.reloadItems()
|
|
|
|
|
listMasonryInstance.layout()
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const openMoreSelect = (index) => {
|
|
|
|
|
closeMoreSelectAll()
|
|
|
|
|
showList.value[index]["moreState"] = true
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 点击选择 中间 的 筛选
|
|
|
|
|
const selectScreen = type => {
|
|
|
|
|
screen.value["pitch"] = type
|
|
|
|
|
if (type == "all") {
|
|
|
|
|
screen.value["disciplineid"] = ""
|
|
|
|
|
screen.value["university"] = ""
|
|
|
|
|
screen.value["list"] = []
|
|
|
|
|
page.value = 1
|
|
|
|
|
sortIndex.value = 0
|
|
|
|
|
screenData()
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (type == "subject") {
|
|
|
|
|
console.log(discipline.value)
|
|
|
|
|
screen.value["university"] = ""
|
|
|
|
|
screen.value["disciplineid"] = discipline.value[0].disciplineid
|
|
|
|
|
screen.value["list"] = discipline.value
|
|
|
|
|
} else if (type == "school") {
|
|
|
|
|
screen.value["disciplineid"] = ""
|
|
|
|
|
screen.value["university"] = universitydepartment.value[0].value
|
|
|
|
|
screen.value["list"] = universitydepartment.value
|
|
|
|
|
}
|
|
|
|
|
sortIndex.value = 1
|
|
|
|
|
screenData()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const selectScreenItem = item => {
|
|
|
|
|
const pitch = screen.value["pitch"]
|
|
|
|
|
if (pitch == "subject") {
|
|
|
|
|
screen.value["disciplineid"] = item.disciplineid
|
|
|
|
|
screen.value["university"] = ""
|
|
|
|
|
} else if (pitch == "school") {
|
|
|
|
|
screen.value["disciplineid"] = ""
|
|
|
|
|
screen.value["university"] = item.value
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
screenData()
|
|
|
|
|
}
|
2024-11-04 11:01:08 +00:00
|
|
|
|
2024-11-05 11:00:36 +00:00
|
|
|
// 关闭所有 状态 选择 弹出框
|
|
|
|
|
const closeMoreSelectAll = type => {
|
|
|
|
|
showList.value.forEach(element => {
|
|
|
|
|
element["moreState"] = false
|
2024-11-04 11:01:08 +00:00
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
info,
|
|
|
|
|
hotList,
|
|
|
|
|
discipline,
|
|
|
|
|
universitydepartment,
|
|
|
|
|
briefShow,
|
|
|
|
|
cutBriefShow,
|
|
|
|
|
briefRef,
|
|
|
|
|
briefHeight,
|
|
|
|
|
|
|
|
|
|
hotListPage,
|
|
|
|
|
hotListTotalPage,
|
|
|
|
|
cutHotListPage,
|
|
|
|
|
reversedMessage,
|
|
|
|
|
hotListRef,
|
|
|
|
|
handleClick,
|
|
|
|
|
|
|
|
|
|
baseRef,
|
2024-11-05 11:00:36 +00:00
|
|
|
count,
|
|
|
|
|
|
|
|
|
|
showList,
|
|
|
|
|
openMoreSelect,
|
|
|
|
|
screen,
|
|
|
|
|
selectScreen,
|
|
|
|
|
selectScreenItem,
|
|
|
|
|
dataListRef,
|
|
|
|
|
closeMoreSelectAll,
|
2024-11-04 11:01:08 +00:00
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
})
|
|
|
|
|
projectSchool.component("base-bottom", base)
|
|
|
|
|
|
|
|
|
|
projectSchool.mount("#app")
|
|
|
|
|
</script>
|
2024-10-29 11:14:25 +00:00
|
|
|
</body>
|
|
|
|
|
</html>
|
