重置配置获取

app/src/page/appoint.vue

@@ -1,715 +1,724 @@
 <template>
-  <div class="pages">
-
-    <div class="as">
-      <img src="../static/images/main/banner.png" height="121" width="414"/>
-      <mu-tabs :value.sync="active" color="#F2F2F2" indicator-color="#ffffff">
-        <mu-tab v-for="(day,i) in weeks">{{ day.data }} <br> <em>{{ day.name }}</em></mu-tab>
-      </mu-tabs>
-      <span class="sum">
+    <div class="pages">
+
+        <div class="as">
+            <img src="../static/images/main/banner.png" height="121" width="414"/>
+            <mu-tabs :value.sync="active" color="#F2F2F2" indicator-color="#ffffff">
+                <mu-tab v-for="(day,i) in weeks">{{ day.data }} <br> <em>{{ day.name }}</em></mu-tab>
+            </mu-tabs>
+            <span class="sum">
         {{ today }} 预约名额剩余
         <em class="green" v-if="num > 0">{{ num }}</em>
         <em class="red" v-else>{{ num }}</em>
         人
     </span>
-    </div>
-    <div class="context">
-      <ul class="list">
-        <li v-for="l in list"
-            v-show="l.WxVisible == 1"
-            :class="[{'greenLi':l.remain > 0},{'redLi':l.Status == 1},{'yellowLi':l.remain == 0},{'whiteLi':l.WxOrder == 0}]">
-          <div class="dotContainer">
-            <!--                        正常-->
-            <i class="dot" v-if="l.remain>0 && l.WxOrder != 0"></i>
-
-            <i class="cubes" v-if="l.Status==1"></i>
-            <!--                        已满-->
-            <i class="tri" v-if="l.remain == 0 && l.remain == 0"></i>
-            <!--                        不可约-->
-            <i class="x" v-if="l.WxOrder==0"></i>
-          </div>
-          <div class="title">
-            <h5><span class="lessons" :style="{ background:l.ClassColor }">{{ l.ClassName }}</span></h5>
-            <span>{{ l.BeginStr }} - {{ l.EndStr }}</span>
-          </div>
-          <div class="current">
-            <h5>剩余
-              <em class="green" v-if="l.remain > 0">{{ l.remain }}</em>
-              <em class="red" v-else>{{ l.remain }}</em>
-              人</h5>
-            <span>总名额 {{ l.OrderToplimit }} 人</span>
-          </div>
-          <mu-button class="appointBtn greenBtn" v-if="l.remain > 0 && l.OrderId == 0 && l.WxOrder != 0"
-                     @click="appointNow(l)">
-            预约
-          </mu-button>
-          <mu-button class="appointBtn redBtn" v-if="l.remain == 0 && l.OrderId == 0" @click="isFulled">已满</mu-button>
-          <mu-button class="appointBtn yellowBtn" v-if="l.OrderId != 0" @click="isAppointed(l)">已约</mu-button>
-          <mu-button class="appointBtn disableBtn" v-if="l.WxOrder == 0" @click="isDisable">不可约</mu-button>
-        </li>
-        <div class="tips" v-if="list == ''">
-          <p style="text-align: center">
-            暂无可预约的课程
-          </p>
         </div>
-      </ul>
-      <mu-avatar color="rgb(231, 82, 150)" @click.native="goPage('lesson')">
-        <mu-icon value="reorder"></mu-icon>
-      </mu-avatar>
-    </div>
-    <bottomTab :curTab="thisTab"></bottomTab>
-    <div class="doalog">
-      <mu-dialog title="预约课程" width="600" max-width="80%" :esc-press-close="false"
-                 :overlay-close="false" :open.sync="openAlert">
-        <p>
-          是否预约 课程：{{ dialog.ClassName }} ，时间：{{ dialog.BeginStr }} - {{ dialog.EndStr }}
-          <br>
-        </p>
-        <mu-button slot="actions" flat color="primary" @click="closeAlertDialog">取消</mu-button>
-        <mu-button slot="actions" flat color="primary" @click="confirmAppoint">确定</mu-button>
-      </mu-dialog>
+        <div class="context">
+            <ul class="list">
+                <li v-for="l in list"
+                    v-show="l.WxVisible == 1"
+                    :class="[{'greenLi':l.remain > 0},{'redLi':l.Status == 1},{'yellowLi':l.remain == 0},{'whiteLi':l.WxOrder == 0}]">
+                    <div class="dotContainer">
+                        <!--                        正常-->
+                        <i class="dot" v-if="l.remain>0 && l.WxOrder != 0"></i>
+
+                        <i class="cubes" v-if="l.Status==1"></i>
+                        <!--                        已满-->
+                        <i class="tri" v-if="l.remain == 0 && l.remain == 0"></i>
+                        <!--                        不可约-->
+                        <i class="x" v-if="l.WxOrder==0"></i>
+                    </div>
+                    <div class="title">
+                        <h5><span class="lessons" :style="{ background:l.ClassColor }">{{ l.ClassName }}</span></h5>
+                        <span>{{ l.BeginStr }} - {{ l.EndStr }}</span>
+                    </div>
+                    <div class="current">
+                        <h5>剩余
+                            <em class="green" v-if="l.remain > 0">{{ l.remain }}</em>
+                            <em class="red" v-else>{{ l.remain }}</em>
+                            人</h5>
+                        <span>总名额 {{ l.OrderToplimit }} 人</span>
+                    </div>
+                    <mu-button class="appointBtn greenBtn" v-if="l.remain > 0 && l.OrderId == 0 && l.WxOrder != 0"
+                               @click="appointNow(l)">
+                        预约
+                    </mu-button>
+                    <mu-button class="appointBtn redBtn" v-if="l.remain == 0 && l.OrderId == 0" @click="isFulled">已满
+                    </mu-button>
+                    <mu-button class="appointBtn yellowBtn" v-if="l.OrderId != 0" @click="isAppointed(l)">已约</mu-button>
+                    <mu-button class="appointBtn disableBtn" v-if="l.WxOrder == 0" @click="isDisable">不可约</mu-button>
+                </li>
+                <div class="tips" v-if="list == ''">
+                    <p style="text-align: center">
+                        暂无可预约的课程
+                    </p>
+                </div>
+            </ul>
+            <mu-avatar color="rgb(231, 82, 150)" @click.native="goPage('lesson')">
+                <mu-icon value="reorder"></mu-icon>
+            </mu-avatar>
+        </div>
+        <bottomTab :curTab="thisTab"></bottomTab>
+        <div class="doalog">
+            <mu-dialog title="预约课程" width="600" max-width="80%" :esc-press-close="false"
+                       :overlay-close="false" :open.sync="openAlert">
+                <p>
+                    是否预约 课程：{{ dialog.ClassName }} ，时间：{{ dialog.BeginStr }} - {{ dialog.EndStr }}
+                    <br>
+                </p>
+                <mu-button slot="actions" flat color="primary" @click="closeAlertDialog">取消</mu-button>
+                <mu-button slot="actions" flat color="primary" @click="confirmAppoint">确定</mu-button>
+            </mu-dialog>
+        </div>
+        <alert ref="alertPart"></alert>
     </div>
