JHVip/src/views/PromoCode/PromoCodeCreate/PromoCodeCreate.vue

<template>
  <div class="promo_code_create clear">
    <!-- 正常 -->
    <!-- <el-button
      v-show="canSms"
      class="create_code"
      type="primary"
      plain
      @click="genPromoCode"
    >
      {{ title }}
    </el-button> -->
    <!-- 倒计时 -->
    <!-- <el-button
      v-show="!canSms"
      class="create_code el_gray"
      type="primary"
      plain
    >
      {{ createText }}
    </el-button> -->

    <div class="clear code">
      <div class="promo_code text_overflow">{{ link }}</div>
      <el-tooltip class="item" effect="dark" content="点击复制" placement="top">
        <div
          class="copy"
          data-clipboard-action="copy"
          :data-clipboard-text="link"
          id="clipboard_promo_code"
        >
          <i class="el-icon-document-copy"></i>
        </div>
      </el-tooltip>
      <span>({{ tips }})</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "PromoCodeCreate",
  components: {},
  inject: ["checkCode"],
  data() {
    return {
      promoCode: "", // 推广码链接
      clipboard: null, // 复制
      createText: "", // 生成推广码
      canSms: true, // 是否可以点击生成推广码
    };
  },
  props: {
    // 按钮名
    title: {
      type: String,
      default: "",
    },
    // 链接
    link: {
      type: String,
      default: "",
    },
    tips: {
      type: String,
      default: "",
    },
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.initClipboard();
  },
  beforeDestroy() {
    this.clipboard.destroy();
  },
  methods: {
    /**
     * 初始化 clipboard插件
     */
    initClipboard() {
      this.clipboard = new this.$clipboard("#clipboard_promo_code");
      this.clipboard.on("success", () => {
        this.$notify({
          message: "复制成功!",
          type: "success",
        });
      });
      this.clipboard.on("error", () => {
        this.$notify.error({
          message: "复制失败!",
        });
      });
    },

    // 生成推广码
    genPromoCode() {
      if (!this.canSms) {
        return;
      }
      this.countDown();
      this.$api.genPromoCode().then((res) => {
        this.promoCode = "";
        this.checkCode(res);
        const { code, data, msg } = res.data;
        if (code) {
          return;
        }
        // 成功 通知父组件请求推广码列表数据
        this.$emit("onGetpromoCodeList", 1, 15);
        this.promoCode = `${this.link}?promoCode=${data.promoCode}`;
      });
    },

    // 倒计时
    countDown() {
      this.canSms = false;
      let count = 60;
      this.createText = count + "s";
      this.countDownTimer = setInterval(() => {
        count--;
        this.createText = count + "s";
        // 倒计时结束
        if (count === 0) {
          this.createText = "获取验证码";
          this.canSms = true;
          clearInterval(this.countDownTimer);
        }
      }, 1000);
    },
  },
};
</script>

<style lang='less' scoped>
.promo_code_create {
  .create_code,
  .code {
    float: left;
  }

  .create_code {
    width: 140px;
  }

  .el_gray {
    background-color: #dee1e6 !important;
  }

  .code {
    width: 100%;
    margin: 0 10px;

    span {
      line-height: 40px;
      float: left;
      margin-left: 10px;
      font-weight: bold;
      font-size: 20px;
    }

    .promo_code {
      width: 70%;
      height: 40px;
      padding-left: 10px;
      line-height: 40px;
      float: left;
      cursor: pointer;
      border: 1px solid #e6e6e6;
      border-radius: 5px 0 0 5px;
      background-color: #fff;
      color: #9a999f;
    }
    .copy {
      width: 40px;
      height: 40px;
      line-height: 40px;
      float: left;
      border: 1px solid #e6e6e6;
      border-left: 0;
      border-radius: 0 5px 5px 0;
      cursor: pointer;
      background-color: #fff;
    }
  }
}
</style>