完成电子签约功能
This commit is contained in:
赵毅
parent
a128f19808
commit
b4146f812b
@ -57,4 +57,6 @@ export const apiArr = {
|
||||
|
||||
|
||||
getShopList: "/api/v2/wechat/merchant-crud-list/by-user", //根据用户获取商家列表
|
||||
|
||||
ecApply: "/api/v2/wechat/lkl-split-business/ec-apply", //电子合同申请
|
||||
};
|
||||
|
||||
430
packages/customerService/contract/index.css
Normal file
430
packages/customerService/contract/index.css
Normal file
@ -0,0 +1,430 @@
|
||||
/* 全局样式重置与基础设置 */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: "SimSun", "宋体", serif;
|
||||
}
|
||||
|
||||
page {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.contract-container {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
padding: 15px;
|
||||
box-sizing: border-box;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
word-break: break-word;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* 导航栏样式 */
|
||||
.nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20rpx 30rpx;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
font-size: 26rpx;
|
||||
color: #0066cc;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 滚动容器样式 */
|
||||
.contract-scroll {
|
||||
width: 100%;
|
||||
padding: 20rpx 30rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 合同内容区基础样式 */
|
||||
.contract-content {
|
||||
width: 100%;
|
||||
line-height: 1.8;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
/* 合同头部样式 */
|
||||
.header {
|
||||
margin-bottom: 40rpx;
|
||||
/* text-align: center; */
|
||||
}
|
||||
|
||||
.qrcode-tip {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.contract-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
margin: 20rpx 0;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.party-info {
|
||||
text-align: left;
|
||||
margin: 30rpx 0;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
.preamble {
|
||||
text-indent: 56rpx;
|
||||
/* 首行缩进2字符（28rpx*2） */
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
/* 条款通用样式 */
|
||||
.clauses {
|
||||
margin-bottom: 60rpx;
|
||||
}
|
||||
|
||||
.clause {
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.clause-num {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
margin: 20rpx 0;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.clause-content {
|
||||
margin-left: 40rpx;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
/* 服务项样式 */
|
||||
.service-item {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
margin: 20rpx 0 10rpx 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.service-desc {
|
||||
text-indent: 56rpx;
|
||||
margin: 10rpx 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.service-list {
|
||||
list-style: disc;
|
||||
margin-left: 50rpx;
|
||||
margin-bottom: 20rpx;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
|
||||
.service-list li {
|
||||
margin-bottom: 15rpx;
|
||||
line-height: 1.8;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 表格通用样式 */
|
||||
.fee-table,
|
||||
.info-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 20rpx 0;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.fee-table th,
|
||||
.fee-table td,
|
||||
.info-table th,
|
||||
.info-table td {
|
||||
border: 1px solid #333333;
|
||||
padding: 12rpx 8rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.fee-table th,
|
||||
.info-table th,
|
||||
.info-table .table-label {
|
||||
background-color: #f5f5f5;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 填写项样式 */
|
||||
.fill-input {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4rpx;
|
||||
padding: 0 8px;
|
||||
margin: 0 4rpx;
|
||||
font-size: 13px;
|
||||
color: #333333;
|
||||
background-color: #ffffff;
|
||||
flex-shrink: 0;
|
||||
height: 28px;
|
||||
width: 80px;
|
||||
box-sizing: border-box;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.fill-tiny {
|
||||
width: 60px;
|
||||
/* 小尺寸输入框（如百分比、台数） */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.fill-small {
|
||||
width: 140px;
|
||||
/* 中尺寸输入框（如银行名称、其他说明） */
|
||||
}
|
||||
|
||||
.fill-normal {
|
||||
width: 300rpx;
|
||||
/* 常规尺寸输入框（如商户名称、地址） */
|
||||
}
|
||||
|
||||
.fill-date {
|
||||
width: 220rpx;
|
||||
/* 日期输入框 */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.fill-table {
|
||||
width: 100%;
|
||||
/* 表格内输入框：填满单元格 */
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 单选/多选样式 */
|
||||
.radio-label,
|
||||
.checkbox-label {
|
||||
margin-right: 25rpx;
|
||||
margin-bottom: 15rpx;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
flex-wrap: wrap;
|
||||
gap: 8rpx;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* 单选/多选组容器：控制整体间距 */
|
||||
.radio-group-container,
|
||||
.checkbox-group-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15rpx;
|
||||
margin: 15rpx 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 单个单选/多选选项：垂直居中对齐，统一高度 */
|
||||
.radio-label,
|
||||
.checkbox-label {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
word-break: break-word;
|
||||
max-width: 100%;
|
||||
flex-wrap: wrap;
|
||||
gap: 8rpx;
|
||||
/* radio/checkbox 与文本的间距 */
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
padding: 8rpx 0;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
/* 商户更名输入框：仅在选中时显示，与文本对齐 */
|
||||
#input-original-name {
|
||||
margin-left: 10rpx;
|
||||
/* 与“商户更名”文本的间距 */
|
||||
margin-top: 0;
|
||||
/* 清除默认margin，确保垂直居中 */
|
||||
}
|
||||
|
||||
/* 备注/说明文本样式 */
|
||||
.note,
|
||||
.mode-note,
|
||||
.risk-note,
|
||||
.deduct-note,
|
||||
.table-note,
|
||||
.appendix-footnote {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
margin: 10rpx 0;
|
||||
text-indent: 56rpx;
|
||||
}
|
||||
|
||||
/* 签字区域样式 */
|
||||
.sign-main,
|
||||
.sign-appendix {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 60rpx 0;
|
||||
padding: 0 40rpx;
|
||||
}
|
||||
|
||||
.sign-party {
|
||||
text-align: center;
|
||||
width: 45%;
|
||||
line-height: 2.2;
|
||||
}
|
||||
|
||||
/* 附件通用样式 */
|
||||
.appendix {
|
||||
margin: 80rpx 0;
|
||||
padding: 20rpx;
|
||||
border-top: 1px dashed #cccccc;
|
||||
}
|
||||
|
||||
.appendix-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin: 30rpx 0;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.appendix-subtitle {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
margin: 30rpx 0 15rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.appendix-note {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
text-align: right;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
/* 授权书内容样式 */
|
||||
.authorization-content {
|
||||
text-indent: 56rpx;
|
||||
margin: 15rpx 0;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
/* 提交按钮样式 */
|
||||
.submit-btn {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
background-color: #0066cc;
|
||||
color: #ffffff;
|
||||
font-size: 32rpx;
|
||||
padding: 18rpx 0;
|
||||
border-radius: 12rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 适配小程序端滚动条样式（隐藏默认滚动条） */
|
||||
::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
/* 补充样式优化 */
|
||||
.radio-group-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20rpx;
|
||||
margin: 10rpx 0;
|
||||
}
|
||||
|
||||
.radio-label,
|
||||
.checkbox-label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin-right: 25rpx;
|
||||
margin-bottom: 10rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.checkbox-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 15rpx;
|
||||
}
|
||||
|
||||
.service-list li {
|
||||
margin-bottom: 15rpx;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.fee-label {
|
||||
display: block;
|
||||
margin: 8rpx 0;
|
||||
}
|
||||
|
||||
.mode-item {
|
||||
margin: 15rpx 0;
|
||||
text-indent: 56rpx;
|
||||
}
|
||||
|
||||
.mode-note {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
margin: 10rpx 0;
|
||||
text-indent: 56rpx;
|
||||
}
|
||||
|
||||
.table-note {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
margin: 10rpx 0 5rpx 0;
|
||||
}
|
||||
|
||||
.authorization-content {
|
||||
text-indent: 56rpx;
|
||||
margin: 15rpx 0;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.sign-appendix {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
margin: 40rpx 0;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.sign-appendix p {
|
||||
line-height: 2;
|
||||
font-size: 26rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
/* 优化表格内输入框 */
|
||||
.info-table .fill-input,
|
||||
.fee-table .fill-input {
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #0066cc;
|
||||
margin: 2rpx;
|
||||
}
|
||||
|
||||
/* 优化单选/多选按钮对齐 */
|
||||
radio,
|
||||
checkbox {
|
||||
margin-right: 8rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
1159
packages/customerService/contract/index.vue
Normal file
1159
packages/customerService/contract/index.vue
Normal file
File diff suppressed because it is too large
Load Diff
116
packages/customerService/sign/index.css
Normal file
116
packages/customerService/sign/index.css
Normal file
@ -0,0 +1,116 @@
|
||||
/* 合同申请表单样式 */
|
||||
.contract-apply-container {
|
||||
padding: 30rpx;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
|
||||
page {
|
||||
padding-bottom: 0rpx;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.page-header .subtitle {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.contract-form {
|
||||
background-color: #fff;
|
||||
border-radius: 10rpx;
|
||||
padding: 30rpx;
|
||||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.form-item {
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
margin-bottom: 10rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.form-label.required::after {
|
||||
content: '*';
|
||||
color: #e64340;
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
|
||||
.form-input,
|
||||
.form-select {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
border: 1rpx solid #d9d9d9;
|
||||
border-radius: 8rpx;
|
||||
padding: 0 20rpx;
|
||||
font-size: 28rpx;
|
||||
box-sizing: border-box;
|
||||
line-height: 80rpx;
|
||||
}
|
||||
|
||||
.form-input:focus,
|
||||
.form-select:focus {
|
||||
border-color: #409eff;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.form-select {
|
||||
appearance: none;
|
||||
background: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="%23999" d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path></svg>') no-repeat right 20rpx center;
|
||||
background-size: 24rpx 24rpx;
|
||||
}
|
||||
|
||||
/* 按钮样式 */
|
||||
.sign-btn,
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
height: 90rpx;
|
||||
border: none;
|
||||
border-radius: 45rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20rpx;
|
||||
transition: all 0.3s;
|
||||
line-height: 90rpx;
|
||||
}
|
||||
|
||||
.sign-btn {
|
||||
background-color: #f0f0f0;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.sign-btn:active {
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
background-color: #409eff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.submit-btn:active {
|
||||
background-color: #66b1ff;
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media screen and (max-width: 768px) {
|
||||
.contract-apply-container {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.contract-form {
|
||||
padding: 20rpx;
|
||||
}
|
||||
}
|
||||
312
packages/customerService/sign/index.vue
Normal file
312
packages/customerService/sign/index.vue
Normal file
@ -0,0 +1,312 @@
|
||||
<template>
|
||||
<view class="contract-apply-container">
|
||||
<view class="page-header">
|
||||
<h1>合同申请</h1>
|
||||
</view>
|
||||
|
||||
<form class="contract-form">
|
||||
|
||||
<!-- 合同类别 -->
|
||||
<view class="form-item">
|
||||
<view class="form-label required">合同类别</view>
|
||||
<view class="form-input-wrapper">
|
||||
<view class="form-select" @click="handleEcTypeClick">
|
||||
{{ getEcTypeLabel({ value: formData.ec_type_code }) || formData.ec_type_code || '请选择合同类别' }}
|
||||
</view>
|
||||
<u-picker :show="showEcTypePicker" :columns="[ecTypeOptions]" keyName="label" @confirm="onEcTypeConfirm"
|
||||
@cancel="showEcTypePicker = false" @close="showEcTypePicker = false" :closeOnClickOverlay="true"></u-picker>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 法人/经营者证件类型 -->
|
||||
<view class="form-item">
|
||||
<view class="form-label required">法人/经营者证件类型</view>
|
||||
<view class="form-input-wrapper">
|
||||
<view class="form-select" @click="handleCertTypeClick">
|
||||
{{ getCertTypeLabel(formData.cert_type) || '请选择证件类型' }}
|
||||
</view>
|
||||
<u-picker :show="showCertTypePicker" :columns="[certTypeOptions]" keyName="label" @confirm="onCertTypeConfirm"
|
||||
@cancel="showCertTypePicker = false" @close="showCertTypePicker = false"
|
||||
:closeOnClickOverlay="true"></u-picker>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 法人/经营者姓名 -->
|
||||
<view class="form-item">
|
||||
<view class="form-label required">法人/经营者姓名</view>
|
||||
<input type="text" class="form-input" v-model="formData.cert_name" placeholder="请输入姓名" />
|
||||
</view>
|
||||
|
||||
<!-- 法人/经营者证件号码 -->
|
||||
<view class="form-item">
|
||||
<view class="form-label required">法人/经营者证件号码</view>
|
||||
<input type="text" class="form-input" v-model="formData.cert_no" placeholder="请输入证件号码" />
|
||||
</view>
|
||||
|
||||
<!-- 签约手机号 -->
|
||||
<view class="form-item">
|
||||
<view class="form-label required">签约手机号</view>
|
||||
<input type="tel" class="form-input" v-model="formData.mobile" placeholder="请输入手机号" />
|
||||
</view>
|
||||
|
||||
<!-- 营业执照号 -->
|
||||
<view class="form-item">
|
||||
<view class="form-label">营业执照号</view>
|
||||
<input type="text" class="form-input" v-model="formData.business_license_no" placeholder="请输入营业执照号（可选）" />
|
||||
</view>
|
||||
|
||||
<!-- 营业执照名称 -->
|
||||
<view class="form-item">
|
||||
<view class="form-label">营业执照名称</view>
|
||||
<input type="text" class="form-input" v-model="formData.business_license_name" placeholder="请输入营业执照名称（可选）" />
|
||||
</view>
|
||||
|
||||
<!-- 企业/经营者结算开户行号 -->
|
||||
<view class="form-item">
|
||||
<view class="form-label required">企业/经营者结算开户行号</view>
|
||||
<input type="text" class="form-input" v-model="formData.openning_bank_code" placeholder="请输入开户行号" />
|
||||
</view>
|
||||
|
||||
<!-- 企业/经营者结算开户行名称 -->
|
||||
<view class="form-item">
|
||||
<view class="form-label required">企业/经营者结算开户行名称</view>
|
||||
<input type="text" class="form-input" v-model="formData.openning_bank_name" placeholder="请输入开户行名称" />
|
||||
</view>
|
||||
|
||||
<!-- 企业/经营者结算卡性质 -->
|
||||
<view class="form-item">
|
||||
<view class="form-label required">企业/经营者结算卡性质</view>
|
||||
<view class="form-input-wrapper">
|
||||
<view class="form-select" @click="handleAcctTypeClick">
|
||||
{{ formData.acct_type_code ? (formData.acct_type_code === '57' ? '对公' : '对私') : '请选择结算卡性质' }}
|
||||
</view>
|
||||
<u-picker :show="showAcctTypePicker" :columns="[acctTypeOptions]" keyName="label" @confirm="onAcctTypeConfirm"
|
||||
@cancel="showAcctTypePicker = false" @close="showAcctTypePicker = false"
|
||||
:closeOnClickOverlay="true"></u-picker>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 企业/经营者结算卡号 -->
|
||||
<view class="form-item">
|
||||
<view class="form-label required">企业/经营者结算卡号</view>
|
||||
<input type="text" class="form-input" v-model="formData.acct_no" placeholder="请输入结算卡号" />
|
||||
</view>
|
||||
|
||||
<!-- 企业/经营者结算卡名称 -->
|
||||
<view class="form-item">
|
||||
<view class="form-label required">企业/经营者结算卡名称</view>
|
||||
<input type="text" class="form-input" v-model="formData.acct_name" placeholder="请输入结算卡名称" />
|
||||
</view>
|
||||
|
||||
<!-- 签署协议按钮 -->
|
||||
<button type="button" class="sign-btn" @click="goToSignAgreement">签署协议</button>
|
||||
|
||||
<!-- 提交申请按钮 -->
|
||||
<button type="button" class="submit-btn" @click="submitApplication">提交申请</button>
|
||||
</form>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { picUrl, menuButtonInfo, request, NavgateTo } from "../../../utils";
|
||||
import { apiArr } from "../../../api/community";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
formData: {
|
||||
ec_type_code: 'Ec007',
|
||||
cert_type: '',
|
||||
cert_name: '',
|
||||
cert_no: '',
|
||||
mobile: '',
|
||||
business_license_no: '',
|
||||
business_license_name: '',
|
||||
openning_bank_code: '',
|
||||
openning_bank_name: '',
|
||||
acct_type_code: '',
|
||||
acct_no: '',
|
||||
acct_name: '',
|
||||
ec_content_parameters: ''
|
||||
},
|
||||
// picker显示状态
|
||||
showEcTypePicker: false,
|
||||
showCertTypePicker: false,
|
||||
showAcctTypePicker: false,
|
||||
// picker选项数据
|
||||
ecTypeOptions: [
|
||||
{ label: '特约商户支付服务合作协议V4.1 + 结算授权委托书', value: 'Ec007' }
|
||||
],
|
||||
certTypeOptions: [
|
||||
{ label: '身份证', value: 'RESIDENT_ID' },
|
||||
{ label: '护照', value: 'PASSPORT' },
|
||||
{ label: '港澳居民往来内地通行证', value: 'HK_MACAO_PASS' },
|
||||
{ label: '台湾居民来往大陆通行证', value: 'TAIWAN_PASS' }
|
||||
],
|
||||
acctTypeOptions: [
|
||||
{ label: '对公', value: '57' },
|
||||
{ label: '对私', value: '58' }
|
||||
]
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
// 如果从上一个页面返回并携带了ec_content参数，则设置
|
||||
if (options.ec_content) {
|
||||
this.formData.ec_content_parameters = options.ec_content;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 获取合同类别显示文本
|
||||
getEcTypeLabel(code) {
|
||||
// 兼容直接传入value或者包含value属性的对象
|
||||
const targetValue = typeof code === 'string' ? code : (code && code.value ? code.value : code);
|
||||
const option = this.ecTypeOptions.find(item => item.value === targetValue);
|
||||
return option ? option.label : null;
|
||||
},
|
||||
// 获取证件类型显示文本
|
||||
getCertTypeLabel(type) {
|
||||
const option = this.certTypeOptions.find(item => item.value === type);
|
||||
return option ? option.label : null;
|
||||
},
|
||||
// 调试点击事件
|
||||
handleEcTypeClick() {
|
||||
console.log('点击了合同类别，当前状态:', this.showEcTypePicker);
|
||||
this.showEcTypePicker = true;
|
||||
console.log('设置后状态:', this.showEcTypePicker);
|
||||
},
|
||||
handleCertTypeClick() {
|
||||
console.log('点击了证件类型，当前状态:', this.showCertTypePicker);
|
||||
this.showCertTypePicker = true;
|
||||
console.log('设置后状态:', this.showCertTypePicker);
|
||||
},
|
||||
handleAcctTypeClick() {
|
||||
console.log('点击了结算卡性质，当前状态:', this.showAcctTypePicker);
|
||||
this.showAcctTypePicker = true;
|
||||
console.log('设置后状态:', this.showAcctTypePicker);
|
||||
},
|
||||
// 合同类别选择确认
|
||||
onEcTypeConfirm(e) {
|
||||
console.log('合同类别确认事件:', e);
|
||||
// uview-ui的u-picker组件返回的数据格式
|
||||
const selectedValue = e.value[0];
|
||||
// 查找对应的选项对象
|
||||
const selectedOption = this.ecTypeOptions.find(item => item.value === selectedValue);
|
||||
this.formData.ec_type_code = selectedOption ? selectedOption.value : selectedValue;
|
||||
this.showEcTypePicker = false;
|
||||
},
|
||||
// 证件类型选择确认
|
||||
onCertTypeConfirm(e) {
|
||||
console.log('证件类型确认事件:', e);
|
||||
const selectedValue = e.value[0];
|
||||
const selectedOption = this.certTypeOptions.find(item => item.value === selectedValue.value);
|
||||
this.formData.cert_type = selectedOption ? selectedOption.value : selectedValue;
|
||||
this.showCertTypePicker = false;
|
||||
},
|
||||
// 结算卡性质选择确认
|
||||
onAcctTypeConfirm(e) {
|
||||
console.log('结算卡性质确认事件:', e);
|
||||
const selectedValue = e.value[0];
|
||||
const selectedOption = this.acctTypeOptions.find(item => item.value === selectedValue.value);
|
||||
this.formData.acct_type_code = selectedOption ? selectedOption.value : selectedValue;
|
||||
this.showAcctTypePicker = false;
|
||||
},
|
||||
goToSignAgreement() {
|
||||
NavgateTo('/packages/customerService/contract/index', {
|
||||
// 监听协议页面传递回来的数据
|
||||
onAgreementSigned: (data) => {
|
||||
if (data && data.ec_content) {
|
||||
this.formData.ec_content_parameters = data.ec_content;
|
||||
uni.showToast({
|
||||
title: '协议签署成功',
|
||||
icon: 'success'
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
submitApplication() {
|
||||
表单验证
|
||||
if (!this.validateForm()) {
|
||||
return;
|
||||
}
|
||||
// 整合参数并输出到控制台
|
||||
console.log('提交的合同申请参数：', this.formData);
|
||||
request(apiArr.ecApply, "POST", this.formData).then(res => {
|
||||
uni.showToast({
|
||||
title: '提交成功',
|
||||
icon: 'success'
|
||||
});
|
||||
})
|
||||
},
|
||||
|
||||
// 表单验证方法
|
||||
validateForm() {
|
||||
const { formData } = this;
|
||||
|
||||
if (!formData.ec_type_code) {
|
||||
uni.showToast({ title: '请选择合同类别', icon: 'none' });
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!formData.cert_type) {
|
||||
uni.showToast({ title: '请选择法人/经营者证件类型', icon: 'none' });
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!formData.cert_name) {
|
||||
uni.showToast({ title: '请输入法人/经营者姓名', icon: 'none' });
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!formData.cert_no) {
|
||||
uni.showToast({ title: '请输入法人/经营者证件号码', icon: 'none' });
|
||||
return false;
|
||||
}
|
||||
|
||||
// 验证手机号格式
|
||||
if (!formData.mobile) {
|
||||
uni.showToast({ title: '请输入签约手机号', icon: 'none' });
|
||||
return false;
|
||||
} else if (!/^1[3-9]\d{9}$/.test(formData.mobile)) {
|
||||
uni.showToast({ title: '手机号格式不正确', icon: 'none' });
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!formData.openning_bank_code) {
|
||||
uni.showToast({ title: '请输入企业/经营者结算开户行号', icon: 'none' });
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!formData.openning_bank_name) {
|
||||
uni.showToast({ title: '请输入企业/经营者结算开户行名称', icon: 'none' });
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!formData.acct_type_code) {
|
||||
uni.showToast({ title: '请选择企业/经营者结算卡性质', icon: 'none' });
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!formData.acct_no) {
|
||||
uni.showToast({ title: '请输入企业/经营者结算卡号', icon: 'none' });
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!formData.acct_name) {
|
||||
uni.showToast({ title: '请输入企业/经营者结算卡名称', icon: 'none' });
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!formData.ec_content_parameters) {
|
||||
uni.showToast({ title: '请先点击签署协议并完成协议签署', icon: 'none' });
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url("./index.css");
|
||||
</style>
|
||||
@ -126,6 +126,11 @@ export default {
|
||||
image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/kefu0.png",
|
||||
name: "客服",
|
||||
url: "/packages/customerService/chattingRecords/index",
|
||||
},
|
||||
{
|
||||
image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/contract.png",
|
||||
name: "电子签约",
|
||||
url: "/packages/customerService/sign/index",
|
||||
}
|
||||
],
|
||||
walletInfo: {},
|
||||
|
||||
@ -165,6 +165,13 @@
|
||||
"navigationBarTitleText": "合作协议",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "sign/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "电子签约",
|
||||
"navigationBarBackgroundColor": "#fff"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user