orders.vue

<!--支付界面-->
<template>
  <div>
    <div class="idxs">
      <el-table v-for="v in tableData"
                :data="tableData.filter(data => !search || data.tradeName.toLowerCase().includes(search.toLowerCase()))"
                style="width: 100%">
        <el-table-column
            label="商品名称"
            :prop="v.tradeName">
        </el-table-column>
        <el-table-column
            label="订单号"
            :prop="v.OrderNumber">
        </el-table-column>
        <el-table-column
            label="支付方式"
            :prop="v.payment">
        </el-table-column>
        <el-table-column
            label="金额"
            :prop="v.price">
        </el-table-column>
        <el-table-column
            label="购买时间"
            :prop="v.payTime">
        </el-table-column>
        <el-table-column
            label="到期时间"
            :prop="v.maturity">
        </el-table-column>
        <el-table-column
            align="right">
          <template slot="header" slot-scope="scope">
            <el-input
                v-model="search"
                size="mini"
                placeholder="输入关键字搜索"/>
          </template>
          <template slot-scope="scope">
            <el-button type="danger" icon="el-icon-delete" circle size="mini"
                       @click="openDeleteConfirm(scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import Handder from "@/components/Handder";
import Sidebar from "@/components/sidebar";
import {
  handleDeleteOrders,
  loadOrdersList
} from "@/utils/option";

export default {
  name: "orders",
  components: {Handder, Sidebar},
  data() {
    return {
      tableData: [{
        tradeName: '',
        OrderNumber: '',
        payment: '',
        price: '',
        payTime: '',
        maturity: ''
      }],
      search: ''
    }
  },
  methods: {
    //加载订单列表
    loadOrdersListMethod() {
      loadOrdersList().then(res => {
        if (res.success) {
          this.tableData = res.data.list;
        }
      })
    },

// 弹出删除确认框
    openDeleteConfirm(tableItem) {
      let message = '此操作将永久删除【' + tableItem.name + '】标签，是否继续？';
      this.$confirm(message, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleDeleteDetails(tableItem);
      }).catch(() => {
      });
    },
    // 执行删除
    handleDeleteDetails(tableItem) {
      handleDeleteOrders(tableItem.id).then(res => {
        if (res.success) {
          this.$message({
            message: '删除标签成功！',
            type: 'success'
          });
          this.loadOrdersListMethod();
        } else {
          let title = '操作失败';
          this.$alert(res.message, title, {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      })
    }
  },
  created() {
    //加载订单列表
    this.loadOrdersListMethod()
  }
}
</script>

<style scoped>
@media screen and (min-width: 1970px) {
  .idxs {
    margin: 60px auto;
    width: calc(100% - 290px);
    max-width: 1570px;
    min-width: 1200px;
  }
}

@media screen and (max-width: 1969px) {
  .idxs {
    /*width: 1270px;*/
    /*min-width: 1000px;*/
    /*margin-top: 60px;*/
    /*margin-left: 270px;*/
    /*padding: 40px;*/
    width: calc(100% - 290px);
    max-width: 1570px;
    min-width: 1200px;
    margin: 60px auto;
  }

  .idxs {
    margin-left: 50px;
  }
}


</style>