首页推荐接口对接

api/phase2/index.js

@@ -39,11 +39,31 @@ const articlelist=function (type){
 const courselist=function (data){
   return ajax.post('/xboe/portal/index/courselist',data);
 }
+// 移动端首页课程
+const mobileIndex=function(data){return ajax.post('/xboe/portal/index/mobile-courseindex',data);}
+/*
+评分榜
+@param num 要几条传几条 不传默认五条
+ */
+const scorelist=function(num,p){
+	return ajax.get(`/xboe/m/course/portal/score-list?num=${num}&index=${p}`);
+}
+/**首页查询问答
+ * pageSize
+ * orderField
+ * orderAsc
+*/
+const indexList=function(query) {
+    return ajax.post('/xboe/m/qa/question/query-random',query);
+}
 
 export default {
   cases,
   articleViews,
   qaAnswers,
   articlelist,
-  courselist
+  courselist,
+  mobileIndex,
+  scorelist,
+  indexList
 }

components/author-info/author-info.vue

@@ -1,17 +1,17 @@
 <template>
 	<view class="item-author" style="display: flex;line-height: 25px;">
 		<view>
-			<u-avatar v-if="avatar && avatar!=''" shape="circle" :size="20" :src="fileUrl+avatar" ></u-avatar>
+			<u-avatar v-if="avatar && avatar!=''" shape="circle" :size="width" :src="fileUrl+avatar" ></u-avatar>
 			<!-- <u-avatar v-else :size="25" icon="account" shape="square"></u-avatar> -->
 			<view  v-else>
 			   <view v-if="sex == null" class="peo"></view>
-			   <view v-else>
+			   <view v-else :style="{width:width,height:height}">
 			   	  <view class="peo" v-if="sex === 1 "><image src="../../static/images/man.png" alt=""></view>
 			   	  <view class="peo" v-else><image src="../../static/images/woman.png" alt=""></view>
 			   </view>
 			 </view>
 		</view>
-		<view style="padding-left:16upx;padding-top: 4upx;font-size: 28upx;color: #666666;">{{name}}</view>
+		<view class="author-name">{{name}}</view>
 		<!-- <view v-if="showInfo && info!=''" style="padding-left: 10upx;padding-top: 10upx;">({{info}})</view> -->
 		<!-- ({{info}}) -->
 	</view>
@@ -43,7 +43,15 @@
 			sex:{
 				type:Number,
 				default:null
-			}
+			},
+			width:{
+				type:String,
+				default:'20px'
+			},
+			height:{
+				type:String,
+				default:'20px'
+			},
 		},
 		data(){
 			return {
@@ -88,8 +96,8 @@
 
 <style lang="scss" scoped>
 	.peo{
-		width: 25px;
-		height: 25px;
+		width: 100%;
+		height: 100%;
 		image{
 			width: 100%;
 			height: 100%;
@@ -114,5 +122,11 @@
 		font-size: 14upx;
 		display: flex;
 		align-items: center;
+		.author-name{
+			padding-left:16upx;
+			padding-top: 4upx;
+			font-size: 28upx;
+			color: #666666;
+		}
 	}
 </style>

components/recommend-index/recommend-index.vue

@@ -7,25 +7,28 @@
 			<view class="recommend-index-title">
 				<text class="title-line"></text>
 				热门课程推荐
-				<text class="tetle-text">查看更多</text>
+				<!-- <text class="tetle-text">查看更多</text> -->
 			</view>
 			<view class="course-re-list">
-				<view class="course-re-index" v-for="course in 6">
+				<view class="course-re-index" v-for="course in courseDataList" :key="course.id" @click="toCourseDetail(course)">
 					<view class="course-img">
 						<text class="img-score">
 							<image style="width:28upx;height:28upx;margin-right: 6upx;" src="../../static/images/icon/index-start.png" mode=""></image>
-							4.9分</text>
-						<image style="width: 100%;height:100%;border-radius: 16upx;" src="../../static/images/course.png" mode=""></image>
+							{{converToScore(course.score)}}分</text>
+							<course-image :course="course" width="332upx" height="192upx"></course-image>
+						<!-- <image style="width: 100%;height:100%;border-radius: 16upx;" src="../../static/images/course.png" mode=""></image> -->
 					</view>
 					<view class="course-title">
-						零基础后期课程
+						{{course.name}}
 					</view>
 					<view class="course-text">
-						京小方 | 800+人已学
+						{{course.sysCreateBy}} | {{course.studys}}人已学
 					</view>
 					<view class="course-type">
-						<text class="type-index">通用力</text>
-						<text class="type-index">产品经理</text>
+						<!-- <text class="type-index">通用力</text>
+						<text class="type-index">产品经理</text> -->
+						<text class="type-index" v-if="sysTypeName(course.sysType1) != ''">{{sysTypeName(course.sysType1)}}</text>
+						<text class="type-tow" v-if="sysTypeName(course.sysType2) != ''">{{sysTypeName(course.sysType2)}}</text>
 					</view>
 				</view>
 			</view>
@@ -40,36 +43,36 @@
 			</view>
 			<view class="list-box">
 				<view class="list-box-index">
-				    <view class="list-box-title">
+				    <view class="list-box-title course-bg-info">
 				    	课程排行榜
 				    </view>	
-					<view class="list-box-text" v-for="(list,index) in 3">
+					<view class="list-box-text" v-for="(cou,index) in courseRankingList" @click="toCourseDetail(cou)">
 						<image v-if="index == 0" style="width:50upx;height: 50upx;vertical-align: middle;" src="../../static/images/ranking/listblue01.png" mode=""></image>
 						<image v-if="index == 1" style="width:50upx;height: 50upx;vertical-align: middle;" src="../../static/images/ranking/listblue02.png" mode=""></image>
 						<image v-if="index == 2" style="width:50upx;height: 50upx;vertical-align: middle;" src="../../static/images/ranking/listblue03.png" mode=""></image>
-						<text>BOE京东方位列世界知识产权组织202…</text>
+						<text>{{cou.name}}</text>
 					</view>
 				</view>
 				<view class="list-box-index">
-				    <view class="list-box-title">
+				    <view class="list-box-title art-bg-info">
 				    	热门文章排行榜
 				    </view>	
-					<view class="list-box-text" v-for="(list,index) in 3">
-						<image v-if="index == 0" style="width:50upx;height: 50upx;vertical-align: middle;" src="../../static/images/ranking/listblue01.png" mode=""></image>
-						<image v-if="index == 1" style="width:50upx;height: 50upx;vertical-align: middle;" src="../../static/images/ranking/listblue02.png" mode=""></image>
-						<image v-if="index == 2" style="width:50upx;height: 50upx;vertical-align: middle;" src="../../static/images/ranking/listblue03.png" mode=""></image>
-						<text>BOE京东方位列世界知识产权组织202…</text>
+					<view class="list-box-text" v-for="(arl,index) in arlRankingList" @click="toArticleDetail(arl)">
+						<image v-if="index == 0" style="width:50upx;height: 50upx;vertical-align: middle;" src="../../static/images/ranking/listred01.png" mode=""></image>
+						<image v-if="index == 1" style="width:50upx;height: 50upx;vertical-align: middle;" src="../../static/images/ranking/listred02.png" mode=""></image>
+						<image v-if="index == 2" style="width:50upx;height: 50upx;vertical-align: middle;" src="../../static/images/ranking/listred03.png" mode=""></image>
+						<text>{{arl.title}}</text>
 					</view>
 				</view>
 				<view class="list-box-index">
-				    <view class="list-box-title">
+				    <view class="list-box-title qa-bg-info">
 				    	热门问答排行榜
 				    </view>	
-					<view class="list-box-text" v-for="(list,index) in 3">
-						<image v-if="index == 0" style="width:50upx;height: 50upx;vertical-align: middle;" src="../../static/images/ranking/listblue01.png" mode=""></image>
-						<image v-if="index == 1" style="width:50upx;height: 50upx;vertical-align: middle;" src="../../static/images/ranking/listblue02.png" mode=""></image>
-						<image v-if="index == 2" style="width:50upx;height: 50upx;vertical-align: middle;" src="../../static/images/ranking/listblue03.png" mode=""></image>
-						<text>BOE京东方位列世界知识产权组织202…</text>
+					<view class="list-box-text" v-for="(qa,index) in qaRankingList" @click="toQaDetail(qa)">
+						<image v-if="index == 0" style="width:50upx;height: 50upx;vertical-align: middle;" src="../../static/images/ranking/list-01.png" mode=""></image>
+						<image v-if="index == 1" style="width:50upx;height: 50upx;vertical-align: middle;" src="../../static/images/ranking/list02.png" mode=""></image>
+						<image v-if="index == 2" style="width:50upx;height: 50upx;vertical-align: middle;" src="../../static/images/ranking/list03.png" mode=""></image>
+						<text>{{qa.title}}</text>
 					</view>
 				</view>
 			</view>
@@ -78,18 +81,20 @@
 			<view class="recommend-index-title">
 				<text class="title-line"></text>
 				热门文章推荐
-				<text class="tetle-text">查看更多</text>
+				<!-- <text class="tetle-text">查看更多</text> -->
 			</view>
 			<view class="articl-box">
-				<view class="articl-box-index" v-for="ar in 4">
-					<image style="width: 560upx;height: 314upx;border-radius: 24upx 24upx 0 0;" src="../../static/images/course.png" mode=""></image>
+				<view class="articl-box-index" v-for="ar in arlDataList" @click="toArticleDetail(ar)">
+					<image v-if="ar.coverurl == ''" style="width: 560upx;height: 314upx;border-radius: 24upx 24upx 0 0;" src="../../static/images/course.png" mode=""></image>
+					<image v-else style="width: 560upx;height: 314upx;border-radius: 24upx 24upx 0 0;" :src="fileUrl+ar.coverurl" mode=""></image>
 					<view class="box-index">
-						<view class="box-index-title">
-							这里是标题字节显示效果图片放大至120，卡片浮影加深展示最多字…
+						<view class="box-index-title" style="height:90upx">
+							{{ar.title}}
 						</view>
 						<view class="box-index-authr">
-							<image style="width: 64upx;height:64upx;vertical-align: middle;margin-right: 24upx;" src="../../static/images/woman.png" mode=""></image>
-							学习小助手
+							<author-info width="32px" height="32px" :avatar="ar.authorInfo.avatar" :name="ar.authorInfo.name" :sex="ar.authorInfo.sex"></author-info>
+							<!-- <image style="width: 64upx;height:64upx;vertical-align: middle;margin-right: 24upx;" src="../../static/images/woman.png" mode=""></image>
+							学习小助手 -->
 						</view>
 					</view>
 				</view>
@@ -99,20 +104,21 @@
 			<view class="recommend-index-title">
 				<text class="title-line"></text>
 				热门问答推荐
-				<text class="tetle-text">查看更多</text>
+				<!-- <text class="tetle-text">查看更多</text> -->
 			</view>
 			<view class="qa-box" style="display: flex;overflow-x: auto;">
-				<view class="qa-box-index" v-for="ar in 4">
+				<view class="qa-box-index" v-for="qa in qaDataList" @click="toQaDetail(qa)">
 					<view class="box-index-title">
-						大家最近看了哪些好书，可以推荐一下吗？
+						{{qa.title}}
 					</view>
-					<view class="box-index-authr">
-						<image style="width: 64upx;height:64upx;vertical-align: middle;margin-right: 24upx;" src="../../static/images/woman.png" mode=""></image>
-						<text style="font-size: 28upx;color: #39424C;">学习小助手</text> 
-						<text style="font-size: 28upx;color: #6E7B84;">「最热答案」</text>
+					<view class="box-index-authr" style="display: flex;">
+						<author-info width="26px" height="26px" :avatar="qa.authorInfo.avatar" :name="qa.authorInfo.name" :sex="qa.authorInfo.sex"></author-info>
+						<!-- <image style="width: 64upx;height:64upx;vertical-align: middle;margin-right: 24upx;" src="../../static/images/woman.png" mode=""></image>
+						<text style="font-size: 28upx;color: #39424C;">学习小助手</text> -->
+						<text style="font-size: 28upx;color: #6E7B84;margin-top: 10upx;display: inline-block;margin-left: 20upx;">「最热答案」</text>
 					</view>
 					<view class="box-index-text">
-						智慧物联是利用互联网进行的运营方式,还是其他用互联网进行的运，2021年…
+						{{qa.content}}
 					</view>
 				</view>
 			</view>
@@ -122,14 +128,173 @@
 </template>
 
 <script>
+	import apiIndex from '@/api/phase2/index.js';
+	import { mapGetters,mapActions} from 'vuex';
+	import apiUser from '@/api/system/user.js';
+	import {toScore} from '@/utils/tools.js'
 	export default {
 		data() {
 			return {
-				
+				fileUrl:this.$config.fileUrl,
+				arlDataList:[],
+				qaDataList:[],
+				courseDataList:[],
+				qaRankingList:[],
+				arlRankingList:[],
+				courseRankingList:[],
+				converToScore:toScore,
 			}
 		},
+		computed: {
+		    ...mapGetters(['userInfo','sysTypeMap'])
+		},
+		mounted(){
+			this.getCourseData();
+			// this.getSysTypeTree();
+			// this.findCourseData();
+			this.loadSysTypes();
+			this.getQaRanking();
+			this.getArtRanking();
+			this.getArtData();
+			this.getQaData();
+			this.getCourseRanking();
+		},
 		methods: {
-			
+			//文章跳转详情
+			toArticleDetail(item) {
+				uni.navigateTo({
+					url: '/pages/resource/articeDetail?id=' + item.id
+				});
+			},
+			toQaDetail(item) {
+				uni.navigateTo({
+					url: '/pages/resource/qaDetail?id=' + item.id
+				});
+			},
+			//课程跳转详情
+			toCourseDetail(citem) {
+				if(citem.source == 1){
+				 uni.navigateTo({
+				 	url: '/pages/study/studydetail?id='+citem.id+'&type='+citem.type
+				 });
+				} else {
+					if (citem.type == 10) {
+						uni.navigateTo({
+							url: '/pages/resource/microDetail?id='  + citem.id 
+						});
+					} else if (citem.type == 20) {
+						uni.navigateTo({
+							url: '/pages/resource/courseDetail?id=' +citem.id
+						});
+					}
+				}
+			},
+			...mapActions({
+			      // getResOwnerTree:'resOwner/getResOwnerTree',
+			      // loadResOwners:'resOwner/loadResOwners',
+			      getSysTypeTree:'sysType/getSysTypeTree',
+			      loadSysTypes:'sysType/loadSysTypes'
+			    }),
+			sysTypeName(code){
+			  if(code=='' || code==0){return '';}
+			  return this.sysTypeMap.get(code);
+			},
+			//问答排行榜
+			getQaRanking(){
+				apiIndex.qaAnswers(3).then(res=>{
+					if(res.status == 200) {
+						this.qaRankingList = res.result;
+					}
+				})
+			},
+			//文章排行榜
+			getArtRanking(){
+				apiIndex.articleViews(3).then(res=>{
+					if(res.status == 200){
+						this.arlRankingList = res.result;
+					}
+				})
+			},
+			//课程排行榜
+			getCourseRanking(){
+				apiIndex.scorelist(3,1).then(res=>{
+					if(res.status == 200){
+						this.courseRankingList = res.result;
+					}
+				})
+			},
+			//推荐文章
+			getArtData() {
+				apiIndex.articlelist(2).then(res=>{
+					if(res.status == 200) {
+						let ids = [];
+						res.result.forEach(item=>{
+							ids.push(item.sysCreateAid);
+							item.authorInfo={avatar:'',name:'',code:'',sex:null};
+						})
+						this.arlDataList = res.result;
+						this.loadAuthorInfo(res.result,ids);
+					}
+				})
+			},
+			// 推荐问答
+			getQaData(){
+				let params = {
+				  pageSize: 4,
+				  orderAsc: false,
+				  orderField: 'views'
+				};
+			    apiIndex.indexList(params).then(res=>{
+					if(res.status == 200){
+						let ids = [];
+						res.result.forEach(item=>{
+							ids.push(item.sysCreateAid);
+							item.authorInfo={avatar:'',name:'',code:'',sex:null};
+						})
+						this.qaDataList = res.result;
+						this.loadAuthorInfo(res.result,ids);
+						console.log(this.qaDataList,'this.qaDataList')
+					}
+				})
+			},
+			// 推荐课程
+			getCourseData(){
+				let course = {
+				  num:6,
+				  device: 1,
+				  orderField: 'studys',
+				  orderAsc: false,
+				  topOrder: true,
+				};
+				apiIndex.mobileIndex(course).then(res=>{
+					if(res.status == 200) {
+						this.courseDataList = res.result;
+					}
+				})
+			},
+			loadAuthorInfo(list, ids) {
+			        //加载作者信息，头像，机构信息
+			        if (ids.length == 0) {
+			          return;
+			        }
+			        const noReapetIds = [...new Set(ids)];
+			        apiUser.getByIds(ids).then(res => {
+			          if (res.status == 200) {
+			            list.forEach((item, index) => {
+			              res.result.some(author => {
+			                if (author.aid == item.sysCreateAid) {
+			                  item.authorInfo = author;
+			                  return true;
+			                } else {
+			                  return false;
+			                }
+			              });
+			            });
+			          } else {
+			            console.log('加载用户信息失败:' + res.error);
+			          }
+			        });
+			      },
 		}
 	}
 </script>
@@ -164,8 +329,11 @@
 	.course-re-list{
 		display: flex;
 		flex-wrap: wrap;
+		margin-top: 20upx;
 		.course-re-index{
 			padding: 15upx 0;
+			width: 335upx;
+			min-width: 335upx;
 			&:nth-child(2n-1){
 				margin-right: 20upx;
 			}
@@ -174,20 +342,24 @@
 				height: 188upx;
 				border-radius: 16upx;
 				position: relative;
+				/deep/ uni-image {
+					border-radius: 8upx;
+				}
 				.img-score{
 					display: inline-block;
 					padding: 7upx 15upx;
 					box-sizing: border-box;
 					position: absolute;
-					right:0;
-					bottom: 0;
+					right:2upx;
+					bottom: -2upx;
 					color: #FFFFFF;
 					font-size: 28upx;
 					z-index: 99999;
 					width: 136upx;
 					height: 44upx;
+					background: #1767FF;
 					// background: ;
-					background: rgba($color: #1767FF, $alpha: 0.2);
+					// background: rgba($color: #1767FF, $alpha: 0.2);
 					border-radius: 24upx 0px 0px 0px;
 					backdrop-filter: blur(20px);
 				}
@@ -196,6 +368,14 @@
 				margin-top: 20upx;
 				font-size: 28upx;
 				color: #39424C;
+				display: -webkit-box;
+				word-break:break-all;
+				// white-space:pre-wrap;
+				overflow: hidden;
+				// text-overflow:ellipsis;
+				-webkit-box-orient: vertical;
+				-webkit-line-clamp: 1;
+				box-sizing: border-box;
 			}
 			.course-text{
 				margin-top: 20upx;
@@ -210,7 +390,15 @@
 					background: rgba($color: #387DF7, $alpha: 0.1);
 					border-radius: 8upx;
 					margin-right: 12upx;
-					padding: 2upx 6upx;
+					padding: 2upx 12upx;
+				}
+				.type-tow{
+					font-size: 22upx;
+					color: #D98135;
+					background: rgba($color: #FF7900, $alpha: 0.1);
+					border-radius: 8upx;
+					margin-right: 12upx;
+					padding: 4upx 12upx;
 				}
 			}
 		}
@@ -223,6 +411,18 @@
 			display: flex;
 			overflow-x: auto;
 		}
+		.list-box-index:nth-child(1){
+			background: url(../../static/images/ranking/qa-box.png) no-repeat 100% / 100%;
+			background-position: 0 0;
+		}
+		.list-box-index:nth-child(2){
+			background: url(../../static/images/ranking/list-or.png) no-repeat 100% / 100%;
+			background-position: 0 -1px;
+		}
+		.list-box-index:nth-child(3){
+			background: url(../../static/images/ranking/list-pink.png) no-repeat 100% / 100%;
+			background-position: 0 0;
+		}
 	   .list-box-index{
 		   width: 560upx;
 		   min-width: 560upx;
@@ -231,8 +431,8 @@
 		   border-radius: 24upx;
 		   border: 2upx solid #E4EAEF;
 		   padding: 34upx 30upx;
-		   background: url(../../static/images/ranking/qa-box.png) no-repeat 100% / 100%;
-		   background-position: 0 0;
+		   // background: url(../../static/images/ranking/qa-box.png) no-repeat 100% / 100%;
+		   // background-position: 0 0;
 		   margin-right: 20upx;
 		  
 		   .list-box-title{
@@ -312,6 +512,9 @@
 				.box-index-authr{
 					margin-top: 30upx;
 					margin-bottom: 20upx;
+					/deep/.author-name{
+						color: #39424C !important;
+					}
 				}
 				.box-index-text{
 					font-size: 28upx;