dyqc_hdapp/pages/fenl/index.vue

<template>
	<view class="recharge flex align-items justify-start flex-column">
		<view class="nav">
			<u-navbar :is-back="false" :autoBack='false' leftIconColor="#323232"  bgColor="#FFFFFF"> 
				<view class="serch_top" slot="left">
					<view class="serch_top1">
						<u-search class="u-search" v-model="keywords" placeholder="搜索您要找的内容" :showAction="false"
							search-icon="/static/index/search.png" @change="search()">
						</u-search>
						<span class="searchBtn" @click.stop="search()">搜索</span>
					</view>
				</view>
			</u-navbar>
		</view>
		<view class="box flex justify-start"> 

			<!-- 标签 -->
			<view class="tab_all">
				<scroll-view class="tabs" scroll-y="true">
					<view v-for="(tab, index) in list" :key="index" :class="['tab-item', { active: current === index }]"
						@click="handleClick(index, tab.id)">
						<span>{{ tab.name }}</span>
					</view>
				</scroll-view>
			</view>

			<!-- 热门活动 -->
			<view class="hot flex flex-column">
				<view class="content flex align-items flex-column">
					<view class="flex flex-column w-100 bbb" v-for="(item, index) in hotList" :key="index"
						@click="detail(item.id)">


						<view class="flex" style="margin-top: 30rpx">
							<view class="right flex flex-column" style="align-items: self-start">
								<span class="title white-space">{{ item.title }}</span>
								<view class="first-image flex align-items" style="margin-top: 20rpx;width: 100%;">
									<span class="time_tex" v-if="item.status == 2">{{ '报名中' }}</span>
									<image v-if="cate_ids != 1" :src="item.user.avatar"
										style="width: 36rpx;height: 36rpx;border-radius: 80rpx;"></image>
									<image v-else :src="item.headimage"
										style="width: 36rpx;height: 36rpx;border-radius: 80rpx;"></image>
									<span v-if="cate_ids != 1"
										style="color: #9C9C9C;margin-left: 10rpx;">{{ item.user.nickname }}</span>
									<span v-else 
										style="color: #9C9C9C;margin-left: 10rpx;">{{ item.teacher.name }}</span>
									<view>
										<span style="color:#0CA013;margin-left: 20rpx;"
											v-for="items_t in item.classes_cate.slice(0, 1)">#{{ items_t}}</span>
									</view>
								</view>

								<view class="flex flex-column" style="margin-top: 20rpx;">
									<view class="time flex align-items white-space">
										<!-- <span class="time_tex" v-if="item.status == 2">{{ '报名中' }}</span> -->
										<!-- <span class="time_tex time_texs" v-if="item.status == 4">{{ '进行中' }}</span> -->
										<span style="margin-right:20rpx;">{{ dateWeeks(item.start_time) }}</span><span
											style="width: 1rpx;height: 22rpx;background: #323232;"></span>
										<span class="white-space"
											style="margin-left: 20rpx;width: 260rpx;">{{ item.address_detail }}</span>
									</view>

								</view>

								<view class="flex align-items justify-center"
									style="margin-top: 20rpx;margin-bottom: 32rpx;">
									<view class="imgs_con_div" v-for="(items_img, index) in item.images.slice(0, 3)"
										:key="index">
										<image class="imgs_con" mode="widthFix" :src="items_img"></image>
									</view>
								</view>
							</view>
						</view>

						<view class="bottom flex align-items" v-if="cate_ids != 1">
							<view class="flex align-items toptext">
								<!-- <span class="flex align-items">
									<u-avatar-group :urls="item.join_info.users" keyName="avatar" size="30" maxCount="5"
										gap="0.4"></u-avatar-group>
									<image src="/static/index/dian.png"
										:class="item.join_info.users.length > 0 ? '' : 'smalld'"
										style="width: 58rpx;height: 58rpx;margin-left:-20rpx;z-index: 1;"></image>
								</span> -->
								<view class="number flex align-items">
									{{ Number(item.join_info.people_number) + "人已上车" }}
								</view>
							</view>
							<span v-if="item.status == 5" class="part1 flex justify-center align-items">
								已结束
							</span>
							<span v-if="item.status == 2" class="part flex justify-center align-items">
								上车
							</span>

						</view>


					</view>
				</view>
				<view class="bottom_box flex justify-center align-items" style="height: 1240rpx;width: 100%;" v-if="hotList.length == 0">
					暂无数据
				</view>
				<u-loadmore v-else style="margin-bottom: 60rpx;" :status="loadStatus" />
			</view>


			
		</view>

		<tab-bar :tabBarShow="1"></tab-bar>
	</view>
