徐浩 / zzxyt-uniapp · 提交

转到一个项目

作者 mxd
提交 5b3cbb4586c82795d50c8da2fababb9a7f10c27d 1 个父辈 e603a6c9

听课教室选座

内嵌 并排对比
正在显示 7 个修改的文件 包含 179 行增加 和 184 行删除
@@ -309,7 +309,8 @@ @@ -309,7 +309,8 @@
309 "path": "stu_selection/stu_selection", 309 "path": "stu_selection/stu_selection",
310 "style": { 310 "style": {
311 "navigationBarTitleText": "听课教室选座", 311 "navigationBarTitleText": "听课教室选座",
312 - "enablePullDownRefresh": false 312 + "enablePullDownRefresh": false,
  313 + "navigationStyle": "custom"
313 } 314 }
314 315
315 }, { 316 }, {
1 <template> 1 <template>
2 <view class="wrap_box"> 2 <view class="wrap_box">
3 - <!-- <uParse v-if="datas" :content="datas"></uParse> -->  
4 - <!-- <view class="tel_index_bg"></view> -->  
5 - <image class="tel_index_bg" src="/static/images/selectseat_bg.png" mode="aspectFill"></image> 3 + <CustomReturn title="听课教室选座" color="#fff" :bgColor="bgColor"/>
  4 + <view class="bg-img">
  5 + <image src="/static/imagesV2/stu_selection/selectseat_bg.png" mode="aspectFill"></image>
  6 + </view>
6 7
7 - <view v-if="datas.info" class="vio_list">  
8 - <scroll-view scroll-x class="stime_list scroll_x" v-if="datas.type==2">  
9 - <view class="stime_li" :class="{active:index==0}" v-for="(item,index) in datas.timeArr">  
10 - <view class="li_tit">  
11 - {{item.title}} 8 + <PaddingTopB>
  9 + <view v-if="datas.info" class="vio_list">
  10 + <scroll-view scroll-x class="stime_list scroll_x" v-if="datas.type ==2">
  11 + <view class="stime_li" :class="{active:index==0}" v-for="(item,index) in datas.timeArr">
  12 + <view class="li_tit">
  13 + {{item.title}}
  14 + </view>
  15 + <view v-if="index==0" class="li_time">
  16 + <text>{{time_h}}</text>
  17 + <text>{{time_m}}</text>
  18 + <text>{{time_s}}</text>
  19 + </view>
  20 + <view v-else class="li_time">即将开始</view>
  21 + </view>
  22 + </scroll-view>
  23 + <view v-else class="xzdata_null">
  24 + <view class="icon">
  25 + <image src="/static/imagesV2/stu_selection/icon-success.png" mode=""></image>
12 </view> 26 </view>
13 - <view v-if="index==0" class="li_time">  
14 - <text>{{time_h}}</text>  
15 - <text>{{time_m}}</text>  
16 - <text>{{time_s}}</text> 27 + <view>
  28 + <view class="d1">
  29 + 选座已结束
  30 + </view>
  31 + <view class="d2">
  32 + 没有选座的同学赶紧选座吧！
  33 + </view>
17 </view> 34 </view>
18 - <view v-else class="li_time">即将开始</view>  
19 - </view>  
20 - </scroll-view>  
21 - <view v-else class="xzdata_null">  
22 - <view class="d1">  
23 - 选座已结束  
24 - </view>  
25 - <view class="d2">  
26 - 没有选座的同学赶紧选座吧！  
27 - </view>  
28 - </view>  
29 - <view class="xz_rule">  
30 - <image class="xz_rule_top" src="/static/images/selectseat_rules.png" mode="aspectFill"></image>  
31 - <view class="xz_rule_tit">  
32 - 选座规则  
33 </view> 35 </view>
34 - <view class="rule_msg">  
35 - <view class="xz_room">  
36 - 选座教室：{{datas.info.pid}} 36 +
  37 + <view class="xz_rule">
  38 + <view class="tit-icon">
  39 + <image src="/static/imagesV2/stu_selection/xuanzuoguize.png" mode="aspectFill"></image>
37 </view> 40 </view>
38 - <view class="rule_tip">  
39 - 活动开始前5分钟可以选座，错过时间等选座活动整体结束后再选 41 + <view class="rule_msg">
  42 + <view class="xz_room">
  43 + 选座教室：{{datas.info.pid}}
  44 + </view>
  45 + <view class="rule_tip">
  46 + 活动开始前5分钟可以选座，错过时间等选座活动整体结束后再选
  47 + </view>
40 </view> 48 </view>
41 </view> 49 </view>
42 - </view>  
43 - <view class="stu_tit">  
44 - <text></text>  
45 - <view class="">以下学员可以选座</view>  
46 - </view>  
47 - <view class="stu_list">  
48 - <view class="stu_li" v-for="(item,index) in datas.user">  
49 - <view class="stu_name">  
50 - <view class="oh1">{{item.name}}</view>  
51 - <image v-if="item.sex==2" src="/static/images/tch/icon_female.png" mode="aspectFit"></image>  
52 - <image v-else src="/static/images/tch/icon_male.png" mode="aspectFit"></image>  
53 - </view>  
54 - <view class="stu_time">  
55 - {{item.add_time}} 入学  
56 - </view>  
57 - <view v-if="item.seat_type==1" class="stu_status">  
58 - 已选 50 +
  51 + <view class="stu_tit">
  52 + <view class="">以下学员可以选座</view>
  53 + </view>
  54 +
  55 + <view class="stu_list">
  56 + <view class="stu_li" v-for="(item,index) in datas.user">
  57 + <view v-if="item.seat_type==1" class="stu_status">
  58 + 已选
  59 + </view>
  60 + <view v-else class="stu_status stu_status1">
  61 + 未选
  62 + </view>
  63 + <view class="stu_name">
  64 + <view class="oh1">{{item.name}}</view>
  65 + <image v-if="item.sex==2" src="/static/imagesV2/stu_selection/icon_female.png" mode="aspectFit"></image>
  66 + <image v-else src="/static/imagesV2/stu_selection/icon_male.png" mode="aspectFit"></image>
  67 + </view>
  68 + <view class="stu_time">
  69 + {{item.add_time}} 入学
  70 + </view>
  71 +
59 </view> 72 </view>
60 - <view v-else class="stu_status stu_status1">  
61 - 未选 73 + <u-empty v-if="datas.user&&datas.user.length==0"
  74 + mode="data"
  75 + text="暂无数据"
  76 + icon="/static/images/tch/img_blank.png"
  77 + >
  78 + </u-empty>
  79 + </view>
  80 +
  81 + <view v-if="datas.user&&datas.user.length>0" class="bz_add" >
  82 + <view class="" @click="$service.jump" :data-url="'/pagesStu/stu_seat_list/stu_seat_list?id='+datas.info.id">
  83 + 去选座
62 </view> 84 </view>
63 </view> 85 </view>
64 - <u-empty v-if="datas.user&&datas.user.length==0"  
65 - mode="data"  
66 - text="暂无数据"  
67 - icon="/static/images/tch/img_blank.png"  
68 - >  
69 - </u-empty>  
70 - </view>  
71 - </view>  
72 -  
73 - <view v-if="datas.user&&datas.user.length>0" class="bz_add" >  
74 - <view class="" @click="$service.jump" :data-url="'/pagesStu/stu_seat_list/stu_seat_list?id='+datas.info.id">  
75 - 去选座 86 +
76 </view> 87 </view>
77 - </view>  
78 - <!-- 阻止滑动 -->  
79 - <!-- <view @touchmove.stop.prevent='test'></view> --> 88 +
  89 + </PaddingTopB>
  90 +
80 </view> 91 </view>
81 </template> 92 </template>
82 93
@@ -86,11 +97,18 @@ @@ -86,11 +97,18 @@
86 mapState, 97 mapState,
87 mapMutations 98 mapMutations
88 } from 'vuex' 99 } from 'vuex'
  100 + import CustomReturn from "@/components/CustomReturn/index.vue"
  101 + import PaddingTopB from "@/components/PaddingTopB/index.vue"
