caimei-applets-caimei/pages/goods/goods-secondary.vue

<template>
	<view class="container instrument">
		<!--选项卡-->
		<view class="home-hotmaintab-fixed">
			<view class="home-flex-tab show">
				<view class="flex text-white">
					<view class="basis-xxl">
						<scroll-view scroll-x class="nav z" scroll-with-animation :scroll-left="headTab.scrollLeft">
							<block v-for="(item,index) in headTab.list" :key="index">
								<view class="cu-item" :class="index==headTab.TabCur?'select':''" @tap="tabSelect(index,item)" :data-id="index">
									<view>{{item.name}}</view>
									<view class="tab-dot bg-white"/>
								</view>
							</block>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
		<view class="container-main">
			<!-- 商品专题 -->
			<template v-if="isActivityFlag">
				<view class="activity-container">
					<scroll-view scroll-y="true" >
						<view class="list" v-for="(item, index) in activityList" :key="index" @click="NavigateToActivity(item)">
							<image class="list-image" :src="item.image" mode="scaleToFill"></image>
							<view class="title">{{item.title}}</view>
							<view class="time" v-if="item.status!=3">
								<view class="text">{{item.detail }}</view>
							</view>
							<view class="mack" v-if="item.status == 3">
								<view class="mack-text">活动已经结束</view>
							</view>
						</view>
						<!--加载loadding-->
						<tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
						<tui-nomore :visible="!pullUpOn" bgcolor="#F7F7F7" :text='nomoreText'></tui-nomore>
						<!--加载loadding-->
					</scroll-view>
				</view>
			</template>
			<!-- 列表 -->
			<template v-else>
				<tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading	="true" :loadingType="9"></tui-skeleton>
				<template v-else>
					<view class="banner">
						<view class="banner-image">
							<image :src="banner" mode=""></image>
						</view>
					</view>
					<view class="instrument-list">
						<view class="list-item-cell" v-for="(item,index) in list" :key="index">
							<view class="list-item-title">
								<view class="title" :class="item.link ? 'float' : ''">
									<text>{{ item.title }}</text>
								</view>
								<view class="more" v-if="item.link" @click="NavToDetailPage(item)">
									<text>查看更多</text>
									<text class="iconfont icon-xiangyou"></text>
								</view>
							</view>
							<view class="list-item-pros">
								<view class="item-pros" v-for="(pros,prosIndex) in item.floorData" :key="prosIndex" @click="NavToDetailPage(pros)">
									<view class="item-pros-image">
										<image :src="pros.image" mode=""></image>
									</view>
									<view class="item-pros-name">{{ pros.title }}</view>
								</view>
							</view>
						</view>
					</view>
				</template>
			</template>
		</view>
		<!-- 侧边 -->
		<scroll-top :isScrollTop="isScrollTop" :bottom="200"></scroll-top>
	</view>
