list.vue

<template xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/html">
  <div class="container-fluid">
    <div class="page page-order-time">
      <div class="page-breadcrumb">
        <ol class="breadcrumb">
          <li><a>消费管理</a> > <a>计时订单</a></li>
        </ol>
      </div>
      <div class="page-body">
        <div class="main">
          <div class="tab-content">
            <!--商品库存-->
            <div role="tabpanel" class="tab-pane active pt-4 pb-4" id="tab-mem-record">
              <el-form ref="form" :model="form" label-width="50">
                <el-select v-model="form.storeId" filterable placeholder="选择商家" :maxlength="10"
                           style="margin-left: 40px;">
                  <el-option v-for="item in storeList" :key="item.id" :label="item.name"
                             :value="item.id">
                  </el-option>
                </el-select>
                <el-select v-model="form.tradeStatus" filterable placeholder="订单状态" :maxlength="10"
                           >
                  <el-option v-for="item in tradeStatusList" :key="item.value" :label="item.label"
                             :value="item.value">
                  </el-option>
                </el-select>
                <el-select v-model="form.sportType" filterable placeholder="运动项目" :maxlength="10"
                           >
                  <el-option v-for="item in sportsTypeList" :key="item.value" :label="item.label"
                             :value="item.value">
                  </el-option>
                </el-select>
                <el-date-picker  style="width: 300px;"
                  v-model="form.createTime"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"  placeholder="请选择创建时间范围">
                </el-date-picker>

                <el-date-picker style="width: 300px;"
                                  v-model="form.startTime"
                                  type="daterange"
                                  range-separator="至"
                                  start-placeholder="开始日期"
                                  end-placeholder="结束日期"  placeholder="请选择到场/离场时间范围">
                </el-date-picker>

                <el-input v-model="form.keyword" placeholder="输入用户编号/姓名/手机号" :maxlength="10"
                          style="width: 300px;"></el-input>
                <span class="mem-form">
                  <button class="btn btn-default" @click.prevent="submitForm('form')">查询</button>
                  <button @click.prevent="resetForm()" class="btn btn-default">重置</button>
                </span>

              </el-form>
              <table class="table table-striped table-hover table-record mb-77" align="center" border="0">
                <thead>
                <tr>
                  <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.orderId}}</td>
                  <td>{{item.userId}}</td>
                  <td>{{item.userName}}</td>
                  <td>{{item.userPhone}}</td>
                  <td>{{item.sportType | getSportsType}}</td>
                  <td>{{item.startTime | formatDate('YYYY-MM-DD hh:mm')}}</td>
                  <td>{{item.endTime | formatDate('YYYY-MM-DD hh:mm')}}</td>
                  <td>{{item.totalAmount}}</td>
                  <td>{{item.payAmount}}</td>
                  <td>{{item.tradeStatus | getTradeStatus}}</td>
                  <td>{{item.dpayNo}}</td>

                  <td>
                    <router-link v-bind:to="'/order/time/get/'+ item.orderId" class="js-do">查看详情</router-link>
                  </td>
                </tr>
                </tbody>
              </table>
              <pagination size="md"
                          :total-rows="pageList.totalRecord"
                          :per-page="pageList.pageSize"
                          v-model="currentIndex">
              </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: {
          storeId:'',
          createTime:"",
          keyword: '',
          tradeStatus: '',
          sportType: '',
          startTime:'',
        },
        pageList: {
          pageSize: 1,
          pageIndex: 1,
          totalRecord: 0,
          totalPage: 1,
          list: [],
        },
        storeList:[],
        currentIndex:1,
        tradeStatusList: tradeStatusList,
        statusList: statusList,
        sportsTypeList: sportsTypeList,
      }
    },
    components: {
      pagination: pagination,
      breadcrumb: breadcrumb,
    },
    created: function () {
      this.getList();
      this.getStoreList();
    },
    mounted: function () {

    },
    updated: function () {
    },
    destroyed: function () {
    },
    filters: {
      getTradeStatus: function (value) {
        var type;
        switch (value) {
          case 1:
            type = "已支付"
            break;
          case 2:
            type = "未支付"
            break;
          default:
            type = "异常"
            break;
        }
        return type;
      },
      getSportsType: function (value) {
            var type;
            switch (value) {
              case 1:
                type = "篮球"
                break;
              case 2:
                type = "足球"
                break;
              case 3:
                type = "羽毛球"
                break;
              case 4:
                type = "网球"
                break;
              default:
                type = "乒乓球"
                break;
            }
           return type;
      },
    },
    methods: {
      getStoreList(data) {
        var self = this;
        self.ajax({
          type: 'GET',
          url: api.storeManage.list.url,
          data: data,
          success: function (res) {
            self.storeList = res.data.list;
          }
        });
      },
      getList(data) {
        var self = this;
        self.ajax({
          type: 'GET',
          url: api.order.time.list.url,
          data: data,
          success: function (res) {
            self.pageList = res.data;
            self.currentIndex = res.data.pageIndex;
          }
        });
      },
      //改变状态
      startVenues(id) {
        var self = this;
        self.ajax({
          type: 'POST',
          url: api.venues.start.url + "/" + id,
          success: function (res) {
            self.$message({
              type: 'success',
              message: res.message
            });
            self.getList();
          }
        });
      },

      //搜索
      submitForm(formName) {
        var self = this;
        console.log(self.form.storeId);
        var data = {
          storeId:self.form.storeId,
          keyword: self.form.keyword,
          tradeStatus: self.form.tradeStatus,
          sportType: self.form.sportType,
          startCreateTime:self.turnDate(self.form.createTime[0]),
          endCreateTime:self.turnDate(self.form.createTime[1]),
          startTime:self.turnDate(self.form.startTime[0]),
          endTime:self.turnDate(self.form.startTime[1])
        };
        self.getList(data);
      },

      //重置
      resetForm() {
        var self = this;
        self.form.storeId='';
        self.form.keyword = "";
        self.form.tradeStatus = "";
        self.form.sportType = "";
        self.form.createTime = "";
        self.form.startTime='';
      }
    },
    watch: {
      currentPage: function (newData) {
        var self = this;
        var query = {
          pageIndex: newData, storeId: self.$route.params.storeId,
        }
        self.resetForm();
        self.getList(query);
      },
    }
  }
</script>