change
This commit is contained in:
@@ -3,39 +3,301 @@ layout("/layouts/platform_h5.html"){
|
||||
#-->
|
||||
|
||||
<style>
|
||||
.bgcolor-white {
|
||||
background: #ffffff;
|
||||
body {
|
||||
background: #f3f6fa;
|
||||
}
|
||||
.van-status__figure {
|
||||
text-align: center;
|
||||
line-height: 1.5;
|
||||
|
||||
.signature-page {
|
||||
min-height: 100vh;
|
||||
background: #f3f6fa;
|
||||
color: #15243a;
|
||||
}
|
||||
.van-status__figure img {
|
||||
width: 130px;
|
||||
|
||||
.signature-hero {
|
||||
position: relative;
|
||||
height: 154px;
|
||||
box-sizing: border-box;
|
||||
padding: 0 26px;
|
||||
background: linear-gradient(90deg, #0878f9 0%, #35aff6 100%);
|
||||
}
|
||||
|
||||
.signature-nav,
|
||||
.signature-nav .van-nav-bar {
|
||||
background: linear-gradient(90deg, #0878f9 0%, #35aff6 100%) !important;
|
||||
}
|
||||
|
||||
.signature-nav .van-nav-bar__title,
|
||||
.signature-nav .van-icon {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.signature-user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 36px;
|
||||
}
|
||||
|
||||
.signature-avatar-wrap {
|
||||
position: relative;
|
||||
flex: 0 0 58px;
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.signature-avatar {
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid rgba(255, 255, 255, 0.96);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.signature-online {
|
||||
position: absolute;
|
||||
right: -1px;
|
||||
bottom: 2px;
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 50%;
|
||||
background: #3dd0a0;
|
||||
}
|
||||
|
||||
.signature-user-text {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-direction: column;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.signature-user-text strong {
|
||||
overflow: hidden;
|
||||
max-width: 240px;
|
||||
margin-bottom: 1px;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.signature-body {
|
||||
position: relative;
|
||||
min-height: calc(100vh - 184px);
|
||||
box-sizing: border-box;
|
||||
margin-top: -16px;
|
||||
padding: 24px 16px 40px;
|
||||
border-radius: 18px 18px 0 0;
|
||||
background: #f3f6fa;
|
||||
}
|
||||
|
||||
.signature-card {
|
||||
margin-bottom: 18px;
|
||||
padding: 17px 16px 19px;
|
||||
border-radius: 16px;
|
||||
background: #fff;
|
||||
box-shadow: 0 8px 22px rgba(31, 72, 113, 0.06);
|
||||
}
|
||||
|
||||
.signature-card-heading {
|
||||
display: flex;
|
||||
height: 32px;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #e3ebf5;
|
||||
}
|
||||
|
||||
.signature-card-heading h2 {
|
||||
margin: 0;
|
||||
color: #18263a;
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.signature-state-tag {
|
||||
padding: 3px 10px;
|
||||
border-radius: 14px;
|
||||
background: #eaf8f3;
|
||||
color: #30bc8c;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.signature-state-tag.unset {
|
||||
background: #eef3f9;
|
||||
color: #8292a8;
|
||||
}
|
||||
|
||||
.signature-description {
|
||||
margin: 20px 0 12px;
|
||||
color: #718198;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.signature-preview {
|
||||
display: flex;
|
||||
height: 130px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #bdcbe0;
|
||||
border-radius: 10px;
|
||||
background: #f7f9fc;
|
||||
}
|
||||
|
||||
.signature-preview .van-image,
|
||||
.signature-preview .van-image__img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.signature-empty {
|
||||
color: #95a4b8;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.signature-meta {
|
||||
margin-top: 20px;
|
||||
color: #718198;
|
||||
font-size: 13px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.signature-health {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.signature-health .van-icon {
|
||||
margin-right: 8px;
|
||||
color: #42ca99;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.signature-action {
|
||||
height: 42px;
|
||||
margin-top: 15px;
|
||||
border: 0;
|
||||
background: #087cf4;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.signature-instructions {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.signature-steps {
|
||||
margin: 17px 0 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.signature-steps li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 14px;
|
||||
color: #718198;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.signature-steps li:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.signature-step-number {
|
||||
display: inline-flex;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
flex: 0 0 20px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 10px;
|
||||
border-radius: 50%;
|
||||
background: #e7f1ff;
|
||||
color: #087cf4;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.signature-editor-card {
|
||||
overflow: hidden;
|
||||
border-radius: 16px;
|
||||
background: #fff;
|
||||
box-shadow: 0 8px 22px rgba(31, 72, 113, 0.06);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="app" v-cloak>
|
||||
<van-nav-bar title="我的签名" @click-left="historyBack" left-arrow left-text="返回" placeholder fixed></van-nav-bar>
|
||||
|
||||
<div class="bgcolor-white">
|
||||
<div v-if="!showSignature" class="p10">
|
||||
<van-image width="100%" height="200" :src="userSignatureUrl" v-if="userSignatureUrl" style="border: 1px dashed #000">
|
||||
<template slot="error">获取签名失败</template>
|
||||
</van-image>
|
||||
<div v-else class="van-status__figure">
|
||||
<img src="/assets/platform/plugins/vant-green/images/figure/fail.png" class="" />
|
||||
<div class="text-center pt10 pb10">暂无签名</div>
|
||||
<div class="signature-page">
|
||||
<van-nav-bar title="我的签名" class="signature-nav" left-arrow @click-left="historyBack"
|
||||
placeholder fixed :border="false"></van-nav-bar>
|
||||
<header class="signature-hero">
|
||||
<div class="signature-user">
|
||||
<div class="signature-avatar-wrap">
|
||||
<van-image :src="avatar" round width="58" height="58" class="signature-avatar">
|
||||
<van-loading slot="loading" type="spinner" size="18"></van-loading>
|
||||
</van-image>
|
||||
<i class="signature-online"></i>
|
||||
</div>
|
||||
<div class="signature-user-text">
|
||||
<strong>{{ user.username || '-' }}</strong>
|
||||
<span>工号：{{ user.loginname || '-' }}</span>
|
||||
<span>性别：{{ user.sex || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <van-status orient="vertical" :figure="14" title="暂无签名" v-else></van-status>-->
|
||||
</header>
|
||||
|
||||
<div class="margin-top10">
|
||||
<van-button v-if="!userSignatureUrl" block type="primary" @click="openSignature">去签名</van-button>
|
||||
<van-button v-else block type="primary" @click="openSignature">修改签名</van-button>
|
||||
<main class="signature-body">
|
||||
<template v-if="!showSignature">
|
||||
<section class="signature-card">
|
||||
<div class="signature-card-heading">
|
||||
<h2>当前签名</h2>
|
||||
<span class="signature-state-tag" :class="{ unset: !userSignatureUrl }">
|
||||
{{ userSignatureUrl ? '已设置' : '未设置' }}
|
||||
</span>
|
||||
</div>
|
||||
<p class="signature-description">用于工会业务审批和材料签署</p>
|
||||
<div class="signature-preview">
|
||||
<van-image v-if="userSignatureUrl" :src="userSignatureUrl">
|
||||
<template slot="error">获取签名失败</template>
|
||||
</van-image>
|
||||
<span v-else class="signature-empty">暂无签名</span>
|
||||
</div>
|
||||
<div class="signature-meta">
|
||||
<div>最近更新：{{ signatureUpdatedAt }}</div>
|
||||
<div class="signature-health">
|
||||
<van-icon name="checked"></van-icon>
|
||||
<span>{{ userSignatureUrl ? '签名状态正常，可用于业务办理' : '请先设置签名后办理相关业务' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<van-button round block type="primary" class="signature-action" @click="openSignature">
|
||||
{{ userSignatureUrl ? '重新签名' : '立即签名' }}
|
||||
</van-button>
|
||||
</section>
|
||||
|
||||
<section class="signature-card signature-instructions">
|
||||
<div class="signature-card-heading">
|
||||
<h2>使用说明</h2>
|
||||
</div>
|
||||
<ol class="signature-steps">
|
||||
<li><span class="signature-step-number">1</span><span>在签名区域内完成本人签名</span></li>
|
||||
<li><span class="signature-step-number">2</span><span>确认清晰完整后保存</span></li>
|
||||
<li><span class="signature-step-number">3</span><span>签名变更后自动更新业务调用</span></li>
|
||||
</ol>
|
||||
</section>
|
||||
</template>
|
||||
<div v-else class="signature-editor-card">
|
||||
<signature @save="saveSignature"></signature>
|
||||
</div>
|
||||
</div>
|
||||
<signature v-if="showSignature" @save="saveSignature"></signature>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -49,14 +311,34 @@ layout("/layouts/platform_h5.html"){
|
||||
data() {
|
||||
return {
|
||||
showSignature: false,
|
||||
userSignatureUrl: null
|
||||
userSignatureUrl: null,
|
||||
signatureUpdatedTime: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
user() {
|
||||
return this.$store.state.user || {}
|
||||
},
|
||||
avatar() {
|
||||
if (this.user.sex === "男" || !this.user.sex) {
|
||||
return "/assets/platform/img/home/avatar_boy.png"
|
||||
}
|
||||
return "/assets/platform/img/home/avatar_girl.png"
|
||||
},
|
||||
signatureUpdatedAt() {
|
||||
if (!this.signatureUpdatedTime) {
|
||||
return "--"
|
||||
}
|
||||
return this.$moment(this.signatureUpdatedTime).format("YYYY-MM-DD HH:mm")
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getUserSignature() {
|
||||
this.$axios.post("/platform/signature/get").then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.userSignatureUrl = res.data.signature
|
||||
const signatureData = res.data || {}
|
||||
this.userSignatureUrl = signatureData.signature || null
|
||||
this.signatureUpdatedTime = signatureData.updatedAt || signatureData.createdAt || null
|
||||
}
|
||||
})
|
||||
},
|
||||
@@ -64,7 +346,6 @@ layout("/layouts/platform_h5.html"){
|
||||
this.showSignature = true
|
||||
},
|
||||
saveSignature(signature) {
|
||||
console.log(signature)
|
||||
const file = base64ToFile(signature, "signature.png")
|
||||
const formData = new FormData()
|
||||
formData.append("file", file)
|
||||
|
||||
Reference in New Issue
Block a user