1. 详情

pages.json

@@ -1,5 +1,7 @@
 {
 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+		
+		
 		{
 			"path": "pages/index/index",
 			"style": {
@@ -40,7 +42,25 @@
 			}
 
 		}
-	],
+	    // {
+	    //     "path" : "pages/mobile/demo",
+	    //     "style" :                                                                                    
+	    //     {
+	    //         "navigationBarTitleText": "demo",
+	    //         "enablePullDownRefresh": false
+	    //     }
+	        
+	    // },
+        ,{
+            "path" : "pages/mobile/detail",
+            "style" :                                                                                    
+            {
+                "navigationStyle": "custom"
+                
+            }
+            
+        }
+    ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "门店学院",

pages/mobile/detail.vue

@@ -0,0 +1,341 @@
+<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="top">{{detailData.title}}</view>
+			<view class="time">{{detailData.createTime}}</view>
+		</view>
+
+
+		<rich-text :nodes="couContent"></rich-text>
+
+
+		<!-- item -->
+
+		<view class="itemBg" v-if="itemArr.length != 0">
+			<view v-for="(item,index) in itemArr" :key="index" class="twoItem"
+				:class="{grayLine:index < itemArr.length-1}">
+				<view class="itemLeftView">
+					<image src="../../static/mobile/icon_fujian.png" mode="" class="img2"></image>
+					<view class="title">{{item.fileName}}</view>
+				</view>
+
+				<view class="title2" @click="downLoad(item.fileUrl)">下载</view>
+
+			</view>
+		</view>
+
+		<view class="category">{{detailData.name}}</view>
+
+
+	</view>
+</template>
+
+<script>
+	export default {
+
+		data() {
+			return {
+				id: '',
+				detailData: {},
+				couContent: '',
+				itemArr: [],
+			}
+		},
+		onLoad(opt) {
+			console.log('opt', opt);
+			this.id = opt.id
+
+			this.getDetailData()
+			// uni.setNavigationBarTitle({
+			// 	title: this.topName
+			// })
+		},
+		methods: {
+
+			// 下载文件
+
+			downLoad(urlStr) {
+				console.log('urls', urlStr);
+				// uni.showLoading({
+				// 	title:'下载中'
+				// })
+				
+				// let dload = document.createElement("a");
+				
+				//   dload.download = '';// 设置下载的文件名，默认是'下载'
+				
+				//   dload.href = urlStr;
+				
+				//   document.body.appendChild(dload);
+				
+				//   dload.click();
+				
+				//   dload.remove(); // 下载之后把创建的元素删除
+				
+				   
+				// window.open(urlStr)
+				    
+				// window.location.href='urlStr'
+				
+				 let url = encodeURI(urlStr); //注意中文文件名的网络地址需要encodeURI
+				uni.downloadFile({
+					url: url,
+					success: (res) => {
+						
+						if (res.statusCode === 200) {
+							uni.saveFile({
+								tempFilePath: res.tempFilePath,
+								success: (resData) => {
+									uni.openDocument({
+										filePath: resData.savedFilePath,
+									});
+								},
+							});
+							
+						}
+					}
+					
+
+				});
+			},
+			getDetailData() {
+				uni.showLoading({
+					title: '加载中'
+				})
+
+				let url = '/trainingOpenApi/articleDetail',
+					params = {
+						id: this.id,
+					}
+				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
+
+					if (this.detailData.contents) {
+						this.couContent = this.detailData.contents.replace(
+								/<p([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<p')
+							.replace(/<p>/ig, '<p style="font-size: 15px; line-height: 25px;">')
+							.replace(/<img([\s\w"-=\/\.:;]+)((?:(height="[^"]+")))/ig, '<img$1')
+							.replace(/<img([\s\w"-=\/\.:;]+)((?:(width="[^"]+")))/ig, '<img$1')
+							.replace(/<img([\s\w"-=\/\.:;]+)((?:(style="[^"]+")))/ig, '<img$1')
+							.replace(/<img([\s\w"-=\/\.:;]+)((?:(alt="[^"]+")))/ig, '<img$1')
+							.replace(/<img([\s\w"-=\/\.:;]+)/ig, '<img style="width: 100%;" $1');
+					}
+
+					this.itemArr = this.detailData.fileList
+
+				})
+			},
+
+			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: 10rpx;
+		margin: 0 24rpx;
+	}
+
+	.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;
+		text-align: center;
+	}
+
+	.leftView {
+		width: 30%;
+	}
+
+
+	.rightView {
+		width: 30%;
+		display: flex;
+		justify-content: flex-end;
+		padding-right: 24rpx;
+	}
+
+	.rightImg {
+		width: 40rpx;
+		height: 40rpx;
+
+	}
+
+	.commend {
+
+
+		background-color: #FFFFFF;
+
+		padding-bottom: 30rpx;
+
+		height: 220rpx;
+		border-bottom: #EEEEEE 1rpx solid;
+	}
+
+	.top {
+		padding-top: 40rpx;
+		text-align: left;
+		height: 80rpx;
+		color: #3C3C3C;
+		font-size: 32rpx;
+		font-weight: bold;
+
+		//超过固定行数 隐藏
+		display: -webkit-box;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		word-wrap: break-word;
+		white-space: normal !important;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+		line-height: 20px;
+		margin-bottom: 20rpx;
+	}
+
+	.time {
+
+		font-size: 24rpx;
+		color: #999999;
+
+		height: 60rpx;
+		line-height: 60rpx;
+	}
+
+
+
+	.itemBg {
+
+		background-color: #FFFFFF;
+		border-radius: 10rpx;
+		border: #eeeeee 1rpx solid;
+	}
+
+	.twoItem {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		background-color: #FFFFFF;
+		margin: 0 15rpx;
+		padding-top: 24rpx;
+		padding-bottom: 30rpx;
+
+	}
+
+	.grayLine {
+		border-bottom: #EEEEEE 1rpx solid;
+	}
+
+	.itemLeftView {
+		display: flex;
+		align-items: center;
+		width: 80%;
+	}
+
+	.title {
+		font-size: 28rpx;
+		color: #333333;
+		width: 90%;
+	}
+
+	.title2 {
+		color: #FFFFFF;
+		font-size: 26rpx;
+		background-color: #3F90F7;
+		border-radius: 6rpx;
+		width: 90rpx;
+		height: 52rpx;
+		line-height: 52rpx;
+		text-align: center;
+		margin-right: 15rpx;
+	}
+
+
+	.img2 {
+		width: 28rpx;
+		height: 28rpx;
+		margin-right: 6rpx;
+	}
+
+	.category {
+		background: rgba(63, 144, 247, 0.1);
+		font-size: 22rpx;
+		color: #3F90F7;
+		height: 36rpx;
+		line-height: 36rpx;
+		border-radius: 18rpx;
+		padding: 3rpx 14rpx;
+		width: 138rpx;
+		margin: 30rpx 0;
+		text-align: center;
+		/* 隐藏文字显示 ...不换行 */
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+</style>

pages/mobile/index.vue

@@ -13,7 +13,7 @@
 		</view>
 
 		<!-- 推荐 -->
-		<view class="commend">
+		<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>
@@ -54,8 +54,8 @@
 				</view>
 				<!-- item -->
 				<view class="itemBg">
-					<view v-for="(item2,index2) in item.children" :key="index2" class="twoItem" @click="goList(item)">
-						<image :src="item.logoImg" mode="" class="img2"></image>
+					<view v-for="(item2,index2) in item.children" :key="index2" v-if="index2<2" class="twoItem" @click="goList(item)">
+						<image :src="item2.logoImg" mode="" class="img2"></image>
 						<view class="title">{{item2.title}}</view>
 
 
@@ -105,13 +105,13 @@
 				// 1分类2文章
 				if (item.type == 1) {
 					uni.navigateTo({
-						url:'list?topCode=' + item.Code + '&comment=' + item.Comment + '&topName=' + item.Title
+						url:'list?topCode=' + item.Code + '&comment=' + item.Comment + '&topName=' + item.Name
 					})
 				}
 				if (item.type == 2) {
-					// uni.navigateTo({
-					// 	url:''
-					// })
+					uni.navigateTo({
+						url:'detail?id=' + item.ID
+					})
 				}
 			},
 			goTopTab(item){
@@ -292,18 +292,21 @@
 	}
 
 	.itemBg {
-		display: flex;
+		display: flex;
+		
 	}
 
 	.item {
-		width: 300rpx;
+		
+		width: calc((100vw - 75rpx) / 2);
 		margin-right: 25rpx;
 	}
 
 	.swpImg {
-		width: 300rpx;
-		height: 200rpx;
-		border-radius: 10rpx;
+		
+		border-radius: 10rpx; 
+		width: calc((100vw - 75rpx) / 2);
+		height: 226rpx;
 	}
 
 	.title {
@@ -367,7 +370,8 @@
 
 	.img2 {
 		width: calc((100vw - 75rpx) / 2);
-		height: 226rpx;
+		height: 226rpx;
+		border-radius: 10rpx;
 	}
 	
 	.sift{

pages/mobile/list.vue

@@ -23,7 +23,7 @@
 		<!-- item -->
 
 		<view class="itemBg">
-			<view v-for="(item,index) in itemArr" :key="index" class="twoItem">
+			<view v-for="(item,index) in itemArr" :key="index" class="twoItem" @click="goDetail(item)">
 				<image :src="item.LogoImg" mode="" class="img2"></image>
 				<view class="rightItem">
 					<view class="title">{{item.Title}}</view>
@@ -41,11 +41,11 @@
 	</view>
 </template>
 
-<script>
-	import nodata from '../../components/nodata/nodata.vue'
-	export default {
-		components: {
-			nodata,
+<script>
+	import nodata from '../../components/nodata/nodata.vue'
+	export default {
+		components: {
+			nodata,
 		},
 		data() {
 			return {
@@ -54,35 +54,40 @@
 				comment: '',
 				page: 1,
 
-				
+
 				itemArr: [],
-				
+
 				noMoreShow: false,
 			}
 		},
-		onLoad(opt) {
-			console.log('opt',opt);
+		onLoad(opt) {
+			console.log('opt', opt);
 			this.topName = opt.topName
 			this.topCode = opt.topCode
-			this.comment = opt.comment
+			this.comment = opt.comment.length > 0 ? opt.comment : '暂无'
 			this.page = 1
 			this.getItemData()
 			// uni.setNavigationBarTitle({
 			// 	title: this.topName
 			// })
 		},
-		methods: {
+		methods: {
+			goDetail(item){
+				uni.navigateTo({
+					url:'detail?id=' + item.ID
+				})
+			},
 			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();
@@ -101,17 +106,17 @@
 						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
+					if (data.Items.length < 10) {
+						this.noMoreShow = true
+					} else {
+						this.noMoreShow = false
+					}
+					if (this.itemArr.length == 0) {
+						this.noMoreShow = false
 					}
 
-					
+
 
 				})
 			},
@@ -125,7 +130,7 @@
 
 				})
 			},
-			
+
 
 
 
@@ -206,35 +211,37 @@
 
 		padding: 0 25rpx 30rpx;
 		z-index: 999;
-		height: 130rpx;
+		height: 140rpx;
 
 	}
 
 	.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;
+		padding-top: 40rpx;
+		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: 2;
+		-webkit-box-orient: vertical;
+		line-height: 20px;
+		margin-bottom: 20rpx;
 	}
 
 
 
-	
+
 
 	.itemBg {
 
 		background-color: #FFFFFF;
-		padding: 160rpx 25rpx 30rpx;
+		padding: 140rpx 25rpx 30rpx;
 
 	}
 
@@ -272,17 +279,19 @@
 
 	.img2 {
 		width: 240rpx;
-		height: 160rpx;
+		height: 160rpx;
+		border-radius: 10rpx;
 	}
 
 	.rightItem {
 		margin-left: 30rpx;
 		width: calc(100vw - 300rpx);
-	}
-	.noMore {
-		text-align: center;
-		line-height: 50rpx;
-		color: #999999;
-		font-size: 28rpx;
+	}
+
+	.noMore {
+		text-align: center;
+		line-height: 50rpx;
+		color: #999999;
+		font-size: 28rpx;
 	}
 </style>

pages/mobile/search.vue

@@ -9,75 +9,126 @@
 			</view>
 			<view class="navTitle">搜索</view>
 			<view class="rightView">
-				
+
 			</view>
 		</view>
 
 		<!-- content -->
-		<view class="commend">
-			<!-- 搜索 -->
-			<view class="searchBoxBg">
-				<searchBox placeholder="请输入搜索内容" @search='search($event)'></searchBox>
+		<view class="commend">
+			<!-- 搜索 -->
+			<view class="searchBoxBg">
+				<searchBox placeholder="请输入搜索内容" @search='search($event)'></searchBox>
 			</view>
-			<view class="top">为你找到“这是输入的搜索内容”相关结果共0条</view>
+			<view class="top">为你找到“{{searchValue}}”相关结果共{{TotalSize}}条</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 v-for="(item,index) in itemArr" :key="index" class="twoItem" @click="goDetail(item)">
+				<image :src="item.LogoImg" mode="" class="img2"></image>
 				<view class="rightItem">
-					<view class="title">文字标题</view>
-					<view class="title2">摘要</view>
+					<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>
+<script>
 	import searchBox from '@/components/searchBox/searchBox.vue'
-	export default {
-		components: {
-			searchBox
+	import nodata from '../../components/nodata/nodata.vue'
+	export default {
+		components: {
+			searchBox,
+			nodata
 		},
+	
 	
 		data() {
-			return {
+			return {
 				searchValue: '',
-				
-				bannerArr: [1, 2, 3, 4, 5, 6],
-				
+				page:1,
+				itemArr: [],
+				TotalSize:'',
 			}
 		},
 		onLoad() {
 
 		},
-		methods: {
+		methods: {
+			goDetail(item){
+				uni.navigateTo({
+					url:'detail?id=' + item.ID
+				})
+			},
 			back() {
 				uni.navigateBack({
 
 				})
 			},
-			search(val) {
-				// console.log(val);
-				this.searchValue = val
-				// this.page = 1
-				// this.getData()
+			search(val) {
+				// console.log(val);
+				this.searchValue = val
+				this.page = 1
+				this.getItemData()
 			},
-			
+			getItemData() {
+				uni.showLoading({
+					title: '加载中'
+				})
+			
+				let url = 'trainingOpenApi/searchPageData',
+					params = {
+						page: this.page,
+						limit: 10,
+						title: this.searchValue,
+			
+					}
+				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.TotalSize = data.TotalSize
+			
+			
+					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
+					}
+			
+			
+			
+				})
+			},
+
 		}
 	}
 </script>
@@ -140,26 +191,26 @@
 		padding: 0 25rpx 30rpx;
 		z-index: 999;
 		height: 180rpx;
-	}
-	
+	}
+
 
 	.top {
 		padding: 20rpx 0;
-		text-align: left;
-		font-size: 24rpx;
+		text-align: left;
+		font-size: 24rpx;
 		color: #999999;
 	}
 
 
 
-	
-	.itemBg{
-		
-		background-color: #FFFFFF;
-		padding: 180rpx 25rpx 30rpx;
-		
-	}
-	
+
+	.itemBg {
+
+		background-color: #FFFFFF;
+		padding: 180rpx 25rpx 30rpx;
+		
+	}
+
 	.twoItem {
 		display: flex;
 		background-color: #FFFFFF;
@@ -189,10 +240,17 @@
 
 	.img2 {
 		width: 240rpx;
-		height: 160rpx;
+		height: 160rpx;
+		border-radius: 10rpx;
 	}
 
-	.rightItem {
-		margin-left: 30rpx;
+	.rightItem {
+		margin-left: 30rpx;
+	}
+	.noMore {
+		text-align: center;
+		line-height: 50rpx;
+		color: #999999;
+		font-size: 28rpx;
 	}
 </style>

pages/mobile/topTab.vue

@@ -79,7 +79,7 @@
 		onLoad(opt) {
 			this.topName = opt.topName
 			this.topCode = opt.topCode
-			this.comment = opt.comment
+			this.comment = opt.comment.length > 0 ? opt.comment : '暂无'
 			this.page = 1
 			this.getItemData()
 			// uni.setNavigationBarTitle({
@@ -89,21 +89,16 @@
 		methods: {
 			goList(item){
 				
-				uni.navigateTo({
-					url:'list?topCode=' + item.Code + '&comment=' + item.Comment + '&topName=' + item.Title
-				})
-				return;
-				
 				// 1分类2文章
-				if (item.type == 1) {
+				if (item.Type == 1) {
 					uni.navigateTo({
-						url:'list?topCode=' + item.Code + '&comment=' + item.Comment + '&topName=' + item.Title
+						url:'list?topCode=' + item.Code + '&comment=' + item.Comment + '&topName=' + item.Name
 					})
 				}
-				if (item.type == 2) {
-					// uni.navigateTo({
-					// 	url:''
-					// })
+				if (item.Type == 2) {
+					uni.navigateTo({
+						url:'detail?id=' + item.ID
+					})
 				}
 			},
 			getItemData() {
@@ -258,14 +253,14 @@
 
 		padding: 0 25rpx 30rpx;
 		z-index: 999;
-		height: 300rpx;
+		height: 220rpx;
 
 	}
 
 	.top {
-		padding: 40rpx 0;
+		padding-top: 40rpx;
 		text-align: center;
-		height: 160rpx;
+		height: 80rpx;
 		color: #999999;
 		font-size: 24rpx;
 
@@ -275,8 +270,10 @@
 		text-overflow: ellipsis;
 		word-wrap: break-word;
 		white-space: normal !important;
-		-webkit-line-clamp: 3;
-		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+		line-height: 20px;
+		margin-bottom: 20rpx;
 	}
 
 
@@ -315,7 +312,7 @@
 	.itemBg {
 
 		background-color: #FFFFFF;
-		padding: 300rpx 25rpx 30rpx;
+		padding: 220rpx 25rpx 30rpx;
 
 	}
 
@@ -353,7 +350,8 @@
 
 	.img2 {
 		width: 240rpx;
-		height: 160rpx;
+		height: 160rpx;
+		border-radius: 10rpx;
 	}
 
 	.rightItem {