<template>
|
<view class="container">
|
<Nav title="签署遵纪守法承诺书" @back="goBack" />
|
|
<scroll-view class="content-scroll" scroll-y>
|
<view class="agreement-content">
|
<text class="title">{{ agreementContent.title }}</text>
|
<text class="intro">{{ agreementContent.intro }}</text>
|
<view v-for="(clause, i) in agreementContent.clauses" :key="i" class="clause">
|
<text class="clause-number">{{ clause.number }}、</text>
|
<text class="clause-text">{{ clause.text }}</text>
|
</view>
|
<text class="footer">{{ agreementContent.footer }}</text>
|
<text class="ending">{{ agreementContent.ending }}</text>
|
<view class="signature">
|
<text v-for="(line, i) in agreementContent.signature" :key="i" class="sign-line">{{ line }}</text>
|
</view>
|
</view>
|
</scroll-view>
|
|
<!-- 底部按钮 -->
|
<view class="bottom-bar">
|
<view class="btn-group">
|
<button class="cancel-btn" @tap="goBack">上一步</button>
|
<button class="confirm-btn" type="primary" @tap="openSign">签名确认</button>
|
</view>
|
</view>
|
|
<!-- 签名组件（全屏覆盖层，不嵌套在弹窗内，避免层级冲突） -->
|
<Signature ref="signatureRef" v-model="signatureData" />
|
|
<!-- 签名预览确认弹窗（签完名后展示） -->
|
<u-popup :show="showPreview" round="12" mode="center" :closeable="true" @close="showPreview = false">
|
<view v-if="showPreview" class="preview-popup">
|
<text class="preview-title">签名预览</text>
|
<view class="preview-img-wrap">
|
<image v-if="signatureData" :src="signatureData" mode="aspectFit" class="preview-img" />
|
<text v-else class="no-sign">暂无签名</text>
|
</view>
|
<view class="preview-btns">
|
<button class="re-sign-btn" @tap="reSign">重新签名</button>
|
<button class="submit-btn" type="primary" :loading="submitting" @tap="handleSubmit">确认提交</button>
|
</view>
|
</view>
|
</u-popup>
|
</view>
|
</template>
|
|
<script>
|
import Signature from '@/components/sin-signature/index.vue'
|
import { carUploadTrip } from '@/common/examine'
|
|
const AGREEMENT_CONTENT = Object.freeze({
|
title: '遵纪守法承诺书',
|
intro: '因本人在香港执行出车任务，为支持配合公司对持前往香港执行出车任务人员的管理，共同维护国家和公司的声誉，本人承诺做到：',
|
clauses: [
|
{ number: '一', text: '严格遵守中华人民共和国《海关法》、《出境入境管理法》、《出境入境边防检查条例》，香港特别行政区有关法律法规及有关外事纪律规定，保守国家及公司的商业机密。' },
|
{ number: '二', text: '严格遵守珠海市汇畅交通投资有限公司/珠海市海港汽车货运公司《出国（境）工作管理办法》等规章制度。' },
|
{ number: '三', text: '保证不利用赴港执行公务之便进行有损国家、公司形象及声誉等活动，不从事国家法律法规、香港特别行政区法律、上级主管部门或公司规章制度禁止的一切行为及活动。' },
|
{ number: '四', text: '保证不在出车任务时间内进行出入境旅游，不走私贩私、不携带违禁品出入境，不组织及不参与赌博、涉足色情场所、偷引渡等活动。如有发现其他人员或线索涉及违法违规活动，即向公司报告。' },
|
{ number: '五', text: '主动配合口岸各管理部门指挥、检查。服从口岸各管理部门指挥、检查，按规定线路行驶和停放车辆，服从调度和工作安排。' },
|
{ number: '六', text: '每日驾驶车辆出入境前后自觉检查，如发现人员或交通运输工具潜在安全管理隐患，或有涉及各口岸的违法犯罪人员、车辆进出动态等信息的，及时报告公司及珠海出入境边防检查站。' }
|
],
|
footer: '本人如有违反，自愿接受法律法规或公司规章制度的处罚。',
|
ending: '特此承诺！',
|
signature: ['承诺人签字：[ ]', '日期：[ ]']
|
})
|
|
export default {
|
components: { Signature },
|
|
data() {
|
return {
|
agreementContent: AGREEMENT_CONTENT,
|
showPreview: false,
|
signatureData: '',
|
submitting: false,
|
formData: null
|
}
|
},
|
|
onLoad() {
|
this.formData = uni.getStorageSync('signContractForm')
|
if (!this.formData) {
|
uni.showToast({ title: '未找到签署信息', icon: 'none' })
|
setTimeout(() => this.goBack(), 1500)
|
}
|
},
|
|
methods: {
|
goBack() {
|
const pages = getCurrentPages()
|
for (let i = pages.length - 2; i >= 0; i--) {
|
if (pages[i].route && pages[i].route.includes('pages/signContract')) {
|
uni.navigateBack({ delta: pages.length - 1 - i })
|
return
|
}
|
}
|
uni.navigateBack({ delta: 1 })
|
},
|
|
async openSign() {
|
try {
|
const data = await this.$refs.signatureRef.getSyncSignature()
|
if (data) {
|
this.signatureData = data
|
// 签完名后弹出预览确认
|
this.$nextTick(() => { this.showPreview = true })
|
}
|
} catch {
|
uni.showToast({ title: '签名失败', icon: 'none' })
|
}
|
},
|
|
async reSign() {
|
this.showPreview = false
|
this.signatureData = ''
|
// 等弹窗关闭后再打开签名
|
setTimeout(() => { this.openSign() }, 300)
|
},
|
|
async handleSubmit() {
|
if (!this.signatureData) {
|
return uni.showToast({ title: '请完成签名', icon: 'none' })
|
}
|
|
this.submitting = true
|
uni.showLoading({ title: '提交中...' })
|
|
try {
|
const form = { ...this.formData, signImg: this.signatureData }
|
const res = await carUploadTrip(form)
|
|
if (res === 1) {
|
uni.showToast({ title: '提交成功', icon: 'success' })
|
this.showPreview = false
|
uni.removeStorageSync('signContractForm')
|
|
// 设置刷新标志，让 operate 页面知道需要刷新数据
|
uni.setStorageSync('needRefreshOperate', true)
|
|
// 返回到 examine 页面
|
setTimeout(() => {
|
const pages = getCurrentPages()
|
for (let i = pages.length - 2; i >= 0; i--) {
|
if (pages[i].route && pages[i].route.includes('pages/examine')) {
|
uni.navigateBack({ delta: pages.length - 1 - i })
|
return
|
}
|
}
|
uni.navigateBack({ delta: 1 })
|
}, 1000)
|
} else {
|
uni.showToast({ title: '提交失败', icon: 'none' })
|
}
|
} catch (err) {
|
uni.showToast({ title: err.message || '提交失败', icon: 'none' })
|
} finally {
|
this.submitting = false
|
uni.hideLoading()
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.container {
|
display: flex;
|
flex-direction: column;
|
height: 100vh;
|
background-color: #ffffff;
|
}
|
|
.content-scroll {
|
flex: 1;
|
padding: 30rpx;
|
padding-bottom: 180rpx;
|
box-sizing: border-box;
|
}
|
|
/* 承诺书内容 */
|
.agreement-content {
|
line-height: 1.8;
|
}
|
|
.title {
|
display: block;
|
font-size: 34rpx;
|
color: #303133;
|
font-weight: 600;
|
text-align: center;
|
margin-bottom: 30rpx;
|
padding-bottom: 20rpx;
|
border-bottom: 1rpx solid #f0f0f0;
|
}
|
|
.intro {
|
display: block;
|
font-size: 28rpx;
|
color: #606266;
|
margin-bottom: 20rpx;
|
text-indent: 2em;
|
}
|
|
.clause {
|
margin-bottom: 15rpx;
|
}
|
|
.clause-number {
|
font-size: 28rpx;
|
color: #303133;
|
font-weight: 500;
|
}
|
|
.clause-text {
|
font-size: 28rpx;
|
color: #606266;
|
}
|
|
.footer,
|
.ending {
|
display: block;
|
font-size: 28rpx;
|
color: #606266;
|
margin-top: 20rpx;
|
text-indent: 2em;
|
}
|
|
.ending {
|
font-weight: 500;
|
color: #303133;
|
}
|
|
.signature {
|
margin-top: 40rpx;
|
}
|
|
.sign-line {
|
display: block;
|
font-size: 28rpx;
|
color: #606266;
|
margin-top: 15rpx;
|
text-align: right;
|
padding-right: 30rpx;
|
}
|
|
/* 底部栏 */
|
.bottom-bar {
|
position: fixed;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
background-color: #ffffff;
|
border-top: 1rpx solid #f0f0f0;
|
z-index: 99;
|
padding-bottom: env(safe-area-inset-bottom);
|
}
|
|
.btn-group {
|
display: flex;
|
gap: 20rpx;
|
padding: 20rpx 30rpx 20rpx;
|
}
|
|
.cancel-btn,
|
.confirm-btn {
|
flex: 1;
|
height: 88rpx;
|
line-height: 88rpx;
|
font-size: 30rpx;
|
border-radius: 12rpx;
|
border: none;
|
font-weight: 500;
|
}
|
|
.cancel-btn {
|
color: #606266;
|
background-color: #f5f7fa;
|
}
|
|
.cancel-btn::after,
|
.confirm-btn::after {
|
border: none;
|
}
|
|
.confirm-btn {
|
color: #fff;
|
background-color: #4285f4;
|
}
|
|
/* 签名预览弹窗 */
|
.preview-popup {
|
width: 600rpx;
|
padding: 40rpx;
|
}
|
|
.preview-title {
|
display: block;
|
font-size: 32rpx;
|
font-weight: 600;
|
color: #303133;
|
text-align: center;
|
margin-bottom: 30rpx;
|
}
|
|
.preview-img-wrap {
|
width: 100%;
|
height: 300rpx;
|
border: 2rpx dashed #dcdfe6;
|
border-radius: 12rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
background-color: #fafafa;
|
overflow: hidden;
|
}
|
|
.preview-img {
|
width: 100%;
|
height: 100%;
|
}
|
|
.no-sign {
|
color: #c0c4cc;
|
font-size: 28rpx;
|
}
|
|
.preview-btns {
|
display: flex;
|
gap: 20rpx;
|
margin-top: 30rpx;
|
}
|
|
.re-sign-btn,
|
.submit-btn {
|
flex: 1;
|
height: 80rpx;
|
line-height: 80rpx;
|
font-size: 28rpx;
|
border-radius: 10rpx;
|
border: none;
|
}
|
|
.re-sign-btn {
|
color: #606266;
|
background-color: #f5f7fa;
|
}
|
|
.re-sign-btn::after,
|
.submit-btn::after {
|
border: none;
|
}
|
|
.submit-btn {
|
color: #fff;
|
background-color: #4285f4;
|
}
|
</style>
|
