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.status" 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.id}}</td>
                  <td>{{item.userId}}</td>
                  <td>{{item.userName}}</td>
                  <td>{{item.userPhone}}</td>
                  <td>{{item.type | getType}}</td>
                  <td>{{item.createTime | formatDate('YYYY-MM-DD hh:mm')}}</td>
                  <td>{{item.totalAmount}}</td>
                  <td>{{item.discountAmount}}</td>
                  <td>{{item.payAmount}}</td>
                  <td>{{item.status | getTradeStatus}}</td>
                  <td>{{item.dpayId}}</td>
                  <td>
                    <router-link v-bind:to="'/order/recharge/get/'+ item.id" 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: '',
          status: '',
        },
        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.getStoreList();
      this.getList();
    },
    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;
      },
      getType: 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;
        console.log(data);
        self.ajax({
          type: 'GET',
          url: api.order.recharge.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 = {
          type:4,
          storeId:self.form.storeId,
          keyword: self.form.keyword,
          status: self.form.status,
          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.status = "";
        self.form.createTime = "";
      }
    },
    watch: {
      currentPage: function (newData) {
        var self = this;
        var query = {
          pageIndex: newData,
        }
        self.submitForm(query);
      },
    }
  }
</script>