</template>
<script>
	import tuiLoadmore from "@/components/tui-components/loadmore/loadmore"
	import tuiNomore from "@/components/tui-components/nomore/nomore"
	export default{
		components:{
			tuiLoadmore,
			tuiNomore,
		},
		data(){
			return{
				banner:'',
				headTab: {
					TabCur: 0, 
					scrollLeft: 0, 
					list: [],
				},
				headTabId:0,
				list:[],
				navMenuId:0,
				isScrollTop:false,
				listQuery:{
					pageNum:1,
					pageSize:10,
				},
				nomoreText: '上拉显示更多',
				hasNextPage:false,
				loadding: false,
				pullUpOn: true,
				pullFlag: true,
				isActivityFlag:false,
				skeletonShow:true,
				activityList:[]
			}
		},		
		onLoad(option) {
			console.log(option)
			this.navMenuId = option.linkId
			this.GetHomeSubMenu()
		},
		methods:{
			GetHomeSubMenu(){//获取数据
				let _self = this
				this.CommonService.GetHomeSubMenu({navMenuId:this.navMenuId}).then(response =>{
					let data = response.data
					this.headTab.list = data
					uni.setNavigationBarTitle({title:_self.headTab.list[0].name});
					if(this.headTab.list[0].linkType === 8){
						this.isActivityFlag = true
						this.GetPromotionsrList()
					}else{
						this.headTabId = this.headTab.list[0].linkParam.id
						this.GetPageTopicInfo(this.headTabId)
					}
				}).catch(error =>{
					this.$util.msg(error.msg,2000)
				})
			},
			GetPageTopicInfo(type){//获取数据
				this.ProductService.GetPageTopic({type:type}).then(response =>{
					let data = response.data
					this.list = data
					this.GetPageTopicBanner(type)
					this.skeletonShow = false
				}).catch(error =>{
					this.$util.msg(error.msg,2000)
				})
			},
			GetPageTopicBanner(type){//获取banner
				this.ProductService.GetPageTopicBanner({type:type}).then(response =>{
					let data = response.data
					this.banner = data.image
				}).catch(error =>{
					this.$util.msg(error.msg,2000)
				})
			},
			GetPromotionsrList(){//获取专题列表
				this.ProductService.GetPromotionsrList(this.listQuery).then(response =>{
					let responseData = response.data
					if(responseData.list&&responseData.list.length > 0){
						this.isEmpty = false
						this.hasNextPage = responseData.hasNextPage
						this.activityList = responseData.list
						this.pullFlag = false;
						setTimeout(()=>{this.pullFlag = true;},500)
						if(this.hasNextPage){
							this.pullUpOn = false
							this.nomoreText = '上拉显示更多'
						}else{
							this.pullUpOn = true
							this.loadding = false
							this.nomoreText = '已至底部'
						}
					}else{
						this.isEmpty = true
					}
				}).catch(error =>{
					this.$util.msg(error.msg,2000)
				})
			},
			GetPromotionsrListBottomData(){
				this.listQuery.pageNum+=1
				this.ProductService.GetPromotionsrList(this.listQuery).then(response =>{
					let responseData = response.data
					if(responseData.list&&responseData.list.length > 0){
						this.hasNextPage = response.data.hasNextPage
						this.activityList = this.activityList.concat(responseData.list) 
						this.pullFlag = false;// 防上拉暴滑
						setTimeout(()=>{this.pullFlag = true;},500)
						if(this.hasNextPage){
							this.pullUpOn = false
							this.nomoreText = '上拉显示更多'
						}else{
							this.pullUpOn = false
							this.loadding = false
							this.nomoreText = '已至底部'
						}
					}
				}).catch(error =>{
					this.$util.msg(error.msg,2000)
				})
			},
			tabSelect(index,item) {//tab菜单被点击
				this.headTab.TabCur = index;
				this.headTab.scrollLeft = (index - 1) * 50;
				this.headTabId = item.linkParam.id;
				uni.setNavigationBarTitle({title:item.name});
				if(item.linkType === 8){
					this.isActivityFlag = true
					this.GetPromotionsrList()
				}else{
					this.isActivityFlag = false
					this.GetPageTopicInfo(this.headTabId)
				}
			},
			NavigateToActivity(item){//跳转活动详情
				if(item.status!=3){
					this.$api.navigateTo(`/h5/pages/activity/activity?id=${item.linkParam.id}`)
				}else{
					this.$util.msg('活动已经结束',2000)
				}
			},
			NavToDetailPage(floor) {//跳转
				console.log(floor)
				/**
				 * 页面跳转类型
				 * 1、二级页面,2、搜索项目仪器,3、直播页面,4、自由页面,5、商品详情,6、仪器项目详情,7、供应商主页
				 * 8、专题活动页,9、二手市场介绍,10、二手商品列表,11、二手商品发布,12、商品搜索,13、信息详情
				 * 14、品牌招商介绍页,15、维修保养介绍页,16、首页,17、注册页,18、信息中心,19、供应商列表
				 **/
				 if(floor.linkType){
					 const typeMap = {
					 	1:`/pages/goods/goods-instrument?linkId=${floor.linkParam.id}&title=${floor.title}`,
					 	2:`/pages/goods/instrument-details?id=${floor.linkParam.id}`,
					 	5:`/pages/goods/product?id=${floor.linkParam.id}`,
					 	7:`/supplier/pages/user/my-shop?shopId=${floor.linkParam.id}`,
					 	8:`/h5/pages/activity/activity-list`,
					 	9:`/second/pages/form/introduce`,
					 	10:`/second/pages/product/product-list`,
					 	11:`/second/pages/form/form`,
					 	12:`/pages/search/search?keyWord=${floor.title}`,
					 	13:`/h5/pages/article/path?link=${floor.link}`,
					 	14:`/h5/pages/article/path?link=${floor.link}`,
					 	15:`/h5/pages/article/path?link=${floor.link}`,
					 	17:`/pages/login/register-select`,
					 	18:`/h5/pages/article/path?link=${floor.link}`,
					 	19:`/pages/search/search-supplier?keyWord=${floor.title}`
					 }
					 const url = typeMap[floor.linkType];
					 this.$api.navigateTo(url)
				 }
			}
		},
		onReachBottom() {
			if(this.isActivityFlag){
				if(this.hasNextPage){
					this.loadding = true
					this.pullUpOn = true
					this.GetPromotionsrListBottomData()
				}	
			}
		},
		onPullDownRefresh() {//下拉刷新
			if(this.isActivityFlag){
				this.listQuery.pageNum =1
				this.GetPromotionsrList()
				uni.stopPullDownRefresh()
			}else{
				this.GetPageTopicInfo(this.headTabId)
				uni.stopPullDownRefresh()
			}
		},
		onPageScroll(e){//实时获取到滚动的值
			if(e.scrollTop>600){
				this.isScrollTop = true
			}else{
				this.isScrollTop = false
			}	
		},
		onShow() {

		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F7F7F7;
	}
	.container-main{
		padding-top: 100rpx;
	}
	// 活动专题列表
	.activity-container{
		width: 100%;
		height: auto;
		box-sizing: border-box;
		padding: 0 24rpx;
	}
	.list{
		width: 100%;
		height: 318rpx;
		float: left;
		margin-bottom:20rpx;
		position: relative;
		.list-image{
			width: 100%;
			height: 318rpx;
			display: block;
		}
		.title{
			width: 100%;
			height: 72rpx;
			line-height: 72rpx;
			text-align: center;
			background: rgba(254,246,243,0.8);
			color: $color-system;
			position: absolute;
			bottom: 0;
			left: 0;
			font-size: $font-size-26;
			text-overflow:ellipsis;
			display: -webkit-box;
			word-break: break-all;
			-webkit-box-orient: vertical; 
			-webkit-line-clamp: 1;
			overflow: hidden;
		}
		.time{
			width: 100%;
			height: 48rpx;
			position: absolute;
			top: 0;
			left: 0;
			.text{
				width: 475rpx;
				height: 48rpx;
				font-size: $font-size-24;
				margin: 0 auto;
				line-height: 48rpx;
				background:  linear-gradient(315deg, #f94b4b 0%, #bc3cff 100%);
				color: #FFFFFF;
				text-align: center;
			}
		}
		.mack{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 9999;
			background: rgba(0,0,0,.1);
			border-radius: 2rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.mack-text{
				width: 220rpx;
				height: 70rpx;
				border-radius: 35rpx;
				text-align: center;
				background: rgba(0,0,0,.4);
				color: #FFFFFF;
				line-height: 70rpx;
				font-size: $font-size-26;
			}
		}
	}
	//二级分类
	.instrument{
		width: 100%;
		height: auto;
		.banner{
			box-sizing: border-box;
			padding:24rpx;
			background-color: #FFFFFF;
			width: 100%;
			.banner-image{
				width: 100%;
				height: 248rpx;
				border-radius: 4rpx;
			}
			image{
				width: 100%;
				height: 248rpx;
				border-radius: 4rpx;
			}
		}
		.instrument-list{
			width: 100%;
			height: auto;
			box-sizing: border-box;
			padding: 0 24rpx;
			.list-item-cell{
				width: 100%;
				height: auto;
				float: left;
				.list-item-title{
					width: 100%;
					height: 88rpx;
					line-height: 88rpx;
					float: left;
					.title{
						font-size: $font-size-28;
						line-height: 80rpx;
						color: $text-color;
						font-weight: bold;
						&.float{
							float: left;
						}
					}
					.more{
						font-size: $font-size-26;
						line-height: 80rpx;
						color: #999999;
						height: 80rpx;
						float: right;
						.icon-xiangyou{
							font-size: $font-size-28;
							margin-left: 10rpx;
						}
					}
				}
				.list-item-pros{
					width: 100%;
					height: auto;
					float: left;
					.item-pros{
						width: 340rpx;
						height: 414rpx;
						float: left;
						margin-right: 20rpx;
						margin-bottom: 20rpx;
						background-color: #FFFFFF;
						border-radius: 4rpx;
						&:nth-child(2n){
							margin-right: 0;
						}
						.item-pros-image{
							width: 340rpx;
							height: 340rpx;
							float: left;
							image{
								width: 340rpx;
								height: 340rpx;
								display: block;
								border-radius: 4rpx 4rpx 0 0;
							}
						}
						.item-pros-name{
							width: 100%;
							height: 74rpx;
							line-height: 74rpx;
							box-sizing: border-box;
							padding: 0 24rpx;
							white-space: normal;
							word-break: break-all;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							text-align: center;
							font-size: $font-size-26;
							line-height: 74rpx;
							text-align: center;
						}
					}
				}
			}
		}
	}
	.home-hotmaintab-fixed{
		width: 100%;
		height:auto;
		overflow: hidden;
		background: #FFFFFF;
		padding-bottom: 20rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		.home-flex-tab {
			width: 100%;
			position: relative;
			transition: opacity .25s;
			.text-white{
				color: #666666;
			}
			.flex {
				.basis-xxl {
					flex-basis: 100%;
					width: 100%;
					z-index: 1;
				}
				.basis-xxs {
					flex-basis: 10%;
					z-index: 1;
					width: 10%;
				}
				.sort-icon {
					font-size: 55rpx;
					height: 64rpx;
					line-height: 64rpx;
					text-align: center;
				}
			}
		}
	}
	.nav{
		white-space:nowrap;
	}
	.nav .cu-item {
		display: inline-block;
		margin: 0 5rpx;
		padding: 0 15rpx;
	}
	.nav.z .cu-item.select {
		font-size: $font-size-28;
		color: $color-system;
	}
	.nav.z .cu-item {
		height: 80rpx;
		font-size: $font-size-26;
		line-height: 80rpx;
		position: relative;

	}
	.nav.z .cu-item.select .tab-dot {
		position: absolute;
		height: 8rpx;
		border-radius: 20rpx;
		bottom: 0;
		left: 0;
		right: 0;
		width: 40rpx;
		margin: auto;
	}
	.bg-white{
		background-color: $color-system;
	}
	::-webkit-scrollbar {
		display: none;
	}
	.flex {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
	}
</style>