---wiki正式切换到vue3版本---
This commit is contained in:
暮光：城中城
@@ -1,108 +1,141 @@
|
||||
<template>
|
||||
<div style="padding: 10px;" class="home-vue">
|
||||
<div style="max-width: 800px;margin: 0 auto;">
|
||||
<el-tabs value="first">
|
||||
<el-tab-pane :label="newsTypesMap[searchParam.newsType]" name="first">
|
||||
<div v-if="spacePageNews.length <= 0" class="empty-news">暂无数据</div>
|
||||
<div v-else class="line-box" v-for="item in spacePageNews">
|
||||
<div class="line-title">
|
||||
<span class="text-link">{{item.createUserName}}</span> 发布于 <span class="text-link">{{item.spaceName}}</span>
|
||||
</div>
|
||||
<div class="page-preview-box">
|
||||
<div class="page-preview-title" v-on:click="showPageDetail(item)" v-html="item.pageTitle"></div>
|
||||
<div class="page-preview-content" v-html="item.previewContent"></div>
|
||||
<div>
|
||||
<span><img src="../../assets/img/zan.png" class="zan-img"> {{item.zanNum}} </span>
|
||||
<span><i class="el-icon-view view-img"></i> {{item.viewNum}} </span>
|
||||
<span>{{item.updateTime||item.createTime}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding: 10px" class="home-vue">
|
||||
<div style="max-width: 800px; margin: 0 auto">
|
||||
<el-tabs model-value="first">
|
||||
<el-tab-pane :label="newsTypesMap[searchParam.newsType]" name="first">
|
||||
<div v-if="spacePageNews.length <= 0" class="empty-news">
|
||||
暂无数据
|
||||
</div>
|
||||
<div v-else class="line-box" v-for="item in spacePageNews">
|
||||
<div class="line-title">
|
||||
<span class="text-link">{{ item.createUserName }}</span> 发布于
|
||||
<span class="text-link">{{ item.spaceName }}</span>
|
||||
</div>
|
||||
<div class="page-preview-box">
|
||||
<div class="page-preview-title" v-on:click="showPageDetail(item)" v-html="item.pageTitle"></div>
|
||||
<div class="page-preview-content" v-html="item.previewContent"></div>
|
||||
<div>
|
||||
<span><img src="../../assets/img/zan.png" class="zan-img"/>{{ item.zanNum }} </span>
|
||||
<span><el-icon class="view-img"><el-icon-view/></el-icon>{{ item.viewNum }} </span>
|
||||
<span>{{ item.updateTime || item.createTime }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import pageApi from '../../common/api/page'
|
||||
<script setup>
|
||||
import {onBeforeUnmount, ref, onMounted, watch, defineProps, nextTick, defineEmits, defineExpose, computed} from 'vue';
|
||||
import {onBeforeRouteUpdate, useRouter, useRoute} from "vue-router";
|
||||
import {ElMessageBox, ElMessage} from 'element-plus'
|
||||
import {View as ElIconView} from '@element-plus/icons-vue'
|
||||
import pageApi from '../../assets/api/page'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
totalCount: 0,
|
||||
searchParam: {
|
||||
spaceId: '',
|
||||
newsType: 1,
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
},
|
||||
spacePageNews: [],
|
||||
// 列表类型
|
||||
newsTypesArr: [
|
||||
{key: 1, val: '最近更新'}, {key: 2, val: '最新创建'}, {key: 3, val: '查看最多'},
|
||||
{key: 4, val: '点赞最多'}, {key: 5, val: '查看+点赞最多'}
|
||||
],
|
||||
newsTypesMap: {},
|
||||
};
|
||||
},
|
||||
beforeRouteUpdate(to, from, next) {
|
||||
this.initQueryParam(to);
|
||||
next();
|
||||
},
|
||||
mounted: function () {
|
||||
this.initQueryParam(this.$route);
|
||||
},
|
||||
methods: {
|
||||
getSpacePageNews() {
|
||||
pageApi.pageNews(this.searchParam).then(json => {
|
||||
this.spacePageNews = json.data || [];
|
||||
});
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.searchParam.pageSize = val;
|
||||
this.getSpacePageNews();
|
||||
},
|
||||
showPageDetail(row) {
|
||||
this.nowClickPath = {pageId: row.pageId};
|
||||
this.$router.push({path: '/page/show', query: this.nowClickPath});
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.searchParam.pageNum = val;
|
||||
this.getSpacePageNews();
|
||||
},
|
||||
initQueryParam(to) {
|
||||
this.searchParam = {
|
||||
spaceId: to.query.spaceId,
|
||||
newsType: 1,
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
};
|
||||
if (!!this.searchParam.spaceId) {
|
||||
this.getSpacePageNews();
|
||||
}
|
||||
this.newsTypesMap = {};
|
||||
this.newsTypesArr.forEach(item => this.newsTypesMap[item.key] = item.val);
|
||||
},
|
||||
}
|
||||
}
|
||||
let totalCount = ref(0);
|
||||
let searchParam = ref({spaceId: '', newsType: 1, pageNum: 1, pageSize: 20,});
|
||||
let spacePageNews = ref([]);
|
||||
// 列表类型
|
||||
let newsTypesArr = ref([
|
||||
{key: 1, val: '最近更新'},
|
||||
{key: 2, val: '最新创建'},
|
||||
{key: 3, val: '查看最多'},
|
||||
{key: 4, val: '点赞最多'},
|
||||
{key: 5, val: '查看+点赞最多'},
|
||||
]);
|
||||
let newsTypesMap = ref({});
|
||||
|
||||
onBeforeRouteUpdate((to) => {
|
||||
initQueryParam(to);
|
||||
});
|
||||
let route = useRoute();
|
||||
let router = useRouter();
|
||||
onMounted(() => {
|
||||
initQueryParam(route);
|
||||
});
|
||||
const getSpacePageNews = () => {
|
||||
pageApi.pageNews(searchParam.value).then((json) => {
|
||||
spacePageNews.value = json.data || []
|
||||
})
|
||||
}
|
||||
const handleSizeChange = (val) => {
|
||||
searchParam.value.pageSize = val
|
||||
getSpacePageNews()
|
||||
}
|
||||
const showPageDetail = (row) => {
|
||||
let nowClickPath = {pageId: row.pageId}
|
||||
router.push({path: '/page/show', query: nowClickPath})
|
||||
}
|
||||
const handleCurrentChange = (val) => {
|
||||
searchParam.value.pageNum = val
|
||||
getSpacePageNews()
|
||||
}
|
||||
const initQueryParam = (to) => {
|
||||
searchParam.value = {
|
||||
spaceId: to.query.spaceId,
|
||||
newsType: 1,
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
}
|
||||
if (!!searchParam.value.spaceId) {
|
||||
getSpacePageNews()
|
||||
}
|
||||
newsTypesMap.value = {}
|
||||
newsTypesArr.value.forEach(
|
||||
(item) => (newsTypesMap.value[item.key] = item.val)
|
||||
)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.home-vue .empty-news{text-align: center;padding: 100px;}
|
||||
.home-vue .empty-news {
|
||||
text-align: center;
|
||||
padding: 100px;
|
||||
}
|
||||
|
||||
.home-vue .text-link {
|
||||
color: #444;
|
||||
/*cursor: pointer;*/
|
||||
/*font-weight: bold;*/
|
||||
}
|
||||
.home-vue .line-box{color: #666;border-bottom: 1px solid #eee;padding: 20px 0;}
|
||||
.home-vue .line-title{font-size: 14px;}
|
||||
.home-vue .page-preview-box{}
|
||||
.home-vue .page-preview-title{cursor: pointer;font-size: 20px;margin: 10px 0 5px 0;color: #3a8ee6;}
|
||||
.home-vue .page-preview-content{font-size: 16px;margin-bottom: 5px;}
|
||||
.home-vue .zan-img{vertical-align: middle;margin-top: -3px;}
|
||||
.home-vue .view-img{font-size: 16px;color: #666;}
|
||||
.home-vue .text-link {
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.home-vue .page-info-box{text-align: right;margin: 20px 0 50px 0;}
|
||||
.home-vue .line-box {
|
||||
color: #666;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.home-vue .line-title {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.home-vue .page-preview-box {
|
||||
}
|
||||
|
||||
.home-vue .page-preview-title {
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
margin: 10px 0 5px 0;
|
||||
color: #3a8ee6;
|
||||
}
|
||||
|
||||
.home-vue .page-preview-content {
|
||||
font-size: 16px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.home-vue .zan-img {
|
||||
vertical-align: middle;
|
||||
margin-top: -3px;
|
||||
}
|
||||
|
||||
.home-vue .view-img {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.home-vue .page-info-box {
|
||||
text-align: right;
|
||||
margin: 20px 0 50px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user