|
|
@@ -0,0 +1,489 @@
|
|
|
+<template>
|
|
|
+ <div class="certification">
|
|
|
+ <div class="container">
|
|
|
+ <div class="content" v-show="goNextStep">
|
|
|
+ <div class="content-top">
|
|
|
+ <h3>账号申诉</h3>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <el-form :model="account" :rules="rules" ref="account" label-width="100px" class="demo-ruleForm">
|
|
|
+ <el-form-item prop="mobile">
|
|
|
+ <el-input v-model="account.mobile" placeholder="新手机号码"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="code">
|
|
|
+ <el-input type="text" v-model="account.code"
|
|
|
+ v-bind:class="{ active: codeErrorChecked }"
|
|
|
+ auto-complete="off" class="msg"
|
|
|
+ placeholder="短信验证码"></el-input>
|
|
|
+ <el-button type="primary" class="code"
|
|
|
+ v-show="sendAccountCode"
|
|
|
+ @click="getCheckCode"
|
|
|
+ :disabled="getCodeBtnIsDisabled">获取验证码</el-button>
|
|
|
+ <el-button type="primary" v-show="!sendAccountCode" class="code code-send">已发送({{account_time}}s)</el-button>
|
|
|
+ <span v-show="codeErrorChecked" class="tip codeError-tip" >验证码输入错误</span>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="password">
|
|
|
+ <el-input type="password" v-model="account.password" auto-complete="off" placeholder="登录密码"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="description">
|
|
|
+ <el-input type="textarea" v-model="account.description" placeholder="申诉说明"></el-input>
|
|
|
+ <span class="tip description" v-show="descriptionTip">请描述您申诉的原因，并尽可能多地列举出证明此账号为您所有的证据</span>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="contactName">
|
|
|
+ <el-input type="text" v-model="account.contactName" auto-complete="off" placeholder="姓名"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="contactTel">
|
|
|
+ <el-input type="text" v-model="account.contactTel" auto-complete="off" placeholder="联系电话"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="contactEmail">
|
|
|
+ <el-input type="text" v-model="account.contactEmail" auto-complete="off" placeholder="电子邮箱"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <a class="btn finish"
|
|
|
+ @click="submit"
|
|
|
+ :disabled="!checked || !mobileChecked || !codeChecked || !passwordChecked || !descriptionChecked || !contactNameChecked || !contactTelChecked || !contactEmailChecked">提交</a>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-checkbox name="type" v-model="checked" @click="checkboxChecked"></el-checkbox>
|
|
|
+ <span class="agree">我已阅读并同意 <a href="">《优软云服务条款》</a></span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content" v-show="!goNextStep">
|
|
|
+ <div class="content-top">
|
|
|
+ <h3>账号申诉</h3>
|
|
|
+ </div>
|
|
|
+ <div class="content-bottom">
|
|
|
+ <p class="passed"><img src="/images/all/pass.png" alt=""/>申诉已提交</p>
|
|
|
+ <span>申诉内容已提交，请耐心等待审核</span>
|
|
|
+ <div class="close-btn" @click="goReturn">关闭</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ name: 'AccountAppeal',
|
|
|
+ data () {
|
|
|
+ var validateMobile = (rule, value, callback) => {
|
|
|
+ if (value === '') {
|
|
|
+ callback(new Error('请填写正确的手机号'))
|
|
|
+ this.getCodeBtnIsDisabled = true
|
|
|
+ this.mobileChecked = false
|
|
|
+ } else {
|
|
|
+ if (this.account.mobile !== '') {
|
|
|
+ var reg = /^1[0-9]{10}$/
|
|
|
+ if (!reg.test(value)) {
|
|
|
+ callback(new Error('请填写正确的手机号'))
|
|
|
+ this.getCodeBtnIsDisabled = true
|
|
|
+ this.mobileChecked = false
|
|
|
+ } else {
|
|
|
+ this.getCodeBtnIsDisabled = false
|
|
|
+ this.mobileChecked = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ var validateCode = (rule, value, callback) => {
|
|
|
+ if (value === '') {
|
|
|
+ callback(new Error('请填写正确的验证码'))
|
|
|
+ this.codeErrorChecked = false
|
|
|
+ this.codeChecked = false
|
|
|
+ } else {
|
|
|
+ if (this.account.code !== '') {
|
|
|
+ console.log(this.token)
|
|
|
+ if (this.token !== '') {
|
|
|
+ if (this.account.code !== '' && this.account.mobile !== '') {
|
|
|
+ let param = new FormData()
|
|
|
+ param.append('mobile', this.account.mobile)
|
|
|
+ param.append('code', this.account.code)
|
|
|
+ param.append('token', this.token)
|
|
|
+ let config = {
|
|
|
+ headers: {'Content-Type': 'multipart/form-data'}
|
|
|
+ }
|
|
|
+ this.$http.post(`/appeal/check/mobile`, param, config)
|
|
|
+ .then(response => {
|
|
|
+ if (response.data.success) {
|
|
|
+ this.codeChecked = true
|
|
|
+ this.codeErrorChecked = false
|
|
|
+ } else {
|
|
|
+ this.codeErrorChecked = true
|
|
|
+ this.codeChecked = false
|
|
|
+ return Promise.reject(response.data)
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+ this.$message.error(err.errMsg)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ } else {}
|
|
|
+ }
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ var validatePassword = (rule, value, callback) => {
|
|
|
+ if (value === '') {
|
|
|
+ callback(new Error('请填写正确的密码'))
|
|
|
+ this.passwordChecked = false
|
|
|
+ } else {
|
|
|
+ if (this.account.password !== '') {
|
|
|
+ this.passwordChecked = true
|
|
|
+ }
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ var validateDescription = (rule, value, callback) => {
|
|
|
+ if (value === '') {
|
|
|
+ callback(new Error('请填写申诉说明'))
|
|
|
+ this.descriptionChecked = false
|
|
|
+ this.descriptionTip = false
|
|
|
+ } else {
|
|
|
+ if (this.account.description !== '') {
|
|
|
+ if (value.length >= 100) {
|
|
|
+ callback(new Error('输入长度过长，100个字符以内'))
|
|
|
+ this.descriptionChecked = false
|
|
|
+ this.descriptionTip = false
|
|
|
+ } else {
|
|
|
+ this.descriptionChecked = true
|
|
|
+ this.descriptionTip = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ var validateContactName = (rule, value, callback) => {
|
|
|
+ if (value === '') {
|
|
|
+ callback(new Error('请填写您的姓名'))
|
|
|
+ this.contactNameChecked = false
|
|
|
+ } else {
|
|
|
+ if (this.account.contactName !== '') {
|
|
|
+ if (value.length >= 20) {
|
|
|
+ callback(new Error('输入长度过长，20个字符以内'))
|
|
|
+ this.contactNameChecked = false
|
|
|
+ } else {
|
|
|
+ this.contactNameChecked = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ var validateContactTel = (rule, value, callback) => {
|
|
|
+ if (value === '') {
|
|
|
+ callback(new Error('请填写正确的联系电话'))
|
|
|
+ this.contactTelChecked = false
|
|
|
+ } else {
|
|
|
+ if (this.account.contactTel !== '') {
|
|
|
+ var reg = /^1[0-9]{10}$/
|
|
|
+ if (!reg.test(value)) {
|
|
|
+ callback(new Error('请填写正确的联系电话'))
|
|
|
+ this.contactTelChecked = false
|
|
|
+ } else {
|
|
|
+ this.contactTelChecked = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ var validateContactEmail = (rule, value, callback) => {
|
|
|
+ if (value === '') {
|
|
|
+ callback(new Error('请填写正确的电子邮箱'))
|
|
|
+ this.contactEmailChecked = false
|
|
|
+ } else {
|
|
|
+ if (this.account.contactEmail !== '') {
|
|
|
+ var reg = /^([\w-])+(\.\w+)*@([\w-])+((\.\w{2,3}){1,3})$/
|
|
|
+ if (!reg.test(value)) {
|
|
|
+ callback(new Error('请输入正确的邮箱地址格式'))
|
|
|
+ this.contactEmailChecked = false
|
|
|
+ } else {
|
|
|
+ this.contactEmailChecked = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ goNextStep: true,
|
|
|
+ account: {
|
|
|
+ mobile: '',
|
|
|
+ code: '',
|
|
|
+ password: '',
|
|
|
+ description: '',
|
|
|
+ contactName: '',
|
|
|
+ contactTel: '',
|
|
|
+ contactEmail: ''
|
|
|
+ },
|
|
|
+ checked: true,
|
|
|
+ sendAccountCode: true,
|
|
|
+ account_time: 0,
|
|
|
+ getCodeBtnIsDisabled: true,
|
|
|
+ codeErrorChecked: false,
|
|
|
+ descriptionTip: true,
|
|
|
+ mobileChecked: false,
|
|
|
+ codeChecked: false,
|
|
|
+ passwordChecked: false,
|
|
|
+ descriptionChecked: false,
|
|
|
+ contactNameChecked: false,
|
|
|
+ contactTelChecked: false,
|
|
|
+ contactEmailChecked: false,
|
|
|
+ rules: {
|
|
|
+ mobile: [
|
|
|
+ {validator: validateMobile, trigger: 'blur'}
|
|
|
+ ],
|
|
|
+ code: [
|
|
|
+ {validator: validateCode, trigger: 'blur'}
|
|
|
+ ],
|
|
|
+ password: [
|
|
|
+ {validator: validatePassword, trigger: 'blur'}
|
|
|
+ ],
|
|
|
+ description: [
|
|
|
+ {validator: validateDescription, trigger: 'blur'}
|
|
|
+ ],
|
|
|
+ contactName: [
|
|
|
+ {validator: validateContactName, trigger: 'blur'}
|
|
|
+ ],
|
|
|
+ contactTel: [
|
|
|
+ {validator: validateContactTel, trigger: 'blur'}
|
|
|
+ ],
|
|
|
+ contactEmail: [
|
|
|
+ {validator: validateContactEmail, trigger: 'blur'}
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+// 判断我同意是否被选中
|
|
|
+ checkboxChecked () {
|
|
|
+ this.checked = !this.checked
|
|
|
+ },
|
|
|
+// 获取校验码
|
|
|
+ getCheckCode () {
|
|
|
+ this.$http.get(`/appeal/check/mobile`, {params: {mobile: this.account.mobile}})
|
|
|
+ .then(response => {
|
|
|
+ this.token = response.data.content.token
|
|
|
+ console.log(response.data.content)
|
|
|
+ console.log(this.token)
|
|
|
+ if (this.token !== '') {
|
|
|
+ this.$message({
|
|
|
+ message: '验证码已经发送到您的手机，请注意查收',
|
|
|
+ type: 'success'
|
|
|
+ })
|
|
|
+ this.sendAccountCode = false
|
|
|
+ this.account_time = 60
|
|
|
+ var accountTime = setInterval(() => {
|
|
|
+ this.account_time--
|
|
|
+ if (this.account_time <= 0) {
|
|
|
+ this.sendAccountCode = true
|
|
|
+ clearInterval(accountTime)
|
|
|
+ }
|
|
|
+ }, 1000)
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+ this.$message.error(err.errMsg)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 提交表单
|
|
|
+ submit () {
|
|
|
+ if (this.mobileChecked && this.codeChecked && this.passwordChecked && this.descriptionChecked && this.contactNameChecked && this.contactTelChecked && this.contactEmailChecked && this.checked) {
|
|
|
+ let param = new FormData()
|
|
|
+ param.append('mobile', this.account.mobile)
|
|
|
+ param.append('code', this.account.code)
|
|
|
+ param.append('password', this.account.password)
|
|
|
+ param.append('description', this.account.description)
|
|
|
+ param.append('contactName', this.account.contactName)
|
|
|
+ param.append('contactTel', this.account.contactTel)
|
|
|
+ param.append('contactEmail', this.account.contactEmail)
|
|
|
+ param.append('token', this.token)
|
|
|
+ let config = {
|
|
|
+ headers: {'Content-Type': 'multipart/form-data'}
|
|
|
+ }
|
|
|
+ this.$http.post('/appeal/account', param, config)
|
|
|
+ .then(response => {
|
|
|
+ if (response.data.success) {
|
|
|
+ this.goNextStep = false
|
|
|
+// 待跳转到设置页面
|
|
|
+// window.loaction.href = ''
|
|
|
+ } else {
|
|
|
+ this.goNextStep = true
|
|
|
+ return Promise.reject(response.data)
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+ this.$message.error(err.errMsg)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+// 跳转至个人页面
|
|
|
+ goReturn () {
|
|
|
+// window.loaction.href = ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .certification {
|
|
|
+ padding-bottom: 145px;
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 100%;
|
|
|
+ background: #eee;
|
|
|
+ .container{
|
|
|
+ padding-top: 50px;
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 980px;
|
|
|
+ text-align: center;
|
|
|
+ .content{
|
|
|
+ padding: 0 50px;
|
|
|
+ margin: 50px auto 0;
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ background: #fff;
|
|
|
+ .content-top{
|
|
|
+ height: 80px;
|
|
|
+ line-height: 80px;
|
|
|
+ h3{
|
|
|
+ margin-bottom: 0;
|
|
|
+ font-size: 24px;
|
|
|
+ color: #000;
|
|
|
+ border-bottom: 1px solid #dcdcdc;
|
|
|
+ }
|
|
|
+ .step{
|
|
|
+ position: relative;
|
|
|
+ margin-top: 10px;
|
|
|
+ img{
|
|
|
+ width: 315px;
|
|
|
+ height: 46px;
|
|
|
+ }
|
|
|
+ .step-item{
|
|
|
+ position: absolute;
|
|
|
+ top: 45px;
|
|
|
+ left: 265px;
|
|
|
+ span{
|
|
|
+ margin-right: 85px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #b4b4b4;
|
|
|
+ }
|
|
|
+ span.active {
|
|
|
+ color: #0076ad;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ form {
|
|
|
+ padding-bottom: 44px;
|
|
|
+ margin-top: 36px;
|
|
|
+ input{
|
|
|
+ padding: 0 0 0 18px;
|
|
|
+ width: 360px;
|
|
|
+ height: 44px;
|
|
|
+ line-height: 44px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #000;
|
|
|
+ border-radius: 0;
|
|
|
+ }
|
|
|
+ span.tip{
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: -238px;
|
|
|
+ font-size: 13px;
|
|
|
+ color: #8c8c8c;
|
|
|
+ a{
|
|
|
+ font-size: 13px;
|
|
|
+ color: #0076ad;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ span.tip.description {
|
|
|
+ top: 10px;
|
|
|
+ right: -266px;
|
|
|
+ width: 245px;
|
|
|
+ line-height: 18px;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ span.tip.codeError-tip {
|
|
|
+ right: -112px;
|
|
|
+ color: #f56c6c;
|
|
|
+ }
|
|
|
+ i{
|
|
|
+ position: absolute;
|
|
|
+ top: 13px;
|
|
|
+ left: 20px;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #a0a0a0;
|
|
|
+ }
|
|
|
+ input[type='checkbox']{
|
|
|
+ margin: 0 14px 0 55px;
|
|
|
+ float: left;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ }
|
|
|
+ span.agree{
|
|
|
+ float: left;
|
|
|
+ margin: 1px 0 0 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #8b8b8b;
|
|
|
+ a{
|
|
|
+ color: #0076ad;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .form-group.agree{
|
|
|
+ margin: 20px auto 0 !important;
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ margin: 34px 0 16px 0;
|
|
|
+ width: 360px;
|
|
|
+ height: 44px;
|
|
|
+ line-height: 44px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #fff;
|
|
|
+ background: #0076AD;
|
|
|
+ border-radius: 3px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content-bottom{
|
|
|
+ margin-top: 35px;
|
|
|
+ padding-bottom: 50px;
|
|
|
+ p{
|
|
|
+ font-size: 24px;
|
|
|
+ color: #323232;
|
|
|
+ img{
|
|
|
+ margin-right: 20px;
|
|
|
+ width: 30px;
|
|
|
+ height: 28px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ p.pass{
|
|
|
+ font-size: 24px;
|
|
|
+ color: #e77405;
|
|
|
+ img{
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ p.passed {
|
|
|
+ color: #2ab300;
|
|
|
+ img{
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ span{
|
|
|
+ display: inline-block;
|
|
|
+ margin: 15px 0 140px 0;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #8b8b8b;
|
|
|
+ }
|
|
|
+ .close-btn{
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 200px;
|
|
|
+ height: 36px;
|
|
|
+ line-height: 36px;
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: center;
|
|
|
+ color: #323232;
|
|
|
+ border: 1px solid #d2d2d2;
|
|
|
+ border-radius: 3px;
|
|
|
+ cursor: pointer ;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
hangb