crowd-test-service-frontend/src/pages/UserCenter/MailBinding.vue

<template>
  <div>
    <div class="right-modifyPsw">
      <div>
        <div class="right-modifyPsw-title">
          <span style="font-size: 18px;font-weight: bold">邮箱绑定</span>
        </div>
        <div>
          <div v-if="!user.email">
            <div style="background-color: rgba(233,239,249,1);padding: 10px;margin-bottom: 30px">
              <img src="../../assets/img/phoneUnbinding.png"></img>
              <span style="font-size: 16px">您还未绑定邮箱，为保护您帐号，建议您</span>
              <el-button type="primary" plain size="mini" @click="handleBindingEmail">立即绑定
              </el-button>
            </div>
            <div>
              邮箱绑定成功后，您将享受以下服务：
            </div>
            <div>①邮箱地址登录 可直接使用“邮箱地址”登录到众测服务平台</div>
            <div>②重要事件提醒 进行（支付/提现/众测/中标）时，可及时收到邮件提醒</div>
            <div>③找回账号密码 忘记密码时，可使用邮件找回密码</div>
          </div>
          <div v-if="user.email">
            <div style="background-color: rgba(233,239,249,1);padding: 10px;margin-bottom: 30px">
              <img src="../../assets/img/phoneBinding.png"></img>
              <span style="font-size: 16px">您绑定的邮箱是：{{this.user.email}}</span>
              <el-button type="primary" plain size="mini" @click="handleChangeEmail" style="margin-left: 20px">修改邮箱</el-button>
            </div>
          </div>
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Http from '@/js/http.js'
  import {storageGet} from '@/js/index'
  import {notify} from '@/constants/index'

  export default {
    name: "MailBinding",
    data() {
      return {
        hasVerifyCode: false,
        bindingEmail: false,
        codeTime: 10,
        emailBindingForm: {
          email: '',
          verifyCode: ''
        },
        user: {}
      }
    },
    methods: {
      setUserInfo() {
        let userId = storageGet('user')&&storageGet('user').userVO.id;
        Http.get(`/api/user/${userId}`).then(res=>{
          this.user = res.userVO
        })
      },
      handleBindingEmail(){
        this.$router.push({
          path: '/personal/mailBinding/binding',
        });
      },
      handleChangeEmail(){
        this.$router.push({
          path: '/personal/mailBinding/rebinding',
        });
      },
      getVerifyCode() {
        let params = {
          id: this.user.id,
          email: this.emailBindingForm.email
        }
        Http.put('/api/verify/email', params).then((res) => {
          this.hasVerifyCode = true;
          let _this = this;
          let codeTimer = setInterval(function () {
            if (_this.codeTime > 0) {
              _this.codeTime--;
            } else {
              clearInterval(codeTimer);
              _this.hasVerifyCode = false;
              this.codeTime = 10;
              this.setUserInfo()
            }
          }, 1000)
        }).catch(err => {
          notify('error', '获取验证码失败:' + err.data);
        })
      }
    },
    mounted() {
      this.setUserInfo();
    },
    watch:{
      '$route' (to, from) {
        if(to.path==='/personal/mailBinding'){
          this.$router.go(0);
        }
      }
    }
  }
</script>

<style scoped lang="less">
  .right-modifyPsw {
    padding: 20px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 1px 6px 0px rgba(8, 6, 6, 0.13);

    .right-modifyPsw-title {
      padding: 10px;
      border-bottom: 1px solid #ccc;
      margin-bottom: 20px;
    }
  }
</style>