src/api/course.js

@@ -112,10 +112,14 @@ export function _commentDetail (params) {
 export function _leaveType (params) {
 	return fetch('/teacher/leave/get_leave_type', params)
 }
-// 申请请假 parents/schedule/student_leave
+// 申请请假
 export function _askLeave (params) {
 	return fetch('/parents/schedule/student_leave', params)
 }
+//获取学生课程档案
+export function _getStudentFiles (params) {
+	return fetch('/parents/courseFiles/get_list', params)
+}
 //获取年级
 export function _getGrades () {
 	return fetch('/parents/init/get_grades')

src/common/commonMethods.js

@@ -2,55 +2,56 @@
 import urlMap from '@/common/urlMap'
 
 const encodeParam = function (params) {
-  let url = ''
-  for (const k in params) {
-    const value = params[k] !== undefined ? params[k] : ''
-    url += '&' + k + '=' + encodeURIComponent(value)
-  }
-  return url ? url.substring(1) : ''
+	let url = ''
+	for (const k in params) {
+		const value = params[k] !== undefined ? params[k] : ''
+		url += '&' + k + '=' + encodeURIComponent(value)
+	}
+	return url ? url.substring(1) : ''
 }
 
 const routerToFail = function (err) {
-  console.log(err, '跳转新页面失败')
+	console.log(err, '跳转新页面失败')
 }
 
 const commonMethods = {
-  /**
-   * 保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面
-   * 页面跳转路径有层级限制，不能无限制跳转新页面
-   * @param {*} type 路径唯一类型
-   * @param {*} params 路径参数
-   * @returns {*} null
-   */
-  globalNavigateTo: function (type, params) {
-    if (urlMap.has(type)) {
-      let url = urlMap.get(type)
-      if (params) {
-        url += (url.indexOf('?') < 0 && params ? '?' : '&') + encodeParam(params)
-      }
-      uni.navigateTo({ url, fail: routerToFail })
-    }
-  },
-  // 关闭当前页面，跳转到应用内的某个页面
-  globalRedirectTo: function (type, params) {
-    if (urlMap.has(type)) {
-      let url = urlMap.get(type)
-      if (params) {
-        url += (url.indexOf('?') < 0 && params ? '?' : '&') + encodeParam(params)
-      }
-      uni.redirectTo({ url, fail: routerToFail })
-    }
-  },
-  // 关闭所有页面，打开应用内的某个页面
-  globalReLaunch: function (type, params) {
-    if (urlMap.has(type)) {
-      let url = urlMap.get(type)
-      if (params) {
-        url += (url.indexOf('?') < 0 && params ? '?' : '&') + encodeParam(params)
-      }
-      uni.reLaunch({ url, fail: routerToFail })
-    }
-  }
+	encodeParam,
+	/**
+	 * 保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面
+	 * 页面跳转路径有层级限制，不能无限制跳转新页面
+	 * @param {*} type 路径唯一类型
+	 * @param {*} params 路径参数
+	 * @returns {*} null
+	 */
+	globalNavigateTo: function (type, params) {
+		if (urlMap.has(type)) {
+			let url = urlMap.get(type)
+			if (params) {
+				url += (url.indexOf('?') < 0 && params ? '?' : '&') + encodeParam(params)
+			}
+			uni.navigateTo({ url, fail: routerToFail })
+		}
+	},
+	// 关闭当前页面，跳转到应用内的某个页面
+	globalRedirectTo: function (type, params) {
+		if (urlMap.has(type)) {
+			let url = urlMap.get(type)
+			if (params) {
+				url += (url.indexOf('?') < 0 && params ? '?' : '&') + encodeParam(params)
+			}
+			uni.redirectTo({ url, fail: routerToFail })
+		}
+	},
+	// 关闭所有页面，打开应用内的某个页面
+	globalReLaunch: function (type, params) {
+		if (urlMap.has(type)) {
+			let url = urlMap.get(type)
+			if (params) {
+				url += (url.indexOf('?') < 0 && params ? '?' : '&') + encodeParam(params)
+			}
+			uni.reLaunch({ url, fail: routerToFail })
+		}
+	}
 }
 
 export default commonMethods

src/common/css/common.css

@@ -122,6 +122,13 @@ input{
 .bg-student{
 	background-color:#5fd0e4;
 }
+.bg-teacher{
+	background-color:#37CAA0;
+}
+.bg-light-green{
+	color:#fff;
+	background-color:#09e294;
+}
 .bg-normal{
 	background-color: #4DB8E4;
 }
@@ -172,6 +179,10 @@ input{
 	width:128rpx;
 	height:128rpx;
 }
+.avatar.xl{
+	width:180rpx;
+	height:180rpx;
+}
 .avatar.md{
 	width:96rpx;
 	height:96rpx;

src/common/urlMap.js

@@ -25,5 +25,7 @@ urlMap.set('classCart', '/pages/class/shoppingCart')
 urlMap.set('bindPhone', '/pages/class/bindPhone')
 urlMap.set('order', '/pages/order/index')
 urlMap.set('agreement', '/pages/agreement/index')
+urlMap.set('courseFiles', '/pages/mine/courseFiles')
+urlMap.set('fileDetail', '/pages/mine/fileDetail')
 
 export default urlMap

src/components/star-rating.vue

@@ -0,0 +1,105 @@
+<template>
+  <view class="star-rating">
+    <view class="star-rating-box" @touchstart="fun" @touchmove.stop.prevent="fun">
+      <image v-for="(item, i) in max" :key="i" class="icon-start" :src="(i + 1) | getSrc(score)" mode=""></image>
+    </view>
+    <text class="star-rating-title">{{ title }}</text>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'star-rating',
+  data() {
+    return {
+      iconStartSrcList: [
+        '/static/imgs/star-rating/delivery_icon_star_empty.png',
+        '/static/imgs/star-rating/delivery_icon_star_disable.png',
+        '/static/imgs/star-rating/delivery_icon_star_active.png'
+      ],
+      title: '',
+      width: 0
+    }
+  },
+  props: {
+    max: {
+      type: Number,
+      default: 5
+    },
+    name: {
+      type: String,
+      default: ''
+    },
+    score: {
+      type: Number,
+      default: 0
+    }
+  },
+  methods: {
+    fun(e) {
+      let score = Math.ceil(((e.changedTouches[0].pageX - e.currentTarget.offsetLeft) / this.width) * 5)
+      if (score >= 5) score = 5
+      if (score <= 0) score = 0
+      this.$emit('changeScore', {
+        name: this.name,
+        score
+      })
+    },
+    getDescBox() {
+      uni
+        .createSelectorQuery()
+        .in(this)
+        .select('.star-rating-box')
+        .boundingClientRect(result => {
+          if (result) {
+            this.width = result.width
+          } else {
+            this.getDescBox()
+          }
+        })
+        .exec()
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.getDescBox()
+    })
+  },
+  filters: {
+    getSrc: function (i, score) {
+      if (score == 0) return '/static/imgs/star-rating/delivery_icon_star_empty.png'
+      if (score < i) return '/static/imgs/star-rating/delivery_icon_star_disable.png'
+      if (score >= i) return '/static/imgs/star-rating/delivery_icon_star_active.png'
+    }
+  },
+  watch: {
+    score(val) {
+      if (val == 0) this.title = ''
+      if (val == 1) this.title = '非常差'
+      if (val == 2) this.title = '差'
+      if (val == 3) this.title = '一般'
+      if (val == 4) this.title = '满意'
+      if (val == 5) this.title = '非常满意'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.star-rating {
+  display: flex;
+  align-items: center;
+
+  .icon-start {
+    width: 30rpx;
+    height: 30rpx;
+    margin: 0 6rpx;
+  }
+
+  .star-rating-title {
+    padding-left: 30rpx;
+    color: #999;
+    font-size: 24rpx;
+  }
+}
+</style>

src/pages.json

@@ -95,11 +95,19 @@
     {
       "path": "pages/agreement/index",
       "style": {}
+    },
+    {
+      "path": "pages/mine/courseFiles",
+      "style": {}
+    },
+    {
+      "path": "pages/mine/fileDetail",
+      "style": {}
     }
   ],
   "globalStyle": {
     "navigationBarBackgroundColor": "#FFFFFF",
-    "navigationBarTitleText": "1212",
+    "navigationBarTitleText": "课后百科",
     "navigationStyle": "custom",
     "navigationBarTextStyle": "black",
     "animationType": "slide-out-right"

src/pages/class/detail.vue

@@ -1,22 +1,20 @@
 <template>
   <view class="page">
     <cu-custom :isBack="true"></cu-custom>
-    <view class="header" :style="[{top:topHeader + 'px'}]">
+    <view class="header" :style="[{ top: topHeader + 'px' }]">
       <view class="header-title">
         <view class="header-title-main">
-          <view class="margin-bottom-xs">{{tabList[cate_type].title}}</view>
+          <view class="margin-bottom-xs">{{ tabList[cate_type].title }}</view>
           <view class="point"></view>
         </view>
       </view>
       <swiper-tab :menuList="tabList[cate_type].list" @changeTab="changeTab"></swiper-tab>
     </view>
-    <scroll-view v-if="currentIndex===0" :scroll-y="true" :style="[{height:'calc(100vh - 70px - '+ topHeader+'px)'}]"
-      class="scroll-main">
+    <scroll-view v-if="currentIndex === 0" :scroll-y="true" :style="[{ height: 'calc(100vh - 70px - ' + topHeader + 'px)' }]" class="scroll-main">
       <view class="content">
         <view class="course-img">
-          <swiper class="swiper" :indicator-dots="swiper.indicatorDots" :autoplay="swiper.autoplay"
-            :interval="swiper.interval" :duration="swiper.duration">
-            <swiper-item v-for="(item,index) in detail.image" :key="index">
+          <swiper class="swiper" :indicator-dots="swiper.indicatorDots" :autoplay="swiper.autoplay" :interval="swiper.interval" :duration="swiper.duration">
+            <swiper-item v-for="(item, index) in detail.image" :key="index">
               <view class="swiper-item">
                 <image :src="item" mode="widthFix"></image>
               </view>
@@ -25,66 +23,67 @@
         </view>
         <!-- 详情 -->
         <view class="detail">
-          <view class="detail-title">{{detail.name}}</view>
+          <view class="detail-title">{{ detail.name }}</view>
           <view class="detail-item">
             <view class="detail-item-point"></view>
             <view class="detail-label">周期</view>
-            <view class="detail-text">{{detail.period}}<text class="text-gray">({{detail.time[0]}})</text></view>
+            <view class="detail-text"
+              >{{ detail.period }}<text class="text-gray">({{ detail.time[0] }})</text></view
+            >
           </view>
           <view class="detail-item">
             <view class="detail-item-point"></view>
             <view class="detail-label">适用年级</view>
-            <view class="detail-text">{{detail.grade}}年级通用</view>
+            <view class="detail-text">{{ detail.grade }}年级通用</view>
           </view>
           <view class="detail-item">
             <view class="detail-item-point"></view>
             <view class="detail-label">课时</view>
-            <view class="detail-text">{{detail.class_total}}课时</view>
+            <view class="detail-text">{{ detail.class_total }}课时</view>
           </view>
           <view class="detail-item">
             <view class="detail-item-point"></view>
             <view class="detail-label">单课时价</view>
-            <view class="detail-text">￥{{detail.single_money}}</view>
+            <view class="detail-text">￥{{ detail.single_money }}</view>
           </view>
           <view class="detail-item">
             <view class="detail-item-point"></view>
             <view class="detail-label">补贴</view>
-            <view class="detail-text">￥{{detail.subsidy}}/节课</view>
+            <view class="detail-text">￥{{ detail.subsidy }}/节课</view>
           </view>
           <view class="detail-item">
             <view class="detail-item-point"></view>
             <view class="detail-label">培养目标</view>
-            <view class="detail-text">{{detail.tenet}}</view>
+            <view class="detail-text">{{ detail.tenet }}</view>
           </view>
         </view>
       </view>
       <!-- 老师介绍 -->
-      <view class="teacher flex margin-top-sm shadow" v-if="cate_type===0">
+      <view class="teacher flex margin-top-sm shadow" v-if="cate_type === 0">
         <image mode="scaleToFill" :src="defaultTeacher" class="avatar lg"></image>
         <view class="flex-sub margin-left">
-          <view class="teacher-title">{{detail.teachers.username||''}}老师授课</view>
-          <view class="teacher-item">毕业于{{detail.teachers.agency_name||''}}</view>
-          <view class="teacher-item">所属机构：{{detail.teachers.orz||''}}</view>
+          <view class="teacher-title">{{ detail.teachers.username || '' }}老师授课</view>
+          <view class="teacher-item">毕业于{{ detail.teachers.agency_name || '' }}</view>
+          <view class="teacher-item">所属机构：{{ detail.teachers.orz || '' }}</view>
           <view class="teacher-exp flex">
-            <view class="exp-item">{{detail.teachers.honor||''}}</view>
-            <view class="exp-item">{{detail.teachers.introduce||''}}</view>
+            <view class="exp-item">{{ detail.teachers.honor || '' }}</view>
+            <view class="exp-item">{{ detail.teachers.introduce || '' }}</view>
           </view>
         </view>
       </view>
       <!-- 道具选择 -->
-      <view class="shop margin-top-sm shadow" v-if="detail.prop&&detail.prop.length>0">
+      <view class="shop margin-top-sm shadow" v-if="detail.prop && detail.prop.length > 0">
         <view class="shop-title">请选择课程所需要的道具</view>
         <radio-group @change="radioChange" class="margin-top-xs">
           <label v-for="radio in radios" :key="radio.value" class="tool-choose margin-right-sm">
-            <radio :value="radio.value" class="cyan" :checked="radio.checked" style="transform:scale(0.7)" />
-            {{radio.name}}
+            <radio :value="radio.value" class="cyan" :checked="radio.checked" style="transform: scale(0.7);" />
+            {{ radio.name }}
           </label>
         </radio-group>
-        <checkbox-group @change="checkboxChange" v-if="needTool==='1'" class="checkbox-group margin-top-xs">
+        <checkbox-group @change="checkboxChange" v-if="needTool === '1'" class="checkbox-group margin-top-xs">
           <label v-for="prop in detail.prop" :key="prop.id">
             <view class="tool-choose-item">
-              <checkbox :value="prop.id" class="cyan" style="transform:scale(0.7)"
-                :checked="goods.props.includes(prop.id)" />{{prop.name}}<text>￥{{prop.money}}</text>
+              <checkbox :value="prop.id" class="cyan" style="transform: scale(0.7);" :checked="goods.props.includes(prop.id)" />{{ prop.name }}<text>￥{{ prop.money }}</text>
             </view>
           </label>
         </checkbox-group>
@@ -95,18 +94,17 @@
       </view>
     </scroll-view>
     <!-- 评价页 -->
-    <scroll-view :style="[{height:'calc(100vh - 70px - '+ topHeader+'px)'}]" class="scroll-main"
-      v-if="currentIndex===1">
+    <scroll-view :style="[{ height: 'calc(100vh - 70px - ' + topHeader + 'px)' }]" class="scroll-main" v-if="currentIndex === 1">
       <view class="cu-list menu-avatar comment">
-        <view class="cu-item" v-for="(comment,index) in comments" :key="index">
+        <view class="cu-item" v-for="(comment, index) in comments" :key="index">
           <image mode="scaleToFill" :src="comment.img" class="avatar md left"></image>
           <view class="content">
-            <view class="text-grey">{{comment.name}}</view>
+            <view class="text-grey">{{ comment.name }}</view>
             <view class="text-gray text-content text-df">
-              {{comment.content}}
+              {{ comment.content }}
             </view>
             <view class="margin-top-sm flex justify-between">
-              <view class="text-gray text-df">{{comment.date}}</view>
+              <view class="text-gray text-df">{{ comment.date }}</view>
               <!-- <view>
 									<text class="cuIcon-appreciatefill text-red"></text>
 									<text class="cuIcon-messagefill text-gray margin-left-sm"></text>
@@ -117,44 +115,40 @@
       </view>
     </scroll-view>
     <!-- 视频页 -->
-    <scroll-view :style="[{height:'calc(100vh - 70px - '+ topHeader+'px)'}]" class="scroll-main"
-      v-if="currentIndex===2">
+    <scroll-view :style="[{ height: 'calc(100vh - 70px - ' + topHeader + 'px)' }]" class="scroll-main" v-if="currentIndex === 2">
       <view class="list">
-        <view class="cu-card case" v-for="(video,index) in detail.video" :key="index">
+        <view class="cu-card case" v-for="(video, index) in detail.video" :key="index">
           <view class="cu-item shadow">
             <view class="image">
-              <video :src="video" style="width:100%;"></video>
+              <video :src="video" style="width: 100%;"></video>
             </view>
           </view>
         </view>
       </view>
     </scroll-view>
     <!-- 大纲页 -->
-    <scroll-view :scroll-y="true" :style="[{height:'calc(100vh - 70px - '+ topHeader+'px)'}]" class="scroll-main"
-      v-if="currentIndex===3">
+    <scroll-view :scroll-y="true" :style="[{ height: 'calc(100vh - 70px - ' + topHeader + 'px)' }]" class="scroll-main" v-if="currentIndex === 3">
       <view class="cu-bar bg-white">
         <view class="action border-title">
           <text class="cuIcon-title text-student"></text>
-          <text class="text-xl text-bold">{{tabList[cate_type].list[currentIndex]}}</text>
+          <text class="text-xl text-bold">{{ tabList[cate_type].list[currentIndex] }}</text>
         </view>
       </view>
       <view class="bg-white padding-lr">
-        <view class="text-content text-lg" v-for="(outline,index) in detail.out_line" :key="index">
-          {{outline.course_content}}
+        <view class="text-content text-lg" v-for="(outline, index) in detail.out_line" :key="index">
+          {{ outline.course_content }}
         </view>
       </view>
     </scroll-view>
     <view class="static flex shadow">
       <view class="static-price">
         <text class="satic-label text-lg">小计：</text>
-        <text class="text-price text-red text-lg">{{goods.sum_money}}</text>
+        <text class="text-price text-red text-lg">{{ goods.sum_money }}</text>
       </view>
-      <view class="static-choose text-ellipsis" v-if="goods.choose.length>0">（已选：{{goods.choose.join(',')}}）</view>
+      <view class="static-choose text-ellipsis" v-if="goods.choose.length > 0">（已选：{{ goods.choose.join(',') }}）</view>
       <view class="static-order flex align-center">
-        <shop-cart :class_attend_id="attend_id" :disableBtn="disableBtn" @changeDisableBtn="changeDisableBtn">
-        </shop-cart>
-        <button class="cu-btn round bg-student text-white margin-left-xs"
-          :class="{'disabled':carts.includes(attend_id)||!detail.enable}" @tap="addCart">报课</button>
+        <shop-cart :class_attend_id="attend_id" :disableBtn="disableBtn" @changeDisableBtn="changeDisableBtn"> </shop-cart>
+        <button class="cu-btn round bg-student text-white margin-left-xs" :class="{ disabled: carts.includes(attend_id) || !detail.enable }" @tap="addCart">报课</button>
       </view>
     </view>
   </view>
@@ -168,9 +162,10 @@ import NP from 'number-precision'
 import { mapGetters } from 'vuex'
 export default {
   components: {
-    swiperTab, shopCart
+    swiperTab,
+    shopCart
   },
-  data () {
+  data() {
     return {
       topHeader: this.globalCustomBarHeight,
       swiper: {
@@ -192,10 +187,11 @@ export default {
         { value: '1', name: '需要道具', checked: true },
         { value: '2', name: '不需要道具', checked: false }
       ],
-      goods: { // 动态选中值
+      goods: {
+        // 动态选中值
         props: [], // 选中值
         choose: [], // 选中名称
-        sum_money: 0// 金额总计
+        sum_money: 0 // 金额总计
       }, // 选中课程
       tabList: [
         {
@@ -244,12 +240,10 @@ export default {
     }
   },
   computed: {
-    ...mapGetters([
-      'carts'
-    ])
+    ...mapGetters(['carts'])
   },
   // 配置分享
-  onShareAppMessage (res) {
+  onShareAppMessage(res) {
     if (res.from === 'button') {
       // 来自页面内分享按钮
       console.log(res.target)
@@ -259,10 +253,10 @@ export default {
       path: `/pages/class/detail?attend_id=${this.attend_id}`
     }
   },
-  onShow () {
+  onShow() {
     this.disableBtn = false
   },
-  onLoad (option) {
+  onLoad(option) {
     this.attend_id = Number(decodeURIComponent(option.attend_id))
     if (this.attend_id === 0) {
       uni.navigateBack()
@@ -271,7 +265,7 @@ export default {
     this.get_comments()
   },
   methods: {
-    get_detail () {
+    get_detail() {
       _detail({ class_attend_id: this.attend_id }).then(res => {
         this.detail = res.data
         this.money = res.data.sum_money
@@ -283,10 +277,10 @@ export default {
         }
       })
     },
-    changeDisableBtn () {
+    changeDisableBtn() {
       this.disableBtn = true
     },
-    addCart () {
+    addCart() {
       if (this.disableBtn) return false
       this.disableBtn = true
       if (!this.detail.enable) {
@@ -303,20 +297,20 @@ export default {
         }
       })
     },
-    setDefaultGoods (props) {
+    setDefaultGoods(props) {
       this.goods.props[0] = props[0].id
       this.goods.sum_money = NP.plus(this.money, props[0].money)
       this.goods.choose[0] = props[0].name
     },
-    get_comments () {
+    get_comments() {
       _comments({ class_attend_id: this.attend_id }).then(res => {
         this.comemnts = res.data
       })
     },
-    changeTab (index) {
+    changeTab(index) {
       this.currentIndex = index
     },
-    radioChange (e) {
+    radioChange(e) {
       const value = e.detail.value
       this.needTool = value
       if (value === '1') {
@@ -327,7 +321,7 @@ export default {
         this.goods.choose = []
       }
     },
-    checkboxChange (e) {
+    checkboxChange(e) {
       const values = e.detail.value
       const choose = []
       const props = []

src/pages/class/gift.vue

@@ -1,91 +1,125 @@
 <template>
-  <view class="page">
+  <view class="page" style="background-color: #fff;">
     <cu-custom :isBack="true" title="智能报课"></cu-custom>
-    <view class="steps padding-tb">
+    <view class="steps solid-bottom flex justify-between">
+      <!-- <view class="text-center"><text class="text-red">点击切换下一步</text></view>
       <view class="cu-steps">
         <view class="cu-item" :class="index > cur ? '' : 'text-student'" v-for="(item, index) in numList" :key="index" @tap="changeStep(index)">
           <text class="num" :data-index="index + 1"></text> {{ item.name }}
         </view>
-      </view>
+      </view> -->
+      <view v-for="(item, index) in stepList" :key="index" class="step flex-sub text-center" :class="{ cur: cur === index }" @tap="changeStep(index)">{{ item.name }}</view>
     </view>
-    <view class="main bg-white" :style="[{ height: 'calc(100vh - 92px - ' + topHeader + 'px)' }]">
+    <view class="main" :style="[{ height: 'calc(100vh - 40px - ' + topHeader + 'px)' }]">
       <swiper @change="swipeChange" :current="cur" class="swipe">
         <swiper-item @touchmove.stop>
           <view class="btn-check-group padding">
             <checkbox-group @change="checkboxChange" class="flex justify-between" style="flex-wrap: wrap;" id="week">
-              <label class="btn-check-label margin" :class="{ 'bg-cyan': params.week.includes(item.key + '') }" v-for="item in days" :key="item.key">
+              <label class="btn-check-label margin" :class="{ 'bg-light-green': params.week.includes(item.key + '') }" v-for="item in days" :key="item.key">
                 <checkbox :value="item.key" />
                 {{ item.value }}
               </label>
             </checkbox-group>
           </view>
+          <view class="flex next-step padding-lr" style="width: 100%;">
+            <button class="cu-btn round lg bg-light-green flex-sub" @tap="changeStep(1)">下一步</button>
+          </view>
         </swiper-item>
         <swiper-item @touchmove.stop>
           <view class="btn-check-group padding">
-            <checkbox-group @change="checkboxChange" class="flex justify-between" style="flex-wrap: wrap;" id="hobby">
-              <label class="btn-check-label margin" :class="{ 'bg-cyan': params.hobby.includes(item.id + '') }" v-for="item in interests" :key="item.id">
-                <checkbox :value="item.id" />
-                {{ item.name }}
-              </label>
-            </checkbox-group>
             <view class="margin">
-              <input v-model="params.hobbyOther" placeholder="输入其它兴趣内容（选填）" class="margin-top input-border" />
+              <input v-model="params.hobbyOther" placeholder="输入兴趣内容  如:画画" class="margin-top input-border" />
             </view>
+            <view class="interests">
+              <img src="/static/imgs/intelligent-bg.png" mode="widthFix" alt="" />
+              <checkbox-group @change="checkboxChange" id="hobby">
+                <view v-for="(item, index) in interests" :key="item.id" :style="[{ top: index * 80 + 'rpx', left: (index % 2) * 320 + index * 40 + 'rpx' }]" class="interest">
+                  <label
+                    class="btn-check-label margin"
+                    :style="{
+                      color: params.hobby.includes(item.id + '') ? '#fff' : '#000',
+                      backgroundColor: params.hobby.includes(item.id + '') ? colors[index % 4] : '#f0f0f0'
+                    }"
+                  >
+                    <checkbox :value="item.id" />
+                    {{ item.name }}
+                  </label>
+                  <text class="cuIcon-title" :style="[{ color: colors[index % 4] }]"></text>
+                </view>
+              </checkbox-group>
+            </view>
+          </view>
+          <view class="flex next-step padding-lr" style="width: 100%;">
+            <button class="cu-btn round lg bg-light-green flex-sub margin-right-sm" @tap="changeStep(0)">上一步</button>
+            <button class="cu-btn round lg bg-light-green flex-sub" @tap="changeStep(2)">下一步</button>
           </view>
         </swiper-item>
         <swiper-item>
-          <view class="VerticalBox">
-            <scroll-view class="VerticalNav nav" scroll-y scroll-with-animation :scroll-top="verticalNavTop" :style="'height:calc(100vh - 70px - 90px - ' + topHeader + 'px)'">
-              <view class="cu-item" :class="index == tabCur ? 'text-green cur' : ''" v-for="(item, index) in attends" :key="index" @tap="TabSelect" :data-id="index">
-                {{ weekList[index] }}
-              </view>
-            </scroll-view>
-            <scroll-view
-              class="VerticalMain padding-sm"
-              scroll-y
-              scroll-with-animation
-              :style="'height:calc(100vh - 70px - 90px - ' + topHeader + 'px)'"
-              :scroll-into-view="'main-' + mainCur"
-              @scroll="VerticalMain"
-            >
-              <radio-group @change="changeClass" style="width: 100%;" v-for="(attend, i) in attends" :key="i">
-                <view class="cu-item bg-white padding margin-bottom-sm" v-for="(item, index) in attend.list" v-show="i == mainCur" :key="index" :id="'main-' + index">
-                  <view class="cu-bar solid-bottom">
-                    <view>
-                      <label>
-                        <view class="flex justify-between align-center">
-                          <view
-                            ><text>{{ item.attend_name }}</text></view
-                          >
+          <view v-if="attends.length === 0" class="padding text-center text-lg">
+            没有找到相关课程！
+          </view>
+          <view v-else>
+            <view class="VerticalBox">
+              <scroll-view class="VerticalNav nav" scroll-y scroll-with-animation :scroll-top="verticalNavTop" :style="'height:calc(100vh - 70px - 40px - ' + topHeader + 'px)'">
+                <view class="cu-item" :class="index == tabCur ? 'text-green cur' : ''" v-for="(item, index) in attends" :key="index" @tap="TabSelect" :data-id="index">
+                  {{ weekList[index] }}
+                </view>
+              </scroll-view>
+              <scroll-view
+                class="VerticalMain padding-sm"
+                scroll-y
+                scroll-with-animation
+                :style="'height:calc(100vh - 70px - 40px - ' + topHeader + 'px)'"
+                :scroll-into-view="'main-' + mainCur"
+                @scroll="VerticalMain"
+              >
+                <radio-group @change="changeClass" style="width: 100%;" v-for="(attend, i) in attends" :key="i">
+                  <view class="cu-item bg-white padding margin-bottom-sm" v-for="(item, index) in attend.list" v-show="i == mainCur" :key="index" :id="'main-' + index">
+                    <view class="cu-bar solid-bottom">
+                      <view>
+                        <label>
+                          <view class="flex justify-between align-center">
+                            <view
+                              ><text>{{ item.attend_name }}</text></view
+                            >
+                            <view>
+                              <radio :value="item.class_attend_id" :checked="checked.includes(item.class_attend_id)" class="cyan" style="transform: scale(0.7);" />
+                            </view>
+                          </view>
+                        </label>
+                      </view>
+                    </view>
+                    <view v-if="item.prop.length > 0">
+                      <checkbox-group class="checkbox-group margin-top-xs" :data-id="item.class_attend_id" @change="propChange">
+                        <label v-for="prop in item.prop" :key="prop.id">
                           <view>
-                            <radio :value="item.class_attend_id" :checked="checked.includes(item.class_attend_id)" class="cyan" style="transform: scale(0.7);" />
+                            <checkbox
+                              :value="prop.id"
+                              class="cyan"
+                              :checked="checked_props[mainCur].class_attend_id === item.class_attend_id && checked_props[mainCur].prop.includes(prop.id + '')"
+                              style="transform: scale(0.7);"
+                            />{{ prop.name }}<text>￥{{ prop.money }}</text>
                           </view>
-                        </view>
-                      </label>
+                        </label>
+                      </checkbox-group>
                     </view>
                   </view>
-                  <view v-if="item.prop.length > 0">
-                    <checkbox-group class="checkbox-group margin-top-xs" :data-id="item.class_attend_id" @change="propChange">
-                      <label v-for="prop in item.prop" :key="prop.id">
-                        <view>
-                          <checkbox
-                            :value="prop.id"
-                            class="cyan"
-                            :checked="checked_props[mainCur].class_attend_id === item.class_attend_id && checked_props[mainCur].prop.includes(prop.id + '')"
-                            style="transform: scale(0.7);"
-                          />{{ prop.name }}<text>￥{{ prop.money }}</text>
-                        </view>
-                      </label>
-                    </checkbox-group>
-                  </view>
+                </radio-group>
+              </scroll-view>
+            </view>
+            <view class="static shadow">
+              <view class="flex justify-between" style="width: 100%;">
+                <view>
+                  <button class="cu-btn round line-grey" @tap="changeStep(1)">
+                    <text class="cuIcon-back lg margin-right-sm"></text>
+                    重选
+                  </button>
                 </view>
-              </radio-group>
-            </scroll-view>
-          </view>
-          <view class="static shadow">
-            <view class="static-order flex">
-              <shop-cart :class_attend_id="attend_id" @changeDisableBtn="changeDisableBtn"></shop-cart>
-              <button class="cu-btn round bg-student text-white margin-left-xs" @tap="addCart">报课</button>
+                <view class="static-order flex">
+                  <shop-cart :class_attend_id="attend_id" @changeDisableBtn="changeDisableBtn"></shop-cart>
+                  <button class="cu-btn round bg-student text-white margin-left-xs" @tap="addCart">报课</button>
+                </view>
+              </view>
             </view>
           </view>
         </swiper-item>
@@ -105,7 +139,7 @@ export default {
   data() {
     return {
       topHeader: this.globalCustomBarHeight,
-      numList: [
+      stepList: [
         {
           name: '选周期'
         },
@@ -130,6 +164,7 @@ export default {
       tabCur: 0,
       mainCur: 0,
       verticalNavTop: 0,
+      colors: ['#0CAAF4', '#082FCC', '#FDC534', '#09E294'],
       checked: [], // 选中
       checked_props: [], // 选中工具
       attend_id: 0, // 添加成功课程
@@ -170,8 +205,12 @@ export default {
       params.hobby = params.hobby.join(',')
       _intelligentCourses(params).then(res => {
         this.attends = res.data
+        this.checked = [] //初始化选项
         Object.keys(this.attends).forEach(item => {
-          this.$set(this.checked_props, item, { prop: [] })
+          const class_attend_id = this.attends[item].list[0].class_attend_id
+          const prop = this.attends[item].list[0].prop.length > 0 ? [this.attends[item].list[0].prop[0].id + ''] : []
+          this.$set(this.checked, item, class_attend_id)
+          this.$set(this.checked_props, item, { class_attend_id: class_attend_id, prop: prop })
         })
         this.weekList = this.attends.map(item => item.week)
       })
@@ -217,6 +256,7 @@ export default {
       this.checked[this.mainCur] = value
       this.$set(this.checked, this.mainCur, value)
       this.$set(this.checked_props, this.mainCur, { class_attend_id: value, prop: [] })
+      console.log(this.checked_props)
     },
     propChange(e) {
       const parentId = e.target.dataset.id
@@ -271,6 +311,32 @@ export default {
     height: 100%;
   }
 }
+.step {
+  position: relative;
+  padding: 10px 0;
+  &.cur {
+    color: #09e294;
+    &:before {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      background-color: #09e294;
+      width: 30px;
+      height: 2px;
+      transform: translateX(25%);
+    }
+  }
+}
+.interests {
+  position: relative;
+  .interest {
+    position: absolute;
+  }
+}
+.next-step {
+  position: fixed;
+  bottom: 60px;
+}
 .btn-check-group {
   checkbox {
     display: none;
@@ -282,8 +348,8 @@ export default {
     display: inline-block;
     margin-right: 10rpx;
     position: relative;
-    padding: 10rpx 30rpx;
-    line-height: 30px;
+    padding: 10rpx 40rpx;
+    // line-height: 30px;
     border-radius: 100rpx;
     flex-wrap: nowrap;
     border: 1px solid #eee;
@@ -312,7 +378,7 @@ export default {
   height: 70px;
   align-items: center;
   padding: 0 0.8rem;
-  justify-content: flex-end;
+  // justify-content: flex-end;
 }
 .fixed {
   position: fixed;

src/pages/index/components/card.vue

@@ -1,16 +1,20 @@
 <template>
   <view class="card flex" @tap="goDetail(item)">
-    <view class=card-left>
-      <img mode="aspectFill" :src="item.image" alt="">
+    <view class="card-left">
+      <img mode="aspectFill" :src="item.image" alt="" />
     </view>
     <view class="card-right flex-sub">
-      <view class="card-title flex justify-between"><text>{{item.attend_name}}</text><text
-          class="text-student text-light">￥{{item.money}}</text></view>
-      <view class="text-gray text-sm"><text>{{item.day}}</text></view>
-      <view class="text-gray text-sm">{{item.grade_desc}}</view>
+      <view class="card-title flex justify-between"
+        ><text>{{ item.attend_name }}</text
+        ><text class="text-student text-light">￥{{ item.money }}</text></view
+      >
+      <view class="text-gray text-sm"
+        ><text>{{ item.day }}</text></view
+      >
+      <view class="text-gray text-sm">{{ item.grade_desc }}</view>
       <view class="margin-top-sm">
-        <button class="cu-btn round  bg-student text-white button-hover" v-if="item.enable">报课</button>
-        <button class="cu-btn round  bg-grey button-hover text-white disabled" v-else>停止</button>
+        <button class="cu-btn round bg-student text-white button-hover" v-if="item.enable">报课</button>
+        <button class="cu-btn round bg-grey button-hover text-white disabled" v-else>停止</button>
       </view>
     </view>
   </view>
@@ -21,18 +25,19 @@ export default {
   props: {
     item: {
       type: Object,
-      default () {
+      default() {
         return {}
       }
     }
   },
-  data () {
+  data() {
     return {
       key: 1212
     }
   },
   methods: {
-    goDetail (item) {
+    goDetail(item) {
+      console.log(111)
       if (!item.enable) {
         uni.showToast({ title: '课程已停止！', icon: 'none' })
         return false

src/pages/index/index.vue

@@ -1,8 +1,7 @@
-
 <template>
   <view class="page">
     <cu-custom :isBack="false"></cu-custom>
-    <view class="header" :style="[{top:topHeader + 'px'}]">
+    <view class="header" :style="[{ top: topHeader + 'px' }]">
       <view class="header-box flex justify-end">
         <view class="header-title">
           <view class="header-title-main">
@@ -12,49 +11,50 @@
         </view>
         <view class="header-search flex-sub">
           <view class="flex justify-between">
-            <input type="text" v-model="params.course_name" class="header-search-input flex-sub" placeholder="搜索课程"
-              @confirm="search">
+            <input type="text" v-model="params.course_name" class="header-search-input flex-sub" placeholder="搜索课程" @confirm="search" />
             <text class="cuIcon-search text-gray header-search-icon" @tap="search"></text>
           </view>
         </view>
       </view>
     </view>
-    <scroll-view :scroll-y="true" :refresher-enabled="true" class="scroll-main" :refresher-triggered="triggered"
-      :style="[{height:'calc(100vh - 102px - '+ topHeader+'px)'}]" @refresherrefresh="onRefresh"
-      @scrolltolower="loadMore">
+    <scroll-view
+      :scroll-y="true"
+      :refresher-enabled="true"
+      class="scroll-main"
+      :refresher-triggered="triggered"
+      :style="[{ height: 'calc(100vh - 102px - ' + topHeader + 'px)' }]"
+      @refresherrefresh="onRefresh"
+      @scrolltolower="loadMore"
+    >
       <view class="main">
         <view class="main-title">活动和餐饮</view>
         <view class="flex justify-around course">
-          <course v-for="(item,index) in courses" :key="index" @tap="goCourse(item.type)" :course="item"
-            class="course-item flex-sub margin-xs"></course>
+          <course v-for="(item, index) in courses" :key="index" @tap="goCourse(item.type)" :course="item" class="course-item flex-sub margin-xs"></course>
         </view>
         <view class="main-title margin-top-xs">一键报班</view>
         <view class="apply-class flex">
-          <image mode="widthFix" @tap="goGift" src="/static/imgs/index/baoban.png"
-            class="flex-sub apply-class-img margin-xs" />
+          <image mode="widthFix" @tap="goGift" src="/static/imgs/index/baoban.png" class="flex-sub apply-class-img margin-xs" />
         </view>
         <view class="recommend margin-top-xs">
           <view class="recommend-title">推荐课程</view>
           <view class="recommend-filter margin-top-xs flex">
-            <view class="filter-item text-center flex-sub" @tap="sort('home')" :class="{'text-sort':sortCur==='home'}">
-              综合</view>
-            <view class="filter-item text-center flex-sub" @tap="sort('sales')"
-              :class="{'text-sort':sortCur==='sales'}">销量
-              <image mode="widthFix" class="sort-icon"
-                :src="sortCur==='sales'?(sortItem.sales===0?sortIcons.up:sortIcons.down):sortIcons.no"></image>
+            <view class="filter-item text-center flex-sub" @tap="sort('home')" :class="{ 'text-sort': sortCur === 'home' }"> 综合</view>
+            <view class="filter-item text-center flex-sub" @tap="sort('sales')" :class="{ 'text-sort': sortCur === 'sales' }"
+              >销量
+              <image mode="widthFix" class="sort-icon" :src="sortCur === 'sales' ? (sortItem.sales === 0 ? sortIcons.up : sortIcons.down) : sortIcons.no"></image>
             </view>
-            <view class="filter-item text-center flex-sub" @tap="sort('money')"
-              :class="{'text-sort':sortCur==='money'}">价格
-              <image mode="widthFix" class="sort-icon"
-                :src="sortCur==='money'?(sortItem.money===0?sortIcons.up:sortIcons.down):sortIcons.no"></image>
+            <view class="filter-item text-center flex-sub" @tap="sort('money')" :class="{ 'text-sort': sortCur === 'money' }"
+              >价格
+              <image mode="widthFix" class="sort-icon" :src="sortCur === 'money' ? (sortItem.money === 0 ? sortIcons.up : sortIcons.down) : sortIcons.no"></image>
             </view>
-            <view class="filter-item text-center flex-sub">{{grade_now}}</view>
-            <view class="filter-item text-right flex-sub" @tap="showModal" data-target="FilterModal">筛选
+            <view class="filter-item text-center flex-sub">{{ grade_now }}</view>
+            <view class="filter-item text-right flex-sub" @tap="showModal" data-target="FilterModal"
+              >筛选
               <text class="cuIcon-filter text-gray"></text>
             </view>
           </view>
           <view class="list">
-            <view class="cu-card" v-for="(item,index) in list" :key="index">
+            <view class="cu-card" v-for="(item, index) in list" :key="index">
               <view class="cu-item">
                 <card :item="item"></card>
               </view>
@@ -63,9 +63,8 @@
         </view>
       </view>
     </scroll-view>
-    <view class="cu-modal drawer-modal justify-end" :class="modalName=='FilterModal'?'show':''" @tap="hideModal">
-      <view class="cu-dialog basis-lg" @tap.stop=""
-        :style="[{top:topHeader+'px',height:'calc(100vh - ' + topHeader + 'px)'}]">
+    <view class="cu-modal drawer-modal justify-end" :class="modalName == 'FilterModal' ? 'show' : ''" @tap="hideModal">
+      <view class="cu-dialog basis-lg" @tap.stop="" :style="[{ top: topHeader + 'px', height: 'calc(100vh - ' + topHeader + 'px)' }]">
         <view class="filter-title">机构筛选</view>
         <view class="btn-check-group padding-lr">
           <!-- <checkbox-group @change="checkboxChange" class="flex" style="flex-wrap: wrap;" id="agency">
@@ -76,22 +75,30 @@
 							</label>
 						</checkbox-group> -->
           <radio-group class="flex" style="flex-wrap: wrap;" id="agency">
-            <label class="btn-check-label margin-top-sm padding-lr-xs text-sm text-ellipsis"
-              :class="{'bg-cyan':params.agency.includes(item.id)}" v-for="item in filters.agency" :key="item.id"
-              @tap="radioChange('agency',item.id)">
+            <label
+              class="btn-check-label margin-top-sm padding-lr-xs text-sm text-ellipsis"
+              :class="{ 'bg-cyan': params.agency.includes(item.id) }"
+              v-for="item in filters.agency"
+              :key="item.id"
+              @tap="radioChange('agency', item.id)"
+            >
               <radio :value="item.id" />
-              {{item.name}}
+              {{ item.name }}
             </label>
           </radio-group>
         </view>
         <view class="filter-title">分类筛选</view>
         <view class="btn-check-group padding-lr">
           <radio-group class="flex" style="flex-wrap: wrap;" id="category">
-            <label class="btn-check-label margin-top-sm padding-lr-xs text-sm text-ellipsis"
-              :class="{'bg-cyan':params.category.includes(item.id)}" v-for="item in filters.category" :key="item.id"
-              @tap="radioChange('category',item.id)">
+            <label
+              class="btn-check-label margin-top-sm padding-lr-xs text-sm text-ellipsis"
+              :class="{ 'bg-cyan': params.category.includes(item.id) }"
+              v-for="item in filters.category"
+              :key="item.id"
+              @tap="radioChange('category', item.id)"
+            >
               <radio :value="item.id" />
-              {{item.name}}
+              {{ item.name }}
             </label>
           </radio-group>
         </view>
@@ -105,22 +112,30 @@
 							</label>
 						</checkbox-group> -->
           <radio-group class="flex" style="flex-wrap: wrap;" id="day">
-            <label class="btn-check-label margin-top-sm padding-lr-xs text-sm"
-              :class="{'bg-cyan':params.day.includes(index+'')}" v-for="(item,index) in filters.week" :key="index"
-              @tap="radioChange('day',index)">
+            <label
+              class="btn-check-label margin-top-sm padding-lr-xs text-sm"
+              :class="{ 'bg-cyan': params.day.includes(index + '') }"
+              v-for="(item, index) in filters.week"
+              :key="index"
+              @tap="radioChange('day', index)"
+            >
               <radio :value="index" />
-              {{item}}
+              {{ item }}
             </label>
           </radio-group>
         </view>
         <view class="filter-title">价格区间（元）</view>
         <view class="btn-check-group padding-lr">
           <radio-group class="flex" style="flex-wrap: wrap;" id="price">
-            <label class="btn-check-label margin-top-sm padding-lr-xs text-sm"
-              :class="{'bg-cyan':params.price===item.name}" v-for="item in filters.price_list" :key="item.id"
-              @tap="radioChange('price',item.name)">
+            <label
+              class="btn-check-label margin-top-sm padding-lr-xs text-sm"
+              :class="{ 'bg-cyan': params.price === item.name }"
+              v-for="item in filters.price_list"
+              :key="item.id"
+              @tap="radioChange('price', item.name)"
+            >
               <radio :value="item.name" />
-              {{item.name}}
+              {{ item.name }}
             </label>
           </radio-group>
         </view>
@@ -142,9 +157,10 @@ import { deepClone } from '@/common/utils'
 import { mapGetters } from 'vuex'
 export default {
   components: {
-    course, card
+    course,
+    card
   },
-  data () {
+  data() {
     return {
       topHeader: this.globalCustomBarHeight,
       modalName: '',
@@ -162,7 +178,8 @@ export default {
         sales: 0,
         money: 0
       },
-      courses: [// 排序情况
+      courses: [
+        // 排序情况
         {
           applying: true,
           back: '/static/imgs/index/zmk.png',
@@ -197,9 +214,10 @@ export default {
         category: [],
         price: '',
         sort: '',
-        list_type: 0// 0 课程,1 餐饮,2活动
+        list_type: 0 // 0 课程,1 餐饮,2活动
       },
-      init: { // 初始化
+      init: {
+        // 初始化
         page_num: 1,
         course_name: '',
         agency: [],
@@ -207,7 +225,7 @@ export default {
         category: [],
         price: '',
         sort: '',
-        list_type: 0// 0 课程,1 餐饮,2活动
+        list_type: 0 // 0 课程,1 餐饮,2活动
       },
       list: [],
       noMore: false, // 还有没
@@ -215,11 +233,9 @@ export default {
     }
   },
   computed: {
-    ...mapGetters([
-      'kid', 'token'
-    ])
+    ...mapGetters(['kid', 'token'])
   },
-  onShow () {
+  onShow() {
     // 登录后才进入后续操作
     this.checkLogin().then(res => {
       if (res) {
@@ -227,14 +243,15 @@ export default {
           return this.globalNavigateTo('myStudents')
         }
         this.params = Object.assign({}, this.init)
-        this.get_list(true)// true初始化加载过滤项
+        this.get_list(true) // true初始化加载过滤项
       }
     })
   },
   methods: {
-    checkLogin () {
+    checkLogin() {
       return new Promise((resolve, reject) => {
-        if (this.token) { // 跳转至登录页
+        if (this.token) {
+          // 跳转至登录页
           resolve(true)
         } else {
           uni.showModal({
@@ -250,11 +267,12 @@ export default {
         }
       })
     },
-    goCourse (type) {
+    goCourse(type) {
       this.params.list_type = type
       this.search()
     },
-    loadFilter () { // 加载筛选项
+    loadFilter() {
+      // 加载筛选项
       const params = {}
       _filter(params).then(res => {
         this.filters = res.data
@@ -262,13 +280,13 @@ export default {
         this.courses[2].applying = this.filters.is_catering
       })
     },
-    showModal (e) {
+    showModal(e) {
       this.modalName = e.currentTarget.dataset.target
     },
-    hideModal (e) {
+    hideModal(e) {
       this.modalName = null
     },
-    radioChange (type, v) {
+    radioChange(type, v) {
       switch (type) {
         case 'agency':
           this.params.agency = this.params.agency[0] === v ? [] : [v]
@@ -286,7 +304,7 @@ export default {
           console.log('error')
       }
     },
-    checkboxChange (e) {
+    checkboxChange(e) {
       const type = e.target.id
       const values = e.detail.value
       switch (type) {
@@ -303,16 +321,19 @@ export default {
           console.log('error')
       }
     },
-    search () { // 搜索课程
+    search() {
+      // 搜索课程
       this.params.page_num = 1
       this.get_list()
     },
-    check_course () { // 筛选课程
+    check_course() {
+      // 筛选课程
       this.params.page_num = 1
       this.get_list()
       this.hideModal()
     },
-    onRefresh () { // 下拉刷新
+    onRefresh() {
+      // 下拉刷新
       this.triggered = true
       this.params.page_num = 1
       this.params.list_type = 0
@@ -321,7 +342,7 @@ export default {
         this.triggered = false
       }, 1000)
     },
-    loadMore () {
+    loadMore() {
       if (this.noMore) {
         uni.showToast({ title: '暂无更多课程数据', icon: 'none' })
         return false
@@ -329,7 +350,8 @@ export default {
       this.params.page_num++
       this.get_list()
     },
-    sort (type) { // 排序搜索
+    sort(type) {
+      // 排序搜索
       const sorts = {
         home: 0,
         sales: 0,
@@ -347,7 +369,7 @@ export default {
       this.params.page_num = 1
       this.get_list()
     },
-    get_list (init = false) {
+    get_list(init = false) {
       let params = deepClone(this.params)
       params = filterParams(params)
       if (params.day.length > 0) {
@@ -380,7 +402,7 @@ export default {
         if (init) this.loadFilter()
       })
     },
-    goGift () {
+    goGift() {
       this.globalNavigateTo('classGift', { package_id: 0 })
     }
   }

src/pages/mine/courseFiles.vue

@@ -0,0 +1,56 @@
+<template>
+  <view class="page">
+    <cu-custom :isBack="true" title="课程档案"></cu-custom>
+    <view class="cu-list box-shadow menu">
+      <view class="cu-item arrow margin-top-xs" v-for="file in list" :key="file.id" @tap="goto('fileDetail', file)">
+        <view class="content margin-left-sm">
+          <view>{{ file.course_name }}</view>
+          <star-rating name="serviceNum" :score="file.level" :max="file.max_level"></star-rating>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { _getStudentFiles } from '@/api/course'
+import starRating from '@/components/star-rating.vue'
+export default {
+  components: {
+    starRating
+  },
+  data() {
+    return {
+      key: '课程档案',
+      params: {
+        page: 1
+      },
+      list: [],
+      ability: []
+    }
+  },
+  onLoad() {
+    this.get_list()
+  },
+  methods: {
+    get_list() {
+      _getStudentFiles(this.params).then(res => {
+        this.list = res.data.list
+        this.ability = res.data.ability
+      })
+    },
+    goto(page, file) {
+      const ability = this.ability.filter(item => {
+        if (file.ability_total[item.id]) {
+          this.$set(item, 'score', file.ability_total[item.id])
+          return true
+        }
+      })
+      this.$set(file, 'ability', ability)
+      this.globalNavigateTo(page, { file: JSON.stringify(file) })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>

src/pages/mine/fileDetail.vue

@@ -0,0 +1,166 @@
+<template>
+  <view class="page">
+    <cu-custom :isBack="true" :title="key"></cu-custom>
+    <view class="card margin-sm padding-sm bg-white shadow">
+      <view class="text-center">
+        <image mode="scaleToFill" :src="student_avatar" class="avatar xl student-avatar"></image>
+      </view>
+      <view class="part">
+        <view class="title text-student">考核总评</view>
+        <view class="content margin-top">
+          <canvas
+            canvas-id="ability"
+            id="ability"
+            class="charts"
+            @touchstart="touchStart"
+            @touchmove="touchMove"
+            @touchend="touchEnd"
+            @error="error"
+            :style="{
+              width: cWidth * pixelRatio + 'px',
+              height: cHeight * pixelRatio + 'px',
+              transform: 'scale(' + 1 / pixelRatio + ')',
+              'margin-left': (-cWidth * (pixelRatio - 1)) / 2 + 'px',
+              'margin-top': (-cHeight * (pixelRatio - 1)) / 2 + 'px'
+            }"
+          ></canvas>
+        </view>
+      </view>
+      <view class="part">
+        <view class="title text-student">学期总评</view>
+        <view class="content margin-top">{{ file.term_summary }}</view>
+      </view>
+      <view class="part">
+        <view class="title text-student">下期预告</view>
+        <view class="content margin-top">{{ file.next_forecast }}</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import UCharts from '@/components/u-charts/u-charts.js'
+var canvases = {}
+export default {
+  data() {
+    return {
+      key: '学生总评',
+      file: {},
+      pixelRatio: 1,
+      cWidth: '',
+      cHeight: '',
+      student_avatar: 'http://parent.kehoubaike.com/static/img/7f4e775d2e04234d1e1994b13146f6b.e5c47f3.png'
+    }
+  },
+  // 配置分享
+  onShareAppMessage(res) {
+    if (res.from === 'button') {
+      // 来自页面内分享按钮
+      console.log(res.target)
+    }
+    return {
+      title: '结业报告',
+      path: `/pages/mine/fileDetail?shareFile=${JSON.stringify(this.file)}`
+    }
+  },
+  onLoad(options) {
+    //跳转参数
+    if (options.file) {
+      this.file = JSON.parse(decodeURIComponent(options.file))
+    }
+    //分享页参数
+    if (options.shareFile) {
+      this.file = JSON.parse(options.shareFile)
+    }
+    this.cWidth = uni.upx2px(800) - 60
+    this.cHeight = uni.upx2px(400) // 图表配置
+    this.init()
+  },
+  methods: {
+    init() {
+      const ability = {
+        categories: this.file.ability.map(item => item.name),
+        series: [
+          {
+            name: '评分',
+            data: this.file.ability.map(item => item.score)
+          }
+        ]
+      }
+      this.showRadar('ability', ability)
+    },
+    showRadar(canvasId, chartData) {
+      canvases[canvasId] = new UCharts({
+        canvasId: canvasId,
+        type: 'radar',
+        legend: { show: true },
+        fontSize: 11,
+        width: 300,
+        height: this.cHeight * this.pixelRatio,
+        pixelRatio: this.pixelRatio,
+        animation: true,
+        categories: chartData.categories,
+        series: chartData.series
+      })
+    },
+    touchStart(e) {
+      const canvasId = e.target.id
+      canvases[canvasId].showToolTip(e, {
+        format: function (item, category) {
+          return category ? category + ' ' + item.name + ':' + item.data : item.name + ':' + item.data
+        }
+      })
+      // canvases[canvasId].scrollStart(e)
+    },
+    touchMove(e) {
+      // const canvasId = e.target.id
+      // canvases[canvasId].scroll(e)
+    },
+    touchEnd(e) {
+      // const canvasId = e.target.id
+      // canvases[canvasId].scrollEnd(e)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.page {
+  background-color: #f3fffa;
+  min-height: 100vh;
+}
+.card {
+  margin-top: 90rpx;
+  border-radius: 10px;
+}
+.title {
+  position: relative;
+  text-align: center;
+  &:before {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    left: 0;
+    content: '';
+    width: 32%;
+    height: 2px;
+    border-bottom: 1px solid #5fd0e4;
+  }
+  &:after {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 0;
+    content: '';
+    width: 32%;
+    height: 2px;
+    border-bottom: 1px solid #5fd0e4;
+  }
+}
+.content {
+  min-height: 120px;
+}
+.student-avatar {
+  transform: translateY(-50%);
+}
+</style>

src/pages/mine/message.vue

@@ -3,14 +3,14 @@
     <cu-custom :isBack="true" title="消息中心"></cu-custom>
     <view class="cu-list box-shadow menu">
       <view class="cu-item arrow margin-top-xs" v-for="message in list" :key="message.id">
-        <text class="cuIcon-notice lg text-gray" style="font-size:18px;"></text>
+        <text class="cuIcon-notice lg text-gray" style="font-size: 18px;"></text>
         <view class="content margin-left-sm">
           <view>系统通知</view>
-          <text class="text-black">{{message.title}}</text>
+          <text class="text-black">{{ message.title }}</text>
         </view>
       </view>
       <view class="cu-item arrow margin-top-xs" @tap="report">
-        <text class="cuIcon-notice lg text-gray" style="font-size:18px;"></text>
+        <text class="cuIcon-notice lg text-gray" style="font-size: 18px;"></text>
         <view class="content margin-left-sm">
           <text class="text-black">学生综合素质报告</text>
         </view>
@@ -22,19 +22,19 @@
 <script>
 import { _getNotice } from '@/api/auth'
 export default {
-  data () {
+  data() {
     return {
       list: []
     }
   },
-  onLoad () {
+  onLoad() {
     this.get_list()
   },
   methods: {
-    report () {
+    report() {
       uni.showToast({ title: '学期末才能领取对应的学生综合素质报告，敬请期待!', icon: 'none', duration: 2000 })
     },
-    get_list () {
+    get_list() {
       _getNotice().then(res => {
         this.list = res.data.notice_data
       })

src/pages/mine/mine.vue

@@ -4,69 +4,74 @@
     <view class="main">
       <view class="main-top">
         <view class="title flex justify-between">
-          <view>{{user.nickName||'未更新用户信息'}}</view>
+          <view>{{ user.nickName || '未更新用户信息' }}</view>
           <text class="cuIcon-settings lg text-gray" @tap="goto('setting')"></text>
         </view>
         <view class="user">
           <view class="user-info flex">
-            <image mode="scaleToFill" :src="user.avatarUrl||defaultAvatar" class="avatar"></image>
+            <image mode="scaleToFill" :src="user.avatarUrl || defaultAvatar" class="avatar"></image>
             <view class="study-info">
-              <view class="user-name" @tap="switchStudent" v-if="isLogin&&user.nickName">
+              <view class="user-name" @tap="switchStudent" v-if="isLogin && user.nickName">
                 {{ kid_info.name + '-' + kid_info.school_name }}
-                <text class="iconfont margin-left-xs" style="font-size:18px;">&#xe600;</text>
+                <text class="iconfont margin-left-xs" style="font-size: 18px;">&#xe600;</text>
               </view>
               <view class="user-name" @tap="login" v-else>
                 切换学生
-                <text class="iconfont margin-left-xs" style="font-size:18px;">&#xe716;</text>
+                <text class="iconfont margin-left-xs" style="font-size: 18px;">&#xe716;</text>
               </view>
-              <view class="user-learn">已学习{{info.parent_data.learn_day}}天</view>
+              <view class="user-learn">已学习{{ info.parent_data.learn_day }}天</view>
             </view>
           </view>
           <view class="user-relative flex justify-between" v-if="isLogin">
-            <view v-for="(relate,index) in courseRelates" :key="index" class="course-item"
-              :style="'background:'+relate.background" @tap="goto(relate.page)">
-              <text class="iconfont back-img" style="font-size:32px;">{{relate.icon}}</text>
-              <view class="text-df">{{relate.name}}</view>
+            <view v-for="(relate, index) in courseRelates" :key="index" class="course-item" :style="'background:' + relate.background" @tap="goto(relate.page)">
+              <text class="iconfont back-img" style="font-size: 32px;">{{ relate.icon }}</text>
+              <view class="text-df">{{ relate.name }}</view>
             </view>
           </view>
           <view class="user-relative flex justify-between" v-else>
-            <view class="course-item relate-item" v-for="(course,index) in courses" :key="index"
-              :style="'background:'+course.background">
-              <text class="iconfont back-img" style="font-size:40px;">{{course.icon}}</text>
-              <view class="text-lg">{{course.title}}</view>
-              <view class="text-xxl margin-top-xs">{{course.name}}</view>
+            <view class="course-item relate-item" v-for="(course, index) in courses" :key="index" :style="'background:' + course.background">
+              <text class="iconfont back-img" style="font-size: 40px;">{{ course.icon }}</text>
+              <view class="text-lg">{{ course.title }}</view>
+              <view class="text-xxl margin-top-xs">{{ course.name }}</view>
             </view>
           </view>
         </view>
         <view class="order">
           <view class="order-title solid-bottom">我的订单</view>
           <view class="order-info flex justify-between">
-            <view v-for="(order,index) in menuList" :key="index" @tap="toOrder(index)">
+            <view v-for="(order, index) in menuList" :key="index" @tap="toOrder(index)">
               <view class="order-image">
-                <text class="iconfont text-student" style="font-size:32px;">{{order.icon}}</text>
+                <text class="iconfont text-student" style="font-size: 32px;">{{ order.icon }}</text>
               </view>
-              {{order.title}}
+              {{ order.title }}
             </view>
           </view>
         </view>
       </view>
       <view class="margin cu-list box-shadow menu margin-top-lg bg-white">
         <view class="cu-item arrow" @tap="goto('classCart')">
-          <text class="cuIcon-cart lg text-gray" style="font-size:18px;"></text>
+          <text class="cuIcon-cart lg text-gray" style="font-size: 18px;"></text>
           <view class="content margin-left-sm">
             <text class="text-black">购物车</text>
           </view>
           <view class="action"></view>
         </view>
         <view class="cu-item arrow" @tap="goto('message')">
-          <text class="cuIcon-message lg text-gray" style="font-size:18px;"></text>
+          <text class="cuIcon-message lg text-gray" style="font-size: 18px;"></text>
           <view class="content margin-left-sm">
             <text class="text-black">消息中心</text>
           </view>
           <view class="action"></view>
         </view>
+        <view class="cu-item arrow" @tap="goto('courseFiles')">
+          <text class="cuIcon-file lg text-gray" style="font-size: 18px;"></text>
+          <view class="content margin-left-sm">
+            <text class="text-black">课程档案</text>
+          </view>
+          <view class="action"></view>
+        </view>
         <view class="cu-item arrow" @tap="goto('onlineService')">
-          <text class="iconfont text-gray" style="font-size:18px;">&#xe726;</text>
+          <text class="iconfont text-gray" style="font-size: 18px;">&#xe726;</text>
           <view class="content margin-left-sm">
             <text class="text-black">在线客服</text>
           </view>
@@ -74,22 +79,17 @@
       </view>
     </view>
     <mp-tabbar :outerSelected="2" />
-    <view class="cu-modal drawer-modal justify-start" :class="modalName=='showStudent'?'show':''" @tap="hideModal">
-      <scroll-view :scroll-y="true" class="cu-dialog basis-lg" @tap.stop=""
-        :style="[{top:topHeader+'px',height:'calc(100vh - 48px - ' + topHeader + 'px)'}]">
+    <view class="cu-modal drawer-modal justify-start" :class="modalName == 'showStudent' ? 'show' : ''" @tap="hideModal">
+      <scroll-view :scroll-y="true" class="cu-dialog basis-lg" @tap.stop="" :style="[{ top: topHeader + 'px', height: 'calc(100vh - 48px - ' + topHeader + 'px)' }]">
         <view class="student-list padding-left">
-          <view class="student margin-top-sm" v-for="(student,index) in students" :key="index"
-            @tap="chooseKid(student.id)">
+          <view class="student margin-top-sm" v-for="(student, index) in students" :key="index" @tap="chooseKid(student.id)">
             <view class="flex align-center">
               <image mode="scaleToFill" :src="defaultAvatar" class="avatar md"></image>
-              <view class="margin-left-sm">{{student.name}}</view>
-              <text class="cuIcon-check text-student margin-left" style="font-size:22px;"
-                v-if="kid===student.id"></text>
+              <view class="margin-left-sm">{{ student.name }}</view>
+              <text class="cuIcon-check text-student margin-left" style="font-size: 22px;" v-if="kid === student.id"></text>
             </view>
             <view class="flex">
-              <view class="cu-tag line-green margin-top-xs">
-                {{student.school_name ? student.school_name : ''}}-{{student.grade_name}}-{{student.class_name}}
-              </view>
+              <view class="cu-tag line-green margin-top-xs"> {{ student.school_name ? student.school_name : '' }}-{{ student.grade_name }}-{{ student.class_name }} </view>
             </view>
           </view>
         </view>
@@ -102,7 +102,7 @@
 import { mapGetters } from 'vuex'
 import { _getStudents, _getUserInfo } from '@/api/auth'
 export default {
-  data () {
+  data() {
     return {
       topHeader: this.globalCustomBarHeight,
       info: {},
@@ -189,20 +189,20 @@ export default {
       kid: 'kid'
     })
   },
-  onShow () {
+  onShow() {
     this.get_info()
   },
   methods: {
-    login () {
+    login() {
       this.globalNavigateTo('login')
     },
-    get_info () {
+    get_info() {
       _getUserInfo().then(res => {
         this.info = res.data
         this.get_students()
       })
     },
-    get_students () {
+    get_students() {
       _getStudents().then(res => {
         if (res.data.length < 1) {
           this.globalNavigateTo('myStudents')
@@ -217,26 +217,27 @@ export default {
         this.setkidInfo(kid)
       })
     },
-    hideModal (e) {
+    hideModal(e) {
       this.modalName = null
     },
-    setkidInfo (kid) { // 设置学生信息
+    setkidInfo(kid) {
+      // 设置学生信息
       this.kid_info = this.students.find(item => item.id === kid)
     },
-    switchStudent () {
+    switchStudent() {
       this.modalName = 'showStudent'
     },
-    goto (page) {
+    goto(page) {
       if (!this.isLogin) {
         this.globalNavigateTo('login')
       } else {
         this.globalNavigateTo(page)
       }
     },
-    toOrder (index) {
+    toOrder(index) {
       this.globalNavigateTo('order', { type: index })
     },
-    chooseKid (id) {
+    chooseKid(id) {
       uni.showModal({
         title: '',
         content: '确定选择该学生?',

src/pages/studentcenter/works.vue

@@ -3,7 +3,7 @@
     <cu-custom :isBack="true" title="课堂作品"></cu-custom>
     <scroll-view scroll-y="true" :style="[{ height: 'calc(100vh - ' + topHeader + 'px)' }]">
       <view class="content">
-        <view class="course-img">
+        <view class="course-img padding-sm">
           <swiper class="swiper" :indicator-dots="swiper.indicatorDots" :autoplay="swiper.autoplay" :interval="swiper.interval" :duration="swiper.duration">
             <swiper-item v-for="(item, index) in detail.course_data.image" :key="index">
               <view class="swiper-item">
@@ -12,34 +12,90 @@
             </swiper-item>
           </swiper>
         </view>
-        <view>
-          <view class="title margin-top-sm">课堂作品</view>
-          <view class="list" v-if="detail.student_comment_data">
-            <view class="cu-card case" v-for="(item, index) in detail.student_comment_data.data" :key="index">
-              <view class="cu-item shadow">
-                <view class="image">
-                  <view v-for="(img, i) in item.images" :key="i">
-                    <image :src="img" v-if="checkTypes(img, 'imgs')" mode="aspectFit" style="width: 100%;"></image>
-                    <video :src="img" v-if="checkTypes(img, 'video')" style="width: 100%;"></video>
-                  </view>
-                  <view class="margin-bottom-xs">老师点评：{{ detail.teach_review_data.data[0].msg }}</view>
+        <!-- 课堂作品 -->
+        <view class="cu-card" v-if="detail.student_comment_data.data">
+          <view class="cu-item">
+            <view class="card-head bg-student text-center text-white text-lg padding-sm">课堂作品 </view>
+            <view class="card-main padding-sm">
+              <view class="cu-card case" v-for="(item, index) in detail.student_comment_data.data" :key="index">
+                <view v-for="(img, i) in item.images" :key="i">
+                  <image class="upload-item solid" :src="img" mode="aspectFit" v-if="checkTypes(img, 'imgs')" @tap="viewImage" :data-url="img"></image>
+                  <video
+                    class="upload-item solid"
+                    :src="img"
+                    v-if="checkTypes(img, 'video')"
+                    :autoplay="true"
+                    :controls="false"
+                    :show-fullscreen-btn="false"
+                    @tap="viewVideo"
+                    :data-url="img"
+                    data-target="videoModal"
+                  ></video>
                 </view>
               </view>
             </view>
           </view>
         </view>
+        <!-- 能力分析 -->
+        <view class="cu-card" v-if="detail.student_comment_data.ability">
+          <view class="cu-item">
+            <view class="card-head bg-student text-center text-white text-lg padding-sm">能力分析 </view>
+            <view class="card-main padding-sm">
+              <canvas
+                canvas-id="ability"
+                id="ability"
+                class="charts"
+                @touchstart="touchStart"
+                @touchmove="touchMove"
+                @touchend="touchEnd"
+                @error="error"
+                :style="{
+                  width: cWidth * pixelRatio + 'px',
+                  height: cHeight * pixelRatio + 'px',
+                  transform: 'scale(' + 1 / pixelRatio + ')',
+                  'margin-left': (-cWidth * (pixelRatio - 1)) / 2 + 'px',
+                  'margin-top': (-cHeight * (pixelRatio - 1)) / 2 + 'px'
+                }"
+              ></canvas>
+            </view>
+          </view>
+        </view>
+        <!-- 课堂评价 -->
+        <view class="cu-card" v-if="detail.teach_review_data.data">
+          <view class="cu-item">
+            <view class="card-head bg-student text-center text-white text-lg padding-sm">课堂评价 </view>
+            <view class="card-main padding-sm" style="min-height: 100px;">
+              <view class="margin-bottom-xs">老师点评：{{ detail.teach_review_data.data[0].msg }}</view>
+            </view>
+          </view>
+        </view>
       </view>
     </scroll-view>
+    <!-- 视频预览 -->
+    <view class="cu-modal" :class="modalName == 'videoModal' ? 'show' : ''" @tap="hideModal">
+      <view class="cu-dialog" @tap.stop="">
+        <video class="bg-img" :src="videoUrl" :autoplay="true" :controls="true" :show-fullscreen-btn="false" style="height: 200px;"></video>
+      </view>
+    </view>
   </view>
 </template>
 
 <script>
 import { checkTypes } from '@/common/utils/index'
+import UCharts from '@/components/u-charts/u-charts.js'
+var canvases = {}
 export default {
   data() {
     return {
       topHeader: this.globalCustomBarHeight,
-      detail: {},
+      modalName: null,
+      pixelRatio: 1,
+      isShare: false,
+      cWidth: '',
+      cHeight: '',
+      detail: {
+        student_comment_data: {}
+      },
       swiper: {
         indicatorDots: true,
         autoplay: true,
@@ -48,13 +104,92 @@ export default {
       }
     }
   },
-  onLoad() {
+  // 配置分享
+  onShareAppMessage(res) {
+    if (res.from === 'button') {
+      // 来自页面内分享按钮
+      console.log(res.target)
+    }
+    return {
+      title: '课程作品',
+      path: `/pages/studentcenter/works?detail=${JSON.stringify(this.detail)}`
+    }
+  },
+  onLoad(options) {
+    if (options.detail) {
+      this.detail = JSON.parse(options.detail)
+      this.ifShare = true
+    }
+    this.cWidth = uni.upx2px(800) - 60
+    this.cHeight = uni.upx2px(400) // 图表配置
     this.init()
   },
   methods: {
     checkTypes,
     init() {
-      this.detail = JSON.parse(uni.getStorageSync('daily_class'))
+      //分享的页面直接读取分享数据,跳过
+      if (!this.ifShare) {
+        this.detail = JSON.parse(uni.getStorageSync('daily_class'))
+        //匹配能力对应分数
+        if (!this.detail.student_comment_data.ability) return false
+        this.detail.student_comment_data.ability.map(item => {
+          this.$set(item, 'score', this.detail.student_comment_data.ability_score[item.id])
+        })
+      }
+      const ability = {
+        categories: this.detail.student_comment_data.ability.map(item => item.name),
+        series: [
+          {
+            name: '评分',
+            data: this.detail.student_comment_data.ability.map(item => item.score)
+          }
+        ]
+      }
+      this.showRadar('ability', ability)
+    },
+    viewImage(e) {
+      uni.previewImage({
+        urls: [e.currentTarget.dataset.url],
+        current: e.currentTarget.dataset.url
+      })
+    },
+    viewVideo(e) {
+      this.modalName = e.currentTarget.dataset.target
+      this.videoUrl = e.currentTarget.dataset.url
+    },
+    hideModal(e) {
+      this.modalName = null
+    },
+    showRadar(canvasId, chartData) {
+      canvases[canvasId] = new UCharts({
+        canvasId: canvasId,
+        type: 'radar',
+        legend: { show: true },
+        fontSize: 11,
+        width: 300,
+        height: this.cHeight * this.pixelRatio,
+        pixelRatio: this.pixelRatio,
+        animation: true,
+        categories: chartData.categories,
+        series: chartData.series
+      })
+    },
+    touchStart(e) {
+      const canvasId = e.target.id
+      canvases[canvasId].showToolTip(e, {
+        format: function (item, category) {
+          return category ? category + ' ' + item.name + ':' + item.data : item.name + ':' + item.data
+        }
+      })
+      // canvases[canvasId].scrollStart(e)
+    },
+    touchMove(e) {
+      // const canvasId = e.target.id
+      // canvases[canvasId].scroll(e)
+    },
+    touchEnd(e) {
+      // const canvasId = e.target.id
+      // canvases[canvasId].scrollEnd(e)
     }
   }
 }
@@ -63,5 +198,11 @@ export default {
 <style lang="scss" scoped>
 .page {
   height: 100vh;
+  background-color: #f3fffa;
+}
+.upload-item {
+  margin-right: 20rpx;
+  width: 200rpx;
+  height: 200rpx;
 }
 </style>