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 |
| | | :loading="loading" |
| | | border |
| | | :columns="columns" |
| | | :data="data" |
| | | ref="table" |
| | | class="mt_10" |
| | | > |
| | | </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 { getPageByStoreCouponClaimRecord,queryExportCoupon } from "@/api/coupon-store"; |
| | | import { |
| | | memberPromotionsStatusRender, |
| | | } from "@/utils/promotions"; |
| | | |
| | | export default { |
| | | name: "coupon-store-recevie", |
| | | data() { |
| | | return { |
| | | loading: true, // 表单加载状态 |
| | | searchForm: { |
| | | // 搜索框初始化对象 |
| | | pageNumber: 1, // 当前页数 |
| | | pageSize: 10, // 页面大小 |
| | | sort: "create_time", // 默认排序字段 |
| | | order: "desc", // 默认排序方式 |
| | | getType: "", // 默认排序方式 |
| | | }, |
| | | |
| | | 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); |
| | | }, |
| | | }, |
| | | { |
| | | title: "面额/折扣", |
| | | key: "price", |
| | | width: 100, |
| | | render: (h, params) => { |
| | | if (params.row.price) { |
| | | |
| | | return h("priceColorScheme", {props:{value:params.row.price,color:this.$mainColor}} ); |
| | | |
| | | } else { |
| | | return h("div", params.row.discount + "折"); |
| | | } |
| | | }, |
| | | }, |
| | | { |
| | | title: "获取方式", |
| | | width: 120, |
| | | key: "getType", |
| | | render: (h, params) => { |
| | | if (params.row.getType === "FREE") { |
| | | return h("Tag", { props: { color: "red" } }, "免费获取"); |
| | | } else if (params.row.getType === "ACTIVITY") { |
| | | return h("Tag", { props: { color: "volcano" } }, "活动获取"); |
| | | } else if (params.row.getType === "INSIDE") { |
| | | return h("Tag", { props: { color: "lime" } }, "内购"); |
| | | } else { |
| | | return h("Tag", { props: { color: "purple" } }, "未知"); |
| | | } |
| | | }, |
| | | }, |
| | | { |
| | | title: "会员优惠券状态", |
| | | width: 130, |
| | | key: "memberCouponStatus", |
| | | render: (h, params) => { |
| | | return memberPromotionsStatusRender( |
| | | h, |
| | | params.row.memberCouponStatus |
| | | ); |
| | | }, |
| | | }, |
| | | { |
| | | title: "优惠券类型", |
| | | key: "couponType", |
| | | width: 120, |
| | | render: (h, params) => { |
| | | if (params.row.couponType === "DISCOUNT") { |
| | | return h("Tag", { props: { color: "orange" } }, "打折"); |
| | | } else if (params.row.couponType === "PRICE") { |
| | | return h("Tag", { props: { color: "magenta" } }, "减免现金"); |
| | | } else { |
| | | return h("Tag", { props: { color: "purple" } }, "未知"); |
| | | } |
| | | }, |
| | | }, |
| | | { |
| | | title: "有效时间", |
| | | width: 150, |
| | | render: (h, params) => { |
| | | if ( |
| | | params?.row?.getType === "ACTIVITY" && |
| | | params?.row?.rangeDayType === "DYNAMICTIME" |
| | | ) { |
| | | return h("div", "长期有效"); |
| | | } else if (params?.row?.startTime && params?.row?.endTime) { |
| | | return h("div", { |
| | | domProps: { |
| | | innerHTML: |
| | | params.row.startTime + "<br/>" + params.row.endTime, |
| | | }, |
| | | }); |
| | | } |
| | | }, |
| | | }, |
| | | ], |
| | | data: [], // 表单数据 |
| | | total: 0, // 表单数据总数 |
| | | selectDate: [], //选中的信息 |
| | | }; |
| | | }, |
| | | |
| | | methods: { |
| | | queryExportCoupon(){ |
| | | console.log(this.selectDate.length === 0); |
| | | |
| | | if(this.selectDate.length === 0){ |
| | | this.$Message.error("必须选择时间范围,搜索后进行导出!"); |
| | | this.searchForm.startTime = null; |
| | | this.searchForm.endTime = null; |
| | | }else{ |
| | | this.searchForm.startTime = this.selectDate[0].getTime(); |
| | | this.searchForm.endTime = this.selectDate[1].getTime(); |
| | | queryExportCoupon(this.searchForm).then(res =>{ |
| | | const blob = new Blob([res], { |
| | | type: "application/vnd.ms-excel;charset=utf-8", |
| | | }); |
| | | //对于<a>标签,只有 Firefox 和 Chrome(内核) 支持 download 属性 |
| | | //IE10以上支持blob但是依然不支持download |
| | | if ("download" in document.createElement("a")) { |
| | | //支持a标签download的浏览器 |
| | | const link = document.createElement("a"); //创建a标签 |
| | | link.download = "优惠券领取记录.xlsx"; //a标签添加属性 |
| | | link.style.display = "none"; |
| | | link.href = URL.createObjectURL(blob); |
| | | document.body.appendChild(link); |
| | | link.click(); //执行下载 |
| | | URL.revokeObjectURL(link.href); //释放url |
| | | document.body.removeChild(link); //释放标签 |
| | | } else { |
| | | navigator.msSaveBlob(blob, fileName); |
| | | } |
| | | }) |
| | | } |
| | | |
| | | }, |
| | | // 初始化数据 |
| | | 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(); |
| | | }, |
| | | 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; |
| | | } |
| | | getPageByStoreCouponClaimRecord(this.searchForm).then((res) => { |
| | | this.loading = false; |
| | | if (res.code === 200) { |
| | | console.log(res); |
| | | this.data = res.data; |
| | | this.total = res.total; |
| | | } |
| | | }); |
| | | this.loading = false; |
| | | }, |
| | | }, |
| | | mounted() { |
| | | this.init(); |
| | | }, |
| | | }; |
| | | </script> |