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-date-picker v-model="form.createTime"
                                  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.packageOrderDomain.orderId}}</td>
                  <td>{{item.packageOrderDomain.userId}}</td>
                  <td>{{item.packageOrderDomain.userName}}</td>
                  <td>{{item.packageOrderDomain.userPhone}}</td>
                  <td>{{item.packageOrderDomain.createTime | formatDate('YYYY-MM-DD hh:mm')}}</td>
                  <td>{{item.orderDomain.totalAmount}}</td>
                  <td>{{item.orderDomain.payAmount}}</td>
                  <td>{{item.packageOrderDomain.status | getTradeStatus}}</td>
                  <td>{{item.packageDomain.name}}</td>
                  <td>{{item.packageDomain.packageType | getPackageType}}</td>
                  <td>{{item.packageOrderDomain.dpayNo}}</td>
                  <td>
                    <router-link v-bind:to="'/order/package/get/'+ item.packageOrderDomain.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: '',
        },
        pageList: {
          pageSize: 1,
          pageIndex: 1,
          totalRecord: 0,
          totalPage: 1,
          list:{
            packageOrderDomain:[],
            orderDomain:[],
            packageDomain:[]
          },
        },
        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;
      },
      getPackageType: function (value) {
        var type;
        switch (value) {
          case 1:
            type = "时效套餐"
            break;
          case 2:
            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.package.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(data) {
        var self = this;
        var data ={
            storeId:self.form.storeId,
            keyword: self.form.keyword,
            status: self.form.tradeStatus,
            startCreateTime:self.turnDate(self.form.createTime[0]),
            endCreateTime:self.turnDate(self.form.createTime[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,
        }
        self.submitForm(query);
      },
    }
  }
</script>