college/pages/mobile/index.vue

<template>
	<view class="content">

		<!-- 导航 -->
		<view class="nav">
			<view class="leftView"></view>
			<view class="navTitle">门店学院</view>
			<view class="rightView">
				<image src="../../static/mobile/icona_fenlei@2x.png" mode="" class="rightImg" @click="goSift"></image>
				<image src="../../static/mobile/icon_search@2x.png" mode="" class="rightImg"
					style="margin-left: 40rpx;" @click="goSearch"></image>
			</view>
		</view>

		<!-- 推荐 -->
		<view class="commend" v-if="bannerArr.length != 0">
			<view class="top">
				<image src="../../static/mobile/icon_tuijian@2x.png" mode="" style="width: 28rpx; height: 28rpx;">
					<text class="tuijian">推荐文章</text>
				</image>
			</view>

			<!-- item -->
			<view class="scrollBg">
				<scroll-view scroll-x="true" @scroll="scroll">
					<view class="itemBg">
						<view v-for="(item,index) in bannerArr" :key="index" class="item" @click="goDetail(item)">
							<image :src="item.logoImg" mode="" class="swpImg"></image>
							<view class="title">{{item.title}}</view>
							<view style="display: flex;">
								<view class="title2" @click.stop="goTuijianTab(item)">{{item.categoryName}}</view>
							</view>

						</view>
					</view>
				</scroll-view>
			</view>

		</view>

		<!-- 分类 -->
		<view v-for="(item,index) in itemArr" :key="index">
			<view class="fenleiBg">
				<!-- 头 -->
				<view class="fenTop" :class="{fenTopNo:item.children == 0}">
					<view class="leftTop">
						<view class="tuijian">{{item.name}}</view>
						<view class="sum">共{{item.count}}篇文章</view>
					</view>
					<view class="rightTop">
						<view class="allBtn" @click="goTopTab(item)">查看全部
							<image src="../../static/mobile/icon_arrow@2x.png" mode=""
								style="width: 11rpx; height: 18rpx; margin-left: 10rpx;"></image>
						</view>
					</view>
				</view>
				<!-- item -->
				<view class="itemBg">
					<view v-for="(item2,index2) in item.children" :key="index2" v-if="index2<2" class="twoItem" @click="goList(item2)">
						<image :src="item2.logoImg" mode="" class="img2"></image>
						<view class="itemTitle">{{item2.title}}</view>


					</view>
				</view>


			</view>
		</view>

		
		
		<!-- 下拉菜单 -->
		<view class="sift" v-show="showSift" @click="goHide()">
			<view class="siftItemBg">
				<view v-for="(item,index) in siftData" :key="index" class="siftItem">
					<view @click="goTopTab(item)">{{item.name}}</view>
				</view>
			</view>
		</view>
		
		
		<view class="gotop" @click="gotoTop">
			<image src="../../static/pcimg/btn_top@2x.png" mode="" class="gotopImg"></image>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bannerArr: [],
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				itemArr: [],
				showSift:false,
				siftData:[],
			}
		},
		onLoad() {
			this.getDetailData()
			this.getSiftData()
		},
		methods: {
			gotoTop(){
				uni.pageScrollTo({ 
				　　　　　　scrollTop: 0, duration: 300 
				　　　　}); 
			},
			goHide(){
				this.showSift = false
			},
			goDetail(item){
				uni.navigateTo({
					url:'detail?id=' + item.id
				})
			},
			goTuijianTab(item){
				
				uni.navigateTo({
					url:'topTab?topCode=' + item.categoryCode + '&comment=' + item.comment + '&topName=' + item.categoryName
				})
			},
			goList(item){
				
				// 1分类2文章
				if (item.type == 1) {
					uni.navigateTo({
						url:'list?topCode=' + item.code + '&comment=' + item.comment + '&topName=' + item.name
					})
				}
				if (item.type == 2) {
					uni.navigateTo({
						url:'detail?id=' + item.id
					})
				}
			},
			goTopTab(item){
				
				this.showSift = false
				uni.navigateTo({
					url:'topTab?topCode=' + item.code + '&comment=' + item.comment + '&topName=' + item.name
				})
			},
			goSift(){
				this.showSift = !this.showSift
			},
			goSearch(){
				uni.navigateTo({
					url:'search'
				})
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			goNav(urlStr){
				uni.navigateTo({
					url:urlStr
				})
			},
			
			getDetailData() {
				uni.showLoading({
					title: '加载中'
				})
				let url = '/trainingOpenApi/indexData',
					params = {
			
					}
				this.$http(url, params, 'GET').then(res => {
					uni.hideLoading();
					var data = res.data
			
			
					// 处理 undefined和null转为空白字符串
			
					for (const key in data) {
						data[key] = this.$praseStrEmpty(data[key])
					}
			
					this.detailData = data
					
					this.bannerArr = this.detailData.recommendList
					this.itemArr = this.detailData.categoryList
			
				})
			},
			
			
			getSiftData() {
				uni.showLoading({
					title: '加载中'
				})
				let url = '/trainingOpenApi/allCategory',
					params = {
			
					}
				this.$http(url, params, 'GET').then(res => {
					uni.hideLoading();
					var data = res.data
			
			
					// 处理 undefined和null转为空白字符串
			
					for (const key in data) {
						data[key] = this.$praseStrEmpty(data[key])
					}
			
					this.siftData = data
					
					
				})
			},
			
			
			
			
			
			// 下拉刷新 上拉加载更多
			onPullDownRefresh() {
				// this.page = 1;
				// this.getItemData()
			
				this.getDetailData()
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 1000);
			},
			// onReachBottom() {
			// 	this.page++;
			
			// 	this.getItemData()
			
			// },
			
		}
	}
