zz--front/pages2/plan/detail.vue

<template>
	<view style="padding: 30rpx;" >
		<view class="card">
			<view class="date_t1">
				2021年 6月
			</view>
			<view style="width: 100%;display: flex;justify-content:center;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 date_use" :key="index"  class='date_num'>
					<view v-if="item.color==0" class="date_num_color0">
						{{item.num}}
						<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">
						{{item.num}}
						<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">
						{{item.num}}
						<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">
						{{item.num}}
						<view v-if="item.note>0" class="date_note">
							{{item.note}}
						</view>
						<view v-if="item.dot" class="date_dot">
						</view>
					</view>
				</view>
			</view>
			<view style="width: 100%;display: flex;justify-content: center;" v-if="isOpen==false">
				<view @click="oepn_calendar" style="height: 20rpx;width: 40rpx;padding:20rpx 0;">
					<view class="date_line" ></view>
				</view>
			</view>
			<view style="width: 100%;display: flex;justify-content: center;" v-else>
				<image class="date_line_close" @click="close_calendar" src="/static/close_card.png"></image>
			</view>
			<view v-for="(item,index) in workList">
				<view style="margin-left: 30rpx;margin-top: 10rpx;" @click="jumpDetail(item)">
					<text class="date_t2">{{item.courseName}}</text>
					<view class="circle_num" style="margin-left: 20rpx;">{{item.chapterNum}}</view>
				</view>
			</view>


		</view>
		<!-- 列表-->
		<view  >
			<uni-swipe-action >
			    <uni-swipe-action-item :autoClose="false" @change="swipeChange($event, item)" :show="item.show" v-for="(item,index) in list" :key="index">
			        <view class="list_item" :class="index%2==0?'list_item_bac1':'list_item_bac2'">
						<u-row>
							<u-col span="11">
								 <text class="item_t1">{{item.coursePlanVo[0].categoryName}}：{{$method.timestampToTime(item.endTime)}}截止</text>
							</u-col>
							<u-col span="1">
								<image src="/static/more.png" class="img_more" @click.stop="openShow(item)"></image>
							</u-col>
						</u-row>
						<view style="margin-top: 30rpx;">
							<image :src="$method.splitImgHost(item.coursePlanVo[0].coverUrl)" class="r_image"></image>
							<view class="r_t2">
								{{item.coursePlanVo[0].courseName}}
							</view>
						</view>
						<view style="display: flex;margin-top: 30rpx;">
							<text class="item_t2">学习频率：</text>
							<view style="display: flex;justify-content:center;">
								<view v-for="(item1,index) in item.studyCount" :key="index" class="item_date">{{replay(item1)}}</view>
							</view>
						</view>
						<view style="display: flex;margin-top: 20rpx;">
							<text class="item_t2">学习进度：60/120</text>
						</view>
			        </view>
					<template v-slot:right >
					               <view class="operate">
					       <image src="/static/operate_1.png" class="operate_img operate_img1"></image>
					       <image src="/static/operate_2.png" class="operate_img operate_img2"></image>
					       <image @click="edit(item)" src="/static/operate_3.png" class="operate_img operate_img3"></image>
					      </view>
					           </template>
			       
			    </uni-swipe-action-item>

			</uni-swipe-action>
		</view>
		<view class="newPlan" @click="newPlan()">
			新建计划
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				workList:[],
				dayLisy:[],
				index:0,
				date:['日','一','二','三','四','五','六'],
				list:[
					{
						show:'right',
						id:1,
						coursePlanVo:{}
					},
					{
						show:'none',
						id:2
					},
					{
						show:'none',
						id:3
					},
					{
						show:'none',
						id:4
					},
					{
						show:'none',
						id:5
					}
				],
				isOpen:false,
				date_num:[
					{
						num:20,
						color:0,
						note:0,
						dot:false,
					},{
						num:21,
						color:1,
						note:0,
						dot:false,
					},{
						num:22,
						color:0,
						note:0,
						dot:true,
					},{
						num:23,
						color:2,
						note:0,
						dot:false,
					},{
						num:24,
						color:1,
						note:0,
						dot:false,
					},{
						num:25,
						color:3,
						note:2,
						dot:false,
					},{
						num:26,
						color:0,
						note:1,
						dot:true,
					}],
					date_use:[],
					 options:[
					        {
					            text: '取消',
					            style: {
					                backgroundColor: '#007aff'
					            }
					        }, {
					            text: '确认',
					            style: {
					                backgroundColor: '#dd524d'
					            }
					        }]
			}
		},
		onLoad(option) {
			this.date_use = this.date_num
			let date = new Date()
			let num = date.getDate()
			for(let i=0;i<this.date_num.length;i++){
				let item = this.date_num[i]
				if(item.num ==num ){
					item.color = 3
				}
			}
			this.getList()
		},
		onShow(){
		},
		methods: {
			jumpDetail(item) {
				this.$navTo.togo('/pages2/course/detail', {
					id: item.courseId
				});
				return;
			},
			replay(index){
				if(index==0){
					return '日'
				}
				if(index==1){
					return '一'
				}
				if(index==2){
					return '二'
				}
				if(index==3){
					return '三'
				}
				if(index==4){
					return '四'
				}
				if(index==5){
					return '五'
				}
				if(index==6){
					return '六'
				}
			},
			getList(){
				let self = this
				this.$api.planUserPlan().then(result => {
					self.list = result.data.data
					self.dayLisy = result.data.data[0].calendarStudyVo[0].dayStudyList
					let start = self.dayLisy[0].studyDay
					self.workList = result.data.data[0].coursePlanVo
					console.log(self.workList)
				});
			},
			newPlan(){
				this.$navTo.togo('/pages2/plan/create')
			},
			edit(item){
				this.$navTo.togo('/pages2/plan/edit', {
					id:item.id
				})
			},
			swipeChange(e, item){
				item.show = e;
			},
			openShow(item){
				if(item.show=='none'){
					item.show = 'right'
				}else{
					item.show = 'none'
				}
			},
			close_calendar(){
				this.isOpen = false
				this.date_use = this.date_num
			},
			oepn_calendar(){
				this.isOpen = true
				this.date_use = []
				for(let i =1;i<=30;i++){
					let item={}
					item.num = i
					item.color = this.random(0, 3)
					let note = this.random(0, 20)
					item.note = note>17?note-15:0
					item.dot = this.random(0, 3)<2?false:true
					let date = new Date()
					let num = date.getDate()
					if(num==i){
						item.color = 3
					}
					this.date_use.push(item)
				}
				
			},
			random(min, max) {
			  return Math.floor(Math.random() * (max - min)) + min;
			}
		
		},
		
	}
