|
|
@@ -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>
|