</template>

<script>
	import MySwiper from "@/components/fuyu-MixSwiper/fuyu-MixSwiper.vue";
	import {
		dateWeek
	} from '../../utils/dateFormat'
	export default {
		components: {
			MySwiper,
		},
		data() {
			return {
				cate_ids: '', //标签id
				loadStatus: 'nomore',
				swiperList: [],
				teacherList: [],
				wqList: [],
				hotList: [],
				unread_number: "",
				keywords: "",
				count: 1,
				current: 0,
				autoplay: true,
				scrollTop: 0,
				dotsShow: true,
				videoList: [],
				currentItemType: "",
				tjShow: true,
				videoAutoplay: false,
				list: [{
						name: "全部",
						id: 0
					},
					{
						name: "夜校",
						id: 1
					}
				],
				limit: 6,
				page: 1,
				show: false,
				formData: {
					name: '',
					mobile: '',
					enterprise_name: '',
					enterprise_addr: '',
					outdoor_sport: '',
				}
			};
		},
		onLoad() {
			this.getinit();
			this.resetLists();
			this.getHotList();
			this.getBqList();
			// uni.hideTabBar();

		},
		mounted() {
			this.videoContext = uni.createVideoContext("myVideo"); //创建视频实例指向video
		},
		onShow() {

		},
		beforeDestroy() {
			this.autoplay = false;
		},
		computed: {
			// limitedList() {
			//   return this.items.slice(0, 3);
			// }
		},
		methods: {
			dateWeeks(e) {
				return dateWeek(e);
			},
			//底部翻页
			onReachBottom() {
				if (this.hotList.length < this.count) {
					this.page++;
					this.getHotList();
				}
			},
			// 重置列表
			resetLists() {
				this.page = 1;
				this.hotList = [];
				this.loadStatus = "loading";
			},
			// 标签点击
			handleClick(index, val) {
				this.current = index;
				this.cate_ids = val;
				this.hotList = [];
				this.page = 1;
				this.limit = 6;
				this.getHotList();
			},
			// 搜索
			search() {
				if (this.keywords == "") {
					this.tjShow = true;
				} else {
					this.tjShow = false;
				}
				this.resetLists();
				this.getHotList();
			},

			//轮播图跳转
			click(e) {
				uni.navigateTo({
					url: e,
				});
			},

			// 获取首页信息
			getinit() {
				uni.$u.http
					.get("/api/index/init", {})
					.then((res) => {
						if (res.code == 1) {
							this.swiperList = res.data.home_data.top_images.list;
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none",
								duration: 2000,
							});
						}
					})
					.catch((error) => {
						uni.showToast({
							title: "请求失败，请稍后再试",
							icon: "none",
							duration: 2000,
						});
					});
			},

			// 获取标签
			getBqList() {

				uni.$u.http
					.get("/api/school.new_activity/cate_list", {
						params: {
							page: 1,
							limit: 100
						},
					})
					.then((res) => {
						if (res.code == 1) {
							this.list = [...this.list, ...res.data.list];
							//初始化默认标签
							// if (this.list.length < 3) {
							//   this.list = [...this.list, ...res.data.list.slice(0,2)];
							// }
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none",
								duration: 2000,
							});
						}
					})
					.catch((error) => {
						uni.showToast({
							title: "请求失败，请稍后再试",
							icon: "none",
							duration: 2000,
						});
					});
			},
			//添加标签（本地）
			addbq(val) {
				let arrbql = uni.getStorageSync("bqlist");
				let arrbq = JSON.parse(arrbql);
				let isbq = true;
				for (let i = 0; i < arrbq.length; i++) {
					if (arrbq[i].id == val.id) {
						uni.showToast({
							title: "已添加该标签",
							icon: "none",
							duration: 2000,
						});
						return isbq = false;
					}
				}
				if (this.list.length < 9) {
					if (isbq) {
						this.list.push(val);
						uni.setStorageSync('bqlist', JSON.stringify(this.list))
					}
				} else {
					uni.showToast({
						title: "最多添加9个标签",
						icon: "none",
						duration: 2000,
					});
				}
			},
			//删除标签（本地）
			removebq(i) {
				this.list.splice(i, 1);
				uni.setStorageSync('bqlist', JSON.stringify(this.list))
			},

			// 获取热门活动 和 课程 
			getHotList() {
				let words = this.keywords;
				let cate_ids = this.cate_ids;
				if (cate_ids == 1) { //夜校

					uni.$u.http.get('https://testy.hschool.com.cn/api/school/classes/classes_list', {
						params: {
							keywords: this.keywords,
							page: this.page,
							limit: this.limit,
							is_expire: 2,
							order: 'hot',
							has_shop: 1
						}
					}).then(res => {
						if (res.code == 1) {
							this.count = res.data.list.total
							this.hotList = [...this.hotList, ...res.data.list.data];
							if (this.hotList.length >= res.data.list.total) {
								this.loadStatus = 'nomore';
							} else {
								this.loadStatus = 'loading';
							}
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});
							this.loadStatus = 'loading';
						}
					}).catch(error => {
						console.error('请求失败', error);
						this.loadStatus = 'loading';
					});

				} else {
					//活动
					uni.$u.http.get("/api/school.new_activity/activity_list", {
							params: {
								keywords: words,
								cate_ids: cate_ids,
								page: this.page,
								limit: this.limit,
								order: "normal",
								status: "2", //5 已结束
								auth_status: 1 //审核通过的
							},
						})
						.then((res) => {
							if (res.code == 1) {
								this.count = res.data.count;
								this.hotList = [...this.hotList, ...res.data.list.data];
								if (this.hotList.length >= res.data.count) {
									this.loadStatus = 'nomore';
								} else {
									this.loadStatus = 'loading';
								}
							} else {
								uni.showToast({
									title: res.msg,
									icon: "none",
									duration: 2000,
								});
							}
						})
						.catch((error) => {
							uni.showToast({
								title: "请求失败，请稍后再试",
								icon: "none",
								duration: 2000,
							});
						});
				}

			},
			// 跳转详情
			detail(id) {
				if (this.cate_ids == 1) { //夜校
					uni.$u.http
						.get("/api/user/auto_login_token", {
							encryption: 1
						})
						.then((res) => {
							if (res.code == 1) {
								if (res.data.token == null && res.data.time == null && res.data.encryption_data ==
									'') {
									uni.showToast({
										title: '请登录',
										icon: 'none',
										duration: 2000,
										complete: function() {
											setTimeout(function() {
												uni.switchTab({
													url: '/pages/my/index',
												});
											}, 2000);
										}
									});
								} else {
									wx.navigateToMiniProgram({
										appId: 'wx867e324c44b9e016',
										path: 'pages/center/detail?id=' + id,
										extraData: res.data,
										envVersion: 'trial',
										success(res) {
											// 打开成功
											console.log('成功！', res)
										}
									})
								}
							} else {
								uni.showToast({
									title: res.msg,
									icon: "none",
									duration: 2000,
								});

							}
						})
						.catch((error) => {

							uni.showToast({
								title: "请求失败，请稍后再试",
								icon: "none",
								duration: 2000,
							});
						});

				} else {

					uni.navigateTo({
						url: "/packageA/center/detail?id=" + id,
					});
				}
			},
			// 跳转往期详情
			Wqdetail(id) {
				uni.navigateTo({
					url: "/packageA/index/previousDetail?id=" + id,
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.w-100 {
		width: 100%;
	}

	.flex {
		display: flex;
	}

	.justify-center {
		justify-content: center;
	}

	.space-between {
		justify-content: space-between;
	}

	.align-items {
		align-items: center;
	}

	.flex-column {
		flex-flow: column;
	}

	.justify-start {
		justify-content: start;
	}

	.mar-top-30 {
		margin-top: 30rpx;
	}

	.tab_all {
		margin-top: 26rpx;
		position: fixed;
		border-radius: 0rpx 18rpx 0rpx 0rpx;
		left: 0;
		
		.tabs {
			display: flex;
			flex-flow: column;
			margin-right: 20rpx;
			width: 188rpx;
			height: 1290rpx;


			/* 优化滚动效果 */
			.tab-item {
				display: flex;
				justify-content: center;
				align-items: center;
				// flex: 0 0 auto;
				width: 100%;
				text-align: center;
				position: relative;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
				height: 110rpx;
				line-height: 110rpx;
				background: #ffffff;
				span{
					width: 100%;
				}
			}

			.tab-item.active {
				background: transparent;
				font-size: 28rpx;
				color: #323232;
				background: #f7f7f7;
				border-radius: 0 0 0 0;
				&:before{
					content: '';
					width: 10rpx;
					height: 46rpx;
					background: linear-gradient( 270deg, #FBF66D 0%, #9CEAA2 100%);
					border-radius: 91rpx 91rpx 91rpx 91rpx;
				}
				+.tab-item { 
					border-radius: 0 18rpx 0 0;
				}
			}
		}
	}

	.recharge {
		width: 750rpx;
		background-color: #f7f7f7;
		height: 100%;
		min-height: 100vh;
		.serch_top {
				display: flex;
				align-items: center;
				.serch_top1 {
					// margin-top: 10rpx;
					// margin-bottom: 30rpx;
					position: relative;
					width: 500rpx;
					background: rgba(245, 245, 245,0.6);
					border-radius: 32rpx 32rpx 32rpx 32rpx;
					.searchBtn {
						position: absolute;
						width: 133rpx;
						height: 60rpx;
						background: #323232;
						border-radius: 40rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #FFFFFF;
						display: flex;
						justify-content: center;
						align-items: center;
						top: 0;
						right: 0;
					}
				}

				.imgstop_ye {
					margin-left: 30rpx;
					width: 174rpx;
					height: 76rpx;
					position: absolute;
					right: 0;
				}
		}

		.box {
			width: 100%;
			margin-top: 150rpx;
			height: 100%;
			.hot {
				  margin-top: 30rpx;
				margin-bottom: 180rpx;
				margin-left: 208rpx;
				.content {
					// height: 462rpx;
					// overflow-x: auto;
					/* 允许横向滚动 */
					// white-space: nowrap;

					width: 512rpx;

					.bbb {
						background: #ffffff;
						margin-top: 30rpx;
						border-radius: 36rpx;
					}

					.right {
						margin-left: 20rpx;
						width: 100%;

						.title {
							width: 95%;
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 30rpx;
							color: #323232;
						}

						.first-image {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #9C9C9C;

							span {
								font-family: Source Han Sans CN, Source Han Sans CN;
								font-weight: 400;
								font-size: 26rpx;
								color: #222222;
							}
							.time_tex {
								width: 106rpx;
								height: 42rpx;
								background: #BBFC5B;
								border-radius: 159rpx;
								font-weight: 400;
								font-size: 24rpx;
								color: #323232;
								display: flex;
								justify-content: center;
								align-items: center;
								line-height: 30rpx;
							}
						}

						.row {
							margin: 10rpx 0 26rpx 0;

							.remen {
								// width: 136rpx;
								height: 40rpx;
								background: #ebfaf5;
								border-radius: 4rpx 4rpx 4rpx 4rpx;

								font-family: Source Han Sans CN, Source Han Sans CN;
								font-weight: 400;
								font-size: 24rpx;
								color: #14bc84;
								line-height: 28rpx;
								padding: 2rpx 8rpx;
							}

							.line-colum {
								width: 1rpx;
								height: 32rpx;
								background: #7a7a7a;
								margin: 0 13rpx;
							}

							.name {
								width: 110rpx;
								height: 32rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: 500;
								font-size: 26rpx;
								color: #7a7a7a;
								line-height: 32rpx;
								margin-left: 12rpx;
							}
						}


						.jigou {
							width: 312rpx;
							// height: 32rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 26rpx;
							color: #7a7a7a;
							margin: 4rpx 0 14rpx 0;
						}

						.time {
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 400;
							font-size: 26rpx;
							color: #323232;

							.time_tex {
								width: 116rpx;
								height: 42rpx;
								background: #BBFC5B;
								border-radius: 159rpx;
								font-weight: 400;
								font-size: 24rpx;
								color: #323232;
								display: flex;
								justify-content: center;
								align-items: center;
								line-height: 30rpx;
							}

							.time_texs {
								background: #FF4810;
								color: #ffffff;
							}

						}

						.imgs_con_div {
							margin-right: 12rpx;
							width: 150rpx;
							height: 150rpx;
							overflow: hidden;

							&:first-child {
								border-radius: 18rpx 0 0 18rpx;
							}

							&:nth-child(3) {
								border-radius: 0 18rpx 18rpx 0;
							}

							.imgs_con {
								width: 100%;
								height: 100%;
							}
						}


					}

					.bottom {
						margin: 0 0 32rpx 24rpx;
						width: 100%;

						.toptext {
							width: 60%;

							.smalld {
								margin-left: 0 !important;
							}
						}

						.number {
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 400;
							font-size: 26rpx;
							color: #3D3D3D;
							line-height: 30rpx;
							width: 38%;
							margin-left: 20rpx;
						}

						.text {
							font-family: PingFang SC, PingFang SC;
							font-weight: 800;
							font-size: 26rpx;
							color: #7a7a7a;
						}

						.money {
							width: 150rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 800;
							font-size: 36rpx;
							color: #ff2323;
							justify-content: flex-end;
						}
					}

					.ovr {
						width: 312rpx;
						background: #ffffff;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
						margin-top: 18rpx;
						margin-right: 24rpx;
					}
					.part {
						width: 162rpx;
						height: 70rpx;
						background: url(@/static/index/shangche.png);
						background-size: 162rpx 70rpx;
						background-repeat: no-repeat;
						font-family: 'YouSheBiaoTiHei';
						font-weight: 400;
						font-size: 42rpx;
						color: #BBFC5B;
					}

					.part1 {
						width: 162rpx;
						height: 70rpx;
						background: url(@/static/index/shangchew.png);
						background-size: 162rpx 70rpx;
						background-repeat: no-repeat;
						font-family: 'YouSheBiaoTiHei';
						font-weight: 400;
						font-size: 42rpx;
						color: #9C9C9C;
					}
				}
			}
		}

		

		
	}

	.white-space {
		overflow: hidden;
		/* 确保超出容器的文本被隐藏 */
		white-space: nowrap;
		/* 确保文本在一行内显示 */
		text-overflow: ellipsis;
		/* 使用省略号表示被截断的文本 */
		width: 100%;
	}










	.pos {
		position: relative;

		.ab {
			position: absolute;
			right: 0%;
			bottom: 0%;
		}

		.m {
			width: 28rpx;
			height: 42rpx;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: bold;
			font-size: 28rpx;
			color: #ff4810;
		}

		.money {
			width: 68rpx;
			font-family: D-DIN-PRO, D-DIN-PRO;
			font-weight: bold;
			font-size: 36rpx;
			color: #ff4810;
		}

		.no {
			width: 64rpx;
			height: 48rpx;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: bold;
			font-size: 32rpx;
			color: #ff4810;
			line-height: 38rpx;
		}
	}

	

	

	
</style>
<style lang="scss">
	.serch_top {
		.u-search {

			::v-deep .u-search__content {
				background: rgba($color: #FFFFFF, $alpha: 0.6) !important;
			}

			::v-deep .u-search__content__input {
				background-color: rgba($color: #FFFFFF, $alpha: 0.6) !important;
			}

			::v-deep .u-icon__img {
				width: 36rpx !important;
				height: 36rpx !important;
			}
		}
	}

</style>