hy-shop-admin/src/views/maintain/auth/index.vue

332 lines
9.4 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="divBox">
<!-- <el-card class="box-card">
<div class="auth acea-row row-between-wrapper">
<div class="acea-row row-middle">
<i class="el-icon-share iconIos blue" />
<div v-if="status === -1 || status === -9" class="text">
<div>体验时间剩余 {{ dayNum }}天</div>
<div class="code">到期后后台将不能正常使用,如果您对我们的系统满意,请支持正版!</div>
</div>
<div v-else-if="status === 2" class="text">
<div>体验时间剩余 {{ dayNum }}天</div>
<div class="code red">审核未通过</div>
</div>
<div v-else-if="status === 1" class="text">
<div>商业授权</div>
<div class="code">授权码:{{ authCode }}</div>
</div>
<div v-else-if="status === 0" class="text">
<div>体验时间剩余 {{ dayNum }}天</div>
<div class="code blue">授权申请已提交,请等待审核</div>
</div>
</div>
<div>
<el-button v-if="status === 1" size="small" @click="toCrmeb()">进入官网</el-button>
<el-button v-else-if="status === -1 || status === -9" type="primary" size="small" @click="applyAuth">申请授权</el-button>
<el-button v-else-if="status === 2" type="primary" size="small" @click="applyAuth">重新申请</el-button>
<el-button v-else-if="status === 0" size="small" class="grey">审核中</el-button>
</div>
</div> -->
<!-- </el-card> -->
<el-card v-if="copyrightStatus != 1 && status == 1" class="box-card mt15">
<!-- <div class="auth acea-row row-between-wrapper">
<div class="acea-row row-middle">
<i class="el-icon-s-help iconIos blue" />
<div class="text">
<div>去版权服务</div>
<div class="code">购买之后可以设置</div>
</div>
</div>
<div>
<el-button type="primary" size="small" @click="isTemplate = true; title='去版权'">去版权</el-button>
</div>
</div> -->
</el-card>
<el-card v-if="copyrightStatus == 1 && status == 1" style="margin-top: 15px;">
<!-- <div class="auth acea-row row-between-wrapper">
<div class="acea-row row-middle">
<span class="iconfont iconbanquan iconIos blue"></span>
<div class="acea-row row-middle">
<span class="update">修改授权信息:</span>
<el-input style="width: 460px" v-model="copyrightText" />
</div>
</div>
<el-button type="primary" size="small" @click="saveCopyRight">保存</el-button>
</div>
<div class="authorized" @click="modalPicTap()">
<div>
<span class="update">上传授权图片:</span>
</div>
<div class="uploadPictrue" v-if="authorizedPicture">
<img v-lazy="authorizedPicture" />
</div>
<div class="upload" v-else>
<div class="iconfont">+</div>
</div>
</div>
<span class="prompt">建议尺寸宽290px*高100px</span> -->
</el-card>
<!-- <el-dialog
v-if="isTemplate"
v-model="isTemplate"
:visible.sync="isTemplate"
:before-close="handleClose"
width="440px"
:title="title"
close-on-click-modal
class="mapBox"
custom-class="dialog-scustom"
style="padding: 0;"
>
<iframe :src="iframeUrl+'&inner_frame=1'" style="width:400px;height:600px;" frameborder="0" />
</el-dialog> -->
</div>
</template>
<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2024 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import { authTypeApi, getAuthApi, authApplyApi, saveCrmebCopyRight, applyAuthApi, getCrmebCopyRight } from '@/api/maintain'
export default {
name: 'Index',
data() {
return {
formItem: {
company_name: '',
domain_name: '',
order_id: '',
phone: '',
captcha: ''
},
ruleValidate: {
company_name: [
{ required: true, message: '请填写您的企业名称', trigger: 'blur' }
],
domain_name: [
{ required: true, message: '请输入域名格式baidu.com', trigger: 'blur' }
],
order_id: [
{ required: true, message: '请输入您在淘宝或小程序购买的源码订单号', trigger: 'blur' }
],
phone: [
{ required: true, message: '请输入负责人电话', trigger: 'blur' }
],
captcha: [
{ required: true, message: '请输入验证码', trigger: 'blur' }
]
},
dialogVisible: false,
status: -1,
dayNum: 0,
captchs: '',
authCode: '',
loading: false,
isTemplate: false,
iframeUrl: '',
copyright: '',
copyrightText: '',
authorizedPicture: '', // 版权图片
modalPic: false,
copyrightStatus: 0,
title: ''
}
},
mounted() {
// this.getAuth()
// this.getAuthData()
// this.captchsChang()
// window.addEventListener("message", e=>{
// if(e.data.event == 'onCancel'){
// this.handleClose();
// }
// })
},
methods: {
captchsChang() {
this.captchs = this.captchs + Date.parse(new Date())
},
cancel() {
this.dialogVisible = false
},
// 提交
handleSubmit(name) {
this.$refs[name].validate((valid) => {
if (valid) {
this.loading = true
authApplyApi(this.formItem).then(res => {
this.$message.success(res.message)
this.loading = false
this.dialogVisible = false
this.getAuth()
}).catch(res => {
this.loading = false
this.captchsChang()
this.$message.error(res.message)
})
} else {
return false
}
})
},
getAuth() {
authTypeApi().then(res => {
const data = res.data || {}
this.authCode = data.authCode || ''
this.status = data.status === undefined ? -1 : data.status
this.dayNum = data.day || 0
})
},
getAuthData() {
getAuthApi().then(res => {
const data = res.data || {}
this.copyrightStatus = res.data.status
if(res.data.status == -1){
this.iframeUrl = res.data.url
}else{
this.copyrightText = res.data.copyright_context || ''
this.authorizedPicture = res.data.copyright_image || ''
}
})
},
// 申请授权
applyAuth() {
applyAuthApi().then(res => {
this.iframeUrl = res.data.url
this.isTemplate = true
this.title = "申请授权"
})
},
//保存版权信息
saveCopyRight() {
saveCrmebCopyRight({
copyright_context: this.copyrightText,
copyright_image: this.authorizedPicture,
}).then((res) => {
return this.$message.success(res.message)
}).catch(({ message }) => {
this.$message.error(message);
});
},
// 选择图片
modalPicTap() {
const _this = this;
this.$modalUpload(function (img) {
_this.authorizedPicture = img[0];
});
},
toCrmeb() {
// window.open('http://www.crmeb.com')
},
handleClose(){
this.isTemplate = false
this.getAuthData();
}
}
}
</script>
<style scoped lang="scss">
.auth {
padding: 9px 16px 9px 10px;
}
.auth .iconIos {
font-size: 40px;
margin-right: 10px;
color: #001529;
}
.auth .text {
font-weight: 400;
color: rgba(0, 0, 0, 1);
font-size: 18px;
}
.auth .price{
color: red;
font-size: 18px;
}
.auth .text .code {
font-size: 14px;
color: rgba(0, 0, 0, 0.5);
margin-top: 5px;
}
.auth .blue {
color: #1890FF !important;
}
.auth .red {
color: #ED4014 !important;
}
.grey {
background-color: #999999;
border-color: #999999;
color: #fff;
}
.update {
font-size: 13px;
color: rgba(0, 0, 0, 0.85);
padding-right: 12px;
}
.prompt {
margin-left: 152px;
font-size: 12px;
font-weight: 400;
color: #999999;
}
.code .input .ivu-input {
border-radius: 4px 0 0 4px !important;
}
.code .pictrue {
height: 32px;
width: 17%;
}
.submit {
width: 100%;
}
.code .input {
width: 83%;
}
.authorized {
display: flex;
margin-left: 60px;
margin-bottom: 14px;
.upload {
width: 60px;
height: 60px;
background: rgba(0, 0, 0, 0.02);
border-radius: 4px;
border: 1px solid #DDDDDD;
}
}
.upload .iconfont {
text-align: center;
line-height: 60px;
}
.uploadPictrue {
width: 60px;
height: 60px;
border: 1px dotted rgba(0, 0, 0, 0.1);
margin-right: 10px;
}
.uploadPictrue img {
width: 100%;
height: 100%;
}
.customer {
border-right: 0;
}
.customer a {
font-size: 12px;
}
.ivu-input-group-prepend, .ivu-input-group-append {
background-color: #fff;
}
.ivu-input-group .ivu-input {
border-right: 0 !important;
}
</style>