更新

zxl

1 天以前 f9dae30f3b5ab49655ee6a71118f66915fe4a917

更新

 seller/src/api/coupon-store.js

New file
@@ -0,0 +1,16 @@
import service from "../libs/axios";

export const getPage = (params) =>{
  return service({
    url: "/lmk/storeCoupon",
    method: "GET",
    params: params
  })
}
export const getPageByStoreCoupon = (params) =>{
  return service({
    url: "/lmk/storeCoupon/getPageByStoreCoupon",
    method: "GET",
    params: params
  })
}

 seller/src/views/store-coupon/coupon_store.vue

New file
@@ -0,0 +1,607 @@
<template>
  <div class="coupon-management">
    <!-- 搜索区域 -->
    <Card class="filter-container">
      <div class="filter-header">
        <Icon type="ios-search" size="18" />
        <span class="filter-title">筛选搜索</span>
        <div class="filter-actions">
          <Button type="primary" @click="getList" size="small">查询搜索</Button>
          <Button @click="handleResetSearch" size="small" style="margin-left: 10px;">重置</Button>
        </div>
      </div>
      <div class="filter-content">
        <Form
          :model="listQuery"
          :label-width="90"
          class="search-form"
          inline
        >
          <FormItem label="生成状态:">
            <Select
              v-model="listQuery.generateStatus"
              placeholder="全部状态"
              clearable
              style="width: 180px"
            >
              <Option value="NOT_GENERATE">没有生成</Option>
              <Option value="GENERATE">生成</Option>
            </Select>
          </FormItem>
          <FormItem label="启用状态:">
            <Select
              v-model="listQuery.status"
              placeholder="全部状态"
              clearable
              style="width: 180px"
            >
              <Option value="ENABLE">启用</Option>
              <Option value="DISABLE">禁用</Option>
            </Select>
          </FormItem>
        </Form>
      </div>
    </Card>

    <!-- 表格区域 -->
    <Card class="table-container">
      <Table
        :loading="listLoading"
        border
        :columns="tableColumns"
        :data="list"
        ref="table"
        class="coupon-table"
      >
        <!-- 生成状态列 -->
        <template slot-scope="{ row }" slot="generateStatus">
          <Tag :color="getStatusColor(row.generateStatus)">
            {{ formatGenerateStatus(row.generateStatus) }}
          </Tag>
        </template>

        <template slot-scope="{ row }" slot="action">

          <Button
            @click="detail(row)"
            style="margin-left: 10px;"
            type="primary"
            class="add-btn"
            :disabled="row.generateStatus === 'NOT_GENERATE'"
          >查看</Button>
        </template>
      </Table>
    </Card>

    <!-- 分页区域 -->
    <div class="pagination-container">
      <Page
        :current="listQuery.pageNumber"
        :page-size="listQuery.pageSize"
        :total="total"
        :page-size-opts="[10, 20, 30, 50]"
        show-elevator
        show-sizer
        show-total
        @on-change="handleCurrentChange"
        @on-page-size-change="handleSizeChange"
      />
    </div>
    <Modal
      v-model="showGeneralQrCode"
      title="二维码"
      width="800"
      :mask-closable="false"
      :loading="codeLoading"
    >
      <vue-qr
        :text="QRCodeUrl"
        :margin="0"
        colorDark="#000"
        colorLight="#fff"
        :size="150"
      ></vue-qr>
      <div slot="footer">
        <Button type="text" @click="closeGeneralQrCode">关闭</Button>
        <!--          <Button type="primary" @click="generalQrCode">确认</Button>-->
      </div>
    </Modal>

    <Modal
      v-model="showCouponStore"
      width="1200"
      :mask-closable="false"
      @on-cancel="handleCancelCouponStore"
    >
      <Table
        :loading="couponStoreLoading"
        border
        :columns="couponStoreColumns"
        :data="couponStoreData"
        ref="table"
      >
        <template slot-scope="{ row }" slot="action">
          <Button
            @click="generalQrCode(row)"
            type="primary"
            class="add-btn"
            v-if="row.claimStatus === 'NOT_CLAIM'"
          >查看二维码</Button>
        </template>
      </Table>
      <Row type="flex" justify="center" class="mt_10">
        <Page
          :current="storeCouponSingleQuery.pageNumber"
          :total="couponStoreTotal"
          :page-size="storeCouponSingleQuery.pageSize"
          @on-change="couponStoreChangePage"
          @on-page-size-change="couponStoreChangePageSize"
          :page-size-opts="[10, 20, 50]"
          size="small"
          show-total
          show-elevator
          show-sizer
        ></Page>
      </Row>
    </Modal>

  </div>
</template>

