|
@@ -1,22 +1,22 @@
|
|
|
<template>
|
|
<template>
|
|
|
- <view style="padding: 30rpx;">
|
|
|
|
|
|
|
+ <view style="padding: 16rpx;">
|
|
|
<view class="list_box">
|
|
<view class="list_box">
|
|
|
<view class="item" v-for="(item, index) in list" :key="index">
|
|
<view class="item" v-for="(item, index) in list" :key="index">
|
|
|
<image :src="$method.splitImgHost(item.coverUrl)"></image>
|
|
<image :src="$method.splitImgHost(item.coverUrl)"></image>
|
|
|
<text>{{ item.goodsName }}</text>
|
|
<text>{{ item.goodsName }}</text>
|
|
|
<text style="color:#999;margin-left:12rpx;">{{ item.secAllNum }}节</text>
|
|
<text style="color:#999;margin-left:12rpx;">{{ item.secAllNum }}节</text>
|
|
|
- <view class="del_icon"><u-icon name="minus-circle-fill" color="#EB4D3D" size="40" @click="delItem(index, item.goodsId)"></u-icon></view>
|
|
|
|
|
|
|
+ <view class="del_icon"><u-icon name="close" color="#fff" size="20" @click="delItem(index, item.goodsId)"></u-icon></view>
|
|
|
</view>
|
|
</view>
|
|
|
<view class="item" style="vertical-align: top;">
|
|
<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 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 style="color:#999;text-align: center;">添加网课</view>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
<view class="list_box form">
|
|
<view class="list_box form">
|
|
|
<u-form :model="form" ref="uForm">
|
|
<u-form :model="form" ref="uForm">
|
|
|
<u-form-item label="课程类型" :label-width="auto">
|
|
<u-form-item label="课程类型" :label-width="auto">
|
|
|
- <view style="line-height: 40rpx;" v-if="form.category">{{ form.category }}</view>
|
|
|
|
|
- <view v-else style="text-align: end;">请添加网课</view>
|
|
|
|
|
|
|
+ <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>
|
|
|
<u-form-item label="考试日期" prop="birth" :label-width="auto">
|
|
<u-form-item label="考试日期" prop="birth" :label-width="auto">
|
|
|
<picker mode="date" :value="form.date" @change="bindDateChange">
|
|
<picker mode="date" :value="form.date" @change="bindDateChange">
|
|
@@ -66,33 +66,43 @@
|
|
|
</u-popup>
|
|
</u-popup>
|
|
|
<u-popup v-model="show" mode="bottom">
|
|
<u-popup v-model="show" mode="bottom">
|
|
|
<view class="popup_box">
|
|
<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="line1"></view>
|
|
|
|
|
+ <view class="grade">选择课程</view>
|
|
|
|
|
+ <u-line></u-line>
|
|
|
</view>
|
|
</view>
|
|
|
<view class="popup_list" v-if="list2.length !== 0">
|
|
<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="list2[index].checked"
|
|
|
|
|
- :key="index"
|
|
|
|
|
- :name="item.goodsId"
|
|
|
|
|
- ></u-checkbox>
|
|
|
|
|
|
|
+ <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>
|
|
</view>
|
|
|
- <view style="display: flex;align-items: center;"><image :src="$method.splitImgHost(item.coverUrl)" style="width: 278rpx;height: 134rpx;"></image></view>
|
|
|
|
|
- <view style="margin: 30rpx;">
|
|
|
|
|
- <view>{{ item.goodsName }}</view>
|
|
|
|
|
- <view style="color:#999;">{{ item.secAllNum }}节</view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </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>
|
|
|
- <view v-else><u-empty text="请前往购买课程" mode="list"></u-empty></view>
|
|
|
|
|
</view>
|
|
</view>
|
|
|
</u-popup>
|
|
</u-popup>
|
|
|
<view @click="resultForm" class="submit_btn">确认计划</view>
|
|
<view @click="resultForm" class="submit_btn">确认计划</view>
|
|
@@ -112,6 +122,7 @@ export default {
|
|
|
endDate: '2021-05-31',
|
|
endDate: '2021-05-31',
|
|
|
week: '一、三、五'
|
|
week: '一、三、五'
|
|
|
},
|
|
},
|
|
|
|
|
+ businessId:'',
|
|
|
calendar: 'range',
|
|
calendar: 'range',
|
|
|
list: [],
|
|
list: [],
|
|
|
list2: [],
|
|
list2: [],
|
|
@@ -301,6 +312,7 @@ export default {
|
|
|
this.index_review = res.data.data.studyDay - 1;
|
|
this.index_review = res.data.data.studyDay - 1;
|
|
|
this.form.week = res.data.data.studyCount;
|
|
this.form.week = res.data.data.studyCount;
|
|
|
this.list = res.data.data.goodsVos;
|
|
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;
|
|
this.form.category = this.list[0].educationName + '-' + this.list[0].projectName + '-' + this.list[0].businessName;
|
|
|
var numWeek = [];
|
|
var numWeek = [];
|
|
|
this.form.week.forEach((items, indexs) => {
|
|
this.form.week.forEach((items, indexs) => {
|
|
@@ -392,10 +404,48 @@ export default {
|
|
|
this.form.category = this.list[0].educationName + '-' + this.list[0].projectName + '-' + this.list[0].businessName;
|
|
this.form.category = this.list[0].educationName + '-' + this.list[0].projectName + '-' + this.list[0].businessName;
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
- checkboxChange(e) {},
|
|
|
|
|
|
|
+ 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() {
|
|
checkSameItem() {
|
|
|
this.list2.map(val => {
|
|
this.list2.map(val => {
|
|
|
val.disabled = false;
|
|
val.disabled = false;
|
|
|
|
|
+ if(this.businessId) {
|
|
|
|
|
+ if(val.businessId != this.businessId) {
|
|
|
|
|
+ val.disabled = true;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
this.list.map(val1 => {
|
|
this.list.map(val1 => {
|
|
|
if (val.goodsId == val1.goodsId) {
|
|
if (val.goodsId == val1.goodsId) {
|
|
|
val.disabled = true;
|
|
val.disabled = true;
|
|
@@ -407,6 +457,7 @@ export default {
|
|
|
delItem(index, ids) {
|
|
delItem(index, ids) {
|
|
|
this.list.splice(index, 1);
|
|
this.list.splice(index, 1);
|
|
|
if (this.list.length === 0) {
|
|
if (this.list.length === 0) {
|
|
|
|
|
+ this.businessId = '';
|
|
|
this.form.category = '';
|
|
this.form.category = '';
|
|
|
} else {
|
|
} else {
|
|
|
this.form.category = this.list[0].educationName + '-' + this.list[0].projectName + '-' + this.list[0].businessName;
|
|
this.form.category = this.list[0].educationName + '-' + this.list[0].projectName + '-' + this.list[0].businessName;
|
|
@@ -430,7 +481,7 @@ export default {
|
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
|
}
|
|
}
|
|
|
</style>
|
|
</style>
|
|
|
-<style scope>
|
|
|
|
|
|
|
+<style scope lang="scss">
|
|
|
.dis_ss {
|
|
.dis_ss {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
@@ -462,34 +513,61 @@ export default {
|
|
|
}
|
|
}
|
|
|
.form {
|
|
.form {
|
|
|
padding: 0 16rpx !important;
|
|
padding: 0 16rpx !important;
|
|
|
- margin-top: 30rpx;
|
|
|
|
|
|
|
+ margin-top: 16rpx;
|
|
|
}
|
|
}
|
|
|
input {
|
|
input {
|
|
|
text-align: right;
|
|
text-align: right;
|
|
|
}
|
|
}
|
|
|
.popup_item {
|
|
.popup_item {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
- height: 182rpx;
|
|
|
|
|
- background: #ffffff;
|
|
|
|
|
- box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
|
|
|
|
|
border-radius: 32rpx;
|
|
border-radius: 32rpx;
|
|
|
- margin: 20rpx 0;
|
|
|
|
|
- padding: 10rpx;
|
|
|
|
|
|
|
+ margin: 10rpx 0;
|
|
|
|
|
+ padding: 0 20rpx;
|
|
|
display: flex;
|
|
display: flex;
|
|
|
|
|
+
|
|
|
|
|
+ .course_item {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ width:660rpx;
|
|
|
|
|
+ padding:26rpx;
|
|
|
|
|
+
|
|
|
|
|
+ &.selected {
|
|
|
|
|
+ background:#EBF5FF;
|
|
|
|
|
+ border-radius: 24rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
.popup_list {
|
|
.popup_list {
|
|
|
- height: 500rpx;
|
|
|
|
|
|
|
+ position:relative;
|
|
|
|
|
+ flex:1;
|
|
|
padding: 0 20rpx;
|
|
padding: 0 20rpx;
|
|
|
|
|
+
|
|
|
|
|
+ .list_in {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ left:0;
|
|
|
|
|
+ top:0;
|
|
|
|
|
+ width:100%;
|
|
|
|
|
+ height:100%;
|
|
|
|
|
+ overflow: scroll;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
-.title_l {
|
|
|
|
|
- width: 88rpx;
|
|
|
|
|
- height: 48rpx;
|
|
|
|
|
- background: #32467b;
|
|
|
|
|
- border-radius: 16rpx;
|
|
|
|
|
- font-size: 28rpx;
|
|
|
|
|
- color: #ffffff;
|
|
|
|
|
- text-align: center;
|
|
|
|
|
- line-height: 48rpx;
|
|
|
|
|
|
|
+.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 {
|
|
.title_r {
|
|
|
font-size: 30rpx;
|
|
font-size: 30rpx;
|
|
@@ -497,50 +575,72 @@ input {
|
|
|
font-weight: bold;
|
|
font-weight: bold;
|
|
|
color: #2f4379;
|
|
color: #2f4379;
|
|
|
}
|
|
}
|
|
|
-.popup_title {
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- margin: 40rpx;
|
|
|
|
|
|
|
+.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 {
|
|
.popup_box {
|
|
|
- height: 600rpx;
|
|
|
|
|
|
|
+ height: 680rpx;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
}
|
|
}
|
|
|
.del_icon {
|
|
.del_icon {
|
|
|
|
|
+ border-radius:50%;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ background:rgba(255,54,87,1);
|
|
|
|
|
+ width: 30rpx;
|
|
|
|
|
+ height: 30rpx;
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
right: -15rpx;
|
|
right: -15rpx;
|
|
|
top: -15rpx;
|
|
top: -15rpx;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+
|
|
|
}
|
|
}
|
|
|
.item_add {
|
|
.item_add {
|
|
|
background: #f9f9f9;
|
|
background: #f9f9f9;
|
|
|
- border-radius: 32rpx;
|
|
|
|
|
|
|
+ border-radius: 14rpx;
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
- height: 150rpx;
|
|
|
|
|
|
|
+ height: 134rpx;
|
|
|
text-align: center;
|
|
text-align: center;
|
|
|
- line-height: 150rpx;
|
|
|
|
|
|
|
+ line-height: 134rpx;
|
|
|
}
|
|
}
|
|
|
.item text {
|
|
.item text {
|
|
|
font-size: 24rpx;
|
|
font-size: 24rpx;
|
|
|
color: #0c141f;
|
|
color: #0c141f;
|
|
|
|
|
+
|
|
|
}
|
|
}
|
|
|
.item image {
|
|
.item image {
|
|
|
- border-radius: 32rpx;
|
|
|
|
|
|
|
+ border-radius: 14rpx;
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
- height: 150rpx;
|
|
|
|
|
|
|
+ height: 134rpx;
|
|
|
}
|
|
}
|
|
|
.item {
|
|
.item {
|
|
|
- width: 46%;
|
|
|
|
|
|
|
+ width:278rpx;
|
|
|
display: inline-block;
|
|
display: inline-block;
|
|
|
- margin: 1% 2%;
|
|
|
|
|
position: relative;
|
|
position: relative;
|
|
|
|
|
+ margin-right:16rpx;
|
|
|
}
|
|
}
|
|
|
.list_box {
|
|
.list_box {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
background: #ffffff;
|
|
background: #ffffff;
|
|
|
- box-shadow: 0rpx 0rpx 1rpx 4rpx rgba(145, 156, 178, 0.1);
|
|
|
|
|
- border-radius: 32rpx;
|
|
|
|
|
- padding: 20rpx 0;
|
|
|
|
|
|
|
+ border-radius: 16rpx;
|
|
|
|
|
+ padding: 24rpx;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
page {
|
|
page {
|
|
|
- background: #ffffff;
|
|
|
|
|
|
|
+ background:rgba(234,238,241,1)
|
|
|
}
|
|
}
|
|
|
</style>
|
|
</style>
|