</script>

<style scope>
	.newPlan{
		width: 200rpx;
		height: 64rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(47, 67, 121, 0.15);
		border-radius: 32rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #32467B;
		text-align: center;
		line-height: 64rpx;
		position: fixed;
		bottom: 60rpx;
		left: 40%;
	}
	.operate_img3{
		background: #3478F6;
	}
	.operate_img2{
		background: #F09A37;
	}
	.operate_img1{
		background: #EB4D3D;
	}
	.operate_img{
		width: 45rpx;
		height: 45rpx;
		border-radius: 50%;
		padding: 20rpx;
		margin: 10rpx 0;
	}
	.operate{
		height: 418rpx;
		width: 90rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.item_t2{
		font-size: 23rpx;
		color: #32467B;
	}
	.item_date{
		width: 26rpx;
		height: 26rpx;
		background: #32467B;
		border-radius: 50%;
		margin-left: 20rpx;
		font-size: 18rpx;
		color: #FEFEFF;
		text-align: center;
	}
	.r_t2{
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #0C141F;
	}
	.r_image{
		width: 278rpx;
		height: 134rpx;
	}
	.img_more{
		width: 26rpx;
		height: 26rpx;
	}
	.item_t1{
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #32467B;
	}
	.list_item_bac1{
		background: linear-gradient(45deg, rgba(172, 203, 238, 0.2), rgba(231, 240, 253, 0.2));
	}
	.list_item_bac2{
		background: linear-gradient(45deg, rgba(255, 232, 206, 0.3), rgba(251, 184, 160, 0.3));
	}
	.list_item{
		width: 100%;
		height: 418rpx;
		box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(47, 67, 121, 0.05);
		border-radius: 24rpx;
		margin-top: 20rpx;
		padding: 15rpx;
	}
	.date_dot{
		width: 6rpx;
		height: 6rpx;
		background: #FFCC00;
		border-radius: 50%;
		margin:0 auto
	}
	.date_note{
		border-radius: 50%;
		width: 29rpx;
		height: 29rpx; 
		border: 1px solid #FFCC00;
		font-size: 18rpx;
		color: #FFCC00;
		text-align: center;
		display: inline-block;
		position: absolute;
		top: -19rpx;
		right: 9rpx;
	}
	.circle_num {
		border-radius: 50%;
		width: 29rpx;
		height: 29rpx; 
		border: 1px solid #FFCC00;
		font-size: 18rpx;
		color: #FFCC00;
		text-align: center;
		display: inline-block;
		margin: 5rpx;
	}
	.date_t2{
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #2F4379;
	}
	.date_line_close{
		width: 40rpx;
		height: 20rpx;
	}
	.date_line{
		width: 40rpx;
		height: 6rpx;
		background: #7F8CAF;
		border-radius: 2rpx;
	}
	.date_num{
		width: 14%;
		text-align: center;
		position: relative;
		display: inline-block;
		margin-top: 20rpx;
	}
	.date_num_color0{
		color: #32467B;
	}
	.date_num_color1{
		color: #34C759;
	}
	.date_num_color2{
		color: #FF3B30;
	}
	.date_num_color3{
		color: #FFFFFF;
		background-color: #FFCC00;
		border-radius: 50%;
		width: 40rpx;
		height: 40rpx; 
		display: inline-block;
	}
	.card_date{
		width: 14%;
		text-align: center;
		color: #7F8CAF;
	}
	.date_t1{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #2F4379;
		width: 100%;
		text-align: center;
		padding: 20rpx 0;
	}
	.card{
		width: 100%;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(47, 67, 121, 0.05);
		border-radius: 24rpx;
		padding-bottom: 20rpx;
	}
page {
		background: #FDFDFD;
	}
</style>