|
@@ -1,201 +1,213 @@
|
1
|
|
-<template>
|
2
|
|
- <view>
|
3
|
|
- <cu-custom :isBack="true" title="一键报课"></cu-custom>
|
4
|
|
- <view class="VerticalBox">
|
5
|
|
- <scroll-view class="VerticalNav nav" scroll-y scroll-with-animation :scroll-top="verticalNavTop" :style="'height:calc(100vh - 70px - '+topHeader+'px)'">
|
6
|
|
- <view class="cu-item" :class="index==tabCur?'text-green cur':''" v-for="(item,index) in attends" :key="index" @tap="TabSelect"
|
7
|
|
- :data-id="index">
|
8
|
|
- {{weekList[index]}}
|
9
|
|
- </view>
|
10
|
|
- </scroll-view>
|
11
|
|
- <scroll-view class="VerticalMain padding-sm" scroll-y scroll-with-animation :style="'height:calc(100vh - 70px - '+topHeader+'px)'"
|
12
|
|
- :scroll-into-view="'main-'+mainCur" @scroll="VerticalMain">
|
13
|
|
- <radio-group @change="changeClass" style="width:100%;" v-for="(attend,i) in attends" :key="i">
|
14
|
|
- <view class="cu-item bg-white padding margin-bottom-sm" v-for="(item,index) in attend" v-show="i==mainCur" :key="index" :id="'main-'+index">
|
15
|
|
- <view class="cu-bar solid-bottom">
|
16
|
|
- <view>
|
17
|
|
- <label>
|
18
|
|
- <view class="flex justify-between align-center">
|
19
|
|
- <view><text>{{item.attend_name}}</text></view>
|
20
|
|
- <view>
|
21
|
|
- <radio :value="item.class_attend_id"
|
22
|
|
- :disabled="!item.enable"
|
23
|
|
- :class="{'disabled':!item.enable}"
|
24
|
|
- :checked="checked.includes(item.class_attend_id)" class="cyan" style="transform:scale(0.7)"/>
|
25
|
|
- </view>
|
26
|
|
- </view>
|
27
|
|
- </label>
|
28
|
|
- </view>
|
29
|
|
- </view>
|
30
|
|
- <view v-if="item.prop.length>0">
|
31
|
|
- <checkbox-group class="checkbox-group margin-top-xs" :data-id="item.class_attend_id" @change="propChange">
|
32
|
|
- <label v-for="prop in item.prop" :key="prop.id">
|
33
|
|
- <view>
|
34
|
|
- <checkbox :value="prop.id"
|
35
|
|
- :disabled="!item.enable"
|
36
|
|
- :class="{'disabled':!item.enable}"
|
37
|
|
- :checked="checked_props[mainCur].class_attend_id===item.class_attend_id&&checked_props[mainCur].prop.includes(prop.id+'')" class="cyan" style="transform:scale(0.7)"/>{{prop.name}}<text>¥{{prop.money}}</text>
|
38
|
|
- </view>
|
39
|
|
- </label>
|
40
|
|
- </checkbox-group>
|
41
|
|
- </view>
|
42
|
|
- </view>
|
43
|
|
- </radio-group>
|
44
|
|
- </scroll-view>
|
45
|
|
- </view>
|
46
|
|
- <view class="static shadow">
|
47
|
|
- <view class="static-order flex">
|
48
|
|
- <shop-cart :class_attend_id="attend_id"></shop-cart>
|
49
|
|
- <button class="cu-btn round bg-student text-white margin-left-xs" @tap="addCart">报课</button>
|
50
|
|
- </view>
|
51
|
|
- </view>
|
52
|
|
- </view>
|
53
|
|
-</template>
|
54
|
|
-
|
55
|
|
-<script>
|
56
|
|
-import { _gift, _joinShops } from '@/api/course'
|
57
|
|
-import { mapGetters } from 'vuex'
|
58
|
|
-import shopCart from '@/components/shop-cart.vue'
|
59
|
|
-export default {
|
60
|
|
- components: {
|
61
|
|
- shopCart
|
62
|
|
- },
|
63
|
|
- data() {
|
64
|
|
- return {
|
65
|
|
- topHeader: this.globalCustomBarHeight,
|
66
|
|
- package_id: 0,
|
67
|
|
- attends: [],
|
68
|
|
- weekList: [],
|
69
|
|
- attend_id: 0, // 添加成功课程
|
70
|
|
- checked: [], // 选中
|
71
|
|
- checked_props: [], // 选中工具
|
72
|
|
- tabCur: 1,
|
73
|
|
- mainCur: 1,
|
74
|
|
- verticalNavTop: 0
|
75
|
|
- }
|
76
|
|
- },
|
77
|
|
- computed: {
|
78
|
|
- ...mapGetters(['kid'])
|
79
|
|
- },
|
80
|
|
- onLoad(options) {
|
81
|
|
- const id = decodeURIComponent(options.package_id)
|
82
|
|
- this.package_id = id
|
83
|
|
- this.init()
|
84
|
|
- },
|
85
|
|
- methods: {
|
86
|
|
- init() {
|
87
|
|
- _gift({ class_package_id: this.package_id }).then(res => {
|
88
|
|
- this.attends = res.data.attends
|
89
|
|
- Object.keys(this.attends).forEach(item => {
|
90
|
|
- this.$set(this.checked_props, item, { prop: [] })
|
91
|
|
- })
|
92
|
|
- this.weekList = res.data.week_list
|
93
|
|
- })
|
94
|
|
- },
|
95
|
|
- addCart() {
|
96
|
|
- const _self = this
|
97
|
|
- const list = this.checked_props.filter(item => item.class_attend_id).map(item => {
|
98
|
|
- return {
|
99
|
|
- class_attend_id: item.class_attend_id,
|
100
|
|
- prop: item.prop.join(','),
|
101
|
|
- student_id: this.kid
|
102
|
|
- }
|
103
|
|
- })
|
104
|
|
- if (list.length < 1) {
|
105
|
|
- uni.showToast({ title: '请先选择课程', icon: 'none' })
|
106
|
|
- return false
|
107
|
|
- }
|
108
|
|
- _joinShops({ list }).then(res => {
|
109
|
|
- if (res.code === 1) {
|
110
|
|
- _self.globalNavigateTo('classCart')
|
111
|
|
- }
|
112
|
|
- })
|
113
|
|
- },
|
114
|
|
- TabSelect(e) {
|
115
|
|
- this.tabCur = e.currentTarget.dataset.id
|
116
|
|
- this.mainCur = e.currentTarget.dataset.id
|
117
|
|
- this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 50
|
118
|
|
- },
|
119
|
|
- changeClass(e) {
|
120
|
|
- const value = Number(e.detail.value)
|
121
|
|
- this.checked[this.mainCur] = value
|
122
|
|
- this.$set(this.checked, this.mainCur, value)
|
123
|
|
- this.$set(this.checked_props, this.mainCur, { class_attend_id: value, prop: [] })
|
124
|
|
- },
|
125
|
|
- propChange(e) {
|
126
|
|
- const parentId = e.target.dataset.id
|
127
|
|
- const values = e.detail.value
|
128
|
|
- if (!this.checked.includes(parentId)) {
|
129
|
|
- this.$set(this.checked, this.mainCur, parentId)
|
130
|
|
- }
|
131
|
|
- const item = { class_attend_id: parentId, prop: values }
|
132
|
|
- this.$set(this.checked_props, this.mainCur, item)
|
133
|
|
- },
|
134
|
|
- VerticalMain(e) {
|
135
|
|
-
|
136
|
|
- }
|
137
|
|
- }
|
138
|
|
-}
|
139
|
|
-</script>
|
140
|
|
-
|
141
|
|
-<style lang="scss" scoped>
|
142
|
|
- ::v-deep radio.disabled::before,::v-deep checkbox.disabled::before{
|
143
|
|
- color:#e1e1e1 !important;
|
144
|
|
- }
|
145
|
|
- .static{
|
146
|
|
- position: fixed;
|
147
|
|
- left: 0;
|
148
|
|
- right: 0;
|
149
|
|
- bottom: 0;
|
150
|
|
- display: flex;
|
151
|
|
- background: #fff;
|
152
|
|
- height: 70px;
|
153
|
|
- align-items: center;
|
154
|
|
- padding: 0 0.8rem;
|
155
|
|
- justify-content: flex-end;
|
156
|
|
- }
|
157
|
|
- .fixed {
|
158
|
|
- position: fixed;
|
159
|
|
- z-index: 99;
|
160
|
|
- }
|
161
|
|
- .VerticalNav.nav {
|
162
|
|
- width: 200upx;
|
163
|
|
- white-space: initial;
|
164
|
|
- }
|
165
|
|
-
|
166
|
|
- .VerticalNav.nav .cu-item {
|
167
|
|
- width: 100%;
|
168
|
|
- text-align: center;
|
169
|
|
- background-color: #fff;
|
170
|
|
- margin: 0;
|
171
|
|
- border: none;
|
172
|
|
- height: 50px;
|
173
|
|
- position: relative;
|
174
|
|
- }
|
175
|
|
-
|
176
|
|
- .VerticalNav.nav .cu-item.cur {
|
177
|
|
- background-color: #f1f1f1;
|
178
|
|
- }
|
179
|
|
-
|
180
|
|
- .VerticalNav.nav .cu-item.cur::after {
|
181
|
|
- content: "";
|
182
|
|
- width: 8upx;
|
183
|
|
- height: 30upx;
|
184
|
|
- border-radius: 10upx 0 0 10upx;
|
185
|
|
- position: absolute;
|
186
|
|
- background-color: currentColor;
|
187
|
|
- top: 0;
|
188
|
|
- right: 0upx;
|
189
|
|
- bottom: 0;
|
190
|
|
- margin: auto;
|
191
|
|
- }
|
192
|
|
-
|
193
|
|
- .VerticalBox {
|
194
|
|
- display: flex;
|
195
|
|
- }
|
196
|
|
-
|
197
|
|
- .VerticalMain {
|
198
|
|
- background-color: #f1f1f1;
|
199
|
|
- flex: 1;
|
200
|
|
- }
|
201
|
|
-</style>
|
|
1
|
+<template>
|
|
2
|
+ <view>
|
|
3
|
+ <cu-custom :isBack="true" title="一键报课"></cu-custom>
|
|
4
|
+ <view class="VerticalBox">
|
|
5
|
+ <scroll-view class="VerticalNav nav" scroll-y scroll-with-animation :scroll-top="verticalNavTop" :style="'height:calc(100vh - 70px - '+topHeader+'px)'">
|
|
6
|
+ <view class="cu-item" :class="index==tabCur?'text-green cur':''" v-for="(item,index) in attends" :key="index" @tap="TabSelect"
|
|
7
|
+ :data-id="index">
|
|
8
|
+ {{weekList[index]}}
|
|
9
|
+ </view>
|
|
10
|
+ </scroll-view>
|
|
11
|
+ <scroll-view class="VerticalMain padding-sm" scroll-y scroll-with-animation :style="'height:calc(100vh - 70px - '+topHeader+'px)'"
|
|
12
|
+ :scroll-into-view="'main-'+mainCur" @scroll="VerticalMain">
|
|
13
|
+ <radio-group @change="changeClass" style="width:100%;" v-for="(attend,i) in attends" :key="i">
|
|
14
|
+ <view class="cu-item bg-white padding margin-bottom-sm" v-for="(item,index) in attend" v-show="i==mainCur" :key="index" :id="'main-'+index">
|
|
15
|
+ <view class="cu-bar solid-bottom">
|
|
16
|
+ <view>
|
|
17
|
+ <label>
|
|
18
|
+ <view class="flex justify-between align-center">
|
|
19
|
+ <view><text>{{item.attend_name}}</text></view>
|
|
20
|
+ <view>
|
|
21
|
+ <radio :value="item.class_attend_id"
|
|
22
|
+ :disabled="!item.enable"
|
|
23
|
+ :class="{'disabled':!item.enable}"
|
|
24
|
+ :checked="checked.includes(item.class_attend_id)" class="cyan" style="transform:scale(0.7)"/>
|
|
25
|
+ </view>
|
|
26
|
+ </view>
|
|
27
|
+ </label>
|
|
28
|
+ </view>
|
|
29
|
+ </view>
|
|
30
|
+ <view v-if="item.prop.length>0">
|
|
31
|
+ <checkbox-group class="checkbox-group margin-top-xs" :data-id="item.class_attend_id" @change="propChange">
|
|
32
|
+ <label v-for="prop in item.prop" :key="prop.id">
|
|
33
|
+ <view>
|
|
34
|
+ <checkbox :value="prop.id"
|
|
35
|
+ :disabled="!item.enable"
|
|
36
|
+ :class="{'disabled':!item.enable}"
|
|
37
|
+ :checked="checked_props[mainCur].class_attend_id===item.class_attend_id&&checked_props[mainCur].prop.includes(prop.id+'')" class="cyan" style="transform:scale(0.7)"/>{{prop.name}}<text>¥{{prop.money}}</text>
|
|
38
|
+ </view>
|
|
39
|
+ </label>
|
|
40
|
+ </checkbox-group>
|
|
41
|
+ </view>
|
|
42
|
+ </view>
|
|
43
|
+ </radio-group>
|
|
44
|
+ </scroll-view>
|
|
45
|
+ </view>
|
|
46
|
+ <view class="static shadow">
|
|
47
|
+ <view class="static-order flex">
|
|
48
|
+ <shop-cart :class_attend_id="attend_id" @changeDisableBtn="changeDisableBtn"></shop-cart>
|
|
49
|
+ <button class="cu-btn round bg-student text-white margin-left-xs" @tap="addCart">报课</button>
|
|
50
|
+ </view>
|
|
51
|
+ </view>
|
|
52
|
+ </view>
|
|
53
|
+</template>
|
|
54
|
+
|
|
55
|
+<script>
|
|
56
|
+import { _gift, _joinShops } from '@/api/course'
|
|
57
|
+import { mapGetters } from 'vuex'
|
|
58
|
+import shopCart from '@/components/shop-cart.vue'
|
|
59
|
+export default {
|
|
60
|
+ components: {
|
|
61
|
+ shopCart
|
|
62
|
+ },
|
|
63
|
+ data() {
|
|
64
|
+ return {
|
|
65
|
+ topHeader: this.globalCustomBarHeight,
|
|
66
|
+ package_id: 0,
|
|
67
|
+ attends: [],
|
|
68
|
+ weekList: [],
|
|
69
|
+ attend_id: 0, // 添加成功课程
|
|
70
|
+ checked: [], // 选中
|
|
71
|
+ checked_props: [], // 选中工具
|
|
72
|
+ tabCur: 1,
|
|
73
|
+ mainCur: 1,
|
|
74
|
+ verticalNavTop: 0,
|
|
75
|
+ disableBtn: false // 避免多次重复点击
|
|
76
|
+ }
|
|
77
|
+ },
|
|
78
|
+ computed: {
|
|
79
|
+ ...mapGetters(['kid'])
|
|
80
|
+ },
|
|
81
|
+ onLoad(options) {
|
|
82
|
+ const id = decodeURIComponent(options.package_id)
|
|
83
|
+ this.package_id = id
|
|
84
|
+ this.init()
|
|
85
|
+ },
|
|
86
|
+ onShow() {
|
|
87
|
+ this.disableBtn = false
|
|
88
|
+ },
|
|
89
|
+ methods: {
|
|
90
|
+ init() {
|
|
91
|
+ _gift({ class_package_id: this.package_id }).then(res => {
|
|
92
|
+ this.attends = res.data.attends
|
|
93
|
+ Object.keys(this.attends).forEach(item => {
|
|
94
|
+ this.$set(this.checked_props, item, { prop: [] })
|
|
95
|
+ })
|
|
96
|
+ this.weekList = res.data.week_list
|
|
97
|
+ })
|
|
98
|
+ },
|
|
99
|
+ changeDisableBtn() {
|
|
100
|
+ this.disableBtn = true
|
|
101
|
+ },
|
|
102
|
+ addCart() {
|
|
103
|
+ if (this.disableBtn) return false
|
|
104
|
+ this.disableBtn = true
|
|
105
|
+ const _self = this
|
|
106
|
+ const list = this.checked_props.filter(item => item.class_attend_id).map(item => {
|
|
107
|
+ return {
|
|
108
|
+ class_attend_id: item.class_attend_id,
|
|
109
|
+ prop: item.prop.join(','),
|
|
110
|
+ student_id: this.kid
|
|
111
|
+ }
|
|
112
|
+ })
|
|
113
|
+ if (list.length < 1) {
|
|
114
|
+ uni.showToast({ title: '请先选择课程', icon: 'none' })
|
|
115
|
+ this.disableBtn = false
|
|
116
|
+ return false
|
|
117
|
+ }
|
|
118
|
+ _joinShops({ list }).then(res => {
|
|
119
|
+ if (res.code === 1) {
|
|
120
|
+ _self.globalNavigateTo('classCart')
|
|
121
|
+ } else {
|
|
122
|
+ this.disableBtn = false
|
|
123
|
+ }
|
|
124
|
+ })
|
|
125
|
+ },
|
|
126
|
+ TabSelect(e) {
|
|
127
|
+ this.tabCur = e.currentTarget.dataset.id
|
|
128
|
+ this.mainCur = e.currentTarget.dataset.id
|
|
129
|
+ this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 50
|
|
130
|
+ },
|
|
131
|
+ changeClass(e) {
|
|
132
|
+ const value = Number(e.detail.value)
|
|
133
|
+ this.checked[this.mainCur] = value
|
|
134
|
+ this.$set(this.checked, this.mainCur, value)
|
|
135
|
+ this.$set(this.checked_props, this.mainCur, { class_attend_id: value, prop: [] })
|
|
136
|
+ },
|
|
137
|
+ propChange(e) {
|
|
138
|
+ const parentId = e.target.dataset.id
|
|
139
|
+ const values = e.detail.value
|
|
140
|
+ if (!this.checked.includes(parentId)) {
|
|
141
|
+ this.$set(this.checked, this.mainCur, parentId)
|
|
142
|
+ }
|
|
143
|
+ const item = { class_attend_id: parentId, prop: values }
|
|
144
|
+ this.$set(this.checked_props, this.mainCur, item)
|
|
145
|
+ },
|
|
146
|
+ VerticalMain(e) {
|
|
147
|
+
|
|
148
|
+ }
|
|
149
|
+ }
|
|
150
|
+}
|
|
151
|
+</script>
|
|
152
|
+
|
|
153
|
+<style lang="scss" scoped>
|
|
154
|
+ ::v-deep radio.disabled::before,::v-deep checkbox.disabled::before{
|
|
155
|
+ color:#e1e1e1 !important;
|
|
156
|
+ }
|
|
157
|
+ .static{
|
|
158
|
+ position: fixed;
|
|
159
|
+ left: 0;
|
|
160
|
+ right: 0;
|
|
161
|
+ bottom: 0;
|
|
162
|
+ display: flex;
|
|
163
|
+ background: #fff;
|
|
164
|
+ height: 70px;
|
|
165
|
+ align-items: center;
|
|
166
|
+ padding: 0 0.8rem;
|
|
167
|
+ justify-content: flex-end;
|
|
168
|
+ }
|
|
169
|
+ .fixed {
|
|
170
|
+ position: fixed;
|
|
171
|
+ z-index: 99;
|
|
172
|
+ }
|
|
173
|
+ .VerticalNav.nav {
|
|
174
|
+ width: 200upx;
|
|
175
|
+ white-space: initial;
|
|
176
|
+ }
|
|
177
|
+
|
|
178
|
+ .VerticalNav.nav .cu-item {
|
|
179
|
+ width: 100%;
|
|
180
|
+ text-align: center;
|
|
181
|
+ background-color: #fff;
|
|
182
|
+ margin: 0;
|
|
183
|
+ border: none;
|
|
184
|
+ height: 50px;
|
|
185
|
+ position: relative;
|
|
186
|
+ }
|
|
187
|
+
|
|
188
|
+ .VerticalNav.nav .cu-item.cur {
|
|
189
|
+ background-color: #f1f1f1;
|
|
190
|
+ }
|
|
191
|
+
|
|
192
|
+ .VerticalNav.nav .cu-item.cur::after {
|
|
193
|
+ content: "";
|
|
194
|
+ width: 8upx;
|
|
195
|
+ height: 30upx;
|
|
196
|
+ border-radius: 10upx 0 0 10upx;
|
|
197
|
+ position: absolute;
|
|
198
|
+ background-color: currentColor;
|
|
199
|
+ top: 0;
|
|
200
|
+ right: 0upx;
|
|
201
|
+ bottom: 0;
|
|
202
|
+ margin: auto;
|
|
203
|
+ }
|
|
204
|
+
|
|
205
|
+ .VerticalBox {
|
|
206
|
+ display: flex;
|
|
207
|
+ }
|
|
208
|
+
|
|
209
|
+ .VerticalMain {
|
|
210
|
+ background-color: #f1f1f1;
|
|
211
|
+ flex: 1;
|
|
212
|
+ }
|
|
213
|
+</style>
|