直播提醒时间状态和样式背景颜色

common/request.js

@@ -5,9 +5,9 @@ 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.222:5055'    //后端本地更新到222
 // export const BASE_URL = 'http://192.168.1.24:5055'    //后端本地
 
  //图片上传api

pages/learn/index.scss

@@ -70,13 +70,19 @@
 				font-size: 24rpx;
 				padding: 0rpx 18rpx;
 				text-align: center;
-				// background-color: #FFB102;
-				// color: #fff;
-				background-color: #fff;
-				// background-color: #007AFF;
-				color: #9356DE;
+				color: #fff;
 				border-radius: 19rpx;
 			}
+			.living {
+				color: #9356DE;
+				background-color: #fff;
+			}
+			.curring {
+				background-color: #FFB102;
+			}
+			.futuring {
+				background-color: #007AFF;
+			}
 		}
 		.liv_time {
 			font-size: 20rpx;
@@ -132,7 +138,7 @@
 			width: 65rpx;
 			height: 35rpx;
 			line-height: 35rpx;
-			border-radius: 22rpx 0rpx 22rpx 0rpx;
+			border-radius: 0rpx 22rpx 0rpx 22rpx;
 			background-color: #FFB102;
 			color: #fff;
 			font-size: 20rpx;

pages/learn/index.vue

@@ -9,19 +9,45 @@
 		<view class="contents">
 			<view class="diatance">
 				<image class="clock" src="/static/learn/clock.png" mode=""></image>
-				<text>一级建造师，距离考试还有123天</text>
+				<text>
+					一级建造师，距离考试还有
+				</text>
+				<u-count-down :timestamp="leftDays" :show-days="true" separator="zh" 
+					:show-hours="false" :show-minutes="false" :show-seconds="false" font-size="28"
+					bg-color="#007AFF" separator-color="#fff" color="#fff" separator-size="28">
+				</u-count-down>
 			</view>
 			<!-- 有学习的课程 -->
-			<view class="had_courses">
+			<view v-if="allCourse" class="had_courses">
 				<!-- 直播 -->
-				<view class="lives">
+				<view v-if="livingLists.length" class="lives">
 					<view v-for="(live, l_index) in livingLists" :key="l_index" class="live_item">
 						<view class="live_con">
 							<view class="live_status">
 								<image v-if="bgShow(live.liveStartTime, live.watchStatus)" src="/static/learn/living.png" class="liv_icon"></image>
 								<image v-else src="/static/learn/wlive.png" class="liv_icon"></image>
 								<text class="status_s">{{ live.liveStartTime | liveStatus(live.watchStatus)}}</text>
-								<view class="look_bt" :class="{}">{{ lookTimeStatus(live.liveStartTime, live.watchStatus) }}</view>
+								<view class="look_bt" :class="lookTimeStatus(live.liveStartTime, live.watchStatus, 'class')">
+									<text v-if="lookTimeStatus(live.liveStartTime, live.watchStatus) == 1">点击观看</text>
+									<text v-if="lookTimeStatus(live.liveStartTime, live.watchStatus) == 2">即将开播</text>
+									<template v-if="lookTimeStatus(live.liveStartTime, live.watchStatus) == 3">
+										剩余：
+										<u-count-down :timestamp="curTimeTamp(live.liveStartTime)" :show-days="false"
+											color="#fff" separator-color="#fff" font-size="24" separator-size="24" bg-color="#FFB102">
+										</u-count-down>
+									</template>
+									<template v-if="lookTimeStatus(live.liveStartTime, live.watchStatus) == 4">
+										剩余：
+										<u-count-down :timestamp="curTimeTamp(live.liveStartTime)" :show-days="true" separator="zh"
+											color="#fff" separator-color="#fff" bg-color="#007AFF"
+											:show-hours="false" :show-minutes="false" :show-seconds="false" font-size="24" separator-size="24">
+										</u-count-down>
+										<u-count-down :timestamp="curTimeTamp(live.liveStartTime)" :show-days="false"
+											color="#fff" separator-color="#fff" bg-color="#007AFF"
+											font-size="24" separator-size="24">
+										</u-count-down>
+									</template>
+								</view>
 							</view>
 							<view class="liv_time">
 								<text class="timeR">{{ live.liveStartTime | formate('mm月dd日')}}</text>
@@ -36,7 +62,7 @@
 				</view>
 
 				<!-- 我的课程 -->
-				<view class="my_courses">
+				<view v-if="courseLists.length" class="my_courses">
 					<text class="titles">我的课程</text>
 
 					<view v-for="(item, index) in courseLists" :key="index" class="course_item">
@@ -104,39 +130,42 @@
 						</view>
 					</view>
 
-					<view v-for="(item, indexq) in questionLists" :key="indexq" class="course_item">
-						<view class="lefts">
-							<image class="lefet_img" :src="$method.splitImgHost(item.coverUrl, true)" mode=""></image>
-							<!-- <view class="live_icon">直播</view> -->
-						</view>
-						<view class="rights">
-							<view>
-								<view class="cou_titles">{{ item.goodsName }}</view>
-								<view v-if="item.serviceStartTime && item.serviceEndTime" class="learn_ranges">
-									<image class="l_range" src="/static/learn/learn_range.png"></image>
-									学习周期：
-									<text class="l_time">{{ item.serviceStartTime | formate('yyyy.mm.dd') }} - {{ item.serviceEndTime | formate('yyyy.mm.dd') }}</text>
-								</view>
+					<template v-if="questionLists.length">
+						<view v-for="(item, indexq) in questionLists" :key="indexq" class="course_item">
+							<view class="lefts">
+								<image class="lefet_img" :src="$method.splitImgHost(item.coverUrl, true)" mode=""></image>
+								<!-- <view class="live_icon">直播</view> -->
 							</view>
-							<view class="learn_progress">
-								<view class="progress_up">
-									<image src="/static/icon/wk_icon3.png" class="wk_icon"></image>
-									学习进度：{{item.doNum}}/{{item.totalNum}}
-								</view>
-								<view class="progress_down">
-									<view class="progress_bar" style="width: 50%;">
-										<u-line-progress :show-percent="false" height="32" active-color="#007AFF" :percent="(item.doNum/item.totalNum)*100"></u-line-progress>
+							<view class="rights">
+								<view>
+									<view class="cou_titles">{{ item.goodsName }}</view>
+									<view v-if="item.serviceStartTime && item.serviceEndTime" class="learn_ranges">
+										<image class="l_range" src="/static/learn/learn_range.png"></image>
+										学习周期：
+										<text class="l_time">{{ item.serviceStartTime | formate('yyyy.mm.dd') }} - {{ item.serviceEndTime | formate('yyyy.mm.dd') }}</text>
 									</view>
-									<view class="enter_into" @click="studyques(item,index)">进入练习</view>
 								</view>
+								<view class="learn_progress">
+									<view class="progress_up">
+										<image src="/static/icon/wk_icon3.png" class="wk_icon"></image>
+										学习进度：{{item.doNum}}/{{item.totalNum}}
+									</view>
+									<view class="progress_down">
+										<view class="progress_bar" style="width: 50%;">
+											<u-line-progress :show-percent="false" height="32" active-color="#007AFF" :percent="(item.doNum/item.totalNum)*100"></u-line-progress>
+										</view>
+										<view class="enter_into" @click="studyques(item,index)">进入练习</view>
+									</view>
 
+								</view>
 							</view>
 						</view>
-					</view>
+					</template>
+					
 				</view>
 			</view>
 			<!-- 没有学习的课程 -->
-			<view v-if="false" class="no_datas">
+			<view v-else class="no_datas">
 				<image class="courses" src="/static/learn/no_course.png" mode=""></image>
 				<view class="no_learns">您目前没有可学习的课程</view>
 				<view class="choose" @click="toChoose()">立即去选购</view>
@@ -147,9 +176,11 @@
 </template>
 
 <script>
+var curTime = new Date().getTime() // 当前时间的时间戳
 export default {
     data() {
         return {
+			leftDays: 0,
 			paramC: {
 				pageNum: 1,
 				pageSize: 50
@@ -177,7 +208,7 @@ export default {
     },
 	filters: {
 		liveStatus(liveTime, watchStatus) {
-			let curTime = new Date().getTime() // 当前时间的时间戳
+			// let curTime = new Date().getTime() // 当前时间的时间戳
 			let value = liveTime * 1000
 			if (curTime < value) { // 判断当前时间和直播开始时间
 				return ' 未开播'
@@ -186,7 +217,14 @@ export default {
 			}
 		}
 	},
+	computed: {
+		allCourse() {
+			return this.courseLists.length || this.gradeList.length || this.livingLists.length ? true : false
+		}
+	},
 	onLoad() {
+		// 1668787200 ，2022.22.19的时间戳
+		this.leftDays = 1668787200 - parseInt(curTime/1000)
 		this.getCourseLiveQues()
 	},
 	async onShow() {
@@ -196,25 +234,39 @@ export default {
 	},
 	methods: {
 		bgShow(liveTime, watchStatus) {
-			let curTime = new Date().getTime() // 当前时间的时间戳
+			// let curTime = new Date().getTime() // 当前时间的时间戳
 			let value = liveTime * 1000
 			if (curTime > value) { // 判断当前时间和直播开始时间
 				return watchStatus == 'live' ? true : false
 			}
 		},
-		lookTimeStatus(liveTime, watchStatus) {
-			let curTime = new Date().getTime() // 当前时间的时间戳
+		lookTimeStatus(liveTime, watchStatus, type) {
+			// let curTime = new Date().getTime() // 当前时间的时间戳
 			let value = liveTime * 1000
+			var Y = value.getFullYear()
+			var M = value.getMonth() + 1 < 10 ? '0' + (value.getMonth() + 1) : value.getMonth() + 1
+			var D = value.getDate() < 10 ? '0' + value.getDate() : value.getDate()
+			var valZ = Y + '/' + M + '/' + D
+			let curZeroTime = new Date(valZ).getTime() // 获取开始直播时间当天的零点时间戳
 			if (curTime > value) { // 判断当前时间和直播开始时间
 				if (watchStatus == 'live') { // 
-					return '点击观看'
+					return type ? 'living' : 1
 				} else {
-					return '即将开播'
+					return type ? 'curring' : 2
 				}
 			} else {
-				return '剩余：'
+				if (curZeroTime <= curTime && curTime <= value) { //当天
+					return type ? 'curring' : 3
+				} else {
+					return type ? 'futuring' : 4
+				}
+				
 			}
 		},
+		curTimeTamp(liveTime) {
+			let min = liveTime - parseInt(curTime / 1000)
+			return min
+		},
 		toChoose() {
 			uni.switchTab({
 				url:'/pages/course/index'
@@ -243,6 +295,7 @@ export default {
 					if (res3.code == 200) {
 						this.livingLists = res3.rows || []
 					}
+					console.log('this.courseLists;', this.courseLists, this.questionLists,this.livingLists)
 				// }
 			}).catch(err => {
 				// this.$u.toast('请重新刷新请求')