assess-app/page_subpack/transition/to_excel.vue

<template>
  <view class="total-page page-box page-env-20 scroll_content task-bg">
    <Nav title="转换工具" :genre="1" is_fixed></Nav>
    <view class="header-filter">
      <view class="row-justify-sb center  m-20">
        <view class="subsection">
          <uv-subsection :list="tabsDate" :bgColor="'#FFF'" :barBg="'#0FB160'" :activeColor="'#fff'"
                         :inactiveColor="'#0FB160'" :fontSize="14" custom-style="height: 70rpx;border-radius: 30rpx;"
                         custom-item-style="border-radius: 30rpx;" :current="subCurrent"
                         @change="onSubChange"></uv-subsection>
        </view>
        <view class="row credit_earch center sys-background-fff r-30 p-l16">
          <uni-icons type="search" size="18" color="#999"></uni-icons>
          <input class="flex m-l10 m-r20 size-28 sys-background-fff" type="text" placeholder="搜索文件名称"
                 placeholder-style="font-size:28rpx;color:#999" v-model="value" />
        </view>
      </view>
      <view style="height: 100rpx;">
        <z-tabs ref="tabs" :list="tabsList" :active-style="{color:'#10B261',fontWeight:'bold',fontSize:'28rpx'}"
                :bar-style="{background:'#10B261'}" :inactive-style="{fontWeight:'bold',fontSize:'28rpx'}"
                :current="current" :bar-animate-mode="'worm'" @change="tabsChange" />
      </view>
    </view>
    <EnScroll ref="scroll" :navHeight="navHeight" is_tabHeight @onRefresh="onRefresh"
              @onScrollBottom="onScrollBottom">
      <CreditItem :list="list"></CreditItem>
    </EnScroll>
    <view class="fixed-button p-t20 p-lr30">
      <button class="en-button button-background sys-weight-500 row-justify-c center" type="default"
              hover-class="is-hover" @click="addPdf">
        <image class="wh-36 m-lr16" src="/static/img/task/task-phone.png" mode="aspectFill"></image>
        添加转换文件
      </button>
    </view>
    <uni-popup ref="popup" type="bottom">
      <view class="page-env-160 sys-background-fff r-20">
        <view class="row-justify-sb center p-lr30 p-t30">
          <view class="wh-25"></view>
          <text class="size-30 sys-weight-600">添加文件</text>
          <image class="wh-25" src="/page_subpack/static/img/task-details/close.png" mode="" @click="endAdd(true)">
          </image>
        </view>
<!--        <add-file @newMsg="endAdd"></add-file>-->
      </view>

    </uni-popup>
  </view>
</template>
<script>
import CreditItem from "./components/credit-item.vue";
import tools from "@/service/tools";
// import AddFile from "@/page_subpack/transition/components/add-file.vue";

export default {
  components: {
    // AddFile,
    CreditItem,
  },
  data() {
    return {
      value: '',
      current: 0,
      navHeight: 0,
      swiperCurrent: 0,
      tabsList: [{
        name: '全部',
        dot_color: 'red',
        disabled: false,
        'id': 0,
      }, {
        name: '待转换',
        dot_color: 'yellow',
        disabled: false,
        'id': 1,
      }, {
        'id': 2,
        name: '转换中',
        dot_color: '',
        disabled: false
      }, {
        'id': 3,
        name: '已完成',
        dot_color: '',
        disabled: false
      }, {
        'id': 4,
        name: '已完成',
        dot_color: '',
        disabled: false
      }],
      subCurrent: 0,
      tabsDate: ['全部', '当日', '本周'],
      list: [],
      page: 1,
      total: null,
      isAjax: false,

    }
  },
  onReady() {
    this.getFilterHeight()
  },
  onLoad() {},
  mounted() {
    this.startList()
  },
  methods: {
    addPdf(){
      this.$refs.popup.open('bottom')
    },
    endAdd(type){
      this.$refs.popup.close('bottom')
      if(!type)this.startList()
    },
    startList() {
      this.list = []
      this.page = 1
      this.scrollTop = 0
      this.total = null
      this.isAjax = false
      this.getTransferList()
    },
    getTransferList() {
      if (this.isAjax || this.list.length === this.total) {
        return
      }
      getTransferList({
        'status': this.tabId
      }).then(res => {
        if (res.code === 1) {
          this.list.push(...res.data.items)
          this.total = res.data.total
        } else {
          tools.error(res.msg)
        }
        this.isAjax = false
      })
    },
    tabsChange(index) {
      if (index !== this.current) {
        this.current = index;
        this.startList()
      }
    },
    onSubChange(current) {
      this.subCurrent = current
    },
    // 下拉刷新
    onRefresh() {
      console.log('下拉刷新');
      setTimeout(() => {
        this.$refs.scroll.onEndPulling()
      }, 500)
    },
    // 滚动到底部
    onScrollBottom() {
      console.log('滚动到底部');
    },
    getFilterHeight() {
      const query = uni.createSelectorQuery().in(this);
      query.select('.header-filter').boundingClientRect(data => {
        if (data) {
          console.log(data.height);
          this.navHeight = data.height
        }
      }).exec();
    }
  },
}
</script>
<style lang="scss" scoped>
.subsection {
  width: 430rpx;
}

.credit_earch {
  width: 250rpx;
  height: 69rpx;
}

.en-button {
  border: none;
  color: #fff;
  font-size: 30rpx;
  border: 1rpx solid #0FB160 !important;
  line-height: 80rpx;
  border-radius: 100rpx;
  background-color: #0FB160;
}

.fixed-button {
  position: fixed;
  bottom: 0;
  z-index: 10;
  background: #fff;
  width: calc(100% - 60rpx);
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
}

button::after {
  border: none;
}
</style>