caimei-authentic-www/pages/_template/app/form/club-bind.vue

<template>
  <div class="club-bind">
    <div class="form-container">
      <div class="logo">
        <img :src="supplierInfo.shopName" alt="" />
        <!-- <img :src="supplierInfo.logo" :alt="supplierInfo.shopName" /> -->
      </div>
      <div class="tip">
        输入验证码即可完成账号注册及{{
          supplierInfo.shopName
        }}授权牌匾制作与寄送
      </div>
      <div class="form">
        <el-form
          :model="formData"
          :rules="rules"
          label-position="top"
          ref="formRef"
        >
          <el-form-item label="手机号:" prop="mobile">
            <el-input
              v-model="formData.mobile"
              maxlength="11"
              @input="handleMobileInput"
            />
          </el-form-item>
          <el-form-item label="验证码:" prop="verifyCode">
            <el-input v-model="formData.verifyCode" maxlength="6">
              <template #suffix>
                <i class="line"></i>
                <el-button
                  type="text"
                  size="mini"
                  class="code"
                  v-text="sendCodeBtnText"
                  @click="onSend"
                ></el-button>
              </template>
            </el-input>
          </el-form-item>
        </el-form>
        <div id="slide-verify" class="verify-wrap"></div>
        <el-button type="primary" class="confirm" @click="onSubmit"
          >确定</el-button
        >
      </div>
    </div>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      center
      @closed="onDialogClosed"
    >
      <div class="dialog-text text-center" v-text="dialogText"></div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="onCancel" v-if="resultStatus === -2">取消</el-button>
        <el-button type="primary" @click="onConfirm">{{
          resultStatus === -2 ? '去登录' : '确定'
        }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { isMobile } from '~/utils/validator'
import { SlideVerify } from '@/utils/libs/slide-verify'
export default {
  layout: 'app-normal',
  data() {
    var validateMobile = (rule, value, callback) => {
      if (!value || isMobile(value)) {
        callback()
      } else {
        callback(new Error('手机号格式不正确'))
      }
    }

    return {
      resultStatus: 0,
      dialogVisible: false,
      slideVerifyStatus: false,
      slideVerify: null,
      formData: {
        mobile: '',
        verifyCode: '',
        authId: '',
        authUserId: '',
      },
      rules: {
        mobile: [
          { required: true, message: '手机号不能为空', trigger: ['blur'] },
          { validator: validateMobile, trigger: ['blur'] },
        ],
        verifyCode: [
          { required: true, message: '验证码不能为空', trigger: ['blur'] },
        ],
      },
      sendStatus: 0,
      timer: null,
      dialogTextMap: {
        0: '账号注册成功，您可通过该手机号与短信发送的密码登录认证通！',
        '-2': '抱歉，该手机号已注册，您可以登录后再来进行正品授权申请！',
      },
    }
  },
  computed: {
    ...mapGetters(['authUserId', 'routePrefix', 'supplierInfo']),
    sendCodeBtnText() {
      return this.sendStatus === 0
        ? '发送验证码'
        : `再次发送${this.sendStatus}s`
    },
    dialogText() {
      return this.dialogTextMap[this.resultStatus]
    },
  },
  created() {
    this.$store.commit('app/HIDE_LAYOUT')
    this.initLinkInfo()
    this.initSlideVerify()
  },
  beforeDestroy() {
    this.$store.commit('app/SHOW_LAYOUT')
  },
  methods: {
    initSlideVerify() {
      this.$nextTick(() => {
        this.slideVerify = new SlideVerify('#slide-verify', {
          initText: '请向右滑动滑块', //设置  初始的 显示文字
          sucessText: '验证通过', //设置 验证通过 显示的文字
          getSuccessState: (status) => {
            //当验证完成的时候 会 返回 res 值 true，只留了这个应该够用了
            this.slideVerifyStatus = status
          },
        })
      })
    },

    // 取消操作
    onCancel() {
      this.dialogVisible = false
    },

    // 确认
    onConfirm() {
      this.routePrefix + `/approve/club/detail?id=${this.formData.authId}`
    },

    onDialogClosed() {
      if (this.resultStatus === 0) {
        this.$router.replace(this.routePrefix)
      }
    },

    // 初始化链接信息
    async initLinkInfo() {
      this.formData.authUserId = this.authUserId
      const authId = this.$route.query.authId
      if (authId) {
        this.formData.authId = parseInt(authId)
        return
      }
      try {
        await this.$alert('链接已失效！请更换新链接', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
      } finally {
        this.$router.replace(this.routePrefix)
      }
    },
    // 提交
    async onSubmit() {
      if (!this.slideVerifyStatus) {
        return this.$toast('滑动验证未通过')
      }
      try {
        await this.$refs.formRef.validate()
        this.onRegisterSubmit()
      } catch (error) {
        console.log(error)
      } finally {
        this.slideVerifyStatus = false
        setTimeout(() => {
          this.slideVerify?.resetVerify()
        }, 500)
      }
    },
    // 用户注册
    async onRegisterSubmit() {
      try {
        await this.$http.api.clubUserRegister(this.formData)
        this.resultStatus = 0
        this.dialogVisible = true
      } catch (error) {
        if (error.code === -2) {
          this.resultStatus = -2
          this.dialogVisible = true
        } else {
          this.$toast(error.msg)
        }
      }
    },

    // 发送验证码
    async onSend() {
      if (this.sendStatus > 0) return
      // 验证手机号是否合法
      if (!isMobile(this.formData.mobile)) {
        this.$toast('请输入正确的手机号')
        return
      }
      try {
        // 发送验证码
        await this.$http.api.clubUserCodeSend({
          mobile: this.formData.mobile,
          authUserId: this.authUserId,
          type: 1,
        })
        this.$toast('验证码已发送')
        // 开启倒计时
        this.countdown()
      } catch (error) {
        console.log(error)
      }
    },
    // 倒计时
    countdown() {
      this.sendStatus = 60
      this.timer = setInterval(() => {
        if (this.sendStatus === 0) {
          clearInterval(this.timer)
          return
        }
        this.sendStatus--
      }, 1000)
    },
    // 输入框输入时
    handleMobileInput() {
      this.formData.mobile = this.formData.mobile.replace(/[^\w\.\/]/gi, '')
    },
  },
}
</script>
<style lang="scss" scoped>
.el-button {
  border-radius: 0;
}

@media screen and (min-width: 768px) {
  ::v-deep {
    .el-dialog {
      width: 400px;
      padding: 40px 36px 32px;

      .dialog-text {
        font-size: 16px;
        color: #282828;
        line-height: 32px;
      }

      .el-dialog__header {
        padding: 0;
        .el-dialog__title {
          font-size: 24px;
          color: #282828;
        }
      }

      .el-dialog__body {
        padding: 64px 0 48px;
      }

      .el-dialog__footer {
        padding: 0;
      }

      .el-dialog__close {
        font-size: 24px;
      }

      .el-button {
        width: 100%;
        display: block;

        &:first-child {
          margin-bottom: 10px;
        }

        &:last-child {
          margin-left: 0;
        }
      }
    }
  }

  .club-bind {
    width: 100vw;
    height: 100vh;
    background: url(~assets/theme-images/common/pc-link-register-bg.png)
      no-repeat center;
    display: flex;
    justify-content: center;
    align-items: center;

    .form-container {
      display: flex;
      align-items: center;
      flex-direction: column;
      box-sizing: border-box;
      width: 528px;
      padding: 32px 0 60px;
      background: #fff;
      box-shadow: 0px 6px 30px rgba(64, 158, 255, 0.1);
      border-radius: 4px;

      .logo {
        width: 248px;
        height: 100px;
        margin-bottom: 20px;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          display: block;
          max-height: 100%;
          flex-shrink: 0;
        }
      }

      .tip {
        width: 412px;
        font-size: 20px;
        color: #282828;
        line-height: 32px;
        text-align: center;
        margin-bottom: 36px;
      }

      .form {
        width: 320px;

        .confirm {
          width: 100%;
          margin-top: 24px;
          border-radius: 0;
        }

        .line {
          width: 1px;
          height: 20px;
          background: #d8d8d8;
          display: inline-block;
          vertical-align: middle;
        }

        .code {
          margin: 0 10px;
        }

        .el-form-item {
          margin-bottom: 24px;

          ::v-deep {
            .el-form-item__label {
              line-height: initial;
              padding: 0 0 6px;
            }

            .el-input__inner {
              border-radius: 0;
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  ::v-deep {
    .el-dialog {
      width: 76vw;
      padding: 7vw 7vw 5.2vw;

      .dialog-text {
        font-size: 3.2vw;
        color: #282828;
        line-height: 5.6vw;
      }

      .el-dialog__header {
        padding: 0;
        .el-dialog__title {
          font-size: 4.8vw;
          color: #282828;
        }
      }

      .el-dialog__body {
        padding: 8vw 0 11.6vw;
      }

      .el-dialog__footer {
        padding: 0;
      }

      .el-dialog__close {
        font-size: 5.6vw;
      }

      .el-button {
        width: 100%;
        display: block;

        &:first-child {
          margin-bottom: 4vw;
        }

        &:last-child {
          margin-left: 0;
        }
      }
    }
  }

  .club-bind {
    width: 100vw;
    height: 100vh;
    background: url(~assets/theme-images/common/h5-link-register-bg.png)
      no-repeat center;
    display: flex;
    justify-content: center;
    align-items: center;

    .form-container {
      display: flex;
      align-items: center;
      flex-direction: column;
      box-sizing: border-box;
      width: 76vw;
      padding: 4vw 0 4.7vw;
      background: #fff;
      box-shadow: 0px 0.6vw 3vw rgba(64, 158, 255, 0.1);
      border-radius: 4px;

      .logo {
        width: 34vw;
        height: 13.8vw;
        margin-bottom: 4vw;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          display: block;
          height: 5.6vw;
          flex-shrink: 0;
        }
      }

      .tip {
        width: 59.8vw;
        font-size: 3.6vw;
        color: #282828;
        line-height: 5.6vw;
        text-align: center;
        margin-bottom: 8vw;
      }

      .form {
        width: 62vw;

        .confirm {
          width: 100%;
          margin-top: 3.2vw;
          border-radius: 0;
        }

        .line {
          width: 1px;
          height: 4vw;
          background: #d8d8d8;
          display: inline-block;
          vertical-align: middle;
        }

        .code {
          margin: 0 2.8vw;
        }

        .el-form-item {
          margin-bottom: 4vw;

          ::v-deep {
            .el-form-item__label {
              line-height: initial;
              padding: 0 0 1.2vw;
            }

            .el-input__inner {
              border-radius: 0;
            }
          }
        }
      }
    }
  }
}
</style>