课程列表

api/api.ts

@@ -28,6 +28,10 @@ export default {
 	//注册接口
 	register(params){
 		return request(`${cffpURL}/user/register`, "POST", params)
+	},
+	// 课程查询列表接口
+	courseList(params){
+		return request(`${cffpURL}/course/list`,'POST',params)
 	}
 	
 }

components/courselist/courselist.vue

 <template>
 	<view>
-		课程列表
+		<h4 v-if="cffpCourseInfos.length<=0" class="noLists">暂无课程列表</h4>
+		<ul v-if="cffpCourseInfos.length>0">
+			<li v-for="item in cffpCourseInfos" :key="item.fileId">
+				<view class="thumbnailBox">
+					<img src="" alt="">
+				</view>
+				<view class="courseDetailBox">
+					<h4>{{item.fileTitle}}</h4>
+					<view class="summaryBox">
+						<text>{{item.fileSynopsis}}</text>
+					</view>
+					<view class="dataBox">
+						<strong>￥{{item.coursePrice}}</strong>
+						<text>{{item.salesNumber}}人购买</text>
+					</view>
+					<view class="tagListBox">
+						<view class="tagItem">{{item.fileLecturerName}}</view>
+						<view class="tagItem">{{item.fileLecturerRanks}}</view>
+					</view>
+				</view>
+			</li>
+		</ul>
 	</view>
 </template>
 
 <script>
+	import api from "../../api/api";
 	export default{
 		data(){
-			return;
+			return{
+				cffpCourseInfos:[]
+			}
 		},
 		name:'courselist',
+		components:{
+		},
+		onLoad(){
+			
+		},
+		methods:{
+			courseList(){
+				api.courseList().then(res=>{
+					if(res['success']){
+						this.cffpCourseInfos = res['data']['cffpCourseInfos'];
+					}else{
+						uni.showToast({
+							title: res['message'],
+							duration: 2000,
+							icon: 'none'					
+						})
+					}
+				})
+			}
+		}
 	}
 </script>
 
-<style>
+<style lang="scss">
+	ul,li{
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		display: flex;
+	}
+	ul{
+		flex-direction: column;
+	}
+	li{
+		background-color: #fff;
+		border-radius: 20rpx;
+		margin-bottom: 10rpx;
+		padding: 10rpx;
+	}
+	.noLists{
+		position: absolute;
+		left: 50%;
+		top: 50%;
+		transform: translateX(-50%);
+		
+	}
+	.thumbnailBox{
+		width: 200rpx;
+		height: 200rpx;
+		background-color: #888;
+		margin-right: 26rpx;
+		img{
+			max-width: 100%;
+			height: auto;
+		}
+	}
+	.courseDetailBox{
+		width: 100%;
+		color: #333;
+		h4{
+			font-size: 32rpx;
+		}
+		.summaryBox{
+			font-size: 24rpx;
+			margin: 10rpx 0;
+			text{
+				margin-right: 20rpx;
+			}
+		}
+		.dataBox{
+			strong{
+				color: #F15A1F;
+				font-size: 30rpx;
+				margin-right: 20rpx;
+			}
+			text{
+				font-size: 28rpx;
+			}
+		}
+		.tagListBox{
+			display: flex;
+			.tagItem{
+				color: #20279B;
+				font-size: 28rpx;
+				border-radius: 20rpx;
+				border-top-left-radius: 0;
+				border-bottom-right-radius: 0;
+				padding: 10rpx 18rpx;
+				border: 1px solid #20279B;
+				margin-right: 20rpx;
+			}
+		}
+	}
 </style>
\ No newline at end of file

pages.json

@@ -14,13 +14,13 @@
 				"navigationBarTitleText": "CFFP"
 			}
 		},
-		// {
-		// 	"path": "pages/index/index",
-		// 	"style": {
-		// 		"topWindow": false,
-		// 		"navigationBarTitleText": "CFFP"
-		// 	}
-		// },
+		{
+			"path": "components/courselist/courselist",
+			"style": {
+				"topWindow": false,
+				"navigationBarTitleText": "CFFP"
+			}
+		}
 	],
 	// "tabBar": {
 	//         "color": "#7A7E83", // tab 上的文字默认颜色

util/interceptor.ts

 import api from "../api/api";
-import {baseURL,apiURL,sfpURL} from "../environments/environment";
+// import {baseURL,apiURL,cffpURL} from "../environments/environment";
 // 白名单，不需要携带token就允许被访问的接口
 const whiteApiList = [`/api/authorize/obtainToken`,`/api/authorize/checkToken`]