Harmony在线教育app平台开发开发日志——day11

课程信息页面的完成

1.HML

<div class="container">
    <div style="width: 100%;height: 40px;align-items: center;margin: 10px 0px 5px 0px;">
      <div style="width: 10%;height: 100%;align-items: center;justify-content: center;"onclick="goBack">
         <image src="common/icon/le.png" style="width: 14px;height: 14px;object-fit: contain;">
         </image>
      </div>
        <div style="width: 80%;height: 100%;align-items: center;justify-content: center;">
            <text style="font-size: 16px;">
                课程列表
            </text>
        </div>
        <div style="width: 10%;height: 100%;align-items: center;justify-content: center;">
            <image src="common/icon/search.png" style="width: 14px;height: 14px;object-fit: contain;">
            </image>
        </div>
    </div>
    <div style="width: 100%;flex-direction: column;">
        <div style="width: 100%;height: 50px;">
            <div class="tabBarItem">
                <text class="tabBarItemTitle" onclick="changeTab(0)" style="border-bottom-color:{{tab==0 ?'#EE3B3B':'#FFFFFF'}} ;font-weight: {{tab==0 ?'bold':'normal'}};">
                   全部
                </text>
            </div>
            <div class="tabBarItem">
                <text class="tabBarItemTitle" onclick="changeTab(1)" style="border-bottom-color:{{tab==1 ?'#EE3B3B':'#FFFFFF'}} ;font-weight: {{tab==1 ?'bold':'normal'}};">
                   公开课
                </text>
            </div>
            <div class="tabBarItem">
                <text class="tabBarItemTitle" onclick="changeTab(2)" style="border-bottom-color:{{tab==2 ?'#EE3B3B':'#FFFFFF'}} ;font-weight: {{tab==2 ?'bold':'normal'}};">
                    定制课
                </text>
            </div>
            <div class="tabBarItem">
                <text class="tabBarItemTitle" style="font-size: 20px;color: silver;">
                    |
                </text>
            </div>
            <div class="tabBarItem">
                <text class="tabBarItemTitle" onclick="changeTab(3)" style="border-bottom-color:{{tab==3 ?'#EE3B3B':'#FFFFFF'}} ;font-weight: {{tab==3 ?'bold':'normal'}};">
                    普通课
                </text>
            </div>
        </div>
        <div style="width: 100%;height: 50px;justify-content: space-between;">
        <text style="font-size:14px;height: 100%;align-items: center;justify-content: center;margin-left: 10px;">
            <span>共</span>
            <span style="color: #EE7942;">{{total}}</span>
            <span>个课程</span>
        </text>
            <select style="width: 80px;height: 100%;color: #949494;">
                <option value="ByHot" selected="true">热度</option>
                <option value="ByTime">时间</option>
            </select>
        </div>
        <div show="{{tab == 0}}">
            <list style="width: 100%;margin-left: 5px;columns: 1;">
                    <list-item style="width: 100%;border-bottom: 1px solid #E8E8E8 ;"for="{{courses}}">
                    <div style="width: 100%;height: 100px;align-items:center;justify-content: center;">
                        <div style="width: 40%;height: 100%;">
                            <image src="{{$item.cover}}" style="width: 90%;object-fit: contain;border-radius: 5px;">
                            </image>
                        </div>
                        <div style="width: 60%;height: 90px;flex-direction: column;">
                            <text style="width: 100%;height: 35px;color: black;font-size: 16px;">
                                {{$item.courseName}}
                            </text>
                            <div style="width: 100%;height: 20px;align-items: center;">
                                <rating style="width: 80px;height: 14px;" numstars="5" rating="{{$item.score}}">
                                </rating>
                                <div style="width: 100%;height: 30px;justify-content: space-between;align-items: center;">
                                    <text style="font-size: 14px;">
                                        讲师：{{$item.teacher}}
                                    </text>
                                    <text style="font-size: 14px;">
                                        课时：{{$item.classHour}}
                                    </text>
                                </div>
                            </div>
                        </div>
                    </div>
                    </list-item>
            </list>
        </div>
        <div show="{{tab == 1}}">

        </div>
        <div show="{{tab == 2}}">

        </div>
        <div show="{{tab == 3}}">

        </div>

    </div>
</div>

2.CSS

.container {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;
}
.tabBarItem{
    width: 60px;
    height: 100%;
    justify-content: center;
    align-items: center;
}
.tabBarItemTitle{
    font-size: 15px;
    width: 50px;
    height: 100%;
    border-bottom-width: 3px;
    border-bottom-style: solid;
    text-align: center;
}

3.JS

import router from '@system.router';
import getData from '../utils/getData.js'
export default {
    data: {
        tab:0,
        total:0,
        courses:[]
    },
    goBack(){
      router.back()
},
    onShow(){
        this.getCourses();

    },
    getCourses(){
        let params ={pageNum:this.pageNum,pageSize:5}
        let data = getData.getCourses(params);
        this.courses = this.courses.concat(data.rows);
        this.total = data.total;

    }
}