89 var that 102 var that
90 var djs_name 103 var djs_name
91 export default { 104 export default {
  105 + components: {
  106 + CustomReturn,
  107 + PaddingTopB
  108 + },
92 data() { 109 data() {
93 return { 110 return {
  111 + bgColor: 'none',
94 options:'', 112 options:'',
95 time_list:[ 113 time_list:[
96 { 114 {
@@ -131,6 +149,13 @@ @@ -131,6 +149,13 @@
131 return this.getDate('end'); 149 return this.getDate('end');
132 } 150 }
133 }, 151 },
  152 + onPageScroll(e) {
  153 + if(e.scrollTop > 0 ) {
  154 + this.bgColor = '#3384fc'
  155 + }else {
  156 + this.bgColor = 'none'
  157 + }
  158 + },
134 onLoad(e) { 159 onLoad(e) {
135 that=this 160 that=this
136 that.options=e||{} 161 that.options=e||{}
@@ -308,24 +333,12 @@ @@ -308,24 +333,12 @@
308 333
309 <style lang="scss" scoped> 334 <style lang="scss" scoped>
310 .wrap_box{ 335 .wrap_box{
311 - width: 100%;  
312 - // padding: 30rpx;  
313 - min-height: 100vh;  
314 - // #ifdef H5  
315 - min-height: calc(100vh - 44px);  
316 - // #endif  
317 - background: #F8F8F8;  
318 - position: relative;  
319 - padding-bottom: 120rpx; 336 + padding-bottom: 120rpx;
320 } 337 }
321 -  
322 -.tel_index_bg { 338 +.bg-img {
  339 + height: 504rpx;
323 position: absolute; 340 position: absolute;
324 - top: 0;  
325 - z-index: 1;  
326 width: 100%; 341 width: 100%;
327 - height: 250rpx;  
328 - background: url('/static/images/selectseat_bg.png') repeat fixed center;  
329 } 342 }
330 343
331 .vio_list{ 344 .vio_list{
@@ -344,7 +357,7 @@ @@ -344,7 +357,7 @@
344 } 357 }
345 .stime_list{ 358 .stime_list{
346 width: 100%; 359 width: 100%;
347 - // padding: 0 30rpx; 360 + margin: 20rpx 0 60rpx 0;
348 .stime_li{ 361 .stime_li{
349 width: 144rpx; 362 width: 144rpx;
350 height: 102rpx; 363 height: 102rpx;
@@ -389,122 +402,100 @@ @@ -389,122 +402,100 @@
389 } 402 }
390 .xz_rule{ 403 .xz_rule{
391 width: 100%; 404 width: 100%;
392 - height: 306rpx;  
393 background: #FFFFFF; 405 background: #FFFFFF;
394 - border-radius: 32rpx;  
395 - margin-top: 80rpx; 406 + border-radius: 20rpx;
396 position: relative; 407 position: relative;
397 - .xz_rule_top{  
398 - width: 100%;  
399 - height: 154rpx;  
400 - margin-top: -40rpx;  
401 - position: relative;  
402 - z-index: 2;  
403 - }  
404 - .xz_rule_tit{  
405 - width: 100%;  
406 - height: 74rpx;  
407 - display: flex;  
408 - align-items: center;  
409 - padding: 0 40rpx; 408 + padding: 60rpx 30rpx 30rpx;
  409 + .tit-icon {
410 position: absolute; 410 position: absolute;
411 - top: 0;  
412 left: 0; 411 left: 0;
413 - z-index: 10;  
414 - font-size: 30rpx;  
415 - color: #FFFFFF; 412 + top: 0;
  413 + width: 130rpx;
  414 + height: 40rpx;
416 } 415 }
417 .rule_msg{ 416 .rule_msg{
418 - width: 100%;  
419 - padding: 0 30rpx;  
420 .xz_room{ 417 .xz_room{
421 - font-size: 30rpx;  
422 - color: #545D71;  
423 - position: relative;  
424 - padding-left: 21rpx;  
425 - &:before{  
426 - content:'';  
427 - position: absolute;  
428 - left: 0;  
429 - top: 50%;  
430 - margin-top: -13rpx;  
431 - width: 6rpx;  
432 - height: 26rpx;  
433 - background: #2D81FF;  
434 - border-radius: 3rpx;  
435 - }  
436 - 418 + font-size: 28rpx;
  419 + font-family: PingFang SC;
  420 + font-weight: 500;
  421 + color: #323232;
437 } 422 }
438 .rule_tip{ 423 .rule_tip{
439 - padding-top: 30rpx;  
440 - font-size: 28rpx;  
441 - color: #A9B1C0; 424 + font-size: 22rpx;
  425 + font-family: PingFang SC;
  426 + font-weight: 400;
  427 + color: #979797;
  428 + margin-top: 20rpx;
442 } 429 }
443 } 430 }
444 } 431 }
445 .stu_tit{ 432 .stu_tit{
446 - width: 100%;  
447 - height: 94rpx;  
448 font-size: 28rpx; 433 font-size: 28rpx;
449 - color: #545D71;  
450 - display: flex;  
451 - align-items: center;  
452 - text{  
453 - width: 16rpx;  
454 - height: 16rpx;  
455 - background: #FFAC0D;  
456 - border-radius: 50%;  
457 - margin-right: 8rpx; 434 + font-family: PingFang SC;
  435 + font-weight: 500;
  436 + color: #323232;
  437 + margin: 30rpx 0;
  438 + padding-left: 20rpx;
  439 + position: relative;
  440 + &:before{
  441 + content:'';
  442 + position: absolute;
  443 + left: 0;
  444 + top: 0;
  445 + bottom: 0;
  446 + width: 10rpx;
  447 + background: #2D81FF;
  448 + border-radius: 6rpx;
458 } 449 }
459 } 450 }
460 .stu_list{ 451 .stu_list{
461 width: 100%; 452 width: 100%;
462 - // height: 740px;  
463 background: #FFFFFF; 453 background: #FFFFFF;
464 - border-radius: 10rpx;  
465 - padding: 15rpx 0; 454 + border-radius: 20rpx;
466 .stu_li{ 455 .stu_li{
467 width: 100%; 456 width: 100%;
468 - padding: 0 30rpx;  
469 - height: 80rpx; 457 + padding: 30rpx;
470 display: flex; 458 display: flex;
471 align-items: center; 459 align-items: center;
472 .stu_name{ 460 .stu_name{
473 - font-size: 30rpx;  
474 - color: #545D71; 461 + font-size: 28rpx;
  462 + font-family: PingFang SC;
  463 + font-weight: 400;
  464 + color: #323232;
475 display: flex; 465 display: flex;
476 align-items: center; 466 align-items: center;
477 - view{  
478 - line-height: 32rpx;  
479 - height: 32rpx;  
480 - max-width: 250rpx;  
481 - } 467 +
482 image { 468 image {
483 - width: 28rpx;  
484 - height: 28rpx;  
485 - margin-left: 12rpx; 469 + width: 30rpx;
  470 + height: 26rpx;
  471 + margin-left: 20rpx;
486 } 472 }
487 } 473 }
488 .stu_time{ 474 .stu_time{
489 flex: 1; 475 flex: 1;
490 - font-size: 28rpx;  
491 - font-family: Arial;  
492 - color: #A9B1C0;  
493 - padding-left: 20rpx; 476 + font-size: 24rpx;
  477 + font-family: PingFang SC;
  478 + font-weight: 400;
  479 + color: #979797;
  480 + text-align: right;
494 } 481 }
495 .stu_status{ 482 .stu_status{
496 - font-size: 26rpx;  
497 - color: #2D81FF;  
498 - width: 78rpx;  
499 - height: 38rpx;  
500 - background: rgba(45, 129, 255, .1);  
501 - border-radius: 4rpx;  
502 - display: flex;  
503 - align-items: center;  
504 - justify-content: center; 483 +
  484 + padding: 4rpx 6rpx;
  485 +
  486 + font-size: 20rpx;
  487 + font-family: PingFang SC;
  488 + font-weight: 500;
  489 +
  490 + background: #F3F4F6;
  491 + border: 1px solid #CACACA;
  492 + border-radius: 2px;
  493 + color: #979797;
  494 + margin-right: 20rpx;
505 &.stu_status1{ 495 &.stu_status1{
506 - color: #AFB6C4;  
507 - background: rgba(175, 182, 196, .1); 496 + background: #FFF1F0;
  497 + border: 1px solid #FFAFAE;
  498 + color: #EC5656;
508 } 499 }
509 } 500 }
510 } 501 }
@@ -513,39 +504,42 @@ @@ -513,39 +504,42 @@
513 width: 100%; 504 width: 100%;
514 position: fixed; 505 position: fixed;
515 bottom: 0; 506 bottom: 0;
516 - background: #f8f8f8; 507 + background: #FFFFFF;
517 z-index: 800; 508 z-index: 800;
518 left: 0; 509 left: 0;
519 - padding: 30rpx; 510 + padding: 15rpx 25rpx;
520 view{ 511 view{
521 - font-size: 32rpx;  
522 - color: #FFFFFF;  
523 - width: 100%;  
524 - height: 90rpx;  
525 background: #2D81FF; 512 background: #2D81FF;
526 - border-radius: 10rpx;  
527 - display: flex;  
528 - align-items: center;  
529 - justify-content: center; 513 + border-radius: 44rpx;
  514 + line-height: 88rpx;
  515 + font-size: 34rpx;
  516 + font-family: PingFang SC;
  517 + font-weight: 500;
  518 + text-align: center;
  519 + color: #FFFFFF;
530 } 520 }
531 } 521 }
532 .xzdata_null{ 522 .xzdata_null{
533 - width: 100%;  
534 - height: 110rpx;  
535 display: flex; 523 display: flex;
536 align-items: center; 524 align-items: center;
537 - // justify-content: center;  
538 - flex-direction: column;  
539 - position: relative;  
540 - // top: -20rpx;  
541 - margin-bottom: -40rpx; 525 + margin: 50rpx 0;
  526 + .icon {
  527 + width: 60rpx;
  528 + height: 60rpx;
  529 + margin-right: 20rpx;
  530 + }
542 .d1{ 531 .d1{
543 - font-size: 36rpx; 532 + font-size: 32rpx;
  533 + font-family: PingFang SC;
  534 + font-weight: 500;
544 color: #FFFFFF; 535 color: #FFFFFF;
545 } 536 }
546 .d2{ 537 .d2{
547 - font-size: 26rpx; 538 + font-size: 24rpx;
  539 + font-family: PingFang SC;
  540 + font-weight: 500;
548 color: #FFFFFF; 541 color: #FFFFFF;
  542 + margin-top: 20rpx;
549 } 543 }
550 } 544 }
551 </style> 545 </style>