Página inicial Explorar Ajuda
Registrar Entrar
pikapika
/
parentNew
Observar 3
Favorito 0
Fork 0
Arquivos Issues 0 Pull Requests 0 Wiki
Ver código fonte

no message

seamwang 1 ano atrás
pai
859fa17ff8
commit
7d9adc80a5
6 arquivos alterados com 328 adições e 206 exclusões
Visão dividida Mostrar estatísticas do Diff
  1. 33 33
      src/api/course.js
  2. 113 54
      src/components/calendar.vue
  3. 50 10
      src/pages/class/gift.vue
  4. 12 6
      src/pages/mine/courseFiles.vue
  5. 28 16
      src/pages/studentcenter/classVideo.vue
  6. 92 87
      src/pages/studentcenter/index.vue

+ 33 - 33
src/api/course.js
Ver arquivo 

@@ -2,133 +2,133 @@ import fetch from '@/common/utils/fetch.js'
2 2
3 3 
 // 获取课程列表
4 4 
 export function _optionCourse (params) {
5 
-	return fetch('/parents/Mycourses/option_course', params)
5 
+  return fetch('/parents/Mycourses/option_course', params)
6 6 
 }
7 7 
 //智能报课获取周期
8 8 
 export function _intelligentDates () {
9 
-	return fetch('/parents/Intelligent/getLigentDate')
9 
+  return fetch('/parents/Intelligent/getLigentDate')
10 10 
 }
11 11 
 //智能报课获取兴趣
12 12 
 export function _intelligentInterests () {
13 
-	return fetch('/parents/Intelligent/getLigentCategory')
13 
+  return fetch('/parents/Intelligent/getLigentCategory')
14 14 
 }
15 15 
 //智能报课获取课程
16 16 
 export function _intelligentCourses (params) {
17 
-	return fetch('/parents/Intelligent/pickLigentCourse', params)
17 
+  return fetch('/parents/Intelligent/pickLigentCourse', params)
18 18 
 }
19 19 
 // 获取课程筛选选项 parents/Mycourses/advanced_filter
20 20 
 export function _filter (params) {
21 
-	return fetch('/parents/Mycourses/advanced_filter', params)
21 
+  return fetch('/parents/Mycourses/advanced_filter', params)
22 22 
 }
23 23 
 // 课程详情 parents/Mycourses/course_details
24 24 
 export function _detail (params) {
25 
-	return fetch('/parents/Mycourses/course_details', params)
25 
+  return fetch('/parents/Mycourses/course_details', params)
26 26 
 }
27 27 
 // 课程套餐详情 parents/Mycourses/course_gift
28 28 
 export function _gift (params) {
29 
-	return fetch('/parents/Mycourses/course_gift', params)
29 
+  return fetch('/parents/Mycourses/course_gift', params)
30 30 
 }
31 31 
 // 课程评价 parents/Mycourses/now_details_comment
32 32 
 export function _comments (params) {
33 
-	return fetch('/parents/Mycourses/now_details_comment', params, 'POST', false)
33 
+  return fetch('/parents/Mycourses/now_details_comment', params, 'POST', false)
34 34 
 }
35 35 
 // 添加购物车 parents/Commit/join_shop
36 36 
 export function _joinShop (params, showFail = true) {
37 
-	return fetch('/parents/Commit/join_shop', params, 'POST', showFail)
37 
+  return fetch('/parents/Commit/join_shop', params, 'POST', showFail)
38 38 
 }
39 39 
 // 批量添加购物车
40 40 
 export function _joinShops (params) {
41 
-	return fetch('/parents/Commit/joinShopMulti', params)
41 
+  return fetch('/parents/Commit/joinShopMulti', params)
42 42 
 }
43 43 
 // 购物车列表 /parents/Shopping/index
44 44 
 export function _shopList (params) {
45 
-	return fetch('/parents/Shopping/index', params)
45 
+  return fetch('/parents/Shopping/index', params)
46 46 
 }
47 47 
 // 删除购物车 /parents/Shopping/del_shopping
48 48 
 export function _delShop (params) {
49 
-	return fetch('/parents/Shopping/del_shopping', params)
49 
+  return fetch('/parents/Shopping/del_shopping', params)
50 50 
 }
51 51 
 // 生成订单 parents/Commit/order
52 52 
 export function _createOrder (params) {
53 
-	return fetch('/parents/Commit/order', params)
53 
+  return fetch('/parents/Commit/order', params)
54 54 
 }
55 55 
 // 订单列表 parents/Ordercentre/index
56 56 
 export function _orderCenter (params) {
57 
-	return fetch('/parents/Ordercentre/index', params)
57 
+  return fetch('/parents/Ordercentre/index', params)
58 58 
 }
59 59 
 // 退课数据 get_dropcourse_byorder
60 60 
 export function _dropList (params) {
61 
-	return fetch('/parents/dropcourse/get_dropcourse_byorder', params)
61 
+  return fetch('/parents/dropcourse/get_dropcourse_byorder', params)
62 62 
 }
63 63 
 // 订单支付
64 64 
 export function _payOrder (params) {
65 
-	return fetch('/parents/pay/payment', params)
65 
+  return fetch('/parents/pay/payment', params)
66 66 
 }
67 67 
 // 取消订单 /parents/Ordercentre/del_order
68 68 
 export function _cancelOrder (params) {
69 
-	return fetch('/parents/Ordercentre/del_order', params)
69 
+  return fetch('/parents/Ordercentre/del_order', params)
70 70 
 }
71 71 
 // 进行退课 /parents/dropcourse/to_drop_course
72 72 
 export function _dropCourse (params) {
73 
-	return fetch('/parents/dropcourse/to_drop_course', params)
73 
+  return fetch('/parents/dropcourse/to_drop_course', params)
74 74 
 }
75 75 
 // 历史课程 /parents/Mycourses/course_history
76 76 
 export function _courseHistory (params) {
77 
-	return fetch('/parents/Mycourses/course_history', params)
77 
+  return fetch('/parents/Mycourses/course_history', params)
78 78 
 }
79 79 
 // 我的课程 /parents/Mycourses/course_history
80 80 
 export function _nowCourse (params) {
81 
-	return fetch('/parents/Mycourses/now_course', params)
81 
+  return fetch('/parents/Mycourses/now_course', params)
82 82 
 }
83 83 
 // 课程表 /parents/Mycourses/date_course
