zc_saas_h5/pages2/plan/edit.vue

<template>
	<view style="padding: 16rpx;">
		<view class="list_box">
			<view class="item" v-for="(item, index) in list" :key="index">
				<image :src="$method.splitImgHost(item.coverUrl)"></image>
				<text>{{ item.goodsName }}</text>
				<text style="color:#999;margin-left:12rpx;">{{ item.secAllNum }}节</text>
				<view class="del_icon"><u-icon name="close" color="#fff" size="20" @click="delItem(index, item.goodsId)"></u-icon></view>
			</view>
			<view class="item" style="vertical-align: top;">
				<view class="item_add" @click="openSel"><u-icon name="plus-circle-fill" color="#007AFF" size="32"></u-icon></view>
				<view style="color:#999;text-align: center;">添加网课</view>
			</view>
		</view>
		<view class="list_box form">
			<u-form :model="form" ref="uForm">
				<u-form-item label="课程类型" :label-width="auto">
					<view style="line-height: 40rpx;text-align: right;" v-if="form.category">{{ form.category }}</view>
					<view v-else style="text-align: right;">请添加网课</view>
				</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>
		<view class="list_box form">
			<view class="dis_ss">
				<image src="@/static/icon/computeIcon.png" style="width:32rpx;height:32rpx;" mode=""></image>
				<text class="getNums" @click="resultForm(1)">点击计算</text>
			</view>
			<view style="padding: 25rpx 0rpx; color: #999;text-align: center;font-size: 30rpx;">
				根据当前计划每个学习日需完成
				<text style="color: #FF9500;margin: 0rpx 10rpx;font-size: 30rpx;font-weight: bold;">{{ studyNums }}</text>
				个学时
			</view>
		</view>
		<u-calendar v-model="calendar_show" :min-date="minDate" :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>
					<view class="line1"></view>
					<view class="grade">选择课程</view>
					<u-line></u-line>
				</view>
				<view class="popup_list" v-if="list2.length !== 0">
					<scroll-view class="list_in" scroll-y="true">
						<view class="popup_item" v-for="(item, index) in list2" :key="index">
							
								<u-checkbox
									:disabled="item.disabled"
									@change="checkboxChange"
									shape="circle"
									active-color="#007AFF"
									v-model="item.checked"
									:key="index"
									:name="item.goodsId"
								>
									<view class="course_item" :class="{selected:item.checked}">
										<view style="display: flex;align-items: center;"><image :src="$method.splitImgHost(item.coverUrl)" style="width: 278rpx;height: 134rpx;"></image></view>
										<view style="margin: 16rpx;">
											<view>{{ item.goodsName }}</view>
											<view style="color:#999;">{{ item.secAllNum }}节</view>
										</view>
									</view>
								</u-checkbox>
							
						</view>
					</scroll-view>
					
				</view>
				<view class="popup_list" v-else><u-empty text="请前往购买课程" mode="list"></u-empty></view>
				
				<view class="submit_wrap">
					<view class="title_l" @click="submit">确认</view>
				
				</view>
			</view>
		</u-popup>
		<view @click="resultForm" class="submit_btn">确认计划</view>
	</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: '一、三、五'
			},
			businessId:'',
			calendar: 'range',
			list: [],
			list2: [],
			show: false,
			calendar_show: false,
			maxDate: '2023-01-01',
			minDate: '',
			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],
			planId: null,
			studyNums: '?'
		};
	},
	onLoad(option) {
		this.planId = Number(option.id);
		this.minDate = this.$method.timestampToTime(new Date().getTime() / 1000);
		this.form.startDate = this.minDate;
		this.form.endDate = this.$method.timestampToTime(new Date().getTime() / 1000 + 24 * 3600 * 30);
		this.getGoods();
		this.getInfo();
	},
	onShow() {},
	methods: {
		getGoods() {
			var self = this;
			self.$api.courseGoodsList().then(res => {
				if (res.data.code === 200) {
					if (res.data.rows.length) {
						for (let i = 0; i < res.data.rows.length; i++) {
							res.data.rows[i].checked = false;
							res.data.rows[i].disabled = false;
						}
					}
					self.list2 = res.data.rows;
				}
			});
		},
		resultForm(int) {
			if (this.list.length == 0) {
				uni.showModal({
					title: '提示',
					content: '请选择课程',
					showCancel: false
				});
				return;
			}
			// if (this.form.week == '请选择') {
			// 	uni.showModal({
			// 		title: '提示',
			// 		content: '请选择学习频率',
			// 		showCancel: false
			// 	});
			// 	return;
			// }
			let goodsId = [];
			for (let i = 0; i < this.list.length; i++) {
				goodsId.push(this.list[i].goodsId);
			}
			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 = {
				goodsId: goodsId,
				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),
				studyCount: weekArray,
				studyDay: this.array_review[this.index_review],
				status: 1
			};
			console.log(data);
			if (int === 1) {
				this.$api.getsystemplanlistPlan(data).then(result => {
					if (result.data.code == 200) {
						this.studyNums = result.data.data.studyCourseKnob;
					} else {
						uni.showToast({
							title: result.data.msg,
							icon: 'none',
							duration: 2000
						});
					}
				});
			} else {
				data.planId = this.planId;
				this.$api.editsystemplan(data).then(result => {
					if (result.data.code == 200) {
						uni.showModal({
							title: '提示',
							content: '提交成功',
							showCancel: false,
							success: function (res) {
								if (res.confirm) {
									uni.navigateBack();
								}
							}
						});
					} else {
						uni.showToast({
							title: result.data.msg,
							icon: 'none',
							duration: 2000
						});
					}
				});
			}
		},
		selItem(item) {
			console.log(34);
			item.checked = !item.checked;
		},
		getInfo(int) {
			var self = this;
			this.$api.systemplanInfo({planId:this.planId}).then(res => {
				this.form.date = this.$method.timestampToTime(res.data.data.examDate);
				this.form.time = res.data.data.reminderTime;
				this.form.startDate = this.$method.timestampToTime(res.data.data.startTime);
				this.form.endDate = this.$method.timestampToTime(res.data.data.endTime);
				this.index_review = res.data.data.studyDay - 1;
				this.form.week = res.data.data.studyCount;
				this.list = res.data.data.goodsVos;
				this.businessId = res.data.data.goodsVos[0].businessId;
				this.form.category = this.list[0].educationName + '-' + this.list[0].projectName + '-' + this.list[0].businessName;
				var numWeek = [];
				this.form.week.forEach((items, indexs) => {
					if (items === 1) {
						numWeek.push('一');
						return;
					}
					if (items === 2) {
						numWeek.push('二');
						return;
					}
					if (items === 3) {
						numWeek.push('三');
						return;
					}
					if (items === 4) {
						numWeek.push('四');
						return;
					}
					if (items === 5) {
						numWeek.push('五');
						return;
					}
					if (items === 6) {
						numWeek.push('六');
						return;
					}
					if (items === 0) {
						numWeek.push('日');
						return;
					}
				});
				this.form.week = numWeek.join('、');
				this.resultForm(1);
			});
		},
		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;
			if (this.list.length) {
				this.form.category = this.list[0].educationName + '-' + this.list[0].projectName + '-' + this.list[0].businessName;
			}
		},
		checkboxChange(e) {
			let goodsId = e.name;
			if(e.value) { //勾选
				this.businessId = this.list2.find(listItem => listItem.goodsId == goodsId).businessId;
				this.list2.forEach(listItem => {
					if(listItem.businessId != this.businessId) {
						listItem.disabled = true;
					}
				})
			} else { //取消
				this.$nextTick(() => {
					let checkedNum = this.list2.filter(listItem => {
						if(listItem.checked) {
							return true;
						} else {
							if(this.list.length) {
								return true;
							} else {
								return false;
							}
						}
					}).length;
					
					if(checkedNum == 0) { //全部取消,且没有已选择的
						this.businessId = '';
						this.list2.forEach(listItem => {
							console.log(listItem)
							listItem.disabled = false;
						})
					}
				})
				
			}
		},
		checkSameItem() {
			this.list2.map(val => {
				val.disabled = false;
				if(this.businessId) {
					if(val.businessId != this.businessId) {
						val.disabled = true;
					}
				}
				this.list.map(val1 => {
					if (val.goodsId == val1.goodsId) {
						val.disabled = true;
					}
					val.checked = false;
				});
			});
		},
		delItem(index, ids) {
			this.list.splice(index, 1);
			if (this.list.length === 0) {
				this.businessId = '';
				this.form.category = '';
			} else {
				this.form.category = this.list[0].educationName + '-' + this.list[0].projectName + '-' + this.list[0].businessName;
			}
		},
		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 lang="scss">
