1.对接口

common/request.js

@@ -1,21 +1,10 @@
- const baseURL = 'https://api.dms.66km.com/'
-//const baseURL='http://wx.32che.cn/'
-//const baseURL='http://58.56.15.138:20189/'
+ //测试地址
+ const baseURL = 'http://58.56.15.138:20189/' 
+ const burl2='http://58.56.15.138:20189/' 
 
-  // baseURL: 'http://192.168.0.140:20187',
-//authorizaURL: 'https://api.dms.66km.com/weixin/authorize',
-//const authorizaURL='http://wx.32che.cn/weixin/authorize'
-  //authorizaURL: 'http://58.56.15.138:20187/weixin/authorizeSimulation',
-  // authorizaURL: 'http://192.168.0.140:20187/weixin/authorizeSimulation',
-//const code='B527DBDDC89D4A29902D1C7CE34814FB'
 
-//const webURL='http://192.168.0.215:9588/#/'
-//const webURL='http://dms.32che.cn/#/'
-const webURL='https://minh5.66km.com/#/'
 
-
-
-import md5 from './MD5.js'
+// import md5 from './MD5.js'
 
 
 const fetchPost = (url = '', params = {}, header = {
@@ -92,14 +81,7 @@ const http = (url = '', date = {}, type = 'POST', header = {
 }) => {
     return new Promise((resolve, reject) => {
 		header={};
-		const wxOpendata = uni.getStorageSync("wxOpendata");
-		if(wxOpendata){
-			header['code']=wxOpendata.code;
-			
-		}else{
-			header['code']='';
-			
-		}
+		
 		
 		//header['token']='98A9FED8814B457288166BDF623F33D1';
 		//header['uid']='795957B6-8F4B-4E7F-96FE-1F26E5BA21A1'; 
@@ -200,5 +182,5 @@ function refresh(url,date,type,header){
 }
 
 export default {
-	http,baseURL,fetchGet,fetchPost,webURL
+	http,baseURL,fetchGet,fetchPost
 }

components/nodata/nodata.vue

@@ -0,0 +1,47 @@
+<template>
+	<view class="" style="padding-bottom: 20rpx;">
+		
+		<view  class="nodataBox">
+			<image src="../../static/mobile/nodata.png" mode="widthFix" class="nodataImg"></image>
+			<view class="noTxt">暂无数据</view>
+		</view>
+		
+		
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			
+		}
+	},
+	onLoad(opt) {
+      
+	},
+	onShow() {
+		
+	},
+	methods: {
+		
+	}
+}
+</script>
+
+<style scoped>
+	
+	.nodataImg{
+	  width: 400rpx;
+	  padding-top: 100rpx;
+	}
+	.noTxt{
+		font-size: 32rpx;
+		color: #999999;
+		padding-top: 50rpx;
+	}
+	.nodataBox{
+		text-align: center;
+	}
+	
+</style>

components/searchBox/searchBox.vue

@@ -0,0 +1,78 @@
+<template>
+	<view>
+		<!-- 搜索 -->
+		<view class="searchBox">
+			<image src="../../static/mobile/icon_search@2x.png" class="searchImg"></image>
+			<input type="text" class="searchInput" :placeholder='placeholder' v-model="inputValue"
+				@confirm="search" />
+			<image src="../../static/mobile/icon_close.png" class="searchClose" v-if="inputValue!=''"
+				@click="clear"></image>
+		</view>
+
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "searchBox",
+		props: {
+			placeholder: {
+				type: String,
+				default: '请输入搜索内容'
+			},
+			
+		},
+		data() {
+			return {
+				inputValue: '',
+			};
+		},
+		methods:{
+			search(){
+				if (!this.inputValue) return;
+				 //console.log(this.inputValue);
+				this.$emit('search',this.inputValue);
+				
+			},
+			clear(){
+				this.inputValue = ''
+				this.$emit('search','');
+			},
+		}
+	}
+</script>
+
+<style>
+	.searchBox {
+		height: 72rpx;
+		margin: 24rpx 0;
+		background-color: #FFFFFF;
+		border-radius: 36rpx;
+		border: #FF4F00 3rpx solid;
+		display: flex;
+		position: relative;
+	}
+
+	.searchImg {
+		margin-top: 20rpx;
+		margin-left: 20rpx;
+		width: 32rpx;
+		height: 32rpx;
+	}
+
+	.searchInput {
+		height: 72rpx;
+		font-size: 28rpx;
+		padding-left: 16rpx;
+		width: 78%;
+	}
+
+	.searchClose {
+		position: absolute;
+		width: 36rpx;
+		height: 36rpx;
+		right: 36rpx;
+		top: 20rpx;
+
+	}
+</style>

main.js

@@ -1,6 +1,9 @@
 import '@/common/pc'
 import App from './App'
 
+import request from 'common/request.js'
+Vue.prototype.$http = request.http
+
 // #ifndef VUE3
 import Vue from 'vue'
 Vue.config.productionTip = false
@@ -19,4 +22,12 @@ export function createApp() {
     app
   }
 }
