uniProject/pages/client/hetong/HetongList.vue

<template>
	<view class="phone-list-page ht-list-page">
		<view class="icon-title-navBar-box">
			<view @click="goUpPage" class="nav-bar-icon"></view>
			<text class="nav-bar-title">历史合同</text>
		</view>
	<!-- 课程列表 -->
	<scroll-view scroll-y="true" refresher-enabled="true" :refresher-triggered="data.loading"
		:refresher-threshold="50" refresher-background="transparent" @refresherrefresh="onRefresh"  @scrolltolower="onScrolltolower"
		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"></icon></view>
						</view>
						<view class="ht-time"><icon class="phone-time-icon" />合同开始时间：{{formatTime(item.startDate)}} </view>
						<view class="ht-time"><icon class="phone-time-icon" />合同结束时间：{{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>
	<!-- 页面底端 -->
	<customTabbarClientVue></customTabbarClientVue>
	</view>
</template>

<script setup>
import {ref,reactive} from "vue";
import {onLoad,onShow} from "@dcloudio/uni-app";
import {getHetongList} from '@/api/jzHetong.js'
import customTabbarClientVue from "@/components/custom-tabbar/custom-tabbar-admin.vue";
const data = reactive({
		list: [], // 考试列表
		loading: false,
		page: 0,
		size: 10,
		state: 'more',
		contentText: {
			contentdown: '查看更多',
			contentrefresh: '加载中',
			contentnomore: '没有更多'
		},
})	
	
onLoad((options) => {
		data.from = options.from;
		
	})

onShow(() => {
  refreshData()
})

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/admin/Hetong/HetongInfo?id=${item.id}`
	})
}

function goUpPage() {
	uni.redirectTo({
		url: '/pages/admin/ShouYe/shouye'
	})	
}
</script>

<style>
</style>