You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

200 lines
7.0 KiB
Vue

<template>
<div class="container">
<!-- <vab-query-form>
<vab-query-form-right-panel :span="24">
<el-form :inline="true" class="docTime" :model="queryForm" @submit.native.prevent>
<el-form-item>
<el-select v-model.trim="queryForm.status" placeholder="状态" clearable>
<el-option label="已领取" value="1"></el-option>
<el-option label="已核销" value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-select v-model.trim="queryForm.name" placeholder="优惠券名称" clearable>
<el-option label="优惠券一" value="1"></el-option>
<el-option label="优惠券二" value="2"></el-option>
<el-option label="优惠券三" value="3"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button icon="el-icon-search" type="primary" @click="queryData"></el-button>
</el-form-item>
</el-form>
</vab-query-form-right-panel>
</vab-query-form> -->
<div class="query-form">
<div class="query-form-left-panel"></div>
<div class="query-form-right-panel">
<el-form :inline="true" class="docTime" :model="queryForm" @submit.native.prevent>
<el-form-item>
<el-input v-model="queryForm.name" placeholder="分享人" clearable size="small" style="width: 150px"></el-input>
</el-form-item>
<el-form-item>
<el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
</el-form-item>
</el-form>
</div>
</div>
<el-table style="width: 100%;margin-top:5px" :header-cell-style="{background: 'linear-gradient(#6cb3ff, #1873d4)' ,color:'#eeeeee'}" ref="list" class="custom-table" highlight-current-row border v-loading="listLoading" :data="list" max-height="600px" :element-loading-text="elementLoadingText" @row-dblclick="handleGot">
<template slot="empty"></template>
<el-table-column show-overflow-tooltip align="center" min-width="100" prop="share" label="分享人"></el-table-column>
<el-table-column show-overflow-tooltip align="center" min-width="100" prop="sharePhone" label="分享人手机号码"></el-table-column>
<el-table-column show-overflow-tooltip align="center" min-width="100" prop="got" label="领取人"></el-table-column>
<el-table-column show-overflow-tooltip align="center" min-width="100" prop="getPhone" label="领取人手机号码"></el-table-column>
<el-table-column show-overflow-tooltip align="center" min-width="100" prop="getDate" label="领取时间"></el-table-column>
<el-table-column show-overflow-tooltip align="center" min-width="100" prop="docDate" label="核销时间"></el-table-column>
<el-table-column show-overflow-tooltip align="center" min-width="100" prop="isUse" label="状态">
<template #default="{ row, $index }">
<el-tag type="primary" v-if="row.isUse === 0">未核销</el-tag>
<el-tag type="danger" v-if="row.isUse === 1">已核销</el-tag>
</template>
</el-table-column>
</el-table>
<el-pagination background :current-page="queryForm.pageNum" :page-size="queryForm.pageSize" :layout="layout" :total="list.length" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
</div>
</template>
<script>
import { getList } from "@/api/discount-coupon/record.js";
export default {
data() {
return {
// 表格数据
list: [
// {
// share: "13169783956",
// got: "16168459528",
// status: "1",
// gotDate: "2022-06-22 13:54:14",
// },
// {
// share: "13169783956",
// got: "19234985968",
// status: "1",
// gotDate: "2022-06-22 12:34:17",
// },
// {
// share: "13169783956",
// got: "18019865328",
// status: "1",
// gotDate: "2022-06-22 12:24:39",
// },
// {
// share: "13169783956",
// got: "18304985207",
// status: "1",
// gotDate: "2022-06-22 11:20:05",
// },
// {
// share: "13169783956",
// got: "18320546927",
// status: "1",
// gotDate: "2022-06-22 09:59:48",
// },
// {
// share: "13411455208",
// got: "13169783956",
// status: "1",
// gotDate: "2022-06-22 08:03:32",
// },
// {
// share: "13411455208",
// got: "18321254687",
// status: "1",
// gotDate: "2022-06-22 04:26:36",
// },
// {
// share: "13411455208",
// got: "18354625842",
// status: "1",
// gotDate: "2022-06-21 23:38:19",
// },
// {
// share: "13411455208",
// got: "17246582475",
// status: "1",
// gotDate: "2022-06-21 22:19:46",
// },
// {
// share: "19316582047",
// got: "13411455208",
// status: "1",
// gotDate: "2022-06-21 22:17:15",
// },
// {
// share: "19316582047",
// got: "18204652748",
// status: "1",
// gotDate: "2022-06-21 21:36:59",
// },
// {
// share: "19316582047",
// got: "18203588454",
// status: "2",
// gotDate: "2022-06-21 21:34:13",
// HXDate: "2022-06-21 22:42:25",
// },
// {
// share: "19316582047",
// got: "18546325885",
// status: "2",
// gotDate: "2022-06-21 18:31:12",
// HXDate: "2022-06-22 14:59:47",
// },
],
listLoading: false,
elementLoadingText: "正在加载...",
// 分页
queryForm: {
pageNu: 1,
pageSize: 10,
},
total: 0,
layout: "total, sizes, prev, pager, next, jumper",
};
},
created() {
this.fetchData()
},
methods: {
// ====================== 查询 ====================== //
// 查询
queryData() {
this.queryForm.pageNum = 1;
this.fetchData();
},
// 查询领取消费记录
async fetchData() {
this.listLoading = true;
let { code, pageInfo } = await getList(this.queryForm);
this.listLoading = false;
if (code == "000000") {
this.list = Array.from(pageInfo.list);
this.total = pageInfo.total;
this.queryForm.pageNum = pageInfo.pageNum;
this.queryForm.pageSize = pageInfo.pageSize;
}
},
// 分页-一页多少条
handleSizeChange(val) {
this.queryForm.pageSize = val;
// this.fetchData()
},
// 分页-第几页
handleCurrentChange(val) {
this.queryForm.pageNum = val;
// this.fetchData()
},
// 分享人下的领取人
handleGot() {
this.$router.push("/active/got");
},
},
};
</script>
<style scoped>
@import "./styles/index.css";
</style>