<template>
|
<div class="bijnm">
|
<div class="headf">
|
<div>
|
<h2>
|
<span class="hbnh"><a class="fan" @click="$router.back()"></a></span>
|
{{ title }}
|
</h2>
|
</div>
|
</div>
|
<div class="hezi" v-show="type == '1'">
|
<img src="@/assets/img/yyzz.png" />
|
<h6>{{ $t("jy321") }}</h6>
|
<p>{{ $t("jy320") }}：V1.1.2</p>
|
</div>
|
<div v-show="type != '1'" class="hezi" style="line-height: 0.5rem;">
|
<div v-if="type == 2" v-html="userInfo.companyInfo"></div>
|
<div v-else-if="type == 3" v-html="userInfo.certImg1"></div>
|
<div v-else-if="type == 4" v-html="userInfo.certImg2"></div>
|
<div v-else-if="type == 5" v-html="userInfo.tradeAgreeText"></div>
|
<div v-else-if="type == 6">{{ $t("jy319") }}</div>
|
<div v-else></div>
|
<!-- <img src="@/assets/img/yyzz.png" style="width: 100%;" /> -->
|
|
</div>
|
<div>
|
<!-- 原始图片，点击可放大 -->
|
<img
|
src="@/assets/img/yyzz.png"
|
style="width: 100%; cursor: pointer;"
|
@click="showModal = true"
|
/>
|
|
<!-- <div class="signature-area">
|
<h4>请完成电子签名</h4>
|
<vue-signature-pad
|
ref="mySignaturePad"
|
class="signature-canvas"
|
:options="signatureOptions"
|
></vue-signature-pad>
|
<div class="signature-btns">
|
<button @click="clearSignature" class="btn-clear">清空签名</button>
|
<button @click="confirmSignature" class="btn-confirm" :disabled="!isAgree || !hasSignature">确认签名</button>
|
</div>
|
</div>
|
|
<div class="signature-preview" v-if="signatureImg">
|
<h4>签名预览</h4>
|
<img :src="signatureImg" alt="电子签名" />
|
</div> -->
|
|
|
<!-- 模态框，用于显示放大的图片 -->
|
<div
|
v-if="showModal"
|
class="modal"
|
@click.self="showModal = false"
|
>
|
<div class="modal-content">
|
<img
|
:src="require('@/assets/img/yyzz.png')"
|
class="enlarged-image"
|
/>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import * as api from "@/axios/api";
|
import VueSignaturePad from 'vue-signature-pad'
|
export default {
|
name: "about",
|
components: {
|
VueSignaturePad
|
},
|
created() {
|
var that = this;
|
//接收页面传值
|
console.log(this.$route.query.e);
|
if (this.$route.query.e) {
|
switch (this.$route.query.e) {
|
case "1":
|
this.title = this.$t("jy318");
|
break;
|
case "2":
|
this.title = this.$t("jy317");
|
break;
|
case "3":
|
this.title = this.$t("jy316");
|
break;
|
case "4":
|
this.title = this.$t("jy314");
|
break;
|
case "5":
|
this.title = this.$t("jy192");
|
break;
|
case "6":
|
this.title = this.$t("jy315");
|
break;
|
default:
|
break;
|
}
|
this.type = this.$route.query.e;
|
}
|
},
|
data() {
|
return {
|
title: this.$t("jy314"),
|
type: 0,
|
userInfo: {},
|
showModal: false,
|
signatureImg: '',
|
isAgree: false,
|
hasSignature: false,
|
signatureOptions: {
|
penColor: '#000000',
|
penWidth: 2,
|
},
|
signatureInstance: null
|
};
|
},
|
mounted() {
|
this.getUserInfo();
|
// vue-signature-pad@2.x 的实例在 this.$refs.xxx.signaturePad 里
|
this.signatureInstance = this.$refs.mySignaturePad.signaturePad
|
// 监听签名变化，更新 hasSignature 状态
|
this.$refs.mySignaturePad.$on('signatureChanged', (isEmpty) => {
|
this.hasSignature = !isEmpty
|
})
|
},
|
methods: {
|
async getUserInfo() {
|
// 获取用户信息
|
let data = await api.getInfoSite();
|
if (data.status === 0) {
|
this.userInfo = data.data;
|
} else {
|
}
|
},
|
// 清空签名（调用真实实例的方法）
|
clearSignature() {
|
if (this.signatureInstance) {
|
this.signatureInstance.clear()
|
this.signatureImg = ''
|
this.hasSignature = false
|
} else {
|
alert('签名组件未初始化！')
|
}
|
},
|
// 确认签名（调用真实实例的方法）
|
confirmSignature() {
|
if (!this.isAgree) {
|
alert('请先阅读并同意用户协议！')
|
return
|
}
|
if (this.signatureInstance) {
|
// 检查是否有签名
|
if (!this.signatureInstance.isEmpty()) {
|
// 导出 Base64 图片
|
this.signatureImg = this.signatureInstance.toDataURL('image/png')
|
this.hasSignature = true
|
this.submitAgreement()
|
} else {
|
alert('请先完成电子签名！')
|
}
|
} else {
|
alert('签名组件未初始化！')
|
}
|
},
|
// 提交协议
|
submitAgreement() {
|
const submitData = {
|
userId: '当前用户ID',
|
isAgree: this.isAgree,
|
signature: this.signatureImg,
|
agreeTime: new Date().getTime()
|
}
|
console.log('提交数据：', submitData)
|
alert('签名成功，协议已提交！')
|
}
|
}
|
};
|
</script>
|
|
|
<style scoped>
|
.agreement-page {
|
padding: 20px;
|
max-width: 800px;
|
margin: 0 auto;
|
}
|
.agreement-content {
|
margin-bottom: 30px;
|
}
|
.agreement-text {
|
height: 200px;
|
overflow-y: auto;
|
padding: 10px;
|
border: 1px solid #eee;
|
margin: 10px 0;
|
}
|
.agreement-check {
|
margin: 10px 0;
|
font-size: 14px;
|
}
|
.signature-area {
|
margin: 20px 0;
|
}
|
.signature-canvas {
|
width: 100%;
|
height: 200px;
|
border: 1px dashed #ccc;
|
margin: 10px 0;
|
}
|
.signature-btns {
|
margin: 10px 0;
|
}
|
.btn-clear, .btn-confirm {
|
padding: 8px 16px;
|
margin-right: 10px;
|
border: none;
|
border-radius: 4px;
|
cursor: pointer;
|
}
|
.btn-clear {
|
background: #eee;
|
color: #333;
|
}
|
.btn-confirm {
|
background: #409eff;
|
color: #fff;
|
}
|
.btn-confirm:disabled {
|
background: #ccc;
|
cursor: not-allowed;
|
}
|
.signature-preview {
|
margin-top: 20px;
|
}
|
.signature-preview img {
|
max-width: 300px;
|
border: 1px solid #eee;
|
}
|
.modal {
|
position: fixed;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
background-color: rgba(0, 0, 0, 0.8);
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
z-index: 1000;
|
}
|
|
.modal-content {
|
position: relative;
|
max-width: 90%;
|
max-height: 90%;
|
}
|
|
.enlarged-image {
|
max-width: 100%;
|
max-height: 80vh;
|
display: block;
|
}
|
|
.bijnm {
|
background: #fff;
|
min-height: 100vh;
|
}
|
|
.headf {
|
width: 100%;
|
height: 1.1748rem;
|
background: linear-gradient(-55deg, rgb(241, 22, 20), rgb(240, 40, 37));
|
}
|
|
h2 {
|
text-align: center;
|
height: 1.2549rem;
|
width: 100%;
|
position: relative;
|
line-height: 1.2549rem;
|
font-size: 0.4806rem;
|
color: #fff;
|
background: transparent;
|
font-weight: 500;
|
z-index: 3;
|
}
|
|
.hbnh {
|
position: absolute;
|
left: 0.4005rem;
|
font-size: 0.4272rem;
|
font-weight: 500;
|
}
|
|
.fan {
|
width: 0.2403rem;
|
height: 0.4272rem;
|
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAgCAYAAAAffCjxAAAAAXNSR0IArs4c6QAAAVdJREFUSEut1usqBVEYxvH/c1MuRJJDkhwTEpIkJUlyCEk++CJJckpycw49Gs3Wa+y9Z82ePd/Xr5n38KwRNR7bE0APMK1OHdtTwAWQGZcdQbZngPMc+QImK0O2Z4GzgIxLuqoE2Z4DTgMyJuk6K08yZHseOAnIqKSbRo2TINsLwHFARiTdxkaVQrYXgaOADEu6K3a7LWR7CTjMD2XdaYq0rZHtFWA/Rz6BIUn3reau6RvZXgX28kMfOfLQbnj/QbbXgN380HuOPJZtwB/I9jqwE5ABSc9lyJ8a2d4AtgPSL+klBfmFbG8CWwHpk/SaivxAtjMgg7Inq0mvpLcqSHehTOvKpzU+oSvFDlj99gesOJCDkp7Kip+yIknT3XL7C0tbum9lMbIMHKQkQEqwJWVSKZTPWTElq0dt6GYxt6uHf8DqX0cBq39BBqz+lR2w+j8RAfv9rfkGqF24CUdT9E4AAAAASUVORK5CYII=)
|
no-repeat 50%;
|
background-size: 100%;
|
display: inline-block;
|
margin-right: 0.1335rem;
|
vertical-align: middle;
|
margin-top: -0.0534rem;
|
}
|
|
.hezi {
|
width: 9.2115rem;
|
border-bottom: 0.0267rem solid #e0e0e0;
|
margin: 0 auto;
|
margin-top: 1.1748rem;
|
padding-bottom: 0.534rem;
|
}
|
|
.hezi img {
|
width: 5rem;
|
}
|
</style>
|
