subject_gxj/xj_project_app_2024_2_18/pages/enterpriseInfo/index.vue

<template>
  <view class="container">
    <page-title @searchClick='searchClick' :showSearch='true'>企业信息({{listTotal}})</page-title>
    <!-- 		<view class="back-btn">
			<u-icon name="arrow-left" color="#fff" size="20" customStyle="margin:0 auto" @click="backToBefore()"></u-icon>

			<text class="back-text" @click="backToBefore()">企业信息</text>

			<u-icon name="search" color="#fff" size="30" customStyle="position:absolute;top:0;right:0"
				@click="goToPage('/pages/enterpriseInfo/search/index')"></u-icon>
		</view> -->
    <view class="cards-list">
      <view class="card-layer" v-for="(item,index) in enterpriseList" :key="index">
        <view class="card-num">
          {{index+1}}
        </view>
        <view class="card-title">
          <text> {{item.title ?? "--"}}</text>
          <view class="title-right">
            <view class="view-btn" @click="gotoDetail(item.id,item.title)">
              查看
            </view>
            <u-icon v-if='item.isOpen' name="arrow-up" color="#002F69" size="16" @click="onChangeCard(index)"></u-icon>
            <u-icon v-else name="arrow-down" color="#002F69" size="16" @click="onChangeCard(index)"></u-icon>
          </view>
        </view>




        <view class="card-item-list"
          :style="item.isOpen ? {height:'150rpx'} : {borderColor:'transparent',marginTop:'0'}">
          <view class="item">
            <view class="item-label">所在地区</view>
            <view class="item-text">
              {{item.area || "--"}}
            </view>
          </view>
          <view class="item">
            <view class="item-label">当前状态</view>
            <view class="item-text">
              {{item.status || "--"}}
            </view>
          </view>
          <view class="item">
            <view class="item-label">注册资金</view>
            <view class="item-text">
              {{(item.amt!= null)? item.amt : "--"}}
            </view>
          </view>
        </view>
      </view>


      <empty-show v-if="enterpriseList.length===0"></empty-show>
    </view>

    <u-back-top :scroll-top="scrollTop"></u-back-top>

    <u-loading-page :loading="loading"></u-loading-page>
  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue'

  import {
    onLoad,
    onUnload,
    onPullDownRefresh,
    onReachBottom,
    onPageScroll
  } from "@dcloudio/uni-app"

  import {
    getEnterpriseInfoList,
  } from "@/api/work/enterpriseInfo.js"

  // 返回上一级
  function backToBefore() {
    uni.reLaunch({
      url: "/pages/index"
    });
  };

  function goToPage(url) {
    uni.navigateTo({
      url
    })
  }

  let scrollTop = ref(0);
  let loading = ref(true);

  // 参数
  let searchInfo = ref({
    pageNo: 1,
    pageSize: 10,
  })

  function searchClick() {
    goToPage('/pages/enterpriseInfo/search/index')
  }

  // 获取列表
  function getList() {
    let params = {
      pageNo: searchInfo.value.pageNo,
      pageSize: searchInfo.value.pageSize,
      title: searchInfo.value.title,
      status: searchInfo.value.status
    }

    if (searchInfo.value.pageNo == 1) {
      loading.value = true
    }
    getEnterpriseInfoList(params).then(res => {
      loading.value = false
      enterpriseList.value = enterpriseList.value.concat(res.data.list)
      listTotal.value = res.data.total

      if (res.data.total == searchInfo.value.pageNo * searchInfo.value.pageSize - (10 - res.data.list.length))
        moreListFlag = false;
    }).catch(() => {
      loading.value = false
    })
  }


  let cardCurrut = ref(0)

  function onChangeCard(e) {
    if (cardCurrut.value == e) {
      enterpriseList.value[cardCurrut.value].isOpen = !enterpriseList.value[cardCurrut.value].isOpen
    } else {
      enterpriseList.value[cardCurrut.value].isOpen = false
      enterpriseList.value[e].isOpen = true
      cardCurrut.value = e
    }


  }

  // 主要列表
  let enterpriseList = ref([]);
  let listTotal = ref(0);

  // 去详情
  function gotoDetail(id, subName) {
    uni.navigateTo({
      url: `/pages/enterpriseInfo/detail/index?id=${id}&subName=${subName}`
    })
  }

  // 触底加载flag
  let moreListFlag = true

  onLoad(options => {
    // searchInfo.value = Object.assign(searchInfo.value, options)
    // let filterArr = ["null", "undefined", ""]
    // for (let i in searchInfo.value) {
    // 	if (filterArr.includes(searchInfo.value[i])) {
    // 		searchInfo.value[i] = null
    // 	}
    // }

    uni.$on('enterpriseInfoSearch', resolve => {
      searchInfo.value = Object.assign(searchInfo.value, resolve);
      searchInfo.value.pageNo = 1;
      enterpriseList.value = [];
      listTotal.value = 0;
      moreListFlag = true;

      getList();
    })

    getList();
  })

  onUnload(() => {
    uni.$off('enterpriseInfoSearch');
  });

  onPageScroll((e) => {
    scrollTop.value = e.scrollTop
  })

  onPullDownRefresh(() => {
    searchInfo.value.pageNo = 1;
    enterpriseList.value = [];
    moreListFlag = true;
    try {
      getList();
    } finally {
      uni.stopPullDownRefresh()
    }
  })

  onReachBottom(() => {
    if (!moreListFlag) {
      return uni.showToast({
        title: "已经到底了。",
        icon: "none",
        duration: 2000
      })
    }
    searchInfo.value.pageNo++;
    getList();
  })