84 84 
 export function _dateCourse (params) {
85 
-	return fetch('/parents/Mycourses/date_course', params)
85 
+  return fetch('/parents/Mycourses/date_course', params)
86 86 
 }
87 87 
 // 考勤记录 /parents/attendance/get_attendance
88 88 
 export function _attendance (params) {
89 
-	return fetch('/parents/attendance/get_attendance', params)
89 
+  return fetch('/parents/attendance/get_attendance', params)
90 90 
 }
91 91 
 // 课堂详情 /parents/dailyclass/get_dailyclass_details
92 92 
 export function _dailiClass (params) {
93 
-	return fetch('/parents/dailyclass/get_dailyclass_details', params)
93 
+  return fetch('/parents/dailyclass/get_dailyclass_details', params)
94 94 
 }
95 95 
 // 安全交接情况 /parents/sign/get_sign
96 96 
 export function _getSignIn (params) {
97 
-	return fetch('/parents/sign/get_sign', params)
97 
+  return fetch('/parents/sign/get_sign', params)
98 98 
 }
99 99 
 // 进行安全交接 /parents/sign/to_sign
100 100 
 export function _toSignIn (params) {
101 
-	return fetch('/parents/sign/to_sign', params)
101 
+  return fetch('/parents/sign/to_sign', params)
102 102 
 }
103 103 
 // 进行评价 /parents/Todayclass/comment
104 104 
 export function _tocomment (params) {
105 
-	return fetch('/parents/Todayclass/comment', params)
105 
+  return fetch('/parents/Todayclass/comment', params)
106 106 
 }
107 107 
 // 评价详情
108 108 
 export function _commentDetail (params) {
109 
-	return fetch('/parents/dailyclass/get_satisfaction', params)
109 
+  return fetch('/parents/dailyclass/get_satisfaction', params)
110 110 
 }
111 111 
 // 获取请假类型
112 112 
 export function _leaveType (params) {
113 
-	return fetch('/teacher/leave/get_leave_type', params)
113 
+  return fetch('/teacher/leave/get_leave_type', params)
114 114 
 }
115 115 
 // 申请请假
116 116 
 export function _askLeave (params) {
117 
-	return fetch('/parents/schedule/student_leave', params)
117 
+  return fetch('/parents/schedule/student_leave', params)
118 118 
 }
119 119 
 //获取学生课程档案
120 120 
 export function _getStudentFiles (params) {
121 
-	return fetch('/parents/courseFiles/get_list', params)
121 
+  return fetch('/parents/courseFiles/get_list', params)
122 122 
 }
123 123 
 //获取年级
124 124 
 export function _getGrades () {
125 
-	return fetch('/parents/init/get_grades')
125 
+  return fetch('/parents/init/get_grades')
126 126 
 }
127 127 
 //获取班级
128 128 
 export function _getClasses (params) {
129 
-	return fetch('/parents/init/get_classes', params)
129 
+  return fetch('/parents/init/get_classes', params)
130 130 
 }
131 131 
 //修改信息
132 132 
 export function _fixStudent (params) {
133 
-	return fetch('/parents/init/edit_student', params)
133 
+  return fetch('/parents/init/edit_student', params)
134 134 
 }

+ 113 - 54
src/components/calendar.vue
Ver arquivo 

@@ -1,19 +1,19 @@
1 1 
 <template>
2 
-<view class='wrap'>
3 
-  <view class='header-cal'>
4 
-    <view  v-for="(item,index) in date" :key="index">{{item}}<view></view>
2 
+  <view class="wrap">
3 
+    <view class="header-cal">
4 
+      <view v-for="(item, index) in date" :key="index">{{ item }}<view></view> </view>
5 5 
     </view>
6 
-  </view>
7 
-  <view class='date-box'>
8 
-    <view v-for="(item,index) in dateArr"  :key="index"   @tap="calendarTap(item,index)">
9 
-      <view class="date-head1" :class="[todayIndex===index ? 'operationInProgress' : (showBusiness?item.styleClass:''), {'showOverdue':item.showOverdue}]">
10 
-        <view >{{item.dateNum}}</view>
6 
+    <view class="date-box">
7 
+      <view v-for="(item, index) in dateArr" :key="index" @tap="calendarTap(item, index)">
8 
+        <view
9 
+          class="date-head1"
10 
+          :class="[todayIndex === index ? 'operationInProgress' : showBusiness ? item.styleClass : '', { showOverdue: item.showOverdue, 'date-class': item.dateClass }]"
11 
+        >
12 
+          <view>{{ item.dateNum }}</view>
13 
+        </view>
11 14 
       </view>
12 15 
     </view>
13 
-
14 16 
   </view>
15 
-</view>
16 
-
17 17 
 </template>
18 18
19 19 
 <script>
 
@@ -27,7 +27,8 @@ export default {
27 27 
       type: Number,
28 28 
       value: 0
29 29 
     },
