pad_spa/src/pages/historicalOrder/index.vue

<template>
  <div class="mine">
    <div class="condition">
      <el-date-picker v-model="dates"
                      type="daterange"
                      range-separator="->"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"></el-date-picker>

      <el-input placeholder="请输入项目"
                class="search"
                v-model="product">
        <i slot="prefix"
           class="el-input__icon el-icon-search"></i>
      </el-input>

      <el-input placeholder="请输入优惠券"
                class="search"
                v-model="coupon">
        <i slot="prefix"
           class="el-input__icon el-icon-search"></i>
      </el-input>

      <el-input placeholder="请输入内容"
                class="search"
                v-model="searchText">
        <i slot="prefix"
           class="el-input__icon el-icon-search"></i>
      </el-input>
      <el-button type="primary"
                 class="searchButton"
                 @click="getOrderList()">搜索</el-button>
    </div>

    <div class="user-list">
      <el-table ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                height="500"
                style="width: 100%;border-radius: 8px;"
                @row-click="handleSelectionChange">
        <el-table-column label="头像"
                         width="120">
          <template slot-scope="scope">
            <div class="head-img">
              <img :src="scope.row.avatar_url"
                   alt />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="nickname"
                         label="昵称"
                         width="120"></el-table-column>
        <el-table-column prop="mobile"
                         label="联系电话"
                         show-overflow-tooltip></el-table-column>
        <el-table-column prop="order_time"
                         label="预约时间"
                         show-overflow-tooltip></el-table-column>
        <el-table-column prop="date"
                         label="状态"
                         show-overflow-tooltip>
          <template slot-scope="scope">
            <div :style="scope.row.status==0?'color: #FC3019':scope.row.status==5?'color: #A999EA':'color: #61D09D;'">{{ scope.row.status==0?'未支付':scope.row.status==5?'已取消':'待使用' }}</div>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagin">
        <el-pagination background
                       layout="prev, pager, next"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page.sync="currentPage1"
                       :total="total"></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import api from "../../server/home";

export default {
  components: {},
  data () {
    return {
      searchText: "",
      dates: "",
      coupon: "",
      limit: 10,
      total: 0,
      product: "",
      coupon: "",
      couponList: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        }
      ],
      tableData: [
        {
          date: "2022.04.25  14:30",
          name: "滴滴滴",
          headImg:
            "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png",
          phone: "13346783645",
          status: "已完成"
        },
        {
          date: "2022.04.25  14:30",
          name: "滴滴滴",
          headImg:
            "https://we-spa.oss-cn-shenzhen.aliyuncs.com/pad_clerk/home/unpaid.png",
          phone: "13346783645",
          status: "已完成"
        }
      ],
      currentPage1: 1,
      multipleSelection: ""
    };
  },
  computed: {},
  watch: {},

  methods: {
    // 获取订单列表
    getOrderList () {
      let start_date = "",
        end_date = "";
      if (this.dates && this.dates.length > 0) {
        start_date = utils.formatTime(this.dates[0], "yyyy-MM-dd");
        end_date = utils.formatTime(this.dates[1], "yyyy-MM-dd");
      }
      let params = {
        page: this.currentPage1,
        limit: this.limit,
        keywords: this.searchText,
        project_name: this.product,
        coupon_name: this.coupon,
        start_date: start_date,
        end_date: end_date
      };
      api.getOrderList(params).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.list;
          this.total = res.data.total;
        }
      });
    },

    handleCurrentChange (e) {
      this.currentPage1 = e;
      this.getOrderList();
    },

    handleSizeChange (val) {
    },
    handleSelectionChange (row, column, event) {
      this.$router.push({
        path: "/historicalOrder/details",
        query: {
          id: row.id
        }
      });
    }
  },

  created () {
    this.getOrderList();
  },

  mounted () { }
};
</script>

<style lang='less' scoped>
.mine {
  .condition {
    display: flex;
    .coupon-select {
      width: 174px;
      margin-left: 18px;
    }
    .search {
      width: 152px;
      margin-left: 18px;
    }

    .searchButton {
      margin-left: 18px;
      width: 68px;
      background: #fa7d22;
      border-radius: 2px;
      border-color: #fa7d22;
    }
  }
  .user-list {
    margin-top: 18px;
    padding: 0 12px;
    width: 100%;
    background: #ffffff;
    box-shadow: 0px 2px 4px 0px rgba(184, 191, 198, 0.2);
    border-radius: 8px;
    .head-img {
      width: 36px;
      height: 36px;
      border-radius: 50%;

      img {
        width: 100%;
        height: 100%;
      }
    }
    .pagin {
      padding: 20px 0;
      .el-pagination {
        text-align: center;
      }
    }
    /deep/ .el-table th > .cell {
      font-size: 14px !important;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 20px;
    }
    /deep/ .el-table td,
    .el-table th.is-leaf {
      border-bottom: none;
    }
  }
  .color0 {
    color: #fc3019;
  }
  .color1 {
    color: #3ef3ed;
  }
  .color2 {
    color: #00eeee;
  }
  .color3 {
    color: #61d09d;
  }
  .color4 {
    color: #3115cc;
  }
  .color5 {
    color: #fc3019;
  }
  .color6 {
    color: #a999ea;
  }
}
</style>