123

src/pages/user/course/index.vue

@@ -1,32 +1,32 @@
 <template>
-    <div class="course">
+    <div class="course" v-if="data">
         <div class="topbar" ref="topbar">
             <van-nav-bar left-arrow v-if="$route.meta.showNavBar" :title="$route.meta.title" @click-left="$router.back()" :style="{backgroundColor: $route.meta.navBarBackgroundColor}" />
         </div>
        <div class="course-container">
            <div class="my-course border-bottom">
                <h3 class="title">我的功课</h3>
-               <p class="progress">已修行<span>0</span>天 功课总计<span>0</span>遍</p>
+               <p class="progress">已修行<span>{{data.practise_day}}</span>天 功课总计<span>{{data.practise_total}}</span>遍</p>
            </div>
             <div class="course-wrapper">
-                <div class="course-item" v-for="i in 10" :key="i">
-                    <img src="https://img1.baidu.com/it/u=3055253142,1855499744&fm=26&fmt=auto" alt="">
+                <div class="course-item" v-for="course in data.list" :key="course.id" @click="$router.push({name: 'user-course-detail', query: { id: course.id}})">
+                    <img :src="course.cover" alt="">
                     <div class="course-info">
-                        <h3 class="title">阿弥陀佛圣号</h3>
+                        <h3 class="title">{{course.name}}</h3>
                         <p class="summary">
                             <span>
                                 <i class="iconfont icon-shuben-"></i>
-                                <b>总58遍</b>
+                                <b>总{{course.target}}遍</b>
                             </span>
                             <span>
                                 <i class="iconfont icon-shuben-"></i>
-                                <b>今日58遍</b>
+                                <b>今日{{course.now_target}}遍</b>
                             </span>
                         </p>
                         <div class="progress-group">
-                            <label for="">今日进度 <span>60%</span></label>
+                            <label for="">今日进度 <span>{{course.progress}}%</span></label>
                             <div class="progress-bar">
-                                <div class="progress"></div>
+                                <div class="progress" :style="{width: course.progress + '%'}"></div>
                             </div>
                         </div>
                     </div>
@@ -37,10 +37,25 @@
 </template>
 
 <script>
-
+import { getCourseList } from '@/api';
 
 export default {
-    
+    data(){
+        return {
+            data: null,
+            courseList: []
+        }
+    },
+    mounted(){
+        this.getCourseList()
+    },
+    methods: {
+        async getCourseList(){
+            const res = await getCourseList();
+            console.log(res)
+            this.data = res;
+        }
+    }
 }
 </script>
 
@@ -91,6 +106,7 @@ export default {
                 .summary{
                     font-size: .30rem;
                     padding: .1rem 0;
+                    margin-top: .2rem;
                     span{
                         vertical-align: middle;
                         display: inline-block;
@@ -108,12 +124,13 @@ export default {
                 }
                 .progress-group{
                     font-size: .35rem;
-                    padding-top: .8rem;
+                    padding-top: .6rem;
                     label{
-                        font-size: .35rem;
-                        color: #333;
+                        font-size: .3rem;
+                        color: #666;
                         span{
-                            color: red;
+                            color: $primary-color;
+                            font-weight: bold;
                         }
                     }
                     .progress-bar{