-// #endif
+// #endif
+
+// Vue全局处理undefined和null转为空白字符串
+Vue.prototype.$praseStrEmpty = function(str) {
+    if (typeof str === 'undefined' || str === null) {
+        return "";
+    }
+    return str;
+}

pages.json

@@ -1,28 +1,50 @@
-{
-	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
-		{
-			"path": "pages/index/index",
-			"style": {
-				"navigationStyle": "custom"
-			}
-		},
-		{
-			"path": "pages/mobile/index",
-			"style": {
-				"navigationStyle": "custom"
-			}
-		},
-		{
-			"path": "pages/pc/index",
-			"style": {
-				"navigationStyle": "custom"
-			}
-		}
-	],
-	"globalStyle": {
-		"navigationBarTextStyle": "black",
-		"navigationBarTitleText": "门店学院",
-		"navigationBarBackgroundColor": "#F8F8F8",
-		"backgroundColor": "#F8F8F8"
-	}
+{
+	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+		{
+			"path": "pages/index/index",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/mobile/index",
+			"style": {
+				"navigationStyle": "custom",
+				"enablePullDownRefresh": true
+			}
+		},
+		{
+			"path": "pages/pc/index",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		}, {
+			"path": "pages/mobile/topTab",
+			"style": {
+				"navigationStyle": "custom",
+				"enablePullDownRefresh": true
+			}
+
+		}, {
+			"path": "pages/mobile/search",
+			"style": {
+				"navigationStyle": "custom",
+				"enablePullDownRefresh": false
+			}
+
+		}, {
+			"path": "pages/mobile/list",
+			"style": {
+				"navigationStyle": "custom",
+				"enablePullDownRefresh": true
+			}
+
+		}
+	],
+	"globalStyle": {
+		"navigationBarTextStyle": "black",
+		"navigationBarTitleText": "门店学院",
+		"navigationBarBackgroundColor": "#F8F8F8",
+		"backgroundColor": "#F8F8F8"
+	}
 }

pages/mobile/index.vue

@@ -6,9 +6,9 @@
 			<view class="leftView"></view>
 			<view class="navTitle">门店学院</view>
 			<view class="rightView">
-				<image src="../../static/mobile/icona_fenlei@2x.png" mode="" class="rightImg"></image>
+				<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;"></image>
+					style="margin-left: 40rpx;" @click="goSearch"></image>
 			</view>
 		</view>
 
@@ -25,9 +25,9 @@
 				<scroll-view scroll-x="true" @scroll="scroll">
 					<view class="itemBg">
 						<view v-for="(item,index) in bannerArr" :key="index" class="item">
-							<image src="../../static/logo.png" mode="" class="swpImg"></image>
-							<view class="title">文字标题</view>
-							<view class="title2">小标题</view>
+							<image :src="item.logoImg" mode="" class="swpImg"></image>
+							<view class="title">{{item.title}}</view>
+							<view class="title2" @click="goTopTab(item)">{{item.categoryName}}</view>
 
 						</view>
 					</view>
@@ -42,11 +42,11 @@
 				<!-- 头 -->
 				<view class="fenTop">
 					<view class="leftTop">
-						<view class="tuijian">天空飘来5个字</view>
-						<view class="sum">共9999篇文章</view>
+						<view class="tuijian">{{item.name}}</view>
+						<view class="sum">共{{item.count}}篇文章</view>
 					</view>
 					<view class="rightTop">