<script>
import vueQr from "vue-qr";
import { getPage, getPageByStoreCoupon} from "@/api/coupon-store.js";
// import * as API_Order from "@/api/order";
// import {promotionsScopeTypeRender, promotionsStatusRender} from "../../../utils/promotions";
// import {getPlatformCouponList} from "../../../api/promotion";


export default {
  components:{
    "vue-qr": vueQr,
  },
  name: 'CouponManagement',
  data() {
    return {
      QRCodeUrl:"",
      showGeneralQrCode:false,
      codeLoading:false,

      codeUrl: this.QRcodeBaseUrl+ '/scanpage/couponStore',

      showCouponStore:false,
      couponStoreTotal:0,
      couponStoreData:[],
      couponStoreLoading:false,
      couponStoreColumns: [
        {
          title: "优惠券名称",
          key: "couponName",
          width: 200,
          align: "center",
          tooltip: true
        },
        {
          title: "优惠券编号",
          key: "couponNo",
          width: 200,
          align: "center",
          tooltip: true
        },
        {
          title: "领取状态",
          key: "claimStatus",
          width: 200,
          align: "center",
          tooltip: true,
          render: (h, params) => {
            const status = params.row.claimStatus;
            const color = status === 'CLAIM' ? 'success' : status === 'NOT_CLAIM' ? 'default' : 'warning';
            const text = status === 'CLAIM' ? '已领取' : status === 'NOT_CLAIM' ? '未领取' : '未知';

            return h('Tag', {
              props: {
                color: color
              }
            }, text);
          }
        },
        {
          title: "操作",
          slot: "action",
          align: "center",
          width: 200,
          fixed: "right"
        }
      ],


      couponSearchForm: {
        // 搜索框初始化对象
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
        sort: "create_time", // 默认排序字段
        order: "desc", // 默认排序方式
        getType: "", // 默认排序方式
        promotionStatus:"START",
      },
      showCoupon:'',
      selectedRowId:'',

      couponData:[],
      couponLoading:false,

      list: [],
      total: 0,
      listLoading: false,
      submitLoading: false,
      storeCouponSingleQuery:{
        pageNumber: 1,
        pageSize: 10,
        refId:""
      },

      listQuery: {
        pageNumber: 1,
        pageSize: 10,
        storeId: "",
        generateStatus: "",
        status: ""
      },
      temp: {
        storeId: '',
        storeName: '',
        couponId: '',
        couponNum: 1,
        couponName: '',
      },
      dialogVisible: false,
      dialogStatus: '',
      dialogTitle: '',

      // 表单验证规则
      formRules: {
        storeId: [
          { required: true, message: '店铺不能为空', trigger: 'blur' }
        ],
        storeName: [
          { required: true, message: '店铺名称不能为空', trigger: 'blur' }
        ],
        couponId: [
          { required: true, message: '优惠劵不能为空', trigger: 'blur' }
        ],
        couponName: [
          { required: true, message: '优惠券名称不能为空', trigger: 'blur' }
        ],
        couponNum: [
          { required: true, type: 'number', message: '生成数量不能为空', trigger: 'blur' }
        ],
      },

      // 表头配置
      tableColumns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '店铺名称',
          key: 'storeName',
          align: 'center',
          ellipsis: true,
          tooltip: true
        },
        {
          title: '优惠券名称',
          key: 'couponName',
          align: 'center',
          ellipsis: true,
          tooltip: true
        },
        {
          title: '生成数量',
          key: 'couponNum',
          width: 100,
          align: 'center'
        },
        {
          title: '已领取数量',
          key: 'couponClaimNum',
          width: 120,
          align: 'center'
        },
        {
          title: '生成状态',
          slot: 'generateStatus',
          width: 120,
          align: 'center'
        },
        {
          title: '启用状态',
          key: 'status',
          width: 120,
          align: 'center',
          render: (h, params) => {
            const status = params.row.status;
            const color = status === 'ENABLE' ? 'success' : status === 'DISABLE' ? 'default' : 'warning';
            const text = status === 'ENABLE' ? '启用' : status === 'DISABLE' ? '未启用' : '未知';

            return h('Tag', {
              props: {
                color: color
              }
            }, text);
          }
        },
        {
          title: '操作',
          slot: 'action',
          width: 200,
          align: 'center'
        },
      ]
    }
  },
  methods: {
    closeGeneralQrCode(){
      this.showGeneralQrCode = false;
      this.QRCodeUrl = '';
    },
    generalQrCode(row){
      this.QRCodeUrl = '';
      this.showGeneralQrCode = true
      this.codeLoading = true;

      this.QRCodeUrl = this.codeUrl + "?id="+ row.id;

    },
    detail(row){
      console.log(row)
      this.showCouponStore = true;
      this.storeCouponSingleQuery.refId = row.id
      this.storeCouponSingleQuery.pageSize = 10
      this.storeCouponSingleQuery.pageNumber = 1
      this.getCouponStoreDataList();
    },

    couponStoreChangePage(v) {
      // 改变页码
      this.storeCouponSingleQuery.pageNumber = v;
      this.getCouponStoreDataList();
    },
    couponStoreChangePageSize(v) {
      // 改变页数
      this.storeCouponSingleQuery.pageNumber = 1;
      this.storeCouponSingleQuery.pageSize = v;
      this.getCouponStoreDataList();
    },


    getCouponStoreDataList(){
      this.couponStoreLoading = true;
      getPageByStoreCoupon(this.storeCouponSingleQuery).then((res) =>{
        this.couponStoreLoading =false;
        if (res.code === 200){
          this.couponStoreData = res.data;
          this.couponStoreTotal = res.total;
        }
      })

    },
    getCouponDataList() {
      // 获取数据
      this.couponLoading = true;
      getPlatformCouponList(this.couponSearchForm).then((res) => {
        this.couponLoading = false;
        if (res.success) {
          this.couponData = res.result.records;
          this.couponTotal = res.result.total;
        }
      });
      this.couponTotal = this.couponData.length;
      this.couponLoading = false;
    },

    // 获取列表数据
    getList() {
      this.listLoading = true;
      // 模拟API调用
      getPage(this.listQuery).then(res =>{
        this.listLoading = false;
        this.list = res.data;
        this.total = res.total;
      })
    },

    // 重置搜索条件
    handleResetSearch() {
      this.listQuery = {
        pageNumber: 1,
        pageSize: 10,
        storeName: "",
        couponName: "",
        generateStatus: "",
        status: ""
      };
      this.getList();
    },

    // 分页大小改变
    handleSizeChange(size) {
      this.listQuery.pageSize = size;
      this.listQuery.pageNumber = 1;
      this.getList();
    },

    // 当前页码改变
    handleCurrentChange(pageNumber) {
      this.listQuery.pageNumber = pageNumber;
      this.getList();
    },

    // 格式化生成状态
    formatGenerateStatus(status) {
      const statusMap = {
        'NOT_GENERATE': '没有生成',
        'GENERATE': '生成',
      };
      return statusMap[status] || '未知状态';
    },

    // 获取状态颜色
    getStatusColor(status) {
      const colorMap = {
        'GENERATE': 'success',
        'NOT_GENERATE': 'warning'
      };
      return colorMap[status] || 'default';
    },
    handleCancelCouponStore(){
      this.showCouponStore = false;
    },


    // 提交表单
    handleSubmit() {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          let form = {...this.temp};
          addStoreCoupon(form).then(res=>{
            if (res.code === 200 ){
              this.$Message.success(res.msg)
            }
            this.dialogVisible = false;
            this.getList();
          })

        }
      });
    }
  },
  mounted() {
    this.getList();
  }
}
</script>

