parentNew/src/pages/studentcenter/index.vue

<template>
  <view class="page">
    <cu-custom :isBack="false"></cu-custom>
		<view class="header" :style="[{top:topHeader + 'px'}]">
			<view class="header-title header-switch">
				<view class="header-title-main" @tap="changeTab('schedule')" :class="{'cur':type==='schedule'}">
						<view class="margin-bottom-xs">日程表</view>
						<view class="point"></view>
				</view>
				<view class="header-title-main margin-left-lg" @tap="changeTab('mine')" :class="{'cur':type==='mine'}">
						<view class="margin-bottom-xs">我的</view>
						<view class="point"></view>
				</view>
			</view>
			 <view style="width:120px;" v-if="type==='mine'">
				 	<swiper-tab :menuList="menuList" @changeTab="swipe" :activeTab="currentIndex"></swiper-tab>
			 </view>
		</view>
		<!-- 日程表 -->
		<view v-if="type==='schedule'">
			<scroll-view scroll-y="true"
			:style="[{marginTop:'56px',height:'calc(100vh - 114px - '+ topHeader+'px)'}]">
			 <uni-calendar class="uni-calendar--hook" :selected="info.selected"
				style="padding-top:100px;"
				:showMonth="false" @change="changeDay" @monthSwitch="monthSwitch" />
				<view class="cu-card margin-top-xs padding-xs">
					<view class="cu-item day-info">
						<view class="day-title flex justify-between solid-bottom padding text-lg">
							 <view>应到上课节数：{{present.be_section_num}}节</view>
							 <view>实际上课节数: {{present.actual_section_num}}节</view>
						</view>
						<view class="day-chart flex justify-between padding">
							<view v-for="(chart,key) in attendance" :key="key" class="flex-sub">
									<canvas :canvas-id="key" style="margin:0 auto;width:100%;height:80px;"></canvas>
									<view style="margin-left:18px;">{{chart.title}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="list margin-top-xs">
					<view class="cu-card margin-top margin-bottom shadow" v-for="(item,index) in classList" :key="index">
						<view class="cu-item" v-for="(mark,i) in item.mark" :key="i">
							<view class="card-header flex justify-end solid-bottom">
									<view class="text-student course-status">
											{{mark.status_desc}}
									</view>
							</view>
							<view class="card flex">
									<view class="card-left">
										<img mode="scaleToFill" :src="mark.avatar" alt="" class="card-image">
									</view>
									<view class="card-right margin-left-sm">
										<view class="card-title">{{mark.course_name}}</view>
										<view class="card-item margin-top-xs" >
										 	<text class="card-text">{{mark.start_at}}</text>
									  </view>
										<view class="card-item margin-top-xs" >
										 	<text class="card-text">{{mark.end_at}}</text>
									  </view>
										<view class="card-item margin-top-xs">
											<button class="cu-btn round line-cyan button-hover" @tap="classOperation(mark.class_plan_id)">
												{{mark.status==-1?'查看':'去上课'}}
											</button>
											<button class="cu-btn round line-red button-hover margin-left" @tap="askLeave(mark.class_plan_id)">去请假</button>
										</view>
									</view>
								</view>
						</view>
					</view>
				</view>
		  </scroll-view>
		</view>
		<!-- 我的 -->
		<view v-if="type==='mine'">
			<scroll-view scroll-y="true" @scrolltolower="loadMore" class="scroll-main"
			:style="[{height:'calc(100vh - 114px - '+ topHeader+'px)'}]">
				<view class="list">
						<view class="cu-card margin-top margin-bottom shadow" v-for="(item,index) in list" :key="index">
							<view class="cu-item">
								<view class="card-header flex justify-between solid-bottom">
									<view v-if="item.day">{{item.day}}</view>
									<view class="text-student course-status" v-if="item.status">
											{{item.status}}
									</view>
									<view class="text-student course-status" v-if="currentIndex===1">
											已完结
									</view>
								</view>
								<view class="card flex">
									<view class="card-left">
										<img mode="scaleToFill" :src="item.image" alt="" class="card-image">
									</view>
									<view class="card-right margin-left-sm">
										<view class="card-title">{{item.attend_name}}</view>
										<view class="card-item margin-top-xs" >
											<text class="card-label">机构：</text>
										 	<text class="card-text">{{item.agency_name||'-'}}</text>
									  </view>
										<view class="card-item margin-top-xs" >
											<text class="card-label">老师：</text>
										 	<text class="card-text">{{item.teacher||'-'}}</text>
									  </view>
									</view>
								</view>
							</view>
						</view>
				</view>
			</scroll-view>
		</view>
    <mp-tabbar :outerSelected="1" />
  </view>
</template>

<script>
import NP from 'number-precision'
import { uniCalendar } from '@dcloudio/uni-ui'
import { _nowCourse, _courseHistory, _attendance, _dateCourse } from '@/api/course'
import { getDate } from '@/common/utils'
import swiperTab from '@/components/swiper-tab.vue'
export default {
  components: {
    uniCalendar, swiperTab
  },
  data () {
    return {
      topHeader: this.globalCustomBarHeight,
      type: 'schedule',
      menuList: ['我的', '历史'],
      currentIndex: 0,
      page_num: 1,
      noMore: false, // 加载判断
      list: [],
      classList: [], // 日程表
      info: { // 日历数据
        year: '',
        month: '',
        day: '',
        selected: []
      },
      present: {
        absenteeism_num: 0,
        actual_section_num: 5,
        be_section_num: 5,
        late_num: 0,
        leave_num: 0,
        normal_num: 0
      }, // 实际出席情况
      attendance: { // 出席统计数据
        leave_num: {
          title: '请假', times: 2, color: '#9bde78'
        },
        late_num: {
          title: '正常', times: 3, color: '#e0be60'
        },
        normal_num: {
          title: '迟到', times: 1, color: '#61d4e2'
        },
        absenteeism_num: {
          title: '旷课', times: 0, color: '#d697eb'
        }
      }
    }
  },
  onReady() {
    const today = getDate(new Date(), 0)
    this.info.year = today.year
    this.info.month = today.month
    this.info.day = today.date
    this.init()
  },
  methods: {
    init() {
      if (this.type === 'mine') {
        this.get_list()
      } else {
        this.getSehedule()
      }
    },
    getSehedule() {
      this.get_attend().then(res => {
        this.present = res.data
        this.fix_attend(res.data)
        this.drawChart()
        this.get_dateCourse()
      })
    },
    classOperation(id) { // 上课
      this.globalNavigateTo('studentOperation', { id })
    },
    askLeave(id) { // 请假
      this.globalNavigateTo('studentAbsent', { id })
    },
    loadMore() {
      if (this.noMore) {
        uni.showToast({ title: '没有更多了', icon: 'none' })
        return false
      }
      this.page_num++
      this.get_list()
    },
    get_list() {
      if (this.currentIndex === 0) {
        this.get_course()
      } else {
        this.get_history()
      }
    },
    get_course() {
      _nowCourse({ page_num: this.page_num }).then(res => {
        if (this.page_num > 1) {
          if (res.data.length < this.page_size) this.noMore = true
          this.list = this.list.concat(res.data)
        } else {
          this.noMore = false
          this.list = res.data
        }
      })
    },
    get_history() {
      _courseHistory({ page_num: this.page_num }).then(res => {
        if (this.page_num > 1) {
          if (res.data.length < this.page_size) this.noMore = true
          this.list = Object.assign({}, this.list, res.data)
        } else {
          this.noMore = false
          this.list = res.data
        }
      })
    },
    drawChart() {
      for (var key in this.attendance) {
        this.draw(this.attendance[key], key)
      }
    },
    changeTab(type) {
      this.type = type
      this.$nextTick(() => {
        this.init()
      })
    },
    swipe(index) {
      this.currentIndex = index
      this.page_num = 1
      this.get_list()
    },
    changeDay(e) {
      this.info.day = e.date
      // 模拟动态打卡
      // if (this.info.selected.length > 5) return
      // this.info.selected.push({
      //   date: e.fulldate,
      //   info: '打卡'
      // })
    },
    monthSwitch(e) {
      this.info.year = e.year
      this.info.month = e.month < 10 ? '0' + e.month : e.month
      this.getSehedule()
    },
    get_attend() { // 获取出席情况
      const date = this.info.year + '-' + this.info.month
      return new Promise((resolve, reject) => {
        const info = _attendance({ date })
        resolve(info)
      })
    },
    fix_attend(info) { // 补充出席实际数据
      Object.keys(this.attendance).forEach(key => {
        this.attendance[key].times = info[key]
      })
    },
    get_dateCourse() { // 获取对应日期数据
      _dateCourse({ year: this.info.year, month: this.info.month }).then(res => {
        this.classList = res.data
      })
    },
    draw (ele, key) {
      const ctx = uni.createCanvasContext(key)
      const value = NP.divide(ele.times, this.present.be_section_num) * 100// 次数转化对应百分比值
      const startAngle = 1.5
      const endAngle = 1.5 + value * 2 / 100
      // 画圆环
      ctx.beginPath()
      ctx.arc(34, 40, 28, 0, 2 * Math.PI)
      ctx.setStrokeStyle('#EDEDED') // 弧线的颜色
      ctx.setLineWidth('8') // 弧的宽度
      ctx.setLineCap('round') // 线条结束端点样式 butt 平直 round 圆形 square 正方形
      ctx.stroke()
      // 画进度条
      ctx.beginPath()
      ctx.arc(34, 40, 28, startAngle * Math.PI, endAngle * Math.PI)
      ctx.setStrokeStyle(ele.color)
      ctx.setLineWidth('8')
      ctx.setLineCap('round')
      ctx.stroke()
      ctx.setFontSize(14)
      ctx.setFillStyle('#000') // 文字的颜色
      ctx.fillText(ele.times + '次', 20, 44)
      ctx.draw()
    }
  }
}
</script>

<style lang="scss">
@import '~@/common/css/mixin.scss';
.page{
	height:100vh;
}
.header-switch{
	justify-content:start;
	.header-title-main{
		font-size:18px;
		color:#999;
		.point{
			opacity: 0;
		}
		&.cur{
			transition: font-size .3s;
			font-size:24px;
			color:#000;
			.point{
				opacity: 1;
		  }
		}
	}
}
.day-info{

}
.scroll-main{
	margin-top:78px;
	padding:20rpx;
}
.cu-card{
	.cu-item{
		margin-top:10rpx;
		padding:20rpx;
		margin:0;
	}
}
.card-header{
	padding-bottom:10px;
  @include title(10px,18px);
}
.card{
	&-title{
		font-size:16px;
	}
	&-image{
		width:35vw;
		height:25vw;
		border-radius:2vw;
	}
	&-label{
		color:#999;
	}
	&-text{
		color:#333;
	}
}
.course-status{
	font-size:14px;
	font-weight:normal;
}
</style>