首页页面优化和新增参与人数

common/request.js

@@ -5,10 +5,10 @@ import api from './api.js'
 var num = 1
 //接口api   
 // export const BASE_URL = 'https://api.xyyxt.net'   //release
-export const BASE_URL = 'https://test.xyyxt.net'   //预发布
+// export const BASE_URL = 'https://test.xyyxt.net'   //预发布
 // export const BASE_URL = 'http://42.192.164.187:19005'    //test
 // export const BASE_URL = 'http://192.168.1.222:5055'    //后端本地更新到222
-// export const BASE_URL = 'http://192.168.1.24:5055'    //后端本地
+export const BASE_URL = 'http://192.168.1.24:5055'    //后端本地
 
  //图片上传api
 // export const BASE_IMG_URL = 'https://file.xyyxt.net/'     //release

pages/index/index.vue

@@ -95,27 +95,34 @@
 					</view>
 				</view>
 			</view> -->
-			<u-tabs class="tabs" :current="tabCurrent" @change="tab" :list="menu" :activeStyle="{fontSize:'36rpx'}" :inactiveStyle="{color:'#EAEEF1',fontSize:'30rpx'}" sticky></u-tabs>
+			<!-- <u-tabs class="tabs" :current="tabCurrent" @change="tab" :list="menu" :activeStyle="{fontSize:'36rpx'}" :inactiveStyle="{color:'#EAEEF1',fontSize:'30rpx'}" sticky></u-tabs> -->
+			<view class="tabs">
+				<view v-for="(item, index) in menu" :key="index" class="tab_item" :class="{nactive: tabNum == index}" @click="tab(index)">{{ item.name }}</view>
+			</view>
 			<view class="course-list" v-show="tabCurrent==0">
-				<navigator  hover-class="none" class="item" v-for="(item,index) in list1" :key="index" :url="'/pages3/course/detail?id='+item.goodsId">
-                    <view class="c_title">{{item.goodsName}}</view>
+				<navigator  hover-class="none" class="list_item" v-for="(item,index) in list1" :key="index" :url="'/pages3/course/detail?id='+item.goodsId">
                     <view class="course_content">
                         <view class="img">
                             <image :src="$method.splitImgHost(item.coverUrl, true)"></image>
                             <view class="time" v-if="item.year">{{item.year?item.year:''}}</view>
                         </view>
                         <view class="text">
-                            <!-- <view class="title">{{item.goodsName}}</view> -->
-                            <view class="title">学习周期：xxx月-xxx月</view>
-                            <view class="joins">100人参与</view>
+                            <view class="c_title">{{item.goodsName}}</view>
+							<!-- <view v-if="item.studyStartTime && item.studyEndTime" class="learn_ranges">
+								<image class="l_range" src="/static/learn/learn_range.png"></image>
+								学习周期：
+								<text class="l_time">{{ item.studyStartTime | formate('yyyy.mm.dd') }} - {{ item.studyEndTime | formate('yyyy.mm.dd') }}</text>
+							</view> -->
+                            <view v-if="item.buyUserNum" class="joins">
+								<image class="people" src="/static/index/people.png"></image>
+								<!-- 为0时，不显示 -->
+								<text>{{ item.buyUserNum }}人参与</text>
+							</view>
                             <view class="desc">
                                 <view class="left">
-                                    <text class="line_t">￥999</text>
-                                    <text class="mon_t">￥599</text>
-                                    <!-- {{item.classHours || '-'}}
-                                    <text>学时</text> -->
+                                    <text class="mon_t">¥ {{toFixed(item.standPrice)}}</text>
+									<text class="sale">限时优惠</text>
                                 </view>
-                                <!-- <view class="right">¥ {{toFixed(item.standPrice)}}</view> -->
                                 <view class="right">
                                     <view class="regiser_row">立即报名</view>
                                 </view>
@@ -127,7 +134,7 @@
 				</navigator>
 			</view>
 			<view class="course-list" v-show="tabCurrent==1">
-			 	<navigator  hover-class="none" class="item" v-for="(item,index) in list2" :key="index" :url="'/pages2/bank/detail?id='+item.goodsId">
+			 	<navigator  hover-class="none" class="list_item" v-for="(item,index) in list2" :key="index" :url="'/pages2/bank/detail?id='+item.goodsId">
 					<!-- <view class="img">
 						<image :src="$method.splitImgHost(item.coverUrl, true)"></image>
 						<view class="time" v-if="item.year">{{item.year?item.year:''}}</view>
@@ -143,26 +150,24 @@
 						</view>
 					</view> -->
 
