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

app/package.json

@@ -13,6 +13,7 @@
     "core-js": "^3.6.4",
     "muse-ui": "^3.0.2",
     "muse-ui-loading": "^0.2.0",
+    "muse-ui-message": "^0.2.1",
     "muse-ui-toast": "^0.3.0",
     "vue": "^2.6.11",
     "vue-router": "^3.1.5"

app/src/Mock/index.js

@@ -50,14 +50,15 @@ let testTable = function () {
             "tel": "@integer(15253135600, 15253135699)",
             "shop": "@region",
             "create": "@datetime",
-            "expTime": "@datetime",
+            "expTime": "@date",
             "valid": "@datetime",
             "Confirmed": "@integer(36844, 368449)",
             "Deaths": "@integer(1099, 10993)",
             "kick": "@integer(199, 993)",
             "Recovered": "@integer(1986, 9999)",
-            // "Status": "@integer(0)",
             "Status": "0",
+            "level": "0",
+            // "Status": "@integer(1, 2)",
             "color": "@hex",
             "memo": "@paragraph(1, 1)",
             "dialogValue": "@range(1, 3)",

app/src/components/bottomTab.vue

@@ -16,7 +16,7 @@
                 nowTab: this.curTab,
                 tabs: [
                     {name: '预约课程', class: '/', src: ' ', tabindex: 1},
-                    {name: '预约记录', class: 'appoint', src: ' ', tabindex: 2},
+                    {name: '预约记录', class: 'record', src: ' ', tabindex: 2},
                     {name: '我的', class: 'mine', src: ' ', tabindex: 3},
                     //laptop
                 ]

app/src/main.js

@@ -9,7 +9,8 @@ import Toast from 'muse-ui-toast';
 import Loading from 'muse-ui-loading';
 
 
-
+import Message from 'muse-ui-message';
+Vue.use(Message);
 
 Vue.use(MuseUI);
 Vue.locale = () => {

app/src/page/appoint.vue

@@ -1,45 +1,57 @@
 <template>
     <div>
         <img src="../static/images/main/banner.png" height="121" width="414"/>
-            <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="context">
+        <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="context">
                 <span class="sum">
                     今日预约名额剩余
                     <em class="green" v-if="num > 0">{{num}}</em>
                     <em class="red" v-else>{{num}}</em>
                     人
                 </span>
-                <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" 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>{{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>
+            <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" v-if="l.Status==0"></i>
+                        <i class="cubes" v-if="l.Status==1"></i>
+                        <i class="tri" v-if="l.Status==2"></i>
+                        <i class="x" v-if="l.Status==3"></i>
+                    </div>
+                    <div class="title">
+                        <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" @click="isDisable">不可约</mu-button>
+                </li>
+            </ul>
+        </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.name}} ，时间：{{dialog.timeLong}}
+                    <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>
     </div>
 </template>
 
@@ -61,24 +73,85 @@
                 thisTab: '预约课程',
                 active: 0,
                 sum: 0,
+                openAlert: false,
                 list: [],
+                dialog: {
+                    id: '',
+                    name: '',
+                    timeLong: '',
+                },
             }
         },
         mounted() {
             this.getList();
         },
         methods: {
+            confirmAppoint() {
+                let that = this;
+                let param = {
+                    token: localStorage.token,
+                    id: that.dialog.id
+                };
+                let postdata = qs.stringify(param);
+                testSelect(postdata).then(res => {
+                    let json = res;
+                    if (json.Code == 0) {
+                        that.Toast('已成功预约', 'success');
+                        that.openAlert = false;
+                        that.getList();
+                    } else {
+                        that.Toast(json.Memo + ',错误码：' + json.Code);
+                    }
+                })
+
+            },
+            closeAlertDialog() {
+                this.openAlert = false;
+            },
             appointNow(row) {
-                console.log(row);
-            }, isFulled() {
-                console.log(123);
-            }, isAppointed(row) {
-                console.log(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,
+                        };
+                        let postdata = qs.stringify(param);
+                        testTable(postdata).then(res => {
+                            let json = res;
+                            if (json.Code == 0) {
+                                that.Toast('当前课程已取消预约','success');
+                                that.getList();
+                            } else {
+                                that.Toast(json.Memo + ',错误码：' + json.Code);
+                            }
+                        })
+                    } else {
+                        this.$toast.message('点击了取消');
+                    }
+                });
+            },
+            isDisable(row) {
+                this.Toast('课程不可预约，请选择其他课程或其他时间预约','info');
             },
             getList() {
                 let that = this;
                 let param = {
                     token: localStorage.token,
+                    active:this.active
                 };
                 let postdata = qs.stringify(param);
                 testTable(postdata).then(res => {
@@ -94,6 +167,11 @@
                 })
             },
         },
