A1300399510/PC-mj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

no message

Browse Source
This commit is contained in:
A1300399510
2023-12-18 11:12:07 +08:00
commit 27d89922da
56 changed files with 14386 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1264
pages/details/[id].vue Normal file
View File

File diff suppressed because it is too large Load Diff

185
pages/index.html/index.vue Normal file
View File

@@ -0,0 +1,185 @@
<template>
<Header></Header>
<div class="search-result flexacenter" v-if="keyword">
<div class="keyword flexacenter" @click="clearKeyword">{{ keyword }} <img class="keyword-icon" src="@/assets/img/cross-circle-icon.png" /></div>
<div class="halving-line"></div>
<div class="total">共 {{ count }} 条搜索数据</div>
</div>
<div class="content" ref="gridContainer">
<div class="empty-box" v-if="list.length == 0 && page == 0">
<empty hint="没有找到相关结果，请更换搜索关键词"></empty>
</div>
<template v-else>
<Item v-for="(item, index) in list" :key="index" :item="item" @handleLike="handleLike"></Item>
</template>
</div>
<div class="in-end" v-if="page == 0 && list.length > 0">- 到底了 -</div>
<MyPopup v-if="false"></MyPopup>
</template>
<script setup>
import {ElMessage} from "element-plus"
const gridContainer = ref(null)
let masonryInstance = null
const route = useRoute()
let keyword = ref("") // 搜索
keyword.value = route.query["keyword"]
watchEffect(() => {
if (keyword.value != route.query["keyword"]) {
// keyword.value = route.query["keyword"]
console.log(keyword.value)
list.value = []
page.value = 1
keyword.value = route.query["keyword"]
getList(route.query["keyword"])
}
})
onMounted(async () => {
let Masonry = await import("masonry-layout")
masonryInstance = new Masonry.default(gridContainer.value, {
itemSelector: ".box",
gutter: 22.5,
})
// masonryInstance.reloadItems()
// masonryInstance.layout()
window.addEventListener("scroll", handleScroll)
})
const handleScroll = () => {
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
const scrollHeight = document.documentElement.scrollHeight
const clientHeight = document.documentElement.clientHeight
// 列表下 滑动到底部 获取新数据
if (scrollTop + clientHeight >= scrollHeight - 40) getList()
}
let page = ref(1)
let count = ref(0)
let list = ref([]) // 列表数据
let loading = false // 加载中
const getList = () => {
if (page.value == 0 || loading) return
loading = true
getListHttp({page: page.value, keyword: keyword.value})
.then(res => {
if (res.code != 200) return
// console.log("res", res.code)
let data = res.data
// list.value = data.data
list.value = list.value.concat(data.data || [])
if (data.count > list.value.length) page.value++
else page.value = 0
count.value = data["count"]
nextTick(() => {
masonryInstance.reloadItems()
masonryInstance.layout()
})
})
.finally(() => (loading = false))
}
getList()
const handleLike = token => {
operateLikeHttp({token}).then(res => {
if (res.code != 200) return
let data = res.data
console.log("data", data)
console.log(list.value, "list.value")
list.value.forEach(element => {
console.log(element, "element")
if (element["token"] == token) {
element["islike"] = data["status"]
element["likenum"] = data["count"]
}
})
ElMessage({
message: res.message,
type: "success",
})
})
}
onUnmounted(() => {
window.removeEventListener("scroll", handleScroll)
})
const router = useRouter()
// 清除搜索
const clearKeyword = () => {
router.push(`/index.html`)
}
</script>
<style scoped lang="less">
.search-result {
width: 1200px;
margin: 0 auto 30px;
.keyword {
color: #fa6b11;
font-size: 14px;
cursor: pointer;
.keyword-icon {
width: 14px;
height: 14px;
margin-left: 9px;
}
}
.halving-line {
width: 1px;
height: 13px;
background: #d7d7d7;
margin: 0 20px;
}
.total {
font-size: 13px;
color: #7f7f7f;
}
}
.content {
width: 1200px;
// height: 1000px;
margin: 0 auto 93px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.empty-box {
width: 1200px;
height: 540px;
background-color: rgba(255, 255, 255, 1);
border-radius: 16px;
}
}
.in-end {
font-size: 12px;
color: #7f7f7f;
text-align: center;
margin-bottom: 88px;
}
</style>

5
pages/index.vue Normal file
View File

