diff --git a/src/App.vue b/src/App.vue
index 7ffb7de..7ea2a0e 100755
--- a/src/App.vue
+++ b/src/App.vue
@@ -12,10 +12,12 @@ export default {
name: "App",
data() {
return {
+ loading: null,
}
},
mounted() {
this.$store.dispatch('fetchHistoricalSearch')
+ this.$store.dispatch('getAllForum', this)
},
}
diff --git a/src/assets/css/public.scss b/src/assets/css/public.scss
index 3d79fc2..1355673 100755
--- a/src/assets/css/public.scss
+++ b/src/assets/css/public.scss
@@ -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;
+ }
+}
\ No newline at end of file
diff --git a/src/assets/img/icon/like-o.png b/src/assets/img/icon/like-o.png
new file mode 100644
index 0000000..bf72728
Binary files /dev/null and b/src/assets/img/icon/like-o.png differ
diff --git a/src/components/SearchBox.vue b/src/components/SearchBox.vue
index b56dc78..ceb36c1 100755
--- a/src/components/SearchBox.vue
+++ b/src/components/SearchBox.vue
@@ -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>
diff --git a/src/main.js b/src/main.js
index c76439d..8881831 100755
--- a/src/main.js
+++ b/src/main.js
@@ -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);
diff --git a/src/store/index.js b/src/store/index.js
index 5f12ac1..60fd4b1 100755
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -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: {
diff --git a/src/views/detail/detailIndex.vue b/src/views/detail/detailIndex.vue
index 8326a10..28c4227 100755
--- a/src/views/detail/detailIndex.vue
+++ b/src/views/detail/detailIndex.vue
@@ -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);
- }
- }
-
-
- }
-
-
- }
-
}
}
diff --git a/src/views/index/allSections/AllSections.vue b/src/views/index/allSections/AllSections.vue
index 63d33c8..6a0f9b6 100755
--- a/src/views/index/allSections/AllSections.vue
+++ b/src/views/index/allSections/AllSections.vue
@@ -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;
diff --git a/src/views/index/index.vue b/src/views/index/index.vue
index e335235..b18f9ec 100755
--- a/src/views/index/index.vue
+++ b/src/views/index/index.vue
@@ -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">
diff --git a/src/views/index/recommend/Recommend.vue b/src/views/index/recommend/Recommend.vue
index 2e57b0d..41c2905 100755
--- a/src/views/index/recommend/Recommend.vue
+++ b/src/views/index/recommend/Recommend.vue
@@ -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>
\ No newline at end of file
diff --git a/src/views/search/searchResult/SearchResult.vue b/src/views/search/searchResult/SearchResult.vue
index 7b9037b..e841035 100755
--- a/src/views/search/searchResult/SearchResult.vue
+++ b/src/views/search/searchResult/SearchResult.vue
@@ -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)
})
},