chelvc-custom/src/pages/client/tabBar/community/index.vue

<template>
  <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="item.userDTO.avatar"></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="itm of item.resourceVos" class="center-img" :src="itm.resourceKey"></image>
          </view>
        </view>
        <view class="item-bottom">
          <view class="bottom-item">
            <u-icon :name="item.clickStatus == 0 ? 'thumb-up' : 'thumb-up-fill'" :size='iconSize'
              @click='handlerPraise(item)'></u-icon><span>{{ item.goodNum }}</span>
          </view>
          <view class="bottom-item" @click='communityShow = true'>
            <u-icon name="more-circle" :size='iconSize'></u-icon><span>{{ item.commentNum }}</span>
          </view>
        </view>
      </view>
    </view>

    <empty v-if="initList.length == 0" />

    <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>

    <u-popup :show="communityShow" @close="communityShow = false" mode='bottom' overlayOpacity='0.1' round="20">
      <view class="pop-box">
        <communityPop />
      </view>
    </u-popup>

    <tabbar currentTab="clientCommunity" />
  </view>
</template>

<script>
  import {
    clientContentList,
    addEvaulateRecords
  } from '@/api/client/community.js';
  import {
    intervalTime
  } from "@/utils/tools.js"
  import communityPop from "@/components/communityPop/index.vue"
  import empty from "@/components/empty/index.vue"
  export default {
    components: {
      communityPop,
      empty
    },
    data() {
      return {
        communityShow: false,
        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)
    },
    methods: {
      handlerInitList() {
        clientContentList(this.params).then(res => {
          this.initList = res.data.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"
        })
      },
      // 点赞按钮
      handlerPraise(item) {
        let params = {
          dynamicStatusType: item.clickStatus == 0 ? 'GOOD' : 'BAD', // 操作类型：1-点赞；2-踩 允许值: GOOD, BAD
          recordType: 'DYNAMIC', // 内容类型：1-动态；2-评论/回复 允许值: DYNAMIC, COMMENT, USER
          actionType: item.clickStatus == 0 ? 'ADD' : 'CANCEL', // 点击类型：1-点赞/踩；2-取消赞/取消踩   允许值: ADD, CANCEL
          contentId: item.id,
          targetUserId: item.userId
        }
        addEvaulateRecords(params).then(res => {
          if (res.code == 200) {
            uni.showToast({
              title:'点赞成功',
              icon:'none'
            })
            this.handlerInitList()
          }else{
            uni.showToast({
              title:res.msg,
              icon:'none'
            })
            return
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    background-color: #F8F8F8;
    min-height: calc(100vh);

    // padding: 0 0 40rpx;
    //   box-sizing: border-box;
    .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;

          .bottom-item {
            display: flex;
            align-items: center;
            width: 20%;
          }
        }
      }
    }

    .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;
        }
      }
    }
  }

  // ::v-deep .u-safe-area-inset-bottom{
  // 	padding-bottom: 0;
  // }
</style>