123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740 |
- <template>
- <view>
- <view class="navigation">
- <view class="title">
- 启航教培管家·家长端
- </view>
- <view class="identity" @click="show = true">
- <view class="picture">
- <u-avatar v-if="form.headPhoto != null" class="avatar"
- :src="form.headPhoto+'?x-oss-process=image/resize,m_fill,w_256,h_256'" size="48">
- <img src="" alt="">
- </u-avatar>
- </view>
- <view class="name">
- {{form.studentName}}
- </view>
- <view class="icon">
- <img src="../../../assets/img/riLine-exchange-line@1x.png" alt="">
- </view>
- </view>
- </view>
- <u-select v-model="show" mode="single-column" :list="studentList" @confirm="confirm"></u-select>
- <view class="head">
- <view class="wrap">
- <u-swiper :list="list"></u-swiper>
- </view>
- </view>
- <view class="my-app">
- <view class="app-items">
- <view class="item" @click="gotoUrl('pages/parents/classSchedule/classSchedule')">
- <view class="icon-box"
- style="background: linear-gradient(180deg, rgba(89,222,232,1) 1%,rgba(13,186,199,1) 100%)">
- <img src="../../../assets/img/riFill-calendar-2-fill@1x.png" alt="">
- </view>
- <view class="text">
- 课程表
- </view>
- </view>
- <view class="item">
- <view class="icon-box"
- style="background: linear-gradient(180deg, rgba(169,147,255,1) 1%,rgba(129,97,255,1) 100%);">
- <img src="../../../assets/img/riFill-quill-pen-fill@1x.png" alt="">
- </view>
- <view class="text">
- 请假
- </view>
- </view>
- <view class="item">
- <view class="icon-box"
- style="background: linear-gradient(180deg, rgba(91,160,242,1) 1%,rgba(26,118,226,1) 100%);">
- <img src="../../../assets/img/riFill-calendar-2-fill@1x.png" alt="">
- </view>
- <view class="text">
- 机构报名
- </view>
- </view>
- <view class="item">
- <view class="icon-box"
- style="background: linear-gradient(180deg, rgba(255,189,96,1) 1%,rgba(255,150,0,1) 100%);">
- <img src="../../../assets/img/riFill-folder-user-fill@1x(1).png" alt="">
- </view>
- <view class="text">
- 学员文件
- </view>
- </view>
- <view class="item">
- <view class="icon-box"
- style="background: linear-gradient(180deg, rgba(169,147,255,1) 1%,rgba(129,97,255,1) 100%);">
- <img src="../../../assets/img/riFill-bank-card-fill@1x.png" alt="">
- </view>
- <view class="text">
- 缴费记录
- </view>
- </view>
- <view class="item">
- <view class="icon-box"
- style="background: linear-gradient(180deg, rgba(255,189,96,1) 1%,rgba(255,150,0,1) 100%);">
- <img src="../../../assets/img/riFill-file-edit-fill@1x.png" alt="">
- </view>
- <view class="text">
- 签到记录
- </view>
- </view>
- <view class="item">
- <view class="icon-box"
- style="background: linear-gradient(180deg, rgba(89,222,232,1) 1%,rgba(13,186,199,1) 100%);">
- <img src="../../../assets/img/riFill-file-edit-fill@1x.png" alt="">
- </view>
- <view class="text">
- 测温记录
- </view>
- </view>
- <view class="item">
- <view class="icon-box"
- style="background: linear-gradient(180deg, rgba(91,160,242,1) 1%,rgba(26,118,226,1) 100%);">
- <img src="../../../assets/img/riFill-file-edit-fill@1x.png" alt="">
- </view>
- <view class="text">
- 校长信箱
- </view>
- </view>
- </view>
- </view>
- <!-- 最近课程 -->
- <view class="course">
- <view class="title">
- <img src="../../../assets/img/riFill-calendar-todo-fill@1x.png" alt="">最近课程
- </view>
- <view class="course-infos">
- <view class="info-box" v-for="(item,index) in courseList" :key="index"
- @click="gotoUrl('pages/parents/classSchedule/classScheduleDetails')">
- <view class="position today" v-if="item.courseDate == date">
- 今
- </view>
- <view class="position tomorrow" v-if="item.courseDate == tomorrow">
- 明
- </view>
- <view class="class-name">
- {{item.className}}
- </view>
- <view class="location-time">
- <view class="location">
- {{item.classroom}}
- </view>
- <view class="time">
- {{item.coursePeriods}}
- </view>
- </view>
- <view class="date">
- {{item.courseDate}}
- </view>
- </view>
- <view class="info-box info-box2">
- <view class="position tomorrow">
- 明
- </view>
- <view class="class-name">
- 周开琴书法班2
- </view>
- <view class="location-time">
- <view class="location">
- 4楼6教室
- </view>
- <view class="time">
- 09:30-10:45
- </view>
- </view>
- <view class="date">
- 2023.1.4
- </view>
- </view>
- </view>
- </view>
- <!-- 课程推荐 -->
- <view class="recommend">
- <view class="title">
- <view class="title">
- <img src="../../../assets/img/riFill-award-fill@1x.png" alt="">课程推荐
- </view>
- </view>
- <view class="classify">
- <view class="item" v-for="(item,index) in chosenList" :key="index"
- :class="chosenActive == index ? 'chosen' : ''" @click="chosenClick(item,index)">
- {{item.name}}
- </view>
- <!-- <view class="item">
- 精品试听
- </view>
- <view class="item">
- 为您优选
- </view>
- <view class="item">
- 机构推荐
- </view> -->
- </view>
-
- <view class="infos-box">
- <view class="picture">
- <img src="../../../assets/img/classify1.png" alt="">
- </view>
- <view class="infos">
- <view class="name">
- 魔方记忆力
- </view>
- <view class="tips">
- <view class="item">
- 基础入门
- </view>
- <view class="item">
- 思维训练
- </view>
- </view>
- <view class="teacher-price">
- <view class="teacher">
- <view class="photo">
- <img src="../../../assets/img/teacher.png" alt="">
- </view>
- <view class="name">
- 鲁老师
- </view>
- </view>
- <view class="price">
- 低至30元/课
- </view>
- </view>
- </view>
- </view>
- <view class="infos-box">
- <view class="picture">
- <img src="../../../assets/img/classify1.png" alt="">
- </view>
- <view class="infos">
- <view class="name">
- 跆拳道
- </view>
- <view class="tips">
- <view class="item">
- 强身健体
- </view>
- <view class="item">
- 磨练意志
- </view>
- </view>
- <view class="teacher-price">
- <view class="teacher">
- <view class="photo">
- <img src="../../../assets/img/teacher.png" alt="">
- </view>
- <view class="name">
- 鲁老师
- </view>
- </view>
- <view class="price">
- 低至30元/课
- </view>
- </view>
- </view>
- </view>
- <view class="infos-box">
- <view class="picture">
- <img src="../../../assets/img/classify1.png" alt="">
- </view>
- <view class="infos">
- <view class="name">
- 中国舞十级班
- </view>
- <view class="tips">
- <view class="item">
- 专业考证
- </view>
- <view class="item">
- 限时报名
- </view>
- </view>
- <view class="teacher-price">
- <view class="teacher">
- <view class="photo">
- <img src="../../../assets/img/teacher.png" alt="">
- </view>
- <view class="name">
- 鲁老师
- </view>
- </view>
- <view class="price">
- 低至30元/课
- </view>
- </view>
- </view>
- </view>
- <u-divider>没有更多了</u-divider>
- </view>
- <ParentsTabbar :current="0" ref="tabbarMain"></ParentsTabbar>
- </view>
- </template>
- <script>
- import * as classScheduleApi from '@/apis/parents/classSchedule.js'
- import * as mineApi from '@/apis/parents/mine.js'
- import ParentsTabbar from '@/components/ParentsTabbar.vue'
-
- export default {
- components: {
- ParentsTabbar
- },
- data() {
- return {
- chosenList: [
- {name: '全部'},
- {name: '精品试听'},
- {name: '为您优选'},
- {name: '机构推荐'}
- ],
- chosenActive: 0,
- date: '',
- tomorrow: '',
- weekDate: [],
- weekN: ["一", "二", "三", "四", "五", "六", "日"],
- activeClass: 0,
- weekDate1: '',
- courseList: [],
- form: {
- studentName: '',
- headPhoto: ''
- },
- show: false,
- studentList: [],
- studentId: '',
- list: [{
- image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
- }, ],
- }
- },
- onReady() {
- if(this.carhelp.getStudentId()) {
- this.studentId = this.carhelp.getStudentId().studentId;
- this.getStudentDetail();
- this.getToday();
- }
-
- this.getStudentList();
- },
- methods: {
- chosenClick(item,index) {
- this.chosenActive = index;
- },
- getCourseList() {
- this.courseList = [];
- uni.showLoading({
- title: "加载中",
- mask: true,
- })
- classScheduleApi.loadMySchedule({
- studentId: this.studentId,
- startDate: this.date,
- endDate: this.weekDate[6].day
- }).then((response) => {
- uni.hideLoading();
- this.courseList = response.data;
- }).catch(error => {
- uni.showToast({
- title: error,
- icon: "none"
- })
- })
- },
- getToday() {
- this.weekDate = [];
- let date = new Date(); //当前日期
- let year = date.getFullYear(); //当前年
- let month = date.getMonth() + 1; //当前月
- let day = date.getDate(); //当天
- let mydate = new Date(year, month - 1, day);
- let weekday = mydate.getDay();
- this.weekDate1 = new Date(year, month - 1, day + 1 - weekday);
- this.getWeekDate(true);
- },
- getWeekDate(bl) {
- let weekDate2 = new Date(this.weekDate1.getTime());
- for (var i = 0; i < 7; i++) {
- for (var j = 0; j < this.weekN.length; j++) {
- if (i == j) {
- this.weekDate.push({
- week: this.weekN[j],
- day: this.getFormatDate(new Date(weekDate2.setDate(this.weekDate1.getDate() + i))),
- isDotShow: false
- })
- }
- }
- }
-
- if (bl) {
- let date = new Date(); //当前日期
- date = this.getFormatDate(date);
- for (var m = 0; m < this.weekDate.length; m++) {
- if (date == this.weekDate[m].day) {
- this.activeClass = m;
- this.date = this.weekDate[m].day;
- this.tomorrow = this.weekDate[m+1].day;
- }
- }
- this.getCourseList();
- }
- },
- getFormatDate(date) {
- let myyear = date.getFullYear();
- let mymonth = date.getMonth() + 1;
- let myweekday = date.getDate();
- if (mymonth < 10) {
- mymonth = "0" + mymonth;
- }
- if (myweekday < 10) {
- myweekday = "0" + myweekday;
- }
-
- return (myyear + "-" + mymonth + "-" + myweekday);
- },
- getStudentDetail() {
- uni.showLoading({
- title: "加载中",
- mask: true,
- })
- mineApi.getStudentDtl({
- studentId: this.studentId
- }).then((response) => {
- uni.hideLoading();
- this.form.studentName = response.data.studentName;
- this.form.headPhoto = response.data.headPhoto;
- }).catch(error => {
- uni.showToast({
- title: error,
- icon: "none"
- })
- })
- },
- confirm(e) {
- this.carhelp.setStudentId({studentId: e[0].value});
- this.studentId = e[0].value;
- this.getStudentDetail();
- },
- getStudentList() {
- uni.showLoading({
- title: "加载中",
- mask: true,
- })
- mineApi.studentList().then((res) => {
- uni.hideLoading();
- var list = res.data.studentList;
- for (var i = 0; i < list.length; i++) {
- this.studentList.push({
- value: list[i].studentId,
- label: list[i].studentName
- })
- }
- }).catch(error => {
- uni.showToast({
- title: error,
- icon: "none"
- })
- })
- },
- }
- }
- </script>
- <style lang="scss" scoped>
- page{
- padding-bottom: 100px;
- }
- .navigation {
- display: flex;
- justify-content: space-between;
- height: 44px;
- background-color: rgba(13, 186, 199, 1);
- padding: 0 16px;
- .title{
- line-height: 44px;
- color: #ffffff;
- font-size: 20px
- }
- .identity{
- display: flex;
- align-items:center;
- .picture{
- width: 24px;
- height: 24px;
- border-radius: 50px;
- overflow: hidden;
- margin-right: 4px;
- img{
- width: 100%;
- height: 100%;
- vertical-align: middle;
- }
-
- }
- .name{
- margin-right: 4px;
- color: rgba(255, 255, 255, 1);
- }
- .icon{
- img{
- vertical-align: middle;
- }
- }
- }
-
-
- }
- .head {
- background: linear-gradient(179.89deg, rgba(13, 186, 199, 1) 61.7%, rgba(244, 246, 246, 1) 97.7%);
- padding-bottom: 100px;
- .wrap {
- padding: 16px;
- }
- }
- .my-app {
- margin: -100px 16px 16px 16px;
- border-radius: 12px 12px 0px 0px;
- padding: 16px;
- background-color: #fff;
- .app-items {
- display: flex;
- flex-wrap: wrap;
- .item {
- width: 25%;
- display: flex;
- flex-direction: column;
- align-items: center;
- margin-bottom: 40rpx;
- .icon-box {
- width: 40px;
- height: 40px;
- text-align: center;
- border-radius: 8px;
- position: relative;
- .count {
- width: 28px;
- height: 16px;
- line-height: 16px;
- border-radius: 50px;
- background-color: rgba(238, 49, 56, 1);
- color: rgba(255, 255, 255, 1);
- font-size: 10px;
- text-align: center;
- position: absolute;
- top: -16rpx;
- right: -28rpx;
- }
- img {
- margin: 8px 0;
- }
- }
- .text {
- margin-top: 16rpx;
- }
- }
- }
- }
- // 最近课程
- .course {
- margin: auto;
- margin-top: 16px;
- width: 91.4%;
- .title {
- height: 20px;
- line-height: 20px;
- margin-bottom: 14px;
- color: #333333;
- font-weight: bold;
- img {
- vertical-align: middle;
- margin-right: 8px;
- }
- }
- .course-infos {
- display: flex;
- justify-content: space-between;
- .info-box {
- border-top: 2px solid #0DBAC7;
- background: linear-gradient(to right, #E4F8E3, #dcf5f6);
- width: 47.8%;
- padding: 24rpx 0 14rpx 24rpx;
- box-shadow: 2px 2px 2px 2px #e7e9e9;
- border-radius: 8px;
- position: relative;
- .position {
- width: 48rpx;
- height: 40rpx;
- line-height: 40rpx;
- position: absolute;
- top: 0;
- right: 16rpx;
- text-align: center;
- border-radius: 0px 0px 4px 4px;
- font-size: 12px;
- color: #fff;
- }
- .today {
- background-color: #0DBAC7;
- }
- .tomorrow {
- background-color: #0086FF;
- }
- .class-name {
- height: 20px;
- color: rgba(51, 51, 51, 1);
- font-size: 14px;
- }
- .location-time {
- margin-top: 8rpx;
- display: flex;
- justify-content: start;
- color: rgba(119, 119, 119, 1);
- font-size: 12px;
- .time {
- margin-left: 8rpx;
- }
- }
- .date {
- color: rgba(119, 119, 119, 1);
- font-size: 12px;
- margin-top: 8rpx;
- }
- }
- .info-box2 {
- border-top: 2px solid #0086FF;
- }
- }
- }
- .recommend{
- margin:32px 16px ;
- .title {
- height: 20px;
- line-height: 20px;
- margin-bottom: 14px;
- color: #333333;
- font-weight: bold;
-
- img {
- vertical-align: middle;
- margin-right: 8px;
- }
- }
- .classify{
- display: flex;
- margin-bottom: 24px;
- .item{
- border-radius: 12px;
- line-height: 32px;
- background-color: rgba(255, 255, 255, 1);
- color: rgba(119, 119, 119, 1);
- text-align: center;
- border: 1px solid rgba(204, 204, 204, 1);
- padding: 0 8px;
- margin-left: 12px;
- }
- .chosen{
- border: 1px solid rgba(13, 186, 199, 1);
- color: rgba(13, 186, 199, 1);
- }
- }
- .infos-box{
- border-radius: 12px;
- background-color: rgba(255, 255, 255, 1);
- padding: 12px;
- margin-bottom: 12px;
- display: flex;
- .picture{
- width: 200rpx;
- height: 200rpx;
- border-radius: 4px;
- overflow: hidden;
- img{
- width: 100%;
- height: 100%;
- }
- }
- .infos{
- flex: 1;
- margin-left: 12px;
- .name{
- color: rgba(51, 51, 51, 1);
- font-size: 16px;
- }
- .tips{
- display: flex;
- margin-top: 8px;
- .item{
- padding: 0 8px;
- line-height: 20px;
- border-radius: 4px;
- background-color: rgba(241, 243, 244, 1);
- color: rgba(16, 16, 16, 1);
- font-size: 12px;
- margin-right: 8px;
- }
- }
- .teacher-price{
- margin-top: 44rpx;
- display: flex;
- justify-content: space-between;
- align-items: center;
- .teacher{
- display: flex;
- align-items: center;
- .photo{
- width: 32px;
- height: 32px;
- border-radius: 50px;
- overflow: hidden;
- margin-right: 8px;
- img{
- width: 100%;
- height: 100%;
- }
- }
- }
- .price{
- color: rgba(255, 61, 0, 1);
- }
- }
- }
- }
- }
- </style>
|