<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="/css/common.css" />
<link rel="stylesheet" href="/css/subject.css" />
<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>
<script src="/js/masonry.pkgd.min.js"></script>
</head>
<body>
<div class="main" id="app">
<img class="index-icon" src="/img/index-icon.png" />
<div class="boxbox">
<div class="tab flexacenter">
首页
<img class="img" src="/img/arrows.svg" />
按学科查看
<img class="img" src="/img/arrows.svg" />
<div class="current">{{ title }}</div>
</div>
<div class="info flexacenter">
<img class="img" src="/img/subject.png" />
<div class="flex1">
<div class="title">学科领域</div>
<div class="list flexflex">
<div class="item flexacenter" :class="{'pitch': item.value == id}" v-for="(item,index) in discipline" @click="cutDiscipline(item.value)">{{ item.label }}</div>
</div>
</div>
</div>
<div class="body flexflex">
<div class="left">
<div class="item flexacenter" :class="{'pitch': !sid}" @click="cutSid('')">
<img v-if="!sid" class="img" src="/img/side-all-pitch.png" />
<img v-else class="img" src="/img/side-all.png" />
全部项目
</div>
<div class="item flexacenter" :class="{'pitch': item.value == sid}" @click="cutSid(item.value)" v-for="(item,index) in university"><img class="img" :src="item.logo" />{{ item.name }}</div>
</div>
<div class="right flex1">
<div class="h flexacenter">
<div class="total">共 {{ count }} 个项目</div>
<div class="item flexacenter sort">
学费由低到高
<img class="img-sort" src="/img/sort-icon.png" />
<template v-if="!sortState">
<div class="sort-mask"></div>
<div class="sort-list">
<div class="sort-item pitch">排名由高到低</div>
<div class="sort-item">学费由低到高</div>
<div class="sort-item">学费由高到低</div>
</div>
</template>
</div>
<div class="item flexacenter" v-if="sid">
学校主页
<img class="img-school" src="/img/arrows-circle-black.svg" />
</div>
</div>
<div class="list flexflex" ref="dataListRef">
<div class="item" v-for="(item,index) in showList">
<div class="operate flexcenter">
<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>
已加入
</div>
<div v-else-if="item.contraststatus?.status === 0 || item.contraststatus?.ismanage === 0" @click="openMoreSelect(index)" class="circle flexcenter">
<img class="img-dot" src="/img/dot-dot-dot.png" />
</div>
<div v-else class="circle flexcenter" :class="'add' + item.random" @click="handleClick(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}">
<div class="title flexacenter">
<div class="dot"></div>
{{ item.contraststatus?.status == 1 ? '该项目已加入对比单，未加入项目管理' : '该项目已加入项目管理，未加入对比单' }}
</div>
<div class="btn flexcenter" @click="handleClick(item,index)"><img class="img" src="/img/add-circle.svg" />加入{{ item.contraststatus?.status == 1 ? '项目管理' : '对比单' }}</div>
</div>
</div>
<div class="name flexflex">{{ item.name_zh }}</div>
<div class="english">{{ item.name_en }}</div>
<div class="introduce flexacenter">
{{ item.department }}
<div class="flexacenter" v-if="item.rank">
<div class="line">|</div>
专业排名
<div class="quantity">{{ item.rank }}</div>
</div>
<div class="flexacenter" v-if="item.tuition_fee_text">
<div class="line">|</div>
学费HK$ <vie class="quantity">{{ item.tuition_fee_text }}</vie>
</div>
</div>
<div class="word" v-if="item.distinctive">{{ item.distinctive }}</div>
<div class="tag flexflex">
<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>
</div>
</div>
</div>
<div v-if="page == 0 && showList.length == 0" class="empty-box flexcenter">
<img class="icon" src="/img/empty-icon.png" />
<span class="text">暂无项目</span>
</div>
</div>
</div>
</div>
<!-- 底部 -->
<base-bottom ref="baseRef"></base-bottom>
</div>
<script>
const { createApp, ref, onMounted, nextTick, onUnmounted, computed } = Vue
const subject = createApp({
setup() {
const dataListRef = ref(null)
onMounted(() => {
window.addEventListener("scroll", handleScroll)
getBaseData().then(data => {
let list = JSON.parse(JSON.stringify(data.university)) || []
let obj = {}
data.discipline.forEach(element => {
obj[element.value] = element
})
title.value = obj[id.value].label
console.log("obj", obj)
discipline.value = obj
university.value = list
})
listMasonryInstance = new Masonry(dataListRef.value, {
itemSelector: ".item",
gutter: 10,
})
getData()
})
const handleScroll = () => {
const scrollHeight = document.documentElement.scrollHeight
const clientHeight = document.documentElement.clientHeight
const scrollTop = window.pageYOffset
if (scrollTop + clientHeight >= scrollHeight) {
calculateShowList()
}
}
let discipline = ref({})
let university = ref([])
let id = ref("3")
let title = ref("")
let sid = ref("")
const getData = () => {
$ajaxget("/api/project.lists", {
limit: 2000,
disciplineid: id.value,
sid: sid.value,
}).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 = list.map(element => ({
tuition_fee_text: formatNumberWithSpaces(element.tuition_fee),
...element,
rankk: convertRankToRankText(element.rank),
random: randomString(6),
semesterState: month > element.semester.month && year + 1 <= element.semester.year,
}))
function 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 || 0
}
listAll = list
screenList = list
count.value = data.count
page.value = 1
screenData()
})
}
let count = ref(0)
let listAll = []
let sortIndex = ref(1)
let screenList = []
let showList = ref([])
let page = ref(1)
// 筛选数据
const screenData = () => {
const sort = sortIndex.value
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
})
}
showList.value = []
count.value = screenList.length
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)
page.value = endIndex >= screenList.length ? 0 : page.value + 1
nextTick(() => {
listMasonryInstance.reloadItems()
listMasonryInstance.layout()
})
}
const cutSid = value => {
sid.value = value
getData()
}
const cutDiscipline = value => {
id.value = value
getData()
}
const baseRef = ref(null)
// 点击事件
const handleClick = (item, index, i) => {
const random = item.random
if (item.status == 1) return
$ajax("/api/project.contrast/add", {
projectid: item.id,
}).then(res => {
console.log(baseRef.value)
baseRef.value.calculate(random, res.data.count)
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
})
}
const openMoreSelect = index => {
closeMoreSelectAll()
showList.value[index]["moreState"] = true
}
// 关闭所有 状态 选择 弹出框
const closeMoreSelectAll = type => {
showList.value.forEach(element => {
element["moreState"] = false
})
}
return {
title,
discipline,
university,
id,
sid,
count,
sortIndex,
cutSid,
cutDiscipline,
showList,
dataListRef,
page,
handleClick,
openMoreSelect,
baseRef,
closeMoreSelectAll,
}
},
})
subject.component("base-bottom", base)
subject.mount("#app")
</script>
</body>
</html>