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

<template>
	<view style="padding: 30rpx;" >
		<view class="list_box">
			<view class="item" v-for="(item,index) in list" :key="index" >
				<image :src="item.coverUrl" ></image>
				<text >{{item.courseName}}</text>
				<view class="del_icon">
					<u-icon name="minus-circle-fill" color="#EB4D3D" size="40" @click="delItem(index)"></u-icon>
				</view>
			</view>
			<view class="item" style="vertical-align: top;">
				<view class="item_add" @click="openSel">
					<u-icon name="plus-circle-fill" color="#32467B" size="32"></u-icon>
				</view>
			</view>
		</view>
		<view class="list_box form">
			<u-form :model="form" ref="uForm">
				<u-form-item label="课程类型" :label-width="auto"><u-input v-model="form.category" :disabled="true"/></u-form-item>
				<u-form-item  label="考试日期" prop="birth" :label-width="auto">
					<picker mode="date" :value="form.date"   @change="bindDateChange">
						<view class="picker">
						  {{form.date}}
						</view>
					  </picker>
				</u-form-item>
				<u-form-item  label="学习提醒" prop="birth" :label-width="auto">
					<picker mode="time" :value="form.time"   @change="bindTimeChange">
						<view class="picker">
						  {{form.time}}
						</view>
					  </picker>
				</u-form-item>
				<u-form-item label="学习频率" :label-width="auto">
					<view class="picker" @click="openWeek" >
					  {{form.week}}
					</view>
				</u-form-item>
				<u-form-item label="复习天数" :label-width="auto">
					<picker @change="bindPickerChangeReview" :value="index_review" :range="array_review">
					              <view class="picker">
					                {{array_review[index_review]}}
					              </view>
					    </picker>
				</u-form-item>
				<u-form-item label="起止日期" :label-width="auto">
					<view class="picker" @click="openCalendar">
							{{form.startDate}}~{{form.endDate}}
					</view>
					
				</u-form-item>
			</u-form>
		</view>
		<u-calendar v-model="calendar_show" :mode="calendar" @change="change" :max-date="maxDate">
		    </u-calendar>
		<!-- 弹框-->
		<u-popup v-model="week_show" mode="bottom">
			<view style="height: 400rpx;text-align: center">
					<view style="padding-top: 100rpx;padding-left: 40rpx;text-align: center;">
						<u-checkbox-group @change="checkboxGroupChange">
							<u-checkbox 	
								v-model="item.checked" 
								v-for="(item, index) in list3" :key="index" 
								:name="item.name"
							>{{item.name}}</u-checkbox>
						</u-checkbox-group>
						<view class="title_l" @click="week_submit" style="margin: 50rpx auto;">确认</view>
					</view>
				</view>
		</u-popup>
		<u-popup v-model="show" mode="bottom">
			<view class="popup_box" >
				<view class="popup_title">
					<u-row >
						<u-col span="6">
							<view class="title_r">我的课程</view>
						</u-col>
						<u-col span="3" offset="3">
							<view class="title_l" @click="submit">确认</view>
						</u-col>
					</u-row>
				</view>
				<view class="popup_list">
					<view class="popup_item" v-for="(item,index) in list2" :key="index">
						<view style="line-height:182rpx ;">
							<u-checkbox :disabled="item.disabled"
								@change="checkboxChange"  shape="circle" active-color="#32467B"
								v-model="item.checked"  :key="index" :name="item.courseId"></u-checkbox>
						</view>
						<view >
							<image :src="item.coverUrl" style="width: 278rpx;height: 134rpx;"></image>
						</view>
						<view style="margin: 30rpx;">
							{{item.courseName}}
						</view>
					</view>
					
				</view>
			</view>
		</u-popup>
		<button  @click="resultForm" class="submit_btn">提交</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				week_show:false,
				form:{
					category:'二级建造师',
					date:'2021-01-01',
					time:'20:30',
					startDate:'2021-05-07',
					endDate:'2021-05-31',
					week:'一'
				},
				calendar: 'range',
				list:[
					],
				list2:[
					{url:'/static/banner.png',id:33,disabled:false,
					checked:false},
					{url:'/static/banner.png',id:34,disabled:false,checked:false},
					{url:'/static/banner.png',id:35,disabled:false,checked:false}],
				show:false,
				calendar_show:false,
				maxDate:'2023-01-01',
				list3:[{
					name: '一',
					checked: false,
					disabled: false,
					id:1
				},{
					name: '二',
					checked: false,
					disabled: false,
					id:2
				},{
					name: '三',
					checked: false,
					disabled: false,
					id:3
				},{
					name: '四',
					checked: false,
					disabled: false,
					id:4
				},{
					name: '五',
					checked: false,
					disabled: false,
					id:5
				},
				{
					name: '六',
					checked: false,
					disabled: false,
					id:6
				},
				{
					name: '日',
					checked: false,
					disabled: false,
					id:0
				}],
				selWeek:'',
				index_review: 4,
				array_review: [1, 2, 3, 4, 5, 6, 7],	
			}
		},
		onLoad(option) {
			this.form.startDate = this.$method.timestampToTime((new Date()).getTime()/1000)
			this.form.endDate = this.$method.timestampToTime((new Date()).getTime()/1000 + 24*3600*10)
			this.getMyCourse()
		},
		onShow(){
			
		},
		methods: {
			resultForm(){
				if(this.list.length==0){
					uni.showModal({
						title: '提示',
						content: '请选择课程',
						showCancel: false
					});
					return 
				}
				let courseId = [];
				for(let i=0;i<this.list.length;i++){
					courseId.push(this.list[i].courseId)
				}
				let ss = this.form.week.split("、");
				let weekArray = []
				for(let i=0;i<ss.length;i++){
					if(ss[i]=='日'){
						weekArray.push(0)
					}
					if(ss[i]=='一'){
						weekArray.push(1)
					}
					if(ss[i]=='二'){
						weekArray.push(2)
					}
					if(ss[i]=='三'){
						weekArray.push(3)
					}
					if(ss[i]=='四'){
						weekArray.push(4)
					}
					if(ss[i]=='五'){
						weekArray.push(5)
					}
					if(ss[i]=='六'){
						weekArray.push(6)
					}
				}
				let data = {
					courseId:courseId.join(","),
					reminderTime:this.form.time,
					examDate:this.$method.TimeTotimestamp(this.form.date),
					startTime:this.$method.TimeTotimestamp(this.form.startDate),
					endTime:this.$method.TimeTotimestamp(this.form.endDate),
					endTime:this.$method.TimeTotimestamp(this.form.endDate),
					studyCount:weekArray.join(","),
					studyDay:this.array_review[this.index_review],
					status:1
				}
				console.log(data)
				this.$api.planGenerate(data).then(result => {
					if(result.data.code==200){
						uni.showModal({
						    title: '提示',
						    content: '提交成功',
						});
					}
					console.log(result)
				});
				
			},
			selItem(item){
				console.log(34)
				item.checked = !item.checked
			},
			getMyCourse(){
			    let data = {
			     typeId:0
			    }
			    let self = this
			    this.$api.getUserBuy(data).then(result => {
			     if(result.data.data.courseVoList.length>0){
			      for(let i=0;i<result.data.data.courseVoList.length;i++){
			       let item = result.data.data.courseVoList[i]
			       item.checked = false
			       item.disabled = false
				   item.coverUrl = self.$method.splitImgHost(item.coverUrl)
			      }
			     }
			     self.list2 = result.data.data.courseVoList
			     console.log(self.list2)
			    });
			   },
			bindPickerChangeReview(e){
				this.index_review= e.detail.value
			},
			week_submit(){
				if(this.selWeek==''){
					uni.showModal({
					    title: '提示',
					    content: '至少选择一个',
					});
					return
				}
				this.form.week = this.selWeek
				this.week_show = false
			},
			openWeek(){
				this.week_show = true
				this.selWeek = this.form.week
				let that = this
				this.list3.map(val => {
					val.checked = false
					if(that.form.week.indexOf(val.name) != -1){
						val.checked = true
					}
				})
			},
			checkboxGroupChange(e){
				this.selWeek = e.join("、")
			},
			openCalendar(){
				this.calendar_show = true
			},
			change(e) {
				console.log(e);
				this.form.startDate = e.startDate
				this.form.endDate = e.endDate
			},
			bindTimeChange(e){
				this.form.time=e.detail.value
			},
			bindDateChange(e){
				this.form.date=e.detail.value
				
			},
			submit(){
				let that = this
				this.list2.map(val => {
					if(val.checked){
						that.list.push(val);
					}
				})
				this.checkSameItem()
				this.show = false
			},
			checkboxChange(e){
			},
			checkSameItem(){
				this.list2.map(val => {
					val.disabled = false
					this.list.map(val1 => {
						if(val.courseId == val1.courseId){
							val.disabled = true
						}
						val.checked= false
					})
				})
			},
			delItem(index){
				this.list.splice(index,1)
			},
			openSel(){
				this.show = true
				this.checkSameItem()
			}
		},
		
	}
