college/pages/mobile/index.vue

<template>
	<view class="content">

		<!-- 导航 -->
		<view class="nav">
			<view class="leftView" @click="back">
				<image src="../../static/mobile/backBtn.png" mode=""
					style="width: 22rpx; height: 40rpx; padding-left: 24rpx;"></image>
			</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: [],
				type:'',
			}
		},
		onLoad(opt) {
			this.getDetailData()
			this.getSiftData()
			this.type = opt.type
			
		},
		methods: {
			
			back() {
				
				console.log('type',this.type);
				if (this.type == "app") {
					
					var standalone = window.navigator.standalone
					var userAgent = window.navigator.userAgent.toLowerCase()
					var safari = /safari/.test(userAgent)
					var ios = /iphone|ipod|ipad|mac/.test(userAgent)
					var android = /android/.test(userAgent)
					if (ios) {
						if (true) { //!standalone&& !safari
							window.webkit.messageHandlers.goMyNav.postMessage(null)
						}
					} else if (android) {
						window.android.postMessage()
					}
				} else {
					uni.navigateBack({

					})
				}
			},
			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: 398rpx;
		margin-right: 25rpx;
	}

	.swpImg {

		border-radius: 10rpx;
		width: 398rpx;
		height: 224rpx;
	}

	.title {
		font-size: 28rpx;

		color: #3c3c3c;
		/* 隐藏文字显示 ...不换行 */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin: 14rpx 0;
	}

	.itemTitle {
		font-size: 28rpx;
		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: #999999;
	}

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

	.twoItem {

		width: 339rpx;
		margin-right: 25rpx;
	}

	.img2 {

		width: 339rpx;
		height: 191rpx;
		border-radius: 10rpx;
		border: #EEEEEE 2rpx solid;
	}

	.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>