<template>
|
<div class="s-licence">
|
<div class="licence" @click="dialogVisible = true">
|
<span>{{tip}}</span>
|
</div>
|
<el-dialog
|
title="授权管理"
|
:visible.sync="dialogVisible"
|
width="540px"
|
:close-on-click-modal="false"
|
:before-close="closeDialog"
|
>
|
<div class="s-dialog">
|
<el-tabs v-model="active" v-show="authStatus === 'unregistered'">
|
<el-tab-pane label="注册" name="first">
|
<el-alert
|
title="正式授权绑定"
|
type="warning"
|
description="请仔细填写以下内容，并保证内容完全属实"
|
show-icon
|
:closable="false"
|
style="text-align:left"
|
></el-alert>
|
<br />
|
<el-form ref="reginfo" :model="registe" :rules="rules" status-icon label-width="80px">
|
<el-form-item label="公司名称" prop="company">
|
<el-input v-model="registe.company" size="small" style="max-width:420px"></el-input>
|
</el-form-item>
|
<el-form-item label="电子邮箱" prop="email">
|
<el-input v-model="registe.email" size="small" style="max-width:420px"></el-input>
|
</el-form-item>
|
<el-form-item label="手机号码" prop="phone">
|
<el-input v-model="registe.phone" size="small" style="max-width:420px"></el-input>
|
</el-form-item>
|
<el-button
|
type="primary"
|
size="small"
|
@click="getRegsiterCode()"
|
style="float:right"
|
>提交</el-button>
|
</el-form>
|
</el-tab-pane>
|
<el-tab-pane label="认证" name="second" style="text-align:left" :disabled="!regCode.length">
|
<div v-show="!showQrcode" class="auth-box">
|
<span style="line-height: 30px;">注册码</span>
|
<a href="#" @click="showQrcode=true" style="font-size: 10px;"> 查看二维码</a>
|
<el-input type="textarea" :readonly="true" :rows="4" placeholder v-model="regCode"></el-input>
|
<span style="line-height: 30px;">授权码</span>
|
<el-input type="textarea" :rows="5" placeholder="请输入授权码" v-model="license"></el-input>
|
<el-button
|
type="primary"
|
size="small"
|
@click="submitLicence()"
|
style="margin-top: 15px;float: right;"
|
>提交</el-button>
|
</div>
|
<div v-show="showQrcode" style="text-align:right">
|
<vue-qrcode :text="regCode" style="margin-left: 115px;"></vue-qrcode>
|
<a href="#" @click="showQrcode=false">返回</a>
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
<div class="info" v-show="authStatus === 'registered'">
|
<p>
|
<b>授权用户</b>
|
</p>
|
<p>用户名称：{{ registe.company }}</p>
|
<p>电子邮箱：{{ registe.email }}</p>
|
<p>
|
授权期限：{{ '永久有效' }}
|
<span v-show="expired" style="color:red">已过期</span>
|
</p>
|
<el-divider></el-divider>
|
<p>
|
<b>授权码</b>
|
</p>
|
<el-input type="textarea" :readonly="true" :rows="4" placeholder v-model="licenseCode"></el-input>
|
<el-button
|
type="primary"
|
size="small"
|
@click="rereg()"
|
style="margin-top: 15px;float: right;"
|
>重新注册</el-button>
|
</div>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { showLicence, getRegCode, updateLicence } from './api.ts'
|
import { isPhone, validEmail } from '../../scripts/validate.ts'
|
import VueQrcode from 'vue-qrcode-component'
|
|
export default {
|
name: 'LicenceManage',
|
components: {
|
VueQrcode
|
},
|
data() {
|
return {
|
registe: {
|
company: '',
|
email: '',
|
phone: ''
|
},
|
dialogVisible: false,
|
authStatus: '',
|
active: 'first',
|
regCode: '',
|
license: '',
|
licenseCode: '',
|
expireTime: '',
|
expired: false,
|
showQrcode: false,
|
tip: '',
|
rules: {
|
email: [
|
{
|
required: true,
|
message: '请输入正确的邮箱地址',
|
trigger: 'change'
|
},
|
{ validator: validEmail, trigger: 'blur' }
|
],
|
phone: [
|
{
|
required: true,
|
message: '请输入正确的手机号码',
|
trigger: 'change'
|
},
|
{ validator: isPhone, trigger: 'blur' }
|
],
|
company: [
|
{
|
required: true,
|
message: '公司名称不能为空',
|
trigger: 'change'
|
}
|
]
|
}
|
}
|
},
|
filters: {
|
timeFormat(timestamp) {
|
var date = new Date(timestamp * 1000) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
|
var Y = date.getFullYear() + '-'
|
var M =
|
(date.getMonth() + 1 < 10
|
? '0' + (date.getMonth() + 1)
|
: date.getMonth() + 1) + '-'
|
var D =
|
date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' '
|
var h =
|
date.getHours() < 10
|
? '0' + date.getHours() + ':'
|
: date.getHours() + ':'
|
var m =
|
date.getMinutes() < 10
|
? '0' + date.getMinutes() + ':'
|
: date.getMinutes() + ':'
|
var s =
|
date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
|
return Y + M + D + h + m + s
|
}
|
},
|
mounted() {
|
this.getLicence()
|
},
|
methods: {
|
closeDialog() {
|
this.getLicence()
|
this.dialogVisible = false
|
},
|
async getLicence() {
|
let rsp = await showLicence()
|
if (rsp && rsp.success) {
|
if (rsp.data.License.Expires === 0) {
|
this.authStatus = 'unregistered'
|
this.tip = this.$t('licence.register')
|
} else {
|
this.authStatus = 'registered'
|
this.registe.company = rsp.data.License.RegCode.Company
|
this.registe.email = rsp.data.License.RegCode.Email
|
this.registe.phone = rsp.data.License.RegCode.Phone
|
this.licenseCode = rsp.data.License.LicenseCode
|
this.expireTime = rsp.data.License.Expires
|
this.expired = rsp.data.Expired
|
if (this.expired) {
|
this.tip = this.$t('licence.expired')
|
} else {
|
this.tip = this.$t('licence.authorized')
|
}
|
}
|
}
|
this.showBtn = true
|
},
|
getRegsiterCode() {
|
this.$refs['reginfo'].validate(valid => {
|
if (valid) {
|
getRegCode(this.registe).then(rsp => {
|
if (rsp && rsp.success) {
|
this.regCode = rsp.data
|
this.active = 'second'
|
}
|
})
|
}
|
})
|
},
|
submitLicence() {
|
updateLicence({ license: this.license })
|
.then(rsp => {
|
if (rsp && rsp.success) {
|
this.$notify({
|
type: 'success',
|
message: '更新授权成功'
|
})
|
|
this.authStatus = 'registered'
|
this.getLicence()
|
}
|
})
|
.catch(err => {
|
this.$notify({
|
type: 'error',
|
message: '授权更新失败'
|
})
|
})
|
},
|
rereg() {
|
this.active = 'first'
|
this.authStatus = 'unregistered'
|
}
|
}
|
}
|
</script>
|
<style lang="scss">
|
.s-licence {
|
.licence {
|
float: right;
|
color: white;
|
margin: 15px;
|
cursor: pointer;
|
}
|
.s-dialog {
|
width: 500px;
|
height: 360px;
|
}
|
|
.info {
|
text-align: left;
|
p {
|
line-height: 30px;
|
}
|
}
|
textarea {
|
resize: none;
|
}
|
}
|
</style>
|
