subject_gxj/xj_project_app/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;
		}).catch(() => {
			loading.value = false;
		})
	};

	// 折叠/展开
	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}}</page-title>

		<view class="items-list">
			<view v-for="(item,index) in policyList" :key="index">
				<!-- 未折叠卡片 -->
				<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.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.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;
		top: 5%;
		left: 0;
		width: 100%;
		min-height: 95%;
		padding: 100rpx 4%;
		background: #F9FBFF;
		// 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;
	}
</style>