订单管理系统 - 查看订单列表

<template>
  <div class="order-wrap">
    <h3>您的产品</h3>
    <div class="order-list-choose">
      <div class="order-list-option">
        选择产品：
        <v-selection :selections="products" @on-change="productChange"></v-selection>
      </div>
<pre><code>  &lt;div class=&quot;order-list-option&quot;&gt;
    开始日期：
    &lt;v-date-picker @on-change=&quot;getStartDate&quot;&gt;&lt;/v-date-picker&gt;
  &lt;/div&gt;

  &lt;div class=&quot;order-list-option&quot;&gt;
    结束日期：
    &lt;v-date-picker @on-change=&quot;getEndDate&quot;&gt;&lt;/v-date-picker&gt;
  &lt;/div&gt;

  &lt;div class=&quot;order-list-option&quot;&gt;
    关键词：
    &lt;input type=&quot;text&quot; v-model.lazy=&quot;query&quot; class=&quot;order-query&quot;&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;order-list-table&quot;&gt;
  &lt;table&gt;
    &lt;tr&gt;
      &lt;th v-for=&quot;head in tableHeads&quot; :key=&quot;head&quot; @click=&quot;changeOrderType(head)&quot; :class=&quot;{active:head.active}&quot;&gt;
        {{ head.label }}
      &lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr v-for=&quot;item in tableData&quot; :key=&quot;item.period&quot;&gt;
      &lt;td v-for=&quot;head in tableHeads&quot; :key=&quot;head&quot;&gt;
        {{ item[head.key] }}
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
&lt;/div&gt;
</code></pre>
  </div>
</template>
<script type="text/ecmascript-6">
  import VSelection from '../components/base/selection'
  import VDatePicker from '../components/base/datepicker'
  import _ from 'lodash'

  export default {
    components: {
      VSelection,
      VDatePicker
    },
    data () {
      return {
        query: '',
        productId: 0,
        startDate: '', // 开始日期
        endDate: '',   // 结束日期
        products: [
          {
            label: '数据统计',
            value: 0
          },
          {
            label: '数据预测',
            value: 1
          },
          {
            label: '流量分析',
            value: 2
          },
          {
            label: '广告发布',
            value: 3
          }
        ],
        tableHeads: [
          {
            label: '订单号',
            key: 'orderId'
          },
          {
            label: '购买产品',
            key: 'product'
          },
          {
            label: '版本类型',
            key: 'version'
          },
          {
            label: '有效时间',
            key: 'period'
          },
          {
            label: '购买日期',
            key: 'date'
          },
          {
            label: '数量',
            key: 'buyNum'
          },
          {
            label: '总价',
            key: 'amount'
          }
        ],
        currentOrder: 'asc',
        tableData: [] // 存放列表数据
      }
    },
    watch: {
      query () {
        console.log('on query change')
        this.getList()
      }
    },
    methods: {
      productChange (obj) {
        // console.log(obj)
        this.productId = obj.value
        this.getList()
      },
      getStartDate (date) {
        this.startDate = date
        this.getList()
      },
      getEndDate (date) {
        this.endDate = date
        this.getList()
      },
      getList () {
        let reqParams = {
          query: this.query,
          productId: this.productId,
          startDate: this.startDate,
          endDate: this.endDate
        }
        this.$http.post('/api/getOrderList', reqParams)
        .then((res) => {
          this.tableData = res.data.list
        }, (err) => {

        })
      },
      // 排序(正、反)
      changeOrderType (headItem) {
        this.tableHeads.map((item) => {
          item.active = false
          return item
        })
        headItem.active = true
        if (this.currentOrder === 'asc') {
          this.currentOrder = 'desc'
        } else if (this.currentOrder === 'desc') {
          this.currentOrder = 'asc'
        }
        this.tableData = _.orderBy(this.tableData, headItem.key, this.currentOrder)
      }
    },
    mounted () {
      this.getList()
    }
  }
</script>
<style scoped>
  .order-wrap {
    width: 1200px;
    min-height: 800px;
    margin: 20px auto;
    overflow: hidden;
  }

  .order-wrap h3 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
  }

  .order-query {
    height: 25px;
    line-height: 25px;
    border: 1px solid #e3e3e3;
    outline: none;
    text-indent: 10px;
  }

  .order-list-option {
    display: inline-block;
    padding-left: 15px;
  }

  .order-list-option:first-child {
    padding-left: 0;
  }

  .order-list-table {
    margin-top: 20px;
  }

  .order-list-table table {
    width: 100%;
    background: #fff;
  }

  .order-list-table td,
  .order-list-table th {
    border: 1px solid #e3e3e3;
    text-align: center;
    padding: 10px 0;
  }

  .order-list-table th {
    background: linear-gradient(248deg, #ff8c1f, #ff6a00);
    color: #fff;
    border: 1px solid linear-gradient(248deg, #ff8c1f, #ff6a00);
    cursor: pointer;
  }

  .order-list-table th.active {
    background: #35495e;
  }
</style>