<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>