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

<template>
	<view style="padding: 30rpx;" >
		<view class="list_box">
			<view class="item" v-for="(item,index) in list" :key="index" >
				<image :src="item.url" ></image>
				<text >二级建造师必修</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.id"></u-checkbox>
						</view>
						<view >
							<image src="/static/banner.png" style="width: 278rpx;height: 134rpx;"></image>
						</view>
					</view>
					
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				week_show:false,
				form:{
					category:'二级建造师',
					date:'1990-01-01',
					time:'20:30',
					startDate:'2021-05-07',
					endDate:'2021-05-31',
					week:'一'
				},
				calendar: 'range',
				list:[
					{url:'/static/banner.png',id:23,
					checked:false},
					{url:'/static/banner.png',id:34,checked:false},
					{url:'/static/banner.png',id:25,checked:false}],
				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
				},{
					name: '二',
					checked: false,
					disabled: false
				},{
					name: '三',
					checked: false,
					disabled: false
				},{
					name: '四',
					checked: false,
					disabled: false
				},{
					name: '五',
					checked: false,
					disabled: false
				},
				{
					name: '六',
					checked: false,
					disabled: false
				},
				{
					name: '日',
					checked: false,
					disabled: false
				}],
				selWeek:'',
				index_review: 4,
				array_review: [1, 2, 3, 4, 5, 6, 7],	
			}
		},
		onLoad(option) {
			
		},
		onShow(){
			
		},
		methods: {
			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.id == val1.id){
							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>
	.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>