-                    <view class="c_title">{{item.goodsName}}</view>
                     <view class="course_content">
                         <view class="img">
                             <image :src="$method.splitImgHost(item.coverUrl, true)"></image>
                             <view class="time" v-if="item.year">{{item.year?item.year:''}}</view>
                         </view>
                         <view class="text">
-                            <!-- <view class="title">{{item.goodsName}}</view> -->
-                            <view class="title">学习周期：xxx月-xxx月</view>
-                            <!-- <view class="joins">100人参与</view> -->
+							<view class="c_title">{{item.goodsName}}</view>
+                            <!-- <view class="joins">
+								<image class="zan" src="/static/index/zan.png"></image>
+								<text>110人推荐</text>
+							</view> -->
                             <view class="desc">
                                 <view class="left">
-                                    <text class="line_t">￥999</text>
-                                    <text class="mon_t">￥599</text>
-                                    <!-- {{item.classHours || '-'}}
-                                    <text>学时</text> -->
+                                    <text class="mon_t">¥ {{toFixed(item.standPrice)}}</text>
+									<text class="sale">限时优惠</text>
                                 </view>
-                                <!-- <view class="right">¥ {{toFixed(item.standPrice)}}</view> -->
                                 <view class="right">
-                                    <view class="regiser_row">立即购买</view>
+                                    <view class="regiser_row">立即报名</view>
                                 </view>
                             </view>
                         </view>
