ylrz_scrm_uniapp/pages/course/index.vue

<template>
	<view>
		<view class="container">
			<image class="home_top_bg" src="https://beiliyo-2025.obs.cn-north-4.myhuaweicloud.com/fs/20250115/1736955760372.png" mode="widthFix"></image>
			<view class="tabbox">
				<view ref="tabbar" class="tabbar">
					<view :id="index" :class="activeTab == index ? 'active tabbar-item':'tabbar-item'"
						v-for="(tab,index) in tabList" :key="tab.id" @click="handleTab(index)">{{tab.name}}</view>
				</view>
				<view ref="underline" class="tabbar-tabline tabbar-tabline-animation"
					:style="{left: indicatorLineLeft + 'px', width: indicatorLineWidth + 'px'}">
					<image class="tabbar-tabline-image" src="@/static/images/course/hall_on_icon.png" mode="aspectFill">
					</image>
				</view>
			</view>
			
			<!-- 内容 -->
			<swiper :current="activeTab" @change="onSwiperChange" :style="'height:' + clientHeight + 'px;'">
				<swiper-item>
					<scroll-view scroll-y="true" :style="'height:' + clientHeight + 'px;'" :scroll-top="scrollTopHall"
						@scroll="scroll($event,'scrollTopHall')">
						<doctorHall ref="doctorHall" :swiperAutoplay="swiperAutoplay" />
					</scroll-view>
				</swiper-item>
				<swiper-item>
					<scroll-view scroll-y="true" :style="'height:' + clientHeight + 'px;'" :scroll-top="scrollTopStudy"
						@scroll="scroll($event,'scrollTopStudy')">
						<studyCenter ref="studyCenter" />
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<tabbar :actindex="1"></tabbar>
	</view>
</template>

