店铺材料

zxl

1 天以前 dc0dc18ad8a64b3f2f2939deb9555fa32999a365

店铺材料

 seller/src/views/activity/store-prize-proof

New file
@@ -0,0 +1,353 @@
<template>
  <div class="search">
    <Card>
      <Button style="margin-bottom: 10px" @click="back()">返回</Button>
      <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>
  export default {
    name: "store-prize-proof",
    data() {
      return {
        loading: true, // 表单加载状态
        searchForm: {
          // 搜索框初始化对象
          pageNumber: 1, // 当前页数
          pageSize: 10, // 页面大小
          sort: "create_time", // 默认排序字段
          order: "desc", // 默认排序方式
          getType: "", // 默认排序方式
          couponId: this.$route.query.couponId, // 优惠券id
        },
        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);
            },
          },
          {
            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: "使用门槛",
            key: "consumeThreshold",
            width: 130,
          },
          {
            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: "品类描述",
            key: "scopeType",
            width: 120,
            render: (h, params) => {
              return promotionsScopeTypeRender(h, params);
            },
          },
          {
            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, // 表单数据总数
        refreshTable: true, // 修改选中状态后刷新表格
        selectDate: [], //选中的信息
      };
    },
    props: {
      promotionStatus: {
        type: String,
        default: "",
      },
    },
    watch: {
      $route(e) {
        // 监听路由，参数变化调取接口
        this.searchForm.couponId = e.query.couponId;
        if (this.couponId) {
          this.getDataList();
        } else {
          this.$refs.form.resetFields();
        }
      },
    },
    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);
            }
          })
        }

      },
      back() {
        this.$store.commit("removeTag", "coupon-receive");
        this.$router.go(-1);
      },
      check() {
        // 选中的优惠券
        this.$emit("selected", this.selectList);
      },
      // 初始化数据
      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;
        }
        getCouponReceiveList(this.searchForm).then((res) => {
          this.loading = false;
          if (res.success) {
            console.log(res);
            this.data = res.result.records;
            this.total = res.result.total;
          }
        });
        this.total = this.data.length;
        this.loading = false;
      },
    },
    mounted() {
      this.init();
    },
  };
</script>