|
@@ -1,170 +1,246 @@
|
|
|
<template>
|
|
|
- <view class="community">
|
|
|
- <view>
|
|
|
- <!-- 关注和推荐 -->
|
|
|
- <u-navbar :autoBack="true" leftIconSize="0">
|
|
|
- <view slot="center">
|
|
|
- <u-tabs :list="communityList" lineWidth="32" @change="tabChange" :duration="duration" />
|
|
|
- </view>
|
|
|
- </u-navbar>
|
|
|
-
|
|
|
- <!-- 消息列表 -->
|
|
|
- <view class="content" :style="{ marginTop: totalHeight + 'px' }">
|
|
|
- <swiper :duration="duration" style="height: 80vh">
|
|
|
- <swiper-item>
|
|
|
- <scroll-view
|
|
|
- scroll-y="true"
|
|
|
- style="height: 100%"
|
|
|
- @scrolltoupper="upper"
|
|
|
- @scrolltolower="lower"
|
|
|
- @scroll="scroll"
|
|
|
- >
|
|
|
- <view class="list">
|
|
|
- <comment-list :list="list" />
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- </swiper-item>
|
|
|
- </swiper>
|
|
|
- </view>
|
|
|
- <uni-load-more :status="loadingType" />
|
|
|
- </view>
|
|
|
+ <view class="container">
|
|
|
+ <u-sticky bgColor="#F8F8F8">
|
|
|
+ <view class="top"> </view>
|
|
|
+ <u-tabs :list="list1" lineWidth="30" lineColor="#f56c6c" @change='tabChange' :activeStyle="{
|
|
|
+ color: '#303133',
|
|
|
+ fontWeight: 'bold',
|
|
|
+ transform: 'scale(1.05)',
|
|
|
+ fontSize:'40rpx',
|
|
|
+ fontStyle: 'italic'
|
|
|
+ }" :inactiveStyle="{
|
|
|
+ color: '#606266',
|
|
|
+ transform: 'scale(1)'
|
|
|
+ }" itemStyle=" padding-left: 15px; padding-right: 15px; height: 34px;">
|
|
|
+ </u-tabs>
|
|
|
+ <view class="top-bottom"> </view>
|
|
|
+ </u-sticky>
|
|
|
+
|
|
|
+ <view class="center-box">
|
|
|
+ <view class="item-box" v-for="(item,index) of initList" :key='index'>
|
|
|
+ <view class="item-top">
|
|
|
+ <view class="top-left">
|
|
|
+ <image class="img" src="@/static/QR57a.jpg"></image>
|
|
|
+ </view>
|
|
|
+ <view class="top-right">
|
|
|
+ <view class="right-title">{{ item.userDTO.nickname }}</view>
|
|
|
+ <view class="right-address">2天前 {{ item.location }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <u-line margin='10rpx 0'></u-line>
|
|
|
+
|
|
|
+ <view class="item-center">
|
|
|
+ <view class="center-text">
|
|
|
+ {{ item.textContent }}
|
|
|
+ </view>
|
|
|
+ <view class="center-img-box">
|
|
|
+ <image v-for="item of 2" class="center-img" src="@/static/QR57a.jpg"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item-bottom">
|
|
|
+ <view class="bottom-item">
|
|
|
+ <u-icon name="thumb-up" :size='iconSize'></u-icon><span>2332</span>
|
|
|
+ </view>
|
|
|
+ <view class="bottom-item">
|
|
|
+ <u-icon name="heart" :size='iconSize'></u-icon><span>2332</span>
|
|
|
+ </view>
|
|
|
+ <view class="bottom-item">
|
|
|
+ <u-icon name="more-circle" :size='iconSize'></u-icon><span>2332</span>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="flex-box">
|
|
|
+ <view class="flex" @click="handlerToPublish">
|
|
|
+ <view class="flex-icon">
|
|
|
+ <u-icon name="edit-pen" color='#fff' size='26'></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class=""> 发布 </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
<tabbar currentTab="clientCommunity" />
|
|
|
- </view>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import CommentList from '@/components/commentList/index.vue';
|
|
|
-import { clientContentList } from '@/api/client/community.js';
|
|
|
-import { communityList } from './community';
|
|
|
-
|
|
|
-export default {
|
|
|
- components: {
|
|
|
- CommentList,
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- communityList,
|
|
|
- duration: 700,
|
|
|
- scrollTop: 0,
|
|
|
- old: {
|
|
|
- scrollTop: 0,
|
|
|
- },
|
|
|
- list: [],
|
|
|
- params: {
|
|
|
- pageNum: 1,
|
|
|
- pageSize: 10,
|
|
|
- type: 'LATEST',
|
|
|
- keyWord: '',
|
|
|
- },
|
|
|
- loadingType: '',
|
|
|
- };
|
|
|
- },
|
|
|
-
|
|
|
- computed: {
|
|
|
- totalHeight() {
|
|
|
- return uni.getSystemInfoSync().statusBarHeight + 44;
|
|
|
- },
|
|
|
- },
|
|
|
-
|
|
|
- onLoad() {
|
|
|
- this.getContentList();
|
|
|
- },
|
|
|
-
|
|
|
- onShow() {
|
|
|
- /* 隐藏原生的tabbar */
|
|
|
- uni.hideTabBar({
|
|
|
- animation: false,
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- /* 下拉刷新 */
|
|
|
- onPullDownRefresh() {
|
|
|
- this.params.pageNum = 1;
|
|
|
- this.list = [];
|
|
|
-
|
|
|
- uni.stopPullDownRefresh();
|
|
|
- this.getContentList();
|
|
|
- },
|
|
|
-
|
|
|
- onReachBottom() {
|
|
|
- this.getContentList('more');
|
|
|
- },
|
|
|
-
|
|
|
- methods: {
|
|
|
- /* 获取初始化数据 */
|
|
|
- async getContentList(type = 'refresh') {
|
|
|
- if (type === 'refresh') {
|
|
|
- uni.showToast({
|
|
|
- title: '数据加载中~',
|
|
|
- icon: 'none',
|
|
|
- });
|
|
|
- this.params.pageNum = 1;
|
|
|
- } else if (this.loadingType === 'no-more') {
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- this.loadingType = 'loading';
|
|
|
-
|
|
|
- try {
|
|
|
- let res = await clientContentList(this.params);
|
|
|
-
|
|
|
- // if (res.code == 200 && res.data) {
|
|
|
- // this.list = res.records;
|
|
|
- // } else {
|
|
|
- // uni.showToast({
|
|
|
- // title: '数据请求失败!',
|
|
|
- // icon: 'none',
|
|
|
- // });
|
|
|
- // }
|
|
|
- this.list = res.records;
|
|
|
-
|
|
|
- if (this.list.length === 0) {
|
|
|
- if (type === 'refresh') loadingType = 'no-data';
|
|
|
- if (type === 'more') loadingType = 'no-more';
|
|
|
- }
|
|
|
-
|
|
|
- this.loadingType = loadingType;
|
|
|
- this.params.pageNum++;
|
|
|
- this.list = type === 'refresh' ? list : this.list.concat(list);
|
|
|
-
|
|
|
- if (type === 'refresh') {
|
|
|
- uni.hideLoading();
|
|
|
- }
|
|
|
- } catch (error) {
|
|
|
- this.loadingType = '';
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- tabChange(item) {
|
|
|
- this.params.type = item.type;
|
|
|
- this.getContentList();
|
|
|
+ import { clientContentList } from '@/api/client/community.js';
|
|
|
+ import { intervalTime } from "@/utils/tools.js"
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ list1: [{
|
|
|
+ name: '最新',
|
|
|
+ type: 'LATEST',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '关注',
|
|
|
+ type: 'ATTENTION',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '最热',
|
|
|
+ type: 'HOTTEST',
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ iconSize: 24,
|
|
|
+ duration: 700,
|
|
|
+ params: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ type: 'LATEST',
|
|
|
+ keyWord: '',
|
|
|
+ },
|
|
|
+ initList:[] , // 初始化列表
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow(){
|
|
|
+ this.handlerInitList()
|
|
|
+ // let a = intervalTime(1709797137000)
|
|
|
},
|
|
|
-
|
|
|
- scroll(e) {
|
|
|
- this.old.scrollTop = e.detail.scrollTop;
|
|
|
- },
|
|
|
-
|
|
|
- goTop(e) {
|
|
|
- this.scrollTop = this.old.scrollTop;
|
|
|
- this.$nextTick(() => {
|
|
|
- this.scrollTop = 0;
|
|
|
- });
|
|
|
- uni.showToast({
|
|
|
- icon: 'none',
|
|
|
- title: '纵向滚动 scrollTop 值已被修改为 0',
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- upper(e) {},
|
|
|
- lower(e) {},
|
|
|
- },
|
|
|
-};
|
|
|
+ methods: {
|
|
|
+ handlerInitList(){
|
|
|
+ clientContentList(this.params).then(res=>{
|
|
|
+ this.initList = res.records
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 选择时间
|
|
|
+ // confirmTime(e) {
|
|
|
+ // let time = new Date(e)
|
|
|
+ // let year = time.getFullYear()
|
|
|
+ // let month = time.getMonth() + 1
|
|
|
+ // let date = time.getDate()
|
|
|
+ // if (month < 10) {
|
|
|
+ // month = '0' + month
|
|
|
+ // }
|
|
|
+ // if (date < 10) {
|
|
|
+ // date = '0' + date
|
|
|
+ // }
|
|
|
+ // this.queryParams.birthday = year + '-' + month + '-' + date
|
|
|
+ // },
|
|
|
+ // 切换顶部tabbar
|
|
|
+ tabChange(e) {
|
|
|
+ this.params.type = e.type
|
|
|
+ this.handlerInitList()
|
|
|
+ },
|
|
|
+ // 发布按钮
|
|
|
+ handlerToPublish(){
|
|
|
+ uni.navigateTo({
|
|
|
+ url:"/pages/client/clientPackage/communityPublish"
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.list {
|
|
|
- min-height: 100vh;
|
|
|
- padding: 10rpx 20rpx;
|
|
|
- background-color: #ffffff;
|
|
|
-}
|
|
|
+ .container {
|
|
|
+ background-color: #F8F8F8;
|
|
|
+ min-height: calc(100vh - 140rpx);
|
|
|
+ padding: 0 0 40rpx;
|
|
|
+
|
|
|
+ .top {
|
|
|
+ height: 100rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .top-bottom {
|
|
|
+ height: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .center-box {
|
|
|
+ margin: 30rpx auto 0;
|
|
|
+ width: 95%;
|
|
|
+ font-size: 28rpx;
|
|
|
+
|
|
|
+ .item-box {
|
|
|
+ padding: 20rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ box-shadow: 0 5rpx 15rpx 0 rgba(0, 0, 0, 0.2);
|
|
|
+ background-color: #fff;
|
|
|
+
|
|
|
+ .item-top {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .top-left {
|
|
|
+ .img {
|
|
|
+ width: 90rpx;
|
|
|
+ height: 90rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .top-right {
|
|
|
+ margin-left: 20rpx;
|
|
|
+
|
|
|
+ .right-title {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 34rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-address {
|
|
|
+ color: #959595;
|
|
|
+ font-style: italic;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-center {
|
|
|
+ .center-text {
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .center-img-box {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 32% 32% 32%;
|
|
|
+ gap: 4% 1%;
|
|
|
+
|
|
|
+ .center-img {
|
|
|
+ width: 200rpx;
|
|
|
+ height: 200rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-bottom {
|
|
|
+ display: flex;
|
|
|
+ margin-top: 40rpx;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .bottom-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .flex-box {
|
|
|
+ width: 120rpx;
|
|
|
+ height: 120rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #000;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 15%;
|
|
|
+ right: 5%;
|
|
|
+ box-shadow: 0 5rpx 15rpx 0 rgba(0, 0, 0, 0.5);
|
|
|
+ padding: 10rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ text-align: center;
|
|
|
+ .flex {
|
|
|
+ color: #fff;
|
|
|
+ font-size:26rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ .flex-icon{
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|