@@ -0,0 +1,5 @@
<template></template>
<script setup>
const router = useRouter()
router.replace("/index.html")
</script>

388
pages/publish/index.vue Normal file
View File

@@ -0,0 +1,388 @@
<template>
<div class="flexacenter save-box save-left">
<img class="save-icon" src="@/assets/img/arrow-gray.png" />
保存并退出
</div>
<div class="flexacenter save-box save-right">
放弃保存
<img class="save-icon" src="@/assets/img/cross-icon.png" />
</div>
<div class="content">
<div class="header flexacenter">发布面经</div>
<div class="box flex1 flexflex">
<div class="box-left">
<div class="area-box">
<div class="item">
<div class="title flexacenter">
申请信息
<div class="asterisk">*</div>
</div>
<div class="info-box">
<div class="info-item flexacenter">
<div class="info-name">院校</div>
<div class="flex1">
<el-autocomplete v-model="state1" :fetch-suggestions="querySearch" clearable class="inline-input w-50" placeholder="输入关键词，选择院校" @select="handleSelect">
<template #suffix>
<img class="" src="@/assets/img/arrow-black.svg" />
</template>
</el-autocomplete>
</div>
</div>
<div class="info-item flexacenter">
<div class="info-name">专业</div>
<div class="flex1">
<el-autocomplete v-model="state1" :fetch-suggestions="querySearch" clearable class="inline-input w-50" placeholder="输入关键词，选择专业" @select="handleSelect">
<template #suffix>
<img class="" src="@/assets/img/arrow-black.svg" />
</template>
</el-autocomplete>
</div>
</div>
<div class="info-item flexacenter">
<div class="info-name">项目</div>
<el-input class="flex1 input" placeholder="请输入"></el-input>
</div>
</div>
</div>
<div class="item">
<div class="title flexacenter">
面试时间
<div class="asterisk">*</div>
</div>
<div class="time-box item-input-box flexacenter">
<el-config-provider :locale="zhCn">
<el-date-picker v-model="value1" type="date" placeholder="请选择" size="large" class="flex1 flexacenter" :clear-icon="{}" />
</el-config-provider>
<img class="calendar-icon" src="@/assets/img/calendar-icon.svg" />
</div>
</div>
<div class="item">
<div class="title flexacenter">
面经帖标题
<div class="asterisk">*</div>
</div>
<div class="title-box item-input-box flexacenter"><el-input v-model="title" placeholder="给你的面经帖起一个吸引的标题吧"></el-input></div>
</div>
</div>
<div class="visible-box flexacenter">
<img class="visible-icon" src="@/assets/img/frame-no.svg" />
回复/点赞可见
</div>
</div>
<div class="box-right">
<div class="area-box">
<div class="item">
<div class="title flexacenter">
面试构成及过程
<div class="asterisk">*</div>
</div>
<div class="course-box">
<el-input v-model="course" type="textarea" placeholder="例如：项目介绍、面试时长、面试官、问题QA、需要注意的地方"></el-input>
</div>
</div>
</div>
</div>
</div>
<div class="hint-box flexcenter">注：请确保以上内容已正确填写，发布后将不能修改</div>
</div>
<div class="floor-box">
<div class="box flexacenter">
<div class="anonymous-box flexacenter">
<img class="anonymous-icon" src="@/assets/img/frame-pitch.svg" />
<!-- <img class="anonymous-icon" src="@/assets/img/frame-no.svg" /> -->
匿名发表
<div class="text">（发布后可修改）</div>
</div>
<div class="issue-btn flexcenter">发布</div>
</div>
</div>
</template>
<script setup>
import zhCn from "element-plus/dist/locale/zh-cn.mjs"
console.log("zhCn", zhCn)
const state1 = ref("")
const restaurants = ref([])
onMounted(() => {
restaurants.value = loadAll()
getInit()
})
const getInit = () => {
publishInitHttp().then(res => {
console.log("res", res)
})
}
const querySearch = (queryString, cb) => {
const results = queryString ? restaurants.value.filter(createFilter(queryString)) : restaurants.value
// call callback function to return suggestions
cb(results)
}
const createFilter = queryString => {
return restaurant => {
return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
}
}
const loadAll = () => {
return [
{value: "vue", link: "https://github.com/vuejs/vue"},
{value: "element", link: "https://github.com/ElemeFE/element"},
{value: "cooking", link: "https://github.com/ElemeFE/cooking"},
{value: "mint-ui", link: "https://github.com/ElemeFE/mint-ui"},
{value: "vuex", link: "https://github.com/vuejs/vuex"},
{value: "vue-router", link: "https://github.com/vuejs/vue-router"},
{value: "babel", link: "https://github.com/babel/babel"},
]
}
const handleSelect = item => {
console.log(item)
}
const value1 = ref("")
const title = ref("")
const course = ref("")
</script>
<style scoped lang="less">
.content {
width: 1200px;
// height: 882px;
// min-height: 718px;
min-height: calc(100vh - 120px);
background: #fff;
margin: 30px auto 90px;
border-radius: 16px;
display: flex;
flex-direction: column;
.header {
font-weight: 650;
font-size: 20px;
color: #000000;
border-bottom: 1px solid #ebebeb;
height: 88px;
padding-left: 30px;
}
.box {
.title {
color: #666666;
font-size: 14px;
margin-bottom: 10px;
}
.box-left {
border-right: 16px solid #f6f6f6;
.area-box {
padding: 30px;
padding-right: 50px;
border-bottom: 1px solid #ebebeb;
.item {
&:not(:last-of-type) {
margin-bottom: 30px;
}
}
.info-box {
width: 452px;
height: 158px;
background-color: rgba(255, 255, 255, 0);
border: 1px solid rgba(215, 215, 215, 1);
border-radius: 5px;
display: flex;
flex-direction: column;
justify-content: center;
.info-item {
height: 50px;
&:not(:last-of-type) {
border-bottom: 1px solid #d7d7d7;
}
.info-name {
font-size: 14px;
color: #666666;
padding: 0 14px;
}
.input {
height: 100%;
// background: #000000;
// padding: 1px 11px;
border: none;
outline: none;
box-shadow: none;
/deep/ .el-input__wrapper {
box-shadow: none;
}
}
/deep/ .el-autocomplete {
width: 100%;
.el-input__wrapper {
box-shadow: none;
}
}
}
}
.item-input-box {
width: 452px;
height: 46px;
border: 1px solid rgba(215, 215, 215, 1);
border-radius: 5px;
cursor: pointer;
/deep/ .el-input {
height: 100%;
.el-input__wrapper {
height: 100%;
box-shadow: none;
}
}
}
.time-box {
.calendar-icon {
width: 15px;
height: 16px;
margin: 0 12px;
}
/deep/ .el-input {
.el-input__prefix {
display: none;
}
}
}
}
.visible-box {
margin: 30px;
font-size: 14px;
color: #555555;
cursor: pointer;
.visible-icon {
width: 18px;
height: 18px;
margin-right: 5px;
}
}
}
.box-right {
.area-box {
padding: 30px;
padding-left: 50px;
.course-box {
width: 572px;
min-height: 480px;
background-color: rgba(255, 255, 255, 0);
border: 1px solid rgba(215, 215, 215, 1);
border-radius: 5px;
/deep/ .el-textarea__inner {
min-height: 480px !important;
box-shadow: none;
padding: 13px;
}
}
}
}
}
.hint-box {
height: 58px;
background-color: rgba(246, 246, 246, 1);
color: #555555;
font-size: 13px;
}
}
.asterisk {
color: #fa9183;
margin-left: 5px;
}
.floor-box {
width: 100vw;
min-width: 1200px;
height: 90px;
background-color: rgba(255, 255, 255, 1);
-moz-box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.192156862745098);
-webkit-box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.192156862745098);
box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.192156862745098);
position: fixed;
bottom: 0;
.box {
width: 1200px;
height: 100%;
margin: 0 auto;
justify-content: space-between;
padding: 0 30px;
.anonymous-box {
cursor: pointer;
color: #333333;
font-size: 14px;
.text {
color: rgb(170, 170, 170);
font-size: 13px;
}
.anonymous-icon {
width: 18px;
height: 18px;
}
}
.issue-btn {
width: 200px;
height: 46px;
background-color: rgba(253, 223, 109, 1);
border-radius: 190px;
font-size: 16px;
color: #000000;
cursor: pointer;
}
}
}
.save-box {
font-size: 14px;
color: #666666;
position: fixed;
top: 30px;
cursor: pointer;
&.save-left {
left: 50px;
}
&.save-right {
right: 50px;
.save-icon {
width: 16px;
height: 16px;
margin-left: 10px;
}
}
.save-icon {
width: 22px;
height: 22px;
margin-right: 10px;
transform: rotate(180deg);
}
}
</style>