.dis_ss {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 22rpx 0rpx;
	border-bottom: 1rpx solid #eee;
}
.getNums {
	margin-left: 14rpx;
	color: #007aff;
	font-size: 30rpx;
	font-weight: bold;
	display: inline-block;
	text-decoration: underline;
}
.submit_btn {
	width: 526rpx;
	height: 80rpx;
	background: #007aff;
	border-radius: 40rpx;
	text-align: center;
	line-height: 80rpx;
	color: #ffffff;
	margin: 30rpx auto;
}
.picker {
	text-align: right;
}
.form {
	padding: 0 16rpx !important;
	margin-top: 16rpx;
}
input {
	text-align: right;
}
.popup_item {
	width: 100%;
	border-radius: 32rpx;
	margin: 10rpx 0;
	padding: 0 20rpx;
	display: flex;
	
	.course_item {
		display: flex;
		align-items: center;
		width:660rpx;
		padding:26rpx;
		
		&.selected {
			background:#EBF5FF;
			border-radius: 24rpx;
		}
	}
}
.popup_list {
	position:relative;
	flex:1;
	padding: 0 20rpx;
	
	.list_in {
		position: absolute;
		left:0;
		top:0;
		width:100%;
		height:100%;
		overflow: scroll;
	}
}
.submit_wrap {
	border-top:1px solid #eee;
	background:#fff;
	padding:18rpx 0;
	
	
	.title_l {
		margin:0 auto;
		text-align: center;
		line-height: 64rpx;
		width: 200rpx;
		height: 64rpx;
		background: linear-gradient(0deg, #015EEA, #00C0FA);
		border-radius: 32rpx;
		color:#fff;
		font-size: 30rpx;
	}
}
.title_r {
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #2f4379;
}
.grade {
	font-size: 24rpx;
	color: #999999;
	margin: 0 auto;
	margin: 10rpx 0;
	text-align: center;
}
.line1 {
	width: 80rpx;
	height: 8rpx;
	background: #999999;
	border-radius: 4rpx;
	margin: 0 auto;
	margin-top: 15rpx;
}
.popup_box {
	height: 680rpx;
	display: flex;
	flex-direction: column;
}
.del_icon {
	border-radius:50%;
	overflow: hidden;
	background:rgba(255,54,87,1);
	width: 30rpx;
	height: 30rpx;
	position: absolute;
	right: -15rpx;
	top: -15rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	
}
.item_add {
	background: #f9f9f9;
	border-radius: 14rpx;
	width: 100%;
	height: 134rpx;
	text-align: center;
	line-height: 134rpx;
}
.item text {
	font-size: 24rpx;
	color: #0c141f;
	
}
.item image {
	border-radius: 14rpx;
	width: 100%;
	height: 134rpx;
}
.item {
	width:278rpx;
	display: inline-block;
	position: relative;
	margin-right:16rpx;
}
.list_box {
	width: 100%;
	background: #ffffff;
	border-radius: 16rpx;
	padding: 24rpx;
}

page {
	background:rgba(234,238,241,1)
}
</style>