subject_gxj/xj_project_app_2024_2_18/pages/intermediaryService/index.vue

<script setup>
  import {
    ref
  } from "vue";

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

  import {
    getIntermediaryList,
  } from "@/api/work/intermediaryService.js";


  // 页面标题
  let pageName = ref(null);

  // 滚动
  let scrollTop = ref(0);

  // 搜索条件
  let searchInfo = ref({
    pageNo: 1,
    pageSize: 10,
    type: null
  });

  // 列表
  let policyList = ref([]);
  let listTotal = ref(0);

  // 获取列表
  let loading = ref(true);
  const getList = function() {
    if (searchInfo.value.pageNo == 1) {
      loading.value = true
    };
    getIntermediaryList(searchInfo.value).then(res => {
      loading.value = false;
      policyList.value = policyList.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;

      console.log(policyList.value);
    }).catch(() => {
      loading.value = false;
    })
  };


  let itemIndex = ref(-1);

  function openFold(index) {

    if (itemIndex.value == index) {
      itemIndex.value = -1;
    } else {
      itemIndex.value = index;
    }
  }

  // 折叠/展开
  const changeFoldItem = (status, id) => {
    let item = policyList.value.find(item => item.id === id);
    item.unfold = status;
  }

  // 去详情
  const gotoDetail = id => {
    uni.navigateTo({
      url: `/pages/intermediaryService/detail/index?id=${id}`
    })
  }

  // 触底加载flag
  let moreListFlag = true

  onLoad(options => {
    pageName = options.title;
    searchInfo.value.type = options.id;
    getList();
  });

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

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

  onPageScroll((e) => {
    scrollTop.value = e.scrollTop
  })
</script>

<template>
  <view class="container">
    <page-title>{{pageName}}（{{listTotal}}）</page-title>

    <view class="items-list" style="padding-top: 0 !important;">
      <view class="policy-item" v-for="(item,index) in policyList" :key="index">
        <view class="un-fold">
          <text class="card-name-num">{{(index+1<10?'0'+(index+1):index+1)}}</text>
          <view class="search-item-text">{{item.title??"--"}}</view>
          <view class="detail-fold">
            <view class="card-btn fat-btn" @click="gotoDetail(item.id)">查看</view>
            <image src="../../static/images/interArrow.svg" mode="" :class="itemIndex===index?'over-turn':''"
              @click="openFold(index)"></image>
            <!-- <image src="../../static/images/interArrow.png" mode="" :class="itemIndex===index?'over-turn':''" @click=openFold(index)""></image> -->
          </view>
        </view>
        <view class="fold" :style="itemIndex!==index?{height:'0',overflow:'hidden',paddingBottom:'0'}:''">
          <view class="card-item item-special">
            <view class="card-item-name name-special">统一社会信用代码</view>
            <view class="card-item-content content-special">{{item.groupCode ?? "--"}}</view>
          </view>
          <view class="card-item">
            <view class="card-item-name">业务负责人</view>
            <view class="card-item-content">{{item.businessOwner || "--"}}</view>
          </view>
          <view class="card-item">
            <view class="card-item-name">负责人职务</view>
            <view class="card-item-content">{{item.businessJob || "--"}}</view>
          </view>
          <view class="card-item">
            <view class="card-item-name">负责人电话</view>
            <view class="card-item-content">{{item.businessPhone || "--"}}</view>
          </view>
        </view>
        <!-- 				未折叠卡片
				<view class="card" v-if="item.unfold">
					<view class="card-item">
						<view class="card-item-name">企业名称</view>
						<view class="card-item-content">{{item.title ?? "--"}}</view>
					</view>



					<view class="card-item">
						<view class="card-item-name">业务负责人</view>
						<view class="card-item-content">{{item.businessOwner || "--"}}</view>
					</view>

					<view class="card-item">
						<view class="card-item-name">业务负责人联系电话</view>
						<view class="card-item-content">{{item.businessPhone || "--"}}</view>
					</view>

					<view class="card-item">
						<view class="card-item-name">备注</view>
						<view class="card-item-content">{{item.remark || "--"}}</view>
					</view>

					<view class="card-item bottom-item">
						<view class="card-btn fat-btn" @click="gotoDetail(item.id)">详情</view>
					</view>

					<view class="card-fold-option">
						<view class="card-fold-count">{{index + 1}} / {{listTotal}}</view>

						<view class="card-fold-center" @click.stop="changeFoldItem(false,item.id)">
							<view class="card-fold-btn card-unfold-btn"></view>
						</view>

						<view class="card-fold-chaos"></view>
					</view>
				</view>

				折叠卡片
				<view class="card-fold" v-else>
					{{item.title ?? "--"}}

					<view class="card-fold-option">
						<view class="card-fold-count">{{index + 1}} / {{listTotal}}</view>

						<view class="card-fold-center" @click.stop="changeFoldItem(true, item.id)">
							<view class="card-fold-btn"></view>
						</view>

						<view class="card-fold-chaos"></view>
					</view>
				</view>
			 -->
      </view>
    </view>

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

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

