chenxiong 3 жил өмнө
parent
commit
2a8a4ef3c9
1 өөрчлөгдсөн 55 нэмэгдсэн , 9 устгасан
  1. 55 9
      pages2/plan/index.vue

+ 55 - 9
pages2/plan/index.vue

@@ -7,27 +7,27 @@
 					<text style="padding: 0 15rpx;">{{ calendarStudyVo.year }}年 {{ calendarStudyVo.month }}月</text>
 					<u-icon name="arrow-right" size="28" v-if="haveNextMonth" @click="swipeMonth(1)"></u-icon>
 				</view>
-				<view style="width: 100%;display: flex;justify-content:center;margin-top: 20rpx;">
+				<view style="width: 100%;margin-top: 20rpx;">
 					<view v-for="(item, index) in date" :key="index" class="card_date">{{ item }}</view>
 				</view>
 				<view style="width: 100%;margin-top: 20rpx;">
 					<view v-for="(item, index) in showDayList" :key="index" class="date_num">
-						<view v-if="item.color == 0" class="date_num_color0" v-show="item.date > 0">
+						<view v-if="item.color == 0" @click="itemClick(item,index)" class="date_num_color0" :class="{active_color:item.date == activeDate}" v-show="item.date > 0">
 							{{ item.date }}
 							<view v-if="item.note > 0" class="date_note">{{ item.note }}</view>
 							<view v-if="item.dot" class="date_dot"></view>
 						</view>
-						<view v-if="item.color == 1" class="date_num_color1">
+						<view v-if="item.color == 1" @click="itemClick(item,index)" class="date_num_color1"  :class="{active_color:item.date == activeDate}">
 							{{ item.date }}
 							<view v-if="item.note > 0" class="date_note">{{ item.note }}</view>
 							<view v-if="item.dot" class="date_dot"></view>
 						</view>
-						<view v-if="item.color == 2" class="date_num_color2">
+						<view v-if="item.color == 2" @click="itemClick(item,index)" class="date_num_color2"  :class="{active_color:item.date == activeDate}">
 							{{ item.date }}
 							<view v-if="item.note > 0" class="date_note">{{ item.note }}</view>
 							<view v-if="item.dot" class="date_dot"></view>
 						</view>
-						<view v-if="item.color == 3" class="date_num_color3">
+						<view v-if="item.color == 3" @click="itemClick(item,index)" class="date_num_color3"  :class="{active_color:item.date == activeDate}">
 							{{ item.date }}
 							<view v-if="item.note > 0" class="date_note">{{ item.note }}</view>
 							<view v-if="item.dot" class="date_dot"></view>
@@ -178,6 +178,7 @@ export default {
 					}
 				}
 			],
+			activeDate:'',
 			dayStudyList: [],
 			listItem: {},
 			currentMonth: 0,
@@ -197,6 +198,21 @@ export default {
 		this.getList();
 	},
 	methods: {
+		itemClick(item,index) {
+			console.log(item)
+			this.activeDate = item.date;
+		},
+		/**
+		 * 根据选中日期获取需要学习的课程
+		 */
+		getStudyCourseByDay() {
+			let courseList = [];
+			this.showDayList.forEach(day => {
+				if(day.date == this.activeDate) {
+					
+				}
+			})
+		},
 		planNow(){
 			uni.switchTab({
 			    url: '/pages/course/index'
@@ -555,6 +571,7 @@ export default {
 	border-radius: 50%;
 	width: 29rpx;
 	height: 29rpx;
+	line-height: 25rpx;
 	border: 1px solid #ffcc00;
 	font-size: 18rpx;
 	color: #ffcc00;
@@ -599,26 +616,55 @@ export default {
 	margin-top: 20rpx;
 }
 .date_num_color0 {
+	display: inline-block;
+	width: 48rpx;
+	height: 48rpx;
+	line-height: 48rpx;
+	text-align: center;
 	color: #32467b;
 }
 .date_num_color1 {
+	display: inline-block;
+	width: 48rpx;
+	height: 48rpx;
+	line-height: 48rpx;
+	text-align: center;
 	color: #34c759;
 }
 .date_num_color2 {
+	display: inline-block;
+	width: 48rpx;
+	height: 48rpx;
+	line-height: 48rpx;
+	text-align: center;
 	color: #ff3b30;
 }
 .date_num_color3 {
-	color: #ffffff;
-	background-color: #ffcc00;
+	color: #007AFF;
+	background-color: rgba(229,241,255,1);
 	border-radius: 50%;
-	width: 40rpx;
-	height: 40rpx;
+	width: 48rpx;
+	height: 48rpx;
+	line-height: 48rpx;
+	text-align: center;
+	display: inline-block;
+}
+.active_color{
+	color: #fff;
+	background-color: #007AFF;
+	border-radius: 50%;
+	width: 48rpx;
+	height: 48rpx;
+	line-height: 48rpx;
+	text-align: center;
 	display: inline-block;
 }
 .card_date {
 	width: 14%;
 	text-align: center;
 	color: #7f8caf;
+    position: relative;
+    display: inline-block;
 }
 .date_t1 {
 	font-size: 24rpx;