fix:学生中心修改

src/pages/studentcenter/index.vue

@@ -1,360 +1,366 @@
-<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'
-        }
-      }
-    }
-  },
-  onShow() {
-    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.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) {
-      // 模拟动态打卡
-      // if (this.info.selected.length > 5) return
-      // this.info.selected.push({
-      //   date: e.fulldate,
-      //   info: '打卡'
-      // })
-    },
-    monthSwitch(e) {
-      console.log(e)
-    },
-    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>
+<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>

src/pages/studentcenter/signIn.vue

@@ -1,200 +1,202 @@
-<template>
-  <view class="page">
-		<cu-custom :isBack="true" title="上课签到"></cu-custom>
-		<view class="header bg-white" 	:style="[{top:topHeader + 'px'}]">
-			<view class="icon_title flex align-center justify-between solid-bottom">
-				<view class="info flex align-center justify-between">
-					 <image mode="scaleToFill" :src="user.avatarUrl" class="avatar lg" v-if="user.avatarUrl"></image>
-			  	 <view class="username">{{user.nickName}}</view>
-				</view>
-				<view style="color:#00D2E3">{{info.status_desc}}</view>
-    	</view>
-			<view class="class_info">
-				<view style="font-size:15px;margin-top: .6rem;">{{info.start_at}}</view>
-				<view class="class_title">{{info.course_name}}</view>
-				<view class="address flex align-center">
-					<image src="/static/imgs/school.png" mode="widthFix" style="width:18px;"/>
-					<view style="margin-left: 10px;margin-right: 20px">{{info.school_name}}</view>
-					<image src="/static/imgs/address.png" mode="widthFix" style="width:14px;"/>
-					<view style="margin-left: 10px">{{info.classroom_name}}</view>
-				</view>
-    	</view>
-		</view>
-		<view class="content">
-			<view class="content_title">签到说明</view>
-    	<view>接到学生后请“点击签到”按钮作为签到</view>
-			<view class="button" :style="checked?'background: #ddd':''"  hover-class="button_hover" @tap="signIn">
-				<view class="text" :style="checked?'color: #aaa':''"> {{checked?'已签到':'点击签到'}}</view>
-				<view class="pulse" v-if="!checked"></view>
-				<view class="pulse1" v-if="!checked"></view>
-    	</view>
-     	<view class="des_title">
-				<view class="line"></view>
-				<view>注意事项</view>
-				<view class="line"></view>
-    	</view>
-			<view>为确保学校每个学生的接送安全，平台特将接送学生的有关的 安全细则及注意事项重申如下，希望相关监护人及学生遵照执 行： </view>
-			<view>1.要遵守校规，按时到校，听从教师的教导。 </view>
-			<view>2.上课要自觉遵守课堂纪律，认真听讲，积极思维，好好学习。</view>
-		</view>
-	</view>
-</template>
-
-<script>
-import { _getSignIn, _toSignIn } from '@/api/course'
-import { mapGetters } from 'vuex'
-export default {
-  data() {
-    return {
-      topHeader: this.globalCustomBarHeight,
-      checked: false,
-      plan_id: '',
-      clock_in_id: '',
-      info: {}
-    }
-  },
-  computed: {
-    ...mapGetters([
-      'user'
-    ])
-  },
-  onLoad(options) {
-    const id = decodeURIComponent(options.plan_id)
-    if (!id) uni.navigateBack()
-    this.plan_id = id
-    this.init()
-  },
-  methods: {
-    init() {
-      _getSignIn({ plan_id: this.plan_id }).then(res => {
-        this.info = res.data.sign_data
-      })
-    },
-    signIn() {
-      _toSignIn({ plan_id: this.plan_id }).then(res => {
-        this.checked = true
-      })
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.header{
-  border-radius: 0 0 10px 10px;
-  padding: .8rem;
-  .icon_title{
-    .info{
-      .username{
-        font-size: 21px;
-        margin-left: 15px;
-      }
-    }
-  }
-  .class_info{
-    margin-left: .8rem;
-  }
-  .class_title{
-    font-size: 20px;
-    font-weight: 550;
-    margin-top: .6rem;
-  }
-  .address{
-    display: flex;
-    align-items: center;
-    color: #898E96;
-    font-size: 14px;
-    margin-top: .6rem;
-  }
-}
-.content{
-  margin-top: .8rem;
-  background: #fff;
-  color: #888;
-  padding: 2rem;
-  font-size: 14px;
-  .content_title{
-    font-size: 15px;
-    font-weight: 600;
-    color: #000;
-    margin-bottom: .4rem;
-  }
-  .button{
-    margin: 2rem auto;
-    width: 30vw;
-    height: 30vw;
-    border-radius: 50%;
-    background: #5fcfe0;
-    text-align: center;
-    line-height: 30vw;
-    font-size: 18px;
-    color: #fff;
-    font-weight: 600;
-    position: relative;
-    .text{
-			position: absolute;
-			top: 50%;
-      left: 50%;
-      transform: translate(-50%,-50%);
-		  width: 30vw;
-      z-index: 999;
-    }
-    .pulse{
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 30vw;
-      height: 30vw;
-      border-radius: 50%;
-      animation: warn1 2s linear .5s infinite;
-      background: #bfeff7;
-      z-index: 1;
-    }
-    .pulse1{
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 30vw;
-      height: 30vw;
-      border-radius: 50%;
-      animation: warn1 2s linear 1s infinite;
-      background: #76dae8;
-      z-index: 1;
-    }
-  }
-  .des_title{
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-bottom: 1rem;
-    .line{
-      border: 1px solid #aaa;
-      width: 20vw;
-      margin: 0 15px;
-    }
-  }
-}
-
-@keyframes warn1 {
-  0% {
-  transform: scale(1);
-  opacity: 0;
-  }
-  25% {
-  transform: scale(1);
-  opacity: .1;
-  }
-  50% {
-  transform: scale(1);
-  opacity: .3;
-  }
-  75% {
-  transform: scale(1.1);
-  opacity: .5;
-  }
-  100% {
-  transform: scale(1.3);
-  opacity: 0;
-  }
-}
-</style>
+<template>
+  <view class="page">
+		<cu-custom :isBack="true" title="上课签到"></cu-custom>
+		<view class="header bg-white" 	:style="[{top:topHeader + 'px'}]">
+			<view class="icon_title flex align-center justify-between solid-bottom">
+				<view class="info flex align-center justify-between">
+					 <image mode="scaleToFill" :src="user.avatarUrl" class="avatar lg" v-if="user.avatarUrl"></image>
+			  	 <view class="username">{{user.nickName}}</view>
+				</view>
+				<view style="color:#00D2E3">{{info.status_desc}}</view>
+    	</view>
+			<view class="class_info">
+				<view style="font-size:15px;margin-top: .6rem;">{{info.start_at}}</view>
+				<view class="class_title">{{info.course_name}}</view>
+				<view class="address flex align-center">
+					<image src="/static/imgs/school.png" mode="widthFix" style="width:18px;"/>
+					<view style="margin-left: 10px;margin-right: 20px">{{info.school_name}}</view>
+					<image src="/static/imgs/address.png" mode="widthFix" style="width:14px;"/>
+					<view style="margin-left: 10px">{{info.classroom_name}}</view>
+				</view>
+    	</view>
+		</view>
+		<view class="content">
+			<view class="content_title">签到说明</view>
+    	<view>接到学生后请“点击签到”按钮作为签到</view>
+			<view class="button" :style="checked?'background: #ddd':''"  hover-class="button_hover" @tap="signIn">
+				<view class="text" :style="checked?'color: #aaa':''"> {{checked?'已签到':'点击签到'}}</view>
+				<view class="pulse" v-if="!checked"></view>
+				<view class="pulse1" v-if="!checked"></view>
+    	</view>
+     	<view class="des_title">
+				<view class="line"></view>
+				<view>注意事项</view>
+				<view class="line"></view>
+    	</view>
+			<view>为确保学校每个学生的接送安全，平台特将接送学生的有关的 安全细则及注意事项重申如下，希望相关监护人及学生遵照执 行： </view>
+			<view>1.要遵守校规，按时到校，听从教师的教导。 </view>
+			<view>2.上课要自觉遵守课堂纪律，认真听讲，积极思维，好好学习。</view>
+		</view>
+	</view>
+</template>
+
+<script>
+import { _getSignIn, _toSignIn } from '@/api/course'
+import { mapGetters } from 'vuex'
+export default {
+  data() {
+    return {
+      topHeader: this.globalCustomBarHeight,
+      checked: false,
+      plan_id: '',
+      clock_in_id: '',
+      info: {}
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'user'
+    ])
+  },
+  onLoad(options) {
+    const id = decodeURIComponent(options.plan_id)
+    if (!id) uni.navigateBack()
+    this.plan_id = id
+    this.init()
+  },
+  methods: {
+    init() {
+      _getSignIn({ plan_id: this.plan_id }).then(res => {
+        this.info = res.data.sign_data
+        this.checked = !this.info.status
+      })
+    },
+    signIn() {
+      if (this.checked) return false
+      _toSignIn({ clock_in_id: this.info.clock_in_id }).then(res => {
+        this.checked = true
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.header{
+  border-radius: 0 0 10px 10px;
+  padding: .8rem;
+  .icon_title{
+    .info{
+      .username{
+        font-size: 21px;
+        margin-left: 15px;
+      }
+    }
+  }
+  .class_info{
+    margin-left: .8rem;
+  }
+  .class_title{
+    font-size: 20px;
+    font-weight: 550;
+    margin-top: .6rem;
+  }
+  .address{
+    display: flex;
+    align-items: center;
+    color: #898E96;
+    font-size: 14px;
+    margin-top: .6rem;
+  }
+}
+.content{
+  margin-top: .8rem;
+  background: #fff;
+  color: #888;
+  padding: 2rem;
+  font-size: 14px;
+  .content_title{
+    font-size: 15px;
+    font-weight: 600;
+    color: #000;
+    margin-bottom: .4rem;
+  }
+  .button{
+    margin: 2rem auto;
+    width: 30vw;
+    height: 30vw;
+    border-radius: 50%;
+    background: #5fcfe0;
+    text-align: center;
+    line-height: 30vw;
+    font-size: 18px;
+    color: #fff;
+    font-weight: 600;
+    position: relative;
+    .text{
+			position: absolute;
+			top: 50%;
+      left: 50%;
+      transform: translate(-50%,-50%);
+		  width: 30vw;
+      z-index: 999;
+    }
+    .pulse{
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 30vw;
+      height: 30vw;
+      border-radius: 50%;
+      animation: warn1 2s linear .5s infinite;
+      background: #bfeff7;
+      z-index: 1;
+    }
+    .pulse1{
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 30vw;
+      height: 30vw;
+      border-radius: 50%;
+      animation: warn1 2s linear 1s infinite;
+      background: #76dae8;
+      z-index: 1;
+    }
+  }
+  .des_title{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 1rem;
+    .line{
+      border: 1px solid #aaa;
+      width: 20vw;
+      margin: 0 15px;
+    }
+  }
+}
+
+@keyframes warn1 {
+  0% {
+  transform: scale(1);
+  opacity: 0;
+  }
+  25% {
+  transform: scale(1);
+  opacity: .1;
+  }
+  50% {
+  transform: scale(1);
+  opacity: .3;
+  }
+  75% {
+  transform: scale(1.1);
+  opacity: .5;
+  }
+  100% {
+  transform: scale(1.3);
+  opacity: 0;
+  }
+}
+</style>