rtim/pages/points/points.vue

<template>
	<view class="container">
		<image class="home_top_bg" src="@/static/image/hall/coin_points_mall_top_bg.png" mode="widthFix" :lazy-load="false"></image>
		<view class="tabbox">
			<u-tabs 
			ref="uTabs"
			:list="tabList" 
			:current="activeTab" 
			:scrollable="false" 
			:lineColor="`url(${lineBg}) 40rpx 12rpx`"
			lineWidth="40rpx"
			lineHeight="12rpx"
			:inactiveStyle="{
				fontWeight: 600,
				fontSize: '32rpx',
				color: '#f9f9f9',
				lineHeight: '88rpx',
			    flexShrink: 0,
			}"
			:activeStyle="{
				fontWeight: 600,
				fontSize: '40rpx',
				color: '#ffffff',
				lineHeight: '88rpx',
				flexShrink: 0,
			}"
			itemStyle="margin: 10rpx 0"
			@change="handleTab"></u-tabs>
			</view>
			<swiper :current="activeTab" @change="onSwiperChange" :style="'height:' + (clientHeight || '100vh') + 'px;'">
				<swiper-item>
					<scroll-view
					scroll-y="true" 
					:style="'height:' + clientHeight + 'px;'" 
					:scroll-top="scrollTopGoods" 
					@scrolltolower="scrolltolower" 
					@scroll="scroll($event,'scrollTopGoods')"
					:refresher-enabled="true"
					:refresher-triggered="triggered"
					@refresherrefresh="handleRefresher">
						<pointsMall ref="integralGoods"></pointsMall>
						<view class="back-top" v-show="scrollTopGoods>clientHeight" @click="goTop">
							<image src="https://www.mescroll.com/img/mescroll-totop.png" mode="aspectFill"></image>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item>
					<scroll-view scroll-y="true" :style="'height:' + clientHeight + 'px;'" :scroll-top="scrollTopStudy" @scrolltolower="scrolltolowerStudy" @scroll="scroll($event,'scrollTopStudy')" :refresher-enabled="true"
					:refresher-triggered="triggered"
					@refresherrefresh="handleRefresher">
						<saveMoney ref="studyCenter"/>
						<view class="back-top" v-show="scrollTopStudy>clientHeight" @click="goTopStudy">
						  <image src="https://www.mescroll.com/img/mescroll-totop.png" mode="aspectFill"></image>
            </view>
					</scroll-view>
				</swiper-item>
				
				<!-- <swiper-item>
					<scroll-view scroll-y="true" :style="'height:' + clientHeight + 'px;'">
						<makeMoney ref="homeIndex" source="course" />
					</scroll-view>
				</swiper-item> -->
			</swiper>
		
	</view>
</template>