-    <alert ref="alertPart"></alert>
-  </div>
 </template>
 
 <script>
-import axios from 'axios';
-import bottomTab from '../components/bottomTab'
-import {
-  CanOrderSchoolTimeTableListQuery,
-  OderAddByVipUser,
-  OderCancelByVipUser,
-  QueryNextWeek,
-  testSelect,
-  testTable,
-} from '../api/getApiRes.js'
-
-import alert from '../components/alert'
-
-let qs = require('qs');
-import Global from '../Global.js'
-
-export default {
-  data() {
-    return {
-      num: 0,
-      thisTab: '预约课程',
-      active: 0,
-      sum: 0,
-      HaveDays: 0,
-      openAlert: false,
-      list: [],
-      weeks: [],
-      today: '',
-      dialog: {
-        id: '',
-        name: '',
-        timeLong: '',
-      },
-    }
-  },
-  mounted() {
-    this.getQueryNextWeek();
-    // this.alertInfo(document.body.clientWidth);
-    // this.alertInfo( window.screen.height);
-  },
-  methods: {
-    getQueryNextWeek(){
-      let that = this;
-      let param = {
-      token: localStorage.token,
-        shopId : this.$route.query.shopId,
-      };
-      let postdata = qs.stringify(param);
-      QueryNextWeek(postdata).then(res => {
-          let json = res;
-          if (json.Code == 0) {
-              this.HaveDays = json.Rs;
-            this.getFurtherDays(this.HaveDays);
-          } else {
-              that.$message.error(json.Memo);
-          }
-      })
-    },
-    alertInfo(info) {
-      this.$refs.alertPart.openSimpleDialog(info);
-    },
-    goPage(url) {
-      this.$router.push({
-        path: '/' + url, query: {
-          shopId: this.$route.query.shopId
+    import axios from 'axios';
+    import bottomTab from '../components/bottomTab'
+    import {
+        CanOrderSchoolTimeTableListQuery,
+        OderAddByVipUser,
+        OderCancelByVipUser,
+        QueryNextWeek,
+        testSelect,
+        testTable,
+    } from '../api/getApiRes.js'
+
+    import alert from '../components/alert'
+
+    let qs = require('qs');
+    import Global from '../Global.js'
+
+    export default {
+        data() {
+            return {
+                num: 0,
+                thisTab: '预约课程',
+                active: 0,
+                sum: 0,
+                HaveDays: 0,
+                openAlert: false,
+                list: [],
+                weeks: [],
+                today: '',
+                dialog: {
+                    id: '',
+                    name: '',
+                    timeLong: '',
+                },
+            }
+        },
+        mounted() {
+            this.getQueryNextWeek();
+            // this.alertInfo(document.body.clientWidth);
+            // this.alertInfo( window.screen.height);
+        },
+        methods: {
+            getQueryNextWeek() {
+                let that = this;
+                let param = {
+                    token: localStorage.token,
+                    shopId: this.$route.query.shopId,
+                };
+                let postdata = qs.stringify(param);
+                QueryNextWeek(postdata).then(res => {
+                    let json = res;
+                    if (json.Code == 0) {
+                        this.HaveDays = json.Rs;
+                        this.getFurtherDays(this.HaveDays);
+                    } else {
+                        that.$message.error(json.Memo);
+                    }
+                })
+            },
+            alertInfo(info) {
+                this.$refs.alertPart.openSimpleDialog(info);
+            },
+            goPage(url) {
+                this.$router.push({
+                    path: '/' + url, query: {
+                        shopId: this.$route.query.shopId
+                    }
+                });
+            },
+            // 计算距离11/8号还有集体那
+            calcHaveDays(sDate1) {
+                var date2 = new Date();
+                var date1 = new Date(Date.parse(sDate1.replace(/-/g, "/")));
+                var iDays = parseInt(Math.abs(date2.getTime() - date1.getTime()) / 1000 / 60 / 60 / 24) + 2;
+                return iDays;
+
+            },
+            // 获取未来7天的
+            getFurtherDays(HaveDays) {
+                let now = new Date();
+                let nowTime = now.getTime();
+                let oneDayTime = 24 * 60 * 60 * 1000;
+                let days = '';
+                let item = [];
+                let month = 0;
+                let day = 0;
+                this.weeks = [];
+                for (let i = 0; i < HaveDays; i++) {
+                    days = new Date(nowTime + (i) * oneDayTime);//显示周日
+                    month = days.getMonth() + 1;
+                    day = days.getDate();
+                    month = month < 10 ? '0' + month : month;
+                    day = day < 10 ? '0' + day : day;
+                    item = {
+                        name: this.numberToWeek(days.getDay()),
+                        data: days.getMonth() + 1 + '月' + days.getDate() + '日',
+                        orderDate: new Date().getFullYear() + '-' + month + '-' + day
+                    }
+                    this.weeks.push(item);
+                }
+                this.today = this.weeks[0].name;
+                this.getList();
+            },
+            numberToWeek(val) {
+                switch (parseInt(val)) {
+                    case 1:
+                        return '星期一';
+                        break;
+                    case 2:
+                        return '星期二';
+                        break;
+                    case 3:
+                        return '星期三';
+                        break;
+                    case 4:
+                        return '星期四';
+                        break;
+                    case 5:
+                        return '星期五';
+                        break;
+                    case 6:
+                        return '星期六';
+                        break;
+                    case 0:
+                        return '星期天';
+                        break;
+                }
+            },
+            confirmAppoint() {
+                let that = this;
+                let param = {
+                    token: localStorage.token,
+                    stdId: that.dialog.StdId
+                };
+                let postdata = qs.stringify(param);
+                OderAddByVipUser(postdata).then(res => {
+                    let json = res;
+                    if (json.Code == 0) {
+                        that.alertInfo('已成功预约', 'success');
+                        that.openAlert = false;
+                        that.getList();
+                    } else {
+                        that.alertInfo(json.Memo + ',错误码：' + json.Code);
+                    }
+                })
+            },
+            closeAlertDialog() {
+                this.openAlert = false;
+            },
+            appointNow(row) {
+                this.dialog = row;
+                this.openAlert = true;
+            },
+            isFulled() {
+                let that = this;
+                that.$alert('当前课程已满，请选择其他课程或其他时间预约', '提示', {
+                    okLabel: '知道了'
+                }).then(() => {
+                    that.getList();
+                });
+            },
+            isAppointed(row) {
+                let that = this;
+                this.$confirm('是否取消前课程预约？', '提示', {
+                    type: 'warning'
+                }).then(({result}) => {
+                    if (result) {
+                        let param = {
+                            token: localStorage.token,
+                            orderId: row.OrderId,
+                        };
+                        let postdata = qs.stringify(param);
+                        OderCancelByVipUser(postdata).then(res => {
+                            let json = res;
+                            if (json.Code == 0) {
+                                that.alertInfo('当前课程已取消预约', 'success');
+                                that.getList();
+                            } else {
+                                that.alertInfo(json.Memo + ',错误码：' + json.Code);
+                            }
+                        })
+                    } else {
+                        this.alertInfo('点击了取消');
+                    }
+                });
+            },
+            isDisable(row) {
+                this.alertInfo('课程不可预约，请选择其他课程或其他时间预约', 'info');
+            },
+            getList() {
+                let that = this;
+                this.today = this.weeks[this.active].name;
+                let curDay = this.weeks[this.active].orderDate;
+                let param = {
+                    token: localStorage.token,
+                    orderDate: curDay,
+                    shopId: this.$route.query.shopId,
+                };
+                let postdata = qs.stringify(param);
+                CanOrderSchoolTimeTableListQuery(postdata).then(res => {
+                    let json = res;
+                    if (json.Code == 0) {
+                        that.list = json.Rs;
+                        that.num = 0;
+                        if (that.list) {
+                            // 计算剩余
+                            that.list.map(function (item) {
+                                item.remain = parseInt(item.OrderToplimit) - parseInt(item.OrderCount);
+                                that.num = that.num + item.remain
+                            })
+                        }
+                    } else {
+                        that.alertInfo(json.Memo + ',错误码：' + json.Code);
+                    }
+                })
+            },
+        },
+        beforeRouteEnter(to, from, next) {
+            next(vm => {
+                //因为当钩子执行前，组件实例还没被创建
+                // vm 就是当前组件的实例相当于上面的 this，所以在 next 方法里你就可以把 vm 当 this 来用了。
+                if (to.name == 'appoint') {
+                    // vm.getList();
+                    vm.getQueryNextWeek();
+                }
+            });
+        },
+        watch: {
+            'active'() {
+                this.getList();
+
+            }
+        },
+        components: {
+            bottomTab, alert
         }
-      });
-    },
-    // 计算距离11/8号还有集体那
-    calcHaveDays(sDate1) {
-      var date2 = new Date();
-      var date1 = new Date(Date.parse(sDate1.replace(/-/g, "/")));
-      var iDays = parseInt(Math.abs(date2.getTime() - date1.getTime()) / 1000 / 60 / 60 / 24) + 2;
-      return iDays;
-
-    },
-    // 获取未来7天的
-    getFurtherDays(HaveDays) {
-      let now = new Date();
-      let nowTime = now.getTime();
-      let oneDayTime = 24 * 60 * 60 * 1000;
-      let days = '';
-      let item = [];
-      let month = 0;
-      let day = 0;
-      this.weeks = [];
-      for (let i = 0; i < HaveDays; i++) {
-        days = new Date(nowTime + (i) * oneDayTime);//显示周日
-        month = days.getMonth() + 1;
-        day = days.getDate();
-        month = month < 10 ? '0' + month : month;
-        day = day < 10 ? '0' + day : day;
-        item = {
-          name: this.numberToWeek(days.getDay()),
-          data: days.getMonth() + 1 + '月' + days.getDate() + '日',
-          orderDate: new Date().getFullYear() + '-' + month + '-' + day
+    }
+</script>
+
+<style scoped>
+    .pages {
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+    }
+
+    /*mu-header*/
+    .mu-primary-color {
+        line-height: 60px;
+        height: 60px;
+        background: url("../static/images/comm/headerBg.png") top center no-repeat;
+        background-size: 100%;
+    }
+
+    /deep/ .mu-appbar-left {
+        padding-top: 15px;
+    }
+
+    /deep/ .material-icons {
+        color: #fff;
+    }
+
+    /deep/ .mu-appbar-title {
+        text-align: center;
+    }
+
+    /deep/ .mu-tabs {
+        /*display: flex;*/
+        /*width: 414px;*/
+        overflow-x: scroll;
+        overflow-y: hidden;
+        /*display:inline;*/
+        /*float: left;*/
+    }
+
+    /deep/ .mu-tab {
+        width: 85px;
+        min-width: 85px;
+        float: left;
+        height: 51px;
+        margin-right: 6px;
+    }
+
+    /*/deep/ .mu-tab:nth-child(5) {*/
+    /*    margin-right: 0px;*/
+    /*}*/
+
+    /deep/ .mu-tab-wrapper {
+        height: 51px;
+        background: #f4f4f4;
+        color: #363636;
+        box-shadow: 1px 0px 6px rgba(0, 0, 0, 0.16);
+        border-radius: 8px 8px 0px 0px;
+        font-size: 14px;
+    }
+
+    /deep/ .mu-tab-active .mu-tab-wrapper {
+        height: 56px;
+        border-radius: 8px 8px 0px 0px;
+        background: #ffffff;
+        box-shadow: 1px 0px 6px rgba(0, 0, 0, 0.16);
+        color: #000;
+    }
+
+    /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;
+        padding-bottom: 30px;
+    }
+
+    .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;
+    }
+
+    .cubes {
+        width: 12px;
+        height: 12px;
+        background: #f8847f;
+        float: left;
+    }
+
+    .tri {
+        width: 12px;
+        height: 12px;
+        background: url("../static/images/appoint/tri.png") top center no-repeat;
+        background-size: 100% 100%;
+        float: left;
+    }
+
+    .x {
+        width: 12px;
+        height: 12px;
+        background: url("../static/images/appoint/x.png") top center no-repeat;
+        background-size: 100% 100%;
+        float: left;
+    }
+
+
+    .yellowLi {
+        background: #FFFBED;
+    }
+
+    .redLi {
+        background: #FFF7F7;
+    }
+
+    .greenLi {
+        background: #F7FFF4;
+    }
+
+    .whiteLi {
+        background: #fff;
+    }
+
+    .list li .title {
+        /*width: 90px;*/
+        width: 27%;
+        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;
+        font-family: "PingFang SC";
+        font-weight: normal;
+        font-size: 18px;
+        margin-right: 2%;
+    }
+
+    .greenBtn {
+        border: 1px solid #37cb00;
+        color: #37cb00;
+    }
+
+    .redBtn {
+        border: 1px solid #F8847F;
+        color: #F8847F;
+    }
+
+    .yellowBtn {
+        border: 1px solid #FFB43C;
+        color: #fff;
+        background: #FFB43C;
+    }
+
+    .disableBtn {
+        border: 1px solid #C9C9C9;
+        color: #C9C9C9;
+    }
+
+    /deep/ .mu-tabs-center {
+        display: flex;
+        overflow-x: auto;
+        overflow-y: hidden;
+        white-space: nowrap;
+    }
+
+    /deep/ .mu-tabs-center::-webkit-scrollbar {
+        display: none;
+    }
+
+    /deep/ .mu-modal-inner {
+        width: 90%;
+        float: left;
+    }
+
+    /deep/ .mu-tab-link-highlight {
+        display: none !important;
+    }
+
+    li .title span.lessons {
+        width: auto;
+        padding: 1px 11px;
+        border-radius: 250px;
+        float: left;
+        text-align: center;
+        color: #000;
+        font-size: 14px;
+    }
+
+    /deep/ .mu-avatar {
+        position: fixed;
+        bottom: 9%;
+        float: left;
+        left: 1%;
+    }
+
+    .context {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 30%;
+        bottom: 0;
+        overflow-y: scroll;
+        padding-bottom: 50px;
+    }
+
+    .as {
+        position: fixed;
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        z-index: 222;
+        background: #F2F2F2;
+    }
+
+    /deep/ .mu-raised-button {
+        box-shadow: none;
+    }
+
+    /*响应式调整*/
+    @media only screen and (max-width: 320px) {
+        .list .dotContainer {
+            width: 20px;
+            padding-left: 5px;
         }
-        this.weeks.push(item);
-      }
-      this.today = this.weeks[0].name;
-      this.getList();
-    },
-    numberToWeek(val) {
-      switch (parseInt(val)) {
-        case 1:
-          return '星期一';
-          break;
-        case 2:
-          return '星期二';
-          break;
-        case 3:
-          return '星期三';
-          break;
-        case 4:
-          return '星期四';
-          break;
-        case 5:
-          return '星期五';
-          break;
-        case 6:
-          return '星期六';
-          break;
-        case 0:
-          return '星期天';
-          break;
-      }
-    },
-    confirmAppoint() {
-      let that = this;
-      let param = {
-        token: localStorage.token,
-        stdId: that.dialog.StdId
-      };
-      let postdata = qs.stringify(param);
-      OderAddByVipUser(postdata).then(res => {
-        let json = res;
-        if (json.Code == 0) {
-          that.alertInfo('已成功预约', 'success');
-          that.openAlert = false;
-          that.getList();
-        } else {
-          that.alertInfo(json.Memo + ',错误码：' + json.Code);
+
+        .list li .title {
+            width: 30%;
         }
-      })
-    },
-    closeAlertDialog() {
-      this.openAlert = false;
-    },
-    appointNow(row) {
-      this.dialog = row;
-      this.openAlert = true;
-    },
-    isFulled() {
-      let that = this;
-      that.$alert('当前课程已满，请选择其他课程或其他时间预约', '提示', {
-        okLabel: '知道了'
-      }).then(() => {
-        that.getList();
-      });
-    },
-    isAppointed(row) {
-      let that = this;
-      this.$confirm('是否取消前课程预约？', '提示', {
-        type: 'warning'
-      }).then(({result}) => {
-        if (result) {
-          let param = {
-            token: localStorage.token,
-            orderId: row.OrderId,
-          };
-          let postdata = qs.stringify(param);
-          OderCancelByVipUser(postdata).then(res => {
-            let json = res;
-            if (json.Code == 0) {
-              that.alertInfo('当前课程已取消预约', 'success');
-              that.getList();
-            } else {
-              that.alertInfo(json.Memo + ',错误码：' + json.Code);
-            }
-          })
-        } else {
-          this.alertInfo('点击了取消');
+
+        .list li .current {
+            width: 29%;
         }
-      });
-    },
-    isDisable(row) {
-      this.alertInfo('课程不可预约，请选择其他课程或其他时间预约', 'info');
-    },
-    getList() {
-      let that = this;
-      this.today = this.weeks[this.active].name;
-      let curDay = this.weeks[this.active].orderDate;
-      let param = {
-        token: localStorage.token,
-        orderDate: curDay,
-        shopId: this.$route.query.shopId,
-      };
-      let postdata = qs.stringify(param);
-      CanOrderSchoolTimeTableListQuery(postdata).then(res => {
-        let json = res;
-        if (json.Code == 0) {
-          that.list = json.Rs;
-          that.num = 0;
-          if (that.list) {
-            // 计算剩余
-            that.list.map(function (item) {
-              item.remain = parseInt(item.OrderToplimit) - parseInt(item.OrderCount);
-              that.num = that.num + item.remain
-            })
-          }
-        } else {
-          that.alertInfo(json.Memo + ',错误码：' + json.Code);
+
+        .context {
+            top: 35%;
         }
-      })
-    },
-  },
-  beforeRouteEnter(to, from, next) {
-    next(vm => {
-      //因为当钩子执行前，组件实例还没被创建
-      // vm 就是当前组件的实例相当于上面的 this，所以在 next 方法里你就可以把 vm 当 this 来用了。
-      if (to.name == 'appoint') {
-        // vm.getList();
-        vm.getQueryNextWeek();
-      }
-    });
-  },
-  watch: {
-    'active'() {
-      this.getList();
-
-    }
-  },
-  components: {
-    bottomTab, alert
-  }
-}
-</script>
+    }
+
+    @media (min-width: 321px) and (max-width: 344px) {
+        .list li .current {
+            width: 28%;
+        }
+
+        .context {
+            top: 35%;
+        }
+    }
+
+    @media (min-width: 345px) and (max-width: 360px) {
+        .list li .current {
+            width: 30%;
+        }
+
+        .context {
+            top: 34%;
+        }
+    }
+
+    @media (min-width: 361px) and (max-width: 375px) {
+        .list li .current {
+            width: 30%;
+        }
+
+        .context {
+            top: 34%;
+        }
+    }
+
+    @media (min-width: 376px) and (max-width: 396px) {
+        .list li .current {
+            width: 30%;
+        }
+
+        .context {
+            top: 34%;
+        }
+    }
+
+    @media (min-width: 397px) and (max-width: 414px) {
+        .list li .current {
+            width: 30%;
+        }
+
+        .context {
+            top: 35%;
+        }
+    }
+
+    @media (min-width: 415px) and (max-width: 480px) {
+        .list li .current {
+            width: 30%;
+        }
+
+        .context {
+            top: 36%;
+        }
+    }
+
+    @media (min-width: 481px) and (max-width: 640px) {
+        .context {
+            top: 36%;
+        }
+    }
+
 
-<style scoped>
-.pages {
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-}
-
-/*mu-header*/
-.mu-primary-color {
-  line-height: 60px;
-  height: 60px;
-  background: url("../static/images/comm/headerBg.png") top center no-repeat;
-  background-size: 100%;
-}
-
-/deep/ .mu-appbar-left {
-  padding-top: 15px;
-}
-
-/deep/ .material-icons {
-  color: #fff;
-}
-
-/deep/ .mu-appbar-title {
-  text-align: center;
-}
-
-/deep/ .mu-tabs {
-  /*display: flex;*/
-  /*width: 414px;*/
-  overflow-x: scroll;
-  overflow-y: hidden;
-  /*display:inline;*/
-  /*float: left;*/
-}
-
-/deep/ .mu-tab {
-  width: 85px;
-  min-width: 85px;
-  float: left;
-  height: 51px;
-  margin-right: 6px;
-}
-
-/*/deep/ .mu-tab:nth-child(5) {*/
-/*    margin-right: 0px;*/
-/*}*/
-
-/deep/ .mu-tab-wrapper {
-  height: 51px;
-  background: #f4f4f4;
-  color: #363636;
-  box-shadow: 1px 0px 6px rgba(0, 0, 0, 0.16);
-  border-radius: 8px 8px 0px 0px;
-  font-size: 14px;
-}
-
-/deep/ .mu-tab-active .mu-tab-wrapper {
-  height: 56px;
-  border-radius: 8px 8px 0px 0px;
-  background: #ffffff;
-  box-shadow: 1px 0px 6px rgba(0, 0, 0, 0.16);
-  color: #000;
-}
-
-/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;
-  padding-bottom: 30px;
-}
-
-.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;
-}
-
-.cubes {
-  width: 12px;
-  height: 12px;
-  background: #f8847f;
-  float: left;
-}
-
-.tri {
-  width: 12px;
-  height: 12px;
-  background: url("../static/images/appoint/tri.png") top center no-repeat;
-  background-size: 100% 100%;
-  float: left;
-}
-
-.x {
-  width: 12px;
-  height: 12px;
-  background: url("../static/images/appoint/x.png") top center no-repeat;
-  background-size: 100% 100%;
-  float: left;
-}
-
-
-.yellowLi {
-  background: #FFFBED;
-}
-
-.redLi {
-  background: #FFF7F7;
-}
-
-.greenLi {
-  background: #F7FFF4;
-}
-
-.whiteLi {
-  background: #fff;
-}
-
-.list li .title {
-  /*width: 90px;*/
-  width: 27%;
-  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;
-  font-family: "PingFang SC";
-  font-weight: normal;
-  font-size: 18px;
-  margin-right: 2%;
-}
-
-.greenBtn {
-  border: 1px solid #37cb00;
-  color: #37cb00;
-}
-
-.redBtn {
-  border: 1px solid #F8847F;
-  color: #F8847F;
-}
-
-.yellowBtn {
-  border: 1px solid #FFB43C;
-  color: #fff;
-  background: #FFB43C;
-}
-
-.disableBtn {
-  border: 1px solid #C9C9C9;
-  color: #C9C9C9;
-}
-
-/deep/ .mu-tabs-center {
-  display: flex;
-  overflow-x: auto;
-  overflow-y: hidden;
-  white-space: nowrap;
-}
-
-/deep/ .mu-tabs-center::-webkit-scrollbar {
-  display: none;
-}
-
-/deep/ .mu-modal-inner {
-  width: 90%;
-  float: left;
-}
-
-/deep/ .mu-tab-link-highlight {
-  display: none !important;
-}
-
-li .title span.lessons {
-  width: auto;
-  padding: 1px 11px;
-  border-radius: 250px;
-  float: left;
-  text-align: center;
-  color: #000;
-  font-size: 14px;
-}
-
-/deep/ .mu-avatar {
-  position: fixed;
-  bottom: 9%;
-  float: left;
-  left: 1%;
-}
-
-.context {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 30%;
-  bottom: 0;
-  overflow-y: scroll;
-  padding-bottom: 50px;
-}
-
-.as {
-  position: fixed;
-  width: 100%;
-  overflow: hidden;
-  display: block;
-  margin: 0 auto;
-  z-index: 222;
-  background: #F2F2F2;
-}
-
-/deep/ .mu-raised-button {
-  box-shadow: none;
-}
-
-@media only screen and (max-width: 640px) {
-
-}
-
-@media only screen and (max-width: 480px) {
-
-}
-
-@media only screen and (max-width: 375px) {
-  .context {
-    top: 34%;
-  }
-}
-
-@media only screen and (max-width: 414px) {
-  .context {
-    top: 38%;
-  }
-}
-@media only screen and (max-width: 414px) and (device-height: 739px) {
-  .context {
-    top: 36%;
-    /*background: red;*/
-  }
-}
-
-@media only screen and (max-width: 414px) and (device-height: 889px) {
-  .context {
-    top: 30%;
-    /*background: red;*/
-  }
-}@media only screen and (max-width: 414px) and (device-height: 896px) {
-  .context {
-    top: 33%;
-    /*background: red;*/
-  }
-}
-
-@media only screen and (max-width: 375px) and (device-height: 812px) {
-  .context {
-    top: 35%;
-    /*background: red;*/
-  }
-}
-
-@media only screen and (max-width: 360px) {
-  .list li .current {
-    width: 32%;
-  }
-
-  .context {
-    top: 34%;
-  }
-}
-
-@media only screen and (max-width: 320px) {
-  .list .dotContainer {
-    width: 20px;
-    padding-left: 5px;
-  }
-
-  .list li .title {
-    width: 30%;
-  }
-
-  .list li .current {
-    width: 32%;
-  }
-
-  .context {
-    top: 41%;
-  }
-}
-
-@media only screen and (min-width: 641px) {
-  .context {
-    top: 21%;
-  }
-}
 </style>

app/src/page/mainpage.vue

@@ -274,7 +274,7 @@ export default {
   text-align: left;
   color: #3b3b3b;
   margin: 0;
-  margin-top: 6px;
+  margin-top: 3px;
   margin-bottom: 0px;
 }
 .list .rt h4 {
@@ -326,37 +326,52 @@ export default {
   color: #F8847F;
 }
 
-@media only screen and (max-width: 640px) {
-
-}
-
-@media only screen and (max-width: 480px) {
-
-}
-
-@media only screen and (max-width: 375px) {
-  .list .rt {
-    width: 61%;
-  }
-}
-
-@media only screen and (max-width: 360px) {
-  .list .rt {
-    width: 57%;
-  }
-}
+/*响应式调整*/
+    @media only screen and (max-width: 320px) {
+        .list .rt {
+            width: 50%;
+        }
 
-@media only screen and (max-width: 320px) {
-  .list .rt {
-    width: 52%;
-  }
+        .list .rt em {
+            font-size: 14px;
+        }
+    }
+    @media(min-width:321px) and (max-width: 344px) {
+        .list .rt {
+            width: 50%;
+        }
 
-  .list .rt em {
-    font-size: 14px;
-  }
-}
+        .list .rt em {
+            font-size: 14px;
+        }
+    }
+    @media(min-width:345px) and (max-width: 360px) {
+        .list .rt {
+            width: 57%;
+        }
+    }
+    @media(min-width:361px) and (max-width: 375px) {
+        .list .rt {
+            width: 61%;
+        }
+    }
+    @media (min-width:376px) and (max-width: 396px) {
+        .list .rt {
+            width: 61%;
+        }
+    }
+    @media (min-width:397px) and (max-width: 414px) {
+        .list .rt {
+            width: 61%;
+        }
+    }
+    @media(min-width:415px) and (max-width: 480px) {
+        .list .rt {
+            width: 61%;
+        }
+    }
+    @media (min-width:481px) and (max-width: 640px) {
 
-@media only screen and (min-width: 641px) {
+    }
 
-}
 </style>

tv/README.md

@@ -52,91 +52,6 @@ http://192.168.0.162:9000/Hello
   target: 'http://192.168.0.162:9000/',
 // target: 'http://192.168.0.243:9000/',
 
-=================================
-2020/12/10 需求修改
-1.心跳动画跟着运动强度来 √  
-2.去掉" ck值" √  
-3.注意Ck和Cal的大小写  √  
-4.团课排名的Ck没有按照降序排列  √  
-6.运动强度最大显示是100  √  
-7.颜色色块太亮了 ---------------绿色 #059F00  黄色#A6B700 √  
-8.等待页面右侧要该成果8个人，去掉边框 √  
-9.排名页面根据人数多少显示时间   √  
-12.图片上传服务器地址更换  √  
-14.app课程表查看，在router加刷新  √  
-15.静态心率设置放开 √   
-17.pk的圆环加粗 √  
-11.跨店会员使用穿梭框管理  √  
-18.添加上课成员的时候带入birthday √ 
-16.先选教练后开始上课   √ 
-
-5.生日的时候学生有个生日小帽子     IsBirthday 1 过生日 0 不过生日 √ 
-10.新学员上课时有个倒数6秒的欢迎页面  -欢迎入伙  √   
-20.跨店用户管理，加商家列表，给用户列表传入0做结果集的筛选  √ 
-22.404 给微信 X
-24.上课准备,上课教练改select √ 
-21.无感知更新wgt文件 （刷新后重进，上传被限制文件大小 todo *上传路径未更换真实路径√ 
-
-
-26.PC图片上传限制容量取消 √ 
-27.PC课后详情CK有小数，卡路里取整数 √
-28.团课改色 √
-
-
-https://developer.qiniu.com/kodo/sdk/1283/javascript
-https://segmentfault.com/a/1190000021281307
-
-12/15
-3. 活动强度的黄色，改色√
-4. 排名跳转√
-6. 彩蛋显示30S√
-10. PK课显示教练√
-29.rank界面无数据的时候停留不走√
-========================
-12/16
-7. 测试在线升级√
-24.管理端预约查询，没有按照时间范围搜索√  
-28.空课不允许管理端提交√ 
-25.PC端兼容小pad√ 
-26.PK红色的圈太粗糙√
-27.pk4人的时候充分利用布局√
-30.tv流程写一下√
-5. 小pad样式兼容√
-31.3队PK的样式问题√
-32.上课准备弹窗禁止连点√
-8. 管理端图片裁切√
-29.PC图片上传进行压缩√
-
-========================
-12/17
-
-1. 月、周卡路里总计火焰字体√ 
-31.TV本地字典，针对不同的EQSN给出本店的转发服务器ip地址(定一下字段名的接口)√ *没更新
-getServeIpAddress
-    parame{
-        eqsn:'30:9C:23:0C:8B:1E'//每个电视的eqsn
-    }
-    Responses{
-        IpAdress: 'http://192.168.0.71:8080/';//从店里的转发服务那里获得数据源
-    }
-
-
-
-
-
-
-=================================
-
-
-2. 私有心率带角标
-9. 胜率显示从后台取胜率数据
-23.彩蛋和新学生接口可以合并 todo  
-29.首页界面和内页都给课程增加关课按钮
-3.PC端网络不好无法退出
-4.课程管理每次打开加入学生，没清理穿梭框
-
-* rem重构小飞龙
-
 
 
 // 上课中学生信息

tv/src/Mock/index.js

@@ -316,7 +316,7 @@ let getClassStat = function (ClassOn, dp) {
     };
 };
 
-let t = 1;//0 is on 1 is off
+let t = 0;//0 is on 1 is off
 if (t == 1) {
     // 列表测试
     Mock.mock('/api/testTable', 'post', testTable());

tv/src/views/Index.vue

@@ -100,7 +100,7 @@
                 } else {
                     console.log('mui is not ready');
                     // 调试时候关闭
-                    // this.getServeIpAddress(localStorage.eqSn);
+                    this.getServeIpAddress(localStorage.eqSn);
                     // plusReady();
                     document.addEventListener('plusready', plusReady, false);
                 }
@@ -162,11 +162,15 @@
             // 获取转发端口地址
             getServeIpAddress(eqsn) {
                 const that = this;
-                let url = 'http://cal.beswell.com:85/v1/Sensors/GetShopConfigParam';
-                // 测试 todo
-                // url = "http://192.168.0.3:19096/v1/Sensors/GetShopConfigParam";
+                let url = '';
+                // 测试使用0.3心率系统
+                if (eqsn == 'a1f2d679c1624d3a' || eqsn == '30:9C:23:0C:8B:1E') {
+                    url = "http://192.168.0.3:19096/v1/Sensors/GetShopConfigParam";
+                } else {
+                    url = 'http://cal.beswell.com:85/v1/Sensors/GetShopConfigParam'
+                }
                 let param = {
-                    eqSn : eqsn
+                    eqSn: eqsn
                 };
                 let postdata = qs.stringify(param);
                 axios.post(url, postdata).then(function (data) {

tv/需求修改和debug.md

@@ -0,0 +1,90 @@
+=================================
+2020/12/10 需求修改
+1.心跳动画跟着运动强度来 √  
+2.去掉" ck值" √  
+3.注意Ck和Cal的大小写  √  
+4.团课排名的Ck没有按照降序排列  √  
+6.运动强度最大显示是100  √  
+7.颜色色块太亮了 ---------------绿色 #059F00  黄色#A6B700 √  
+8.等待页面右侧要该成果8个人，去掉边框 √  
+9.排名页面根据人数多少显示时间   √  
+12.图片上传服务器地址更换  √  
+14.app课程表查看，在router加刷新  √  
+15.静态心率设置放开 √   
+17.pk的圆环加粗 √  
+11.跨店会员使用穿梭框管理  √  
+18.添加上课成员的时候带入birthday √ 
+16.先选教练后开始上课   √ 
+
+5.生日的时候学生有个生日小帽子     IsBirthday 1 过生日 0 不过生日 √ 
+10.新学员上课时有个倒数6秒的欢迎页面  -欢迎入伙  √   
+20.跨店用户管理，加商家列表，给用户列表传入0做结果集的筛选  √ 
+22.404 给微信 X
+24.上课准备,上课教练改select √ 
+21.无感知更新wgt文件 （刷新后重进，上传被限制文件大小 todo *上传路径未更换真实路径√ 
+
+
+26.PC图片上传限制容量取消 √ 
+27.PC课后详情CK有小数，卡路里取整数 √
+28.团课改色 √
+
+
+https://developer.qiniu.com/kodo/sdk/1283/javascript
+https://segmentfault.com/a/1190000021281307
+
+12/15
+3. 活动强度的黄色，改色√
+4. 排名跳转√
+6. 彩蛋显示30S√
+10. PK课显示教练√
+29.rank界面无数据的时候停留不走√
+========================
+12/16
+7. 测试在线升级√
+24.管理端预约查询，没有按照时间范围搜索√    
+28.空课不允许管理端提交√   
+25.PC端兼容小pad√   
+26.PK红色的圈太粗糙√  
+27.pk4人的时候充分利用布局√  
+30.tv流程写一下√  
+5. 小pad样式兼容√  
+31.3队PK的样式问题√  
+32.上课准备弹窗禁止连点√  
+8. 管理端图片裁切√  
+29.PC图片上传进行压缩√  
+
+========================
+12/17
+
+1. 月、周卡路里总计火焰字体√ 
+31.TV本地字典，针对不同的EQSN给出本店的转发服务器ip地址(定一下字段名的接口)√ *没更新
+getServeIpAddress
+    parame{
+        eqsn:'30:9C:23:0C:8B:1E'//每个电视的eqsn
+    }
+    Responses{
+        IpAdress: 'http://192.168.0.71:8080/';//从店里的转发服务那里获得数据源
+    }
+
+
+
+
+
+
+=================================
+
+
+2. 私有心率带角标  
+9. 胜率显示从后台取胜率数据  
+23.彩蛋和新学生接口可以合并 todo    
+29.首页界面和内页都给课程增加关课按钮  
+3.PC端网络不好无法退出  
+4.课程管理每次打开加入学生，没清理穿梭框  
+
+* rem重构小飞龙  
+* 先写mock测试再写功能
+
+PC端 左侧拉不动
+PC端 适配窄屏幕
+
+