30 
-    showBusiness: { // 是否显示业务标记
30 
+    showBusiness: {
31 
+      // 是否显示业务标记
31 32 
       type: Boolean,
32 33 
       default: false
33 34 
     }
 
@@ -36,11 +37,10 @@ export default {
36 37 
     return {
37 38 
       date: ['日', '一', '二', '三', '四', '五', '六'],
38 39 
       dateArr: [],
39 
-      todayIndex: -1// 操作索引,默认指向当天
40 
+      todayIndex: -1 // 操作索引,默认指向当天
40 41 
     }
41 42 
   },
42 
-  onLoad(options) {
43 
-  },
43 
+  onLoad(options) {},
44 44 
   methods: {
45 45 
     calendarTap(item, index) {
46 46 
       this.todayIndex = index
 
@@ -49,7 +49,8 @@ export default {
49 49 
     selCalendar(year, month) {
50 50 
       this.dateInit(year, month - 1)
51 51 
     },
52 
-    setAttendance(attendance) { // 设置日历考勤
52 
+    setAttendance(attendance) {
53 
+      // 设置日历考勤
53 54 
       const start = this.dateArr.findIndex(item => item.dateNum)
54 55 
       attendance.map((item, index) => {
55 56 
         if (item !== 'stateless') {
 
@@ -60,6 +61,12 @@ export default {
60 61 
         }
61 62 
       })
62 63 
     },
64 
+    setClass(days) {
65 
+      //区分有课日期
66 
+      this.dateArr.map(item => {
67 
+        this.$set(item, 'dateClass', days.includes(item.dateNum))
68 
+      })
69 
+    },
63 70 
     dateInit(setYear, setMonth) {
64 71 
       // 1.获取当前时间
65 72 
       var date = new Date()
 
@@ -74,7 +81,7 @@ export default {
74 81 
       const year = setYear || now.getFullYear()
75 82 
       let nextYear = 0
76 83 
       const month = setMonth || now.getMonth() // 没有+1方便后面计算当月总天数
77 
-      const nextMonth = (month + 1) > 11 ? 1 : (month + 1)
84 
+      const nextMonth = month + 1 > 11 ? 1 : month + 1
78 85 
       const startWeek = new Date(year + '/' + (month + 1) + '/' + 1).getDay() // 目标月1号对应的星期
79 86 
       let dayNums = new Date(year, nextMonth, 0).getDate() // 获取目标月有多少天
80 87 
       let obj = {}
 
@@ -115,7 +122,7 @@ export default {
115 122 
 </script>
116 123
117 124 
 <style lang="scss" scoped>
118 
-.date-show{
125 
+.date-show {
119 126 
   position: relative;
120 127 
   width: 250rpx;
121 128 
   font-family: PingFang-SC-Regular;
 
@@ -124,28 +131,30 @@ export default {
124 131 
   text-align: center;
125 132 
   margin: 59rpx auto 10rpx;
126 133 
 }
127 
-.lt-arrow,.rt-arrow{
134 
+.lt-arrow,
135 
+.rt-arrow {
128 136 
   position: absolute;
129 137 
   top: 1rpx;
130 138 
   width: 60rpx;
131 139 
   height: 60rpx;
132 140 
 }
133 
-.lt-arrow image,.rt-arrow image{
141 
+.lt-arrow image,
142 
+.rt-arrow image {
134 143 
   width: 14rpx;
135 144 
   height: 26rpx;
136 145 
 }
137 
-.lt-arrow{
146 
+.lt-arrow {
138 147 
   left: -110rpx;
139 148 
   transform: rotate(180deg);
140 149 
 }
141 
-.rt-arrow{
150 
+.rt-arrow {
142 151 
   right: -100rpx;
143 152 
 }
144 
-.header-cal{
153 
+.header-cal {
145 154 
   font-size: 0;
146 155 
   /* padding: 0 24rpx;  */
147 156 
 }
148 
-.header-cal>view{
157 
+.header-cal > view {
149 158 
   display: inline-block;
150 159 
   width: 14.285%;
151 160 
   color: #5fd0e4;
 
@@ -154,21 +163,21 @@ export default {
154 163 
   /* border-bottom: 1px solid #D0D0D0;  */
155 164 
   padding: 39rpx 0;
156 165 
 }
157 
-.weekMark{
166 
+.weekMark {
158 167 
   position: relative;
159 168 
 }
160 
-.weekMark view{
169 
+.weekMark view {
161 170 
   position: absolute;
162 171 
   bottom: 0;
163 172 
   left: 0;
164 173 
   width: 100%;
165 
-  border-bottom: 1px solid #22A7F6;
174 
+  border-bottom: 1px solid #22a7f6;
166 175 
 }
167 
-.date-box{
176 
+.date-box {
168 177 
   font-size: 0;
169 178 
   padding: 10rpx 0;
170 179 
 }
171 
-.date-box>view{
180 
+.date-box > view {
172 181 
   position: relative;
173 182 
   display: inline-block;
174 183 
   width: 14.285%;
 
@@ -178,56 +187,106 @@ export default {
178 187 
   vertical-align: middle;
179 188 
   margin: 15rpx 0;
180 189 
 }
181 
-.date-head1{
190 
+.date-head1 {
191 
+  position: relative;
182 192 
   height: 60rpx;
183 193 
   line-height: 60rpx;
184 194 
   font-size: 26rpx;
185 195 
   border-radius: 12rpx;
196 
+  color: #ccc;
186 197 
 }
187 
-.date-head2{
188 
-  background: #20BA96;
198 
+.date-head2 {
199 
+  background: #20ba96;
189 200 
   color: #fff;
190 201 
   height: 60rpx;
191 202 
   line-height: 60rpx;
192 203 
   font-size: 26rpx;
193 204 
   border-radius: 12rpx;
194 205 
 }
195 
-.date-weight{
206 
+.date-class {
207 
+  color: #000;
208 
+}
209 
+.date-weight {
196 210 
   font-size: 22rpx;
197 211 
   padding: 15rpx 0;
198 212 
 }
199 
-.nowDay .date-weight{
200 
-  color: #22A7F6;
213 
+.nowDay .date-weight {
214 
+  color: #22a7f6;
201 215 
 }
202 216 
 /* 过期样式*/
203 
-.showOverdue{
217 
+.showOverdue {
204 218 
   color: #5fd0e4;
205 219 
 }
206 220 
 /* 正在操作样式*/
207 
-.operationInProgress{
208 
-  background: #20BA96;
209 
-  color: #fff;
221 
+.operationInProgress {
222 
+  // background: #20ba96;
223 
+  // color: #fff;
224 
+  color: #20ba96;
210 225 
 }
211 226 
 /* 正常样式*/
212 
-.normal{
213 
-  background:  #4DB8E4;
214 
-  color: #fff;
227 
+.normal {
228 
+  // background: #4db8e4;
229 
+  // color: #fff;
230 
+  &:after {
231 
+    content: '';
232 
+    position: absolute;
233 
+    bottom: 0;
234 
+    right: 0;
235 
+    width: 0;
236 
+    height: 0;
237 
+    border-color: #4db8e4 transparent;
238 
+    border-width: 0 0 12px 12px;
239 
+    border-style: solid;
240 
+  }
215 241 
 }
216 242 
 /* 异常样式*/
217 
-.abnormal{
218 
-  background:  #FF7361;
219 
-  color: #fff;
243 
+.abnormal {
244 
+  // background: #ff7361;
245 
+  // color: #fff;
246 
+  &:after {
247 
+    content: '';
248 
+    position: absolute;
249 
+    bottom: 0;
250 
+    right: 0;
251 
+    width: 0;
252 
+    height: 0;
253 
+    border-color: #ff7361 transparent;
254 
+    border-width: 0 0 12px 12px;
255 
+    border-style: solid;
256 
+  }
220 257 
 }
221 
-.leave{
222 
-	background:#3390F5;
223 
-	color: #fff;
258 
+.leave {
259 
+  // background: #3390f5;
260 
+  // color: #fff;
261 
+  &:after {
262 
+    content: '';
263 
+    position: absolute;
264 
+    bottom: 0;
265 
+    right: 0;
266 
+    width: 0;
267 
+    height: 0;
268 
+    border-color: #3390f5 transparent;
269 
+    border-width: 0 0 12px 12px;
270 
+    border-style: solid;
271 
+  }
224 272 
 }
225 
-.late{
226 
-	background:#fbbd08;
227 
-	color: #fff;
273 
+.late {
274 
+  // background: #fbbd08;
275 
+  // color: #fff;
276 
+  &:after {
277 
+    content: '';
278 
+    position: absolute;
279 
+    bottom: 0;
280 
+    right: 0;
281 
+    width: 0;
282 
+    height: 0;
283 
+    border-color: #fbbd08 transparent;
284 
+    border-width: 0 0 12px 12px;
285 
+    border-style: solid;
286 
+  }
228 287 
 }
229 
-.absenteeism{
230 
-	background:#e54d42;
231 
-	color: #fff;
288 
+.absenteeism {
289 
+  background: #e54d42;
290 
+  color: #fff;
232 291 
 }
233 292 
 </style>

+ 50 - 10
src/pages/class/gift.vue
Ver arquivo 

@@ -28,21 +28,33 @@
28 28 
         <swiper-item @touchmove.stop>
29 29 
           <view class="btn-check-group padding">
30 30 
             <view class="margin">
31 
-              <input v-model="params.hobbyOther" placeholder="输入兴趣内容  如:画画" class="margin-top input-border" />
31 
+              <input v-model="serachKey" placeholder="输入兴趣内容  如:画画" class="margin-top input-border" @confirm="search" />
32 
+              <view class="flex margin-top-sm">
33 
+                <view v-for="(h, i) in params.hobbyOther" :key="i" class="hobby"
34 
+                  >{{ h }}
35 
+                  <text class="cuIcon-close del-hobby text-red" @tap="delHobby(h)"></text>
36 
+                </view>
37 
+              </view>
32 38 
             </view>
33 
-            <view class="interests">
39 
+            <view class="interests" v-if="interests.length > 0">
34 40 
               <img src="/static/imgs/intelligent-bg.png" mode="widthFix" alt="" />
35 
-              <checkbox-group @change="checkboxChange" id="hobby">
36 
-                <view v-for="(item, index) in interests" :key="item.id" :style="[{ top: index * 80 + 'rpx', left: (index % 2) * 320 + index * 40 + 'rpx' }]" class="interest">
41 
+              <checkbox-group id="hobby">
42 
+                <view
43 
+                  v-for="(item, index) in interests"
44 
+                  :key="index"
45 
+                  :style="[{ top: index * 80 + 'rpx', left: (index % 2) * 320 + index * 40 + 'rpx' }]"
46 
+                  @tap="chooseInterest(item)"
47 
+                  class="interest"
48 
+                >
37 49 
                   <label
38 50 
                     class="btn-check-label margin"
39 51 
                     :style="{
40 
-                      color: params.hobby.includes(item.id + '') ? '#fff' : '#000',
41 
-                      backgroundColor: params.hobby.includes(item.id + '') ? colors[index % 4] : '#f0f0f0'
52 
+                      color: params.hobbyOther.includes(item) ? '#fff' : '#000',
53 
+                      backgroundColor: params.hobbyOther.includes(item) ? colors[index % 4] : '#f0f0f0'
42 54 
                     }"
43 55 
                   >
44 
-                    <checkbox :value="item.id" />
45 
-                    {{ item.name }}
56 
+                    <checkbox :value="item" />
57 
+                    {{ item }}
46 58 
                   </label>
47 59 
                   <text class="cuIcon-title" :style="[{ color: colors[index % 4] }]"></text>
48 60 
                 </view>
 
@@ -151,6 +163,8 @@ export default {
151 163 
         }
152 164 
       ],
153 165 
       cur: 0,
166 
+      serachKey: '', //关键字搜素
167 
+      keys: [], //兴趣选项
154 168 
       days: [], //周期
155 169 
       interests: [], //兴趣
156 170 
       attends: [], //课程
 
@@ -159,7 +173,7 @@ export default {
159 173 
         week: [],
160 174 
         hobby: [],
161 175 
         student_id: '',
162 
-        hobbyOther: ''
176 
+        hobbyOther: []
163 177 
       },
164 178 
       tabCur: 0,
165 179 
       mainCur: 0,
 
@@ -196,13 +210,20 @@ export default {
196 210 
     },
197 211 
     getHobbyConfig() {
198 212 
       _intelligentInterests().then(res => {
199 
-        this.interests = res.data
213 
+        // this.interests = res.data
214 
+        const choose = res.data[5]
215 
+        this.params.hobby = [choose.id]
216 
+        this.keys = choose.names
200 217 
       })
201 218 
     },
219 
+    search() {
220 
+      this.interests = this.keys.filter(item => item.includes(this.serachKey))
221 
+    },
202 222 
     get_options() {
203 223 
       const params = Object.assign({}, this.params)
204 224 
       params.week = params.week.join(',')
205 225 
       params.hobby = params.hobby.join(',')
226 
+      params.hobbyOther = params.hobbyOther.join(',')
206 227 
       _intelligentCourses(params).then(res => {
207 228 
         this.attends = res.data
208 229 
         this.checked = [] //初始化选项
 
@@ -215,6 +236,16 @@ export default {
215 236 
         this.weekList = this.attends.map(item => item.week)
216 237 
       })
217 238 
     },
239 
+    delHobby(key) {
240 
+      this.params.hobbyOther = this.params.hobbyOther.filter(item => item != key)
241 
+    },
242 
+    chooseInterest(key) {
243 
+      if (this.params.hobbyOther.includes(key)) {
244 
+        this.params.hobbyOther = this.params.hobbyOther.filter(item => item != key)
245 
+      } else {
246 
+        this.params.hobbyOther.push(key)
247 
+      }
248 
+    },
218 249 
     checkboxChange(e) {
219 250 
       const type = e.target.id
220 251 
       const values = e.detail.value
 
@@ -327,6 +358,15 @@ export default {
327 358 
     }
328 359 
   }
329 360 
 }
361 
+.hobby {
362 
+  position: relative;
363 
+  margin-left: 20rpx;
364 
+  .del-hobby {
365 
+    position: absolute;
366 
+    top: -6rpx;
367 
+    right: -20rpx;
368 
+  }
369 
+}
330 370 
 .interests {
331 371 
   position: relative;
332 372 
   .interest {

+ 12 - 6
src/pages/mine/courseFiles.vue
Ver arquivo 

@@ -40,12 +40,18 @@ export default {
40 40 
       })
41 41 
     },
42 42 
     goto(page, file) {
43 
-      const ability = this.ability.filter(item => {
44 
-        if (file.ability_total[item.id]) {
45 
-          this.$set(item, 'score', file.ability_total[item.id])
46 
-          return true
47 
-        }
48 
-      })
43 
+      let ability = file.ability
44 
+        .split(',')
45 
+        .filter(s => s)
46 
+        .map(item => {
47 
+          const ab = this.ability.find(e => Number(e.id) === Number(item))
48 
+          const score = file.ability_total[item] || 0
49 
+          return {
50 
+            id: item,
51 
+            name: ab.name,
52 
+            score: score
53 
+          }
54 
+        })
49 55 
       this.$set(file, 'ability', ability)
50 56 
       this.globalNavigateTo(page, { file: JSON.stringify(file) })
51 57 
     }

+ 28 - 16
src/pages/studentcenter/classVideo.vue
Ver arquivo 

@@ -1,12 +1,11 @@
1 1 
 <template>
2 2 
   <view class="page">
3 3 
     <cu-custom :isBack="true" title="课堂视频"></cu-custom>
4 
-    <scroll-view scroll-y="true" :style="[{height:'calc(100vh - '+ topHeader+'px)'}]">
4 
+    <scroll-view scroll-y="true" :style="[{ height: 'calc(100vh - ' + topHeader + 'px)' }]">
5 5 
       <view class="content">
6 6 
         <view class="course-img">
7 
-          <swiper class="swiper" :indicator-dots="swiper.indicatorDots" :autoplay="swiper.autoplay"
8 
-            :interval="swiper.interval" :duration="swiper.duration">
9 
-            <swiper-item v-for="(item,index) in detail.course_data.image" :key="index">
7 
+          <swiper class="swiper" :indicator-dots="swiper.indicatorDots" :autoplay="swiper.autoplay" :interval="swiper.interval" :duration="swiper.duration">
8 
+            <swiper-item v-for="(item, index) in detail.course_data.image" :key="index">
10 9 
               <view class="swiper-item">
11 10 
                 <image :src="item" mode="widthFix"></image>
12 11 
               </view>
 
@@ -14,16 +13,14 @@
14 13 
           </swiper>
15 14 
         </view>
16 15 
         <view>
17 
-          <view class="title flex align-center">
18 
-            <text class="iconfont" style="font-size:24px;">&#xe76d;</text>课堂视频
19 
-          </view>
20 
-          <view class="list" v-if='detail.moments_data'>
21 
-            <view class="cu-card case" v-for="(video,index) in detail.moments_data.data" :key="index">
16 
+          <view class="title flex align-center"> <text class="iconfont" style="font-size: 24px;">&#xe76d;</text>课堂视频 </view>
17 
+          <view class="list" v-if="detail.moments_data">
18 
+            <view class="cu-card case" v-for="(video, index) in detail.moments_data.data" :key="index">
22 19 
               <view class="cu-item shadow">
23 20 
                 <view class="image">
24 
-                  <image :src="video.images" v-if="checkTypes(video.images,'imgs')" style="width:100%;"></image>
25 
-                  <video :src="video.images" v-if="checkTypes(video.images,'video')" style="width:100%;"></video>
26 
-                  <view class="padding-xs">{{video.content}}</view>
21 
+                  <image :src="video.images" v-if="checkTypes(video.images, 'imgs')" style="width: 100%;"></image>
22 
+                  <video :src="video.images" v-if="checkTypes(video.images, 'video')" style="width: 100%;"></video>
23 
+                  <view class="padding-xs">{{ video.content }}</view>
27 24 
                 </view>
28 25 
               </view>
29 26 
             </view>
 
@@ -37,7 +34,7 @@
37 34 
 <script>
38 35 
 import { checkTypes } from '@/common/utils/index'
39 36 
 export default {
40 
-  data () {
37 
+  data() {
41 38 
     return {
42 39 
       topHeader: this.globalCustomBarHeight,
43 40 
       detail: {},
 
@@ -49,12 +46,27 @@ export default {
49 46 
       }
50 47 
     }
51 48 
   },
52 
-  onLoad () {
53 
-    this.init()
49 
+  // 配置分享
50 
+  onShareAppMessage(res) {
51 
+    if (res.from === 'button') {
52 
+      // 来自页面内分享按钮
53 
+      console.log(res.target)
54 
+    }
55 
+    return {
56 
+      title: '课程视频',
57 
+      path: `/pages/studentcenter/classVideo?detail=${JSON.stringify(this.detail)}`
58 
+    }
59 
+  },
60 
+  onLoad(options) {
61 
+    if (options.detail) {
62 
+      this.detail = JSON.parse(options.detail)
63 
+    } else {
64 
+      this.init()
65 
+    }
54 66 
   },
55 67 
   methods: {
56 68 
     checkTypes,
57 
-    init () {
69 
+    init() {
58 70 
       this.detail = JSON.parse(uni.getStorageSync('daily_class'))
59 71 
     }
60 72 
   }

+ 92 - 87
src/pages/studentcenter/index.vue
Ver arquivo 

@@ -1,98 +1,85 @@
1 1 
 <template>
2 2 
   <view class="page">
3 3 
     <cu-custom :isBack="false"></cu-custom>
4 
-    <view class="header" :style="[{top:topHeader + 'px'}]">
4 
+    <view class="header" :style="[{ top: topHeader + 'px' }]">
5 5 
       <view class="header-title header-switch">
6 
-        <view class="header-title-main" @tap="changeTab('schedule')" :class="{'cur':type==='schedule'}">
6 
+        <view class="header-title-main" @tap="changeTab('schedule')" :class="{ cur: type === 'schedule' }">
7 7 
           <view class="margin-bottom-xs">日程表</view>
8 8 
           <view class="point"></view>
9 9 
         </view>
10 
-        <view class="header-title-main margin-left-lg" @tap="changeTab('mine')" :class="{'cur':type==='mine'}">
10 
+        <view class="header-title-main margin-left-lg" @tap="changeTab('mine')" :class="{ cur: type === 'mine' }">
11 11 
           <view class="margin-bottom-xs">我的</view>
12 12 
           <view class="point"></view>
13 13 
         </view>
14 14 
       </view>
15 
-      <view style="width:120px;" v-if="type==='mine'">
15 
+      <view style="width: 120px;" v-if="type === 'mine'">
16 16 
         <swiper-tab :menuList="menuList" @changeTab="swipe" :activeTab="currentIndex"></swiper-tab>
17 17 
       </view>
18 18 
     </view>
19 19 
     <!-- 日程表 -->
20 
-    <view v-if="type==='schedule'">
21 
-      <scroll-view scroll-y="true" :style="[{marginTop:'56px',height:'calc(100vh - 114px - '+ topHeader+'px)'}]">
20 
+    <view v-if="type === 'schedule'">
21 
+      <scroll-view scroll-y="true" :style="[{ marginTop: '56px', height: 'calc(100vh - 114px - ' + topHeader + 'px)' }]">
22 22 
         <view class="calendar padding-tb solid-bottom bg-white">
23 23 
           <view class="calendar-header flex justify-between padding-lr-sm">
24 24 
             <view>
25 
-              <picker mode="date" :value="info.chooseDate" :fields="info.fields" @change="bindDateChange"
26 
-                :start="info.start" :end="info.end">
25 
+              <picker mode="date" :value="info.chooseDate" :fields="info.fields" @change="bindDateChange" :start="info.start" :end="info.end">
27 26 
                 <view class="picker text-student text-xl">
28 
-                  {{info.chooseDate}}
27 
+                  {{ info.chooseDate }}
29 28 
                   <text class="cuIcon-right lg"></text>
30 29 
                 </view>
31 30 
               </picker>
32 31 
             </view>
33 
-            <view>
34 
-              共{{present.attendance_data.length}}天
35 
-            </view>
32 
+            <view> 共{{ present.attendance_data.length }}天 </view>
36 33 
           </view>
37 34 
           <view class="calendar-main">
38 
-            <calendar :year="year" :month="month" :showBusiness="true" @changeDate="chooseDay" ref="calendar">
39 
-            </calendar>
35 
+            <calendar :year="year" :month="month" :showBusiness="true" @changeDate="chooseDay" ref="calendar"> </calendar>
40 36 
           </view>
41 37 
           <view class="calendar-marks flex justify-end padding-lr-sm">
42 
-            <view class="margin-left-sm">
43 
-              <view class="cu-tag bg-blue margin-right-sm"></view><text class="text-sm">请假</text>
44 
-            </view>
45 
-            <view class="margin-left-sm">
46 
-              <view class="cu-tag bg-yellow margin-right-sm"></view><text class="text-sm">迟到</text>
47 
-            </view>
48 
-            <view class="margin-left-sm">
49 
-              <view class="cu-tag bg-normal margin-right-sm"></view><text class="text-sm">正常</text>
50 
-            </view>
51 
-            <view class="margin-left-sm">
52 
-              <view class="cu-tag bg-red margin-right-sm"></view><text class="text-sm">旷课</text>
53 
-            </view>
38 
+            <view class="margin-left-sm"> <view class="cu-tag bg-blue margin-right-sm"></view><text class="text-sm">请假</text> </view>
39 
+            <view class="margin-left-sm"> <view class="cu-tag bg-yellow margin-right-sm"></view><text class="text-sm">迟到</text> </view>
40 
+            <view class="margin-left-sm"> <view class="cu-tag bg-normal margin-right-sm"></view><text class="text-sm">正常</text> </view>
41 
+            <view class="margin-left-sm"> <view class="cu-tag bg-red margin-right-sm"></view><text class="text-sm">旷课</text> </view>
54 42 
           </view>
55 43 
         </view>
56 44 
         <view class="cu-card margin-top-xs padding-xs">
57 45 
           <view class="cu-item day-info">
58 46 
             <view class="day-title flex justify-between solid-bottom padding text-lg">
59 
-              <view>应到上课节数：{{present.be_section_num}}节</view>
60 
-              <view>实际上课节数: {{present.actual_section_num}}节</view>
47 
+              <view>应到上课节数：{{ present.be_section_num }}节</view>
48 
+              <view>实际上课节数: {{ present.actual_section_num }}节</view>
61 49 
             </view>
62 50 
             <view class="day-chart flex justify-between padding">
63 
-              <view v-for="(chart,key) in attendance" :key="key" class="flex-sub">
64 
-                <canvas :canvas-id="key" style="margin:0 auto;width:100%;height:80px;"></canvas>
65 
-                <view style="margin-left:18px;">{{chart.title}}</view>
51 
+              <view v-for="(chart, key) in attendance" :key="key" class="flex-sub">
52 
+                <canvas :canvas-id="key" style="margin: 0 auto; width: 100%; height: 80px;"></canvas>
53 
+                <view style="margin-left: 18px;">{{ chart.title }}</view>
66 54 
               </view>
67 55 
             </view>
68 56 
           </view>
69 57 
         </view>
70 58 
         <view class="list margin-top-xs">
71 
-          <view class="cu-card margin-top margin-bottom shadow" v-for="(item,index) in classList" :key="index">
72 
-            <view class="cu-item" v-for="(mark,i) in item.mark" :key="i">
59 
+          <view class="cu-card margin-top margin-bottom shadow" v-for="(item, index) in classList" :key="index">
60 
+            <view class="cu-item" v-for="(mark, i) in item.mark" :key="i">
73 61 
               <view class="card-header flex justify-end solid-bottom">
74 62 
                 <view class="text-student course-status">
75 
-                  {{mark.status_desc}}
63 
+                  {{ mark.status_desc }}
76 64 
                 </view>
77 65 
               </view>
78 66 
               <view class="card flex">
79 67 
                 <view class="card-left">
80 
-                  <img mode="scaleToFill" :src="mark.avatar" alt="" class="card-image">
68 
+                  <img mode="scaleToFill" :src="mark.avatar" alt="" class="card-image" />
81 69 
                 </view>
82 70 
                 <view class="card-right margin-left-sm">
83 
-                  <view class="card-title">{{mark.course_name}}</view>
71 
+                  <view class="card-title">{{ mark.course_name }}</view>
84 72 
                   <view class="card-item margin-top-xs">
85 
-                    <text class="card-text">{{mark.start_at}}</text>
73 
+                    <text class="card-text">{{ mark.start_at }}</text>
86 74 
                   </view>
87 75 
                   <view class="card-item margin-top-xs">
88 
-                    <text class="card-text">{{mark.end_at}}</text>
76 
+                    <text class="card-text">{{ mark.end_at }}</text>
89 77 
                   </view>
90 78 
                   <view class="card-item margin-top-xs">
91 79 
                     <button class="cu-btn round line-cyan button-hover" @tap="classOperation(mark.class_plan_id)">
92 
-                      {{mark.status==-1?'查看':'去上课'}}
80 
+                      {{ mark.status == -1 ? '查看' : '去上课' }}
93 81 
                     </button>
94 
-                    <button class="cu-btn round line-red button-hover margin-left" @tap="askLeave(mark.class_plan_id)"
95 
-                      v-if="mark.status!==-1">去请假</button>
82 
+                    <button class="cu-btn round line-red button-hover margin-left" @tap="askLeave(mark.class_plan_id)" v-if="mark.status !== -1">去请假</button>
96 83 
                   </view>
97 84 
                 </view>
98 85 
               </view>
 
@@ -102,34 +89,33 @@
102 89 
       </scroll-view>
103 90 
     </view>
104 91 
     <!-- 我的 -->
105 
-    <view v-if="type==='mine'">
106 
-      <scroll-view scroll-y="true" @scrolltolower="loadMore" class="scroll-main"
107 
-        :style="[{height:'calc(100vh - 114px - '+ topHeader+'px)'}]">
92 
+    <view v-if="type === 'mine'">
93 
+      <scroll-view scroll-y="true" @scrolltolower="loadMore" class="scroll-main" :style="[{ height: 'calc(100vh - 114px - ' + topHeader + 'px)' }]">
108 94 
         <view class="list">
109 
-          <view class="cu-card margin-top margin-bottom shadow" v-for="(item,index) in list" :key="index">
95 
+          <view class="cu-card margin-top margin-bottom shadow" v-for="(item, index) in list" :key="index">
110 96 
             <view class="cu-item">
111 97 
               <view class="card-header flex justify-between solid-bottom">
112 
-                <view v-if="item.day">{{item.day}}</view>
98 
+                <view v-if="item.day">{{ item.day }}</view>
113 99 
                 <view class="text-student course-status" v-if="item.status">
114 
-                  {{item.status}}
100 
+                  {{ item.status }}
115 101 
                 </view>
116 
-                <view class="text-student course-status" v-if="currentIndex===1">
102 
+                <view class="text-student course-status" v-if="currentIndex === 1">
117 103 
                   已完结
118 104 
                 </view>
119 105 
               </view>
120 106 
               <view class="card flex">
121 107 
                 <view class="card-left">
122 
-                  <img mode="scaleToFill" :src="item.image" alt="" class="card-image">
108 
+                  <img mode="scaleToFill" :src="item.image" alt="" class="card-image" />
123 109 
                 </view>
124 110 
                 <view class="card-right margin-left-sm">
125 
-                  <view class="card-title">{{item.attend_name}}</view>
111 
+                  <view class="card-title">{{ item.attend_name }}</view>
126 112 
                   <view class="card-item margin-top-xs">
127 113 
                     <text class="card-label">机构：</text>
128 
-                    <text class="card-text">{{item.agency_name||'-'}}</text>
114 
+                    <text class="card-text">{{ item.agency_name || '-' }}</text>
129 115 
                   </view>
130 116 
                   <view class="card-item margin-top-xs">
131 117 
                     <text class="card-label">老师：</text>
132 
-                    <text class="card-text">{{item.teacher||'-'}}</text>
118 
+                    <text class="card-text">{{ item.teacher || '-' }}</text>
133 119 
                   </view>
134 120 
                 </view>
135 121 
               </view>
 
@@ -150,9 +136,10 @@ import { getDate, deepClone } from '@/common/utils'
150 136 
 import swiperTab from '@/components/swiper-tab.vue'
151 137 
 export default {
152 138 
   components: {
153 
-    swiperTab, calendar
139 
+    swiperTab,
140 
+    calendar
154 141 
   },
155 
-  data () {
142 
+  data() {
156 143 
     return {
157 144 
       topHeader: this.globalCustomBarHeight,
158 145 
       type: 'schedule',
 
@@ -163,7 +150,8 @@ export default {
163 150 
       list: [],
164 151 
       classList: [], // 日程表当天
165 152 
       courses: [], // 日程表全部
166 
-      info: { // 日历数据
153 
+      info: {
154 
+        // 日历数据
167 155 
         chooseDate: '', // 选中日期
168 156 
         year: '',
169 157 
         month: '',
 
@@ -181,57 +169,68 @@ export default {
181 169 
         leave_num: 0,
182 170 
         normal_num: 0
183 171 
       }, // 实际出席情况
184 
-      attendance: { // 出席统计数据
172 
+      attendance: {
173 
+        // 出席统计数据
185 174 
         leave_num: {
186 
-          title: '请假', times: 2, color: '#3390F5'
175 
+          title: '请假',
176 
+          times: 2,
177 
+          color: '#3390F5'
187 178 
         },
188 179 
         late_num: {
189 
-          title: '迟到', times: 1, color: '#fbbd08'
180 
+          title: '迟到',
181 
+          times: 1,
182 
+          color: '#fbbd08'
190 183 
         },
191 184 
         normal_num: {
192 
-          title: '正常', times: 3, color: '#4DB8E4'
185 
+          title: '正常',
186 
+          times: 3,
187 
+          color: '#4DB8E4'
193 188 
         },
194 189 
         absenteeism_num: {
195 
-          title: '旷课', times: 0, color: '#e54d42'
190 
+          title: '旷课',
191 
+          times: 0,
192 
+          color: '#e54d42'
196 193 
         }
197 194 
       }
198 195 
     }
199 196 
   },
200 
-  onShow () {
197 
+  onShow() {
201 198 
     const today = getDate(new Date(), 0)
202 199 
     this.info.year = this.info.year || today.year
203 200 
     this.info.month = this.info.month || today.month
204 201 
     this.info.day = this.info.day || today.date
205 202 
     this.info.chooseDate = this.info.chooseDate || today.fullMonth
206 
-    this.info.start = (this.info.year - 1) + '-' + '01-01'
203 
+    this.info.start = this.info.year - 1 + '-' + '01-01'
207 204 
     this.info.end = this.info.year + '-' + (Number(this.info.month) + 1) + '-' + this.info.day
208 205 
     this.init()
209 206 
   },
210 207 
   methods: {
211 
-    init () {
208 
+    init() {
212 209 
       if (this.type === 'mine') {
213 210 
         this.get_list()
214 211 
       } else {
215 212 
         this.getSehedule()
216 213 
       }
217 214 
     },
218 
-    getSehedule () {
215 
+    getSehedule() {
219 216 
       this.setCalendar()
220 217 
       this.get_attend().then(res => {
221 218 
         this.present = res.data
222 
-        this.fix_attend(res.data)// 出席统计
223 
-        this.setAttendance(res.data.attendance_data)// 日历显示出席日期
219 
+        this.fix_attend(res.data) // 出席统计
220 
+        this.setAttendance(res.data.attendance_data) // 日历显示出席日期
224 221 
         this.drawChart()
225 
-        this.get_dateCourse()// 获取日期课程列表
222 
+        this.get_dateCourse() // 获取日期课程列表
226 223 
       })
227 224 
     },
228 
-    classOperation (id) { // 上课
225 
+    classOperation(id) {
226 
+      // 上课
229 227 
       this.globalNavigateTo('studentOperation', { id })
230 228 
     },
231 
-    askLeave (id) { // 请假
229 
+    askLeave(id) {
230 
+      // 请假
232 231 
       this.globalNavigateTo('studentAbsent', { id })
233 232 
     },
234 
-    loadMore () {
233 
+    loadMore() {
235 234 
       if (this.noMore) {
236 235 
         uni.showToast({ title: '没有更多了', icon: 'none' })
237 236 
         return false
 
@@ -239,18 +238,18 @@ export default {
239 238 
       this.page_num++
240 239 
       this.get_list()
241 240 
     },
242 
-    get_list () {
241 
+    get_list() {
243 242 
       if (this.currentIndex === 0) {
244 243 
         this.get_course()
245 244 
       } else {
246 245 
         this.get_history()
247 246 
       }
248 247 
     },
249 
-    chooseDay (day) {
250 
-      this.classList = this.courses.filter(item => item.date.replace(/-/g, '') === day)// 匹配当天数据
248 
+    chooseDay(day) {
249 
+      this.classList = this.courses.filter(item => item.date.replace(/-/g, '') === day) // 匹配当天数据
251 250 
       this.classList = this.classList.length > 0 ? this.classList : deepClone(this.courses)
252 251 
     },
253 
-    get_course () {
252 
+    get_course() {
254 253 
       _nowCourse({ page_num: this.page_num }).then(res => {
255 254 
         if (this.page_num > 1) {
256 255 
           if (res.data.length < this.page_size) this.noMore = true
 
@@ -261,7 +260,7 @@ export default {
261 260 
         }
262 261 
       })
263 262 
     },
264 
-    get_history () {
263 
+    get_history() {
265 264 
       _courseHistory({ page_num: this.page_num }).then(res => {
266 265 
         if (this.page_num > 1) {
267 266 
           if (res.data.length < this.page_size) this.noMore = true
 
@@ -272,23 +271,23 @@ export default {
272 271 
         }
273 272 
       })
274 273 
     },
275 
-    drawChart () {
274 
+    drawChart() {
276 275 
       for (var key in this.attendance) {
277 276 
         this.draw(this.attendance[key], key)
278 277 
       }
279 278 
     },
280 
-    changeTab (type) {
279 
+    changeTab(type) {
281 280 
       this.type = type
282 281 
       this.$nextTick(() => {
283 282 
         this.init()
284 283 
       })
285 284 
     },
286 
-    swipe (index) {
285 
+    swipe(index) {
287 286 
       this.currentIndex = index
288 287 
       this.page_num = 1
289 288 
       this.get_list()
290 289 
     },
291 
-    bindDateChange (e) {
290 
+    bindDateChange(e) {
292 291 
       const value = e.detail.value
293 292 
       const [year, month] = value.split('-')
294 293 
       this.info.year = year
 
@@ -296,36 +295,42 @@ export default {
296 295 
       this.info.chooseDate = value
297 296 
       this.getSehedule()
298 297 
     },
299 
-    setCalendar () {
298 
+    setCalendar() {
300 299 
       this.$refs.calendar.selCalendar(this.info.year, this.info.month)
301 300 
     },
302 
-    setAttendance (attendance) { // 补充出席情况
301 
+    setAttendance(attendance) {
302 
+      // 补充出席情况
303 303 
       if (!attendance) return
304 304 
       this.$refs.calendar.setAttendance(attendance)
305 305 
     },
306 
-    get_attend () { // 获取出席情况
306 
+    get_attend() {
307 
+      // 获取出席情况
307 308 
       const date = this.info.year + '-' + this.info.month
308 309 
       return new Promise((resolve, reject) => {
309 310 
         const info = _attendance({ date })
310 311 
         resolve(info)
311 312 
       })
312 313 
     },
313 
-    fix_attend (info) { // 补充出席实际数据
314 
+    fix_attend(info) {
315 
+      // 补充出席实际数据
314 316 
       Object.keys(this.attendance).forEach(key => {
315 317 
         this.attendance[key].times = info[key]
316 318 
       })
317 319 
     },
318 
-    get_dateCourse () { // 获取对应日期数据
320 
+    get_dateCourse() {
321 
+      // 获取对应日期数据
319 322 
       _dateCourse({ year: this.info.year, month: this.info.month }).then(res => {
320 323 
         this.classList = res.data
321 324 
         this.courses = res.data
325 
+        const days = this.courses.map(item => parseInt(item.day))
326 
+        this.$refs.calendar.setClass(days)
322 327 
       })
323 328 
     },
324 
-    draw (ele, key) {
329 
+    draw(ele, key) {
325 330 
       const ctx = uni.createCanvasContext(key)
326 
-      const value = NP.divide(ele.times, this.present.be_section_num) * 100// 次数转化对应百分比值
331 
+      const value = NP.divide(ele.times, this.present.be_section_num) * 100 // 次数转化对应百分比值
327 332 
       const startAngle = 1.5
328 
-      const endAngle = 1.5 + value * 2 / 100
333 
+      const endAngle = 1.5 + (value * 2) / 100
329 334 
       // 画圆环
330 335 
       ctx.beginPath()
331 336 
       ctx.arc(34, 40, 28, 0, 2 * Math.PI)