<style scoped lang="less">
.coupon-management {
  padding: 16px;
  background: #f5f7f9;
  min-height: 100vh;
}

.filter-container {
  margin-bottom: 16px;

  .filter-header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;

    .filter-title {
      margin-left: 8px;
      font-weight: 600;
      font-size: 16px;
    }

    .filter-actions {
      margin-left: auto;
    }
  }

  .filter-content {
    .search-form {
      /deep/ .ivu-form-item {
        margin-bottom: 16px;
        margin-right: 16px;
      }
    }
  }
}

.operation-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);

  .operation-info {
    color: #999;
    font-size: 14px;
  }
}

.table-container {
  margin-bottom: 16px;

  .coupon-table {
    /deep/ .ivu-table-cell {
      padding: 8px 12px;
    }

    .action-btns {
      display: flex;
      justify-content: center;

      button {
        margin: 0 2px;
      }
    }
  }
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  background: #fff;
  padding: 12px 16px;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

// 响应式调整
@media (max-width: 768px) {
  .coupon-management {
    padding: 8px;
  }

  .filter-content .search-form {
    /deep/ .ivu-form-item {
      width: 100%;
      margin-right: 0;

      .ivu-form-item-content {
        width: 100%;

        .ivu-input, .ivu-select {
          width: 100% !important;
        }
      }
    }
  }

  .operation-container {
    flex-direction: column;
    align-items: flex-start;

    .add-btn {
      margin-bottom: 8px;
    }
  }

  .action-btns {
    flex-direction: column;

    button {
      margin: 2px 0 !important;
      width: 100%;
    }
  }
}
</style>