A1300399510/GterForumWeB
2
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

啊

Browse Source
This commit is contained in:
xiaoronghao 2023-04-07 16:49:43 +08:00
parent 5b02c96c64
commit 2049ac392a
11 changed files with 210 additions and 220 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.vue
View File

@ -12,10 +12,12 @@ export default {
name: "App",
data() {
return {
loading: null,
}
},
mounted() {
this.$store.dispatch('fetchHistoricalSearch')
this.$store.dispatch('getAllForum', this)
},
}

13
src/assets/css/public.scss
View File

@ -230,3 +230,16 @@ section {
}
}
.result-empty-box {
height: 100%;
width: 100%;
background: #fff;
margin: 0 auto;
border-radius: 0.32rem;
.result-empty-icon {
width: 2.04rem;
height: 2.4rem;
}
}

BIN
src/assets/img/icon/like-o.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

23
src/components/SearchBox.vue
View File

@ -19,10 +19,10 @@
<div class="search-close" @click="searchClose()">取消</div>
</div>
<!-- 历史搜索 -->
<div class="search-content flexcolumn" v-if="historicalSearch.length != 0">
<div class="search-content flexcolumn" v-if="$store.state.historicalSearch.length != 0">
<div class="search-text">历史搜索</div>
<div class="search-label">
<span v-for="(item, index) in historicalSearch" :key="index" @click.stop="toSearchResult(item)">{{ item
<span v-for="(item, index) in $store.state.historicalSearch" :key="index" @click.stop="toSearchResult(item)">{{ item
}}</span>
</div>
</div>
@ -46,16 +46,14 @@ export default {
searchWinShow: false,//显示搜索弹窗
searchText: '',
showClear: false, //显示清除按钮
historicalSearch: this.$store.state.historicalSearch, // 历史搜索
}
},
props: ["issearch", "hotSearchkeywords"],
mounted() {
if (this.searchText.length > 0) this.showClear = true
else this.showClear = false
watch: {
historicalSearch(val, oldval) {
if (val.length > 10) this.historicalSearch.slice(0, 10)
else this.$store.commit('setHistoricalSearch', val)
}
},
methods: {
@ -85,20 +83,11 @@ export default {
// 跳转搜索结果
toSearchResult(kw) {
if (!kw) return
console.log(this.historicalSearch);
if (!this.historicalSearch.includes(kw)) this.historicalSearch.unshift(kw)
this.$router.push(`/searchResult?kw=${kw}`)
},
},
mounted() {
if (this.searchText.length > 0) this.showClear = true
else this.showClear = false
}
}
</script>

8
src/main.js
View File

@ -32,6 +32,14 @@ import './icons'
//动态设置fontsize
import './utils/fontSize.js'
// 判断是否是数组的 ，兼容操作
if (!Array.isArray) {
Array.isArray = function (arg) {
return Object.prototype.toString.call(arg) === '[object Array]';
}
}
//ElementUI
Vue.use(ElementUI);
Vue.use(Pagination);

41
src/store/index.js
View File

@ -5,18 +5,29 @@ Vue.use(Vuex)
export default new Vuex.Store({
state: {
historicalSearch: []
historicalSearch: [],
allForumList: [{}], // 全部板块数据
},
getters: {
},
mutations: {
setHistoricalSearch(state, payload) {
// console.log(payload, "payload");
// payload = [...new Set(payload)]
state.historicalSearch = payload
// localStorage.setItem('historicalSearch', JSON.stringify(payload));
}
if (!Array.isArray(payload)) payload = [payload]
let targetArr = [...new Set([...payload, ...state.historicalSearch])]
if (targetArr.length > 10) targetArr = targetArr.slice(0, 10)
state.historicalSearch = targetArr
localStorage.setItem('historicalSearch', JSON.stringify(targetArr))
},
setAllForumList(state, payload) {
state.allForumList = payload
},
},
actions: {
// 获取历史搜索的数据
fetchHistoricalSearch({ commit }) {
@ -24,6 +35,24 @@ export default new Vuex.Store({
commit('setHistoricalSearch', historicalSearch)
},
// 获取全部板块的数据
getAllForum({ commit }, that) {
that.$startupUnderLoading(that)
that.$http.get("/api/home/allForum").then(res => {
if (res.code != 200) return;
let allForumList = res.data
commit('setAllForumList', allForumList)
}).catch(err => {
that.$message.error(err.message)
}).finally(() => {
that.$closeUnderLoading(that)
})
// allForumList
}
},
modules: {

159
src/views/detail/detailIndex.vue
View File

@ -20,8 +20,7 @@
<!-- -->
<div class="card flexcenter">
<div class="card-item shadow">
<div class="card-item shadow" v-if="false">
<div class="card-head flexacenter">
<img class="card-head-icon" :src="info.avatar" />
<div class="card-head-content flex1 flexflex">
@ -46,7 +45,6 @@
</div>
</template>
</div>
</div>
<div class="summary-content-item">
<div class="summary-offer-head flexacenter">
@ -76,7 +74,6 @@
</div>
</template>
</div>
<a class="examine-btn flexcenter" :href="offerinfo.url">
查看当前捷报详情
<div class="examine-btn-outside flexcenter">
@ -112,12 +109,9 @@
<template v-for="(it) in info[item.key]">{{ it.name }}</template>
</div>
</div>
</template>
</div>
<div v-html="info.message" class="vHtmlMessage" style="">
</div>
</div>
@ -143,7 +137,10 @@
</div>
<div class="card-head-time">{{ $formattedDate(item.dateline) }}</div>
</div>
<div class="card-head-fool">{{ index == 0 ? '楼主' : `${index}楼` }}</div>
<!-- <div class="card-head-fool">{{ `${index + 1 + 1}楼` }}</div> -->
<div class="card-head-fool" v-if="postList.page == 1">{{ `${(postList.page - 1) * postList.limit + index + 2 }楼` }}</div>
<div class="card-head-fool" v-else>{{ `${(postList.page - 1) * postList.limit + index + 1 }楼` }}</div>
<!-- <div class="card-head-fool">{{ index == 0 ? '楼主' : `${index}楼` }}</div> -->
</div>
<div class="card-content flex1" v-html="item.message"></div>
@ -261,7 +258,7 @@
</div>
<!-- 分页 -->
<div class="paging flexcenter" v-if="postList.count.length > postList.limit">
<div class="paging flexcenter" v-if="postList.count > postList.limit">
<el-pagination small background layout="prev, pager, next" @current-change="currentChange"
:current-page.sync="postList.page" :page-size="postList.limit" :total="postList.count">
</el-pagination>
@ -283,22 +280,27 @@
<div class="bottom-item flex1 flexacenter">
<div class="bottom-operation-box flex1 flexacenter">
<div class="bottom-operation-item flex1 flexcolumn flexcenter" @click="tapLike()">
<div class="praise_bubble" id="praise_bubble" @click.stop=""
<div class="bottom-operation-item flex1 flexcolumn flexcenter" @click="tapOperate('like')">
<!-- <div class="praise_bubble" id="praise_bubble" @click.stop=""
:style="{ height: prepareLiskeState ? '' : '.5333rem' }">
<div class="bubble" v-for="(item, index) in listlist" :key="index"></div>
</div>
</div> -->
<div class="loginBtn" v-if="!islogin" @click.stop="setValue('isloginBtnState', true, 'boolean')">
</div>
<img class="bottom-operation-icom" :class="{ 'prepareLiskeAnimateState': prepareLiskeAnimateState }"
<img v-if="info.islike == 0" class="bottom-operation-icom"
:class="{ 'prepareLiskeAnimateState': prepareLiskeAnimateState }"
src="@/assets/img/detail/like.png" />
<img v-else class="bottom-operation-icom"
:class="{ 'prepareLiskeAnimateState': prepareLiskeAnimateState }"
src="@/assets/img/icon/like-o.png" />
<div class="bottom-operation-text">{{ stat.like == 0 ? '' : stat.like }}赞</div>
</div>
<div class="bottom-operation-item flex1 flexcolumn flexcenter" @click="postcollect()">
<div class="bottom-operation-item flex1 flexcolumn flexcenter"
@click="tapOperate(info.isfav == 0 ? 'collect' : 'uncollect')">
<div class="loginBtn" v-if="!islogin" @click.stop="setValue('isloginBtnState', true, 'boolean')">
</div>
<img v-if="iscollect == 0" class="bottom-operation-icom" src="@/assets/img/detail/collect.png">
<img v-if="info.isfav == 0" class="bottom-operation-icom" src="@/assets/img/detail/collect.png">
<img v-else class="bottom-operation-icom" src="@/assets/img/detail/collect-c.png">
<div class="bottom-operation-text">收藏</div>
</div>
@ -338,7 +340,7 @@ export default {
},
islogin: true,
prepareLiskeState: false,
// prepareLiskeState: false,
prepareLiskeAnimateState: false,
stat: {
like: 0
@ -553,8 +555,6 @@ export default {
let tenementKey = this.tenementKey
let info = { ...this.info, ...res.info }
info['typeText'] = info.gptype + '>>' + info.type
tenementKey[1].name += info['currency'] ? info['currency'] : '港元'
@ -611,14 +611,10 @@ export default {
}).then(res => {
if (res.code != 200) return
let data = res.data
console.log(data);
this.postList.list = data.data
this.postList.page = data.page
this.postList.limit = data.limit
this.postList.count = data.count
console.log(this.postList);
})
@ -640,73 +636,27 @@ export default {
this.getPostList()
},
// 点击点赞
tapLike() {
this.isState = true
this.prepareLiskeState = true
this.prepareLiskeAnimateState = true
// 点击点赞和收藏操作
tapOperate(key) {
// like collect uncollect
clearTimeout(this.offerLikesumTimer)
clearTimeout(this.offerLikesumAnimateTimer)
let url = ""
if (key == "like") url = "/api/operation/threadLike"
else if (key == "collect") url = "/api/operation/threadFav"
else if (key == "uncollect") url = "/api/operation/threadunFav"
let praiseBubble = document.getElementById("praise_bubble");
console.log("praiseBubble", praiseBubble);
let last = 0;
let b = Math.floor(Math.random() * 8) + 1; // 1 到 7的 图片
// b = 1; // 测试写固定的
const bl = Math.floor(Math.random() * 11) + 1; // bl1~bl11
let d = document.createElement("div");
d.style.backgroundImage = `url('./img/bg${b}.png')`
d.style.backgroundSize = 'contain'
d.className = `bubble`;
// d.style.animation = `bubble_1 bubble_${bl} 1.5s linear 1 forwards, bubble_big_${Math.floor(Math.random() * 3) + 1} 0.8s linear 1 forwards, bubble_y 1.5s linear 1 forwards`
// d.style.animation = `bubble_1 1.5s linear 1 forwards`
d.dataset.t = String(Date.now());
praiseBubble.appendChild(d);
// this.$forceUpdate()
this.stat.like++
this.prepareLiskeNum++
this.offerLikesumAnimateTimer = setTimeout(() => {
this.prepareLiskeAnimateState = false
}, 500)
this.offerLikesumTimer = setTimeout(() => {
this.ispostOfferLike = false
this.postOfferLike()
}, 2000)
this.$http.post(url, { tid: this.tid }).then(res => {
console.log(res);
if (res.code != 200) return
if (key == "like") this.info.like = 1
if (key == "collect") this.info.isfav = 1
if (key == "uncollect") this.info.isfav = 0
this.$message.success(res.message)
})
},
postOfferLike() {
if (this.ispostOfferLike) return
this.ispostOfferLike = true
this.offerLikesum = 0
this.prepareLiskeState = false
let key = new Date().getTime() + ''
// let num = util.base64_encode(key + util.base64_encode(this.data.prepareLiskeNum + ''))
// util.wxpost("/miniprogramApi/offer/behaviour/like", {
// token: this.data.token,
// num,
// key
// }).then(res => {
// if (res.code != 200) return
// let data = res.data
// this.offerLikesum = 0
// }).finally(() => {
// this.setData({
// prepareLiskeState: false
// })
// })
},
// 点击转发
transmit() {
let value = location.href
@ -1245,45 +1195,6 @@ export default {
}
.praise_bubble {
width: 50px;
height: 200px;
position: absolute;
bottom: 1.2rem;
background-color: transparent;
/deep/ {
.bubble {
position: absolute;
width: 40px;
height: 40px;
left: 50%;
bottom: 0px;
background-repeat: no-repeat;
background-size: 100%;
transform-origin: bottom;
animation: like 1.8s ease-out forwards;
// animation-fill-mode: forwards;
}
@keyframes like {
0% {
opacity: 1;
transform: translate(-50%, 0);
}
100% {
opacity: 0;
transform: translate(-50%, -200px);
}
}
}
}
}
}

144
src/views/index/allSections/AllSections.vue
View File

@ -1,9 +1,9 @@
<template>
<div>
<div class="allSections" v-if="!fid">
<div class="allSections" v-if="!twofid">
<div class="allSections-left">
<span v-for="(item, index) in list" :class="{ 'active': index == allActive }" :key="index"
@click="allClick(index)">{{ item.name }}</span>
@click="allClick(index, item.fid)">{{ item.name }}</span>
</div>
<div class="allSections-right">
<div class="allSections-right-item" @click="pitchPlate(i.fid, i.name)"
@ -14,9 +14,9 @@
</div>
<div class="item-star">
<img v-if="!i.iscollection" src="~assets/img/allSections/nullStar.png" alt="空星"
@click.stop="starClick(k, i.fid)">
@click.stop="starClick(k, i.fid, 'forumFav')">
<img v-else src="~assets/img/allSections/star.png" alt="实星"
@click.stop="cancelCollection(k, i.fid)">
@click.stop="starClick(k, i.fid, 'unforumFav')">
</div>
</div>
</div>
@ -28,8 +28,16 @@
</div>
<div style="margin:.4rem 0.35rem">
<index-list :list="invitationList"></index-list>
<template v-if="invitationList.length != 0">
<index-list :list="invitationList"></index-list>
</template>
<div class="result-empty-box flexcenter shadow" v-else>
<img class="result-empty-icon" src="@/assets/img/icon/empty.png">
</div>
</div>
<div v-if="invitationList.length != 0" class="paging flexcenter">
<el-pagination small background layout="prev, pager, next" @current-change="currentChange"
:current-page.sync="invitationPage" :page-size="invitationLimit" :total="invitationCount">
@ -48,9 +56,11 @@ export default {
data() {
return {
allActive: 0,
list: [{}],
// list: [{}],
list: this.$store.state.allForumList,
postCollectionState: false, // 收藏的请求的状态
fid: 0, // 是否有选中的板块id
onefid: 0, // 一级列表的板块id
twofid: 0, // 是否有选中的板块id
invitationList: [], // 选中板块帖子的列表
invitationLimit: 10,
invitationPage: 1, //
@ -60,28 +70,90 @@ export default {
subsectionsname: "",// 子版块名称
},
}
},
mounted() {
console.log("gggkgkgk");
this.$store.subscribe((mutation, state) => {
if (mutation.type == "setAllForumList") this.list = this.$store.state.allForumList
});
let { onefid, twofid } = this.$route.query
if (onefid) this.onefid = onefid
if (twofid) this.twofid = twofid
if (Number(onefid) > 0) this.a()
if (Number(twofid) > 0) this.getInvitationList()
},
methods: {
a() {
if (this.list.length >= 2) {
let list = this.list
list.forEach((el, index) => {
// console.log(this.twofid);
if (el.fid == this.onefid) this.allActive = index
if (this.twofid) {
el.data.forEach((element, i) => {
console.log(element, i);
if (element.fid == this.twofid) {
this.plate = {
stairname: el.name,
subsectionsname: element.name,
}
}
})
}
})
console.log(this.onefid, "onefidonefid");
} else {
setTimeout(() => {
this.a()
}, 500)
}
},
// 点击返回选择一级列表页面
backAll() {
this.fid = 0
this.twofid = 0
},
allClick(index) {
allClick(index, fid) {
this.allActive = index
const params = new URLSearchParams(window.location.search);
params.set('onefid', fid);
const newUrl = window.location.pathname + '?' + params.toString();
window.history.pushState({}, '', newUrl);
},
// 点击收藏
starClick(k, fid) {
starClick(k, fid, state) {
if (this.postCollectionState) return
let url = ""
if (state == "forumFav") url = "/api/operation/forumFav"
else url = "/api/operation/unforumFav"
this.postCollectionState = true
this.$http.post("/api/operation/forumFav", {
this.$http.post(url, {
fid
}).then(res => {
if (res.code != 200) return
this.list[this.allActive].data[k]['iscollection'] = 1
let list = this.$store.state.allForumList
list[this.allActive].data[k]['iscollection'] = state == "forumFav" ? 1 : 0
this.$store.commit('setAllForumList', list)
this.$Message.success(res.message)
this.$forceUpdate()
}).finally(() => {
@ -89,42 +161,20 @@ export default {
})
},
// 点击取消收藏
cancelCollection(k, fid) {
if (this.postCollectionState) return
this.postCollectionState = true
this.$http.post("/api/operation/unforumFav", {
fid
}).then(res => {
if (res.code != 200) return
this.list[this.allActive].data[k]['iscollection'] = 0
this.$Message.success(res.message)
this.$forceUpdate()
}).finally(() => {
this.postCollectionState = false
})
},
// 获取全部板块
getAllForum() {
this.$http.post("/api/home/allForum").then((res) => {
if (res.code != 200) return;
this.list = res.data
}).catch(err => {
this.$message.error(err.message)
});
},
// 点击选中板块 并获取列表
pitchPlate(fid, subsectionsname) {
this.fid = fid
this.twofid = fid
this.plate = {
stairname: this.list[this.allActive].name,
subsectionsname,
}
this.getInvitationList()
const params = new URLSearchParams(window.location.search);
params.set('onefid', this.list[this.allActive].fid,);
params.set('twofid', this.twofid);
const newUrl = window.location.pathname + '?' + params.toString();
window.history.pushState({}, '', newUrl);
},
// 获取帖子列表
@ -132,7 +182,7 @@ export default {
this.$http.post("/api/home/threadList", {
page: this.invitationPage,
limit: this.invitationLimit,
fid: this.fid
fid: this.twofid
}).then(res => {
let data = res.data
this.invitationList = data.data
@ -149,10 +199,6 @@ export default {
this.getInvitationList()
},
},
mounted() {
this.getAllForum()
},
components: {
@ -164,6 +210,10 @@ export default {
</script>
<style lang="scss" scoped>
.result-empty-box {
height: 10.3333rem;
}
.allSections {
display: flex;
flex-direction: row;

2
src/views/index/index.vue
View File

@ -6,7 +6,7 @@
<nav>
<router-link to="/recommend">推荐阅读</router-link>
<router-link to="/collect">收藏的版块</router-link>
<router-link to="/allSections">全部版块</router-link>
<router-link to="/allSections?onefid=1125">全部版块</router-link>
</nav>
<!-- 发帖子 -->
<div class="publish flexcolumn flexcenter">

11
src/views/index/recommend/Recommend.vue
View File

@ -8,7 +8,12 @@
<!-- 路径 -->
<plate-navigation stairname="香港澳门台湾" subsectionsname="SAT、AP考试、海外本科申…"></plate-navigation>
<section>
<index-list></index-list>
<template v-if="list.length == 0">
<index-list></index-list>
</template>
<div class="result-empty-box flexcenter shadow" v-else>
<img class="result-empty-icon" src="@/assets/img/icon/empty.png">
</div>
</section>
</div>
</template>
@ -65,4 +70,8 @@ export default {
}
}
}
section {
height: 5.3333rem;
}
</style>

27
src/views/search/searchResult/SearchResult.vue
View File

@ -75,8 +75,6 @@ export default {
list: [],
searchResultState: false,
loading: null,
historicalSearch: this.$store.state.historicalSearch, // 历史搜索
}
},
components: {
@ -86,11 +84,8 @@ export default {
mounted() {
this.kw = this.$route.query.kw
this.getSearchResult()
console.log(this.historicalSearch, "historicalSearch");
window.addEventListener("visibilitychange", () => {
console.log("fkjflkdfj");
})
},
watch: {
@ -98,17 +93,6 @@ export default {
if (val) this.$startupUnderLoading(this)
else this.$closeUnderLoading(this)
},
historicalSearch(val, oldval) {
console.log("val", val);
// if (val.length > 10) {
// this.historicalSearch = val.slice(0, 10)
// }
// else this.$store.commit('setHistoricalSearch', this.historicalSearch)
// this.$store.commit('setHistoricalSearch', val)
},
},
methods: {
@ -122,11 +106,6 @@ export default {
handleSearchResult() {
let kw = this.kw
if (!kw) return
// console.log(this.historicalSearch.includes(kw), "this.historicalSearch.includes(kw)");
console.log(this.historicalSearch.unshift(kw));
// if (!this.historicalSearch.includes(kw)) this.historicalSearch = this.historicalSearch.unshift(kw)
console.log(this.historicalSearch, "historicalSearch");
this.getSearchResult()
},
@ -137,7 +116,7 @@ export default {
if (this.searchResultState) return
this.searchResultState = true
let kw = this.kw
this.$http.post("/api/search", {
this.$http.get("/api/search", {
keyword: kw,
page: this.page,
limit: this.limit
@ -152,7 +131,7 @@ export default {
document.body.scrollTop = 0;
this.searchResultState = false
}).finally(() => {
this.$store.commit('setHistoricalSearch', this.kw)
})
},