.

www/webapp/housekeeping/src/components/order.vue

@@ -1,17 +1,183 @@
 <template>
-  <div class="order">
-    <h2>{{msg}}</h2>
+  <div class="service-info">
+    <div class="tabs">
+      <div class="tab" v-bind:class="{ active: isActive === 0}" @click='tabF(0)'>预约中</div>
+      <div class="tab" v-bind:class="{ active: isActive === 1}" @click='tabF(1)'>已预约</div>
+      <div class="tab" v-bind:class="{ active: isActive === 2}" @click='tabF(2)'>已面试</div>
+    </div>
+    <div style="z-index: -1">
+
+      <scroller>
+        <div v-show='showOldOrderInfo'
+             style="color: white;padding: 20% 0;font-size: 20px;text-align: center;background-color: white;text-shadow: 1px 1px 1px black;">
+          暂无订单数据
+        </div>
+        <div class="tab-view">
+          <div v-for="item in oldOrderList" class="my-order-body" @click='btnEditOrder(item)'>
+            <div><span class="title">日期：</span>{{item.order_time}}</div>
+            <div><span class="title">服务地址：</span>{{item.address.floor}}号楼{{item.address.room}}号房</div>
+            <div><span class="title">服务标准:</span>{{serviceStandards[Number.parseInt(item.service_standards)]}}</div>
+            <div v-show="isActive !== 0"><span class="title">进房时间：</span>{{item.in_room_time}}</div>
+            <div v-show="isActive === 2"><span class="title">出房时间：</span>{{item.out_room_time}}</div>
+          </div>
+        </div>
+      </scroller>
+    </div>
   </div>
 </template>
 <script>
+  import axios from 'axios'
+  import _ from '@/config'
+
   export default {
     name: 'order',
     data() {
       return {
-        msg: 'this is order'
+        isActive: 1,
+        showOldOrderInfo: false,
+        oldId: null, // 养老院的雇员专属id
+        oldOrderList: null,//养老院订单数据集合
+        serviceStandards: ['大清洁', '小清洁', '深度清洁', '空房清洁']
+      }
+    },
+    created() {
+      // 清理数据
+      _.oldOrderInfo = null;
+      let that = this;
+      _.auth = null;
+//      axios.post(_.apiPath + '/moonclub/employe/GetAuthinfo').then(res => {
+//        console.log(res.data.data)
+//      })
+      // 检验用户是否以及注册过
+      axios.post(_.apiPath + '/moonclub/employe/QueryPersonalInfoByUserId&user_id=' + _.user_id).then(res => {
+        if (res.data.message === '已经注册过') {
+          _.auth = res.data.data.auth
+          that.oldId = res.data.data._id.$id
+          if (_.auth === 6) {
+            document.title = '养老院'
+            that.tabF(0)
+          } else if (_.auth >= 0 && _.auth < 6) {
+            // 用户为享月会的雇员时,跳转到 相关组件中
+            document.title = '享月会'
+            that.$router.push({path: '/moonClubEmployeeOrder'})
+          }
+        } else { // 用户还为注册,引导去注册组件
+          that.$router.push({path: '/employe'})
+        }
+      })
+    },
+    methods: {
+      tabF(index) {
+        let loading = weui.loading('加载中...', {
+          className: 'custom-classname'
+        });
+        this.isActive = index;
+        axios.post(_.apiPath + '/moonclub/employe/pOrderListByEmployerId&id=' + this.oldId + '&status=' + index).then(oldRes => {
+          this.oldOrderList = oldRes.data.data;
+          this.showOldOrderInfo = (this.oldOrderList.length === 0) ? true : false
+          // 处理订单上的各种时间
+          for (let i in this.oldOrderList) {
+            // orderTime
+            if (parseInt(this.oldOrderList[i].order_time) > 0) {
+              this.oldOrderList[i].order_time = _.timetrans(parseInt(this.oldOrderList[i].order_time))
+            } else {
+              this.oldOrderList[i].order_time = '暂无服务时间'
+            }
+            // in room time
+            if (parseInt(this.oldOrderList[i].in_room_time) > 0) {
+              // listArr[i].in_room_time = in_room_time
+            } else {
+              this.oldOrderList[i].in_room_time = '暂无服务时间'
+            }
+            // out room time
+            if (parseInt(this.oldOrderList[i].out_room_time) > 0) {
+              // listArr[i].out_room_time = out_room_time
+            } else {
+              this.oldOrderList[i].out_room_time = '暂无服务时间'
+            }
+          }
+          loading.hide();
+        })
+      },
+      btnEditOrder(item) {
+        _.oldOrderInfo = item;
+        this.$router.push({path: '/oldOrderInfo'})
       }
     }
   }
 </script>
+<style scoped lang='less'>
+  /*变量*/
+  @borderRadius: 50px;
+  .service-info {
+    .tabs {
+      z-index: 99;
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      display: flex;
+      flex-wrap: nowrap;
+      padding: 5px;
+      /*      -webkit-box-sizing: border-box;
+            -moz-box-sizing: border-box;
+            box-sizing: border-box;*/
+
+      background-color: #fff;
+      .tab {
+        font-size: 14px;
+        width: 33.33%;
+        /*background-color: #fff;*/
+        color: #929292;
+        border: 1px solid black;
+        text-align: center;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        box-sizing: border-box;
+        transition: all .3s;
+        padding: 5px 0;
+        &:nth-child(1) {
+          border-right: 0;
+          border-top-left-radius: @borderRadius;
+          border-bottom-left-radius: @borderRadius;
+        }
+        &:nth-child(2) {
+        }
+        &:nth-child(3) {
+          border-left: 0;
+          border-top-right-radius: @borderRadius;
+          border-bottom-right-radius: @borderRadius;
+        }
+      }
+      .active {
+        color: white;
+        background-color: #929292;
+      }
+    }
+    .tab-view {
+      padding-top: 40px;
+      width: 100%;
+      display: flex;
+      flex-wrap: wrap;
+
+      /*background-color: #0ac8ff;*/
+      .my-order-body {
+        font-size: 15px;
+        border: 1px solid black;
+        margin: 10px 0;
+        padding: 15px;
+        color: white;
+        text-shadow: 1px 1px 10px white;
+        background-color: #570044;
+        width: 100%;
+        /*font-size: 15px;*/
+        span.title{
+          width: 30%;
+          display: inline-block;
+        }
+
+      }
+    }
 
-<style scoped lang="less"></style>
+  }
+</style>