moxuan_takeaway_manage/src/views/coupon/coupon.vue

<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="平台优惠券" name="seventh">
        <div style="display: flex;justify-content: space-between;">
          <div>
            <span>优惠券状态：</span>
            <el-select
              :clearable="true"
              @change="refreshShop"
              v-model="selectState"
              placeholder="请选择状态"
            >
              <el-option label="待审核" :value="0"></el-option>
              <el-option label="已发布" :value="1"></el-option>
              <el-option label="已撤销" :value="2"></el-option>
            </el-select>
          </div>
          <div>
            <el-button
              size="mini"
              type="primary"
              icon="document"
              @click="refresh"
              >刷新</el-button
            >
            <el-button
              style="margin:0 0 20px 10px;"
              :disabled="!isAuth('coupon:add')"
              size="mini"
              type="primary"
              icon="document"
              @click="classifyStair()"
              >添加优惠券</el-button
            >
            <el-button
              style="margin:0 0 20px 10px;"
              :disabled="!isAuth('coupon:log')"
              size="mini"
              type="primary"
              icon="document"
              @click="couponLog()"
              >查看优惠券日志</el-button
            >
          </div>
        </div>
        <el-table v-loading="tableDataLoading" :data="tableData.list">
          <el-table-column prop="couponId" label="编号" width="80">
          </el-table-column>
          <el-table-column prop="couponName" label="优惠券名称">
          </el-table-column>
          <el-table-column prop="couponPicture" label="图片">
            <template slot-scope="scope">
              <img
                :src="scope.row.couponPicture"
                alt=""
                width="40"
                height="40"
              />
            </template>
          </el-table-column>
          <el-table-column prop="money" label="优惠券金额"> </el-table-column>
          <el-table-column prop="minMoney" label="最低消费"> </el-table-column>
          <el-table-column prop="endDate" label="有效天数"> </el-table-column>
          <el-table-column prop="needIntegral" label="兑换积分">
          </el-table-column>
          <el-table-column prop="state" label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.state == 0">待审核</span>
              <span v-if="scope.row.state == 1">已发布</span>
              <span v-if="scope.row.state == 2">已撤销</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="250">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.state == 1"
                :disabled="!isAuth('coupon:update')"
                size="mini"
                type="primary"
                icon="document"
                @click="songCoupon(scope.row)"
                >赠送
              </el-button>
              <el-button
                v-if="superAdmin == 1 && scope.row.state == 1"
                size="mini"
                type="primary"
                :disabled="!isAuth('coupon:update')"
                @click="compile(scope.$index, scope.row)"
                >编辑
              </el-button>
              <el-button
                v-if="scope.row.state == 1"
                size="mini"
                type="danger"
                :disabled="!isAuth('coupon:delete')"
                @click="deleteStair(scope.row)"
                >删除
              </el-button>

              <el-button
                v-if="superAdmin == 1 && scope.row.state == 0"
                size="mini"
                type="primary"
                @click="announceStair(scope.row, 1)"
                >发布
              </el-button>
              <el-button
                v-if="superAdmin == 1 && scope.row.state == 0"
                size="mini"
                type="danger"
                @click="announceStair(scope.row, 2)"
                >撤销
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="text-align: center;margin-top: 10px;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="limit"
            :current-page="page"
            layout="total,sizes, prev, pager, next"
            :total="tableData.totalCount"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="商家优惠券" name="youhuiquan">
        <div style="position: relative;display: inline-block;margin: 10px 0px;">
          <span>商户名称：</span>
          <el-input
            style="width: 200px;"
            @keydown.enter.native="animeDat"
            placeholder="请输入商户名称"
            v-model="shopName"
          >
          </el-input
          >&nbsp;&nbsp;
          <el-button
            size="mini"
            type="primary"
            icon="document"
            @click="refreshShop"
            >查询</el-button
          >
          <el-button
            style="margin:0 0 20px 10px;"
            :disabled="!isAuth('coupon:add')"
            size="mini"
            type="primary"
            icon="document"
            @click="classifyStair()"
            >添加优惠券</el-button
          >
        </div>
        <el-table v-loading="tableDataLoading" :data="tableData.list">
          <el-table-column prop="couponId" label="编号" width="80">
          </el-table-column>
          <el-table-column prop="shopName" label="商户名称"> </el-table-column>
          <el-table-column prop="couponName" label="优惠券名称">
          </el-table-column>
          <el-table-column prop="couponPicture" label="图片">
            <template slot-scope="scope">
              <img
                :src="scope.row.couponPicture"
                alt=""
                width="40"
                height="40"
              />
            </template>
          </el-table-column>
          <el-table-column prop="money" label="优惠券金额"> </el-table-column>
          <el-table-column prop="minMoney" label="最低消费"> </el-table-column>
          <el-table-column prop="endDate" label="有效天数"> </el-table-column>
          <!-- <el-table-column prop="needIntegral" label="兑换积分">
					</el-table-column> -->
          <el-table-column label="操作" width="250">
            <template slot-scope="scope">
              <el-button
                style="margin-left:15px;"
                :disabled="!isAuth('coupon:update')"
                size="mini"
                type="primary"
                icon="document"
                @click="songCoupon(scope.row)"
                >赠送</el-button
              >
              <el-button
                size="mini"
                type="primary"
                :disabled="!isAuth('coupon:update')"
                @click="compile(scope.$index, scope.row)"
                >编辑
              </el-button>
              <el-button
                size="mini"
                type="danger"
                :disabled="!isAuth('coupon:delete')"
                @click="deleteStair(scope.row)"
                >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="text-align: center;margin-top: 10px;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="limit"
            :current-page="page"
            layout="total,sizes, prev, pager, next"
            :total="tableData.totalCount"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- 查看优惠券日志 -->
    <el-dialog
      title="查看优惠券日志"
      custom-class="couponLog"
      :visible.sync="couponLogVisible"
      center
    >
      <el-table v-loading="couponLogLoading" :data="couponLogTable">
        <el-table-column prop="couponId" label="编号" width="80">
        </el-table-column>
        <el-table-column prop="couponName" label="优惠券名称">
        </el-table-column>
        <el-table-column prop="couponPicture" label="图片">
          <template slot-scope="scope">
            <img :src="scope.row.couponPicture" alt="" width="40" height="40" />
          </template>
        </el-table-column>
        <el-table-column prop="money" label="优惠券金额"> </el-table-column>
        <el-table-column prop="minMoney" label="最低消费"> </el-table-column>
        <el-table-column prop="endDate" label="有效天数"> </el-table-column>
        <el-table-column prop="needIntegral" label="兑换积分">
        </el-table-column>
        <el-table-column prop="state" label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.state == 0">待审核</span>
            <span v-if="scope.row.state == 1">已发布</span>
            <span v-if="scope.row.state == 2">已撤销</span>
          </template>
        </el-table-column>
        <el-table-column prop="content" label="操作内容"> </el-table-column>
        <el-table-column prop="username" label="操作人"> </el-table-column>
        <el-table-column prop="createTime" label="操作时间"> </el-table-column>
      </el-table>
      <div style="text-align: center;margin-top: 10px;">
        <el-pagination
          @size-change="couponLogSize"
          @current-change="couponLogCurrent"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="couponLogLimit"
          :current-page="couponLogPage"
          layout="total,sizes, prev, pager, next"
          :total="couponLogTotal"
        >
        </el-pagination>
      </div>
      <!-- <div slot="footer" class="dialog-footer">
        <el-button @click="couponLogVisible = false">取 消</el-button>
        <el-button type="primary" @click="startCouponLog()">确 定</el-button>
      </div> -->
    </el-dialog>

    <!-- 添加优惠券 -->
    <el-dialog
      customClass="discount"
      title="添加优惠券"
      :visible.sync="dialogFormVisible"
      center
    >
      <div style="display: flex;justify-content: center;">
        <div>
          <div style="margin-bottom: 10px;" v-if="this.shopId == -1">
            <span style="width:150px;display: inline-block;text-align: right;"
              >商铺名称：</span
            >
            <el-input
              v-model="shopNames"
              placeholder="请选择商铺"
              style="width:50%;"
              @focus="selectUserId"
            ></el-input>
          </div>
          <div style="margin-bottom: 10px;">
            <span style="width: 150px;display: inline-block;text-align: right;"
              >优惠券名称：</span
            >
            <el-input
              style="width:50%;"
              v-model="couponName"
              type="text"
              placeholder="请输入优惠券名称"
            ></el-input>
          </div>
          <div style="margin-bottom: 10px;">
            <span style="width: 150px;display: inline-block;text-align: right;"
              >图片：</span
            >
            <!-- <el-input style="width:50%;" v-model="couponPicture" type="text" placeholder="请输入图片"></el-input> -->
            <div
              style=" width:148px;height:148px;background-color: #fbfdff; border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 148px;display: inline-block;"
            >
              <el-upload
                class="avatar-uploader"
                v-model="couponPicture"
                :action="Tupiantou"
                :show-file-list="false"
                :on-success="handleAvatarSuccess1"
                :before-upload="beforeAvatarUpload"
              >
                <img
                  v-if="couponPicture"
                  :src="couponPicture"
                  class="avatar"
                  style="width: 148px;height: 148px;"
                />
                <i
                  v-else
                  class="el-icon-plus avatar-uploader-icon"
                  style="font-size: 28px;color: #8c939d"
                ></i>
              </el-upload>
            </div>
          </div>
          <div style="margin-bottom: 10px;">
            <span style="width: 150px;display: inline-block;text-align: right;"
              >优惠券金额：</span
            >
            <el-input
              style="width:50%;"
              v-model="money"
              type="text"
              placeholder="请输入优惠券金额"
            ></el-input>
          </div>
          <div style="margin-bottom: 10px;">
            <span style="width: 150px;display: inline-block;text-align: right;"
              >最低消费：</span
            >
            <el-input
              style="width:50%;"
              v-model="minMoney"
              type="text"
              placeholder="请输入最低消费"
            ></el-input>
          </div>
          <div style="margin-bottom: 10px;">
            <span style="width: 150px;display: inline-block;text-align: right;"
              >有效天数：</span
            >
            <el-input
              style="width:50%;"
              v-model="endDate"
              type="text"
              placeholder="请输入有效天数"
            ></el-input>
          </div>
          <div style="margin-bottom: 10px;" v-if="this.shopId == 0">
            <span style="width: 150px;display: inline-block;text-align: right;"
              >兑换积分：</span
            >
            <el-input
              style="width:50%;"
              v-model="needIntegral"
              type="text"
              placeholder="请输入兑换积分"
            ></el-input>
          </div>
          <span style="color: red;margin-left: 32px;"
            >兑换积分初始值为100，是必填项，不填则默认向所有用户发券</span
          >
        </div>
        <div v-loading="allShopLoading" v-if="this.shopId == 0">
          <div style="width: 500px;height: 200px;">
            <div style="margin-bottom: 10px;">
              <span
                style="width: 150px;display: inline-block;text-align: right;"
                >使用范围：</span
              >
              <el-checkbox
                @change="checkChange($event, '不限制')"
                v-model="allMerchant"
                >不限制</el-checkbox
              >
              <el-checkbox
                @change="checkChange($event, '部分商家')"
                v-model="someMerchant"
                >部分商家</el-checkbox
              >
            </div>
            <div style="margin:0 0 10px 80px;" v-if="someMerchant">
              <el-input
                v-model="selectName"
                placeholder="请输入商铺名称"
                style="width:50%;"
                clearable
                @change="shopNameSeache"
              ></el-input>
              <!-- <el-button
              style="margin-left: 15px"
              size="medium"
              type="primary"
              icon="document"
              @click="shopNameSeache"
              >查询
            </el-button> -->
            </div>
            <div
              v-if="someMerchant"
              style="margin:0 0 10px 80px;height: 300px;border: 1px solid #ccc;overflow: auto;"
              @scroll="handleTreeScroll"
            >
              <el-tree
                class="shop"
                ref="tree"
                :data="dataTree"
                show-checkbox
                node-key="shopId"
                :props="defaultProps"
                @check="treeCheck"
              ></el-tree>
              <div style="text-align: center;" v-if="allShopListShow">
                数据已全部加载完
              </div>
            </div>
            <div style="margin-bottom: 10px;" v-if="someMerchant">
              <span
                style="width: 130px;display: inline-block;text-align: right;"
                >已选择</span
              ><span style="color: red;">{{ selectMerchant.length }}</span
              >个商家
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="StairNoticeTo()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改优惠券 -->
    <el-dialog
      customClass="discount"
      title="修改优惠券"
      :visible.sync="dialogFormVisible1"
      center
      :before-close="compileClose"
    >
      <div style="display: flex;justify-content: center;">
        <el-form :model="form">
          <div style="display: flex;justify-content: center;">
            <div>
              <el-form-item
                label="商铺名称："
                :label-width="formLabelWidth"
                v-if="this.shopId == -1"
              >
                <el-input
                  v-model="shopNames"
                  placeholder="请选择商铺"
                  style="width:50%;"
                  @focus="selectUserId"
                >
                </el-input>
              </el-form-item>
              <el-form-item label="优惠券名称：" :label-width="formLabelWidth">
                <el-input
                  v-model="form.couponName"
                  style="width:65%;"
                ></el-input>
              </el-form-item>
              <el-form-item label="图片：" :label-width="formLabelWidth">
                <!-- <el-input v-model="form.campusDetails" style="width:65%;"></el-input> -->
                <div
                  style=" width:148px;height:148px;background-color: #fbfdff; border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 148px;display: inline-block;"
                >
                  <el-upload
                    class="avatar-uploader"
                    v-model="form.couponPicture"
                    :action="Tupiantou"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess2"
                    :before-upload="beforeAvatarUpload"
                  >
                    <img
                      v-if="form.couponPicture"
                      :src="form.couponPicture"
                      class="avatar"
                      style="width: 148px;height: 148px;"
                    />
                    <i
                      v-else
                      class="el-icon-plus avatar-uploader-icon"
                      style="font-size: 28px;color: #8c939d"
                    ></i>
                  </el-upload>
                </div>
              </el-form-item>
              <el-form-item label="优惠券金额：" :label-width="formLabelWidth">
                <el-input v-model="form.money" style="width:65%;"></el-input>
              </el-form-item>
              <el-form-item label="最低消费：" :label-width="formLabelWidth">
                <el-input v-model="form.minMoney" style="width:65%;"></el-input>
              </el-form-item>
              <el-form-item label="有效天数：" :label-width="formLabelWidth">
                <el-input v-model="form.endDate" style="width:65%;"></el-input>
              </el-form-item>
              <el-form-item
                label="兑换积分："
                :label-width="formLabelWidth"
                v-if="this.shopId == 0"
              >
                <el-input
                  v-model="form.needIntegral"
                  style="width:65%;"
                ></el-input>
              </el-form-item>
              <span style="color: red;margin-left: 32px;"
                >兑换积分初始值为100，是必填项，不填则默认向所有用户发券</span
              >
            </div>
            <div v-loading="allShopLoading" v-if="this.shopId == 0">
              <div style="width: 500px;height: 200px;">
                <div style="margin-bottom: 10px;">
                  <span
                    style="width: 150px;display: inline-block;text-align: right;"
                    >使用范围：</span
                  >
                  <el-checkbox
                    @change="checkChange($event, '不限制')"
                    v-model="allMerchant"
                    >不限制</el-checkbox
                  >
                  <el-checkbox
                    @change="checkChange($event, '部分商家')"
                    v-model="someMerchant"
                    >部分商家</el-checkbox
                  >
                </div>
                <div style="margin:0 0 10px 80px;" v-if="someMerchant">
                  <el-input
                    v-model="selectName"
                    placeholder="请输入商铺名称"
                    style="width:50%;"
                    clearable
                    @change="shopNameSeache"
                  ></el-input>
                  <!-- <el-button
              style="margin-left: 15px"
              size="medium"
              type="primary"
              icon="document"
              @click="shopNameSeache"
              >查询
            </el-button> -->
                </div>
                <div
                  v-if="someMerchant"
                  style="margin:0 0 10px 80px;height: 300px;border: 1px solid #ccc;overflow: auto;"
                  @scroll="handleTreeScroll"
                >
                  <el-tree
                    class="shop"
                    ref="tree"
                    :data="dataTree"
                    show-checkbox
                    node-key="shopId"
                    :props="defaultProps"
                    @check="treeCheck"
                  ></el-tree>
                  <div style="text-align: center;" v-if="allShopListShow">
                    数据已全部加载完
                  </div>
                </div>
                <div style="margin-bottom: 10px;" v-if="someMerchant">
                  <span
                    style="width: 130px;display: inline-block;text-align: right;"
                    >已选择</span
                  ><span style="color: red;">{{ selectMerchant.length }}</span
                  >个商家
                </div>
              </div>
            </div>
          </div>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="CompileNoticeTo()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 赠送优惠券-->
    <el-dialog title="赠送优惠券" :visible.sync="dialogFormVisible0" center>
      <div style="margin: 10px 0;">
        <span style="width: 200px;display: inline-block;text-align: right;"
          >选择用户：</span
        >
        <el-tag
          :key="tag"
          v-for="(tag, j) in userNameList"
          closable
          :disable-transitions="false"
          @close="couponIdClose1(tag, j)"
        >
          {{ tag }}
        </el-tag>
        <el-button class="button-new-tag" size="small" @click="couponIdBtn1()"
          >添加</el-button
        >
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible0 = false">取 消</el-button>
        <el-button type="primary" @click="songNoticeTo()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 用户列表 -->
    <el-dialog
      title="用户列表"
      :visible.sync="dialogFormVisible5"
      center
      width="80%"
    >
      <el-input
        style="width: 150px;"
        @keydown.enter.native="select1"
        clearable
        placeholder="请输入手机号"
        v-model="phone"
      >
      </el-input
      >&nbsp;&nbsp;&nbsp;&nbsp;
      <el-input
        style="width: 150px;"
        @keydown.enter.native="select1"
        clearable
        placeholder="请输入昵称"
        v-model="nickName"
      >
      </el-input>
      <div style="display: inline-block;">
        <el-button
          style="margin-left:15px;"
          size="mini"
          type="primary"
          icon="document"
          @click="select1"
          >查询
        </el-button>
        <el-button
          style="margin-left:15px;"
          size="mini"
          type="primary"
          icon="document"
          @click="cleans1"
          >重置
        </el-button>
      </div>
      <el-button
        style="margin-left:15px;"
        :disabled="userIdList.length <= 0"
        size="mini"
        type="primary"
        icon="document"
        @click="closes2()"
        >确定</el-button
      >
      <el-table
        v-loading="tableDataLoading1"
        @selection-change="changeFun1"
        :data="userData.list"
        :row-key="
          row => {
            return row.userId;
          }
        "
        ref="multipleTable"
      >
        <el-table-column :reserve-selection="true" type="selection" fixed>
        </el-table-column>
        <el-table-column prop="userId" label="编号"> </el-table-column>
        <el-table-column fixed prop="nickName" label="昵称">
          <template slot-scope="scope">
            <span style="color: #f56c6c;">{{
              scope.row.nickName ? scope.row.nickName : "未设置"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="图像">
          <template slot-scope="scope">
            <img
              v-if="scope.row.avatar == null"
              src="~@/assets/img/avatar.png"
              alt=""
              width="40"
              height="40"
            />
            <img v-else :src="scope.row.avatar" alt="" width="40" height="40" />
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="手机号" width="120">
          <template slot-scope="scope">
            <span
              style="color: #4f9dec;cursor: pointer;"
              @click="updates(scope.row)"
              >{{ scope.row.phone ? scope.row.phone : "未绑定" }}</span
            >
          </template>
        </el-table-column>
        <el-table-column prop="platform" label="来源"> </el-table-column>
        <el-table-column prop="createTime" label="创建时间"> </el-table-column>
      </el-table>
      <div style="text-align: center;margin-top: 10px;">
        <el-pagination
          @size-change="handleSizeChange2"
          @current-change="handleCurrentChange2"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="size1"
          :current-page="page1"
          layout="total,sizes, prev, pager, next,jumper"
          :total="userData.totalCount"
        >
        </el-pagination>
      </div>
    </el-dialog>
    <!-- 商户列表 -->
    <el-dialog
      title="商户列表"
      :visible.sync="dialogFormVisible11"
      center
      width="80%"
    >
      <el-input
        style="width: 150px;"
        @keydown.enter.native="select11"
        clearable
        placeholder="请输入商户名称"
        v-model="shopName1"
      >
      </el-input
      >&nbsp;&nbsp;&nbsp;&nbsp;
      <div style="display: inline-block;">
        <el-button
          style="margin-left:15px;"
          size="mini"
          type="primary"
          icon="document"
          @click="select11"
          >查询
        </el-button>
        <el-button
          style="margin-left:15px;"
          size="mini"
          type="primary"
          icon="document"
          @click="cleans11"
          >重置
        </el-button>
      </div>
      <el-table v-loading="tableDataLoading11" :data="shopData.list">
        <el-table-column label="编号" prop="shopId" width="80" fixed="left">
        </el-table-column>
        <el-table-column label="名称" prop="shopName" fixed="left">
        </el-table-column>
        <el-table-column label="店铺手机号" prop="phone" width="120">
        </el-table-column>
        <el-table-column label="商铺类型" prop="shopTypeName">
        </el-table-column>
        <el-table-column prop="shopCover" label="封面图" width="150">
          <template slot-scope="scope">
            <div style="display: inline-block; margin: 3px;">
              <el-popover placement="top-start" title="" trigger="hover">
                <img
                  style="width: 50px; height: 50px"
                  :src="scope.row.shopCover"
                  alt=""
                  slot="reference"
                />
                <img
                  style="width: 300px; height: auto"
                  :src="scope.row.shopCover"
                  alt=""
                />
              </el-popover>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="营业状态" prop="putawayFlag">
          <template slot-scope="scope">
            <span>{{ scope.row.putawayFlag == 0 ? "上班啦" : "打烊啦" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="配送费" prop="errandMoney" width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.errandMoney ? scope.row.errandMoney : 0 }}</span>
            <el-button
              size="mini"
              type="danger"
              style="color: #4f9dec;background: #fff;border: none;"
              :disabled="!isAuth('userList:updateMoney')"
              @click="rechargenone(scope.row, 1)"
              >修改配送费
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          label="配送距离"
          prop="distributionDistance"
          width="150"
        >
          <template slot-scope="scope">
            <span>{{
              scope.row.distributionDistance
                ? scope.row.distributionDistance
                : 0
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="商铺标签" prop="shopLable"> </el-table-column>
        <el-table-column label="开店时间" prop="businessHours">
        </el-table-column>
        <el-table-column label="闭店时间" prop="lockHours"> </el-table-column>
        <el-table-column label="商铺评分" prop="shopScore"> </el-table-column>
        <el-table-column label="商铺销量" prop="shopSales"> </el-table-column>
        <el-table-column label="商家公告" prop="shopNotice" width="150">
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button
              style="margin-left:15px;"
              size="mini"
              type="primary"
              icon="document"
              @click="closes3(scope.row)"
            >
              确定</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: center;margin-top: 10px;">
        <el-pagination
          @size-change="handleSizeChangeS"
          @current-change="handleCurrentChangeS"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="size1"
          :current-page="page1"
          layout="total,sizes, prev, pager, next,jumper"
          :total="shopData.totalCount"
        >
        </el-pagination>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userId: "",
      superAdmin: "", // 判断是否为超级管理员 1是超级管理员 0不是超级管理员
      selectState: "",
      limit: 10,
      page: 1,
      size1: 10,
      page1: 1,
      checkBoxData: [], //多选框选择的值
      formLabelWidth: "200px",
      tableDataLoading: false,
      dialogFormVisible: false,
      dialogFormVisible1: false,
      dialogFormVisible0: false,
      dialogFormVisible5: false,
      tableDataLoading1: false,
      tableData: [],
      couponName: "",
      couponPicture: "",
      endDate: "",
      minMoney: "",
      money: "",
      needIntegral: "100",

      // 使用范围
      allMerchant: false,
      someMerchant: false,
      dataTree: [],
      defaultProps: {
        label: "shopName",
        value: "shopId"
      },
      merchantPage: 1,
      merchantLimit: 20,
      selectName: "",
      allShopListShow: false, // 商家下拉全部加载完成
      allShopLoading: true, // 商家下拉数据加载中
      merchantList: [],
      usedShopId: "",
      selectMerchant: [], // 勾选中的数据
      merchantTotalPage: 1,
      merchantSelectTotal: "",

      form: {
        couponId: "",
        couponName: "",
        couponPicture: "",
        endDate: "",
        minMoney: "",
        money: "",
        needIntegral: ""
      },
      userNameList: [],
      userIdList: [],
      userData: [],
      phone: "",
      nickName: "",
      couponId: "",
      activeName: "seventh",
      shopName: "",
      shopId: 0,
      tableDataLoading11: false,
      dialogFormVisible11: false,
      shopIds: "",
      shopNames: "",
      shopName1: "",
      shopData: {},
      shopIds2: "",
      content: "",

      couponLogVisible: false, // 查看优惠券日志
      couponLogLoading: false,
      couponLogTable: [],
      couponLogLimit: 10,
      couponLogPage: 1,
      couponLogTotal: 1
    };
  },
  methods: {
    handleClick(tab, event) {
      if (tab._props.label == "平台优惠券") {
        this.page = 1;
        this.limit = 10;
        this.shopName = "";
        this.shopId = 0;
        this.dataSelect();
      }
      if (tab._props.label == "商家优惠券") {
        this.page = 1;
        this.limit = 10;
        this.shopName = "";
        this.shopId = -1;
        this.dataSelect();
      }
    },
    // 多选
    changeFun(val) {
      this.checkBoxData = val;
    },
    handleSizeChange(val) {
      this.limit = val;
      this.dataSelect();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.dataSelect();
    },
    handleSizeChange2(val) {
      this.size1 = val;
      this.dataSelect1();
    },
    handleCurrentChange2(val) {
      this.page1 = val;
      this.dataSelect1();
    },
    handleSizeChangeS(val) {
      this.size1 = val;
      this.dataSelect11();
    },
    handleCurrentChangeS(val) {
      this.page1 = val;
      this.dataSelect11();
    },
    beforeAvatarUpload(file) {
      return this.$processImage(this, file, false);
    },
    handleAvatarSuccess1(file, fileList) {
      this.couponPicture = file.data;
    },
    handleAvatarSuccess2(file, fileList) {
      this.form.couponPicture = file.data;
    },
    // 刷新
    refresh() {
      this.page = 1;
      this.dataSelect();
    },
    // 查看优惠券日志
    couponLog() {
      this.couponLogVisible = true;
      this.couponLogList();
    },
    couponLogList() {
      this.couponLogLoading = true;
      this.$http({
        url: this.$http.adornUrl("admin/couponLog/selectCouponLog"),
        method: "get",
        params: this.$http.adornParams({
          page: this.couponLogPage,
          limit: this.couponLogLimit
        })
      }).then(({ data }) => {
        console.log(data, "查看优惠券日志");
        this.couponLogLoading = false;
        let returnData = data.data;
        this.couponLogTable = returnData.list;
        this.couponLogTotal = returnData.totalCount;
      });
    },
    couponLogSize(val) {
      this.couponLogLimit = val;
      this.couponLogList();
    },
    couponLogCurrent(val) {
      this.couponLogPage = val;
      this.couponLogList();
    },

    // 添加优惠券弹框
    classifyStair() {
      this.couponName = "";
      this.couponPicture = "";
      this.endDate = "";
      this.minMoney = "";
      this.money = "";
      this.needIntegral = "100";
      this.shopNames = "";

      this.merchantPage = 1;
      this.merchantList = [];
      this.selectMerchant = [];
      this.allMerchant = false;
      this.someMerchant = false;
      this.allShopListShow = false;

      if (this.shopId === 0) {
        this.shopIds = 0;
        this.merchantData();
      } else {
        this.shopIds = "";
      }

      // 重置滚动位置
      // this.$nextTick(() => {
      //   console.log(document.querySelector('.shop'));
      //   // document.querySelector('.el-tree__body-wrapper')
      //   const treeWrapper = this.$refs.tree;
      //   if (treeWrapper) {
      //     treeWrapper.scrollTop = 0; // 重置滚动位置
      //   }
      // });
      this.dialogFormVisible = true;
    },
    // 确定添加优惠券
    StairNoticeTo() {
      if (this.couponName == "") {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "请输入优惠券名称",
          type: "warning"
        });
        return;
      }
      if (this.couponPicture == "") {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "请上传图片",
          type: "warning"
        });
        return;
      }
      if (this.money == "") {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "请输入优惠券金额",
          type: "warning"
        });
        return;
      }
      if (this.minMoney == "") {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "请输入最低消费",
          type: "warning"
        });
        return;
      }
      if (this.endDate == "") {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "请输入有效天数",
          type: "warning"
        });
        return;
      }

      if (this.shopId == 0) {
        if (!this.allMerchant && !this.someMerchant) {
          this.$notify({
            title: "提示",
            duration: 1800,
            message: "商家不能为空",
            type: "warning"
          });
          return;
        }
      }

      if (this.shopId === 0) {
        this.usedShopId = "";
        if (this.allMerchant) {
          this.usedShopId = 0;
        }
        if (this.someMerchant) {
          this.usedShopId = this.selectMerchant.join(",");
        }
        if (this.needIntegral == "") {
          this.$notify({
            title: "提示",
            duration: 1800,
            message: "请输入兑换积分",
            type: "warning"
          });
          return;
        }
      } else {
        this.usedShopId = "";
      }
      this.$http({
        url: this.$http.adornUrl("admin/coupon/issueCoupon"),
        method: "post",
        data: this.$http.adornData({
          couponName: this.couponName,
          couponPicture: this.couponPicture,
          endDate: this.endDate,
          minMoney: this.minMoney,
          money: this.money,
          needIntegral: this.needIntegral,
          shopId: this.shopIds,
          sysUserId: this.userId,
          usedShopId: this.usedShopId
        })
      }).then(({ data }) => {
        if (data.code == 0) {
          this.dialogFormVisible = false;
          this.$message({
            message: "添加成功",
            type: "success",
            duration: 1500,
            onClose: () => {
              this.dataSelect();
            }
          });
        } else {
          this.$message({
            message: data.msg,
            type: "warning",
            duration: 1500,
            onClose: () => {}
          });
        }
      });
    },
    checkChange(val, title) {
      console.log(val, title);
      if (val) {
        if (title == "不限制") {
          this.someMerchant = false;
        }
        if (title == "部分商家") {
          this.allMerchant = false;
          // this.merchantData();
        }
      }
      this.$nextTick(() => {
        if (this.$refs.tree) {
          this.$refs.tree.setCheckedKeys(this.selectMerchant);
        }
      });
    },
    treeCheck(checkedNodes, checkedKeys) {
      console.log(checkedKeys.checkedKeys);
      this.selectMerchant = checkedKeys.checkedKeys;
    },
    // 平台优惠券 弹窗 搜索商铺
    shopNameSeache() {
      this.merchantPage = 1;
      this.merchantData();
    },

    // 商铺列表
    merchantData(title) {
      this.allShopLoading = true;
      this.$http({
        url: this.$http.adornUrl("admin/goods/selectAllShop"),
        method: "get",
        params: this.$http.adornParams({
          page: this.merchantPage,
          limit: this.merchantLimit,
          shopName: this.selectName
        })
      }).then(({ data }) => {
        console.log(data, "店铺名称列表");
        if (data.code == 0) {
          if (title == "滚动") {
            this.dataTree = [...this.dataTree, ...data.data.list];
          } else {
            this.dataTree = data.data.list;
          }
          console.log(this.selectMerchant, "选择的数据");
          if (this.$refs.tree) {
            this.$refs.tree.setCheckedKeys(this.selectMerchant);
          }
          this.merchantTotalPage = data.data.totalPage;
          this.allShopLoading = false;
        }
      });
    },
    // 树形组件滚动操作
    handleTreeScroll(event) {
      const { scrollTop, scrollHeight, clientHeight } = event.target;
      // 判断是否滚动到底部
      if (scrollTop + clientHeight >= scrollHeight) {
        console.log("滚动到底部了");
        // 在这里执行你需要的逻辑，比如加载更多数据
        if (this.merchantPage >= this.merchantTotalPage) {
          // this.$message({
          //   title: "提示",
          //   duration: 1800,
          //   message: "数据已全部加载完",
          //   type: "warning"
          // });
          this.allShopListShow = true;
          return;
        }
        this.merchantPage++;
        console.log(this.merchantPage, "后");

        this.merchantData("滚动");
      }
    },

    // 修改优惠券
    compile(index, rows) {
      this.selectMerchant = [];
      console.log(rows);
      this.merchantPage = 1;
      this.merchantData();
      if (rows.usedShopId == 0) {
        this.usedShopId = 0;
        this.allMerchant = true;
        this.someMerchant = false;
      } else if (rows.usedShopId != null && rows.usedShopId != 0) {
        this.usedShopId = rows.usedShopId;
        this.selectMerchant = rows.usedShopId.split(",");
        this.allMerchant = false;
        this.someMerchant = true;
      } else {
        this.usedShopId = "";
        this.allMerchant = false;
        this.someMerchant = false;
      }
      this.allShopListShow = false;

      this.form.couponName = rows.couponName;
      this.form.couponPicture = rows.couponPicture;
      this.form.endDate = rows.endDate;
      this.form.minMoney = rows.minMoney;
      this.form.money = rows.money;
      this.form.needIntegral = rows.needIntegral;
      this.form.couponId = rows.couponId;
      this.shopNames = rows.shopName;
      this.shopIds = rows.shopId;
      this.dialogFormVisible1 = true;
    },
    compileClose() {
      if (this.shopId == 0 && this.someMerchant) {
        this.$nextTick(() => {
          const treeWrapper = this.$refs.tree.$el.querySelector(".el-tree");
          if (treeWrapper) {
            treeWrapper.scrollTop = 0;
          }
        });
      }
      this.dialogFormVisible1 = false;
      this.allMerchant = false;
      this.someMerchant = false;
    },
    // 确定修改优惠券
    CompileNoticeTo() {
      if (this.form.campusName == "") {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "请输入优惠券名称",
          type: "warning"
        });
        return;
      }
      if (this.form.couponPicture == "") {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "请上传图片",
          type: "warning"
        });
        return;
      }
      if (this.form.money == "") {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "请输入优惠券金额",
          type: "warning"
        });
        return;
      }
      if (this.form.minMoney == "") {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "请输入最低消费",
          type: "warning"
        });
        return;
      }
      if (this.form.endDate == "") {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "请输入有效天数",
          type: "warning"
        });
        return;
      }
      if (this.shopId == 0) {
        if (!this.allMerchant && !this.someMerchant) {
          this.$notify({
            title: "提示",
            duration: 1800,
            message: "商家不能为空",
            type: "warning"
          });
          return;
        }
      }

      if (this.shopId === 0) {
        this.usedShopId = "";
        if (this.allMerchant) {
          this.usedShopId = 0;
        }
        if (this.someMerchant) {
          this.usedShopId = this.selectMerchant.join(",");
        }
        if (this.needIntegral == "") {
          this.$notify({
            title: "提示",
            duration: 1800,
            message: "请输入兑换积分",
            type: "warning"
          });
          return;
        }
      } else {
        this.usedShopId = "";
      }
      this.$http({
        url: this.$http.adornUrl("admin/coupon/updateCoupon"),
        method: "post",
        data: this.$http.adornData({
          couponId: this.form.couponId,
          couponName: this.form.couponName,
          couponPicture: this.form.couponPicture,
          endDate: this.form.endDate,
          minMoney: this.form.minMoney,
          money: this.form.money,
          needIntegral: this.form.needIntegral,
          shopId: this.shopIds,
          sysUserId: this.userId,
          usedShopId: this.usedShopId
        })
      }).then(({ data }) => {
        if (data.code == 0) {
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 1500,
            onClose: () => {
              this.dialogFormVisible1 = false;
              this.dataSelect();
            }
          });
        } else {
          this.$message({
            message: data.msg,
            type: "error",
            duration: 1500,
            onClose: () => {
              this.dialogFormVisible1 = false;
              this.dataSelect();
            }
          });
        }
      });
    },
    // 发布审核优惠券
    announceStair(rows, index) {
      let title = "";
      if (index == 1) {
        title = "确定发布此条优惠券？";
      } else if (title == 2) {
        title = "确定撤销此条优惠券？";
      }
      this.$confirm(`${title}`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl("admin/coupon/checkCoupon"),
            method: "get",
            params: this.$http.adornParams({
              couponId: rows.couponId,
              sysUserId: this.userId,
              state: index
            })
          }).then(({ data }) => {
            console.log(data);
            if (data.code == 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.dataSelect();
                }
              });
            } else {
              this.$message({
                message: data.msg,
                type: "error",
                duration: 1500,
                onClose: () => {
                  this.dataSelect();
                }
              });
            }
          });
        })
        .catch(() => {});
    },

    // 删除
    deleteStair(row) {
      this.$confirm(`确定删除此条信息?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl("admin/coupon/deleteCoupon"),
            method: "post",
            params: this.$http.adornParams({
              couponId: row.couponId,
              sysUserId: this.userId
            })
          }).then(({ data }) => {
            if (data.code == 0) {
              this.$message({
                message: "删除成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.dataSelect();
                }
              });
            } else {
              this.$message({
                message: data.msg,
                type: "error",
                duration: 1500,
                onClose: () => {
                  this.dataSelect();
                }
              });
            }
          });
        })
        .catch(() => {});
    },
    // 重置
    cleans() {
      this.phone = "";
      this.status = 0;
      this.dataSelect();
    },
    // 获取派单数据列表
    dataSelect() {
      this.tableDataLoading = true;
      if (this.shopId == 0) {
        this.$http({
          url: this.$http.adornUrl("admin/coupon/selectAdminCoupon"),
          method: "get",
          params: this.$http.adornParams({
            page: this.page,
            limit: this.limit,
            state: this.selectState
          })
        }).then(({ data }) => {
          console.log(data, "平台优惠券");
          this.tableDataLoading = false;
          let returnData = data.data;
          this.tableData = returnData;
          // if(data.data.list.length==0){
          //   this.page = this.page-1
          //   this.dataSelect()
          // }
        });
      } else if (this.shopId == -1) {
        this.$http({
          url: this.$http.adornUrl("admin/coupon/seleteAllCoupon"),
          method: "get",
          params: this.$http.adornParams({
            page: this.page,
            limit: this.limit,
            content: this.content,
            shopId: this.shopId,
            shopName: this.shopName
          })
        }).then(({ data }) => {
          console.log(data, "商家优惠券");
          this.tableDataLoading = false;
          let returnData = data.data;
          this.tableData = returnData;
          // if(data.data.list.length==0){
          //   this.page = this.page-1
          //   this.dataSelect()
          // }
        });
      }
    },
    // 赠送优惠券
    songCoupon(row) {
      this.couponId = row.couponId;
      this.shopIds2 = row.shopId;
      this.userIdList = [];
      this.userNameList = [];
      this.dialogFormVisible0 = true;
    },
    // 打开用户列表
    couponIdBtn1() {
      this.page1 = 1;
      this.dataSelect1();
      this.dialogFormVisible5 = true;
      if (this.userIdList.length == 0) {
        this.cleansHc();
      }
    },
    // 清空选中缓存
    cleansHc(rows) {
      console.log("---", this.$refs.multipleTable);
      if (this.$refs.multipleTable) {
        this.$refs.multipleTable.clearSelection();
      }
    },
    // 多选用户
    changeFun1(val) {
      console.log("多选", val);
      var userIdList = [];
      var userNameList = [];
      for (var i in val) {
        userIdList.push(val[i].userId);
        userNameList.push(val[i].nickName);
      }
      this.userIdList = userIdList;
      this.userNameList = userNameList;
      console.log(JSON.stringify(this.userIdList));
    },
    // 赠送优惠券
    songNoticeTo() {
      if (this.userIdList.length == 0) {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "请选择用户",
          type: "warning"
        });
        return;
      }
      if (this.shopId == -1) {
        var shopIds1 = this.shopIds2;
      } else {
        var shopIds1 = this.shopId;
      }
      var userIdList = this.userIdList.toString();
      this.$http({
        url: this.$http.adornUrl("admin/coupon/giveCoupon"),
        method: "get",
        params: this.$http.adornParams({
          userIds: userIdList,
          shopId: shopIds1,
          couponId: this.couponId
        })
      }).then(({ data }) => {
        this.$message({
          message: "操作成功",
          type: "success",
          duration: 1500,
          onClose: () => {
            this.userIdList = [];
            this.userNameList = [];
            this.shopIds2 = "";
            this.dataSelect();
          }
        });
        this.dialogFormVisible0 = false;
      });
    },
    // 获取用户数据列表
    dataSelect1() {
      let phone = -1;
      if (this.phone) {
        phone = this.phone;
      }
      this.tableDataLoading1 = true;
      this.$http({
        url: this.$http.adornUrl("user/selectUserList"),
        method: "get",
        params: this.$http.adornParams({
          page: this.page1,
          limit: this.size1,
          shopAdminFlag: "",
          phone: this.phone,
          userName: this.nickName,
          type: ""
        })
      }).then(({ data }) => {
        this.tableDataLoading1 = false;
        let returnData = data.data;
        this.userData = returnData;
      });
    },
    // 查询
    select1() {
      this.page = 1;
      this.dataSelect1();
    },

    // 重置
    cleans1() {
      this.page = 1;
      this.phone = "";
      this.nickName = "";
      this.dataSelect1();
    },
    couponIdClose1(ietm, index) {
      console.log("index", index, "ietm", ietm, this.userIdList.length);
      if (this.userIdList.length < 2) {
        this.$message({
          title: "提示",
          type: "error",
          duration: 1800,
          message: "最少需要选中一位用户",
          type: "warning"
        });
        return;
      } else {
        this.userIdList.splice(index, 1);
        this.userNameList.splice(index, 1);
      }
    },
    // 批量开启
    closes2(id) {
      this.isCoupon = 1;
      this.dialogFormVisible5 = false;
    },
    // 获取派单数据列表
    dataSelectShop() {
      this.tableDataLoading = true;
      this.$http({
        url: this.$http.adornUrl("coupon/seleteAllCoupon"),
        method: "get",
        params: this.$http.adornParams({
          page: this.page,
          limit: this.limit,
          shopName: this.shopName,
          shopId: this.shopId
        })
      }).then(({ data }) => {
        this.tableDataLoading = false;
        let returnData = data.data;
        this.tableData = returnData;
        // if(data.data.list.length==0){
        //   this.page = this.page-1
        //   this.dataSelect()
        // }
      });
    },
    // 获取用户数据列表
    dataSelect11() {
      this.tableDataLoading = true;
      this.$http({
        url: this.$http.adornUrl("admin/goods/selectAllShop"),
        method: "get",
        params: this.$http.adornParams({
          page: this.page1,
          limit: this.size1,
          shopName: this.shopName1,
          region: "",
          isActivity: ""
        })
      }).then(({ data }) => {
        this.tableDataLoading = false;
        for (var i in data.data.list) {
          if (data.data.list[i].shopBanner) {
            data.data.list[i].shopBanner = data.data.list[i].shopBanner.split(
              ","
            );
          }
        }
        let returnData = data.data;
        this.shopData = returnData;
      });
    },
    // 查询
    select11() {
      this.page1 = 1;
      this.dataSelect11();
    },
    // 查看用户
    selectUserId() {
      this.dialogFormVisible11 = true;
      this.page1 = 1;
      this.shopName1 = "";
      this.dataSelect11();
    },
    // 重置
    cleans11() {
      this.page1 = 1;
      this.shopName1 = "";
      this.dataSelect11();
    },
    closes3(row) {
      this.shopIds = row.shopId;
      this.shopNames = row.shopName;

      this.dialogFormVisible11 = false;
    },
    refreshShop() {
      this.page = 1;
      this.dataSelect();
    }
  },
  mounted() {
    this.dataSelect();
  },
  created() {
    var userId = this.$cookie.get("userId");
    this.userId = userId;
    this.$http({
      url: this.$http.adornUrl("sys/user/isSuperAdmin"),
      method: "get",
      params: this.$http.adornParams({
        sysUserId: userId
      })
    }).then(({ data }) => {
      console.log(data);

      if (data.code == 0) {
        this.superAdmin = data.superAdmin;
      } else {
        this.$message({
          message: data.msg,
          type: "warning",
          duration: 1500,
          onClose: () => {}
        });
      }
    });

    // 超级管理员  审核中  发布 撤销
    //            已发布  赠送 编辑 删除
    //            已撤销
    // 普通用户    审核中
    //            已发布  赠送 删除
    //            已撤销
  }
};
</script>

<style lang="scss">
.couponLog {
  width: 60%;
}
.discount {
  width: 1000px;
  .shop {
    .el-tree-node__content {
      .is-leaf.el-tree-node__expand-icon {
        // display: none;
      }
    }
  }
}
</style>