<!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/contrastDetails.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/encrypt.js"></script>
<script src="/js/masonry.pkgd.min.js"></script>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app" class="main" v-cloak>
<img class="index-icon" src="/img/index-icon.png" />
<div class="body" v-if="list.length != 0">
<div class="item flexflex">
<div class="head flexacenter">项目</div>
<div class="thead no-padding flex1 flexflex" v-for="(it,index) in list">
<div class="top flex1">
<img v-if="index < list.length - 1" class="vs" src="/img/vs.png" />
<div class="name">{{ it.name_zh }}</div>
<div class="name-en">{{ it.name_en }}</div>
<div class="school flexcenter">
<img class="icon" :src="it.schoollogo" />
{{ it.schoolname }}
</div>
</div>
<div class="operate flexacenter">
<div class="i flex1 flexcenter" @click="handleProject(index, 'replace')">
<img class="icon" src="/img/replace-icon.png" />
</div>
<div class="i flex1 flexcenter" @click="deleteProject(index)" v-if="list.length == 3">
<img class="icon" src="/img/delete-icon.svg" />
</div>
<div v-if="index == 0 && list.length == 2" @click="handleProject(index, 'add')" class="add flexcenter">
<img class="icon" src="/img/add-green.svg" />
</div>
</div>
</div>
</div>
<div class="item flexflex" v-for="(item,key) in listObj">
<div class="head flexacenter">{{ item }}</div>
<div class="thead flex1" v-for="(it,index) in list">
<!-- <div v-if="key == 'semester'" class="mode1 flexcenter">{{ it.rank || '-' }}</div> -->
<div v-if="key == 'semester'" class="tag flexcenter">
<div class="tag-item gray" :class="{'semester': it.semesterState}">{{ it?.semester?.text }}</div>
</div>
<div v-if="key == 'rank'" class="mode1 flexcenter">{{ it.rank || '-' }}</div>
<div v-if="key == 'rankings'" class="mode2 flexcenter">{{ it.rankings && it.rankings[0]?.rank || '-' }}</div>
<div v-if="key == 'disciplinename'" class="mode2 flexcenter">{{ it.disciplinename || '-' }}</div>
<div v-if="key == 'tuition_fee_text' && it.tuition_fee_text" class="mode3 flexcenter">
{{ it.tuition_fee_text }}
<div class="unit">HK$</div>
</div>
<div v-else-if="key == 'tuition_fee_text'" class="mode5 flexcenter">-</div>
<div v-if="key == 'admission_deposit_text' && it.admission_deposit_text" class="mode3 flexcenter">
{{ it.admission_deposit_text }}
<div class="unit">HK$</div>
</div>
<div v-else-if="key == 'admission_deposit_text'" class="mode5 flexcenter">-</div>
<div v-if="key == 'scholarshipText'" class="mode2 flexcenter">{{ it.scholarshipText || '-' }}</div>
<div v-if="key == 'ft_normal_period'" class="mode2 flexcenter">{{ it.ft_normal_period || '-' }}</div>
<div v-if="key == 'language_of_instruction_text'" class="mode2 flexcenter">{{ it.language_of_instruction_text || '-' }}</div>
<div v-if="key == 'concentration'" class="mode4 flexcenter">{{ it.concentration || '-' }}</div>
<div v-if="key == 'entrance_requirements'" class="mode4 flexcenter">{{ it.entrance_requirements || '-' }}</div>
<div v-if="key == 'english_proficiency_text'" class="mode4 flexcenter">{{ it.english_proficiency_text || '-' }}</div>
<div v-if="key == 'documents_required'" class="mode4 flexcenter">{{ it.documents_required || '-' }}</div>
<div v-if="key == 'accreditation'" class="mode4 flexcenter">{{ it.accreditation || '-' }}</div>
<div v-if="key == 'has_dissertation_course'" class="mode2 flexcenter">{{ it.has_dissertation_course ? '是' : '否' }}</div>
<div v-if="key == 'has_project_course'" class="mode2 flexcenter">{{ it.has_project_course ? '是' : '否' }}</div>
<div v-if="key == 'has_placement_course'" class="mode2 flexcenter">{{ it.has_placement_course ? '是' : '否' }}</div>
<div v-if="key == 'result_date'" class="mode4 flexcenter">{{ it.result_date || '-' }}</div>
<!-- <template wx:if="{{ item.disciplinename }}" is="mode2" data="{{ text: item.disciplinename }}"></template> -->
<!-- <div class="semester-box flexcenter">
<div class="semester">24Fall</div>
</div> -->
<!-- <div class="mode1 flexcenter">52</div> -->
<!-- <div class="mode2 flexcenter">16</div> -->
<!-- <div class="mode3 flexcenter">
281,000
<div class="unit">HK$</div>
</div> -->
<!-- <div class="mode4 flexcenter">・毕业于公认的大学，并获得计算机科学、计算机工程或相关领域的学士学位，通常要求二等荣誉或更高，或本科课程平均成绩为“B”或更好；或
・在高等教育机构完成学习课程，并获得等同于荣誉学位的专业或类似资格；或
・第一学历毕业于其他领域，但具有广泛的计算机相关内容；或
・通过远程教育或完成短期课程获得海外大学学位的申请者可能需要提供香港学术及职业资历评审局（HKCAAVQ）的评估报告，以证明所获得资格的水平。</div>
</div> -->
<!-- <div class="mode5 flexcenter">-</div> -->
</div>
</div>
</div>
<div class="handle-project-mask flexcenter" v-if="projectState">
<div class="handle-project">
<div class="handle-header">
{{ projectState == 'replace' ? '请选择替换的项目' : '还可以增加1个项目' }}
<div class="cross flexcenter" @click="cross">
<img class="icon" src="/img/cross-icon.png" />
</div>
</div>
<div class="list">
<template v-for="(item,index) in projectList">
<div class="item flexacenter" v-if="item.status == 1">
<div class="left flex1">
<div class="name">{{ item.name_zh }}</div>
<div class="english">{{ item.name_en }}</div>
<div class="bottom flexacenter">
<img class="icon" :src="item.schoollogo" />
{{ item.schoolalias }}
<template v-if="item.ismanage == 1">
<div class="line">|</div>
<div class="state flexcenter">{{ stateObj[item.typeid] }}</div>
</template>
</div>
</div>
<div class="btn flexcenter" @click="selectProject(index)">
<img v-if="projectState == 'replace'" class="icon" src="/img/replace.png" />
<img v-else class="icon" src="/img/arrows-straight-dark-cyan.png" />
</div>
</div>
</template>
</div>
</div>
</div>
<div class="base-footer flexcenter" :class="{'isnosave': isquick }">
<div class="flexacenter">
<div class="item flexacenter">
<img class="icon" src="/img/contrast-icon.png" />
项目对比
</div>
<div class="line">|</div>
<div class="item flexacenter">
<img class="icon" src="/img/manage-icon.png" />
项目管理
</div>
</div>
<div class="save flexacenter">
保存该组对比，方便下次快速查看
<img class="icon" src="/img/u2311.png" />
<div class="btn flexcenter" @click="save">保存</div>
</div>
</div>
</div>
<script>
const { createApp, ref, onMounted, nextTick, onUnmounted, computed } = Vue
const projectIndex = createApp({
setup() {
const listObj = ref({
semester: "招生季",
rank: "专业排名",
rankings: "学校合排名",
disciplinename: "学科领域",
tuition_fee_text: "学费",
admission_deposit_text: "入学保证金",
scholarshipText: "奖学金",
ft_normal_period: "一般学习时长",
language_of_instruction_text: "授课语言",
concentration: "专业方向",
entrance_requirements: "学术要求",
english_proficiency_text: "英语能力要求",
documents_required: "必要文件",
accreditation: "专业认证",
has_dissertation_course: "是否含论文课程",
has_project_course: "是否含项目课程",
has_placement_course: "是否含实习课程",
result_date: "录取通知时间",
})
let disciplineObj = { 1: "建筑学类", 2: "设计与艺术学类", 3: "商学与管理学类", 4: "计算机类", 5: "教育学类", 6: "工学类", 7: "文学类", 8: "语言学类", 9: "法学类", 10: "新闻传播学类", 11: "医学类", 12: "理学类", 13: "服务类", 14: "社会科学类" }
let list = ref([])
let isquick = ref(false)
let ids = []
onMounted(() => {
ids = "484,41".split(",") || []
getBaseData().then(data => {
initData()
})
})
const initData = () => {
$ajax("/api/project.contrast", {
projectid: ids,
}).then(res => {
if (res.code != 200) return
const data = res.data
const dataList = data.data || []
let allArr = []
dataList.forEach(element => allArr.push(decodeKey(element)))
const date = new Date()
const month = date.getMonth() + 1
const year = date.getFullYear()
const obj = disciplineObj
Promise.allSettled(allArr).then(res => {
console.log("res", res)
let targetList = []
res.forEach(element => targetList.push(element.status === "fulfilled" ? element.value : {}))
targetList.forEach(element => {
element["tuition_fee_text"] = formatNumberWithSpaces(element["tuition_fee"] || "")
element["admission_deposit_text"] = formatNumberWithSpaces(element["admission_deposit"] || "")
if (element.language_of_instruction) {
let strOutput = element.language_of_instruction.join(",")
element["language_of_instruction_text"] = strOutput
}
if (Array.isArray(element.english_proficiency)) {
const english = element.english_proficiency
let text = ""
english.forEach(element => {
text += `・${element.name_zh}(${element.name_en}) ${element.total}分以上 \n`
})
element["english_proficiency_text"] = text
}
if (element.scholarship) element["scholarshipText"] = JudgmentScholarshipText(element.scholarship)
element["disciplinename"] = obj[element.disciplineid] || ""
const semester = element.semester || {}
if (month > semester.month && year + 1 <= semester.year) element["semesterState"] = true
})
console.log("targetList", targetList)
list.value = targetList
isquick.value = data.isquick
})
})
}
// 判断奖学金文案
const JudgmentScholarshipText = obj => {
let text = ""
if (obj.local && obj.nonlocal) text = "均有"
else if (!obj.local && !obj.nonlocal) text = "均无"
else if (obj.local && !obj.nonlocal) text = "非本地学生无"
else if (!obj.local && obj.nonlocal) text = "非本地学生有"
return text
}
const stateObj = ref({
0: "待定",
1: "主申",
2: "冲刺",
3: "保底",
})
let projectList = ref([])
const getListData = () => {
$ajax("/api/project.user", {
limit: 2000,
}).then(res => {
if (res.code != 200) return
const data = res.data
let list = data.data || []
list = list.filter(obj => obj.status === 1 && !ids.includes(`${obj.projectid}`))
projectList.value = list
})
}
let selectIndex = null // 选中要替换或增加的 下标
let projectState = ref("") // 项目弹窗的状态 '' replace add
// 点击 顶部的 增加 或者 替换 项目
const handleProject = (index, type) => {
selectIndex = index
projectList.value = []
projectState.value = type
getListData()
}
const cross = () => {
projectState.value = ""
}
const selectProject = index => {
const target = projectList.value[index]
// 替换
if (projectState.value == "replace") ids[selectIndex] = `${target.projectid}`
else ids.push(`${target.projectid}`) // 增加
initData()
projectState.value = ""
}
const deleteProject = index => {
ids.splice(index, 1) // 从指定下标删除一个元素
list.value.splice(index, 1) // 从指定下标删除一个元素
}
// 点击保存
const save = () => {
$ajax("/api/project.contrast/addQuick", {
projectid: ids,
}).then(res => {
isquick.value = true
})
}
return {
listObj,
list,
isquick,
stateObj,
projectList,
projectState,
handleProject,
cross,
selectProject,
deleteProject,
save,
}
},
})
projectIndex.mount("#app")
</script>
</body>
</html>