peihaoyu/linfeng-community
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

完成广场样式修改

Browse Source
This commit is contained in:
HJ 2023-03-08 15:45:20 +08:00
parent 1136cfbb22
commit 06884d384c
1 changed files with 249 additions and 249 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

498
src/main/resources/static/linfeng-community-uniapp-ky/pages/square/square.vue
View File

@ -1,250 +1,250 @@
<template> <template>
<view> <view>
<!-- navbar --> <!-- navbar -->
<u-navbar :is-back="false" :border-bottom="false"> <u-navbar :is-back="false" :border-bottom="false">
<u-icon name="plus-circle" :size="40" class="add-icon" @click="goPostAdd"></u-icon> <u-icon name="plus-circle" :size="40" class="add-icon" @click="goPostAdd"></u-icon>
<u-tabs :list="pageTab" :current="pageCurrent" @change="pageTabChange"></u-tabs> <u-tabs :list="pageTab" :current="pageCurrent" @change="pageTabChange"></u-tabs>
</u-navbar> </u-navbar>
<!-- 创作广场 --> <!-- 创作广场 -->
<view v-show="pageCurrent == 0"> <view v-show="pageCurrent == 0">
<!-- 分类 --> <!-- 分类 -->
<view class="tabs-wrap"> <view class="tabs-wrap">
<u-tabs :list="classList" name="cateName" :current="current" @change="tabChange"></u-tabs> <u-tabs :list="classList" name="cateName" :current="current" @change="tabChange"></u-tabs>
</view> </view>
<view v-show="current == 0"> <view v-show="current == 0">
<!-- 轮播图 --> <!-- 轮播图 -->
<view class="wrap"> <view class="wrap">
<u-swiper :list="swiperList" name="img" border-radius="20" mode="dot" :effect3d="true"></u-swiper> <u-swiper :list="swiperList" name="img" border-radius="20" mode="dot" :effect3d="true"></u-swiper>
</view> </view>
</view> </view>
<!-- 帖子列表 --> <!-- 帖子列表 -->
<post-list :list="postList" :loadStatus="loadPostStatus"></post-list> <post-list :list="postList" :loadStatus="loadPostStatus"></post-list>
</view> </view>
<!-- 发帖达人 --> <!-- 发帖达人 -->
<view v-show="pageCurrent == 1"> <view v-show="pageCurrent == 1">
<navigator :url="'/pages/user/home?uid=' + item.uid" class="user-item" hover-class="none" <navigator :url="'/pages/user/home?uid=' + item.uid" class="user-item" hover-class="none"
v-for="(item, index) in userList" :key="index"> v-for="(item, index) in userList" :key="index">
<view v-if="index < 10" class="user-index-hot">{{ index + 1 }}</view> <view v-if="index < 10" class="user-index-hot">{{ index + 1 }}</view>
<view v-else class="user-index">{{ index + 1 }}</view> <view v-else class="user-index">{{ index + 1 }}</view>
<image class="avatar" mode="aspectFill" :src="item.avatar"></image> <image class="avatar" mode="aspectFill" :src="item.avatar"></image>
<view class="right"> <view class="right">
<text class="username">{{ item.username }}</text> <text class="username">{{ item.username }}</text>
<view class="tag-wrap"> <view class="tag-wrap">
<text class="tag" :key="index2">{{ item.intro }}</text> <text class="tag" :key="index2">{{ item.intro }}</text>
<text class="tag" :key="index2">+{{ item.postNumber }}</text> <text class="tag" :key="index2">+{{ item.postNumber }}</text>
</view> </view>
</view> </view>
</navigator> </navigator>
<!-- 加载状态 --> <!-- 加载状态 -->
<block v-if="userList.length === 0 && loadStatus == 'nomore'"> <block v-if="userList.length === 0 && loadStatus == 'nomore'">
<u-empty margin-top="100" text="暂无内容" mode="favor"></u-empty> <u-empty margin-top="100" text="暂无内容" mode="favor"></u-empty>
</block> </block>
<block v-else> <block v-else>
<view class="no-info"> <view class="no-info">
<u-loadmore :status="loadStatus" /> <u-loadmore :status="loadStatus" />
</view> </view>
</block> </block>
</view> </view>
<!-- 发帖入口 --> <!-- 发帖入口 -->
<add-post-tag></add-post-tag> <add-post-tag></add-post-tag>
</view> </view>
</template> </template>
<script> <script>
import addPostTag from '../../components/add-post-tag/add-post-tag.vue' import addPostTag from '../../components/add-post-tag/add-post-tag.vue'
export default { export default {
data() { data() {
return { return {
pageCurrent: 0, pageCurrent: 0,
current: 0, current: 0,
pageTab: [{ pageTab: [{
name: '创作广场' name: '创作广场'
}, },
{ {
name: '发帖达人' name: '发帖达人'
} }
], ],
classList: [{ classList: [{
cateId: 0, cateId: 0,
cateName: '推荐' cateName: '推荐'
}], }],
swiperList: [], swiperList: [],
postList: [], postList: [],
loadPostStatus: 'loadmore', loadPostStatus: 'loadmore',
classId: 0, classId: 0,
page: 1, page: 1,
userList: [], userList: [],
loadStatus: 'nomore' loadStatus: 'nomore'
} }
}, },
onLoad() { onLoad() {
this.getBannerList(); this.getBannerList();
this.getPostList(); this.getPostList();
this.getClassList(); this.getClassList();
this.getUserRanking(); this.getUserRanking();
}, },
onReachBottom() { onReachBottom() {
if (this.pageCurrent == 0) { if (this.pageCurrent == 0) {
this.page++; this.page++;
this.getPostList() this.getPostList()
} }
if (this.pageCurrent == 1) { if (this.pageCurrent == 1) {
this.userList = []; this.userList = [];
this.getUserRanking(); this.getUserRanking();
} }
}, },
onPullDownRefresh() { onPullDownRefresh() {
if (this.pageCurrent == 0) { if (this.pageCurrent == 0) {
this.page = 1 this.page = 1
this.pageList = [] this.pageList = []
this.getPostList() this.getPostList()
} else if (this.pageCurrent == 1) { } else if (this.pageCurrent == 1) {
this.userList = []; this.userList = [];
this.getUserRanking(); this.getUserRanking();
} }
}, },
methods: { methods: {
getBannerList() { getBannerList() {
this.$H.get('link/list').then(res => { this.$H.get('link/list').then(res => {
if (res.code == 0) { if (res.code == 0) {
this.swiperList = res.result this.swiperList = res.result
} }
}) })
}, },
toSearch() { toSearch() {
uni.showToast({ uni.showToast({
icon: 'none', icon: 'none',
title: '暂无搜索' title: '暂无搜索'
}) })
}, },
goPostAdd() { goPostAdd() {
uni.navigateTo({ uni.navigateTo({
url: '/pages/post/add' url: '/pages/post/add'
}) })
}, },
pageTabChange(index) { pageTabChange(index) {
this.pageCurrent = index this.pageCurrent = index
}, },
tabChange(index) { tabChange(index) {
this.current = index this.current = index
this.page = 1 this.page = 1
this.classId = this.classList[index].cateId this.classId = this.classList[index].cateId
this.postList = [] this.postList = []
this.getPostList() this.getPostList()
}, },
getClassList() { getClassList() {
this.$H.get('topic/classList').then(res => { this.$H.get('topic/classList').then(res => {
this.classList = this.classList.concat(res.result) this.classList = this.classList.concat(res.result)
}) })
}, },
getUserRanking() { getUserRanking() {
this.$H this.$H
.post('user/userRank') .post('user/userRank')
.then(res => { .then(res => {
this.userList = res.result; this.userList = res.result;
}); });
}, },
// 根据分页和分类展示帖子列表 // 根据分页和分类展示帖子列表
getPostList() { getPostList() {
console.log('classId:', this.classId) console.log('classId:', this.classId)
this.loadPostStatus = 'loading'; this.loadPostStatus = 'loading';
this.$H this.$H
.post('post/list', { .post('post/list', {
classId: this.classId, classId: this.classId,
page: this.page page: this.page
}) })
.then(res => { .then(res => {
this.postList = this.postList.concat(res.result.data); this.postList = this.postList.concat(res.result.data);
if (res.result.current_page === res.result.last_page || res.result.last_page === 0) { if (res.result.current_page === res.result.last_page || res.result.last_page === 0) {
this.loadPostStatus = 'nomore'; this.loadPostStatus = 'nomore';
} else { } else {
this.loadPostStatus = 'loadmore'; this.loadPostStatus = 'loadmore';
} }
}); });
}, },
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.add-icon { .add-icon {
margin-left: 20rpx; margin-left: 20rpx;
margin-right: 30%; margin-right: 30%;
} }
.tabs-wrap { .tabs-wrap {
position: sticky; position: sticky;
z-index: 999; z-index: 999;
} }
.wrap { .wrap {
padding: 0 40rpx; padding: 0 40rpx;
} }
// 用户列表 // 用户列表
.user-item { .user-item {
margin: 30rpx; margin: 30rpx;
padding: 20rpx; padding: 20rpx;
display: flex; display: flex;
border-bottom: 1px solid #f5f5f5; border-bottom: 1px solid #f5f5f5;
.user-index-hot { .user-index-hot {
margin-right: 20rpx; margin-right: 20rpx;
color: #fff; color: #fff;
background-image: linear-gradient(#e64340, #ffaac3); background-image: linear-gradient(#e64340, #ffaac3);
width: 55rpx; width: 55rpx;
height: 55rpx; height: 55rpx;
border-radius: 50%; border-radius: 50%;
text-align: center; text-align: center;
line-height: 55rpx; line-height: 55rpx;
} }
.user-index { .user-index {
margin-right: 20rpx; margin-right: 20rpx;
color: #aaaaff; color: #aaaaff;
font-weight: bold; font-weight: bold;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.avatar { .avatar {
width: 100rpx; width: 100rpx;
height: 100rpx; height: 100rpx;
border-radius: 10rpx; border-radius: 10rpx;
margin-right: 20rpx; margin-right: 20rpx;
} }
.right { .right {
flex: 1; flex: 1;
.username { .username {
font-weight: bold; font-weight: bold;
} }
.tag-wrap { .tag-wrap {
font-size: 20rpx; font-size: 20rpx;
.tag { .tag {
display: inline-block; display: inline-block;
padding: 5rpx 20rpx; padding: 5rpx 20rpx;
border-radius: 10rpx; border-radius: 10rpx;
margin-right: 20rpx; margin-right: 20rpx;
margin-bottom: 20rpx; margin-bottom: 20rpx;
background-color: #7da9bd; background-color: #7da9bd;
&:nth-child(2n) { &:nth-child(2n) {
background-color: #ccb3ff; background-color: #ccb3ff;
} }
} }
} }
} }
.no-info { .no-info {
margin: 30rpx 0; margin: 30rpx 0;
} }
} }
</style> </style>