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-25 18:39:49 +08:00
parent 4607702bdc
commit c80cee6eb0
11 changed files with 879 additions and 389 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/Empty.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="empty-box flexcenter">
<div class="empty-box-list flexcenter">
<div class="dot-list flexacenter">
<img class="item" src="@/assets/img/dot-yellow.svg" />
<img class="item" src="@/assets/img/dot-yellow.svg" />
@@ -20,7 +20,7 @@ let props = defineProps({
</script>
<style lang="less" scoped>
.empty-box {
.empty-box-list {
// width: 690px;
// height: 490px;
background-color: #ffffff;

24
components/Header.vue
View File

@@ -14,8 +14,8 @@
</div>
</div>
<div class="my-btn-list flexacenter">
<div class="my-btn-item flexcenter">我的收藏</div>
<div class="my-btn-item flexcenter">我的面经</div>
<div class="my-btn-item flexcenter" @click="handleUser('collect')">我的收藏</div>
<div class="my-btn-item flexcenter" @click="handleUser('mj')">我的面经</div>
</div>
<div class="sponsor-btn flexcenter" @click="goPublish">
<img class="add-icon" src="@/assets/img/add-icon.svg" />
@@ -25,8 +25,7 @@
</div>
</header>
<MyPopup v-if="false"></MyPopup>
<MyPopup ref="MyPopupRef" :count="count"></MyPopup>
</template>
<script setup>
@@ -37,15 +36,16 @@ let keyword = ref("")
onMounted(() => {
getHistoricalSearchList()
getUser()
// getUser()
})
let count = ref({})
const getUser = () => {
MyUserInfoHttp().then(res => {
if (res.code != 200) return
let data = res.data
console.log("data", data)
let count = data['count']
count.value = data["count"]
})
}
@@ -82,7 +82,7 @@ const setHistoricalSearchList = () => {
// 搜索点击事件
const searchClick = () => {
router.push(`/index.html?keyword=${keyword.value}`)
router.push(`/index.html?keyword=${keyword.value || ""}`)
setHistoricalSearchList()
searchBlur()
}
@@ -111,6 +111,14 @@ const handleClickClear = () => {
let historicalSearchState = ref(false) // 历史记录弹窗状态
let historicalSearchList = ref([]) // 历史记录数据
let MyPopupRef = ref(null)
// 点击我的获取消息
const handleUser = key => {
if (Object.keys(count.value).length === 0) getUser()
MyPopupRef.value.cutMy(key)
}
</script>
<style scoped lang="less">

495
components/MyPopup.vue
View File

@@ -1,44 +1,53 @@
<template>
<div class="popup-mask flexcenter">
<el-dialog v-model="show" width="750px" align-center class="dialog-box">
<!-- <div class="popup-mask flexcenter"> -->
<div class="box flexflex">
<img class="cross" src="@/assets/img/cross-icon.png" alt @click="cutMy('')" />
<div class="tba-list flexcenter">
<div class="tab-item pitch flexcenter">
<div class="tab-item flexcenter" :class="{ pitch: MyPopupState == 'collect' }" @click="cutMy('collect')">
我的收藏
<div class="value">12</div>
<div class="value">{{ count["collect"] }}</div>
</div>
<div class="tab-item flexcenter">
<div class="tab-item flexcenter" :class="{ pitch: MyPopupState == 'mj' }" @click="cutMy('mj')">
我的面经
<div class="value">12</div>
<div class="value">{{ count["publish"] }}</div>
</div>
</div>
<div class="empty-box flexcenter" v-if="false"><Empty></Empty></div>
<div class="content">
<div class="item flexflex" v-for="(item, index) in 10" :key="index">
<div class="empty-box flexcenter" v-if="showList.length == 0">
<Empty></Empty>
</div>
<div class="content" v-else @scroll="handleListScroll">
<div class="item flexflex" v-for="(item, index) in showList" :key="index" @click="goDetails(item['uniqid'])">
<div class="left flexflex">
<div class="name">香港理工大学</div>
<div class="name">{{ item["school"] }}</div>
<div class="info-box flexflex">
<div class="info-item flexacenter" v-for="item in 2" :key="item">
<div class="info-item flexacenter" v-if="item['profession']">
<div class="info-item-name">专业</div>
<div class="info-item-value">Electrical and Electronics Engineering</div>
<div class="info-item-value">{{ item["profession"] }}</div>
</div>
<div class="info-item flexacenter" v-if="item['project']">
<div class="info-item-name">项目</div>
<div class="info-item-value">{{ item["project"] }}</div>
</div>
</div>
<div class="text-box flexacenter">
我是本专业+跨专业申请，中大是直接给了推研所。没啥经验分享，主要是港大和港科的面经…
<div class="text-time">1小时前发布</div>
<div class="text-message flex1 ellipsis">{{ item["message"] }}</div>
</div>
</div>
<div class="operate-area flexacenter">
<!-- <img class="delete-icon" src="@/assets/img/delete-icon.svg" /> -->
<div class="anonymous-box flexacenter">
<div class="text">公开</div>
<img class="delete-icon" v-if="MyPopupState == 'collect'" src="@/assets/img/delete-icon.svg" />
<div class="anonymous-box flexacenter" v-else @click="openAnonymousState(index)">
<div class="text">{{ item["anonymous"] == 1 ? "匿名" : "公开" }}</div>
<img class="arrow-icon" src="@/assets/img/arrow-gray.svg" />
<div class="state-popup flexflex" v-if="false">
<div class="state-popup-item flexacenter flex1 pitch">
<div class="">公开发表</div>
<div class="state-popup flexflex" v-if="item['anonymousState']" @click.stop="">
<div class="state-popup-item flexacenter flex1" :class="{ 'pitch': item['anonymous'] == 0 }" @click="handleAnonymousState(item['token'], index)">
<div class>公开发表</div>
<img class="state-popup-icon" src="@/assets/img/tick-green.svg" />
</div>
<div class="state-popup-item flexacenter flex1">
<div class="">匿名发表</div>
<div class="state-popup-item flexacenter flex1" :class="{ 'pitch': item['anonymous'] == 1 }" @click="handleAnonymousState(item['token'], index)">
<div class>匿名发表</div>
<img class="state-popup-icon" src="@/assets/img/tick-green.svg" />
</div>
</div>
@@ -47,9 +56,106 @@
</div>
</div>
</div>
</div>
</el-dialog>
<!-- </div> -->
</template>
<script setup></script>
<script setup>
let props = defineProps({
// MyPopupState: String, // collect mj
count: Object,
})
let show = ref(false)
const router = useRouter()
let MyPopupState = ref("") // collect mj
onMounted(() => {
// if (MyPopupState.value == "collect") getCollect();
// else if (MyPopupState.value == "mj") getPublish();
})
// 展示的 列表数据
let showList = ref([])
let collectList = []
const getCollect = () => {
MyUserCollectHttp({}).then(res => {
if (res.code != 200) return
let data = res.data
collectList = collectList.concat(data.data)
showList.value = collectList
})
}
let publishList = []
let publisPage = 1
let publisloading = false
const getPublish = () => {
if (publisPage == 0 && !publisloading) return
publisloading = true
MyUserPublishHttp({ limit: 4, page: publisPage })
.then(res => {
if (res.code != 200) return
let data = res.data
publishList = publishList.concat(data.data)
if (publishList.length < data["count"]) publisPage++
else publisPage = 0
showList.value = publishList
})
.finally(() => (publisloading = false))
}
// 切换
const cutMy = key => {
if (key == "collect" && collectList.length == 0) getCollect()
else if (key == "mj" && publishList.length == 0) getPublish()
if (key == "collect") showList.value = collectList
else if (key == "mj") showList.value = publishList
MyPopupState.value = key
if (MyPopupState.value) show.value = true
else show.value = false
}
// 打开匿名弹窗
const openAnonymousState = index => {
publishList.forEach(element => {
element["anonymousState"] = false
})
publishList[index]["anonymousState"] = true
showList.value = [...publishList]
}
// 修改匿名状态
const handleAnonymousState = (token, index) => {
console.log("token", token, index)
}
// 详情页滚动事件
const handleListScroll = e => {
const el = e.target
// 判断滚动到底部
if (el.scrollHeight - el.scrollTop !== el.clientHeight) return
if (MyPopupState.value == "collect") getCollect()
if (MyPopupState.value == "mj") getPublish()
}
// 打开详情页
const goDetails = uniqid => {
router.push(`/details/${uniqid}`)
}
//暴露state和play方法
defineExpose({
cutMy,
})
// const emit = defineEmits(["cutMy"]);
</script>
<style lang="less" scoped>
.popup-mask {
width: 100vw;
@@ -62,185 +168,209 @@
max-height: none;
border: none;
outline: none;
.box {
width: 750px;
height: 606px;
background-color: rgba(255, 255, 255, 1);
border-radius: 10px;
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.117647058823529);
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.117647058823529);
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.117647058823529);
flex-direction: column;
padding: 30px 30px 46px;
z-index: 1;
}
.box {
width: 750px;
height: 606px;
background-color: rgba(255, 255, 255, 1);
border-radius: 10px;
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.117647058823529);
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.117647058823529);
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.117647058823529);
flex-direction: column;
padding: 30px 30px 46px;
position: relative;
.tba-list {
font-size: 16px;
margin-bottom: 29px;
.tab-item {
color: #aaaaaa;
padding: 0 22px;
cursor: pointer;
position: relative;
.cross {
position: absolute;
top: 12px;
right: 12px;
width: 12px;
height: 12px;
cursor: pointer;
}
&:first-of-type::after {
content: "";
width: 1px;
height: 16px;
background: #d7d7d7;
position: absolute;
right: 0;
}
.tba-list {
font-size: 16px;
margin-bottom: 29px;
.tab-item {
color: #aaaaaa;
padding: 0 22px;
cursor: pointer;
position: relative;
&:first-of-type::after {
content: "";
width: 1px;
height: 16px;
background: #d7d7d7;
position: absolute;
right: 0;
}
.value {
margin-left: 10px;
}
&.pitch {
font-weight: 650;
color: #000000;
.value {
margin-left: 10px;
}
&.pitch {
font-weight: 650;
color: #000000;
.value {
color: #555;
font-weight: 400;
}
color: #555;
font-weight: 400;
}
}
}
}
.empty-box {
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 1);
border: 1px solid rgba(235, 235, 235, 1);
border-radius: 6px;
margin: 0 auto;
}
.empty-box {
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 1);
border: 1px solid rgba(235, 235, 235, 1);
border-radius: 6px;
margin: 0 auto;
}
.content {
width: 100%;
height: 100%;
// background: #000000;
overflow: auto;
padding-right: 10px;
.content {
width: 100%;
height: 100%;
// background: #000000;
overflow: auto;
padding-right: 10px;
padding-bottom: 35px;
.item {
// flex-direction: column;
border-bottom: 1px dotted #ebebeb;
padding-bottom: 20px;
.item {
// flex-direction: column;
border-bottom: 1px dotted #ebebeb;
padding-bottom: 20px;
cursor: pointer;
margin-left: 22px;
margin-bottom: 21px;
.left {
flex-direction: column;
// padding-left: 22px;
position: relative;
&::after {
content: "";
position: absolute;
top: 4px;
left: -22px;
width: 5px;
height: 12px;
background-color: rgba(49, 215, 46, 1);
border-radius: 25px;
}
.name {
font-weight: 650;
font-size: 14px;
color: #000000;
margin-bottom: 10px;
}
.info-box {
flex-direction: column;
margin-bottom: 7px;
.info-item {
line-height: 24px;
&:not(:last-of-type) {
margin-bottom: 3px;
}
.info-item-name {
color: #7f7f7f;
font-size: 13px;
margin-right: 12px;
}
.info-item-value {
font-size: 13px;
color: #333333;
}
}
}
.text-box {
width: 580px;
height: 45px;
background-color: rgba(246, 246, 246, 1);
border-radius: 5px;
color: #000000;
font-size: 13px;
padding: 0 16px;
}
cursor: pointer;
margin-left: 22px;
margin-bottom: 21px;
.left {
flex-direction: column;
// padding-left: 22px;
position: relative;
&::after {
content: "";
position: absolute;
top: 4px;
left: -22px;
width: 5px;
height: 12px;
background-color: rgba(49, 215, 46, 1);
border-radius: 25px;
}
.operate-area {
flex: 1;
display: flex;
justify-content: flex-end;
.delete-icon {
width: 12px;
cursor: pointer;
}
.name {
font-weight: 650;
font-size: 14px;
color: #000000;
margin-bottom: 10px;
}
.info-box {
flex-direction: column;
margin-bottom: 7px;
.anonymous-box {
.text {
.info-item {
line-height: 24px;
&:not(:last-of-type) {
margin-bottom: 3px;
}
.info-item-name {
color: #7f7f7f;
font-size: 13px;
margin-right: 12px;
}
.info-item-value {
font-size: 13px;
color: #333333;
}
.arrow-icon {
width: 8px;
height: 5px;
margin-left: 6px;
}
}
}
.text-box {
width: 580px;
height: 45px;
line-height: 45px;
background-color: rgba(246, 246, 246, 1);
border-radius: 5px;
color: #000000;
font-size: 13px;
padding: 0 16px;
.text-time {
color: #7f7f7f;
padding-right: 16px;
position: relative;
.state-popup {
&::after {
content: "|";
position: absolute;
top: 30px;
right: 0;
width: 140px;
height: 101px;
background-color: rgba(255, 255, 255, 1);
border-radius: 10px;
-moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.203921568627451);
-webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.203921568627451);
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.203921568627451);
flex-direction: column;
right: 8px;
color: #d7d7d7;
}
}
}
}
.operate-area {
flex: 1;
display: flex;
justify-content: flex-end;
.delete-icon {
width: 12px;
cursor: pointer;
}
.state-popup-item {
justify-content: space-between;
color: #555;
font-size: 14px;
padding: 0 10px;
.anonymous-box {
.text {
font-size: 13px;
color: #333333;
}
.arrow-icon {
width: 8px;
height: 5px;
margin-left: 6px;
}
&:hover {
color: #000000;
}
position: relative;
&.pitch {
color: #72db86;
.state-popup-icon {
display: block;
}
}
.state-popup {
position: absolute;
top: 30px;
right: 0;
width: 140px;
height: 101px;
background-color: rgba(255, 255, 255, 1);
border-radius: 10px;
-moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.203921568627451);
-webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.203921568627451);
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.203921568627451);
flex-direction: column;
&:not(:last-of-type) {
border-bottom: 1px dotted #e3e3e3;
}
.state-popup-item {
justify-content: space-between;
color: #555;
font-size: 14px;
padding: 0 10px;
&:hover {
color: #000000;
}
&.pitch {
color: #72db86;
.state-popup-icon {
width: 11px;
height: 8px;
display: none;
display: block;
}
}
&:not(:last-of-type) {
border-bottom: 1px dotted #e3e3e3;
}
.state-popup-icon {
width: 11px;
height: 8px;
display: none;
}
}
}
}
@@ -249,3 +379,16 @@
}
}
</style>
<style lang="less">
.dialog-box {
header {
display: none;
}
border-radius: 10px;
.el-dialog__body {
padding: 0;
}
}
</style>