get.vue

<!-- 主内容 -->
<template>
    <div class="container-fluid">
      <div class="page page-member-all">
        <div class="page-header">
            <div class="info-wrap">
              <table class="table header-table">
                <tbody>
                <tr>
                  <td>
                    <div class="info-row" ><span class="name">商家名称 ：</span><span class="val">{{store.name}}</span></div>
                    <div class="info-row" ><span class="name">公司全称 ：</span><span class="val">{{store.company}}</span></div>
                    <div class="info-row" ><span class="name">地址 ： </span><span class="val">{{store.address}}</span></div>
                  </td>
                  <td>
                    <div class="info-row" ><span class="name">联系人：</span><span class="val">{{store.contact}}</span></div>
                    <div class="info-row" ><span class="name">联系电话： </span><span class="val">{{store.contactPhone}}</span></div>
                    <div class="info-row" ><span class="name">开放预约时长：</span><span class="val">{{store.subscribeDay}}天</span></div>
                  </td>

                  <td>
                    <div class="info-row" ><span class="name">税号 ： </span><span class="val">{{store.dutyParagraph}}</span></div>
                    <div class="info-row" ><span class="name">开户行：  </span><span class="val">{{store.bank}}</span></div>
                    <div class="info-row" ><span class="name">银行账号： </span><span class="val">{{store.bankAccount}}</span></div>
                    <div class="info-row" ><span class="name">结算周期：</span><span class="val">{{store.cycle}}</span></div>
                  </td>
                </tr>
                </tbody>
              </table>
            </div>

          <div class="header-bottom">
            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist">

              <li role="presentation" class="active"><a href="#tab-mem-data"  role="tab" data-toggle="tab">场馆信息（{{pageList.totalRecord==null?0:pageList.totalRecord}}）</a></li>
              <li role="presentation"><a href="#tab-mem-record" @click.prevent="getStatus(1)"  role="tab" data-toggle="tab">消费记录</a></li>
            </ul>

          </div>
        </div>
        <div class="page-body">
          <div class="main">
            <!-- Tab panes -->
            <div class="tab-content">

              <!--场馆数据-->
              <div role="tabpanel" class="tab-pane pt-3 pb-4 active" id="tab-mem-data">
                <el-form ref="form" :model="form" label-width="50">
                    <el-select filterable placeholder="空调"   style="margin-left: 20px;" v-model="form.hasAirConditioning" >
                      <el-option v-for="item in hasAirConditioningList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>

                    <el-select filterable placeholder="场馆状态" v-model="form.status" style="margin-left: 20px;">
                      <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>



                  <el-input type="text"  style="width: 170px;margin-left: 20px;" v-model="form.keyword" placeholder="场馆名称"></el-input>
                  <span class="mem-form">
                  <button  type="submit" class="btn btn-default" style="margin-left: 20px;">查询</button>
                  <button  type="reset" class="btn btn-default" style="margin-left: 20px;">重置</button>
                  </span>
                    <!--    <router-link v-bind:to="'/venues/create/'+store.id" class="btn btn-default" style="margin-left: 20px;">添加</router-link>
                --></el-form>
                <table class="table table-striped table-hover table-record" align="center" border="0">
                  <thead>
                  <tr>
                    <th>场馆ID</th>
                    <th>场馆名称</th>
                    <th>运动类型</th>
                    <th>空调</th>
                    <th>经度</th>
                    <th>纬度</th>
                    <th>地址</th>
                    <th>联系电话</th>
                    <th>营业时间</th>
                    <th>场馆状态</th>
                    <th>人气值</th>
                    <th>收藏数</th>
                    <th>操作</th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr v-for="item in pageList.list">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.sportsType}}</td>
                    <td>{{item.hasAirConditioning}}</td>
                    <td>{{item.longitude}}</td>
                    <td>{{item.latitude}}</td>
                    <td>{{item.address}}</td>
                    <td>{{item.phone}}</td>
                    <td  v-html="getJson(item.businessTime)"></td>
                    <td>{{item.status}}</td>
                    <td>{{item.viewCount}}</td>
                    <td>{{item.collectCount}}</td>
                    <td><a href="#">查看</a>
                  </td>
                  </tr>


                  </tbody>
                </table>
                <pagination size="md"
                            :total-rows="pageList.totalRecord"
                            :per-page="pageList.pageSize"
                            v-model="pageList.pageIndex">
                  >
                </pagination>
              </div>
              <!--消费记录-->
              <div role="tabpanel" class="tab-pane pt-3 pb-4" id="tab-mem-record">
                <el-select v-model="status" filterable :maxlength="10" @change="getStatus(status)"
                           style="margin-left: 20px;">
                  <el-option v-for="item in statusList" :key="status" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
                <table class="table table-striped table-hover table-record" align="center" border="0">
                  <thead>
                  <tr>
                    <th>订单号</th>
                    <th>运动项目</th>
                    <th>入场时间</th>
                    <th>离场时间</th>
                    <th>订单金额</th>
                    <th>实际支付金额</th>
                    <th>支付单号</th>
                    <th>操作</th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr v-for="item in pageListOrder.list">
                    <td>{{item.dpayNo}}</td>
                    <td>{{item.sportType | getSportsType}}</td>
                    <td>{{item.startTime | formatDate}}</td>
                    <td>{{item.endTime | formatDate}}</td>
                    <td>{{item.totalAmount}}</td>
                    <td>{{item.payAmount}}</td>
                    <td>{{item.orderId}}</td>
                    <td><a href="#">查看详情</a></td>
                  </tr>
                  </tbody>
                </table>
                <pagination size="md"
                            :total-rows="pageListOrder.totalRecord"
                            :per-page="pageListOrder.pageSize"
                            v-model="pageListOrder.pageIndex">
                </pagination>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
