<!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/search.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>
<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="boxbox">
<div class="tab flexacenter">
<a href="/" target="_blank">首页</a>
<img class="img" src="/img/arrows.svg" />
<div class="current">项目搜索</div>
</div>
<div class="body flexflex">
<div class="left">
<div class="input-box flexacenter">
<input class="flex1" placeholder="请输入" v-model="kw" @keyup.enter="submit" />
<img class="search-icon" src="/img/search-black-icon.svg" />
</div>
<div class="total flexacenter">
共
<div class="sum">{{ count }}</div>
个搜索结果
</div>
<div v-if="count == 0 && showList.length == 0" class="empty-box flexcenter">
<img class="icon" src="/img/empty-icon.png" />
<span class="text">暂无搜索结果，换个关键词试试吧！</span>
</div>
<div class="list" v-if="showList.length != 0">
<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$
<div class="quantity">{{ item.tuition_fee_text }}</div>
</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>
<div class="right">
<template v-if="historyList.length != 0">
<div class="title flexacenter">
<div class="dot"></div>
历史搜索
</div>
<div class="list flexflex">
<div class="item flexcenter" v-for="item in historyList" @click="selectKW(item)">{{ item }}</div>
</div>
</template>
<div class="title flexacenter">
<div class="dot"></div>
标签搜索
</div>
<div class="list flexflex">
<div class="item flexcenter" v-for="item in 9">搜索</div>
</div>
</div>
</div>
</div>
<!-- 底部 -->
<div class="base flexcenter">
<div class="btn flexacenter"><img class="img" src="/img/contrast-icon.png" />项目对比</div>
<div class="line"></div>
<div class="btn flexacenter"><img class="img" src="/img/manage-icon.png" />项目管理</div>
</div>
</div>
<script>
const { createApp, ref, onMounted, nextTick, onUnmounted, computed } = Vue
const search = createApp({
setup() {
onMounted(() => {
// kw.value = "术"
// getList()
let history = localStorage.getItem("historyProject")
if (history) {
history = JSON.parse(history)
historyList.value = history
}
})
let historyList = ref([])
let kw = ref("")
let count = ref(0)
let listAll = []
const getList = () => {
console.log("kw", kw.value)
$ajaxget("/api/project.lists", {
limit: 2000,
page: 1,
keyword: kw.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.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)
})
listAll = list
count.value = data.count
calculateShowList()
})
}
let showList = ref([])
let page = ref(1)
// 在 listAll 数据截取要显示的数据
const calculateShowList = () => {
const limit = 20
if (page.value == 0) return
const startIndex = (page.value - 1) * limit
const endIndex = startIndex + limit
let list = listAll.slice(startIndex, endIndex)
showList.value = showList.value.concat(list)
console.log("showList", showList)
page.value = endIndex >= listAll.length ? 0 : page.value + 1
}
let pl = ref("")
const submit = () => {
kw.value = kw.value.trim()
if (kw.value == "") kw.value = pl.value
if (kw.value == "") return
if (!historyList.value.includes(kw.value)) historyList.value.unshift(kw.value)
localStorage.setItem("historyProject", JSON.stringify(historyList.value))
showList.value = []
page.value = 1
count.value = 0
getList()
}
const selectKW = name => {
kw.value = name
if (!historyList.value.includes(kw.value)) historyList.value.unshift(kw.value)
localStorage.setItem("historyProject", JSON.stringify(historyList.value))
showList.value = []
page.value = 1
count.value = 0
getList()
}
// 点击事件
const handleClick = (item, index) => {
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 { showList, count, kw, submit, pl, historyList, selectKW, handleClick, openMoreSelect, closeMoreSelectAll }
},
})
search.mount("#app")
</script>
</body>
</html>