uniProject/pages/admin/yishou/yishou.vue

<template>
	<view class="phone-list-page phone-yishou-page">
		<view class="icon-title-navBar-box">
			<view @click="goUpPage" class="nav-bar-icon"></view>
			<text class="nav-bar-title">已售记录</text>
		</view>
		<view class="jiazheng-search-box">
			<uni-datetime-picker v-model="data.range" type="daterange" @change="onDateSelect" style="flex: 1" class="yishou-date-box"/>
		</view>
		<!-- 课程列表 -->
		<scroll-view scroll-y="true" refresher-enabled="true" :refresher-triggered="data.loading"
			:refresher-threshold="50" refresher-background="transparent" @refresherrefresh="onRefresh" @scrolltolower="onScrolltolower"
			class="ys-kc-saixuan-view scroll-top-border">
			<uni-list class="admin-list-box">
				<uni-list-item v-for="item in data.list" class="admin-list-item-box">
					<template v-slot:body>
						<view class="kecheng-list-card">
							<img :src="item.pic">
							<view class="item-card-row yishou-item-card-row">
								<view class="ks-item-top">
									<view class="kc-name">{{item.name}}</view>
								</view>
								<view class="ks-totalTm kc-fenlei">
									<icon class="phone-user-icon" />购买人：{{item.realName}}
								</view>
								<view class="ks-totalTm kc-fenlei">
									<icon class="phone-tel-icon" />手机号：{{item.userName}}
								</view>
								<view class="ks-totalTm kc-totalTm time-row">
									<icon class="phone-time-icon" />{{item.createTime}}
								</view>
								
							</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 searchDialog from "@/pages/admin/banzheng/search.vue";
	import commonDialog from '@/components/dialog/commonDialog.vue';
	import customTabbarClientVue from "@/components/custom-tabbar/custom-tabbar-admin.vue";

	import {
		reactive,
		ref
	} from "vue";

	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		getKechengYishou,
	} from "@/api/yishou.js"

	const data = reactive({
		list: [], // 办证列表
		loading: false,
		page: 0,
		size: 10,
		state: 'more',
		contentText: {
			contentdown: '查看更多',
			contentrefresh: '加载中',
			contentnomore: '没有更多'
		},
		startDate: '', 
		endDate: '', 
		range: []
	})
	
	function onScrolltolower() {
		getMore()
	}
	
	function onDateSelect(dataD) {
		if (dataD) {
			data.startDate = dataD[0];
			data.endDate = dataD[1];
		} else {
			data.startDate = '';
			data.endDate = '';
		}
		data.page = 0;
		refreshData()
	}

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

	function refreshData() {
		const opt = {
			endDate: data.endDate, 
			startDate: data.startDate, 
			page: 1,
			size: 10, // 固定查询10条
		}
		data.list = [];
		// 数学
		data.state = 'loading';
		data.page++;
		opt.page = data.page;

		getKechengYishou(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 = {
			endDate: data.endDate, 
			startDate: data.startDate, 
			page: 1,
			size: 10, // 固定查询10条
		}
		if (data.state == 'no-more') return;
		data.state = 'loading';
		data.page++;
		opt.page = data.page;
		getKechengYishou(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 onRefresh() {
		data.page = 0;
		data.list = [];
		data.loading = true;
		refreshData();
	}

	onLoad(() => {
		getMore()
	})
</script>

<style>

</style>