learn_applet/pagesMy/course/index.vue

<template>
	<view class="content">
		<view class="one">
			<view class="one_1">
				<input type="text" v-model="name" @input="toInput" placeholder="搜索课程名称">
			</view>
			<view class="one_2">
				<button size="mini" class="button" type="primary" @click="toAdd">添加</button>
			</view>
		</view>
		<view class="two" v-if="total>0">
			<up-list @scrolltolower="scrolltolower">
				<up-list-item v-for="(item, index) in list" :key="index">
					<view class="list">
						<view class="name textOne">{{item.name||'暂无'}}</view>
						<view class="other_1">
							<view class="value">
								<view class="title">类型：</view>
								<view class="label">{{getDict(item.type,'type')}}</view>
							</view>
							<view class="value">
								<view class="title">学科：</view>
								<view class="label">{{getDict(item.subject,'subject')}}</view>
							</view>
							<view class="value">
								<view class="title">年级：</view>
								<view class="label">{{getDict(item.grade,'grade')}}</view>
							</view>
						</view>
						<view class="other_2">
							<view class="other_2_1">金额(元)：</view>
							<view class="other_2_2 red">{{item.money||'免费'}}</view>
						</view>
						<view class="other_2">
							<view class="other_2_1">时间：</view>
							<view class="other_2_2 ">{{item.start_time}} - {{item.end_time}}</view>
						</view>
						<view class="other_2">
							<view class="other_2_1">状态：</view>
							<view class="other_2_2" :class="[item.status=='0'?'red':'']">
								{{getDict(item.status,'status')}}
							</view>
						</view>
						<view class="bottom">
							<button class="button button_1" type="default" size="mini" @click="toEdit(item)">修改</button>
							<button v-if="item.status=='0'" class="button button_2" type="default" size="mini" @click="toDelete(item)">删除</button>
						</view>
					</view>
				</up-list-item>
			</up-list>
		</view>
		<up-empty v-else mode="list" icon="/static/list.png">
		</up-empty>
		<view class="is_bottom" v-if="is_bottom">
			<text>{{config.bottom_title||'没有更多了！'}}</text>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { inject, computed, ref } from 'vue';
	//该依赖已内置不需要单独安装
	import { onShow, onPullDownRefresh } from "@dcloudio/uni-app";
	// 请求接口
	const $api = inject('$api');
	// 基本信息
	const config = ref({ logo: [], file: [] });
	// 列表
	const list = ref([]);
	const total = ref(0);
	const skip = ref(0);
	const limit = ref(5);
	const page = ref(0);
	// 数据是否触底
	const is_bottom = ref(false);
	const name = ref('');
	// 字典表
	const subjectList = ref([])
	const gradeList = ref([])
	const showList = ref([])
	const typeList = ref([])
	const statusList = ref([])
	// user
	const user = computed(() => {
		return uni.getStorageSync('user');
	})
	onShow(async () => {
		await searchConfig();
		await searchOther();
		await clearPage();
		await search();
	})
	onPullDownRefresh(async () => {
		await clearPage();
		await search();
		uni.stopPullDownRefresh();
	})
	// config信息
	const searchConfig = async () => {
		config.value = uni.getStorageSync('config');
	};
	// 其他查询信息
	const searchOther = async () => {
		let res;
		// 学科
		res = await $api(`dictData`, 'GET', { code: 'subject', is_use: '0' });
		if (res.errcode === 0) subjectList.value = res.data;
		// 年级
		res = await $api(`dictData`, 'GET', { code: 'grade', is_use: '0' });
		if (res.errcode === 0) gradeList.value = res.data;
		// 类型
		res = await $api(`dictData`, 'GET', { code: 'courseType', is_use: '0' });
		if (res.errcode === 0) typeList.value = res.data;
		// 状态
		res = await $api(`dictData`, 'GET', { code: 'courseStatus', is_use: '0' });
		if (res.errcode === 0) statusList.value = res.data;
		// 是否公开
		res = await $api(`dictData`, 'GET', { code: 'show', is_use: '0' });
		if (res.errcode === 0) showList.value = res.data;
	};
	// 查询
	const search = async () => {
		const info : any = {
			skip: skip.value,
			limit: limit.value,
			teacher: user.value._id,
			is_show: '0'
		}
		if (name.value) info.name = name.value
		const res = await $api('course', 'GET', info);
		if (res.errcode === 0) {
			list.value = list.value.concat(res.data)
			total.value = res.total
		} else {
			uni.showToast({
				title: res.errmsg || '',
				icon: 'error',
			});
		}
	};
	const getDict = (data, model) => {
		let res
		if (model == 'subject') res = subjectList.value.find((f) => f.value == data)
		else if (model == 'grade') res = gradeList.value.find((f) => f.value == data)
		else if (model == 'type') res = typeList.value.find((f) => f.value == data)
		else if (model == 'status') res = statusList.value.find((f) => f.value == data)
		return res.label || '暂无'
	}
	// 搜索课程
	const toInput = async (e) => {
		await clearPage();
		await search();
	};
	// 新增课程
	const toAdd = async () => {
		uni.navigateTo({
			url: `/pagesMy/course/add`
		})
	};
	// 修改
	const toEdit = async (item) => {
		uni.navigateTo({
			url: `/pagesMy/course/add?id=${item.id || item._id}`
		})
	};
	// 删除
	const toDelete = async () => {
		uni.showModal({
			title: '提示',
			content: '确定删除该课程吗?',
			success: async function (res) {
				if (res.confirm) {
					const arr = await $api(`course/${e._id}`, 'DELETE');
					if (arr.errcode == '0') {
						uni.showToast({
							title: '删除信息成功',
							icon: 'none'
						})
						await clearPage()
						await search()
					} else {
						uni.showToast({
							title: arr.errmsg,
							icon: 'none'
						})
					}
				}
			}
		});
	};
	const scrolltolower = () => {
		if (total.value > list.value.length) {
			uni.showLoading({
				title: '加载中',
				mask: true
			})
			page.value = page.value + 1;
			skip.value = page.value * limit.value;
			search();
			uni.hideLoading();
		} else is_bottom.value = true
	};
	// 清空列表
	const clearPage = () => {
		list.value = []
		skip.value = 0
		limit.value = 6
		page.value = 0
	};
