pay-video-applet-uniapp-24-8-22/pages/mine/releaseRecord.vue

<template>
  <view class="releaseRecord">
    <!--顶部导航栏-->
    <navbar
        leftClick
        @leftClick="$utils.navigateBack"
        title="我的发布"/>

    <!--主页面-->
    <view class="frame">
      <!--标题-->
      <view class="title">
        <span>我的发布</span>
      </view>
      <!--标签栏-->
      <view class="tabbar">
        <view class="tabbarItemActive" @click="tabChange('all')">
          <span :class="checkedIndex==0 ? 'active' : ''">全部</span>
        </view>
        <view class="tabbarItemNoActive" @click="tabChange('tiezi')">
          <span :class="checkedIndex==1 ? 'active' : ''">贴子</span>
        </view>
        <view class="tabbarItemNoActive" @click="tabChange('mingpian')">
          <span :class="checkedIndex==2 ? 'active' : ''">名片</span>
        </view>
      </view>
      <!--发布列表-->
      <view style="" class="publishListClass">
        <ReleaseList :list="recordsList"/>
      </view>
    </view>
  </view>
</template>

<script>
import ReleaseList from "@/pages/mine/sonPage/release/releaseList.vue";
import {
  mapState
} from 'vuex'

export default {
  name: "releaseRecord",
  components: {
    ReleaseList
  },
  data() {
    return {
      recordsList: [
        {
          title: "这是一条动态",
          createTime: '2024-08-22 09:00:00',
          createBy: "小飞",
          isPay: "是"
        },
      ],
      checkedIndex: 0,
      queryParams: {
        pageNo: 1,
        pageSize: 10,
      },
    };
  },
  mounted() {
    this.getData()
  },
  computed: {
    ...mapState(['userInfo']),
  },
  onShow() {
    // 检查是否登录
    // this.$refs.showLogin.checkLogin()
    // 获取用户个人信息
    this.$store.commit('getUserInfo')
  },
  methods: {
    getData(type) {
      this.$api('infoGetMyReleasePage', {
        pageNo: this.queryParams.pageNo,
        pageSize: this.queryParams.pageSize,
        //   缺少type参数，需要补充

      }, res => {
        if (res.code == 200) {
          this.recordsList = res.result.records
          console.log(res.result, "发布列表")
        }
      })
    },

    // 标签栏发生变化
    tabChange(type) {
      this.checkedIndex = type == 'all' ? 0 : (type == 'tiezi' ? 1 : 2)
      this.queryParams.pageNo = 1
      this.queryParams.pageSize = 10
      this.getData()
    },
  }
}
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.releaseRecord {
  width: 100vw;
  height: 100vh;

  .frame {
    width: 100%;
    //height: calc(100vh - 220rpx);
    padding: 28rpx 28rpx 0 28rpx;

    .title {
      font-size: 34rpx;
      color: #333;
      font-weight: 700
    }

    .tabbar {
      display: flex;
      justify-content: flex-start;
      gap: 20rpx;
      margin-top: 40rpx;

      .tabbarItemActive {
        padding: 10rpx 40rpx;
        background: $uni-linear-gradient-color;
        -webkit-background-clip: text; /*将设置的背景颜色限制在文字中*/
        -webkit-text-fill-color: transparent; /*给文字设置成透明*/
      }

      .tabbarItemNoActive {
        padding: 10rpx 40rpx;
        background-color: #eaeaeb;
        color: #777777;
        border-radius: 20rpx;
      }
    }


    .publishListClass {
      //margin-top: 10rpx;
      height: 78vh;
      //margin-top: 300rpx;
      overflow: auto;
      width: 100%;
    }
  }
}

</style>