uniProject/pages/admin/Kecheng/list.vue

<template>
	<view class="phone-list-page">
		<view class="phone-navBar-box">
			<view @click="goUpPage" class="nav-bar-icon"></view>
			<text class="nav-bar-title">课程管理</text>
			<uni-icons class="nav-bar-right-icon" type="search" size="22" color="#666" @click="searchBtn"></uni-icons>
		</view>
		<!-- 查询职业 -->
		<view class="jiazheng-search-box">
			<view @click.stop="clickAlltype" class="select-item-box">
				<text class="kc-select-text">{{data.leixing}}</text>
				<icon class="select-jt-default" />
			</view>
		<!-- 	<input class="search-input" placeholder="请输入课程名称" v-model="data.name" />
			<view class="search-icon" @click="handleSearch">
				<uni-icons type="search" size="24" color="#fff"></uni-icons>
			</view> -->
		</view>
		<!-- 课程列表 -->
		<scroll-view scroll-y="true" refresher-enabled="true" :refresher-triggered="data.loading"
			:refresher-threshold="50" refresher-background="transparent" @refresherrefresh="onRefresh" @scrolltolower="onScrolltolower"
			class="phone-scroll-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">
								<!-- 数量 -->
								<view class="ks-item-top">
									<view class="kc-name">{{item.name}}</view>
								</view>
								<view class="ks-totalTm kc-fenlei">
									<icon class="phone-fenlei-icon" />分类：{{item.kcClassifyName}}
								</view>
								<view class="lx-sj-row">
									<view class="ks-totalTm kc-fenlei" v-if="item.leixing === 1 || item.leixing === 2">
										<icon class="phone-leixing-icon" />类型：{{ item.leixing === 1 ? 'A' : 'B' }}
									</view>
									<view class="ks-totalTm kc-totalTm">
										<icon class="phone-time-icon" />时间：{{formatDuration(item.period)}}分钟
									</view>
								</view>
								
								<button @click="checkKecheng(item)" type="primary" size="mini"
									class="item-view-btn">查看内容</button>
							</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>

		<!-- 页面底端 -->
		<customTabbarAdminVue :current-tab="2"></customTabbarAdminVue>
		
		<searchVue ref="searchRef" @search-btn="handleSearchFromBtn"></searchVue>
		
		<kechengLeixingVue ref="kclxRef" @select="handleSelectLeixing" @reset="handleResetLeixing"></kechengLeixingVue>
	</view>
</template>

<script setup>
	import customTabbarAdminVue from "@/components/custom-tabbar/custom-tabbar-admin.vue";
	import kechengLeixingVue from "@/pages/admin/Kecheng/components/kechengLeixing.vue";
	import searchVue from "./components/search.vue";
	import {
		ref,
		reactive
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import * as kechengApi from "@/api/kecheng.js"
	import {
		formatDuration
	} from "@/utils/common.js"
	
	const kclxRef = ref(null)
	
	const selectClassify = ref(null)
	const searchRef = ref(null)

	const data = reactive({
		leixing: '全部类型',
		leixingList: [],
		name: '',
		list: [], // 考试列表
		loading: false,
		page: 0,
		size: 10,
		state: 'more',
		contentText: {
			contentdown: '查看更多',
			contentrefresh: '加载中',
			contentnomore: '没有更多'
		}
	})
	
	function onScrolltolower() {
		getMore()
	}
	
	function searchBtn() {
		searchRef.value.handleShow()
	}
	
	function handleSearchFromBtn(textD) {
		data.name = textD;
		handleSearch()
	}
	
	function handleSelectLeixing(item) {
		data.leixing = item.lable;
		selectClassify.value = item;
		handleSearch();
	}
	
	function handleResetLeixing() {
		selectClassify.value = null;
		data.leixing = '全部类型';
		handleSearch();
	}

	function clickAlltype() {
		kclxRef.value.showPopup({
			data: data.leixingList 
		})
	}

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

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

	function checkKecheng(item) {
		uni.navigateTo({
			url: `/pages/admin/Kecheng/study?kcId=${item.kcId}`
		})
	}

	function onRefresh() {
		data.page = 0;
		data.list = [];
		data.loading = true;
		refreshData();
	}

	function refreshData() {
		const opt = {
			page: 1,
			size: 10, // 固定查询10条
			name: data.name,
			kcClassifyId: selectClassify.value && selectClassify.value.id || null,
		}
		data.list = [];
		// 数学
		data.state = 'loading';
		data.page++;
		opt.page = data.page;

		kechengApi.getKechengGlList(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条
			name: data.name,
			kcClassifyId: selectClassify.value && selectClassify.value.id || null,
		}
		if (data.state == 'no-more') return;
		data.state = 'loading';
		data.page++;
		opt.page = data.page;
		kechengApi.getKechengGlList(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 getKechengClassify() {
		kechengApi.getAdminClassify().then(res => {
			
			res.data.children.forEach(item => {
				item.checked = false;
			})
			
			data.leixingList = res.data.children || [];
		})
	}

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

<style lang="scss" scoped>
	.phone-kecheng-page {
		background-color: #ccc;
		box-sizing: border-box;
	}

	.phone-search-content {
		position: relative;
		background-color: #fff;
		height: 42px;

		.search-input {
			height: 42px;
			line-height: 40px;
			border-radius: 20px;
			border: 1px solid #ccc;
			padding: 0 70px 0 20px;
		}

		.search-icon {
			position: absolute;
			right: 5px;
			top: 4px;
			padding: 6px;
			background-color: #ccc;
			border-radius: 20px;
			width: 50px;
			text-align: center;
		}
	}
</style>