recycle-mobile/src/pages/wiki/components/train.vue

<template>
  <view class="">
    <u-sticky bgColor="#fff" style='padding: 0 30rpx;'>
      <u-tabs @click='changeFn' keyName='categoryName' :current='tabsIndex' :list="columnSort" lineWidth='40'
        :scrollable='true'>
      </u-tabs>
      <view style="padding: 20rpx 0;">
        <u-search @search='searchFn' @custom='searchFn' bgColor='#f2f2f2' clearabled show-action shape="square"
          placeholder="搜索" v-model="entryName">
        </u-search>
      </view>
    </u-sticky>
    <br>
    <view @click="toCurriculumFn(v.disciplineId)" class="list" v-for="(v,i) in dataList" :key="i">
      <view class="list_left">
        <image :src="$imageUrl + v.imageUrl" style="width: 100%;height: 100%;" mode=""></image>
      </view>
      <view class="list_right">
        <view class="" style="font-size: 28rpx;">
          {{v.disciplineName}}
        </view>
        <view class="">
          产品品牌：{{v.brandName}}
        </view>
        <view class="">
          {{v.disciplineOverview}}
        </view>
        <view class="" style="color: #999;">
          2022-11-01
        </view>
      </view>

    </view>
    <view v-show="showEmpty" class="" style="width: 100%; height: 100%;display: flex;justify-content: center;">
      <u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
      </u-empty>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        showEmpty: false,
        columnSort: [],
        options: {},
        pageNum: 1,
        dataList: [],
        entryName: '',
        productCategoryId: '',
        tabsIndex: '',

      };
    },
    async onPullDownRefresh() {
      this.pageNum = 1
      let res = await this.getData(this.options)
      this.dataList = res
      uni.stopPullDownRefresh()
    },
    async onReachBottom() {
      this.pageNum++
      await this.getData(this.options)
    },
    async onLoad(options) {
      this.options = options
      this.productCategoryId = options.productCategoryId
      await this.getData(options)
      await this.getColumnSorting()
      this.columnSort.forEach((v, i) => {
        if (v.productCategoryId === options.productCategoryId) {
          this.tabsIndex = i
        }
      })
    },
    methods: {
      //跳转课程详情
      toCurriculumFn(disciplineId) {
        uni.navigateTo({
          url: `pages/learn/components/learnDetail?disciplineId=${disciplineId}`
        })
      },
      //搜索
      async searchFn() {
        this.pageNum = 1
        let res = await this.getData(this.options)
        this.dataList = res
      },
      //分类
      async changeFn(value) {
        this.productCategoryId = value.productCategoryId
        this.pageNum = 1
        let res = await this.getData(this.options)
        this.dataList = res
      },
      //获取分类数据
      async getColumnSorting() {
        let params = {
          "brandCodes": [],
          "columnId": this.options.columnId
        }
        let {
          data
        } = await this.$api.post('/homepage/columnsorting', params)
        this.columnSort = data
      },
      //获取列表数据
      async getData(options) {
        let params = {
          "columnId": options.columnId,
          "pageNum": this.pageNum,
          "pageSize": 10,
          "productCategoryId": this.productCategoryId,
          "entryName": this.entryName
        }
        let {
          data
        } = await this.$api.post('/homepage/disciplines-search', params)
        if (data.records.length === 0) {
          this.showEmpty = true
        } else {
          this.showEmpty = false
        }
        this.dataList = [...this.dataList, ...data.records]
        return data.records
      }
    }
  }
</script>

<style lang="scss" scoped>
  .list {
    display: flex;
    justify-content: space-between;
    margin: 0 30rpx 20rpx;
    padding: 30rpx;
    background: #ffffff;
    border-radius: 20rpx;


    .list_left {
      width: 140rpx;

    }

    .list_right {
      padding-left: 18rpx;
      flex: 1;
      font-size: 24rpx;
      color: #333;
      line-height: 36rpx;
      // background-color: #ffff7f;
    }
  }
</style>