<script>
	import pointsMall from "../course/components/integralGoods.vue"
	import saveMoney from './components/saveMoney.vue'
	import makeMoney from './components/makeMoney.vue'
	const lineBg = "/static/image/hall/tab_ellipse.png";
	export default {
		components:{
			pointsMall,
			saveMoney,
			makeMoney
		},
		data() {
			return {
				lineBg,
				clientHeight:0,
				scrollTopGoods: 0,
                scrollTopStudy: 0,
				old: {
					scrollTopStudy: 0,
					scrollTopHall: 0,
					scrollTopGoods: 0
				},
				triggered: false,
				activeTab:0,
				scrollViewId:'scrollView0',
				tabList: [
					{
					  id: "tab01",
					  name: '优选'
					}, {
					  id: "tab02",
					  name: '省钱'
					},
					// {
					//   id: "tab03",
					//   name: '赚钱'
					// }
				],
			}
		},
		onPageScroll(e) {
			this.top=e.scrollTop;
			this.scrollTopGoods = e.scrollTop;
		},
		onReady() {
			// 同步获取系统信息，避免异步延迟
			try {
				const systemInfo = uni.getSystemInfoSync();
				this.clientHeight = systemInfo.windowHeight - uni.upx2px(120) - systemInfo.statusBarHeight;
			} catch (e) {
				// 降级到异步获取
				uni.getSystemInfo({
					success: (res) => {
						this.clientHeight = res.windowHeight - uni.upx2px(120) - res.statusBarHeight;
					}
				});
			}
		},
		onLoad() {
			// return uni.navigateTo({
			// 	url: '/pages/points/shopDetail?id=8541'
			// })
			
			// 同步获取系统信息，避免延迟
			try {
				const systemInfo = uni.getSystemInfoSync();
				this.statusBarHeight = systemInfo.statusBarHeight;
				// 提前设置 clientHeight，避免布局闪烁
				this.clientHeight = systemInfo.windowHeight - uni.upx2px(120) - systemInfo.statusBarHeight;
				this.isXiaomi=plus.runtime.channel == 'xiaomi';
				//this.isXiaomi=true;
				// if(!this.isXiaomi){
				// 	this.tabList.push({
				// 	   id: "tab04",
				// 	   name: '健康管理',
				// 	});
				// }
			} catch (e) {
				this.statusBarHeight = 0;
			}
      // 初始化当前默认tab（如果是直接进入的话）
      this.initCurrentTab();
		},
		methods: {
			handleTab(e) {
				this.activeTab = e.index
				// if(this.haveFamousCourse) {
				// 	// 防止在没有名医讲堂数据的时候有指引弹窗
				// 	this.changeGuide(this.activeTab);
				// 	console.log("=handleTab=")
				// }
				// this.$nextTick(()=>{
				// 	this.selectorQuery()
				// })
			},
			// swiper划动
			onSwiperChange(e){
				this.changeIdx(e.detail.current);
			},
			// 更新当前页
			changeIdx(index){
				if(this.activeTab === index) return;
				this.activeTab = index;
				this.scrollViewId = 'scrollView'+this.activeTab;
				
				// 初始化当前tab（懒加载）
				this.initCurrentTab();
			},
			// 初始化当前tab（懒加载优化）
			initCurrentTab() {
				if (this.initializedTabs && this.initializedTabs.has(this.activeTab)) {
					return; // 已初始化，跳过
				}
				
        if (!this.initializedTabs) {
          this.initializedTabs = new Set();
        }
				
				this.$nextTick(() => {
					if(this.activeTab == 0) {
						// tab 0 由 doctorHall 组件自己处理
						this.initializedTabs.add(0);
					} else if(this.activeTab == 1) {
						if(this.$refs['studyCenter']) {
							this.$refs['studyCenter'].initShow();
							this.initializedTabs.add(1);
						}
					} else if(this.activeTab == 2) {
						if(this.$refs.homeIndex) {
							this.$refs.homeIndex.initShow();
							this.initializedTabs.add(2);
						}
					} 
				});
			},
			goTop() {
				setTimeout(()=>{
					this.old.scrollTopGoods = 0 
					this.scrollTopGoods = 0
				})
			},
			scroll(e,type) {
				this.old[type] = e.detail.scrollTop
				if (type === 'scrollTopGoods') {
          this.scrollTopGoods = this.old[type]
        } else if (type === 'scrollTopStudy') {
          this.scrollTopStudy = this.old[type]
        }
			},
			scrolltolower(){
				this.$refs.integralGoods&&this.$refs.integralGoods.scrolltolower()
			},
      scrolltolowerStudy() {
        this.$refs.studyCenter&&this.$refs.studyCenter.scrolltolower()
      },
      goTopStudy() {
        setTimeout(()=>{
					this.old.scrollTopStudy = 0 
					this.scrollTopStudy = 0
				})
      },
		}
	}
</script>

<style lang="scss" scoped>
	@mixin u-flex($flexD, $alignI, $justifyC) {
		display: flex;
		flex-direction: $flexD;
		align-items: $alignI;
		justify-content: $justifyC;
	}
.back-top {
	border-radius: 50%;
	overflow: hidden;
	background-color: transparent;
	width: 40px;
	height: 40px;
	position: fixed;
	right: 24rpx;
	bottom: 100rpx;
  z-index: 99;
	image {
		width: 40px;
		height: 40px;
	}
}
.container {
	font-family: PingFang SC, PingFang SC;
	padding-top: var(--status-bar-height);
	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;
		display: flex;
		justify-content: center;
		.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: #FF5C03;
				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>