</script>

<style lang="scss" scoped>
  .card-layer {
    position: relative;
    margin-top: 32rpx;
    padding: 16rpx 24rpx;
    width: 100%;
    box-shadow: 0rpx 0rpx 8rpx 0rpx #D8EEFF;
    border-radius: 12rpx;
    background: #FFFFFF;

    .card-num {
      position: absolute;
      // left: 30rpx;
      // top: 32rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 64rpx;
      height: 64rpx;
      border-radius: 4rpx;
      border: 1rpx solid #F4F4F4;
      font-size: 24rpx;
      color: #B5B5B5;
    }

    .card-title {
      margin-left: 95rpx;
      width: calc(100% - 90rpx);
      min-height: 80rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20rpx;

      text {
        flex-grow: 1;
      }

      .title-right {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 20rpx;

        .view-btn {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100rpx;
          height: 48rpx;
          background: #D6ECFF;
          border-radius: 30rpx;
          font-size: 28rpx;
          font-weight: 500;
          color: #002F69;
        }

      }
    }

    .card-input-btn {
      position: absolute;
      top: 24rpx;
      right: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10rpx;
      background: #5FA6F5;
      padding: 22rpx 15rpx 22rpx 20rpx;
      border-radius: 24rpx 0rpx 0rpx 24rpx;
      font-weight: 500;
      font-size: 32rpx;
      color: #FFFFFF;
    }

    .card-view {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 20rpx;

      .item-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 96rpx;
        height: 48rpx;
        border-radius: 8rpx;
        border: 1rpx solid #D4E7FF;
        font-weight: 500;
        font-size: 28rpx;
        color: #6C90C1;
      }
    }

    .card-item-list {
      width: 100%;
      height: 0;
      overflow: hidden;
      transition: all .3s;
      margin-top: 30rpx;
      border-top: 1rpx dashed #DDDDDD;

      .item {
        margin-top: 15rpx;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 20rpx;
        width: 450rpx;
        height: 30rpx;

        .item-label {
          font-weight: 500;
          font-size: 24rpx;
          color: #B5B5B5;
        }

        .item-text {
          font-weight: 500;
          font-size: 24rpx;
          color: #666666;
        }
      }
    }

  }
</style>