-						<view class="">查看全部
+						<view class="" @click="goTopTab(item)">查看全部
 							<image src="../../static/mobile/icon_arrow@2x.png" mode=""
 								style="width: 11rpx; height: 18rpx; margin-left: 10rpx;"></image>
 						</view>
@@ -54,9 +54,9 @@
 				</view>
 				<!-- item -->
 				<view class="itemBg">
-					<view v-for="(item,index) in bannerArr" :key="index" class="twoItem">
-						<image src="../../static/logo.png" mode="" class="img2"></image>
-						<view class="title">文字标题</view>
+					<view v-for="(item2,index2) in item.children" :key="index2" class="twoItem" @click="goList(item)">
+						<image :src="item.logoImg" mode="" class="img2"></image>
+						<view class="title">{{item2.title}}</view>
 
 
 					</view>
@@ -66,10 +66,18 @@
 			</view>
 		</view>
 
+		
+		
+		<!-- 下拉菜单 -->
+		<view class="sift" v-show="showSift">
+			<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>
 </template>
 
@@ -77,22 +85,134 @@
 	export default {
 		data() {
 			return {
-				bannerArr: [1, 2, 3, 4, 5],
+				bannerArr: [],
 				scrollTop: 0,
 				old: {
 					scrollTop: 0
 				},
-				itemArr: [1, 2, 3, 4, 5, 6],
+				itemArr: [],
+				showSift:false,
+				siftData:[],
 			}
 		},
 		onLoad() {
-
+			this.getDetailData()
+			this.getSiftData()
 		},
-		methods: {
+		methods: {
+			goList(item){
+				
+				// 1分类2文章
+				if (item.type == 1) {
+					uni.navigateTo({
+						url:'list?topCode=' + item.Code + '&comment=' + item.Comment + '&topName=' + item.Title
+					})
+				}
+				if (item.type == 2) {
+					// uni.navigateTo({
+					// 	url:''
+					// })
+				}
+			},
+			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>
@@ -105,7 +225,7 @@
 		padding-bottom: 20rpx;
 
 	}
-
+	
 	.nav {
 		position: fixed;
 		left: 0;
@@ -208,7 +328,12 @@
 		padding: 3rpx 14rpx;
 		width: 138rpx;
 		margin-bottom: 10rpx;
-		/* text-align: center; */
+		text-align: center;
+		/* 隐藏文字显示 ...不换行 */
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		
 	}
 
 	.fenleiBg {
@@ -243,5 +368,28 @@
 	.img2 {
 		width: calc((100vw - 75rpx) / 2);
 		height: 226rpx;
+	}
+	
+	.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;
 	}
 </style>

pages/mobile/list.vue

@@ -0,0 +1,288 @@
+<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">{{topName}}</view>
+			<view class="rightView">
+				<image src="../../static/mobile/icon_search@2x.png" mode="" class="rightImg" style="margin-left: 40rpx;"
+					@click="goSearch"></image>
+			</view>
+		</view>
+
+		<!-- content -->
+		<view class="commend">
+			<view class="top">{{comment}}</view>
+
+		</view>
+
+		<!-- item -->
+
+		<view class="itemBg">
+			<view v-for="(item,index) in itemArr" :key="index" class="twoItem">
+				<image :src="item.LogoImg" mode="" class="img2"></image>
+				<view class="rightItem">
+					<view class="title">{{item.Title}}</view>
+					<view class="title2">{{item.Comment}}</view>
+				</view>
+			</view>
+		</view>
+
+
+		<!-- 上拉 加载更多 -->
+		<view class="noMore" v-if="noMoreShow">没有更多数据</view>
+		<!-- 无数据空白页 -->
+		<nodata v-if="itemArr.length==0"></nodata>
+
+	</view>
+</template>
+
+<script>
+	import nodata from '../../components/nodata/nodata.vue'
+	export default {
+		components: {
+			nodata,
+		},
+		data() {
+			return {
+				topName: '',
+				topCode: '',
+				comment: '',
+				page: 1,
+
+				
+				itemArr: [],
+				
+				noMoreShow: false,
+			}
+		},
+		onLoad(opt) {
+			console.log('opt',opt);
+			this.topName = opt.topName
+			this.topCode = opt.topCode
+			this.comment = opt.comment
+			this.page = 1
+			this.getItemData()
+			// uni.setNavigationBarTitle({
+			// 	title: this.topName
+			// })
+		},
+		methods: {
+			getItemData() {
+				uni.showLoading({
+					title: '加载中'
+				})
+				
+				let url = 'trainingOpenApi/groupPageData',
+					params = {
+						page: this.page,
+						limit: 10,
+						parentCode: this.topCode,
+						
+					}
+				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])
+					}
+
+
+
+					if (this.page == 1) {
+						this.itemArr = data.Items
+					} else {
+						this.itemArr = this.itemArr.concat(data.Items)
+					}
+					if (data.Items.length < 10) {
+						this.noMoreShow = true
+					} else {
+						this.noMoreShow = false
+					}
+					if (this.itemArr.length == 0) {
+						this.noMoreShow = false
+					}
+
+					
+
+				})
+			},
+			goSearch() {
+				uni.navigateTo({
+					url: 'search'
+				})
+			},
+			back() {
+				uni.navigateBack({
+
+				})
+			},
+			
+
+
+
+			// 下拉刷新 上拉加载更多
+			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: #FFFFFF;
+		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 {
+		position: fixed;
+		left: 0;
+		top: 90rpx;
+		width: calc(100vw - 50rpx);
+
+		background-color: #FFFFFF;
+
+		padding: 0 25rpx 30rpx;
+		z-index: 999;
+		height: 130rpx;
+
+	}
+
+	.top {
+		padding: 40rpx 0;
+		text-align: center;
+		height: 80rpx;
+		color: #999999;
+		font-size: 24rpx;
+
+		//超过固定行数 隐藏
+		display: -webkit-box;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		word-wrap: break-word;
+		white-space: normal !important;
+		-webkit-line-clamp: 3;
+		-webkit-box-orient: vertical;
+	}
+
+
+
+	
+
+	.itemBg {
+
+		background-color: #FFFFFF;
+		padding: 160rpx 25rpx 30rpx;
+
+	}
+
+	.twoItem {
+		display: flex;
+
+		background-color: #FFFFFF;
+		padding: 30rpx 0;
+		border-top: #eeeeee 2rpx solid;
+	}
+
+	.title {
+		font-size: 28rpx;
+		font-weight: bold;
+		color: #3c3c3c;
+
+	}
+
+	.title2 {
+
+		font-size: 24rpx;
+		font-weight: bold;
+		color: #999999;
+
+		//超过固定行数 隐藏
+		display: -webkit-box;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		word-wrap: break-word;
+		white-space: normal !important;
+		-webkit-line-clamp: 3;
+		-webkit-box-orient: vertical;
+	}
+
+
+	.img2 {
+		width: 240rpx;
+		height: 160rpx;
+	}
+
+	.rightItem {
+		margin-left: 30rpx;
+		width: calc(100vw - 300rpx);
+	}
+	.noMore {
+		text-align: center;
+		line-height: 50rpx;
+		color: #999999;
+		font-size: 28rpx;
+	}
+</style>