</template>
<script>
  import pagination from "@/components/bootstrap/pagination"
  import breadcrumb from "@/components/bootstrap/breadcrumb"
  export default {
    data() {
      return {
        form:{
          hasAirConditioning:'',
          status:'',
          keyword:'',

        },
       store:[],
        pageList: {
          pageSize: 1,
          pageIndex: 1,
          totalRecord: 0,
          totalPage: 1,
          list: [],
        },
        pageListOrder: {
          pageSize: 1,
          pageIndex: 1,
          totalRecord: 0,
          totalPage: 1,
          list: [],
        },
        status:1,
        currentIndex: 1,
        hasAirConditioningList:hasAirConditioningList,
        statusList: [{value: 1, label: "计时消费"}, {value: 2, label: "包场消费"}],
      }
    },
    components: {
      pagination: pagination,
      breadcrumb: breadcrumb,
    },
    created: function () {

    },
    mounted: function () {
      this.getStore();
      this.getList();
    },
    updated: function () {
    },
    destroyed: function () {
    },
    methods: {
        //处理  营业时间
      getJson: function (value) {
        var dataOne = JSON.parse(value)[0];
        var dataTwo = JSON.parse(value)[1];
        var weekOne = [];
        weekOne.push(dataOne.week[0]);
        weekOne.push(dataOne.week[dataOne.week.length - 1]);
        var arry = new Array();
        var weekTwo = [];
        weekTwo.push(dataTwo.week[0]);
        weekTwo.push(dataTwo.week[dataTwo.week.length - 1]);
        var arryTwo = new Array();
        $.each(weekOne, function (indx, obj) {
          var type;
          switch (obj) {
            case 1:
              type = "周一"
              break;
            case 2:
              type = "周二"
              break;
            case 3:
              type = "周三"
              break;
            case 4:
              type = "周四"
              break;
            case 5:
              type = "周五"
              break;
            case 6:
              type = "周六"
              break;
            default:
              type = "周日"
              break;
          }
          arry.push(type)
        });
        $.each(weekTwo, function (indx, obj) {
          var type;
          switch (obj) {
            case 1:
              type = "周一"
              break;
            case 2:
              type = "周二"
              break;
            case 3:
              type = "周三"
              break;
            case 4:
              type = "周四"
              break;
            case 5:
              type = "周五"
              break;
            case 6:
              type = "周六"
              break;
            default:
              type = "周日"
              break;
          }
          arryTwo.push(type)
        });
        var html = "<p>" + arry.join('至') + dataOne.startTime + "--" + dataOne.endTime + "</p>" + "<br>" + "<p>" +
          arryTwo.join('至') + dataTwo.startTime + "--" + dataTwo.endTime + "</p>";
        return html;
      },
      //当前商家信息
      getStore:function() {
        let self=this;
        var id=self.$route.params.id;
        self.ajax({
          url:api.storeManage.get.url(id),
          success:function(res) {
            self.store= res.data;
          }
        });
      },
      //场馆信息
      getList:function(data) {
        let self=this;
        self.ajax({
          url:api.venues.list.url,
          data:data+"&storeId="+self.$route.params.id,
          success:function(res) {
            self.pageList= res.data;
          }
        });
      },
      //筛选
      search(formName){
        var self=this;
        let data= {
          hasAirConditioning:self.form.hasAirConditioning,
          status:self.form.status,
          keyword:self.form.keyword
        }
        this.getList(data);
      },

      getStatus(status) {
        var self = this;
        if (status == 1) {
          self.getTimeList(self.$route.params.id, 1);
        } else {
          self.getBlockList(self.$route.params.id, 1);
        }
      },
      //获取计时消费记录
      getTimeList(storeId, pageIndex) {
        var self = this;sss
        self.ajax({
          type: 'GET',
          url: api.order.time.list.url,
          data: {storeId: storeId, pageIndex: pageIndex},
          success: function (res) {
            self.pageListOrder = res.data;
          }
        });
      },
      //获取包场消费
      getBlockList(storeId, pageIndex) {
        var self = this;
        self.ajax({
          type: 'GET',
          url: api.order.block.list.url,
          data: {storeId: storeId, pageIndex: pageIndex},
          success: function (res) {
            self.pageListOrder = res.data;
          }
        });
      },
    },


    watch: {
      currentIndex: function (newIndex) {
        let self = this;
        let query = {
          pageIndex: newIndex
        };
        self.search(query);
      }
    },
  }
</script>