SAAS-FRONTEND/src/views/coupon/Coupon_Statistics/issue.vue

<template>
  <div>
    <div>
       <el-form
        :model="queryForm"
        ref="queryForm"
        :inline="true"
        label-width="88px"
      >
       <el-form-item label="发放标识" prop="issueRemark">
        <el-input
          v-model="queryForm.issueRemark"
          placeholder="请输入标识"
          clearable
          size="small"
          
        />
       </el-form-item>
      <el-form-item label="发放类型" prop="issueType">
        <el-select
          v-model="queryForm.issueType"
          clearable
          placeholder="请选择"
        >
          <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 label="发放名称" prop="issueName">
        <el-input
          v-model="queryForm.issueName"
          placeholder="请输入名称"
          clearable
          size="small"
          
        />
       </el-form-item>
        <el-form-item label="创建时间" prop="getCreateTime">
        <el-date-picker
          style="width: 350px"
          v-model="dateRangeCreatedDate"
          size="mini"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item label="生效状态" prop="status">
        <el-select
          v-model="queryForm.status"
          clearable
          placeholder="请选择"
        >
          <el-option label="开启" value="1" ></el-option>
          <el-option label="关闭" value="0" ></el-option>
         
        </el-select>
      </el-form-item>
        <el-form-item>
          
          <el-button
            type="cyan"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button
            type="info"
            icon="el-icon-refresh"
            size="mini"
            @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
      <el-table :data="issueList">
        <af-table-column type="expand">
          <template slot-scope="props">
            <el-table
              :data="props.row.couponList"
              :show-header="false"
              :highlight-current-row="false"
              style="width: 90vw"
            >
              <af-table-column label="名城" align="left">
                <template slot-scope="scope">
                  {{ "优惠券：" }}<b>{{ scope.row.couponRemark }}</b>
                </template>
              </af-table-column>
              <af-table-column label="卡片类型" align="left">
                <template slot-scope="scope">
                  {{
                    scope.row.couponType == 1
                      ? "现金劵" + "--面值：" + scope.row.couponAmt + "元"
                      : ""
                  }}
                  {{
                    scope.row.couponType == 2
                      ? "折扣券" + "--折扣：" + scope.row.couponAmt + "% "
                      : ""
                  }}
                  {{
                    scope.row.couponType == 3
                      ? "兑换券" + "--商品：" + scope.row.couponName
                      : ""
                  }}
                </template>
              </af-table-column>
              <af-table-column label="状态" align="center">
                <template slot-scope="scope">
                  {{ scope.row.status == "1" ? "启用状态" : "" }}
                  {{ scope.row.status == "0" ? "停用状态" : "" }}
                </template>
              </af-table-column>
            </el-table>
          </template>
        </af-table-column>
        <af-table-column label="发放方式id" align="left" prop="id" v-if="false" />  
        <af-table-column label="发放方式标识" align="left" prop="issueRemark" />
         <af-table-column label="状态" align="left">
          <template slot-scope="scope">
            {{ scope.row.status == "1" ? "启用" : "" }}
            {{ scope.row.status == "0" ? "停用" : "" }}
          </template>
        </af-table-column> 
        <af-table-column label="活动名称" align="left" prop="issueName" />
        <af-table-column label="类型" align="left">
          <template slot-scope="scope">
            {{ scope.row.issueType == "1" ? "消费发放" : "" }}
            {{ scope.row.issueType == "2" ? "网页方式、二维码-静态码" : "" }}
            {{ scope.row.issueType == "3" ? "支付成功后的领取位" : "" }}
          </template>
        </af-table-column>
        <af-table-column label="发放门槛" align="left">
          <template slot-scope="scope">
            {{
              scope.row.issueType == "1"
                ? scope.row.discountThresholdAmt == "0"
                  ? "无门槛，消费都发放"
                  : "满" + scope.row.discountThresholdAmt + "元发放"
                : ""
            }}
            {{ scope.row.issueType != "1" ? "-------" : "" }}
          </template>
        </af-table-column>
        <af-table-column label="领取限制" align="left">
          <template slot-scope="scope">
            {{ scope.row.issueType == "1" ? "-------" : "" }}
            {{
              scope.row.issueType != "1"
                ? "单个用户能进入这个领取界面" +
                  scope.row.giveCount +
                  "次，一次可以领取" +
                  scope.row.giveLimit +
                  "张优惠券"
                : ""
            }}
          </template>
        </af-table-column>
        <af-table-column label="可领取时间段" align="left">
          <template slot-scope="scope">
            {{ translateTime(scope.row) }}
          </template>
        </af-table-column>
        
       
        <af-table-column
          label="操作"
          align="left"
          class-name="small-padding fixed-width"
          width="120px"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-search"
              @click="handlequeryCouponUserList(scope.row.id)"
              >查看优惠券</el-button
            >
          </template>
        </af-table-column>
      
      </el-table>
      <pagination
        :hidden="total > 0 ? false : true"
        :total="total"
        :page.sync="queryForm.pageNum"
        :limit.sync="queryForm.pageSize"
        @pagination="getIssueList"
        :autoScroll="true"
      />
    </div>

    <el-dialog
      :title="title"
      :visible.sync="open"
      width="1200px"
      append-to-body
      status-icon
    >
     <el-table :data="couponUserList">
      <af-table-column label="油站名" align="center" prop="id" v-if="jiBie==0||jiBie==1"/>
      <af-table-column
        v-if="false"
        label="优惠券id"
        align="center"
        prop="id"
      />
      <af-table-column label="用户ID" align="center" prop="unionId" v-if="false" />
      <af-table-column label="油站ID" align="center" prop="stationId" v-if="false" />
      <af-table-column label="发放方式ID" align="center" prop="issueId" v-if="false" />
      <af-table-column label="发放方式标识" align="left" prop="issueRemark" />
       <af-table-column label="活动名称" align="left" prop="issueName" />
      
      <af-table-column label="优惠券ID" align="center" prop="couponId"  v-if="false"/>
      <af-table-column
          label="优惠券标识"
          align="left"
          prop="couponRemark"
          fixed="left"
        />
        <af-table-column label="卡片类型" align="left">
          <template slot-scope="scope">
            {{
              scope.row.couponType == 1
                ? "现金劵" + "--面值：" + scope.row.couponAmt + "元"
                : ""
            }}
            {{
              scope.row.couponType == 2
                ? "折扣券" + "--折扣：" + scope.row.couponAmt + "% "
                : ""
            }}
            {{
              scope.row.couponType == 3
                ? "兑换券" + "--商品：" + scope.row.couponName
                : ""
            }}
          </template>
        </af-table-column>
       <af-table-column label="是否使用" 
      align="center"
       >
           <template slot-scope="scope">
            {{ scope.row.couponIsUsed == "0" ? "未使用" : "" }}
            {{ scope.row.couponIsUsed == "1" ? "已使用" : "" }}
            {{ scope.row.couponIsUsed == "2" ? "已核销" : "" }}
          </template>
      </af-table-column>
      <af-table-column label="是否有效"
       align="center"
      >
       <template slot-scope="scope">
            {{ scope.row.couponIsEffective == "0" ? "无效" : "" }}
            {{ scope.row.couponIsEffective == "1" ? "有效" : "" }}
          </template>
      </af-table-column>
      <af-table-column label="用户保存id" align="center" prop="userId" v-if="false" />
      <af-table-column label="手机号" align="center" prop="mobilePhone" />
      <af-table-column label="用户名" align="center" prop="blogNickName" />
      <af-table-column label="核销员手机号" align="center" prop="verificationUserPhone" />
      <af-table-column label="优惠券获取时间" align="center" prop="getCouponTime">
        <template slot-scope="scope">
          <span>{{
            parseTime(scope.row.getCouponTime, "{y}-{m}-{d} {h}:{i}:{s}")
          }}</span>
        </template>
      </af-table-column>
      <af-table-column label="优惠券截止时间" align="center" prop="couponEffectiveTime">
        <template slot-scope="scope">
          <span>{{
            parseTime(scope.row.couponEffectiveTime, "{y}-{m}-{d} {h}:{i}:{s}")
          }}</span>
        </template>
      </af-table-column>
      
    </el-table>
    <pagination
      v-show="userTotal > 0"
      :total="userTotal"
      :page.sync="queryCouponUserFrom.pageNum"
      :limit.sync="queryCouponUserFrom.pageSize"
      @pagination="queryCouponUserListByPage"
    />
    </el-dialog>
  </div>
