Signed-off-by: Changpeng Duan <838560574@qq.com>

app/src/Mock/index.js

@@ -54,14 +54,17 @@ let testTable = function () {
             "valid": "@datetime",
             "Confirmed": "@integer(36844, 368449)",
             "Deaths": "@integer(1099, 10993)",
+            "kick": "@integer(199, 993)",
             "Recovered": "@integer(1986, 9999)",
-            "Status": "@integer(1, 2)",
+            // "Status": "@integer(0)",
+            "Status": "0",
             "color": "@hex",
             "memo": "@paragraph(1, 1)",
             "dialogValue": "@range(1, 3)",
             "vipType": "@integer(1, 2)",
             "members": members,
             "wxVisible": "@integer(0, 1)",
+            "timeLong": "14:00-16:00",
             "timeScope":  [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
         })
     }

app/src/page/appoint.vue

@@ -1,42 +1,56 @@
 <template>
     <div>
         <img src="../static/images/main/banner.png" height="121" width="414"/>
-        <mu-container>
-            <mu-tabs :value.sync="active">
-                <mu-tab>TAB ITEM 1</mu-tab>
-                <mu-tab>TAB ITEM 2</mu-tab>
-                <mu-tab>TAB ITEM 3</mu-tab>
+            <mu-tabs :value.sync="active" color="#F2F2F2" indicator-color="#33CAF7" center>
+                <mu-tab v-for="item in 4">8月5日 <br> <em>星期二</em></mu-tab>
             </mu-tabs>
-            <div class="demo-text">
+            <div class="context">
                 <span class="sum">
                     今日预约名额剩余
-                    <em class="green">{{num}}</em>
-                    <em class="red">{{num}}</em>
+                    <em class="green" v-if="num > 0">{{num}}</em>
+                    <em class="red" v-else>{{num}}</em>
                     人
                 </span>
-                <ul>
-                    <li v-for="l in list">
+                <ul class="list">
+                    <li v-for="l in list"
+                        :class="[{'greenLi':l.Status == 0},{'redLi':l.Status == 1},{'yellowLi':l.Status == 2},{'whiteLi':l.Status == 3}]">
                         <div class="dotContainer">
-                            <i class="dot"></i>
-                            <i class="cubes"></i>
-                            <i class="tri"></i>
+                            <i class="dot" v-if="l.Status==0"></i>
+                            <i class="cubes" v-if="l.Status==1"></i>
+                            <i class="tri" v-if="l.Status==2"></i>
                         </div>
                         <div class="title">
-                            <h5></h5>
+                            <h5>{{l.name}}</h5>
+                            <span>{{l.timeLong}}</span>
                         </div>
+                        <div class="current">
+                            <h5>剩余
+                                <em class="green" v-if="l.kick > 0">{{l.kick}}</em>
+                                <em class="red" v-else>{{l.kick}}</em>
+                                人</h5>
+                            <span>总名额 {{l.kick}} 人</span>
+                        </div>
+                        <mu-button class="appointBtn greenBtn" v-if="l.Status == 0" @click="appointNow(l)">预约
+                        </mu-button>
+                        <mu-button class="appointBtn redBtn" v-if="l.Status == 1" @click="isFulled">已满</mu-button>
+                        <mu-button class="appointBtn yellowBtn" v-if="l.Status == 2" @click="isAppointed(l)">已约
+                        </mu-button>
+                        <mu-button class="appointBtn disableBtn" v-if="l.Status == 3">不可约</mu-button>
                     </li>
                 </ul>
             </div>
-        </mu-container>
+        <bottomTab :curTab="thisTab"></bottomTab>
     </div>
 </template>
 
 <script>
     import axios from 'axios';
+    import bottomTab from '../components/bottomTab'
     import {
         testSelect,
         testTable,
     } from '../api/getApiRes.js'
+
     let qs = require('qs');
     import Global from '../Global.js'
 