<style lang="scss" scoped>
  .items-list {
    position: absolute;
    margin-top: calc(var(--status-bar-height) + 0rpx);
    left: 0;
    width: 100%;
    min-height: 95%;
    padding: 50rpx 4%;
    // background: #F9FBFF;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 20rpx;
    // margin-top: 32rpx;
    // border-radius: 40rpx 40rpx 0 0;
  }

  .item {
    margin-top: 20rpx;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 140rpx;
    padding: 26rpx 28rpx;
    box-sizing: border-box;
    background: #FFFFFF;
    box-shadow: 0rpx 18rpx 48rpx -4rpx rgba(150, 176, 220, 0.2);
    border-radius: 24rpx;

    .item-icon {
      width: 82rpx;
      height: 82rpx;
      margin-right: 32rpx;
      // 	background-image: url("@/static/policy-icon.png");
      // 	background-size: 100% 100%;
    }

    .item-text {
      width: 70%;
      height: 100%;
      word-break: break-all;

      .item-title {
        width: 100%;
        color: #343437;
        font-size: 28rpx;
        margin-bottom: 30rpx;
      }

      .item-kind {
        width: fit-content;
        min-height: 38rpx;
        padding: 10rpx;
        box-sizing: border-box;
        text-align: center;
        color: #1763E7;
        font-size: 24rpx;
        line-height: 38rpx;
        background: #DEEAFF;
        border-radius: 12rpx;
      }

      .item-rptDate {
        width: 100%;
        color: #343437;
        font-size: 28rpx;
        margin-bottom: 30rpx;
      }
    }

    .item-btn {
      width: 106rpx;
      height: 58rpx;
      background: #1763E7;
      border-radius: 16rpx;
      color: #FFF;
      font-size: 28rpx;
      text-align: center;
      line-height: 58rpx;
      margin-left: 20rpx;
    }
  }

  .card-fold {
    position: relative;
    width: 100%;
    min-height: 152rpx;
    margin-bottom: 20rpx;
    padding: 24rpx 30rpx 52rpx;
    box-sizing: border-box;
    background: #FFFFFF;
    border-radius: 40rpx;
    overflow: hidden;
  }

  .card-fold-option {
    position: absolute;
    display: flex;
    justify-content: space-between;
    align-items: center;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 38rpx;
    padding: 0 40rpx;
    box-sizing: border-box;
    background: linear-gradient(270deg, #CADDFF 4%, rgba(219, 232, 255, 0) 100%);
    z-index: 999;

    .card-fold-count {
      flex: 1;
      font-size: 28rpx;
      color: #1869F6;
    }

    .card-fold-center {
      flex: 1;

      .card-fold-btn {
        width: 32rpx;
        height: 20rpx;
        margin: 0 auto;
        background-image: url("@/static/icon-fold.png");
        background-size: 100% 100%;
      }

      .card-unfold-btn {
        transform: rotate(180deg);
      }
    }

    .card-fold-chaos {
      flex: 1;
    }
  }

  .bottom-item {
    margin-bottom: 20rpx;
  }


  .policy-item {
    width: 696rpx;
    // height: 44px;
    background: #FFFFFF;
    box-shadow: 0px 0px 8rpx 0px #D8EEFF;
    border-radius: 10rpx;
    margin: 0 auto;
    // height: 188rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-right: 16rpx;
    padding-left: 10rpx;

    .un-fold {
      display: flex;
      flex-direction: row;
      align-items: center;
      height: 128rpx;
      padding: 0 8rpx;
      width: 100%;

      .search-item-icon {
        width: 96rpx;
        height: 78rpx;
        margin: 38rpx auto 40rpx;
        background-image: url('@/static/policy-file.png');
        background-size: 100% 100%;
      }
    }

    .fold {
      width: 100%;
      padding-bottom: 24rpx;
      transition: all .3s;
      height: auto;

      .card-item {
        width: 100%;
        display: flex;
        flex-direction: row;
        line-height: 44rpx;
        padding-left: 30rpx;

        .card-item-name {
          font-weight: 500;
          font-size: 24rpx;
          color: #B5B5B5;
          margin-right: 16rpx;
        }

        .card-item-content {
          font-weight: 500;
          font-size: 24rpx;
          color: #333333;
        }
      }

      .item-special {
        width: 634rpx;
        height: 56rpx;
        border-radius: 30rpx;
        border: 2rpx solid #EBEBEB;
        margin: 0 auto;
        line-height: 56rpx;
        margin-bottom: 24rpx;

        .name-special,
        .content-special {
          font-weight: 500;
          font-size: 24rpx;
          color: #7A85E0;
        }
      }
    }

    .search-item-text {
      width: 520rpx;
      // max-width: 146rpx;
      // min-height: 40rpx;
      margin: 0 auto;
      text-align: center;
      line-height: 40rpx;
      font-weight: 500;
      font-size: 28rpx;
      color: #222222;
      // background: #E2ECFF;
      border-radius: 8rpx;
      display: flex;
      justify-content: flex-start;
    }

    .detail-fold {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: auto;
      background-color: transparent;
      box-shadow: none;

      .fat-btn {
        display: block;
        width: 100rpx;
        min-width: 100rpx;
        height: 48rpx;
        background: #D6ECFF;
        border-radius: 30rpx;

      }

      image {
        width: 32rpx;
        height: 32rpx;
        // margin-left: 16rpx;
      }
    }


  }


  .card-name-num {
    width: 64rpx;
    height: 64rpx;
    border-radius: 4rpx;
    border: 2rpx solid #F4F4F4;
    font-size: 24rpx;
    color: #B5B5B5;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .fat-btn {
    width: 112rpx;
    height: 48rpx;
    background: #D6ECFF;
    border-radius: 30rpx;
    font-weight: 500;
    font-size: 28rpx;
    color: #002F69;
    line-height: 48rpx;
    text-align: center;
    font-style: normal;
  }

  .over-turn {
    transform: rotate(180deg);
  }
</style>