</template>

<script>



import {
  listInfo,
  listIssue,
  queryCouponUserList,
} from "@/api/coupon";

export default {
  name: "Coupon_CreateIssue",
  data() {
    return {
      dateRangeCreatedDate: [],
      createForm: {
        issueRemark: "",
        issueName: "",
        showIdList: [],
        availableControl: "0",
        appointedDaysList: [],
        cycleDaysList: [],
        issueType: "",
        discountThresholdAmt: "0",
        couponIssueRelationList: [],
        giveLimit: 9,
        giveCount: 999999,
      },
      couponList: [],
 
      title: "",
      // 是否显示弹出层
      open: false,
      // 总条数
      total: 100,
      // 优惠券总条数
      userTotal: 100,
       // 优惠券的信息
      couponUserList: [],
      // 查询参数
      queryForm: {
        pageNum: 1,
        pageSize: 10, // 初始值只能比10大
        issueName:null,
        issueRemark:null,
        issueType:null,
        levelId:this.levelId,
        CreateTime:null,
        status:null,
      },
      queryCouponUserFrom:{
        levelId:this.levelId,
        issueId:0,
        couponId: null,
        stationId: null,
        pageNum: 1,
        pageSize: 10,
      },
      issueList: [],
      timeSelect: [
        ,
        ["周天", "周一", "周二", "周三", "周四", "周五", "周六"],
        [
          "1号",
          "2号",
          "3号",
          "4号",
          "5号",
          "6号",
          "7号",
          "8号",
          "9号",
          "10号",
          "11号",
          "12号",
          "13号",
          "14号",
          "15号",
          "16号",
          "17号",
          "18号",
          "19号",
          "20号",
          "21号",
          "22号",
          "23号",
          "24号",
          "25号",
          "26号",
          "27号",
          "28号",
          "29号",
          "30号",
          "31号",
        ],
      ],
    };
  },
  created() {
    this.init();
  },
  methods: {
    translateTime(row) {
      let timeString = "";
      const availableControleType = row.availableControl;
      if (availableControleType == 0) {
        return "用户一直都可以领取";
      }
      timeString = "用户只能在";
      if (availableControleType == 1) {
        timeString += "每周的";
      }
      if (availableControleType == 2) {
        timeString += "每月的";
      }
      if (availableControleType == 3) {
        timeString += "指定的日期 ";
      }
      if (availableControleType == 1 || availableControleType == 2) {
        row.cycleDaysList.forEach((ele) => {
          timeString += this.timeSelect[availableControleType][ele] + "、";
        });
      } else if (availableControleType == 3) {
        timeString += row.appointedDaysList.toString();
      }

      timeString = timeString.replace(/(、)$/g, "") + "可以领取劵";
      return timeString;
    },
    getIssueList() {
      listIssue(this.addDateRange(this.queryForm, this.dateRangeCreatedDate))
        .then((res) => {
          if (res.code == 200) {
            if (res.rows == null) {
              this.total = 0;
              this.issueList = [];
            } else {
              this.total = res.total;
              this.issueList = res.rows;
            }
          } else {
            throw new Error("");
          }
        })
        .catch((err) => {
          this.msgError("亲，拉取领取方式列表失败~");
        });
    },
    getCoupon() {
      listInfo({
        pageNum: 1,
        pageSize: 1000,
        status: 1,
      })
        .then((res) => {
          if (res.code == 200) {
            if (res.rows == null) {
              this.couponList = [];
            } else {
              this.couponList = res.rows;
            }
          } else {
            throw new Error("");
          }
        })
        .catch((err) => {
          this.msgError("亲，拉取优惠券列表失败~");
        });
    },
    init() {
      this.getCoupon();
      this.getIssueList();
    },
    /** 搜索按钮操作 */
    handleQuery() {
       this.queryForm.pageNum = 1;
      this.queryForm.pageSize=10;
      this.getIssueList();
    },
    /** 重置按钮操作 */
    resetQuery() {
       this.resetForm("queryForm");
      this.dateRangeCreatedDate = [];
      this.handleQuery();
    },
     /** 查看优惠券信息 */
    handlequeryCouponUserList(row) {
      console.log(row);
      console.log(this.queryCouponUserFrom.issueId);
      this.queryCouponUserFrom.issueId=row;
        
     queryCouponUserList(
       this.queryCouponUserFrom
      ).then((response) => {
        this.couponUserList = response.rows;
        this.userTotal = response.total;
        this.title = "用户优惠券信息";
        this.open = true;
      });
      
    },
   /** 分页查看信息 */
    queryCouponUserListByPage() {
      
     queryCouponUserList(
       this.queryCouponUserFrom
      ).then((response) => {
        this.couponUserList = response.rows;
        this.userTotal = response.total;
        this.title = "用户优惠券信息";
        this.open = true;
      });
      
    },
  },
};
</script>
<style lang="scss">
</style>