product_wx/pages/subPackages/parkActivity/index.vue

<template>
   <div>
     <div class="parkAct">
       <div class="parkDynamicTab2">
         <div
             v-for="(item, index) in tabList"
             :key="index"
             class="tabItem"
             :class="selectTab === item.label ? 'selectTabItem' : ''"
             @click="clickTab(item)"
         >
           {{ item.label }}
         </div>
       </div>
       <activity ref="avtivitys"/>
     </div>
   </div>
</template>

<script>
import {getByCodes} from "@/js_sdk/http";
import activity from "../../index/components/activity.vue";

export default {
  components: { activity },
  name: "index",
  data(){
    return {
      dc_key:['activity_type'],
      selectTab: "全部",
      tabList: [
        { label: "全部",value:null },
        // { name: "培训" },
        // { name: "私募" },
        // { name: "法务" },
        // { name: "财税" },
      ],
    }
  },
  onPullDownRefresh() {
    this.$refs.avtivitys.getList()
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 1000);
  },
  onShow(){
    this.getByCodes()
    this.$nextTick(()=>{
      this.active = 0
    })
  },
  methods:{
    clickTab(item) {
      this.selectTab = item.label;
      this.$refs.avtivitys.search.activityType = item.value
      this.$refs.avtivitys.getList()
    },
    async getByCodes() {
      this.tabList = [
        { label: "全部",value:null },
      ]
      let data = await getByCodes(JSON.stringify(this.dc_key));
      this.dic_SelectList = this.$common.handleDicList(data);
      this.dic_SelectList.activity_type.forEach(item=>{
        this.tabList.push(item)
      })
      // console.log('this.tabList',this.tabList)
    },
  }
}
</script>

<style lang="scss">
.parkAct{
  background: white;
  box-sizing: border-box;
  height: 1424rpx;
  padding: 0 32rpx;
  .parkDynamicTab2 {
    display: flex;
    padding: 24rpx 0;
    margin-top: 24rpx;
    .tabItem {
      color: #666666;
      font-size: 28rpx;
      margin: 0 auto;
    }
    .selectTabItem {
      color: #18172a;
      border-bottom: 6rpx solid #034df7;
    }
  }
}
</style>