uniProject/pages/client/hetong/HetongList.vue

<template>
	<view class="phone-list-page ht-list-page">
		<!-- 导航区域 -->
		<customNavbarVue title="我的合同" :show-back-btn="true" @back="goUpPage"></customNavbarVue>
	<!-- 课程列表 -->
	<scroll-view scroll-y="true" refresher-enabled="true" :refresher-triggered="data.loading"
		:refresher-threshold="50" refresher-background="transparent" @refresherrefresh="onRefresh"  @scrolltolower="onScrolltolower"
		:style="{ height: `calc(100vh - ${statusBarHeight}px - 212rpx);`}" class="admin-phone-tabbar-view">
		<uni-list class="admin-list-box ht-list-box">
			<uni-list-item v-for="item in data.list" class="ht-list-item-box">
				<template v-slot:body>
					<view class="ht-card-row">
						<view class="ht-status-btn-row">
							<view class="ht-status">合同状态：<view :class="'status-' + item.status">{{formatStatus(item.status)}}</view></view>
							<view class="ht-biew-btn" @click="checkKecheng(item)">查看
							<icon class="ht-jt" :style="{ backgroundImage: 'url(' + data.imgsArr.htjtIcon + ')' }"></icon>
							</view>
						</view>
						<view class="ht-time">
							<icon class="phone-time-icon" :style="{ backgroundImage: 'url(' + data.imgsArr.timeIcon + ')' }"/>合同开始时间：{{formatTime(item.startDate)}} </view>
						<view class="ht-time">
							<icon class="phone-time-icon" :style="{ backgroundImage: 'url(' + data.imgsArr.timeIcon + ')' }"/>合同结束时间：{{formatTime(item.endDate)}} </view>
					</view>
				</template>
			</uni-list-item>
			<uni-load-more :status="data.state" @click="getMore(0)" :contentText="data.contentText"></uni-load-more>
		</uni-list>
	</scroll-view>
	<!-- 底部区域 -->
	<customTabbarClient :currentTab="0"></customTabbarClient>
	</view>
</template>

<script setup>
import {ref,reactive,onMounted} from "vue";
import {onLoad,onShow} from "@dcloudio/uni-app";
import {getHetongList} from '@/api/jzHetong.js'
import customTabbarClient from "@/components/custom-tabbar/custom-tabbar-client.vue"
import customNavbarVue from "@/components/custom-navbar/custom-navbar.vue";
import cacheManager from '@/utils/cacheManager.js'
const statusBarHeight = ref(0);	
const data = reactive({
		list: [], // 考试列表
		loading: false,
		page: 0,
		size: 10,
		state: 'more',
		contentText: {
			contentdown: '查看更多',
			contentrefresh: '加载中',
			contentnomore: '没有更多'
		},
		imgsArr: {
			htjtIcon: '',
			timeIcon: '',
		},
})	
	
onLoad((options) => {
		data.from = options.from;
		data.imgsArr.htjtIcon = cacheManager.get('projectImg').nav_bar_jt_bottom;
		data.imgsArr.timeIcon = cacheManager.get('projectImg').date_icon;
	})

onShow(() => {
  refreshData()
})
onMounted(() => {
		uni.getSystemInfo({
		success: (res) => {
		statusBarHeight.value = res.statusBarHeight;
		}
		});
	});
function onRefresh() {
	data.page = 0;
	data.list = [];
	data.loading = true;
	refreshData();
}

function refreshData() {
	const opt = {
		page: 1,
		size: 10, // 固定查询10条
	}
	data.list = [];
	// 数学
	data.state = 'loading';
	data.page++;
	opt.page = data.page;
	
	    console.log('列表',opt)
	
	getHetongList(opt).then(res => {



		data.list = data.list.concat(res.data.data);
		data.loading = false;
		if (res.data.total > data.list.length) {
			data.state = 'more';
			data.loading = false;
		} else {
			data.state = 'no-more';
			data.loading = false;
		}
	}).catch(err => {
		data.state = 'more';
		data.loading = false;
	})
}

function getMore() {
	const opt = {
		page: 1,
		size: 10, // 固定查询10条
	}
	if (data.state == 'no-more') return;
	data.state = 'loading';
	data.page++;
	opt.page = data.page;
	getHetongList(opt).then(res => {
    console.log('列表2',res.data)

    data.list = data.list.concat(res.data.data);
		data.loading = false;
		if (res.data.total > data.list.length) {
			data.state = 'more';
			data.loading = false;
		} else {
			data.state = 'no-more';
			data.loading = false;
		}
	}).catch(err => {
		data.state = 'more';
		data.loading = false;
	})
}

function onScrolltolower() {
	getMore()
}

function handleSearch() {
	data.page = 0;
	refreshData();
}

// 在现有代码底部添加此方法
function formatStatus(status) {
  const statusMap = {
    0: '待签字',
    1: '待审核',
    2: '生效',
	3: '失效',
  };
  return statusMap[status] || '未知状态'; // 处理未知状态
}

function formatTime(data){
		return data.split(' ')[0];
}

function checkKecheng(item) {
	uni.navigateTo({
		url: `/pages/client/hetong/hetongInfo?id=${item.id}`
	})
}

function goUpPage() {
	uni.navigateBack()
}
</script>

<style>
</style>