New file |
| | |
| | | <template> |
| | | <div class="search"> |
| | | <Card> |
| | | <Form |
| | | ref="searchForm" |
| | | :model="searchForm" |
| | | inline |
| | | :label-width="75" |
| | | class="search-form mb_10" |
| | | > |
| | | <Form-item label="优惠券名称" prop="couponName"> |
| | | <Input |
| | | type="text" |
| | | v-model="searchForm.couponName" |
| | | placeholder="请输入优惠券名称" |
| | | clearable |
| | | style="width: 200px" |
| | | /> |
| | | </Form-item> |
| | | <Form-item label="会员名称" prop="memberName"> |
| | | <Input |
| | | type="text" |
| | | v-model="searchForm.memberName" |
| | | placeholder="请输入会员名称" |
| | | clearable |
| | | style="width: 200px" |
| | | /> |
| | | </Form-item> |
| | | <Form-item label="获取方式" prop="getType"> |
| | | <Select |
| | | v-model="searchForm.getType" |
| | | placeholder="请选择" |
| | | clearable |
| | | style="width: 200px" |
| | | > |
| | | <Option value="FREE">免费获取</Option> |
| | | <Option value="ACTIVITY">活动获取</Option> |
| | | </Select> |
| | | </Form-item> |
| | | <Form-item label="优惠券状态" prop="memberCouponStatus"> |
| | | <Select |
| | | v-model="searchForm.memberCouponStatus" |
| | | placeholder="请选择" |
| | | clearable |
| | | style="width: 200px" |
| | | > |
| | | <Option value="NEW">已领取</Option> |
| | | <Option value="USED">已使用</Option> |
| | | <Option value="EXPIRE">已过期</Option> |
| | | <Option value="CLOSED">已作废</Option> |
| | | </Select> |
| | | </Form-item> |
| | | <Form-item label="活动时间"> |
| | | <DatePicker |
| | | v-model="selectDate" |
| | | type="daterange" |
| | | clearable |
| | | placeholder="选择起始时间" |
| | | style="width: 200px" |
| | | ></DatePicker> |
| | | </Form-item> |
| | | <Button |
| | | @click="handleSearch" |
| | | type="primary" |
| | | icon="ios-search" |
| | | class="search-btn" |
| | | >搜索</Button |
| | | > |
| | | <Button |
| | | @click="queryExportCoupon" |
| | | type="primary" |
| | | class="search-btn"> |
| | | 导出领取记录 |
| | | </Button> |
| | | </Form> |
| | | <Table |
| | | v-if="refreshTable" |
| | | :loading="loading" |
| | | border |
| | | :columns="columns" |
| | | :data="data" |
| | | ref="table" |
| | | class="mt_10" |
| | | @on-selection-change="changeSelect" |
| | | > |
| | | </Table> |
| | | <Row type="flex" justify="end" class="mt_10"> |
| | | <Page |
| | | :current="searchForm.pageNumber" |
| | | :total="total" |
| | | :page-size="searchForm.pageSize" |
| | | @on-change="changePage" |
| | | @on-page-size-change="changePageSize" |
| | | :page-size-opts="[10, 20, 50]" |
| | | size="small" |
| | | show-total |
| | | show-elevator |
| | | show-sizer |
| | | ></Page> |
| | | </Row> |
| | | </Card> |
| | | </div> |
| | | </template> |
| | | <script> |
| | | import { getPage } from "@/api/prize-store.js" |
| | | export default { |
| | | name: "store-prize-proof", |
| | | data() { |
| | | return { |
| | | loading: true, // 表单加载状态 |
| | | searchForm: { |
| | | // 搜索框初始化对象 |
| | | pageNumber: 1, // 当前页数 |
| | | pageSize: 10, // 页面大小 |
| | | }, |
| | | selectList: [], // 多选数据 |
| | | selectCount: 0, // 多选计数 |
| | | columns: [ |
| | | // 表头 |
| | | { |
| | | title: "会员名称", |
| | | key: "memberName", |
| | | minWidth: 130, |
| | | fixed: "left", |
| | | }, |
| | | { |
| | | title: "优惠券名称", |
| | | key: "couponName", |
| | | minWidth: 100, |
| | | tooltip: true, |
| | | }, |
| | | { |
| | | title: "发布店铺", |
| | | key: "storeName", |
| | | minWidth: 100, |
| | | render: (h, params) => { |
| | | return h("div", (params.row.storeName === 'platform' && "平台") || params.row.storeName); |
| | | }, |
| | | }, |
| | | ], |
| | | data: [], // 表单数据 |
| | | total: 0, // 表单数据总数 |
| | | refreshTable: true, // 修改选中状态后刷新表格 |
| | | selectDate: [], //选中的信息 |
| | | }; |
| | | }, |
| | | methods: { |
| | | |
| | | // 初始化数据 |
| | | init() { |
| | | this.getDataList(); |
| | | }, |
| | | changePage(v) { |
| | | // 改变页码 |
| | | this.searchForm.pageNumber = v; |
| | | this.getDataList(); |
| | | }, |
| | | changePageSize(v) { |
| | | // 改变页数 |
| | | this.searchForm.pageNumber = 1; |
| | | this.searchForm.pageSize = v; |
| | | this.getDataList(); |
| | | }, |
| | | handleSearch() { |
| | | // 搜索 |
| | | this.searchForm.pageNumber = 1; |
| | | this.searchForm.pageSize = 10; |
| | | this.getDataList(); |
| | | }, |
| | | /** |
| | | * 选择优惠券 |
| | | */ |
| | | changeSelect(e) { |
| | | this.selectList = e; |
| | | this.selectCount = e.length; |
| | | if (this.getType === "ACTIVITY") this.check(); |
| | | }, |
| | | getDataList() { |
| | | // 获取数据 |
| | | this.loading = true; |
| | | if (this.selectDate && this.selectDate[0] && this.selectDate[1]) { |
| | | this.searchForm.startTime = this.selectDate[0].getTime(); |
| | | this.searchForm.endTime = this.selectDate[1].getTime(); |
| | | } else { |
| | | this.searchForm.startTime = null; |
| | | this.searchForm.endTime = null; |
| | | } |
| | | getPage(this.searchForm).then((res) => { |
| | | this.loading = false; |
| | | if (res.code === 200) { |
| | | console.log(res); |
| | | this.data = res.data.records; |
| | | this.total = res.data.total; |
| | | } |
| | | }); |
| | | this.total = this.data.length; |
| | | this.loading = false; |
| | | }, |
| | | }, |
| | | mounted() { |
| | | this.init(); |
| | | }, |
| | | }; |
| | | </script> |