2
This commit is contained in:
yanran200730
@@ -0,0 +1,365 @@
|
||||
<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(this.idCardNoUtil.checkIdCardNo(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;
|
||||
|
||||
::v-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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-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;
|
||||
}
|
||||
}
|
||||
::v-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>
|
||||
Reference in New Issue
Block a user