gzh_chuanyuan/pages/study/index.vue

<template>
	<view class="study">
		<view class="li" v-for="(a,i) in list" :key="i">
			<template v-if="a.children && a.children.length == 0">
				<view class="study-section" @click="openPage(a)">
					<view class="study-section-left">
						<view class="dot"></view>
						<view class="con">
							<view class="text">
								{{a.name}}
								<text class="num" v-if="a.question_count>0">
									{{a.question_count}}
								</text>
							</view>
						</view>
					</view>
					<view class="study-section-right" v-if="a.question_count>0">
						<view class="btn">
							练习
						</view>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="hd" @click="openPage(a)">
					<view class="name">{{a.name}}
						<text class="num" v-if="a.question_count>0">
							{{a.question_count}}
						</text>
					</view>
					<view class="btn" v-if="a.question_count>0">
						练习
					</view>
				</view>
				<view class="study-section study-section-on" v-for="(b,idx) in a.children" key="idx" @click="openPage(a.children[idx])">
					<view class="study-section-left">
						<view class="dot"></view>
						<view class="con">
							<view class="text">
								{{b.name}}
								<text class="num" v-if="b.question_count>0">
									{{b.question_count}}
								</text>
							</view>
						</view>
					</view>
					<view class="study-section-right" v-if="b.question_count>0">
						<view class="btn">
							练习
						</view>
					</view>
				</view>
			</template>
		</view>
		<view class="empty" style="margin-top: 250rpx;" v-if="total == 0">
			<u-empty mode="data" text="暂无相关信息">
			</u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				page: 1,
				total: 1,
				category_id: "",
				type: 0,
			};
		},
		onLoad(o) {
			this.type = o.type;
			this.category_id = o.id;
			this.getList();
			uni.setNavigationBarTitle({
				title: o.type == 0?"章节练习":"章节错误题"
			})
		},
		// onReachBottom() {
		// 	if(this.list.length <= this.total){
		// 		this.page ++
		// 		this.getList();
		// 	}
		// },
		methods:{
			//获取列表
			async getList() {
				uni.showLoading({
					title: "加载中"
				})
				const { code, data, msg } = await this.$api.chapterList({
					is_free: this.type == 0?1:this.type,
					category_id: this.category_id,
					page: this.page
				})
				if (code == 200) {
					uni.hideLoading()
					this.list = this.arrayUnique(this.list.concat(data.list),'id');
					this.total = this.list.length;
				} else {
					uni.hideLoading()
					this.total = 0;
					uni.showToast({
						icon: "none",
						title: msg
					})
				}
			},
			//数组对象去重
			arrayUnique(arr, name) {
			    var hash = {};
			    return arr.reduce(function (item, next) {
			        hash[next[name]]
			            ? ""
			            : (hash[next[name]] = true && item.push(next));
			        return item;
			    }, []);
			},
			openPage(a) {
				if(a.question_count == 0){
					return ;
				}
				uni.navigateTo({
					url: "/pages/study/detail?type="+this.type+"&cid="+this.category_id+"&id="+a.id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.study {
		width: 100%;
		padding: 0 25rpx 20rpx;
		overflow: hidden;
		box-sizing: border-box;
		.li{
			padding: 0 25rpx;
			margin-top: 20rpx;
			overflow: hidden;
		}
		.hd{
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			padding: 0 30rpx;
			.name{
				max-width: 460rpx;
				font-size: 34rpx;
				font-weight: bold;
				text{
					font-size: 30rpx;
					font-weight: normal;
					color: #F01B1B;
					margin-left: 10rpx;
				}
			}
			.btn{
				width: 111rpx;
				font-size: 28rpx;
				line-height: 51rpx;
				color: #2080F9;
				text-align: center;
				background: #FFFFFF;
				border: 1px solid #2080F9;
				border-radius: 25rpx;
			}
		}
		&-section {
			width: 100%;
			margin: 0 auto;
			padding: 30rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			overflow: hidden;
			&-on{
				width: 100%;
				float: right;
				padding: 15rpx 30rpx;
				margin-top: 20rpx;
			}
			&-left {
				width: 100%;
				display: flex;
				line-height: 42rpx;
				.dot {
					width: 12rpx;
					height: 12rpx;
					margin:15rpx 17rpx 0 0;
					background: #2080F9;
					border-radius: 50%;
				}
				.con{
					flex: 1;
					max-width: 450rpx;
					.text{
						font-size: 30rpx;
						color: #222222;
					}
					.num{
						margin:0 0 0 17rpx;
						font-size: 30rpx;
						color: #F01B1B;
					}
				}
			}

			&-right {
				.btn {
					width: 111rpx;
					font-size: 28rpx;
					line-height: 51rpx;
					color: #2080F9;
					text-align: center;
					background: #FFFFFF;
					border: 1px solid #2080F9;
					border-radius: 25rpx;
				}
			}
		}
	}
</style>