整合工程
This commit is contained in:
aixianling
@@ -1,186 +0,0 @@
|
||||
<template>
|
||||
<section class="AppCorporateSeal">
|
||||
<ai-list v-if="showList">
|
||||
<template slot="title">
|
||||
<ai-title title="企业印章" :isShowBottomBorder="true"></ai-title>
|
||||
</template>
|
||||
<template slot="content">
|
||||
<div class="signaturePane">
|
||||
<div class="signatureCard" v-for="(op,i) in signatures" :key="i">
|
||||
<div class="default" v-if="op.isDefault==1">默认</div>
|
||||
<div class="body">
|
||||
<el-image :src="`data:image/png;base64,${op.signSealData}`"/>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<el-button type="text" :disabled="op.isDefault==1" @click.stop="handleSetDefault(op.id)">设为默认</el-button>
|
||||
<hr/>
|
||||
<el-button type="text" :disabled="op.isDefault==1||op.signType==1" @click.stop="handleDelete(op.id)">删除
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="signatureCard add" @click="showList=false">
|
||||
<ai-icon icon="iconAdd" size="32px"/>
|
||||
<span>点击添加印章</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</ai-list>
|
||||
<seal-detail v-else/>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SealDetail from "./sealDetail";
|
||||
|
||||
export default {
|
||||
name: "AppCorporateSeal",
|
||||
label: "企业印章",
|
||||
components: {SealDetail},
|
||||
provide() {
|
||||
return {
|
||||
seal: this
|
||||
}
|
||||
},
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
permissions: Function
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
signatures: [],
|
||||
showList: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getSignatures()
|
||||
},
|
||||
methods: {
|
||||
getSignatures() {
|
||||
this.instance.post("/app/syssignaccount/list", null, {
|
||||
params: {
|
||||
signType: 2,
|
||||
size: 999
|
||||
}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.signatures = res.data.records
|
||||
}
|
||||
})
|
||||
},
|
||||
handleSetDefault(id) {
|
||||
this.$confirm("是否设置该印章为默认印章?").then(() => {
|
||||
this.instance.post("/app/syssignaccount/default", null, {params: {id, listType: 1}}).then(res => {
|
||||
if (res?.code == 0) {
|
||||
this.$message.success("设置成功!")
|
||||
this.getSignatures()
|
||||
}
|
||||
}).catch(() => 0)
|
||||
})
|
||||
},
|
||||
handleDelete(ids) {
|
||||
this.$confirm("是否删除该印章?").then(() => {
|
||||
this.instance.post("/app/syssignaccount/delete", null, {params: {ids}}).then(res => {
|
||||
if (res?.code == 0) {
|
||||
this.$message.success("删除成功!")
|
||||
this.getSignatures()
|
||||
}
|
||||
}).catch(() => 0)
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AppCorporateSeal {
|
||||
height: 100%;
|
||||
background: #f3f6f9;
|
||||
|
||||
:deep( .signaturePane ){
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
padding: 16px;
|
||||
|
||||
.signatureCard {
|
||||
width: 290px;
|
||||
height: 258px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
|
||||
&.add {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #666666;
|
||||
cursor: pointer;
|
||||
|
||||
.AiIcon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
& > span {
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.default {
|
||||
position: absolute;
|
||||
width: 56px;
|
||||
height: 24px;
|
||||
background: #3573FF;
|
||||
border-radius: 0 0 4px 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
line-height: 24px;
|
||||
font-size: 12px;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.body {
|
||||
min-height: 0;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 50px;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
.footer {
|
||||
flex-shrink: 0;
|
||||
height: 40px;
|
||||
background: rgba(#30426F, .5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
hr {
|
||||
height: 100%;
|
||||
border-color: rgba(#fff, .5);
|
||||
}
|
||||
|
||||
& > .el-button {
|
||||
flex: 1;
|
||||
color: #fff;
|
||||
|
||||
&[disabled] {
|
||||
color: rgba(#fff, .5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,235 +0,0 @@
|
||||
<template>
|
||||
<section class="sealDetail">
|
||||
<ai-detail>
|
||||
<template #title>
|
||||
<ai-title title="添加企业印章" isShowBack isShowBottomBorder @onBackClick="back"/>
|
||||
</template>
|
||||
<template #content>
|
||||
<el-form size="small" ref="SealForm" :model="form" :rules="rules" label-suffix="：" label-width="160px">
|
||||
<ai-title title="单位信息" isShowBottomBorder/>
|
||||
<el-form-item label="单位名称" prop="organizeName">
|
||||
<el-input clearable v-model="form.organizeName" placeholder="请输入..." maxlength="25" show-word-limit/>
|
||||
</el-form-item>
|
||||
<el-form-item label="单位类型" prop="organizeType">
|
||||
<el-select clearable v-model="form.organizeType" placeholder="请输入...">
|
||||
<el-option v-for="(op,i) in $dict.getDict('organizeType')" :key="i" :value="op.dictValue"
|
||||
:label="op.dictName"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<div class="flexFillRow">
|
||||
<el-form-item label="企业注册类型" prop="organRegType">
|
||||
<el-select clearable v-model="form.organRegType" placeholder="请输入...">
|
||||
<el-option v-for="(op,i) in $dict.getDict('organRegType')" :key="i" :value="op.dictValue"
|
||||
:label="op.dictName"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="!!form.organRegType" :label="$dict.getLabel('organRegType',form.organRegType)"
|
||||
prop="organCode">
|
||||
<el-input clearable v-model="form.organCode" placeholder="请输入..."/>
|
||||
</el-form-item>
|
||||
<div v-else/>
|
||||
</div>
|
||||
<div class="flexFillRow">
|
||||
<el-form-item label="注册类型" prop="registerType">
|
||||
<el-select clearable v-model="form.registerType" placeholder="请输入...">
|
||||
<el-option v-for="(op,i) in $dict.getDict('registerType')" :key="i" :value="op.dictValue"
|
||||
:label="op.dictName"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<div/>
|
||||
</div>
|
||||
<template v-if="form.registerType==1">
|
||||
<div class="flexFillRow">
|
||||
<el-form-item label="代理人姓名" prop="agentName">
|
||||
<el-input clearable v-model="form.agentName" placeholder="请输入..."/>
|
||||
</el-form-item>
|
||||
<el-form-item label="代理人身份证号" prop="agentIdNumber">
|
||||
<el-input clearable v-model="form.agentIdNumber" placeholder="请输入..."/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="flexFillRow">
|
||||
<el-form-item label="代理人手机号" prop="signPhone">
|
||||
<el-input clearable v-model="form.signPhone" placeholder="请输入..."/>
|
||||
</el-form-item>
|
||||
<div/>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="form.registerType==2">
|
||||
<div class="flexFillRow">
|
||||
<el-form-item label="法人姓名" prop="legalName">
|
||||
<el-input clearable v-model="form.legalName" placeholder="请输入..."/>
|
||||
</el-form-item>
|
||||
<el-form-item label="法人身份证号" prop="legalIdNumber">
|
||||
<el-input clearable v-model="form.legalIdNumber" placeholder="请输入..."/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="flexFillRow">
|
||||
<el-form-item label="法人手机号" prop="signPhone">
|
||||
<el-input clearable v-model="form.signPhone" placeholder="请输入..."/>
|
||||
</el-form-item>
|
||||
<div/>
|
||||
</div>
|
||||
</template>
|
||||
<ai-title title="印章信息" isShowBottomBorder/>
|
||||
<el-form-item class="sealImageTypes" label="生成印章类型" prop="organizeTemplateType">
|
||||
<div v-for="(op,i) in sealImageTypes" :key="i" class="item" @click="form.organizeTemplateType=op.value">
|
||||
<el-image :src="op.image" fit="contain"/>
|
||||
<el-radio :label="op.value" v-model="form.organizeTemplateType">{{ op.name }}</el-radio>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="横向文内容" prop="htext">
|
||||
<el-input clearable v-model="form.htext" placeholder="0-8个字，如合同专用章，财务专用章等" maxlength="8" show-word-limit/>
|
||||
</el-form-item>
|
||||
<el-form-item label="下弦文内容" prop="qtext">
|
||||
<el-input clearable v-model="form.qtext" placeholder="0-20个字，下弦文是指的贵司公章底部一串防伪数字" maxlength="20"
|
||||
show-word-limit/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
<template #footer>
|
||||
<el-button @click="back">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit" v-loading="loading">提交</el-button>
|
||||
</template>
|
||||
</ai-detail>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {ID} from "dui/lib/js/utils";
|
||||
|
||||
export default {
|
||||
name: "sealDetail",
|
||||
inject: ['seal'],
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
organizeTemplateType: "STAR",
|
||||
organizeType: "4",
|
||||
organRegType: "NORMAL",
|
||||
registerType: "1"
|
||||
},
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
sealImageTypes() {
|
||||
return this.$dict.getDict("organizeTemplateType")?.map(e => ({
|
||||
image: e.dictColor,
|
||||
value: e.dictValue,
|
||||
name: e.dictName
|
||||
})) || []
|
||||
},
|
||||
rules() {
|
||||
return {
|
||||
organizeName: [{required: true, message: "请填写单位名称"}],
|
||||
organCode: [{required: true, message: `请填写${this.$dict.getLabel('organRegType', this.form.organRegType)}`}],
|
||||
legalName: [{required: true, message: "请填写法人姓名"}],
|
||||
agentName: [{required: true, message: "请填写代理人姓名"}],
|
||||
organizeTemplateType: [{required: true}],
|
||||
htext: [{required: true, message: "请填写横向文内容"}],
|
||||
qtext: [{required: true, message: "请填写下弦文内容"}],
|
||||
organizeType: [{required: true, message: "请选择单位类型"}],
|
||||
organRegType: [{required: true, message: "请选择企业注册类型"}],
|
||||
registerType: [{required: true, message: "请选择注册类型"}],
|
||||
signPhone: [
|
||||
{required: true, message: "请填写手机号码"},
|
||||
{pattern: /^1[3456789]\d{9}$/, message: "手机号码格式有误"}
|
||||
],
|
||||
legalIdNumber: [
|
||||
{required: true, message: "请填写法人身份证号码"},
|
||||
{validator: (r, v, cb) => cb(ID.check(v) ? undefined : "身份证号码格式有误")}
|
||||
],
|
||||
agentIdNumber: [
|
||||
{required: true, message: "请填写代理人身份证号码"},
|
||||
{validator: (r, v, cb) => cb(ID.check(v) ? undefined : "身份证号码格式有误")}
|
||||
],
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$dict.load("registerType", "organRegType", "organizeType", "organizeTemplateType")
|
||||
},
|
||||
methods: {
|
||||
back() {
|
||||
this.seal.showList = true
|
||||
this.seal.getSignatures()
|
||||
},
|
||||
handleSubmit() {
|
||||
this.$refs.SealForm.validate(v => {
|
||||
if (v) {
|
||||
this.loading = true
|
||||
this.seal.instance.post("/app/syssignaccount/register", {
|
||||
userType: 0,
|
||||
signType: 2,
|
||||
signPhone: this.form.signPhone,
|
||||
registerInfo: {...this.form, legalArea: 0},
|
||||
style: {...this.form, sealColor: "RED"}
|
||||
}).then(res => {
|
||||
this.loading = false
|
||||
if (res?.code == 0) {
|
||||
this.$message.success("添加成功!")
|
||||
this.back()
|
||||
}
|
||||
}).catch(() => this.loading = false)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.sealDetail {
|
||||
height: inherit;
|
||||
|
||||
:deep( .ai-detail__content--wrapper ){
|
||||
.el-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 0;
|
||||
|
||||
.el-select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.sealImageTypes > .el-form-item__content {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
|
||||
.el-image {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flexFillRow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
& > * {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep( .ai-detail__footer > .el-button ){
|
||||
width: 92px;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,365 +0,0 @@
|
||||
<template>
|
||||
<section class="personal-signature">
|
||||
<ai-list v-if="!showPhonePage">
|
||||
<ai-title slot="title" title="个人签名" :isShowBottomBorder="false"/>
|
||||
<template #custom>
|
||||
<div class="signaturePane">
|
||||
<div class="signatureCard" v-for="(op,i) in signatures" :key="i">
|
||||
<div class="default" v-if="op.isDefault==1">默认</div>
|
||||
<div class="body">
|
||||
<el-image :src="`data:image/png;base64,${op.signSealData}`"/>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<el-button type="text" :disabled="op.isDefault==1" @click.stop="handleSetDefault(op.id)">设为默认</el-button>
|
||||
<hr/>
|
||||
<el-button type="text" :disabled="op.isDefault==1||op.signType>0" @click.stop="handleDelete(op.id)">删除
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="signatureCard add" @click="dialog=true">
|
||||
<ai-icon icon="iconAdd" size="32px"/>
|
||||
<span>点击添加签名</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</ai-list>
|
||||
<ai-dialog :visible.sync="dialog" v-bind="dialogConf" @onConfirm="handleSubmit"
|
||||
@closed="form={},drawPlaceholder=true,qrCode=null,showQRCode=false,getSignatures()">
|
||||
<ai-drawer v-if="hasAuthed" :seal.sync="sealData" ref="aiDrawer">
|
||||
<template #tools>
|
||||
<el-popover trigger="manual" v-model="showQRCode">
|
||||
<el-image :src="qrCode"/>
|
||||
<div class="writeInPhone" slot="reference" @click.stop="showQR">
|
||||
<ai-icon icon="iconEwm"/>
|
||||
<span>手机签名</span>
|
||||
</div>
|
||||
</el-popover>
|
||||
</template>
|
||||
</ai-drawer>
|
||||
<el-form size="small" :model="form" ref="authForm" :rules="rules" class="authZone" v-else label-suffix="："
|
||||
label-width="100px">
|
||||
<el-alert type="warning" title="第一次添加个人签名，需先进行实名认证" show-icon :closable="false"/>
|
||||
<el-form-item label="姓名" prop="personName">
|
||||
<el-input v-model="form.personName" clearable placeholder="姓名"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="身份证号" prop="idNumber">
|
||||
<el-input v-model="form.idNumber" clearable placeholder="身份证号"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号码" prop="signPhone">
|
||||
<el-input v-model="form.signPhone" clearable placeholder="手机号码"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ai-dialog>
|
||||
<draw-in-phone v-if="showPhonePage"/>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from "vuex";
|
||||
import DrawInPhone from "./drawInPhone";
|
||||
|
||||
export default {
|
||||
name: "AppPersonalSignature",
|
||||
label: "个人签名",
|
||||
components: {DrawInPhone},
|
||||
provide() {
|
||||
return {
|
||||
signature: this
|
||||
}
|
||||
},
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
permissions: Function
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
hasAuthed() {
|
||||
return this.signatures.length > 0
|
||||
},
|
||||
dialogConf() {
|
||||
return this.hasAuthed ? {
|
||||
title: "手写签名",
|
||||
width: '720px'
|
||||
} : {
|
||||
title: "实名认证",
|
||||
width: '520px'
|
||||
}
|
||||
},
|
||||
rules() {
|
||||
return {
|
||||
personName: [{required: true, message: "请填写姓名"}],
|
||||
signPhone: [
|
||||
{required: true, message: "请填写手机号码"},
|
||||
{pattern: /^1[3456789]\d{9}$/, message: "手机号码格式有误"}
|
||||
],
|
||||
idNumber: [
|
||||
{required: true, message: "请填写身份证号码"},
|
||||
{validator: (r, v, cb) => cb(ID.check(v) ? undefined : "身份证号码格式有误")}
|
||||
],
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
signatures: [],
|
||||
dialog: false,
|
||||
form: {},
|
||||
sealData: null,
|
||||
qrCode: null,
|
||||
showQRCode: false,
|
||||
showPhonePage: false,
|
||||
loading: false,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (this.$route.query.userId && this.$route.hash == "#phone") {
|
||||
this.showPhonePage = true
|
||||
} else {
|
||||
this.getSignatures()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getSignatures() {
|
||||
this.instance.post("/app/syssignaccount/list", null, {
|
||||
params: {
|
||||
size: 999
|
||||
}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.signatures = res.data.records
|
||||
}
|
||||
})
|
||||
},
|
||||
handleSubmit() {
|
||||
if (this.loading) return
|
||||
if (this.hasAuthed && this.$refs['aiDrawer'].drawPlaceholder) return this.$message.error("请签名")
|
||||
this.loading = true
|
||||
if (this.hasAuthed) {
|
||||
let sealData = this.sealData?.replace(/data:image\/png;base64,/, '')
|
||||
sealData && this.instance({
|
||||
url: '/app/syssignaccount/upload-sealdata',
|
||||
headers: {"Content-Type": "application/json"},
|
||||
method: 'post',
|
||||
params: {userId: this.user.info.id},
|
||||
data: sealData
|
||||
}).then(res => {
|
||||
this.loading = false
|
||||
if (res?.code == 0) {
|
||||
this.dialog = false
|
||||
this.$message.success("添加成功!")
|
||||
this.getSignatures()
|
||||
}
|
||||
}).catch(() => {
|
||||
this.loading = false
|
||||
})
|
||||
} else {
|
||||
this.$refs.authForm.validate(v => {
|
||||
if (v) {
|
||||
this.instance.post("/app/syssignaccount/register", {
|
||||
signPhone: this.form.signPhone,
|
||||
signType: 1,
|
||||
userType: 0,
|
||||
registerInfo: {...this.form},
|
||||
style: {personTemplateType: 'RECTANGLE', sealColor: 'RED'}
|
||||
}).then(res => {
|
||||
this.loading = false
|
||||
if (res?.code == 0) {
|
||||
this.dialog = false
|
||||
this.$message.success("认证成功!")
|
||||
this.getSignatures()
|
||||
}
|
||||
}).catch(() => {
|
||||
this.loading = false
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
handleSetDefault(id) {
|
||||
this.$confirm("是否设置该签名为默认签名?").then(() => {
|
||||
this.instance.post("/app/syssignaccount/default", null, {params: {id, listType: 0}}).then(res => {
|
||||
if (res?.code == 0) {
|
||||
this.$message.success("设置成功!")
|
||||
this.getSignatures()
|
||||
}
|
||||
}).catch(() => 0)
|
||||
})
|
||||
},
|
||||
handleDelete(ids) {
|
||||
this.$confirm("是否删除该签名?").then(() => {
|
||||
this.instance.post("/app/syssignaccount/delete", null, {params: {ids}}).then(res => {
|
||||
if (res?.code == 0) {
|
||||
this.$message.success("删除成功!")
|
||||
this.getSignatures()
|
||||
}
|
||||
}).catch(() => 0)
|
||||
})
|
||||
},
|
||||
showQR() {
|
||||
if (!this.qrCode) {
|
||||
let url = `${location.href}?userId=${this.user.info.id}#phone`
|
||||
this.instance.post("/app/syssignaccount/draw-qrcode", null, {
|
||||
params: {url}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.showQRCode = true
|
||||
this.qrCode = res.data
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.showQRCode = !this.showQRCode
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.personal-signature {
|
||||
height: 100%;
|
||||
background: #f3f6f9;
|
||||
overflow: auto;
|
||||
|
||||
:deep( .signaturePane ){
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
padding: 16px;
|
||||
|
||||
.signatureCard {
|
||||
width: 290px;
|
||||
height: 258px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
|
||||
&.add {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #666666;
|
||||
cursor: pointer;
|
||||
|
||||
.AiIcon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
& > span {
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.default {
|
||||
position: absolute;
|
||||
width: 56px;
|
||||
height: 24px;
|
||||
background: #3573FF;
|
||||
border-radius: 0 0 4px 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
line-height: 24px;
|
||||
font-size: 12px;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.body {
|
||||
min-height: 0;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 25px;
|
||||
pointer-events: none;
|
||||
|
||||
.el-image {
|
||||
width: 100%;
|
||||
height: 100%
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
flex-shrink: 0;
|
||||
height: 40px;
|
||||
background: rgba(#30426F, .5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
hr {
|
||||
height: 100%;
|
||||
border-color: rgba(#fff, .5);
|
||||
}
|
||||
|
||||
& > .el-button {
|
||||
flex: 1;
|
||||
color: #fff;
|
||||
|
||||
&[disabled] {
|
||||
color: rgba(#fff, .5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep( .writeInPhone ){
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 32px;
|
||||
background: rgba(#000, .5);
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
color: rgba(#fff, .6);
|
||||
cursor: pointer;
|
||||
left: 16px;
|
||||
top: 16px;
|
||||
|
||||
.AiIcon {
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
:deep( .ai-dialog__wrapper ){
|
||||
.ai-dialog__content--wrapper {
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 24px 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.authZone {
|
||||
padding: 0 16px 24px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
|
||||
.el-alert {
|
||||
border: 1px solid #FF8822;
|
||||
}
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,110 +0,0 @@
|
||||
<template>
|
||||
<section class="drawInPhone" @touchmove.prevent>
|
||||
<div class="endPage" v-if="finished">操作结束请关闭页面</div>
|
||||
<ai-drawer :seal.sync="sealData" placeholder="请签名" :width="device.width" :height="device.height">
|
||||
<template #tools>
|
||||
<div class="writeInPhone" slot="reference" @click.stop="handleSubmit">
|
||||
<ai-icon icon="iconPublish"/>
|
||||
<span>提交</span>
|
||||
</div>
|
||||
</template>
|
||||
</ai-drawer>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "drawInPhone",
|
||||
inject: ['signature'],
|
||||
data() {
|
||||
return {
|
||||
sealData: null,
|
||||
device: {width: 0, height: 0},
|
||||
finished: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.device.width = document.body.clientWidth
|
||||
this.device.height = document.body.clientHeight
|
||||
window.onresize = () => {
|
||||
this.device.width = document.body.clientWidth
|
||||
this.device.height = document.body.clientHeight
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSubmit() {
|
||||
let sealData = this.sealData?.replace(/data:image\/png;base64,/, ''),
|
||||
{userId} = this.$route.query
|
||||
if (!userId) return alert("缺少必要参数")
|
||||
sealData && this.signature.instance({
|
||||
url: '/app/syssignaccount/upload-sealdata',
|
||||
headers: {"Content-Type": "application/json"},
|
||||
method: 'post',
|
||||
params: {userId},
|
||||
data: sealData,
|
||||
withoutToken: true
|
||||
}).then(res => {
|
||||
if (res?.code == 0) {
|
||||
alert("添加成功!")
|
||||
this.finished = true
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.drawInPhone {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 20210205932;
|
||||
|
||||
.endPage {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 20210205933;
|
||||
background: rgba(#000, .8);
|
||||
color: #999;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.AiDrawer {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.writeInPhone {
|
||||
position: absolute;
|
||||
width: 72px;
|
||||
height: 32px;
|
||||
background: rgba(#000, .5);
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
color: rgba(#fff, .6);
|
||||
cursor: pointer;
|
||||
left: 16px;
|
||||
top: 16px;
|
||||
|
||||
.AiIcon {
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user