<script>
	import doctorHall from './components/doctorHall.vue';
	import studyCenter from './components/studyCenter.vue';
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import mescrollBody from "@/uni_modules/mescroll-uni/components/mescroll-body/mescroll-body.vue";
	import {
		getDictByKey
	} from '@/api/common'
	import {
		getCourseCate,
		getCourseList
	} from '@/api/course'
	import {
		getAdvList
	} from '@/api/adv.js'

	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			mescrollBody,
			doctorHall,
			studyCenter
		},
		data() {
			return {
				mescroll: "",
				downOption: { //下拉刷新
					auto: true // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: { //上拉加载
					auto: false, // 不自动加载
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量
					},
					noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						tip: '~ 空空如也 ~' // 提示
						// btnText: '去看看'
					}
				},
				imageList: [],
				advs: [],
				mtabs: [],
				tabIndex: 0, // 当前tab的下标
				fixedTop: false,
				top: 0,
				cateId: 0,
				isBest: false,
				dataList: [],
				recommendList: [],
				swHeightArr: {},
				swHeight: "400px",
				keyWord: "",
				dataItem: {},
				swiperAutoplay: true,
				famousItemHei: 0,
				scrollTopHall: 0,
				scrollTopStudy: 0,
				old: {
					scrollTopStudy: 0,
					scrollTopHall: 0,
				},
				activeTab: 0,
				scrollViewId:'scrollView0',
				indicatorLineLeft: 0,
				indicatorLineWidth: 0,
				tabList: [{
					id: "tab01",
					name: '名医讲堂'
				}, {
					id: "tab02",
					name: '学习中心'
				}],
				clientHeight: 0,
			}
		},

		onPageScroll(e) {
			this.top = e.scrollTop;
		},
		computed: {
			// 计算属性的 getter
			headerBG: function() {
				var top = this.top / 88;
				return 'rgba(255,92,3, ' + top + ')';
			},
		},
		onReady() {
			uni.getSystemInfo({
				success: (res) => {
					this.clientHeight = res.windowHeight - uni.upx2px(120) - res.statusBarHeight - 50;
				}
			})
			this.tabListSize = {};
			this.selectorQuery();
		},
		onShow() {
			this.swiperAutoplay = true;
			if (this.activeTab == 1) {
				this.$nextTick(() => {
					this.$refs['studyCenter'].onShowFun()
				});
			}
		},
		onHide() {
			this.swiperAutoplay = false;
		},
		mounted() {
			try {
				const system = uni.getSystemInfoSync();
				let itemWid = (system.windowWidth - 40 - 32) * 0.5 * 0.95;
				let tempHei = itemWid * 0.5;
				tempHei = uni.upx2px(tempHei) + 30;
				this.famousItemHei = tempHei;
			} catch (e) {

			}
		},
		methods: {
			scroll(e, type) {
				this.old[type] = e.detail.scrollTop
			},
			handleTab(activeTab) {
				this.activeTab = activeTab
				this.$nextTick(() => {
					this.selectorQuery()
				})
			},
			updateIndicator(left, width) {
				this.indicatorLineLeft = left;
				this.indicatorLineWidth = width;
			},
			selectorQuery() {
				uni.createSelectorQuery().in(this).selectAll('.tabbar-item').boundingClientRect((rects) => {
					rects.forEach((rect) => {
						this.tabListSize[rect.id] = rect;
					})
					this.updateIndicator(this.tabListSize[this.activeTab].left, this.tabListSize[this.activeTab]
						.width);
				}).exec();
			},
			// swiper划动
			onSwiperChange(e) {
				this.changeIdx(e.detail.current);
			},
			// 更新当前页
			changeIdx(index) {
				if (this.activeTab === index) return;
				this.activeTab = index;
				this.scrollViewId = 'scrollView' + this.activeTab;
				this.$nextTick(() => {
					this.selectorQuery()
				});
			},
			/*下拉刷新的回调 */
			downCallback() {
				this.mescroll.resetUpScroll(true);
			},
			/*上拉加载的回调*/
			upCallback(page) {
				this.mescroll.endByPage(1, 1);
			},
			getCourseCate: function() {
				let that = this;
				getCourseCate().then(res => {
						if (res.code == 200) {
							this.mtabs = res.data;
							let findIdx = this.mtabs.findIndex(item => item.dictLabel == '精选');
							// console.log("qxj findIdx:"+findIdx);
							if (findIdx == -1) {
								let dictItem = {
									"dictValue": 0,
									"dictLabel": "精选"
								};
								this.mtabs.unshift(dictItem);
							}
							this.isBest = true;
							if (this.mtabs.length > 0) {
								this.cateId = this.mtabs[0].dictValue;
								for (let i = 0; i < this.mtabs.length; i++) {
									if (i <= 4) {
										this.tabChange(i);
									}
								}
								//this.tabIndex=0;
								//this.dataItem=this.dataList[this.tabIndex.toString()]
								this.tabChange(0);
							}
						}
					},
					rej => {}
				);
			},
			getFamousCourseList: function(index) {
				let that = this;
				let params = {};
				if (this.isBest) {
					params = {
						"isBest": 1
					};
				} else {
					params = {
						"cateId": this.cateId
					};
				}
				if (this.dataList.hasOwnProperty(index + "")) {
					this.updateSwiperHeight(index);
					return;
				}
				getCourseList(params, 1, 6).then(res => {
						if (res.code == 200) {
							this.dataList[index + ""] = res.data.list;
							//this.$nextTick(() => {
							this.updateSwiperHeight(index);
							//}); 
						}
					},
					rej => {}
				);
			},
			getRecommendList: function() {
				let that = this;
				const params = {
					"isTui": 1
				};
				getCourseList(params, 1, 10).then(res => {
						if (res.code == 200) {
							this.recommendList = res.data.list;
						}
					},
					rej => {}
				);
			},
			swiperChange(e) {
				// console.log("qxj swiperChange");
				this.tabIndex = e.detail.current;
				this.tabChange(this.tabIndex);
			},
			tabChange(index) {
				// console.log("qxj tabChange index:"+index);
				this.tabIndex = index;
				const item = this.mtabs[index];
				if (item) {
					if (item.dictLabel == '精选') {
						this.isBest = true;
					} else {
						this.isBest = false;
					}
					this.cateId = item.dictValue;
					this.getFamousCourseList(index);
				}
			},
			updateSwiperHeight() {
				let dataArr = this.dataList[this.tabIndex.toString()];
				if (dataArr == undefined || dataArr.length == 0) {
					this.swHeight = 150;
				} else {
					uni.createSelectorQuery().in(this).select('#swiper-content').boundingClientRect(rect => {
						//console.log("qxj swHeight:"+this.swHeight);
						if (rect != null) {
							this.swHeight = rect.height + 20;
						}
						if (this.swHeight <= 100) {
							//所以(total + pagesize -1) / pagesize就得到总页数
							// console.log("qxj famousItemHei:"+this.famousItemHei);
							this.swHeight = (dataArr.length + 1) / 2 * this.famousItemHei;
							return;
						}
					}).exec();
				}
			},

			getAdvList() {
				//联网加载数据
				var that = this;
				var data = {
					advType: 12,
					status: 1
				}
				getAdvList(data).then(res => {
					if (res.code == 200) {
						that.imageList = [];
						that.advs = [];
						res.data.forEach(function(element) {
							if (element.imageUrl != null && element.imageUrl != "") {
								that.advs.push(element);
								that.imageList.push(element.imageUrl);
							}
						});

					} else {
						uni.showToast({
							icon: 'none',
							title: "请求失败"
						});
					}
				});
			},
			// 页面跳转
			navTo(url) {
				console.log("qxj url:" + url);
				uni.navigateTo({
					url: url
				});
			},
			loginNavTo(url) {
				this.utils.isLogin().then(res => {
					if(res){
						this.$navTo(url);
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@mixin u-flex($flexD, $alignI, $justifyC) {
		display: flex;
		flex-direction: $flexD;
		align-items: $alignI;
		justify-content: $justifyC;
	}
	.container {
		font-family: PingFang SC, PingFang SC;
		padding-top: var(--status-bar-height);
		box-sizing: border-box;
		position: relative;
		z-index: 2;
	}

	.home_top_bg {
		width: 100%;
		height: auto;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.tabbox {
		position: relative;
		margin-bottom: 22rpx;
		position: relative;

		.tabbar {
			height: 88rpx;
			@include u-flex(row, center, center);
			font-weight: 600;
			font-size: 32rpx;
			color: #222222;
			line-height: 88rpx;
			position: relative;

			.tabbar-item {
				margin: 0 24rpx;
			}

			.active {
				font-weight: 600;
				font-size: 40rpx;
				color: #018C39;
				position: relative;
			}
		}

		.tabbar-tabline-image {
			width: 36rpx;
			height: 12rpx;
		}

		.tabbar-tabline {
			position: absolute;
			bottom: 0;
			width: 0;
			height: 12rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.tabbar-tabline-animation {
			transition-duration: 0.2s;
			transition-property: left;
		}
	}
</style>