assess-app/pages/task/index.vue

<template>
  <view class="total-page page_env-20 page-box sys-list-background-color">
    <view class="task-bg">
      <Nav :title="'资产评估'" :genre="1" :back="false" is_fixed></Nav>
      <view>
        <Search :placeholder="'请输入资产名称'" @setSearch="setSearch"></Search>
        <view class="page-box-bg-fff m-lr20 r-20">
          <z-tabs ref="tabs" :list="tabsList"
                  :active-style="{color:'#10B261',fontWeight:'bold',fontSize:'30rpx'}"
                  :bar-style="{background:'#10B261'}" :inactive-style="{fontWeight:'bold',fontSize:'28rpx'}"
                  :current="listData.status" :bar-animate-mode="'worm'" @change="tabsChange" />
        </view>
      </view>
      <EnScroll ref="scroll" :navHeight="100" is_tabHeight @onRefresh="onRefresh" @onScrollBottom="onScrollBottom">
        <LoanItem :task-list="list" @onCalculate="onCalculate"></LoanItem>
      </EnScroll>
      <view class="add-box" @click="addLaw">
        新增查询
      </view>
      <!-- <en-button :is_both="0" :text="'新建查询'"  @onSubmit="addLaw">  </en-button> -->
      <Tab class="tabs_height" :tab-index="2"></Tab>
    </view>

  </view>

</template>
<script>
import LoanItem from "./loan-item.vue";
import {getPredictList} from "@/api/valuation";

export default {
  components: {
    LoanItem
  },
  data() {
    return {
      tabsList: [{
        name: '全部',
        disabled: false
      }, {
        name: '待认证',
        dot_color: 'red',
        is_dot: false,
        disabled: false
      }, {
        name: '查询中',
        dot_color: 'red',
        is_dot: false,
        disabled: false
      }, {
        name: '已完成',
        dot_color: 'red',
        is_dot: false,
        disabled: false
      }],
      list: [],
      listData: {
        status: 0,
        page: 1,
        total: 100,
        limit: 20,
        id_number: ''
      }
    }
  },
  watch: {},
  onShow() {
    // this.startList()
  },
  mounted() {
    this.startList()

  },
  methods: {
    startList() {
      this.listData = {
        status: 0,
        page: 1,
        total: 100,
        limit: 20,
        id_number: ''
      }
      this.list = []
      this.getPredictList()
    },
    getPredictList() {
      if (this.isAjax || (this.listData.total <= this.list.length)) {
        return;
      }
      getPredictList(this.listData).then((res) => {
        if (res.code === 0) {
          res.data.items.forEach(item=>{
            item.data=JSON.parse(item.data)
            this.list.push(item)
          })
          this.listData.total = res.data.total
          ++this.listData.page
        }
      })
    },
    addLaw() {
      console.log('aaaaaaaaaaaaaaaaaaaaaaaaaa')
      uni.navigateTo({
        url: "/pages/task/task"
      })
    },
    setSearch(text) {

    },
    onCalculate(data) {

    },
    onClose() {

    },
    tabsChange(index) {
      if (index && this.listData.status != index) {
        this.listData.status = index;
        this.listData.page = 1
        this.list = []
        this.lawOrderList()
      }
    },
    onRefresh() {
      if (this.list.length < this.listData.total) {
        this.listData.page++
        this.lawOrderList()
      }
      setTimeout(() => {
        this.$refs.scroll.onEndPulling()
      }, 200)
      console.log("下拉刷新");
    },
    // 滚动到底部
    onScrollBottom() {
      uni.showLoading({
        title: '数据加载中'
      })
      setTimeout(() => {
        uni.showToast({
          title: '加载完成',
          icon: 'none'
        })
      }, 1000)
      console.log("到底部了");
    },
  },
}
</script>
<style lang="scss" scoped>
.add-box {
  width: 100rpx;
  height: 100rpx;
  background: #10B261;
  border-radius: 50%;
  position: fixed;
  bottom: 300rpx;
  right: 10rpx;
  color: #fff;
  font-size: 27rpx;
  text-align: center;
  font-weight: bold;
  padding: 12rpx;
  box-sizing: border-box;
}
</style>