|
@@ -17,30 +17,37 @@
|
17
|
17
|
<view class="students-title flex justify-between align-center">
|
18
|
18
|
<view class="text-lg">学生列表</view>
|
19
|
19
|
<view class="text-xs text-grey">
|
20
|
|
- <text class="text-red">点击选择,左滑删除,右侧添加</text>
|
21
|
|
- <text class="cuIcon-roundaddfill text-cyan margin-left-xl add-icon" @tap="showModal"
|
22
|
|
- data-target="ChooseModal"></text>
|
|
20
|
+ <text class="text-red">点击选择,左滑操作,右侧添加</text>
|
|
21
|
+ <text class="cuIcon-roundaddfill text-cyan margin-left-xl add-icon" @tap="showModal" data-target="ChooseModal"></text>
|
23
|
22
|
</view>
|
24
|
23
|
</view>
|
25
|
24
|
<view class="padding-lr text-right" v-if="!phone">
|
26
|
25
|
<text class="text-red text-xs">右侧点击绑定手机号,直接获取绑定学生列表</text>
|
27
|
26
|
<text class="cuIcon-mobile text-cyan add-icon margin-left-xl" @tap="globalNavigateTo('bindPhone')"></text>
|
28
|
27
|
</view>
|
29
|
|
- <scroll-view scroll-y :style="[{height:'calc(100vh - 230px - '+ topHeader+'px)'}]">
|
|
28
|
+ <scroll-view scroll-y :style="[{ height: 'calc(100vh - 230px - ' + topHeader + 'px)' }]">
|
30
|
29
|
<view class="cu-list menu-avatar">
|
31
|
|
- <view class="cu-item" :class="moveModel=='move-box-'+ index?'move-cur':''"
|
32
|
|
- v-for="(item,index) in result.student_data" :key="index" @touchstart="ListTouchStart"
|
33
|
|
- @touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + index"
|
34
|
|
- @tap="chooseKid(item.id)">
|
|
30
|
+ <view
|
|
31
|
+ class="cu-item"
|
|
32
|
+ :class="moveModel == 'move-box-' + index ? 'move-cur' : ''"
|
|
33
|
+ v-for="(item, index) in result.student_data"
|
|
34
|
+ :key="index"
|
|
35
|
+ @touchstart="ListTouchStart"
|
|
36
|
+ @touchmove="ListTouchMove"
|
|
37
|
+ @touchend="ListTouchEnd"
|
|
38
|
+ :data-target="'move-box-' + index"
|
|
39
|
+ @tap="chooseKid(item.id)"
|
|
40
|
+ >
|
35
|
41
|
<image mode="scaleToFill" :src="defaultAvatar" class="avatar md left"></image>
|
36
|
42
|
<view class="content">
|
37
|
|
- <view>{{item.name}}</view>
|
38
|
|
- <view class="text-gray">{{item.school_name}}-{{item.grade_name}}-{{item.class_name}}</view>
|
|
43
|
+ <view>{{ item.name }}</view>
|
|
44
|
+ <view class="text-gray">{{ item.school_name }}-{{ item.grade_name }}-{{ item.class_name }}</view>
|
39
|
45
|
</view>
|
40
|
46
|
<view class="action">
|
41
|
|
- <text class="cuIcon-check text-student font-check" v-if="item.id===kid"></text>
|
|
47
|
+ <text class="cuIcon-check text-student font-check" v-if="item.id === kid"></text>
|
42
|
48
|
</view>
|
43
|
49
|
<view class="move student-move">
|
|
50
|
+ <view class="bg-cyan" @tap.stop="fixStudent(item)">修改</view>
|
44
|
51
|
<view class="bg-red" @tap.stop="unbind(item.id)">删除</view>
|
45
|
52
|
</view>
|
46
|
53
|
</view>
|
|
@@ -50,16 +57,16 @@
|
50
|
57
|
</view>
|
51
|
58
|
</view>
|
52
|
59
|
<!-- 选择学生列表 -->
|
53
|
|
- <view class="cu-modal" :class="modalName=='showStudents'?'show':''" @tap="hideModal">
|
54
|
|
- <view class="cu-dialog bg-student" @tap.stop=''>
|
|
60
|
+ <view class="cu-modal" :class="modalName == 'showStudents' ? 'show' : ''" @tap="hideModal">
|
|
61
|
+ <view class="cu-dialog bg-student" @tap.stop="">
|
55
|
62
|
<view class="padding text-left modal-body radius-student">
|
56
|
63
|
<view class="cu-list menu-avatar">
|
57
|
|
- <view class="cu-item" v-for="(item,index) in chooseList" :key="index" @tap="save(item.id)">
|
58
|
|
- <view class="cu-inner" :class="{'checked':item.id===selectKid}">
|
|
64
|
+ <view class="cu-item" v-for="(item, index) in chooseList" :key="index" @tap="save(item.id)">
|
|
65
|
+ <view class="cu-inner" :class="{ checked: item.id === selectKid }">
|
59
|
66
|
<image mode="scaleToFill" :src="defaultAvatar" class="avatar md left"></image>
|
60
|
67
|
<view class="content">
|
61
|
|
- <view>{{item.name}}</view>
|
62
|
|
- <view class="text-gray">{{item.school_name}}-{{item.grade_name}}-{{item.class_name}}</view>
|
|
68
|
+ <view>{{ item.name }}</view>
|
|
69
|
+ <view class="text-gray">{{ item.school_name }}-{{ item.grade_name }}-{{ item.class_name }}</view>
|
63
|
70
|
</view>
|
64
|
71
|
</view>
|
65
|
72
|
</view>
|
|
@@ -68,19 +75,17 @@
|
68
|
75
|
</view>
|
69
|
76
|
</view>
|
70
|
77
|
<!--添加学生-->
|
71
|
|
- <view class="cu-modal" :class="modalName=='ChooseModal'?'show':''" @tap="hideModal">
|
72
|
|
- <view class="cu-dialog bg-student" @tap.stop=''>
|
|
78
|
+ <view class="cu-modal" :class="modalName == 'ChooseModal' ? 'show' : ''" @tap="hideModal">
|
|
79
|
+ <view class="cu-dialog bg-student" @tap.stop="">
|
73
|
80
|
<view class="cu-bar justify-around">
|
74
|
81
|
<view class="content modal-title">添加学生</view>
|
75
|
82
|
</view>
|
76
|
83
|
<view class="padding-xl text-left modal-body">
|
77
|
84
|
<view>
|
78
|
|
- <input type="text" v-model.trim="student.student_name" placeholder="请输入学生名字"
|
79
|
|
- class="student-input text-black text-lg">
|
|
85
|
+ <input type="text" v-model.trim="student.student_name" placeholder="请输入学生名字" class="student-input text-black text-lg" />
|
80
|
86
|
</view>
|
81
|
87
|
<view class="margin-top" v-if="student.student_name">
|
82
|
|
- <input type="text" v-model.trim="student.school_name" placeholder="请输入学校名称"
|
83
|
|
- class="student-input text-black text-lg">
|
|
88
|
+ <input type="text" v-model.trim="student.school_name" placeholder="请输入学校名称" class="student-input text-black text-lg" />
|
84
|
89
|
</view>
|
85
|
90
|
<view class="margin-top">
|
86
|
91
|
<button class="student-input text-student text-left" @tap="get_students">获取学生</button>
|
|
@@ -91,15 +96,48 @@
|
91
|
96
|
</view>
|
92
|
97
|
</view>
|
93
|
98
|
</view>
|
|
99
|
+ <!-- 修改学生 -->
|
|
100
|
+ <view class="cu-modal" :class="modalName == 'FixModal' ? 'show' : ''" @tap="hideModal">
|
|
101
|
+ <view class="cu-dialog bg-student" @tap.stop="">
|
|
102
|
+ <view class="cu-bar justify-around">
|
|
103
|
+ <view class="content modal-title">修改学生</view>
|
|
104
|
+ </view>
|
|
105
|
+ <view class="padding-xl text-left modal-body">
|
|
106
|
+ <view>{{ info.name }}</view>
|
|
107
|
+ <view class="margin-top">
|
|
108
|
+ <picker class="student-input" @change="gradeChange" :value="gradeIndex" :range="grades" range-key="name">
|
|
109
|
+ <view class="picker text-lg text-black">
|
|
110
|
+ {{ gradeIndex > -1 ? grades[gradeIndex].name : '请选择年级' }}
|
|
111
|
+ </view>
|
|
112
|
+ </picker>
|
|
113
|
+ </view>
|
|
114
|
+ <view class="margin-top">
|
|
115
|
+ <picker class="student-input" @change="classChange" :value="classIndex" :range="classes" range-key="name">
|
|
116
|
+ <view class="picker text-lg text-black">
|
|
117
|
+ {{ classIndex > -1 ? classes[classIndex].name : '请选择班级' }}
|
|
118
|
+ </view>
|
|
119
|
+ </picker>
|
|
120
|
+ <!-- <input type="text" v-model.trim="info.class_name" placeholder="修改班级" class="student-input text-black text-lg" /> -->
|
|
121
|
+ </view>
|
|
122
|
+ </view>
|
|
123
|
+ <view class="cu-bar modal-footer justify-center">
|
|
124
|
+ <view class="action">
|
|
125
|
+ <button class="cu-btn btn-lg round bg-cyan margin-right-sm" @tap="confirmFix">确定</button>
|
|
126
|
+ <button class="cu-btn btn-lg round bg-grey" @tap="hideModal">取消</button>
|
|
127
|
+ </view>
|
|
128
|
+ </view>
|
|
129
|
+ </view>
|
|
130
|
+ </view>
|
94
|
131
|
</view>
|
95
|
132
|
</template>
|
96
|
133
|
|
97
|
134
|
<script>
|
98
|
135
|
import { _getStudents, _bindStudent, _unbindStudent } from '@/api/auth'
|
99
|
|
-import { _shopList } from '@/api/course'
|
|
136
|
+import { _shopList, _getGrades, _getClasses, _fixStudent } from '@/api/course'
|
100
|
137
|
import { mapGetters } from 'vuex'
|
|
138
|
+import validate from '@/common/utils/ys-validate'
|
101
|
139
|
export default {
|
102
|
|
- data () {
|
|
140
|
+ data() {
|
103
|
141
|
return {
|
104
|
142
|
showAdd: false,
|
105
|
143
|
topHeader: this.globalCustomBarHeight,
|
|
@@ -109,6 +147,21 @@ export default {
|
109
|
147
|
student_name: '',
|
110
|
148
|
school_name: ''
|
111
|
149
|
},
|
|
150
|
+ info: {
|
|
151
|
+ id: '',
|
|
152
|
+ name: '',
|
|
153
|
+ school_id: '',
|
|
154
|
+ grade_id: '',
|
|
155
|
+ class_id: ''
|
|
156
|
+ },
|
|
157
|
+ rules: [
|
|
158
|
+ { name: 'grade_id', required: true, type: 'number', errmsg: '请选择相应年级' },
|
|
159
|
+ { name: 'class_id', required: true, type: 'number', errmsg: '请选择相应班级' }
|
|
160
|
+ ],
|
|
161
|
+ gradeIndex: -1, //年级index
|
|
162
|
+ classIndex: -1, //班级index
|
|
163
|
+ grades: [], //年级列表
|
|
164
|
+ classes: [], //班级列表
|
112
|
165
|
result: null,
|
113
|
166
|
chooseList: [],
|
114
|
167
|
moveModel: null,
|
|
@@ -118,13 +171,10 @@ export default {
|
118
|
171
|
}
|
119
|
172
|
},
|
120
|
173
|
computed: {
|
121
|
|
- ...mapGetters([
|
122
|
|
- 'kid', 'phone'
|
123
|
|
- ])
|
|
174
|
+ ...mapGetters(['kid', 'phone'])
|
124
|
175
|
},
|
125
|
|
- onLoad () {
|
126
|
|
- },
|
127
|
|
- onShow () {
|
|
176
|
+ onLoad(options) {},
|
|
177
|
+ onShow() {
|
128
|
178
|
this.get_list()
|
129
|
179
|
const kid = this.kid
|
130
|
180
|
if (kid) {
|
|
@@ -134,25 +184,24 @@ export default {
|
134
|
184
|
title: '请选择学生',
|
135
|
185
|
content: '请先选择一个学生',
|
136
|
186
|
showCancel: false,
|
137
|
|
- success: res => {
|
138
|
|
-
|
139
|
|
- }
|
|
187
|
+ success: res => {}
|
140
|
188
|
})
|
141
|
189
|
}
|
|
190
|
+ this.get_grades()
|
142
|
191
|
},
|
143
|
192
|
methods: {
|
144
|
|
- showModal (e) {
|
|
193
|
+ showModal(e) {
|
145
|
194
|
this.modalName = e.currentTarget.dataset.target
|
146
|
195
|
},
|
147
|
|
- hideModal (e) {
|
|
196
|
+ hideModal(e) {
|
148
|
197
|
this.modalName = null
|
149
|
198
|
},
|
150
|
|
- get_list () {
|
|
199
|
+ get_list() {
|
151
|
200
|
_getStudents().then(res => {
|
152
|
201
|
this.result = res.data
|
153
|
202
|
})
|
154
|
203
|
},
|
155
|
|
- get_students () {
|
|
204
|
+ get_students() {
|
156
|
205
|
if (!this.student.student_name) return uni.showToast({ title: '请输入学生姓名', icon: 'none' })
|
157
|
206
|
if (!this.student.school_name) return uni.showToast({ title: '请输入学校名称', icon: 'none' })
|
158
|
207
|
_getStudents(this.student).then(res => {
|
|
@@ -165,7 +214,7 @@ export default {
|
165
|
214
|
}
|
166
|
215
|
})
|
167
|
216
|
},
|
168
|
|
- save (id) {
|
|
217
|
+ save(id) {
|
169
|
218
|
this.selectKid = id
|
170
|
219
|
uni.showModal({
|
171
|
220
|
title: '确定绑定?',
|
|
@@ -182,7 +231,67 @@ export default {
|
182
|
231
|
}
|
183
|
232
|
})
|
184
|
233
|
},
|
185
|
|
- unbind (id) {
|
|
234
|
+ fixStudent(item) {
|
|
235
|
+ this.info.id = item.id
|
|
236
|
+ this.info.name = item.name
|
|
237
|
+ this.info.school_id = item.school
|
|
238
|
+ this.gradeIndex = this.grades.findIndex(e => e.name === item.grade_name)
|
|
239
|
+ this.info.grade_id = this.grades[this.gradeIndex]['id']
|
|
240
|
+ this.get_classes().then(res => {
|
|
241
|
+ this.classIndex = res.findIndex(c => c.name === item.class_name)
|
|
242
|
+ this.info.class_id = this.classes[this.classIndex]['id']
|
|
243
|
+ })
|
|
244
|
+ this.modalName = 'FixModal'
|
|
245
|
+ },
|
|
246
|
+ get_grades() {
|
|
247
|
+ _getGrades().then(res => {
|
|
248
|
+ this.grades = res.data
|
|
249
|
+ })
|
|
250
|
+ },
|
|
251
|
+ get_classes() {
|
|
252
|
+ return new Promise((resolve, reject) => {
|
|
253
|
+ _getClasses({ school_id: this.info.school_id, grade_id: this.info.grade_id }).then(res => {
|
|
254
|
+ this.classes = res.data
|
|
255
|
+ resolve(res.data)
|
|
256
|
+ })
|
|
257
|
+ })
|
|
258
|
+ },
|
|
259
|
+ gradeChange(e) {
|
|
260
|
+ this.gradeIndex = e.detail.value
|
|
261
|
+ this.info.grade_id = this.grades[this.gradeIndex].id
|
|
262
|
+ this.classIndex = -1
|
|
263
|
+ this.info.class_id = ''
|
|
264
|
+ this.get_classes()
|
|
265
|
+ },
|
|
266
|
+ classChange(e) {
|
|
267
|
+ this.classIndex = e.detail.value
|
|
268
|
+ this.info.class_id = this.classes[this.classIndex].id
|
|
269
|
+ },
|
|
270
|
+ confirmFix() {
|
|
271
|
+ const validRes = validate.validate(this.info, this.rules)
|
|
272
|
+ if (!validRes.isOk) {
|
|
273
|
+ uni.showToast({
|
|
274
|
+ icon: 'none',
|
|
275
|
+ title: validRes.errmsg
|
|
276
|
+ })
|
|
277
|
+ return false
|
|
278
|
+ }
|
|
279
|
+ uni.showModal({
|
|
280
|
+ title: '确认',
|
|
281
|
+ content: '确定修改?',
|
|
282
|
+ confirmText: '确定',
|
|
283
|
+ cancelText: '取消',
|
|
284
|
+ success: res => {
|
|
285
|
+ if (res.confirm) {
|
|
286
|
+ _fixStudent(this.info).then(res => {
|
|
287
|
+ this.get_list()
|
|
288
|
+ this.hideModal()
|
|
289
|
+ })
|
|
290
|
+ }
|
|
291
|
+ }
|
|
292
|
+ })
|
|
293
|
+ },
|
|
294
|
+ unbind(id) {
|
186
|
295
|
const _self = this
|
187
|
296
|
uni.showModal({
|
188
|
297
|
title: '确定解绑?',
|
|
@@ -192,7 +301,9 @@ export default {
|
192
|
301
|
_unbindStudent({ student: id }).then(res => {
|
193
|
302
|
if (res.code === 1) {
|
194
|
303
|
uni.showToast({ title: '解绑成功!' })
|
195
|
|
- if (_self.kid === id) { _self.$store.dispatch('setKid', 0) }// 解绑选中学生
|
|
304
|
+ if (_self.kid === id) {
|
|
305
|
+ _self.$store.dispatch('setKid', 0)
|
|
306
|
+ } // 解绑选中学生
|
196
|
307
|
this.get_list()
|
197
|
308
|
}
|
198
|
309
|
})
|
|
@@ -200,7 +311,7 @@ export default {
|
200
|
311
|
}
|
201
|
312
|
})
|
202
|
313
|
},
|
203
|
|
- chooseKid (id) {
|
|
314
|
+ chooseKid(id) {
|
204
|
315
|
uni.showModal({
|
205
|
316
|
title: '确定选择学生',
|
206
|
317
|
message: '确定选择该学生?',
|
|
@@ -214,19 +325,20 @@ export default {
|
214
|
325
|
}
|
215
|
326
|
})
|
216
|
327
|
},
|
217
|
|
- setCarts () { // 刷新购物车
|
|
328
|
+ setCarts() {
|
|
329
|
+ // 刷新购物车
|
218
|
330
|
_shopList().then(res => {
|
219
|
331
|
const carts = res.data.map(item => item.class_attend_id)
|
220
|
332
|
this.$store.dispatch('setCarts', carts)
|
221
|
333
|
})
|
222
|
334
|
},
|
223
|
|
- ListTouchStart (e) {
|
|
335
|
+ ListTouchStart(e) {
|
224
|
336
|
this.listTouchStart = e.touches[0].pageX
|
225
|
337
|
},
|
226
|
|
- ListTouchMove (e) {
|
|
338
|
+ ListTouchMove(e) {
|
227
|
339
|
this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
|
228
|
340
|
},
|
229
|
|
- ListTouchEnd (e) {
|
|
341
|
+ ListTouchEnd(e) {
|
230
|
342
|
if (this.listTouchDirection === 'left') {
|
231
|
343
|
this.moveModel = e.currentTarget.dataset.target
|
232
|
344
|
} else {
|
|
@@ -265,6 +377,7 @@ export default {
|
265
|
377
|
font-size: 22px;
|
266
|
378
|
}
|
267
|
379
|
.student-input {
|
|
380
|
+ padding-left: 20rpx;
|
268
|
381
|
height: 40px;
|
269
|
382
|
line-height: 40px;
|
270
|
383
|
border-radius: 20px;
|
|
@@ -295,11 +408,11 @@ export default {
|
295
|
408
|
.font-check {
|
296
|
409
|
font-size: 22px;
|
297
|
410
|
}
|
298
|
|
-.cu-list > .cu-item .move.student-move {
|
299
|
|
- width: 130rpx;
|
300
|
|
- text-align: center;
|
301
|
|
-}
|
302
|
|
-.cu-list > .cu-item.move-cur {
|
303
|
|
- transform: translateX(-130rpx);
|
304
|
|
-}
|
|
411
|
+// .cu-list > .cu-item .move.student-move {
|
|
412
|
+// width: 130rpx;
|
|
413
|
+// text-align: center;
|
|
414
|
+// }
|
|
415
|
+// .cu-list > .cu-item.move-cur {
|
|
416
|
+// transform: translateX(-130rpx);
|
|
417
|
+// }
|
305
|
418
|
</style>
|