</script>
<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		background-color: var(--f1Color);

		.one {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 2vw;
			background-color: var(--mainColor);

			.one_1 {
				padding: 0 2vw;
				width: 75vw;

				input {
					padding: 2vw;
					background-color: var(--f1Color);
					font-size: var(--font14Size);
					border-radius: 5px;
				}
			}

			.button {
				background-color: var(--3c9Color);
				color: var(--mainColor);
			}
		}

		.two {
			margin: 0 2vw;

			.list {
				background-color: var(--mainColor);
				border-bottom: 1px solid var(--f5Color);
				margin: 2vw 0 0 0;
				border-radius: 4px;
				padding: 2vw;

				.name {
					font-size: var(--font16Size);
					font-weight: bold;
					margin: 0 2vw 2vw 2vw;
				}

				.other_1 {
					display: flex;
					justify-content: space-between;
					padding: 1vw 2vw;

					.value {
						display: flex;
						align-items: center;

						.title {
							font-size: var(--font14Size);
							font-weight: bold;
						}

						.label {
							font-size: var(--font12Size);
							color: var(--f85Color);
						}
					}
				}

				.other_2 {
					display: flex;
					align-items: center;
					padding: 1vw 2vw;

					.other_2_1 {
						font-size: var(--font14Size);
						font-weight: bold;
					}

					.other_2_2 {
						width: 70%;
						font-size: var(--font12Size);
						color: var(--f85Color);
					}

					.red {
						color: var(--ff0Color);
					}
				}

				.bottom {
					margin: 2vw 0 0 0;
					text-align: center;

					.button {
						color: var(--mainColor);
						font-size: var(--font14Size);
						border-radius: 2vw;
					}

					.button_1 {
						margin: 0 2vw 0 0;
						background-color: var(--3c9Color);
					}

					.button_2 {
						background-color: var(--ff0Color);
					}
				}
			}
		}

	}
</style>