@@ -181,6 +186,7 @@ export default {
 	components: {},
 	data() {
 		return {
+			tabNum: 0,
 			infoNums:0,
 			list:[],
 			tabCurrent:0,
@@ -207,18 +213,25 @@ export default {
 				{
 					pageNum: 1,
 					pageSize: 10,
-					total: 0,
-					showStatus: 0,
+					// total: 0,
+					// showStatus: 0,
+					getUserNum: 1, //是否返回商品购买用户数量 1带 0不带	,会返回个buyUserNum
 					goodsType:1
 				},
+				
 				{
 					pageNum: 1,
 					pageSize: 10,
-					total: 0,
-					showStatus: 0,
+					// total: 0,
+					// showStatus: 0,
+					getUserNum: 1,
 					goodsType:2
 				}
 			],
+			total1: 0,
+			showStatus1: 0,
+			total2: 0,
+			showStatus2: 0,
 			list1: [],
 			list2: [],
 			isLogin:false,
@@ -423,26 +436,32 @@ export default {
 		},
 		//课程
 		courseList() {
-			var self = this;
 			var param = this.paramList[0];
+			// /app/common/goods/list
 			this.$api.goodsList(param).then(res => {
 				console.log(res,'res')
-				self.paramList[0].total = res.data.total;
-				self.list1 = res.data.rows;
-				if (self.list1.length === res.data.total) {
-					self.paramList[0].showStatus = true;
+				if (res.data.code == 200) {
+					this.list1 = res.data.rows || []
+					this.total1 = res.data.total
+					if (this.list1.length === res.data.total) {
+						this.showStatus1 = true
+					}
 				}
+				
 			});
 		},
 		//题库
 		bankList() {
-			var self = this;
 			var param = this.paramList[1];
 			this.$api.goodsList(param).then(res => {
-				self.paramList[1].total = res.data.total;
-				self.list2 =  res.data.rows
-				if (self.list2.length === res.data.total) {
-					self.paramList[1].showStatus = true;
+				// this.paramList[1].total = res.data.total;
+				if (res.data.code == 200) {
+					this.list2 = res.data.rows || []
+					this.total2 = res.data.total
+					if (this.list2.length === res.data.total) {
+						// this.paramList[1].showStatus = true;
+						this.showStatus2 = true
+					}
 				}
 			});
 		},
@@ -590,6 +609,7 @@ export default {
 		},
 		tab(e) {
 			this.tabCurrent = e;
+			this.tabNum = e
 		},
 		updateHomePlan() {
 			this.$refs.home.init();
@@ -623,7 +643,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
+@mixin threeDot {
+	overflow: hidden;
+	text-overflow:ellipsis; 
+	white-space: nowrap;
+}
 .index {
 	.navbar {
 		/deep/ .u-navbar-inner {
@@ -818,27 +842,46 @@ export default {
 		}
 		
 		.tabs {
-			
-			/deep/  .u-tabs {
-				background:none!important;
+			width: 100%;
+			height: 78rpx;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			background-color: #E0E1E2;
+			border-radius: 38rpx;
+			margin: 34rpx 0rpx 24rpx 0rpx;
+			padding: 0rpx 5rpx;
+			.tab_item {
+				width: 345rpx;
+				height: 65rpx;
+				line-height: 65rpx;
+				font-size: 28rpx;
+				font-weight: bold;
+				border-radius: 32rpx;
+				text-align: center;
+				color: #333;
+				&.nactive {
+					color: #fff;
+					background-color: #3577E8;
+				}
 			}
+			// /deep/  .u-tabs {
+			// 	background:none!important;
+			// }
 		}
 		
 		.course-list {
-			// background:#fff;
-			// padding:0 8rpx;
-			box-shadow: 0px 10rpx 9rpx 1rpx rgba(165, 196, 239, 0.1);
-			// border-radius: 16rpx ;
-			
-			.item {
-                height: 240rpx;
-				// padding:24rpx 0;
-                padding: 12rpx 8rpx;
-				// border-bottom:1rpx solid #eeeeee;
-				// display: flex;
+			box-shadow: 0px 10rpx 9rpx 1rpx rgba(165, 196, 239, 0.1);			
+			.list_item {
+                padding: 0rpx 14rpx;
+				height: 278rpx;
+				background: #FFFFFF;
+				box-shadow: 0rpx 0rpx 20rpx 1rpx rgba(1,99,235,0.1000);
+				border-radius: 24rpx;
                 background:#fff;
-                margin-bottom: 12rpx;
-				border-radius: 16rpx;
+                margin-bottom: 21rpx;
+				display: flex;
+    			align-items: center;
                 .c_title {
                     font-size: 28rpx;
                     font-weight: bold;
@@ -846,16 +889,16 @@ export default {
                     font-weight: bold;
                 }
                 .course_content {
+					height: 227rpx;
                     display: flex;
                 }
 				.img {
 					position:relative;
-					margin-right:10rpx;
+					margin-right: 35rpx;
 					border-radius: 16rpx ;
 					overflow: hidden;
-					width: 320rpx;
-					height: 180rpx;
-					
+					width: 202rpx;
+					height: 227rpx;
 					image {
 						width:100%;
 						height:100%;
@@ -877,17 +920,47 @@ export default {
 				}
 				
 				.text {
+					width: 437rpx;
 					flex:1;
 					padding-right:10rpx;
 					position: relative;
-					.title {
-						font-size: 30rpx;
-						color: #333333;
+					.learn_ranges {
+						color: #999;
+						font-size: 24rpx;
+						margin-top: 24rpx;
+						display: flex;
+    					align-items: center;
+						.l_range {
+							width: 20rpx;
+							height: 24rpx;
+							margin-right: 9rpx;
+						}
+						.l_time {
+							color: #333;
+						}
+					}
+					.joins {
+						font-size: 20rpx;
+						color: #3577E8;
+						margin-top: 24rpx;
+						display: flex;
+    					align-items: center;
+						.people {
+							width: 22rpx;
+							height: 22rpx;
+							margin-right: 10rpx;
+						}
+						.zan {
+							width: 25rpx;
+							height: 25rpx;
+							margin-right: 10rpx;
+						}
 					}
-					
 					.desc {
 						margin-top:40rpx;
 						display: flex;
+						align-items: flex-end;
+    					justify-content: center;
 						position: absolute;
 						bottom: 0;
 						width: 100%;
@@ -895,16 +968,18 @@ export default {
 							flex:1;
 							color:#333;
 							font-size: 26rpx;
-							.line_t {
-                                text-decoration: line-through;
-                            }
+							// .line_t {
+                            //     text-decoration: line-through;
+                            // }
                             .mon_t {
                                 font-weight: bold;
+								color: #FC3F3F;
+								font-size: 32rpx;
                             }
-							text {
-								font-size: 24rpx;
-								// color:#999;
-                                color: #FF2D55;
+							.sale {
+								color: #999999;
+								font-size: 15rpx;
+								margin-left: 16rpx;
 							}
 						}
 						
@@ -913,14 +988,16 @@ export default {
 							font-weight: bold;
 							// color: #FF2D55;
                             .regiser_row {
-                                width: 120rpx;
-                                height: 40rpx;
-                                line-height: 40rpx;
+                                width: 165rpx;
+                                height: 48rpx;
+                                line-height: 48rpx;
                                 text-align: center;
-                                border-radius: 8rpx;
-                                background-color: #FF2D55;
+                                border-radius: 0rpx 16rpx 16rpx 16rpx;
+                                background-color: #FC3F3F;
                                 color: #fff;
-                                margin-right: 30rpx;
+								font-weight: 500;
+								font-size: 26rpx;
+                                // margin-right: 30rpx;
                             }
 						}
 					}