</script>

<style scoped>
	.content {
		min-height: 100vh;
		background-color: #f4f5f7;
		padding-top: 88rpx;
		padding-bottom: 20rpx;

	}
	
	.nav {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 88rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
		z-index: 999;
		border-bottom: #eeeeee 2rpx solid;
	}

	.navTitle {
		font-size: 36rpx;
		font-weight: bold;
		color: #3c3c3c;

	}

	.leftView {
		width: 30%;
	}

	.rightView {
		width: 30%;
		display: flex;
		justify-content: flex-end;
		padding-right: 24rpx;
	}

	.rightImg {
		width: 40rpx;
		height: 40rpx;

	}

	.commend {

		background-color: #FFFFFF;
		margin: 20rpx 0;
		padding: 30rpx 25rpx;

	}

	.top {
		padding-bottom: 24rpx;
	}

	.tuijian {
		font-size: 32rpx;
		font-weight: bold;
		color: #3c3c3c;
		margin-left: 10rpx;
	}

	.scrollBg {
		background-color: #FFFFFF;

	}

	.scroll-view {
		white-space: nowrap;
	}

	.itemBg {
		display: flex;
		
	}

	.item {
		
		width: calc((100vw - 75rpx) / 2);
		margin-right: 25rpx;
	}

	.swpImg {
		
		border-radius: 10rpx; 
		width: calc((100vw - 75rpx) / 2);
		height: 226rpx;
	}

	.title {
		font-size: 28rpx;
		font-weight: bold;
		color: #3c3c3c;
		/* 隐藏文字显示 ...不换行 */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin: 14rpx 0;
	}
	.itemTitle{
		font-size: 28rpx;
		font-weight: bold;
		color: #3c3c3c;
		/* 隐藏文字显示 ...不换行 */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-top: 14rpx;
	}
	.title2 {

		background: rgba(63, 144, 247, 0.1);
		font-size: 22rpx;
		color: #3F90F7;
		height: 36rpx;
		line-height: 36rpx;
		border-radius: 18rpx;
		padding: 3rpx 14rpx;
		min-width: 0;
		max-width: 138rpx;
		margin-bottom: 10rpx;
		text-align: center;
		/* 隐藏文字显示 ...不换行 */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		
	}

	.fenleiBg {
		background-color: #FFFFFF;
		margin: 20rpx 0;
		padding: 30rpx 25rpx;
	}

	.fenTop {
		padding-bottom: 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.fenTopNo{
		padding-bottom: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.leftTop {
		display: flex;
		align-items: center;
	}
	.allBtn{
		font-size: 24rpx;
		color: #3C3C3C;
	}

	.sum {
		font-size: 24rpx;
		color: #999999;
		margin-left: 16rpx;
	}

	.twoItem {
		width: calc((100vw - 75rpx) / 2);
		margin-right: 25rpx;
	}

	.img2 {
		width: calc((100vw - 75rpx) / 2);
		height: 226rpx;
		border-radius: 10rpx;
	}
	
	.sift{
		
		position: fixed;
		left: 0;
		top: 88rpx;
		width: 100vw;
		min-height: 100vh;
		background-color: rgba(0, 0, 0, 0.4);
		
	}
	.siftItemBg{
		background-color: #FFFFFF;
		width: 100%;
		height: 500rpx;
		overflow-y: scroll;
	}
	.siftItem{
		background-color: #FFFFFF;
		color: #333333;
		font-size: 30rpx;
		text-align: center;
		padding: 30rpx 0;
	}
	.gotopImg{
		width: 100rpx;
		height: 100rpx;
	}
	.gotop{
		position: fixed;
		right: 15rpx;
		bottom: 100rpx;
		cursor: pointer;
	}
</style>