</script>
<style>
	::-webkit-scrollbar{
		width: 0;
		height: 0;
		color: transparent;
	}
	.u-drawer-content-visible{
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		overflow: hidden;
	}
</style>
<style scope>
	.submit_btn{
		background-color: #32467B !important;
		border-color: #32467B !important;
		color: #FFFFFF;
		font-size: 30rpx;
		padding: 5rpx;
		margin-top: 50rpx;
	}
	.picker{
		text-align: right;
	}
	.form{
		padding:0 16rpx !important;
		margin-top: 30rpx;
	}
	input{
		text-align: right;
	}
	.popup_item{
		width: 100%;
		height: 182rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
		border-radius: 32rpx;
		margin: 20rpx 0;
		padding: 10rpx;
		display: flex;
	}
	.popup_list{
		height: 500rpx;
		padding: 0 20rpx;
	}
	.title_l{
		width: 88rpx;
		height: 48rpx;
		background: #32467B;
		border-radius: 16rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 48rpx;
	}
	.title_r{
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #2F4379;
	}
	.popup_title{
		width: 100%;
		margin: 40rpx;	
	}
	.popup_box{
		height: 600rpx;
	}
	.del_icon{
		position: absolute;
		right: -15rpx;
		top: -15rpx;
	}
	.item_add{
		background: #F9F9F9;
		border-radius: 32rpx;
		width: 100%;
		height:150rpx ;
		text-align: center;
		line-height: 150rpx;
	}
	.item text{
		font-size: 24rpx;
		color: #0C141F;
	}
	.item image{
		border-radius: 32rpx;
		width: 100%;
		height:150rpx ;
	}
	.item{
		width: 46%;
		display: inline-block;
		margin: 1% 2%;
		position: relative;
	}
	.list_box{
		width: 100%;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 1rpx 4rpx rgba(145, 156, 178, 0.1);
		border-radius: 32rpx;
		padding: 20rpx 0;
	}
	
page {
		background: #FFFFFF;
	}
</style>