proginn-frontend/pages/otherpage/kaifain/viewHistory.vue

<template>
  <div class="myKaifainMobile">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="listArea">
      <div style="text-align: center" v-if="firstLoading">
        <van-loading size="24px">加载中...</van-loading>
      </div>
      <van-list
        v-else
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        :immediate-check="false"
        class="list"
        :error="error"
      >
        <div
          class="cell"
          v-for="(item, index) in dataList" :key="'dataList' + index"
          @click="jumpToKaifain(item)"
        >
          <div class="cellContent">
            <div class="topInfo">
              <div class="topLeft">
                <img :src="item.provider.images" alt="">
              </div>
              <div class="topRight">
                <div class="title">{{item.provider.title}}</div>
                <div class="tapList">
                  <div class="tapCell"><p>{{item.provider.industryName}}</p></div>
                  <div class="tapCell"><p>{{item.provider.techTypeName}}</p></div>
                </div>
                <div class="desc">{{item.provider.description}}</div>
              </div>
            </div>
            <div class="bottomArea">
              <div class="companyInfo">
                <div class="companyImg">
                  <img :src="item.provider.companyInfo.logo"
                    onerror="this.src='https://stacdn.proginn.com/image/uCenter/company_logo.png'"
                    alt="">
                </div>
                <div class="companyName">{{item.provider.companyInfo.name}}</div>
              </div>
              <div class="time">{{item.contactCreatedAtFormat}}</div>
            </div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
  const sList = [
    { name: "审核通过", value: 2 },
    { name: "审核失败", value: 3 },
    { name: "审核中", value: 1 },
  ]
  /** 我咨询的解决方案 **/
  export default {
    name: "ViewHistory",
    showCommonFooter: false,
    components: {},
    head() {
      let obj = {
        title: "我的咨询",
        meta: [
          {
            'name': 'keywords',
            'content': ""
          }, {
            'name': 'descrption',
            'content': ""
          }, {
            'name': 'h1',
            'content': ""
          }
        ]
      }
      return obj
    },
    async asyncData({ app }) {
      return {
        mobile: app.$deviceType.isMobile()
      }
    },
    data() {
      return {
        sList,
        page: {
          page: 1,
          total: 0,
          size: 20,
        },
        dataList: [],
        error: false,
        finished: false, //移动端列表是否完全加载完成
        loading: false, //web端列表首次加载loading todo true
        refreshing: false,
        firstLoading: false, //移动端加载loading
        isLoading: false //控制防止一次没响应，重复请求接口
      }
    },
    watch: {},
    computed: {},
    async created() {
      this.checkLogin()
      this.getList()
    },
    methods: {
      getList() {
        const { page } = this
        let url = "/api/kaifawu/getMyContactList"
        if (this.isLoading) {
          return
        }
        let data = {
          ...page,
        }
        this.loading = true
        this.isLoading = true
        this.$axios.post(url, data).then(res => {
          if (Number(res.data.status) === 1) {
            let data = res.data.data
            let list = data.lists || []
            this.page.total = data.total
            if (this.page.page === 1 || !this.mobile) {
              this.dataList = [ ...list ]
            } else {
              this.dataList = [ ...this.dataList, ...list ]
            }
            if (this.mobile) {
              this.page.page += 1
            }
            if (Number(this.page.total) <= this.dataList.length) {
              this.finished = true
            }
            this.error = false
          }
        }).finally(() => {
          this.firstLoading = false
          this.refreshing = false
          this.isLoading = false
          this.$nextTick(() => {
            this.loading = false
          })
        }).catch(() => {
          this.error = "请求失败"
        })
      },
      pageChange(i) {
        this.page.page = i
        this.getList()
      },
      /** 移动端下拉刷新 **/
      onRefresh() {
        // 清空列表数据
        this.finished = false;
        this.page.page = 1
        this.page.total = 0
        this.onLoad();
      },
      onLoad() {
        console.log('onLoad')
        this.getList()
      },
      jumpToKaifain(item) {
        const {provider: {id, hash_id} = {}} = item
        location.href = `/kaifain/s/${hash_id}`
      }
    }
  }
</script>

<style scope lang="scss">
  .delete-button {
    height: 100%;
  }

  @import "@/assets/css/otherpage/kaifain/viewHistory";
</style>