opencourse.vue
4.0 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<template>
<div class="containerbox">
<div class="opencoursetop flexone">
<div class="zhibo flexone" :class="selcourse==1?'courseactive':''" @click="chosecourse(1)">
<img src="../../../assets/zhibocourse.png" alt class="zhiboimg" v-if="selcourse==1" />
<img src="../../../assets/zhibogray.png" alt class="zhiboimg" v-else />
<div class="zhiboname">直播课</div>
</div>
<div
class="zhibo lubo flexone"
:class="selcourse==2?'courseactive':''"
:data-id="2"
@click="chosecourse(2)"
>
<img src="../../../assets/lubowhite.png" alt class="zhiboimg" v-if="selcourse==2" />
<img src="../../../assets/lubo.png" alt class="zhiboimg" v-else />
<div class="zhiboname">录播课</div>
</div>
</div>
<!-- 直播课程 -->
<div class="zhibotextbox" v-if="selcourse==1">
<div class="coursetitle flexone">
<div class="coursename">开课时间</div>
<div class="coursenameright" @click="showdate">
<input type="text" placeholder="开课时间" />
</div>
</div>
<div class="coursetitle flexone">
<div class="coursename">
直播标题
<img src="../../../assets/xuehua.png" alt class="xuehuaimg" />
</div>
<div class="coursenameright">
<input type="text" placeholder="直播标题" />
</div>
</div>
<div class="zhibocontent">
<div class="intro flexone">直播简介</div>
<div class="zhibotextbox">
<textarea name id cols="30" rows="10" placeholder="预设内容"></textarea>
</div>
</div>
<div class="coursetitle flexone">
<div class="coursename">
直播封面图
<img src="../../../assets/xuehua.png" alt class="xuehuaimg" />
</div>
</div>
<div class="courseimgbox">
<img src="../../../assets/addpub.png" alt class="addcourseimg" />
</div>
</div>
<!-- 录播课程 -->
<div class="zhibotextbox" v-if="selcourse==2">
<div class="coursetitle flexone">
<div class="coursename">
录播时间标题
<img src="../../../assets/xuehua.png" alt class="xuehuaimg" />
</div>
<div class="coursenameright">
<input type="text" placeholder="录播时间标题" />
</div>
</div>
<div class="coursetitle flexone">
<div class="coursename">
录播封面图
<img src="../../../assets/xuehua.png" alt class="xuehuaimg" />
</div>
</div>
<div class="courseimgbox">
<img src="../../../assets/addpub.png" alt class="addcourseimg" />
</div>
</div>
<!-- 直播时间 -->
<div class="register" v-if="zhibodate">
<van-datetime-picker
v-model="currentDate"
type="datetime"
title="选择完整时间"
:min-date="minDate"
:max-date="maxDate"
@confirm="sure"
@cancel="cancel"
/>
</div>
<!-- 开始录制 -->
<div class="kaishilu">开始录制</div>
</div>
</template>
<script>
import Vue from 'vue';
import { DatetimePicker } from 'vant';
Vue.use(DatetimePicker);
export default {
data() {
return {
selcourse: 1,
minDate: new Date(2020, 0, 1),
maxDate: new Date(2025, 10, 1),
currentDate: new Date(),
zhibodate: false
}
},
methods: {
chosecourse(event) {
console.log(event)
this.selcourse = event;
},
cancel() {
this.zhibodate = false
},
// 确定选择时间
sure(e) {
console.log(e)
var date = new Date()
// var hour=date.getHour()
let year = e.getFullYear();
var month = e.getMonth() + 1;
var date = e.getDate();
var hour = e.getHours()
var minute = e.getMinutes()
console.log(hour)
this.zhibodate = false
},
showdate() {
this.zhibodate = true
}
}
}
</script>
<style scoped>
@import "../../../style/usercenter.css";
</style>