+        watch: {
+            'active' () {
+                this.getList();
+            }
+        },
         components: {
             bottomTab
         }
@@ -203,6 +281,30 @@
         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;
     }
@@ -218,11 +320,13 @@
     .whiteLi {
         background: #fff;
     }
+
     .list li .title {
         width: 90px;
         height: 60px;
         float: left;
     }
+
     li .title h5 {
         width: 100%;
         overflow: hidden;
@@ -233,6 +337,7 @@
         text-align: left;
         color: #3b3b3b;
     }
+
     li .title span {
         width: 100%;
         overflow: hidden;
@@ -243,11 +348,13 @@
         text-align: left;
         color: #909090;
     }
+
     .list li .current {
         width: 120px;
         height: 60px;
         float: left;
     }
+
     li .current h5 {
         width: 100%;
         overflow: hidden;
@@ -259,12 +366,14 @@
         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;
@@ -272,19 +381,43 @@
         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>
+
+    .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-modal-inner {
+        width: 90%;
+        float: left;
+    }
+
+</style>

app/src/page/index.vue

@@ -29,4 +29,7 @@
     {
         opacity: 0;
     }
+    .mu-modal-icon {
+        float: left;
+    }
 </style>

app/src/page/mine.vue

@@ -0,0 +1,235 @@
+<template>
+    <div class="page">
+        <img src="../static/images/main/banner.png" height="121" width="414"/>
+        <div class="context">
+              <span class="num">
+                会员卡信息
+            </span>
+            <div class="user">
+                <img src="../static/images/mine/User.png" height="53" width="53"/>
+                <span>{{user.name}}</span>
+                <p @click="change">修改</p>
+                <em>{{user.userCode}}</em>
+            </div>
+            <div class="value">
+                <div class="vTitle year" v-if="user.level == 0"><i></i>年会员</div>
+                <div class="vTitle price" v-if="user.level == 1"><i></i>充值会员</div>
+                <div class="vNum">
+                    总计 {{user.Class}} 课时
+                    <em>（有效期至2020.12.09）</em>
+                </div>
+                <mu-flex class="demo-linear-progress">
+                    <mu-linear-progress mode="determinate" :value="30"></mu-linear-progress>
+                </mu-flex>
+                <div class="limit">
+                    <em>剩余 {{user.remain}} 课时</em>
+                    <span>完成 {{user.sum}} 课时</span>
+                </div>
+            </div>
+            <div class="dataSum">
+                <div class="row">
+                    <em>卡路里（月度）</em>
+                    <s></s>
+                    <span>{{user.Cal}}</span>
+                </div>
+                <div class="row">
+                    <em>总卡路里</em>
+                    <s></s>
+                    <span>{{user.sumCal}}</span>
+                </div>
+            </div>
+            <div class="dataSum">
+                <div class="row">
+                    <em>CK（月度）</em>
+                    <s></s>
+                    <span>{{user.ck}}</span>
+                </div>
+                <div class="row">
+                    <em>总CK</em>
+                    <s></s>
+                    <span>{{user.sumCk}}</span>
+                </div>
+            </div>
+
+        </div>
+        <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'
+
+    export default {
+        data() {
+            return {
+                num: 0,
+                thisTab: '我的',
+                active: 0,
+                sum: 0,
+                openAlert: false,
+                list: [],
+                dialog: {
+                    id: '',
+                    name: '',
+                    timeLong: '',
+                },
+                user: {
+                    name: '',
+                    Class: '',
+                    userCode: '',
+                    remain: 0,
+                    sum: 0,
+                    Cal: 0,
+                    sumCal: 0,
+                    ck: 0,
+                    sumCk: 0,
+                }
+            }
+        },
+        mounted() {
+            this.getInfo();
+        },
+        methods: {
+            getInfo() {
+                let that = this;
+                let param = {
+                    token: localStorage.token,
+                    active: this.active
+                };
+                let postdata = qs.stringify(param);
+                testTable(postdata).then(res => {
+                    let json = res;
+                    if (json.Code == 0) {
+                        that.user = json.Rs[0];
+                    } else {
+                        that.$message.error(json.Memo);
+                    }
+                })
+            },
+            change() {
+
+            }
+        },
+        components: {
+            bottomTab
+        }
+    }
+</script>
+
+<style scoped>
+    .page {
+        background: #F2F2F2;
+    }
+
+    .num {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        font-family: "PingFang SC";
+        font-weight: 300;
+        font-size: 14px;
+        text-align: center;
+        color: #909090;
+        padding: 13px 0;
+    }
+
+    .user {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        height: 58px;
+        background: #fff;
+        padding: 17px 2%;
+        margin-bottom: 10px;
+    }
+
+    .user img {
+        width: 26.29px;
+        height: 26.29px;
+        float: left;
+        margin-right: 11px;
+    }
+
+    .user span {
+        font-family: "PingFang SC";
+        font-weight: 500;
+        font-size: 18px;
+        text-align: left;
+        color: #3b3b3b;
+    }
+
+    .user em {
+        font-family: "PingFang SC";
+        font-weight: normal;
+        font-size: 18px;
+        text-align: left;
+        color: #3b3b3b;
+        float: right;
+    }
+
+    .user p {
+        font-family: "PingFang SC";
+        font-weight: normal;
+        font-size: 14px;
+        text-align: left;
+        color: #ffb43c;
+        float: right;
+        padding: 0;
+        margin: 0;
+        margin-left: 3px;
+        line-height: 26px;
+    }
+
+    .value {
+        width: 100%;
+        height: 131px;
+        background: #fff;
+        padding: 13px 0;
+    }
+
+    .value .vTitle {
+        width: 100%;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        text-align: center;
+
+        font-family: "PingFang SC";
+        font-weight: 300;
+        font-size: 15px;
+    }
+
+    .vTitle i {
+        width: 8px;
+        height: 8px;
+        display: inline-block;
+        border-radius: 250px;
+        margin-right: 3px;
+    }
+
+    .vTitle.year {
+        color: #E75296;
+    }
+
+    .vTitle.year i {
+        background: #e75296;
+    }
+
+    .vTitle.price {
+        color: #FFB43C;
+    }
+
+    .vTitle.price i {
+        background: #FFB43C;
+    }
+</style>

app/src/page/record.vue

@@ -1,706 +1,307 @@
 <template>
-    <div id="pages">
-        <mu-appbar style="width: 100%;" color="primary" :title="$t('Detection record')">
-            <router-link to="/" slot="left">
-                <mu-icon value="arrow_back"></mu-icon>
-            </router-link>
-            <mu-button flat color="primary" slot="right" @click="showPanel">{{btnText}}</mu-button>
-        </mu-appbar>
-        <mu-bottom-sheet :open.sync="popupVisible">
-            <div class="modal-content">
-                <div class="modal-body">
-                    <div class="location">
-                        <span>{{$t("query criteria")}}</span>
-                        <cityPicker></cityPicker>
-                        <select name="" id="unite" v-model="unite" @change="ChangeGetRegionlistByUnitId()">
-                            <option :value="uniteOption.Id" v-for="uniteOption in uniteOptions" :key="uniteOption.Id">
-                                {{uniteOption.Name}}
-                            </option>
-                        </select>
-                        <select name="" id="area" v-model="area" @change="ChangegetDetectorByRegionId()">
-                            <option :value="areaOption.Id" v-for="areaOption in areaOptions" :key="areaOption.Id">
-                                {{areaOption.Name}}
-                            </option>
-                        </select>
-                        <select name="" id="detector" v-model="detector">
-                            <option :value="detectorOption.Id" v-for="detectorOption in detectorOptions"
-                                    :key="detectorOption.Id">{{detectorOption.Name}}
-                            </option>
-                        </select>
-                        <input type="text" placeholder="MAC" v-model="MAC" id="macInput">
-                        <div class="timePickerPart">
-                            <span @click="changeTime(1)">{{bt}}</span> <em>{{$t("to")}}</em>
-                            <span @click="changeTime(2)">{{et}}</span>
-                        </div>
-                        <div v-show="open">
-                            <mu-flex justify-content="between" align-items="end" wrap="wrap">
-                                <mu-paper :z-depth="1" class="demo-date-picker">
-                                    <mu-date-picker :date.sync="date" color="#FFA200" :date-time-format="enDateFormat"
-                                                    @change="confirmDay"></mu-date-picker>
-                                </mu-paper>
-                            </mu-flex>
-                        </div>
+    <div class="page">
+        <img src="../static/images/main/banner.png" height="121" width="414"/>
+        <div class="context">
+            <span class="num">
+                记录共 {{num}} 条
+            </span>
+            <mu-tabs :value.sync="active" color="#F2F2F2" indicator-color="#E75296" center>
+                <mu-tab>已预约</mu-tab>
+                <mu-tab>预约记录</mu-tab>
+                <mu-tab>消费记录</mu-tab>
+            </mu-tabs>
+            <div class="whiteCube"></div>
+            <ul class="list">
+                <li v-for="l in list">
+                    <div class="lt">
+                        <h5>{{l.expTime}}</h5>
+                        <span>{{l.timeLong}}</span>
                     </div>
-                </div>
-                <div class="modalBottom">
-                    <div class="reset" @click="resetModal">
-                        {{$t("Reset")}}
+                    <div class="md">
+                        <em>
+                            {{l.name}}
+                        </em>
+                        <span class="green" v-if="l.Status == 0">
+                            预约成功
+                        </span>
+                        <span class="red" v-if="l.Status == 1">
+                            预约失败
+                        </span>
                     </div>
-                    <div class="pullUp" @click="searchModal">
-                        {{$t("query")}}
+                    <div class="rt">
+                        <div class="cancleBtn" v-if="l.Status == 0" @click="cancleAppoint(l)">取消</div>
+                        <span v-if="l.Status == 1" class="isFinish">
+                          已完成
+                        </span>
+                        <span class="red" v-if="l.Status == 2" >
+                            已取消
+                        </span>
+                        <em v-if="l.Status == 3">
+                            - {{l.Status}}课时
+                        </em>
                     </div>
-                </div>
-            </div>
-        </mu-bottom-sheet>
-        <div class="container">
-            <div class="row">
-                <mu-tabs :value.sync="active" inverse color="warning" full-width>
-                    <mu-tab>{{$t("wireless device")}}</mu-tab>
-                    <mu-tab>{{$t("phone signal")}}</mu-tab>
-                </mu-tabs>
-                <ul class="deteUl" v-if="active == 0"
-
-                >
-                    <li v-if="!lists.length.length">
-                        <h4>{{$t("no use data")}}</h4>
-                    </li>
-                    <li v-for="list in lists"
-                        v-if="lists"
-                    >
-                        <div class="rowTop"><h5>{{list.Name}}</h5>
-                            <span v-if="list.DangerLevel == -1" class="green">{{$t("other")}}</span>
-                            <span v-if="list.DangerLevel == 0" class="green">{{$t("white")}}</span>
-                            <span v-if="list.DangerLevel == 2" class="yellow">{{$t("deal")}}</span>
-                            <span v-if="list.DangerLevel == 3" class="red">{{$t("warning")}}</span>
-                            <span v-if="list.DangerLevel == 4" class="red">{{$t("danger")}}</span>
-                        </div>
-                        <div class="rowDetail">
-                            <span>{{list.CreateTime | timeFileter}}</span>
-                            <s>{{list.Mac}}</s>
-                        </div>
-                        <div class="rowBottom">
-                            {{list.Memo}}
-                        </div>
-                    </li>
-                    <s class="tips" v-if="lists"> {{$t("total")}} {{lists.length}} {{$t("item")}} {{$t("Record")}}</s>
-                    <s class="tips" v-if="lists.length > 100">  {{$t("Please go to the webpage for more records")}}</s>
-                </ul>
-                <ul class="phoneUl" v-if="active == 1">
-                    <li v-if="!phones.length">
-                        <h4>{{$t("no use data")}}</h4>
-                    </li>
-                    <li v-for="phone in phones" v-if="phones">
-                        <div class="peTop">
-                            {{phone.DetectorName}} <span>{{phone.RegionName}}</span>
-                        </div>
-                        <div class="peMemo">
-                            {{phone.Signalstr == ''?$t('No mobile signal detected'):phone.Signalstr}}
-                        </div>
-                    </li>
-                    <s class="tips" v-if="phones"> {{$t("total")}}{{phones.length}}{{$t("item")}} {{$t("Record")}}</s>
-                    <s class="tips" v-if="phones.length > 100">  {{$t("Please go to the webpage for more records")}}</s>
-                </ul>
-            </div>
+                </li>
+            </ul>
         </div>
+        <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'
-    import cityPicker from '../components/cityPicker'
-
-    const enDateFormat = {
-        formatDisplay (date) {
-            return `${dayList[date.getDay()]}, ${monthList[date.getMonth()]} ${date.getDate()}`;
-        },
-        formatMonth (date) {
-            return `${monthLongList[date.getMonth()]} ${date.getFullYear()}`;
-        },
-        getWeekDayArray (firstDayOfWeek) {
-            let beforeArray = [];
-            let afterArray = [];
-            for (let i = 0; i < dayAbbreviation.length; i++) {
-                if (i < firstDayOfWeek) {
-                    afterArray.push(dayAbbreviation[i]);
-                } else {
-                    beforeArray.push(dayAbbreviation[i]);
-                }
-            }
-            return beforeArray.concat(afterArray);
-        },
-        getMonthList () {
-            return monthList;
-        }
-    };
 
     export default {
         data() {
             return {
-                enDateFormat,
-                selected: "1",
-                popupVisible: false,//false true
-                unite: '',
-                open: false,
-                area: '',
-                detector: '',
-                MAC: '',
-                selectTime: 0,
+                num: 0,
+                thisTab: '预约记录',
                 active: 0,
-                curIndex: 1,
-                curIndex2: 1,
-                loading: false,
-                pickerBtString: globaltime2String(globalBt2()[0]),
-                pickerBt: globalBt2()[0],
-                pickerEtString: globaltime2String(globalBt2()[1]),
-                pickerEt: globalBt2()[1],
-                uniteOptions: [],
-                areaOptions: [],
-                detectorOptions: [],
-                lists: [],
-                phones: [],
-                bt: globaltime2StringNoMin(new Date() - 3 * 24 * 3600 * 1000),
-                et: globaltime2StringNoMin(new Date()),
-                date: new Date(),
-                btnText: this.$t("search"),
+                sum: 0,
+                openAlert: false,
+                list: [],
+                dialog: {
+                    id: '',
+                    name: '',
+                    timeLong: '',
+                },
             }
         },
         mounted() {
-            // 省市区修改后查企业
-            this.citySearchUnite();
-            this.readList();
-        },
-        filters: {
-            timeFileter: function (time) {
-                return globalfmtDate(time, 10)
-            },
+            this.getList();
         },
         methods: {
-            changeTime(val) {
-                this.open = true;
-                let curVal = val == 1 ? new Date(this.bt) : new Date(this.et);
-                this.selectTime = val;
-                this.date = curVal;
-            },
-            confirmDay(date) {
-                if (this.selectTime == 1) {
-                    this.bt = globaltime2StringNoMin(date);
-                } else {
-                    this.et = globaltime2StringNoMin(date);
-                }
-                this.open = false;
-            },
-            // 重置
-            resetModal() {
-                this.MAC = '';
-                this.ChangeGetRegionlistByUnitId();
-                this.ChangegetDetectorByRegionId();
-                this.bt = globaltime2StringNoMin(new Date() - 3 * 24 * 3600 * 1000);
-                this.et = globaltime2StringNoMin(new Date());
-            },
-            showPanel() {
-                this.popupVisible = true;
-                this.btnText = this.$t("close");
-            },
-            whenClose(){
-                this.popupVisible = false;
-                this.btnText = this.$t("search");
-            },
-            // 查询
-            searchModal() {
+            cancleAppoint(row){
                 let that = this;
-                this.popupVisible = false;
-                if (this.selected == 1) {
-                    that.readList();
-                } else {
-                    that.readPhone();
-                }
-                this.Toast(that.$t("Query already"), 'success');
-            },
-            citySearchUnite() {
-                const that = this;
-                let url = headapi + 'v1/Auth/GetComSelect';
-                let param = {
-                    token: localStorage.token,
-                    prov: localStorage.defaultProv,
-                    city: localStorage.defaultCity,
-                    area: localStorage.defaultArea,
-                };
-                let postdata = qs.stringify(param);
-                axios.post(url, postdata).then(function (data) {
-                    let json = data.data;
-                    if (json.Code == 0) {
-                        that.uniteOptions = json.Rs;
-                        if (json.Rs) {
-                            that.unite = that.uniteOptions[0].Id;
-                            that.GetRegionlistByUnitId(that.unite);
+                this.$confirm('是否取消前课程预约？', '提示', {
+                    type: 'warning'
+                }).then(({result}) => {
+                        if (result) {
+                            let param = {
+                                token: localStorage.token,
+                            };
+                            let postdata = qs.stringify(param);
+                            testTable(postdata).then(res => {
+                                let json = res;
+                                if (json.Code == 0) {
+                                    that.Toast('当前课程已取消预约','success');
+                                    that.getList();
+                                } else {
+                                    that.Toast(json.Memo + ',错误码：' + json.Code);
+                                }
+                            })
+                        } else {
+                            this.$toast.message('点击了取消');
                         }
-                    } else {
-                        that.$message.error(json.memo);
-                    }
-                }, function (response) {
-                    console.info(response);
-                })
+                });
             },
-            GetRegionlistByUnitId(comid) {
-                const that = this;
-                let url = headapi + 'v1/Auth/GetRegionSelect';
-                let param = {
-                    token: localStorage.token,
-                    comid: comid,
-                    regionid: 0,
-                };
-                let postdata = qs.stringify(param);
-                axios.post(url, postdata).then(function (data) {
-
-                    let json = data.data;
-                    if (json.Code == 0) {
-                        that.areaOptions = json.Rs;
-                        if (json.Rs)
-                            that.area = that.areaOptions[0].Id;
-                        that.getDetectorByRegionId(that.area);
-                    } else {
-                        that.$message.error(json.memo);
-                    }
-                }, function (response) {
-                    console.info(response);
-                })
-            },
-            getDetectorByRegionId(regionid) {
-                const that = this;
-                let url = headapi + 'v1/Auth/GetDetectorSelect';
-                let param = {
-                    token: localStorage.token,
-                    regionid: regionid,
-                };
-                let postdata = qs.stringify(param);
-                axios.post(url, postdata).then(function (data) {
-                    let json = data.data;
-                    if (json.Code == 0) {
-                        that.detectorOptions = json.Rs;
-                        if (json.Rs != null) {
-                            that.detector = that.detectorOptions[0].Id;
-                        }
-                    } else {
-                        that.$message.error(json.memo);
-                    }
-                }, function (response) {
-                    console.info(response);
-                })
-            },
-            ChangeGetRegionlistByUnitId() {
-                this.GetRegionlistByUnitId(this.unite);
-            },
-            ChangegetDetectorByRegionId() {
-                this.getDetectorByRegionId(this.area);
-            },
-            // 实时监测无线设备
-            readList() {
-                const that = this;
-                let url = headapi + 'v1/Detector/DetectQueryByDetector';
-                let detectorid = that.detector;
-                // let detectorid = 40;
-                let bt = that.pickerBtString;
-                let et = that.pickerEtString;
-                // let bt = '2019-01-01 00:00:00';
-                // let et = '2020-01-01 00:00:00';
-                if (!detectorid) {
-                    that.Toast(that.$t('Please select a device first'));
-                    return false
-                }
-                let detectedmac = that.MAC;
-                let pageIndex = that.curIndex;
-                let tableMax = 100;
+            getList() {
+                let that = this;
                 let param = {
                     token: localStorage.token,
-                    detectorid: detectorid,
-                    bt: bt,
-                    et: et,
-                    detectedmac: detectedmac,
-                    start: pageIndex,
-                    tableMax: tableMax
+                    active: this.active
                 };
                 let postdata = qs.stringify(param);
-                axios.post(url, postdata).then(function (data) {
-                    let json = data.data;
-                    that.lists = [];
+                testTable(postdata).then(res => {
+                    let json = res;
                     if (json.Code == 0) {
-                        if (!json.Rs || json.Rs == []) {
-                            that.Toast(that.$t('No records found'));
+                        that.list = json.Rs;
+                        if (that.list) {
+                            that.num = json.Rs.length;
                         }
-                        that.lists = json.Rs;
-                        that.curIndex = json.PageCount;
-                    } else {
-                        that.Toast(that.TransMemo(json.Memo));
-                    }
-                }, function (response) {
-                    console.info(response);
-                })
-            },
-            // 手机信号探测记录
-            readPhone() {
-                const that = this;
-                let url = headapi + 'v1/Detector/SignalDetectQueryByDetector';
-                let detectorid = that.detector;
-                if (!detectorid) {
-                    that.Toast(that.$t('Please select a device first'));
-                    return false
-                }
-                // let detectorid = 40;
-                let bt = that.pickerBtString;
-                let et = that.pickerEtString;
-
-                let detectedmac = that.MAC;
-                let pageIndex = that.curIndex2;
-                let tableMax = 100;
-                let param = {
-                    token: localStorage.token,
-                    detectorid: detectorid,
-                    bt: bt,
-                    et: et,
-                    detectedmac: detectedmac,
-                    start: pageIndex,
-                    tableMax: tableMax
-                };
-                let postdata = qs.stringify(param);
-                axios.post(url, postdata).then(function (data) {
-                    let json = data.data;
-                    that.lists = [];
-                    if (json.Code == 0) {
-                        that.phones = json.Rs;
-                        that.curIndex2 = json.PageCount;
                     } else {
-                        this.Toast(that.TransMemo(json.Memo));
+                        that.$message.error(json.Memo);
                     }
-                }, function (response) {
-                    console.info(response);
                 })
             },
         },
+        watch: {
+            'active'() {
+                this.getList();
+            }
+        },
         components: {
-            cityPicker
+            bottomTab
         }
     }
 </script>
 
 <style scoped>
-    /*mu-header*/
-    /deep/ .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;
-    }
-
-    #pages {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        overflow-y: scroll;
-        display: block;
-        margin: 0 auto;
-    }
-
-    /*mu-bottom-sheet*/
-    .mu-bottom-sheet {
-        top: 60px !important;
-        bottom: 410px;
-    }
-
-    .location {
-        width: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        /*padding-bottom: 40px;*/
+    .page {
+        background: #F2F2F2;
     }
 
-    .location span {
+    .num {
         width: 100%;
         overflow: hidden;
         display: block;
         margin: 0 auto;
-        margin-top: 10px;
-        margin-bottom: 10px;
-    }
-
-    .location input {
-        width: 95px;
-        height: 30px;
-        border: 1px solid #D5D5D5;
-        float: left;
-        text-indent: 10px;
-    }
-
-    .modal-content {
-        width: 100%;
-        display: block;
-        margin: 0 auto;
-        z-index: 99999;
-        overflow: hidden;
-    }
-
-    .modal-body {
-        width: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        background: #fff;
-        padding-top: 20px;
-        padding-left: 5%;
-        padding-right: 5%;
-        padding-bottom: 40px;
-    }
-
-    .modalBottom {
-        width: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        background: #fff;
-    }
-
-    .modalBottom .reset {
-        width: 50%;
-        float: left;
-        height: 40px;
-        line-height: 40px;
-        background: #FFF6CF;
+        font-family: "PingFang SC";
+        font-weight: 300;
+        font-size: 14px;
         text-align: center;
+        color: #909090;
+        padding: 13px 0;
     }
 
-    .modalBottom .pullUp {
-        width: 50%;
-        float: right;
-        height: 40px;
-        line-height: 40px;
-        background: #FFCC00;
+    /deep/ .mu-appbar-title {
         text-align: center;
     }
 
-    .location select {
-        width: 95px;
-        height: 30px;
-        border: 1px solid #D5D5D5;
-        float: left;
-        margin-right: 10px;
-        margin-top: 10px;
-        margin-bottom: 10px;
-    }
-
-    .location select#detector {
-        margin-right: 0;
-        float: left;
-    }
-
-    #macInput {
-        width: 200px;
+    /deep/ .mu-tab {
+        width: 115px;
+        height: 35px;
+        margin-right: 6px;
     }
 
-    .timePickerPart {
-        width: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
+    /deep/ .mu-tab-wrapper {
+        height: 35px;
+        line-height: 25px;
+        background: #fff;
+        color: #363636;
+        box-shadow: 1px 0px 6px rgba(0, 0, 0, 0.16);
+        border-radius: 8px 8px 0px 0px;
+        font-size: 16px;
+        padding-top: 5px;
     }
 
-    .timePickerPart em {
-        width: 25px;
-        height: 30px;
-        line-height: 50px;
-        float: left;
+    /deep/ .mu-tab-active .mu-tab-wrapper {
+        height: 35px;
+        line-height: 25px;
+        border-radius: 8px 8px 0px 0px;
+        background: #E75296;
+        box-shadow: 1px 0px 6px rgba(0, 0, 0, 0.16);
+        color: #fff;
     }
 
-    .timePickerPart span {
-        width: 135px;
-        height: 30px;
-        line-height: 30px;
-        border: 1px solid #D5D5D5;
-        float: left;
-        margin-right: 8px;
-        margin-top: 10px;
-        margin-bottom: 10px;
-        text-align: center;
+    /deep/ .mu-tab-wrapper em {
+        font-size: 12px;
     }
 
-    .listContainer ul {
+    .list {
         width: 100%;
         overflow: hidden;
         display: block;
         margin: 0 auto;
+        padding-top: 6px;
     }
 
-    .listContainer li {
-        width: 96%;
+    .list li {
+        width: 100%;
         overflow: hidden;
         display: block;
         margin: 0 auto;
-        margin-bottom: 2px;
-        padding: 10px 20px;
         background: #fff;
+        padding: 20px 2%;
+        margin-bottom: 10px;
     }
 
-    .listContainer .rowTop {
+    .whiteCube {
         width: 100%;
+        height: 6px;
         overflow: hidden;
         display: block;
         margin: 0 auto;
+        background: #fff;
+        border-bottom: 1px solid #ccc;
     }
-
-    .rowTop .red {
-        color: #FFA200;
-    }
-
-    /*.pages {*/
-    /*width: 100%;*/
-    /*max-height: 600px;*/
-    /*overflow: hidden;*/
-    /*display: block;*/
-    /*margin: 0 auto;*/
-    /*overflow-y: scroll;*/
-    /*}*/
-    .deteUl h5 {
-        margin: 0;
+    .list .lt {
+        width: 120px;
         float: left;
-        font-size: 16px;
     }
-
-    .deteUl .rowTop span {
-        float: right;
+    .list .lt h5 {
+        font-family: "PingFang SC";
+        font-weight: normal;
         font-size: 14px;
+        text-align: left;
+        color: #4e4e4e;
+        margin: 0;
     }
-
-    .deteUl .rowDetail {
-        width: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        color: #999999;
-        font-size: 14px;
-        margin-top: 10px;
-        margin-bottom: 10px;
+    .list .lt span {
+        font-family: "PingFang SC";
+        font-weight: normal;
+        font-size: 12px;
+        text-align: left;
+        color: #909090;
     }
-
-    .rowDetail span {
+    .list .md {
+        max-width: 200px;
+        /*width: 220px;*/
         float: left;
     }
-
-    .rowDetail s {
+    .list .rt {
+        width: 55px;
         float: right;
-    }
-
-    .rowBottom {
-        width: 100%;
+        margin-right: 2%;
         overflow: hidden;
         display: block;
         margin: 0 auto;
-        font-size: 12px;
-        color: #999999;
-    }
-
-    .tips {
-        width: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        text-align: center;
-        font-size: 12px;
-        color: #999999;
-        margin-top: 10px;
     }
-
-    .phoneUl {
-        width: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
+    .md em {
+        float: left;
+        font-family: "PingFang SC";
+        font-weight: normal;
+        font-size: 18px;
+        text-align: left;
+        color: #3b3b3b;
+        margin-right: 20px;
+    }
+    .md span {
+        font-family: "PingFang SC";
+        font-weight: normal;
+        font-size: 14px;
+        text-align: left;
+        color: #37cb00;
+        line-height: 30px;
     }
-
-    .phoneUl li {
-        width: 96%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        margin-bottom: 2px;
-        padding: 10px 20px;
-        background: #fff;
+    span.green {
+        color: #37cb00;
     }
-
-    .phoneUl .peTop {
-        width: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        font-size: 16px;
-        margin-bottom: 10px;
+    span.red {
+        color:#FF453C;
     }
-
-    .peTop span {
+    .rt span {
         float: right;
-        text-align: right;
-        font-size: 14px;
-    }
-
-    .peMemo {
-        width: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
+        line-height: 35px;
+        font-family: "PingFang SC";
+        font-weight: normal;
         font-size: 14px;
-        color: #999999;
-    }
-
-    .deteUl {
-        width: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-    }
+        text-align: left;
+        color: #909090;
 
-    .deteUl li {
-        width: 100%;
-        overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        padding-top: 10px;
-        padding-left: 2%;
-        padding-right: 2%;
-        border-bottom: 1px solid #ccc;
     }
-
-    .tips {
-        width: 100%;
+    .rt .red {
+        font-family: "PingFang SC";
+        font-weight: normal;
+        font-size: 14px;
+        text-align: left;
+        color: #f8847f;
+    }
+    .rt .cancleBtn {
+        width: 55px;
+        height: 24px;
+        border-radius: 12px;
+        background: #ff453c;
+        padding: 0;
         overflow: hidden;
-        display: block;
-        margin: 0 auto;
-        font-size: 12px;
-        color: #999999;
-        margin-top: 10px;
         text-align: center;
+        color: #fff;
+        line-height: 24px;
+        margin-top: 6px;
     }
-
-    .mu-warning-text-color {
-        color: #FFA200;
-    }
-
-    /deep/ .mu-tab-link-highlight {
-        background-color: #FFA200 !important;
-    }
-    /deep/ .mu-tab-wrapper {
-        font-size: 16px;
+    .rt em {
+        font-family: "PingFang SC";
+        font-weight: normal;
+        font-size: 14px;
+        text-align: left;
+        color: #909090;
+        margin-top: 6px;
     }
-</style>
+</style>

app/src/router/index.js

@@ -24,17 +24,25 @@ const routes = [
                 name: 'appoint',
                 meta: {
                     title: '预约课程',
-                    index: 1
+                    index: 2
                 },
                 component: () => import( '../page/appoint.vue')
+            },  {
+                path: '/record',
+                name: 'record',
+                meta: {
+                    title: '预约记录',
+                    index: 1
+                },
+                component: () => import( '../page/record.vue')
             }, {
-                path: '/map',
-                name: 'map',
+                path: '/mine',
+                name: 'mine',
                 meta: {
-                    title: '地图展示',
+                    title: '我的',
                     index: 1
                 },
-                component: () => import( '../page/map.vue')
+                component: () => import( '../page/mine.vue')
             },
         ]
     },