pages/mobile/search.vue

@@ -0,0 +1,198 @@
+<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">
+				
+			</view>
+		</view>
+
+		<!-- content -->
+		<view class="commend">
+			<!-- 搜索 -->
+			<view class="searchBoxBg">
+				<searchBox placeholder="请输入搜索内容" @search='search($event)'></searchBox>
+			</view>
+			<view class="top">为你找到“这是输入的搜索内容”相关结果共0条</view>
+
+		</view>
+
+		<!-- item -->
+
+		<view class="itemBg">
+			<view v-for="(item,index) in bannerArr" :key="index" class="twoItem">
+				<image src="../../static/logo.png" mode="" class="img2"></image>
+				<view class="rightItem">
+					<view class="title">文字标题</view>
+					<view class="title2">摘要</view>
+				</view>
+			</view>
+		</view>
+
+
+
+
+
+
+
+
+
+
+	</view>
+</template>
+
+<script>
+	import searchBox from '@/components/searchBox/searchBox.vue'
+	export default {
+		components: {
+			searchBox
+		},
+	
+		data() {
+			return {
+				searchValue: '',
+				
+				bannerArr: [1, 2, 3, 4, 5, 6],
+				
+			}
+		},
+		onLoad() {
+
+		},
+		methods: {
+			back() {
+				uni.navigateBack({
+
+				})
+			},
+			search(val) {
+				// console.log(val);
+				this.searchValue = val
+				// this.page = 1
+				// this.getData()
+			},
+			
+		}
+	}
+</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 {
+		position: fixed;
+		left: 0;
+		top: 90rpx;
+		width: calc(100vw - 50rpx);
+
+		background-color: #FFFFFF;
+
+		padding: 0 25rpx 30rpx;
+		z-index: 999;
+		height: 180rpx;
+	}
+	
+
+	.top {
+		padding: 20rpx 0;
+		text-align: left;
+		font-size: 24rpx;
+		color: #999999;
+	}
+
+
+
+	
+	.itemBg{
+		
+		background-color: #FFFFFF;
+		padding: 180rpx 25rpx 30rpx;
+		
+	}
+	
+	.twoItem {
+		display: flex;
+		background-color: #FFFFFF;
+		padding: 30rpx 0;
+		border-top: #eeeeee 2rpx solid;
+	}
+
+	.title {
+		font-size: 28rpx;
+		font-weight: bold;
+		color: #3c3c3c;
+
+	}
+
+	.title2 {
+
+		font-size: 24rpx;
+		font-weight: bold;
+		color: #999999;
+		/* 隐藏文字显示 ...不换行 */
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		margin: 14rpx 0;
+	}
+
+
+	.img2 {
+		width: 240rpx;
+		height: 160rpx;
+	}
+
+	.rightItem {
+		margin-left: 30rpx;
+	}
+</style>

