homePage.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740
  1. <template>
  2. <view>
  3. <view class="navigation">
  4. <view class="title">
  5. 启航教培管家·家长端
  6. </view>
  7. <view class="identity" @click="show = true">
  8. <view class="picture">
  9. <u-avatar v-if="form.headPhoto != null" class="avatar"
  10. :src="form.headPhoto+'?x-oss-process=image/resize,m_fill,w_256,h_256'" size="48">
  11. <img src="" alt="">
  12. </u-avatar>
  13. </view>
  14. <view class="name">
  15. {{form.studentName}}
  16. </view>
  17. <view class="icon">
  18. <img src="../../../assets/img/riLine-exchange-line@1x.png" alt="">
  19. </view>
  20. </view>
  21. </view>
  22. <u-select v-model="show" mode="single-column" :list="studentList" @confirm="confirm"></u-select>
  23. <view class="head">
  24. <view class="wrap">
  25. <u-swiper :list="list"></u-swiper>
  26. </view>
  27. </view>
  28. <view class="my-app">
  29. <view class="app-items">
  30. <view class="item" @click="gotoUrl('pages/parents/classSchedule/classSchedule')">
  31. <view class="icon-box"
  32. style="background: linear-gradient(180deg, rgba(89,222,232,1) 1%,rgba(13,186,199,1) 100%)">
  33. <img src="../../../assets/img/riFill-calendar-2-fill@1x.png" alt="">
  34. </view>
  35. <view class="text">
  36. 课程表
  37. </view>
  38. </view>
  39. <view class="item">
  40. <view class="icon-box"
  41. style="background: linear-gradient(180deg, rgba(169,147,255,1) 1%,rgba(129,97,255,1) 100%);">
  42. <img src="../../../assets/img/riFill-quill-pen-fill@1x.png" alt="">
  43. </view>
  44. <view class="text">
  45. 请假
  46. </view>
  47. </view>
  48. <view class="item">
  49. <view class="icon-box"
  50. style="background: linear-gradient(180deg, rgba(91,160,242,1) 1%,rgba(26,118,226,1) 100%);">
  51. <img src="../../../assets/img/riFill-calendar-2-fill@1x.png" alt="">
  52. </view>
  53. <view class="text">
  54. 机构报名
  55. </view>
  56. </view>
  57. <view class="item">
  58. <view class="icon-box"
  59. style="background: linear-gradient(180deg, rgba(255,189,96,1) 1%,rgba(255,150,0,1) 100%);">
  60. <img src="../../../assets/img/riFill-folder-user-fill@1x(1).png" alt="">
  61. </view>
  62. <view class="text">
  63. 学员文件
  64. </view>
  65. </view>
  66. <view class="item">
  67. <view class="icon-box"
  68. style="background: linear-gradient(180deg, rgba(169,147,255,1) 1%,rgba(129,97,255,1) 100%);">
  69. <img src="../../../assets/img/riFill-bank-card-fill@1x.png" alt="">
  70. </view>
  71. <view class="text">
  72. 缴费记录
  73. </view>
  74. </view>
  75. <view class="item">
  76. <view class="icon-box"
  77. style="background: linear-gradient(180deg, rgba(255,189,96,1) 1%,rgba(255,150,0,1) 100%);">
  78. <img src="../../../assets/img/riFill-file-edit-fill@1x.png" alt="">
  79. </view>
  80. <view class="text">
  81. 签到记录
  82. </view>
  83. </view>
  84. <view class="item">
  85. <view class="icon-box"
  86. style="background: linear-gradient(180deg, rgba(89,222,232,1) 1%,rgba(13,186,199,1) 100%);">
  87. <img src="../../../assets/img/riFill-file-edit-fill@1x.png" alt="">
  88. </view>
  89. <view class="text">
  90. 测温记录
  91. </view>
  92. </view>
  93. <view class="item">
  94. <view class="icon-box"
  95. style="background: linear-gradient(180deg, rgba(91,160,242,1) 1%,rgba(26,118,226,1) 100%);">
  96. <img src="../../../assets/img/riFill-file-edit-fill@1x.png" alt="">
  97. </view>
  98. <view class="text">
  99. 校长信箱
  100. </view>
  101. </view>
  102. </view>
  103. </view>
  104. <!-- 最近课程 -->
  105. <view class="course">
  106. <view class="title">
  107. <img src="../../../assets/img/riFill-calendar-todo-fill@1x.png" alt="">最近课程
  108. </view>
  109. <view class="course-infos">
  110. <view class="info-box" v-for="(item,index) in courseList" :key="index"
  111. @click="gotoUrl('pages/parents/classSchedule/classScheduleDetails')">
  112. <view class="position today" v-if="item.courseDate == date">
  113. </view>
  114. <view class="position tomorrow" v-if="item.courseDate == tomorrow">
  115. </view>
  116. <view class="class-name">
  117. {{item.className}}
  118. </view>
  119. <view class="location-time">
  120. <view class="location">
  121. {{item.classroom}}
  122. </view>
  123. <view class="time">
  124. {{item.coursePeriods}}
  125. </view>
  126. </view>
  127. <view class="date">
  128. {{item.courseDate}}
  129. </view>
  130. </view>
  131. <view class="info-box info-box2">
  132. <view class="position tomorrow">
  133. </view>
  134. <view class="class-name">
  135. 周开琴书法班2
  136. </view>
  137. <view class="location-time">
  138. <view class="location">
  139. 4楼6教室
  140. </view>
  141. <view class="time">
  142. 09:30-10:45
  143. </view>
  144. </view>
  145. <view class="date">
  146. 2023.1.4
  147. </view>
  148. </view>
  149. </view>
  150. </view>
  151. <!-- 课程推荐 -->
  152. <view class="recommend">
  153. <view class="title">
  154. <view class="title">
  155. <img src="../../../assets/img/riFill-award-fill@1x.png" alt="">课程推荐
  156. </view>
  157. </view>
  158. <view class="classify">
  159. <view class="item" v-for="(item,index) in chosenList" :key="index"
  160. :class="chosenActive == index ? 'chosen' : ''" @click="chosenClick(item,index)">
  161. {{item.name}}
  162. </view>
  163. <!-- <view class="item">
  164. 精品试听
  165. </view>
  166. <view class="item">
  167. 为您优选
  168. </view>
  169. <view class="item">
  170. 机构推荐
  171. </view> -->
  172. </view>
  173. <view class="infos-box">
  174. <view class="picture">
  175. <img src="../../../assets/img/classify1.png" alt="">
  176. </view>
  177. <view class="infos">
  178. <view class="name">
  179. 魔方记忆力
  180. </view>
  181. <view class="tips">
  182. <view class="item">
  183. 基础入门
  184. </view>
  185. <view class="item">
  186. 思维训练
  187. </view>
  188. </view>
  189. <view class="teacher-price">
  190. <view class="teacher">
  191. <view class="photo">
  192. <img src="../../../assets/img/teacher.png" alt="">
  193. </view>
  194. <view class="name">
  195. 鲁老师
  196. </view>
  197. </view>
  198. <view class="price">
  199. 低至30元/课
  200. </view>
  201. </view>
  202. </view>
  203. </view>
  204. <view class="infos-box">
  205. <view class="picture">
  206. <img src="../../../assets/img/classify1.png" alt="">
  207. </view>
  208. <view class="infos">
  209. <view class="name">
  210. 跆拳道
  211. </view>
  212. <view class="tips">
  213. <view class="item">
  214. 强身健体
  215. </view>
  216. <view class="item">
  217. 磨练意志
  218. </view>
  219. </view>
  220. <view class="teacher-price">
  221. <view class="teacher">
  222. <view class="photo">
  223. <img src="../../../assets/img/teacher.png" alt="">
  224. </view>
  225. <view class="name">
  226. 鲁老师
  227. </view>
  228. </view>
  229. <view class="price">
  230. 低至30元/课
  231. </view>
  232. </view>
  233. </view>
  234. </view>
  235. <view class="infos-box">
  236. <view class="picture">
  237. <img src="../../../assets/img/classify1.png" alt="">
  238. </view>
  239. <view class="infos">
  240. <view class="name">
  241. 中国舞十级班
  242. </view>
  243. <view class="tips">
  244. <view class="item">
  245. 专业考证
  246. </view>
  247. <view class="item">
  248. 限时报名
  249. </view>
  250. </view>
  251. <view class="teacher-price">
  252. <view class="teacher">
  253. <view class="photo">
  254. <img src="../../../assets/img/teacher.png" alt="">
  255. </view>
  256. <view class="name">
  257. 鲁老师
  258. </view>
  259. </view>
  260. <view class="price">
  261. 低至30元/课
  262. </view>
  263. </view>
  264. </view>
  265. </view>
  266. <u-divider>没有更多了</u-divider>
  267. </view>
  268. <ParentsTabbar :current="0" ref="tabbarMain"></ParentsTabbar>
  269. </view>
  270. </template>
  271. <script>
  272. import * as classScheduleApi from '@/apis/parents/classSchedule.js'
  273. import * as mineApi from '@/apis/parents/mine.js'
  274. import ParentsTabbar from '@/components/ParentsTabbar.vue'
  275. export default {
  276. components: {
  277. ParentsTabbar
  278. },
  279. data() {
  280. return {
  281. chosenList: [
  282. {name: '全部'},
  283. {name: '精品试听'},
  284. {name: '为您优选'},
  285. {name: '机构推荐'}
  286. ],
  287. chosenActive: 0,
  288. date: '',
  289. tomorrow: '',
  290. weekDate: [],
  291. weekN: ["一", "二", "三", "四", "五", "六", "日"],
  292. activeClass: 0,
  293. weekDate1: '',
  294. courseList: [],
  295. form: {
  296. studentName: '',
  297. headPhoto: ''
  298. },
  299. show: false,
  300. studentList: [],
  301. studentId: '',
  302. list: [{
  303. image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
  304. }, ],
  305. }
  306. },
  307. onReady() {
  308. if(this.carhelp.getStudentId()) {
  309. this.studentId = this.carhelp.getStudentId().studentId;
  310. this.getStudentDetail();
  311. this.getToday();
  312. }
  313. this.getStudentList();
  314. },
  315. methods: {
  316. chosenClick(item,index) {
  317. this.chosenActive = index;
  318. },
  319. getCourseList() {
  320. this.courseList = [];
  321. uni.showLoading({
  322. title: "加载中",
  323. mask: true,
  324. })
  325. classScheduleApi.loadMySchedule({
  326. studentId: this.studentId,
  327. startDate: this.date,
  328. endDate: this.weekDate[6].day
  329. }).then((response) => {
  330. uni.hideLoading();
  331. this.courseList = response.data;
  332. }).catch(error => {
  333. uni.showToast({
  334. title: error,
  335. icon: "none"
  336. })
  337. })
  338. },
  339. getToday() {
  340. this.weekDate = [];
  341. let date = new Date(); //当前日期
  342. let year = date.getFullYear(); //当前年
  343. let month = date.getMonth() + 1; //当前月
  344. let day = date.getDate(); //当天
  345. let mydate = new Date(year, month - 1, day);
  346. let weekday = mydate.getDay();
  347. this.weekDate1 = new Date(year, month - 1, day + 1 - weekday);
  348. this.getWeekDate(true);
  349. },
  350. getWeekDate(bl) {
  351. let weekDate2 = new Date(this.weekDate1.getTime());
  352. for (var i = 0; i < 7; i++) {
  353. for (var j = 0; j < this.weekN.length; j++) {
  354. if (i == j) {
  355. this.weekDate.push({
  356. week: this.weekN[j],
  357. day: this.getFormatDate(new Date(weekDate2.setDate(this.weekDate1.getDate() + i))),
  358. isDotShow: false
  359. })
  360. }
  361. }
  362. }
  363. if (bl) {
  364. let date = new Date(); //当前日期
  365. date = this.getFormatDate(date);
  366. for (var m = 0; m < this.weekDate.length; m++) {
  367. if (date == this.weekDate[m].day) {
  368. this.activeClass = m;
  369. this.date = this.weekDate[m].day;
  370. this.tomorrow = this.weekDate[m+1].day;
  371. }
  372. }
  373. this.getCourseList();
  374. }
  375. },
  376. getFormatDate(date) {
  377. let myyear = date.getFullYear();
  378. let mymonth = date.getMonth() + 1;
  379. let myweekday = date.getDate();
  380. if (mymonth < 10) {
  381. mymonth = "0" + mymonth;
  382. }
  383. if (myweekday < 10) {
  384. myweekday = "0" + myweekday;
  385. }
  386. return (myyear + "-" + mymonth + "-" + myweekday);
  387. },
  388. getStudentDetail() {
  389. uni.showLoading({
  390. title: "加载中",
  391. mask: true,
  392. })
  393. mineApi.getStudentDtl({
  394. studentId: this.studentId
  395. }).then((response) => {
  396. uni.hideLoading();
  397. this.form.studentName = response.data.studentName;
  398. this.form.headPhoto = response.data.headPhoto;
  399. }).catch(error => {
  400. uni.showToast({
  401. title: error,
  402. icon: "none"
  403. })
  404. })
  405. },
  406. confirm(e) {
  407. this.carhelp.setStudentId({studentId: e[0].value});
  408. this.studentId = e[0].value;
  409. this.getStudentDetail();
  410. },
  411. getStudentList() {
  412. uni.showLoading({
  413. title: "加载中",
  414. mask: true,
  415. })
  416. mineApi.studentList().then((res) => {
  417. uni.hideLoading();
  418. var list = res.data.studentList;
  419. for (var i = 0; i < list.length; i++) {
  420. this.studentList.push({
  421. value: list[i].studentId,
  422. label: list[i].studentName
  423. })
  424. }
  425. }).catch(error => {
  426. uni.showToast({
  427. title: error,
  428. icon: "none"
  429. })
  430. })
  431. },
  432. }
  433. }
  434. </script>
  435. <style lang="scss" scoped>
  436. page{
  437. padding-bottom: 100px;
  438. }
  439. .navigation {
  440. display: flex;
  441. justify-content: space-between;
  442. height: 44px;
  443. background-color: rgba(13, 186, 199, 1);
  444. padding: 0 16px;
  445. .title{
  446. line-height: 44px;
  447. color: #ffffff;
  448. font-size: 20px
  449. }
  450. .identity{
  451. display: flex;
  452. align-items:center;
  453. .picture{
  454. width: 24px;
  455. height: 24px;
  456. border-radius: 50px;
  457. overflow: hidden;
  458. margin-right: 4px;
  459. img{
  460. width: 100%;
  461. height: 100%;
  462. vertical-align: middle;
  463. }
  464. }
  465. .name{
  466. margin-right: 4px;
  467. color: rgba(255, 255, 255, 1);
  468. }
  469. .icon{
  470. img{
  471. vertical-align: middle;
  472. }
  473. }
  474. }
  475. }
  476. .head {
  477. background: linear-gradient(179.89deg, rgba(13, 186, 199, 1) 61.7%, rgba(244, 246, 246, 1) 97.7%);
  478. padding-bottom: 100px;
  479. .wrap {
  480. padding: 16px;
  481. }
  482. }
  483. .my-app {
  484. margin: -100px 16px 16px 16px;
  485. border-radius: 12px 12px 0px 0px;
  486. padding: 16px;
  487. background-color: #fff;
  488. .app-items {
  489. display: flex;
  490. flex-wrap: wrap;
  491. .item {
  492. width: 25%;
  493. display: flex;
  494. flex-direction: column;
  495. align-items: center;
  496. margin-bottom: 40rpx;
  497. .icon-box {
  498. width: 40px;
  499. height: 40px;
  500. text-align: center;
  501. border-radius: 8px;
  502. position: relative;
  503. .count {
  504. width: 28px;
  505. height: 16px;
  506. line-height: 16px;
  507. border-radius: 50px;
  508. background-color: rgba(238, 49, 56, 1);
  509. color: rgba(255, 255, 255, 1);
  510. font-size: 10px;
  511. text-align: center;
  512. position: absolute;
  513. top: -16rpx;
  514. right: -28rpx;
  515. }
  516. img {
  517. margin: 8px 0;
  518. }
  519. }
  520. .text {
  521. margin-top: 16rpx;
  522. }
  523. }
  524. }
  525. }
  526. // 最近课程
  527. .course {
  528. margin: auto;
  529. margin-top: 16px;
  530. width: 91.4%;
  531. .title {
  532. height: 20px;
  533. line-height: 20px;
  534. margin-bottom: 14px;
  535. color: #333333;
  536. font-weight: bold;
  537. img {
  538. vertical-align: middle;
  539. margin-right: 8px;
  540. }
  541. }
  542. .course-infos {
  543. display: flex;
  544. justify-content: space-between;
  545. .info-box {
  546. border-top: 2px solid #0DBAC7;
  547. background: linear-gradient(to right, #E4F8E3, #dcf5f6);
  548. width: 47.8%;
  549. padding: 24rpx 0 14rpx 24rpx;
  550. box-shadow: 2px 2px 2px 2px #e7e9e9;
  551. border-radius: 8px;
  552. position: relative;
  553. .position {
  554. width: 48rpx;
  555. height: 40rpx;
  556. line-height: 40rpx;
  557. position: absolute;
  558. top: 0;
  559. right: 16rpx;
  560. text-align: center;
  561. border-radius: 0px 0px 4px 4px;
  562. font-size: 12px;
  563. color: #fff;
  564. }
  565. .today {
  566. background-color: #0DBAC7;
  567. }
  568. .tomorrow {
  569. background-color: #0086FF;
  570. }
  571. .class-name {
  572. height: 20px;
  573. color: rgba(51, 51, 51, 1);
  574. font-size: 14px;
  575. }
  576. .location-time {
  577. margin-top: 8rpx;
  578. display: flex;
  579. justify-content: start;
  580. color: rgba(119, 119, 119, 1);
  581. font-size: 12px;
  582. .time {
  583. margin-left: 8rpx;
  584. }
  585. }
  586. .date {
  587. color: rgba(119, 119, 119, 1);
  588. font-size: 12px;
  589. margin-top: 8rpx;
  590. }
  591. }
  592. .info-box2 {
  593. border-top: 2px solid #0086FF;
  594. }
  595. }
  596. }
  597. .recommend{
  598. margin:32px 16px ;
  599. .title {
  600. height: 20px;
  601. line-height: 20px;
  602. margin-bottom: 14px;
  603. color: #333333;
  604. font-weight: bold;
  605. img {
  606. vertical-align: middle;
  607. margin-right: 8px;
  608. }
  609. }
  610. .classify{
  611. display: flex;
  612. margin-bottom: 24px;
  613. .item{
  614. border-radius: 12px;
  615. line-height: 32px;
  616. background-color: rgba(255, 255, 255, 1);
  617. color: rgba(119, 119, 119, 1);
  618. text-align: center;
  619. border: 1px solid rgba(204, 204, 204, 1);
  620. padding: 0 8px;
  621. margin-left: 12px;
  622. }
  623. .chosen{
  624. border: 1px solid rgba(13, 186, 199, 1);
  625. color: rgba(13, 186, 199, 1);
  626. }
  627. }
  628. .infos-box{
  629. border-radius: 12px;
  630. background-color: rgba(255, 255, 255, 1);
  631. padding: 12px;
  632. margin-bottom: 12px;
  633. display: flex;
  634. .picture{
  635. width: 200rpx;
  636. height: 200rpx;
  637. border-radius: 4px;
  638. overflow: hidden;
  639. img{
  640. width: 100%;
  641. height: 100%;
  642. }
  643. }
  644. .infos{
  645. flex: 1;
  646. margin-left: 12px;
  647. .name{
  648. color: rgba(51, 51, 51, 1);
  649. font-size: 16px;
  650. }
  651. .tips{
  652. display: flex;
  653. margin-top: 8px;
  654. .item{
  655. padding: 0 8px;
  656. line-height: 20px;
  657. border-radius: 4px;
  658. background-color: rgba(241, 243, 244, 1);
  659. color: rgba(16, 16, 16, 1);
  660. font-size: 12px;
  661. margin-right: 8px;
  662. }
  663. }
  664. .teacher-price{
  665. margin-top: 44rpx;
  666. display: flex;
  667. justify-content: space-between;
  668. align-items: center;
  669. .teacher{
  670. display: flex;
  671. align-items: center;
  672. .photo{
  673. width: 32px;
  674. height: 32px;
  675. border-radius: 50px;
  676. overflow: hidden;
  677. margin-right: 8px;
  678. img{
  679. width: 100%;
  680. height: 100%;
  681. }
  682. }
  683. }
  684. .price{
  685. color: rgba(255, 61, 0, 1);
  686. }
  687. }
  688. }
  689. }
  690. }
  691. </style>