|
|
@@ -0,0 +1,453 @@
|
|
|
+<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>
|
|
|
+ <view class="list_box form">
|
|
|
+ <view style="height: 80rpx;line-height: 80rpx;color: #007AFF;">
|
|
|
+ 根据当前计划每个学习日需完成 <text style="color: #FF9500;">3</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 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" v-if="list2.length !== 0">
|
|
|
+ <view class="popup_item" v-for="(item, index) in list2" :key="index">
|
|
|
+ <view style="display: flex;align-items: center;">
|
|
|
+ <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 style="display: flex;align-items: center;"><image :src="item.coverUrl" style="width: 278rpx;height: 134rpx;"></image></view>
|
|
|
+ <view style="margin: 30rpx;">{{ item.courseName }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-else><u-empty text="请前往购买课程" mode="list"></u-empty></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: '一、三、五'
|
|
|
+ },
|
|
|
+ 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]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+ 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.getMyCourse();
|
|
|
+ },
|
|
|
+ onShow() {},
|
|
|
+ methods: {
|
|
|
+ resultForm() {
|
|
|
+ if (this.list.length == 0) {
|
|
|
+ uni.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: '请选择课程',
|
|
|
+ showCancel: false
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // if (this.form.week == '请选择') {
|
|
|
+ // 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),
|
|
|
+ studyCount: weekArray.join(','),
|
|
|
+ studyDay: this.array_review[this.index_review],
|
|
|
+ status: 1
|
|
|
+ };
|
|
|
+ console.log(this.form);
|
|
|
+ console.log(data);
|
|
|
+ this.$api.planGenerate(data).then(result => {
|
|
|
+ if (result.data.code == 200) {
|
|
|
+ uni.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: '提交成功',
|
|
|
+ success: function(resst) {
|
|
|
+ uni.navigateBack()
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }else{
|
|
|
+ uni.showToast({
|
|
|
+ title: result.data.msg,
|
|
|
+ icon: 'none',
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ }
|
|
|
+ console.log(result);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ selItem(item) {
|
|
|
+ console.log(34);
|
|
|
+ item.checked = !item.checked;
|
|
|
+ },
|
|
|
+ getMyCourse() {
|
|
|
+ let data = {
|
|
|
+ typeId: 1
|
|
|
+ };
|
|
|
+ let self = this;
|
|
|
+ this.$api.getUserBuy(data).then(result => {
|
|
|
+ if (result.data.data.courseVoList !== null) {
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ 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;
|
|
|
+ this.form.category = this.list[0].categoryName;
|
|
|
+ },
|
|
|
+ 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);
|
|
|
+ if (this.list.length === 0) {
|
|
|
+ this.form.category = '';
|
|
|
+ } else {
|
|
|
+ this.form.category = this.list[0].categoryName;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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 {
|
|
|
+ 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: 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>
|