@@ -44,14 +58,23 @@
         data() {
             return {
                 num: 0,
+                thisTab: '预约课程',
                 active: 0,
-                list:[],
+                sum: 0,
+                list: [],
             }
         },
         mounted() {
             this.getList();
         },
         methods: {
+            appointNow(row) {
+                console.log(row);
+            }, isFulled() {
+                console.log(123);
+            }, isAppointed(row) {
+                console.log(row);
+            },
             getList() {
                 let that = this;
                 let param = {
@@ -63,7 +86,7 @@
                     if (json.Code == 0) {
                         that.list = json.Rs;
                         if (that.list) {
-                            that.shopNum = json.Rs.length;
+                            that.num = json.Rs.length;
                         }
                     } else {
                         that.$message.error(json.Memo);
@@ -71,6 +94,9 @@
                 })
             },
         },
+        components: {
+            bottomTab
+        }
     }
 </script>
 
@@ -94,4 +120,171 @@
     /deep/ .mu-appbar-title {
         text-align: center;
     }
+
+    /deep/ .mu-tab {
+        width: 115px;
+        height: 51px;
+        margin-right: 6px;
+    }
+
+    /deep/ .mu-tab-wrapper {
+        height: 51px;
+        background: #fff;
+        color: #363636;
+        box-shadow: 1px 0px 6px rgba(0, 0, 0, 0.16);
+        border-radius: 8px 8px 0px 0px;
+        font-size: 16px;
+    }
+
+    /deep/ .mu-tab-active .mu-tab-wrapper {
+        height: 56px;
+        border-radius: 8px 8px 0px 0px;
+        background: #33caf7;
+        box-shadow: 1px 0px 6px rgba(0, 0, 0, 0.16);
+        color: #fff;
+    }
+
+    /deep/ .mu-tab-wrapper em {
+        font-size: 12px;
+    }
+
+    .sum {
+        width: 100%;
+        height: 55px;
+        line-height: 55px;
+        background: #fff;
+        font-family: "PingFang SC";
+        font-weight: 300;
+        font-size: 16px;
+        text-align: center;
+        color: #909090;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+    }
+
+    .green {
+        color: #37CB00;
+    }
+
+    .red {
+        color: #F8847F;
+    }
+
+    .list {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        margin-top: 8px;
+    }
+
+    .list li {
+        width: 100%;
+        height: 70px;
+        margin-bottom: 8px;
+        padding-top: 16px;
+        padding-bottom: 16px;
+    }
+
+    .list .dotContainer {
+        width: 50px;
+        float: left;
+        height: 60px;
+        padding-left: 22px;
+        padding-top: 10px;
+    }
+
+    .dotContainer .dot {
+        width: 12px;
+        height: 12px;
+        background: #37cb00;
+        border-radius: 250px;
+        float: left;
+    }
+
+    .yellowLi {
+        background: #FFFBED;
+    }
+
+    .redLi {
+        background: #FFF7F7;
+    }
+
+    .greenLi {
+        background: #F7FFF4;
+    }
+
+    .whiteLi {
+        background: #fff;
+    }
+    .list li .title {
+        width: 90px;
+        height: 60px;
+        float: left;
+    }
+    li .title h5 {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        font-weight: normal;
+        font-size: 14px;
+        text-align: left;
+        color: #3b3b3b;
+    }
+    li .title span {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        font-weight: normal;
+        font-size: 12px;
+        text-align: left;
+        color: #909090;
+    }
+    .list li .current {
+        width: 120px;
+        height: 60px;
+        float: left;
+    }
+    li .current h5 {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        font-family: "PingFang SC";
+        font-weight: normal;
+        font-size: 14px;
+        text-align: left;
+        color: #3b3b3b;
+    }
+    .current h5 em {
+        font-family: "PingFang SC";
+        font-weight: normal;
+        font-size: 14px;
+        text-align: left;
+    }
+    .current span {
+        font-family: "PingFang SC";
+        font-weight: normal;
+        font-size: 12px;
+        text-align: left;
+        color: #909090;
+    }
+    .appointBtn {
+        width: 79px;
+        height: 37px;
+        border-radius: 18.5px;
+        background: #fff;
+        float: right;
+    }
+    .greenBtn{
+        border: 1px solid #37cb00;
+        font-family: "PingFang SC";
+        font-weight: normal;
+        font-size: 18px;
+        color: #37cb00;
+        margin-right: 2%;
+    }
 </style>