pages/mobile/topTab.vue

@@ -0,0 +1,369 @@
+<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">{{topName}}</view>
+			<view class="rightView">
+				<image src="../../static/mobile/icon_search@2x.png" mode="" class="rightImg" style="margin-left: 40rpx;"
+					@click="goSearch"></image>
+			</view>
+		</view>
+
+		<!-- content -->
+		<view class="commend">
+			<view class="top">{{comment}}</view>
+
+			<!-- tab -->
+			<view class="scrollBg">
+				<scroll-view scroll-x="true" @scroll="scroll">
+					<view class="tabBg">
+						<view v-for="(item,index) in bannerArr" :key="index" @click="tabClick(index)">
+							<view class="tabTitle" :class="{tabActive:tabIndex==index}">{{item.name}}</view>
+
+						</view>
+					</view>
+				</scroll-view>
+			</view>
+
+		</view>
+
+		<!-- item -->
+
+		<view class="itemBg">
+			<view v-for="(item,index) in itemArr" :key="index" class="twoItem" @click="goList(item)">
+				<image :src="item.LogoImg" mode="" class="img2"></image>
+				<view class="rightItem">
+					<view class="title">{{item.Title}}</view>
+					<view class="title2">{{item.Comment}}</view>
+				</view>
+			</view>
+		</view>
+
+
+		<!-- 上拉 加载更多 -->
+		<view class="noMore" v-if="noMoreShow">没有更多数据</view>
+		<!-- 无数据空白页 -->
+		<nodata v-if="itemArr.length==0"></nodata>
+
+	</view>
+</template>
+
+<script>
+	import nodata from '../../components/nodata/nodata.vue'
+	export default {
+		components: {
+			nodata,
+		},
+		data() {
+			return {
+				topName: '',
+				topCode: '',
+				comment: '',
+				page: 1,
+
+				bannerArr: [],
+				scrollTop: 0,
+				old: {
+					scrollTop: 0
+				},
+				itemArr: [],
+				tabIndex: 0,
+				noMoreShow: false,
+			}
+		},
+		onLoad(opt) {
+			this.topName = opt.topName
+			this.topCode = opt.topCode
+			this.comment = opt.comment
+			this.page = 1
+			this.getItemData()
+			// uni.setNavigationBarTitle({
+			// 	title: this.topName
+			// })
+		},
+		methods: {
+			goList(item){
+				
+				uni.navigateTo({
+					url:'list?topCode=' + item.Code + '&comment=' + item.Comment + '&topName=' + item.Title
+				})
+				return;
+				
+				// 1分类2文章
+				if (item.type == 1) {
+					uni.navigateTo({
+						url:'list?topCode=' + item.Code + '&comment=' + item.Comment + '&topName=' + item.Title
+					})
+				}
+				if (item.type == 2) {
+					// uni.navigateTo({
+					// 	url:''
+					// })
+				}
+			},
+			getItemData() {
+				uni.showLoading({
+					title: '加载中'
+				})
+				let parentCode;
+				if (this.tabIndex == 0) {
+					parentCode = this.topCode
+				} else {
+					parentCode = this.bannerArr[this.tabIndex].code
+				}
+				let url = '/trainingOpenApi/categoryPageData',
+					params = {
+						page: this.page,
+						limit: 10,
+						parentCode: parentCode,
+						topCode: this.topCode
+					}
+				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])
+					}
+
+
+
+					if (this.page == 1) {
+						this.itemArr = data.Items
+					} else {
+						this.itemArr = this.itemArr.concat(data.Items)
+					}
+					if (data.Items.length < 10) {
+						this.noMoreShow = true
+					} else {
+						this.noMoreShow = false
+					}
+					if (this.itemArr.length == 0) {
+						this.noMoreShow = false
+					}
+
+					this.bannerArr = data.dynamicCol
+					let dic = {
+						code: this.topCode,
+						name: '全部',
+					}
+					this.bannerArr.splice(0, 0, dic)
+
+				})
+			},
+			goSearch() {
+				uni.navigateTo({
+					url: 'search'
+				})
+			},
+			back() {
+				uni.navigateBack({
+
+				})
+			},
+			scroll: function(e) {
+				console.log(e)
+				this.old.scrollTop = e.detail.scrollTop
+			},
+			tabClick(num) {
+				this.tabIndex = num;
+				this.page = 1;
+				this.getItemData()
+			},
+
+
+
+			// 下拉刷新 上拉加载更多
+			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: #FFFFFF;
+		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 {
+		position: fixed;
+		left: 0;
+		top: 90rpx;
+		width: calc(100vw - 50rpx);
+
+		background-color: #FFFFFF;
+
+		padding: 0 25rpx 30rpx;
+		z-index: 999;
+		height: 300rpx;
+
+	}
+
+	.top {
+		padding: 40rpx 0;
+		text-align: center;
+		height: 160rpx;
+		color: #999999;
+		font-size: 24rpx;
+
+		//超过固定行数 隐藏
+		display: -webkit-box;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		word-wrap: break-word;
+		white-space: normal !important;
+		-webkit-line-clamp: 3;
+		-webkit-box-orient: vertical;
+	}
+
+
+
+	.scrollBg {
+		background-color: #FFFFFF;
+
+	}
+
+	.scroll-view {
+		white-space: nowrap;
+	}
+
+	.tabBg {
+		display: flex;
+		margin-top: 0;
+		margin-bottom: 0;
+	}
+
+
+
+	.tabTitle {
+		margin-right: 60rpx;
+		font-size: 30rpx;
+		color: #3c3c3c;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		height: 60rpx;
+		line-height: 60rpx;
+	}
+
+	.tabActive {
+		color: #FF4F00;
+	}
+
+	.itemBg {
+
+		background-color: #FFFFFF;
+		padding: 300rpx 25rpx 30rpx;
+
+	}
+
+	.twoItem {
+		display: flex;
+
+		background-color: #FFFFFF;
+		padding: 30rpx 0;
+		border-top: #eeeeee 2rpx solid;
+	}
+
+	.title {
+		font-size: 28rpx;
+		font-weight: bold;
+		color: #3c3c3c;
+
+	}
+
+	.title2 {
+
+		font-size: 24rpx;
+		font-weight: bold;
+		color: #999999;
+
+		//超过固定行数 隐藏
+		display: -webkit-box;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		word-wrap: break-word;
+		white-space: normal !important;
+		-webkit-line-clamp: 3;
+		-webkit-box-orient: vertical;
+	}
+
+
+	.img2 {
+		width: 240rpx;
+		height: 160rpx;
+	}
+
+	.rightItem {
+		margin-left: 30rpx;
+		width: calc(100vw - 300rpx);
+	}
+	.noMore {
+		text-align: center;
+		line-height: 50rpx;
+		color: #999999;
+		font-size: 28rpx;
+	}
+</style>