diff --git a/src/views/standardsAssociation/CertificateManagement.vue b/src/views/standardsAssociation/CertificateManagement.vue
index 964a9d1..1cf28d4 100644
--- a/src/views/standardsAssociation/CertificateManagement.vue
+++ b/src/views/standardsAssociation/CertificateManagement.vue
@@ -162,6 +162,43 @@
       </div>
 
       <vinCertificate-modal ref="modalForm" @ok="modalFormOk"></vinCertificate-modal>
+
+      <!--    查看证书-->
+      <CheckCertificateModel ref="checkModalForm"></CheckCertificateModel>
+
+      <!--    绑定会员 窗口-->
+      <bind-member-model ref="bindMemberModelForm" @ok="modalFormOk"></bind-member-model>
+
+      <!--    续费 窗口-->
+      <renew-charge-model ref="renewChargeModelForm" @ok="modalFormOk"></renew-charge-model>
+
+      <!--    换证 窗口-->
+      <replace-ment-model ref="replaceMentModelForm" @ok="modalFormOk" @affirm="handleAffirm"></replace-ment-model>
+
+      <!--    换证确认 窗口-->
+      <replace-ment-affirm-model ref="replaceMentAffirmModelForm"></replace-ment-affirm-model>
+
+      <!--    新建VIN证书申请 免费额度内 窗口-->
+      <free-certificate-model ref="addFreeModalForm" @ok="modalFormOk"></free-certificate-model>
+
+      <!--    新建VIN证书申请 付费额度内 窗口-->
+      <charge-certificate-model ref="addChargeModalForm" @ok="modalFormOk"></charge-certificate-model>
+
+      <!--    免费证书申请编辑 窗口-->
+      <free-certificate-edit-model ref="freeCertificateEditModel" @ok="modalFormOk"></free-certificate-edit-model>
+
+      <!--    免费证书申请换证 窗口-->
+      <free-certificate-replace-edit-model
+        ref="FreeCertificateReplaceEditModel"
+        @ok="modalFormOk"
+        @affirm="handleAffirm">
+      </free-certificate-replace-edit-model>
+
+      <!--    收费证书申请编辑 窗口-->
+      <charge-certificate-edit-model ref="ChargeCertificateEditModel" @ok="modalFormOk"></charge-certificate-edit-model>
+
+      <!--    证书续费编辑 窗口-->
+      <renew-charge-edit-model ref="RenewChargeEditModel" @ok="modalFormOk"></renew-charge-edit-model>
     </a-card>
   </div>
 </template>
@@ -179,7 +216,17 @@ import JDictSelectTag from '../../components/standardsAssociation/JDictSelectTag
 // eslint-disable-next-line no-unused-vars
 import { downloadFile, getAction, getFileAccessHttpUrl } from '@/api/memberManage'
 import { CertificateModalityEnums, CertificateStatusEnums, ChargeTypeEnums } from '../../enums/memberEnums'
-
+import CheckCertificateModel from '@views/standardsAssociation/model/CheckCertificateModel'
+import BindMemberModel from '@views/standardsAssociation/model/BindMemberModel'
+import RenewChargeModel from '@views/standardsAssociation/model/RenewChargeModel'
+import ReplaceMentModel from '@views/standardsAssociation/model/ReplaceMentModel'
+import ReplaceMentAffirmModel from '@views/standardsAssociation/model/ReplaceMentAffirmModel'
+import FreeCertificateModel from '@views/standardsAssociation/model/FreeCertificateModel'
+import ChargeCertificateModel from '@views/standardsAssociation/model/ChargeCertificateModel'
+import FreeCertificateEditModel from '@views/standardsAssociation/model/FreeCertificateEditModel'
+import ChargeCertificateEditModel from '@views/standardsAssociation/model/ChargeCertificateEditModel'
+import RenewChargeEditModel from '@views/standardsAssociation/model/RenewChargeEditModel'
+import FreeCertificateReplaceEditModel from '@views/standardsAssociation/model/FreeCertificateReplaceEditModel'
 export default {
   name: 'CertificateManagement',
   mixins: [JeroListMixin, mixinDevice, RangeDateMixin, StandardListMixin],
@@ -187,7 +234,18 @@ export default {
     JMultiSelectTag,
     JDate,
     VinCertificateModal,
-    JDictSelectTag
+    JDictSelectTag,
+    CheckCertificateModel,
+    BindMemberModel,
+    RenewChargeModel,
+    ReplaceMentModel,
+    ReplaceMentAffirmModel,
+    FreeCertificateModel,
+    ChargeCertificateModel,
+    FreeCertificateEditModel,
+    ChargeCertificateEditModel,
+    RenewChargeEditModel,
+    FreeCertificateReplaceEditModel
   },
   data() {
     return {
@@ -341,6 +399,11 @@ export default {
     }
   },
   methods: {
+    // 显示换证确认 窗口
+    handleAffirm() {
+      this.$refs.replaceMentAffirmModelForm.title = '提交成功'
+      this.$refs.replaceMentAffirmModelForm.show()
+    },
     initDictConfig() {
     },
     // 授权
@@ -369,19 +432,26 @@ export default {
       // 可申请的免费证书的个数
       let freeCount
       getAction('/vinCertificate/vinCertificate/getFreeCount').then(res => {
+        console.log(res)
         if (res.success) {
           freeCount = res.result
-          that.$refs.modalForm.title = '新增申请'
-          that.$refs.modalForm.disableSubmit = false
-          that.$refs.modalForm.freeCount = freeCount
+          // that.$refs.modalForm.title = '新增申请'
+          // that.$refs.modalForm.disableSubmit = false
+          // that.$refs.modalForm.freeCount = freeCount
           // freeCount 为0 打开收费证书申请窗口
           if (freeCount === 0) {
-            that.$refs.modalForm.pageType = 6
+            // 弹出新增收费窗口操作
+            that.$refs.addChargeModalForm.title = '新增申请'
+            that.$refs.addChargeModalForm.add()
           } else {
-            that.$refs.modalForm.pageType = 5
+            // 弹出新增免费窗口操作
+            // that.$refs.modalForm.pageType = 5
+            that.$refs.addFreeModalForm.add()
+            that.$refs.addFreeModalForm.title = '新增申请'
+            that.$refs.addFreeModalForm.freeCount = freeCount
           }
-          // 弹窗口操作
-          that.$refs.modalForm.add()
+          // // 弹窗口操作
+          // that.$refs.modalForm.add()
         } else {
           that.$message.warning(res.message)
         }
@@ -389,43 +459,55 @@ export default {
     },
     // 查看证书
     handleDetail: function(record) {
-      this.$refs.modalForm.title = '查看证书'
-      this.$refs.modalForm.disableSubmit = true
-      this.$refs.modalForm.pageType = 1
-      this.$refs.modalForm.remainingTime = this.remainingTimeCount(record.certificateValidDate)
-      this.$refs.modalForm.edit(record)
+      this.$refs.checkModalForm.remainingTime = this.remainingTimeCount(record.certificateValidDate)
+      this.$refs.checkModalForm.check(record)
+
+      // this.$refs.modalForm.title = '查看证书'
+      // this.$refs.modalForm.disableSubmit = true
+      // this.$refs.modalForm.pageType = 1
+      // this.$refs.modalForm.remainingTime = this.remainingTimeCount(record.certificateValidDate)
+      // this.$refs.modalForm.edit(record)
     },
 
     // 绑定会员
     bindMember: function(record) {
-      this.$refs.modalForm.title = '绑定会员'
-      this.$refs.modalForm.disableSubmit = true
-      // 绑定会员时使用4号窗口
-      this.$refs.modalForm.pageType = 4
       // 证书id
-      this.$refs.modalForm.vinId = record.id
-      this.$refs.modalForm.edit(record)
+      this.$refs.bindMemberModelForm.vinId = record.id
+      this.$refs.bindMemberModelForm.edit(record)
+
+      // this.$refs.modalForm.title = '绑定会员'
+      // this.$refs.modalForm.disableSubmit = true
+      // // 绑定会员时使用4号窗口
+      // this.$refs.modalForm.pageType = 4
+      // // 证书id
+      // this.$refs.modalForm.vinId = record.id
+      // this.$refs.modalForm.edit(record)
     },
     // 续费
     renewCharge: function(record) {
       // if(!(record.chargeType != 1 && record.certificateModality == 3 && record.certificateStatus == 5)){
       //   return;
       // }
-      this.$refs.modalForm.title = '续费'
-      this.$refs.modalForm.disableSubmit = true
-      // 换证显示 1是世界证书
-      this.$refs.modalForm.isChangeCer = record.certificateType
-      // 证书续费时使用7号窗口
-      this.$refs.modalForm.pageType = 7
-      this.$refs.modalForm.edit2(record)
+      this.$refs.renewChargeModelForm.isChangeCer = record.certificateType
+      this.$refs.renewChargeModelForm.edit(record)
+
+      // this.$refs.modalForm.title = '续费'
+      // this.$refs.modalForm.disableSubmit = true
+      // // 换证显示 1是世界证书
+      // this.$refs.modalForm.isChangeCer = record.certificateType
+      // // 证书续费时使用7号窗口
+      // this.$refs.modalForm.pageType = 7
+      // this.$refs.modalForm.edit2(record)
     },
     // 换证
     replacement: function(record) {
-      this.$refs.modalForm.title = '换证'
-      this.$refs.modalForm.disableSubmit = true
-      // 换证的时候使用8号窗口
-      this.$refs.modalForm.pageType = 8
-      this.$refs.modalForm.edit3(record)
+      this.$refs.replaceMentModelForm.edit(record)
+
+      // this.$refs.modalForm.title = '换证'
+      // this.$refs.modalForm.disableSubmit = true
+      // // 换证的时候使用8号窗口
+      // this.$refs.modalForm.pageType = 8
+      // this.$refs.modalForm.edit3(record)
     },
     // 编辑: 包括免费证书，收费证书，续费，换证
     handleEditRenew: function(record) {
@@ -435,8 +517,8 @@ export default {
       // 证书是否免费  1-免费 2-付费
       record.chargeType = Number(record.chargeType)
       // 分为续证驳回和 非免费证书申请驳回 chargeType 1是免费证书 2是收费证书
-      this.$refs.modalForm.title = ''
-      this.$refs.modalForm.disableSubmit = true
+      // this.$refs.modalForm.title = ''
+      // this.$refs.modalForm.disableSubmit = true
       //  certificateStatus --证书状态-待支付
       if (record.certificateStatus === CertificateStatusEnums.toPay.index) {
         // 免费证书
@@ -447,55 +529,71 @@ export default {
             let freeCount
             getAction('/vinCertificate/vinCertificate/getFreeCount').then((res) => {
               freeCount = res.result
-              this.$refs.modalForm.freeCountVin = freeCount + 1
-              this.$refs.modalForm.title = '新增申请'
-              this.$refs.modalForm.disableSubmit = false
-              this.$refs.modalForm.pageType = 10
-              this.$refs.modalForm.edit5(record)
+              this.$refs.freeCertificateEditModel.freeCountVin = freeCount + 1
+              this.$refs.freeCertificateEditModel.edit(record)
+
+              // this.$refs.modalForm.freeCountVin = freeCount + 1
+              // this.$refs.modalForm.title = '新增申请'
+              // this.$refs.modalForm.disableSubmit = false
+              // this.$refs.modalForm.pageType = 10
+              // this.$refs.modalForm.edit5(record)
             })
             return
           } else if (record.certificateModality === 1) {
             // 免费证书换证编辑
-            this.$refs.modalForm.title = '换证'
-            this.$refs.modalForm.disableSubmit = true
-            // 换证的时候使用13号窗口
-            this.$refs.modalForm.pageType = 13
-            this.$refs.modalForm.edit8(record)
+            this.$refs.FreeCertificateReplaceEditModel.edit(record)
+
+            // this.$refs.modalForm.title = '换证'
+            // this.$refs.modalForm.disableSubmit = true
+            // // 换证的时候使用13号窗口
+            // this.$refs.modalForm.pageType = 13
+            // this.$refs.modalForm.edit8(record)
           }
         } else if (record.chargeType === 2 && record.certificateModality === 4) {
           // 收费证书编辑
-          this.$refs.modalForm.title = '新增申请'
-          this.$refs.modalForm.disableSubmit = false
-          this.$refs.modalForm.pageType = 11
-          this.$refs.modalForm.edit6(record)
+          this.$refs.ChargeCertificateEditModel.edit(record)
+
+          // this.$refs.modalForm.title = '新增申请'
+          // this.$refs.modalForm.disableSubmit = false
+          // this.$refs.modalForm.pageType = 11
+          // this.$refs.modalForm.edit6(record)
         } else if (record.chargeType === 2 && record.certificateModality === 2) {
           // 续费编辑
-          this.$refs.modalForm.title = '续费'
-          this.$refs.modalForm.disableSubmit = true
-          // 证书续费编辑时使用12号窗口
-          this.$refs.modalForm.pageType = 12
-          this.$refs.modalForm.edit7(record)
+          this.$refs.RenewChargeEditModel.edit(record)
+
+          // this.$refs.modalForm.title = '续费'
+          // this.$refs.modalForm.disableSubmit = true
+          // // 证书续费编辑时使用12号窗口
+          // this.$refs.modalForm.pageType = 12
+          // this.$refs.modalForm.edit7(record)
         } else if (record.chargeType === 2 && record.certificateModality === 1) {
-          // 换证编辑
-          this.$refs.modalForm.title = '换证'
-          this.$refs.modalForm.disableSubmit = true
-          // 换证的时候使用13号窗口
-          this.$refs.modalForm.pageType = 13
-          this.$refs.modalForm.edit8(record)
+          // // 换证编辑
+          this.$refs.FreeCertificateReplaceEditModel.edit(record)
+
+          // this.$refs.modalForm.title = '换证'
+          // this.$refs.modalForm.disableSubmit = true
+          // // 换证的时候使用13号窗口
+          // this.$refs.modalForm.pageType = 13
+          // this.$refs.modalForm.edit8(record)
         }
       } else {
         // 新增证书缴费编辑窗口
         if (record.chargeType === 2 && record.certificateModality === 4 && record.certificateStatus === 6) {
-          this.$refs.modalForm.title = '新增申请'
-          this.$refs.modalForm.disableSubmit = false
-          this.$refs.modalForm.pageType = 11
-          this.$refs.modalForm.edit6(record)
+          this.$refs.ChargeCertificateEditModel.edit(record)
+
+          // this.$refs.modalForm.title = '新增申请'
+          // this.$refs.modalForm.disableSubmit = false
+          // this.$refs.modalForm.pageType = 11
+          // this.$refs.modalForm.edit6(record)
         } else if (record.chargeType === 2 && record.certificateModality === 2 && record.certificateStatus === 6) {
-          this.$refs.modalForm.title = '续费'
-          this.$refs.modalForm.disableSubmit = true
-          // 证书续费编辑时使用12号窗口
-          this.$refs.modalForm.pageType = 12
-          this.$refs.modalForm.edit7(record)
+          // 续费编辑
+          this.$refs.RenewChargeEditModel.edit(record)
+
+          // this.$refs.modalForm.title = '续费'
+          // this.$refs.modalForm.disableSubmit = true
+          // // 证书续费编辑时使用12号窗口
+          // this.$refs.modalForm.pageType = 12
+          // this.$refs.modalForm.edit7(record)
         }
       }
     },
diff --git a/src/views/standardsAssociation/memberManagementModule/VinCertificateModal.vue b/src/views/standardsAssociation/memberManagementModule/VinCertificateModal.vue
index 728daed..534aaa6 100644
--- a/src/views/standardsAssociation/memberManagementModule/VinCertificateModal.vue
+++ b/src/views/standardsAssociation/memberManagementModule/VinCertificateModal.vue
@@ -3423,7 +3423,7 @@ export default {
       // 默认选择增值税发票
       let defaultInvoiceRequirements = 2
       this.model = Object.assign({}, this.currentMemberInfo, {invoiceRequirements: defaultInvoiceRequirements})
-      // console.log(this.model, '**********')
+      console.log(this.model, '**********')
       this.visible = true
       this.$nextTick(() => {
         this.form.setFieldsValue(pick(this.model, 'address', 'postcode', 'companyName', 'liaisonMan', 'mobile', 'invoiceRequirements'))
diff --git a/src/views/standardsAssociation/model/BindMemberModel.vue b/src/views/standardsAssociation/model/BindMemberModel.vue
new file mode 100644
index 0000000..d448338
--- /dev/null
+++ b/src/views/standardsAssociation/model/BindMemberModel.vue
@@ -0,0 +1,233 @@
+<template>
+  <j-modal
+    :title="title"
+    :width="width"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    :maskClosable="false"
+    switchFullscreen
+    @cancel="handleCancel"
+    cancelText="关闭">
+    <template>
+      <a-spin :spinning="confirmLoading">
+        <a-form :form="form">
+          <a-row>
+            <a-col :span="16">
+              <a-form-item label="解绑证书" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-select
+                  placeholder="请选择解绑证书"
+                  :triggerChange="true"
+                  v-decorator="['unBindId',validatorRules.unBindId]"
+                >
+                  <a-select-option
+                    v-for="item in bindVinList"
+                    :title="item.certificate+'('+item.certificate_code+')'"
+                    :key="item.id"
+                    :value="item.id">
+                    {{ item.certificate }}({{ item.certificate_code }})
+                  </a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <div class="container">
+            <label v-if="model.certificateType==1">
+              确定绑定该世界制造厂识别代号（WMI）证书到用户会员吗？绑定后，原绑定证书将解绑。
+            </label>
+            <label v-if="model.certificateType==2">
+              确定绑定该企业名称代号证书到用户会员吗？绑定后，原绑定证书将解绑。
+            </label>
+            <input type="hidden" v-text="vinId"/>
+          </div>
+        </a-form>
+      </a-spin>
+    </template>
+    <template slot="footer">
+      <a-button @click="handleCancel">取消</a-button>
+      <a-button @click="bind" type="primary">提交</a-button>
+    </template>
+  </j-modal>
+</template>
+
+<script>
+import { getAction } from '@api/memberManage'
+import { getCertificateByMemberId } from '@/api/standardsAssociationApi'
+export default {
+  // 绑定会员 窗口
+  name: 'BindMemberModel',
+  data() {
+    return {
+      title: '绑定会员',
+      // 绑定会员的证书id
+      vinId: '',
+      visible: false,
+      confirmLoading: false,
+      pageType: 4,
+      form: this.$form.createForm(this),
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 6 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 }
+      },
+      model: {},
+      // 会员绑定证书数组
+      bindVinList: [],
+      validatorRules: {
+        unBindId: {
+          rules: [{ required: true, message: '请选择要解绑的证书' }
+          ]
+        }
+      }
+    }
+  },
+  methods: {
+    edit(val) {
+      this.form.resetFields()
+      this.model = Object.assign({}, val)
+      // 获取绑定证书数据
+      this.getCertificateBindList()
+      this.visible = true
+    },
+    /*
+   * 绑定会员提交
+   * */
+    bind: function() {
+      const that = this
+      that.form.validateFields((err, values) => {
+        if (!err) {
+          // const params = 'vinId=' + this.model.id + '&unBindId=' + values.unBindId
+          const params = `vinId=${this.model.id}&unBindId=${values.unBindId}`
+          that.confirmLoading = true
+          getAction('/vinCertificate/vinCertificate/bind?' + params).then((res) => {
+            if (res.success) {
+              this.$message.success(res.message)
+              that.$emit('ok')
+              this.visible = false
+            } else {
+              that.$message.warning(res.message)
+            }
+          }).finally(() => {
+            that.confirmLoading = false
+          })
+        }
+      })
+    },
+    /*
+    * 查询会员绑定证书的下拉数据
+    * */
+    getCertificateBindList() {
+      const that = this
+      getCertificateByMemberId({ id: this.model.memberId }).then(res => {
+        if (res.success) {
+          that.bindVinList = res.result
+        } else {
+          console.log(res.message)
+        }
+      })
+    },
+    handleCancel() {
+      this.visible = false
+    }
+  },
+  computed: {
+    width() {
+      if (this.pageType === 14) {
+        return 400
+      }
+      if (this.pageType !== 4) {
+        return 1350
+      } else {
+        return 650
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.v-middle {
+  height: 100px;
+  text-align: center;
+  vertical-align: middle;
+
+  /deep/ .ant-form-item {
+    margin-bottom: 0px !important;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    color: rgba(0, 0, 0, 0.65);
+    font-size: 14px;
+    font-variant: tabular-nums;
+    line-height: 1.5;
+    list-style: none;
+    font-feature-settings: 'tnum';
+    vertical-align: middle;
+  }
+
+}
+
+.remark span {
+  display: inline-block;
+  font-size: 14px;
+  margin-left: 165px;
+  transform: translateY(-20px);
+}
+
+.vin-style {
+  display: inline-block;
+  max-width: 120px;
+  white-space: pre-wrap;
+  text-align: center;
+}
+
+.table {
+  width: 100%;
+  height: 180px;
+  text-align: center;
+  margin-bottom: 10px;
+  border-color: #ccc;
+  border-collapse: collapse;
+}
+
+// 证书状态颜色
+.certificate {
+  display: inline-block;
+  height: 24px;
+  font-size: 12px;
+  line-height: 24px;
+  padding: 0 7px;
+  border-radius: 3px;
+  color: #ddd;
+}
+
+.status-0 {
+  background: #c37e00;
+}
+
+.status-1 {
+  background: #40835e;
+}
+
+.status-2 {
+  background: #8a8c8e;
+}
+
+.transalte-y-10 {
+  transform: translateY(10px);
+}
+
+.apply-notice {
+  color: #f5222d;
+}
+
+.apply-code-notice {
+  color: #f5222d;
+  position: absolute;
+  bottom: 4px;
+  left: 25%
+}
+
+</style>
diff --git a/src/views/standardsAssociation/model/ChargeCertificateEditModel.vue b/src/views/standardsAssociation/model/ChargeCertificateEditModel.vue
new file mode 100644
index 0000000..81eccb3
--- /dev/null
+++ b/src/views/standardsAssociation/model/ChargeCertificateEditModel.vue
@@ -0,0 +1,895 @@
+<template>
+  <j-modal
+    :title="title"
+    :width="width"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    :maskClosable="false"
+    switchFullscreen
+    @cancel="handleCancel"
+    cancelText="关闭">
+    <template>
+      <a-spin :spinning="confirmLoading">
+        <a-form :form="form">
+          当前用户已使用免费制作证书权益。可付费制作其他证书。
+          <a-divider orientation="left">
+            申请信息
+          </a-divider>
+          <a-row>
+            <a-col :span="12">
+              <a-form-item label="证书类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-search-select-tag
+                  dict="certificate_type"
+                  v-decorator="['certificateType',validatorRules.certificateType]"
+                  @change="selectcertificateType"
+                  placeholder="请选择证书类型"/>
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label=" 证书代码" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input
+                  placeholder="请输入证书代码"
+                  :maxLength="50"
+                  @blur="changeCode"
+                  v-decorator="['code',validatorRules.clientCode]"
+                ></a-input>
+              </a-form-item>
+              <span class="apply-code-notice">一次申请仅能输入一个证书代码</span>
+            </a-col>
+          </a-row>
+
+          <a-row>
+            <a-col :span="12">
+              <a-form-item label="通讯地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input
+                  :maxLength="50"
+                  v-decorator="['address',validatorRules.address]"
+                  placeholder=""></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :span="12">
+              <a-form-item label="邮编" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input
+                  :maxLength="50"
+                  v-decorator="['postcode',validatorRules.postcode]"
+                  placeholder=""></a-input>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row>
+            <a-col :span="12" v-if="selectType == 1 ">
+              <a-form-item label="备案通知书" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-dict-select-tag
+                  v-decorator="['noticeOfFiling']"
+                  :triggerChange="true"
+                  placeholder="请选择备案通知书"
+                  dictCode="notice_of_filing"/>
+              </a-form-item>
+
+            </a-col>
+
+            <a-col :span="12" v-if="model.code">
+              <a-form-item label="证书文件" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-image-upload
+                  isLessThan5M
+                  :number="1"
+                  bizPath="payment"
+                  v-decorator="['certificateImg',validatorRules.certificateImg]">
+                </j-image-upload>
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-row v-if="model.code">
+            <a-col :span="12">
+              <a-form-item label="生效日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-date
+                  date-format="YYYY-MM-DD"
+                  placeholder="请选择生效日期"
+                  v-decorator="['effectDate',validatorRules.effectDate]"
+                  :trigger-change="true"
+                  style="width: 100%"/>
+                <span class="apply-notice">生效日期与上一周期证书的失效日期保持一致，失效日期顺延五年</span>
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="失效日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-date
+                  date-format="YYYY-MM-DD"
+                  placeholder="请选择失效日期"
+                  v-decorator="['invalidDate',validatorRules.invalidDate]"
+                  :trigger-change="true"
+                  style="width: 100%"/>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-divider orientation="left">
+            缴费信息
+          </a-divider>
+          <a-row>
+            <a-col :span="12">
+              <a-form-item label="单位全称" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input
+                  disabled
+                  :maxLength="50"
+                  v-decorator="['companyName']"
+                ></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="联系人" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input
+                  disabled
+                  :maxLength="50"
+                  v-decorator="['liaisonMan']"
+                  placeholder="请输入联系人"></a-input>
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-row>
+            <a-col :span="12">
+              <a-form-item label="手机" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input disabled :maxLength="50" v-decorator="['mobile']" placeholder="请输入手机号"></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :span="12">
+              <a-form-item label="缴费方式" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-dict-select-tag
+                  type="list"
+                  v-decorator="['paymentMethod',validatorRules.paymentMethod]"
+                  @change="changePaymentMethod"
+                  :trigger-change="true"
+                  dictCode="payment_method"
+                  placeholder="请选择缴费方式"/>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <!--          打包会员-->
+          <div v-if="isWireTransfer === '2'">
+            <a-row>
+              <a-col :span="12">
+                <a-form-item label="缴费金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                  <a-input-number
+                    :maxLength="50"
+                    v-decorator="['paymentAmount',validatorRules.paymentAmount]"
+                    placeholder="请输入缴费金额"
+                    style="width: 100%"/>
+                </a-form-item>
+              </a-col>
+              <a-col :span="12">
+                <a-form-item label="打包协议" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                  <j-upload
+                    file-type="pdf"
+                    file-type-error-message="请上传pdf文件"
+                    :multiple="false"
+                    :number="1"
+                    bizPath="payment"
+                    v-decorator="['paymentRecord',validatorRules.paymentRecordOne]"
+                    :trigger-change="true"></j-upload>
+                  <span style="color: #bfbfbf">请上传pdf文件</span>
+                </a-form-item>
+              </a-col>
+            </a-row>
+          </div>
+          <!--电汇-->
+          <div v-if="isWireTransfer === '1'">
+            <a-row>
+              <a-col :span="12">
+                <a-form-item label="缴费金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                  <a-input-number
+                    :maxLength="50"
+                    v-model="memberInfoPayment.paymentAmount"
+                    v-decorator="['paymentAmount',validatorRules.paymentAmount]"
+                    placeholder="请输入缴费金额"
+                    style="width: 100%"/>
+                </a-form-item>
+              </a-col>
+              <a-col :span="12">
+                <a-form-item label="缴费日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                  <j-date
+                    date-format="YYYY-MM-DD HH:mm:ss"
+                    placeholder="请选择缴费时间"
+                    v-decorator="['submissionTime',validatorRules.submissionTime]"
+                    :trigger-change="true"
+                    style="width: 100%"/>
+                </a-form-item>
+              </a-col>
+            </a-row>
+
+            <a-row>
+              <a-col :span="12" v-if="isWireTransfer === '1' ||  memberInfoPayment.paymentMethod !== 3 ">
+                <a-form-item label="缴费凭证" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                  <j-image-upload
+                    isLessThan5M
+                    isMultiple
+                    :number="2"
+                    bizPath="payment"
+                    v-decorator="['paymentRecord',validatorRules.paymentRecord]"
+                    v-model="memberInfoPayment.paymentRecord"></j-image-upload>
+                </a-form-item>
+              </a-col>
+              <a-col :span="12">
+                <a-form-item label="发票" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                  <j-dict-select-tag
+                    type="list"
+                    v-model="memberInfoPayment.invoiceRequirements"
+                    v-decorator="['invoiceRequirements',validatorRules.invoiceRequirements]"
+                    @change="invoiceRequirementsChange"
+                    :trigger-change="true"
+                    dictCode="invoice_requirements"
+                    placeholder="请选择发票"/>
+                </a-form-item>
+              </a-col>
+            </a-row>
+            <template v-if="invoiceRequirementsFlag">
+              <a-row>
+                <a-col :span="12">
+                  <a-form-item label="付款单位发票抬头" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                    <a-input
+                      :maxLength="50"
+                      v-decorator="['headerName',{ ...validatorRules.headerName,initialValue:currentMemberInfo.invoiceInfo}]"
+                      placeholder="请输入付款单位发票抬头"></a-input>
+                  </a-form-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-item label="社会统一代码/税号" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                    <a-input
+                      :maxLength="50"
+                      v-decorator="['taxNumber',{ ...validatorRules.taxNumber,initialValue: currentMemberInfo.taxNo}]"
+                      placeholder="请输入社会统一代码/税号"></a-input>
+                  </a-form-item>
+                </a-col>
+              </a-row>
+              <!-- 2021-09-23变更 增加 单位地址 电话号码  开户银行 银行账户 增值税发票的时候存在-->
+              <a-row v-if="currentSelectInvoiceType === 2">
+                <a-col :span="12">
+                  <a-form-item label="单位地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                    <a-input
+                      @change="event => event.target.value = event.target.value.trim()"
+                      v-decorator="['invoiceAddress',{ ...validatorRules.invoiceAddress, initialValue:currentMemberInfo.invoiceAddress}]"
+                      placeholder="请输入单位地址"
+                      :maxLength="50"></a-input>
+                  </a-form-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-item label="电话号码" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                    <a-input
+                      v-decorator="['invoicePhone',{ ...validatorRules.invoiceAddress, initialValue: currentMemberInfo.invoicePhone}]"
+                      :trigger-change="true"
+                      @change="(e) => {e.target.value = e.target.value.replace(/[^0-9|-]/g,'')}"
+                      placeholder="请输入电话号码"
+                      :maxLength="50"></a-input>
+                  </a-form-item>
+                </a-col>
+              </a-row>
+              <a-row v-if="currentSelectInvoiceType === 2">
+                <a-col :span="12">
+                  <a-form-item label="开户银行" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                    <a-input
+                      @change="event => event.target.value = event.target.value.trim()"
+                      v-decorator="['depositBank',{ ...validatorRules.depositBank, initialValue:currentMemberInfo.depositBank}]"
+                      placeholder="请输入开户银行"
+                      :maxLength="50"></a-input>
+                  </a-form-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-item label="银行账户" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                    <a-input
+                      @change="(e) => {e.target.value = e.target.value.trim()}"
+                      v-decorator="['bankAccount',{ ...validatorRules.bankAccount, initialValue:currentMemberInfo.bankAccount}]"
+                      placeholder="请输入银行账户"
+                      :maxLength="50"></a-input>
+                  </a-form-item>
+                </a-col>
+              </a-row>
+            </template>
+          </div>
+          <!--现金-->
+          <div v-if="isWireTransfer === '3' ">
+            <a-row>
+              <a-col :span="12">
+                <a-form-item label="缴费金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                  <a-input-number
+                    :maxLength="50"
+                    v-model="memberInfoPayment.paymentAmount"
+                    v-decorator="['paymentAmount',validatorRules.paymentAmount]"
+                    placeholder="请输入缴费金额"
+                    style="width: 100%"/>
+                </a-form-item>
+              </a-col>
+              <a-col :span="12">
+                <a-form-item label="缴费日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                  <j-date
+                    date-format="YYYY-MM-DD HH:mm:ss"
+                    placeholder="请选择缴费时间"
+                    v-decorator="['submissionTime',validatorRules.submissionTime]"
+                    :trigger-change="true"
+                    style="width: 100%"/>
+                </a-form-item>
+              </a-col>
+            </a-row>
+
+            <a-row>
+              <a-col :span="12">
+                <a-form-item label="发票" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                  <j-dict-select-tag
+                    type="list"
+                    v-model="memberInfoPayment.invoiceRequirements"
+                    v-decorator="['invoiceRequirements',validatorRules.invoiceRequirements]"
+                    @change="invoiceRequirementsChange"
+                    :trigger-change="true"
+                    dictCode="invoice_requirements"
+                    placeholder="请选择发票"/>
+                </a-form-item>
+              </a-col>
+            </a-row>
+            <template v-if="invoiceRequirementsFlag">
+              <a-row>
+                <a-col :span="12">
+                  <a-form-item label="付款单位发票抬头" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                    <a-input
+                      :maxLength="50"
+                      v-decorator="['headerName',{ ...validatorRules.headerName,initialValue:currentMemberInfo.invoiceInfo}]"
+                      placeholder="请输入付款单位发票抬头"></a-input>
+                  </a-form-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-item label="社会统一代码/税号" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                    <a-input
+                      :maxLength="50"
+                      v-decorator="['taxNumber',{ ...validatorRules.taxNumber,initialValue: currentMemberInfo.taxNo}]"
+                      placeholder="请输入社会统一代码/税号"></a-input>
+                  </a-form-item>
+                </a-col>
+              </a-row>
+              <!-- 2021-09-23变更 增加 单位地址 电话号码  开户银行 银行账户 增值税发票的时候存在-->
+              <a-row v-if="currentSelectInvoiceType === 2">
+                <a-col :span="12">
+                  <a-form-item label="单位地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                    <a-input
+                      @change="event => event.target.value = event.target.value.trim()"
+                      v-decorator="['invoiceAddress',{ ...validatorRules.invoiceAddress, initialValue:currentMemberInfo.invoiceAddress}]"
+                      placeholder="请输入单位地址"
+                      :maxLength="50"></a-input>
+                  </a-form-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-item label="电话号码" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                    <a-input
+                      v-decorator="['invoicePhone',{ ...validatorRules.invoiceAddress, initialValue: currentMemberInfo.invoicePhone}]"
+                      :trigger-change="true"
+                      @change="(e) => {e.target.value = e.target.value.replace(/[^0-9|-]/g,'')}"
+                      placeholder="请输入电话号码"
+                      :maxLength="50"></a-input>
+                  </a-form-item>
+                </a-col>
+              </a-row>
+              <a-row v-if="currentSelectInvoiceType === 2">
+                <a-col :span="12">
+                  <a-form-item label="开户银行" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                    <a-input
+                      @change="event => event.target.value = event.target.value.trim()"
+                      v-decorator="['depositBank',{ ...validatorRules.depositBank, initialValue:currentMemberInfo.depositBank}]"
+                      placeholder="请输入开户银行"
+                      :maxLength="50"></a-input>
+                  </a-form-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-item label="银行账户" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                    <a-input
+                      @change="(e) => {e.target.value = e.target.value.trim()}"
+                      v-decorator="['bankAccount',{ ...validatorRules.bankAccount, initialValue:currentMemberInfo.bankAccount}]"
+                      placeholder="请输入银行账户"
+                      :maxLength="50"></a-input>
+                  </a-form-item>
+                </a-col>
+              </a-row>
+            </template>
+          </div>
+        </a-form>
+      </a-spin>
+    </template>
+    <template slot="footer">
+      <a-button @click="handleCancel">关闭</a-button>
+      <a-button @click="saveChargeCertificate" type="primary">暂存</a-button>
+      <a-button @click="handleRealSaveChargeCertificate" type="primary">提交</a-button>
+    </template>
+  </j-modal>
+</template>
+
+<script>
+import JDate from '@comp/tools/JDate'
+import JSearchSelectTag from '@comp/standardsAssociation/JSearchSelectTag'
+import JImageUpload from '@comp/standardsAssociation/JImageUpload'
+import JUpload from '@comp/standardsAssociation/JUpload'
+import JDictSelectTag from '@comp/standardsAssociation/JDictSelectTag'
+import { getAction, httpAction } from '@api/memberManage'
+import pick from 'lodash.pick'
+export default {
+  // 收费证书新增申申请驳回后编辑
+  name: 'ChargeCertificateEditModel',
+  components: {
+    JDate,
+    JSearchSelectTag,
+    JImageUpload,
+    JUpload,
+    JDictSelectTag
+  },
+  data() {
+    return {
+      loginUserId: this.$store.getters.userInfo.memberId,
+      title: '新增申请',
+      visible: false,
+      confirmLoading: false,
+      pageType: 11,
+      invoiceRequirementsFlag: false,
+      // 当前选择是否需要发票的值，用于dom的判断 0-无 1-普通发票 2-增值税发票
+      currentSelectInvoiceType: 0,
+      form: this.$form.createForm(this),
+      // 是否是电汇
+      isWireTransfer: '1',
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 6 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 }
+      },
+      // 当前登录用户的会员信息
+      currentMemberInfo: {},
+      // 会员缴费信息
+      memberInfoPayment: {},
+      // 记录续费证书选择
+      selectType: 1,
+      model: {},
+      validatorRules: {
+        defaultRules: {
+          rules: [{ required: true, message: '请选择' },
+            { min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
+          ]
+        },
+        unBindId: {
+          rules: [{ required: true, message: '请选择要解绑的证书' }
+          ]
+        },
+        companyName: {
+          rules: [
+            { required: true, message: '请输入单位全称!' },
+            { min: 1, max: 50, message: '单位全称长度不超过50个字符', validateTrigger: 'blur' }
+          ]
+        },
+        mobile: {
+          rules: [
+            { required: true, message: '请输入手机!' },
+            { min: 1, max: 50, message: '手机号码不超过50个字符' },
+            { pattern: /^1[345678]\d{9}$/, message: '请输入正确的手机号', validateTrigger: 'blur' }
+          ]
+        },
+        code: {
+          rules: [
+            { required: true, message: '请输入证书代码!' },
+            { min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
+          ]
+        },
+        certificateImg: {
+          rules: [
+            { required: true, message: '请上传证书文件!' }
+          ],
+          validateTrigger: 'change'
+        },
+        clientCode: {
+          rules: [
+            { min: 0, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
+          ]
+        },
+        effectDate: {
+          rules: [{
+            required: true, message: '请选择生效日期'
+          }]
+        },
+        invalidDate: { rules: [{ required: true, validator: this.checkInvalidDate }] },
+        certificateType: {
+          rules: [{
+            required: true, message: '请输入证书类型!'
+          }]
+        },
+        address: {
+          rules: [
+            { required: true, message: '请输入通讯地址!' },
+            { min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
+          ]
+        },
+        postcode: {
+          rules: [
+            {
+              required: true, message: '请输入邮编!'
+            },
+            { min: 1, max: 50, message: '长度不超过50个字符' },
+            { pattern: /^[0-9]\d{5}$/, message: '请输入正确的邮编', validateTrigger: 'blur' }
+          ]
+        },
+        paymentMethod: {
+          rules: [{
+            required: true, message: '请输入缴费方式!'
+          }]
+        },
+        paymentAmount: {
+          rules: [
+            {
+              required: true, message: '请输入缴费金额!'
+            },
+            {
+              pattern: /^[1-9](\d{1,10})?(\.\d{1,2})$|^0\.([1-9](\d{0,1})|\d[1-9])$|^[1-9]\d{0,10}$|^0$/,
+              message: '请输入合法的金额数字，最多2位小数,11位正数',
+              validateTrigger: 'blur'
+            }
+          ],
+          validateTrigger: 'blur'
+        },
+        submissionTime: {
+          rules: [{
+            required: true, message: '请输入缴费日期!'
+          }]
+        },
+        paymentRecord: {
+          rules: [{
+            required: true, message: '请上传缴费凭证!'
+          }]
+        },
+        paymentRecordOne: { rules: [{ required: true, message: '请上传打包协议' }] },
+        liaisonMan: {
+          rules: [
+            { required: true, message: '请输入联系人!' },
+            { min: 1, max: 50, message: '联系人不超过50个字符', validateTrigger: 'blur' }
+          ]
+        },
+        invoiceRequirements: {
+          rules: [{
+            required: true, message: '请选择是否需要发票!'
+          }]
+        },
+        headerName: {
+          rules: [
+            {
+              required: true, message: '请输入付款单位发票抬头!'
+            },
+            { min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
+          ],
+          validateTrigger: 'blur'
+        },
+        taxNumber: {
+          rules: [
+            { required: true, message: '请输入社会统一代码/税号!' },
+            { min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' },
+            {
+              // pattern: /^[A-Z0-9]{15}$|^[A-Z0-9]{17}$|^[A-Z0-9]{18}$|^[A-Z0-9]{20}$/,
+              pattern: /^([0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}|[1-9]\d{14})$/,
+              // message: '15位、17位、18位、20位数字和大写英文字母',
+              message: '请输入15位、18位的社会统一代码/税号',
+              validateTrigger: 'blur'
+            }
+          ],
+          validateTrigger: 'blur'
+        },
+        invoiceAddress: { rules: [{ required: true, message: '请输入单位地址' }], validateTrigger: 'blur' },
+        invoicePhone: {
+          rules: [
+            { required: true, message: '请输入电话号码' },
+            {
+              pattern: /^((13[0-9])|(14[579])|(15([0-3]|[5-9]))|(17[0135678])|(18[0-9])|(19[8|9])|(16[6]))\d{8}$|^([0-9]{3,4}-)[0-9]{7,8}$/,
+              message: '请输入正确格式的电话号码',
+              validateTrigger: 'blur'
+            }
+          ],
+          validateTrigger: 'blur'
+        },
+        depositBank: { rules: [{ required: true, message: '请输入开户银行' }], validateTrigger: 'blur' },
+        bankAccount: { rules: [{ required: true, message: '请输入银行账户' }], validateTrigger: 'blur' },
+        reasonsRenewal: {
+          rules: [{
+            required: true, message: '请至少选择一个换证原因!'
+          }]
+        },
+        sendMethod: { rules: [{ required: false, message: '请选择快递公司' }], validateTrigger: 'change' },
+        postNo: { rules: [{ required: false, message: '请输入邮寄单号' }], validateTrigger: 'blur' }
+      }
+    }
+  },
+  methods: {
+    edit(record) {
+      // 获取证书类型
+      this.selectType = record.certificateType
+      this.form.resetFields()
+      this.model = Object.assign({}, record)
+      this.visible = true
+      this.$nextTick(() => {
+        this.form.setFieldsValue(pick(this.model, 'paymentRecord', 'id', 'certificateImg', 'address', 'postcode', 'mobile', 'liaisonMan', 'companyName', 'certificateType', 'effectDate', 'invalidDate', 'reasonsRenewal', 'noticeOfFiling', 'code',))
+      })
+      // 查询证书最新的缴费信息
+      // 获取驳回的缴费信息
+      this.memberInfoPayment = {}
+      // 查询对应证书的缴费信息
+      // const params = 'certificateId=' + record.id
+      const params = `certificateId=${record.id}`
+      getAction('/certificatePaymentInfo/getLastCertificatePayment?' + params).then((res) => {
+        if (res.success) {
+          this.memberInfoPayment = res.result
+          this.isWireTransfer = this.memberInfoPayment.paymentMethod + ''
+          // 对发票的显示 进行操作
+          this.invoiceRequirementsChange(res.result.invoiceRequirements)
+          this.$nextTick(() => {
+            this.form.setFieldsValue(pick(this.memberInfoPayment, 'submissionTime', 'paymentAmount', 'certificateType', 'headerName', 'invoiceRequirements', 'paymentMethod', 'taxNumber', 'invoiceAddress', 'invoicePhone', 'depositBank', 'bankAccount', 'paymentRecord', 'id', 'address', 'postcode', 'mobile', 'liaisonMan', 'companyName', 'effectDate', 'invalidDate', 'reasonsRenewal', 'code'))
+          })
+        } else {
+          console.log(res.message)
+        }
+      })
+    },
+
+    saveChargeCertificate: function() {
+      this.handleSaveChargeCertificateOk()
+    },
+    // 添加 未保存收费证书信息
+    handleSaveChargeCertificateOk: function() {
+      const that = this
+      // 触发表单验证
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          that.confirmLoading = true
+          const httpurl = '/vinCertificate/vinCertificate/addChargeCertificate'
+          const method = 'post'
+          const formData = Object.assign(this.model, values)
+          formData.certificateStatus = 0
+          httpAction(httpurl, formData, method).then((res) => {
+            if (res.success) {
+              // 添加缴费信息
+              const chargeUrl = '/certificatePaymentInfo/addVinChargeInfo'
+              const chargeMethod = 'post'
+              const chargeFormData = Object.assign(this.memberInfoPayment, values)
+              // 新增
+              chargeFormData.paymentType = 0
+              // 证书ID
+              chargeFormData.certificateId = res.result.id
+              // 缴费时长默认为 5年
+              chargeFormData.paymentTime = 5
+              // 4 是代表申请证书
+              chargeFormData.certificateModality = 4
+              // 缴费状态为 未提交状态
+              chargeFormData.paymentStatus = 0
+              // const certificateId = chargeFormData.certificateId
+              httpAction(chargeUrl, chargeFormData, chargeMethod).then((res) => {
+                if (res.success) {
+                  that.$message.success(res.message)
+                  that.$emit('ok')
+                  that.visible = false
+                } else {
+                  that.loadData()
+                }
+              })
+            } else {
+              that.$message.warning(res.message)
+            }
+          }).finally(() => {
+            that.confirmLoading = false
+          })
+        }
+      })
+    },
+    // 编辑后保存的 save处理
+    handleRealSaveChargeCertificate() {
+      this.realHandleSaveChargeCertificateOk()
+    },
+
+    // 编辑后保存的 save处理
+    realHandleSaveChargeCertificateOk: function() {
+      const that = this
+      // 触发表单验证
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          that.confirmLoading = true
+          const httpurl = '/vinCertificate/vinCertificate/addChargeCertificate'
+          const method = 'post'
+          const formData = Object.assign(this.model, values)
+          // 防止越权的注入
+          formData.memberId = this.loginUserId
+          // 设置提交状态为 已提交
+          formData.certificateStatus = 2
+          httpAction(httpurl, formData, method).then((res) => {
+            if (res.success) {
+              // 添加缴费信息
+              const chargeUrl = '/certificatePaymentInfo/addVinChargeInfo'
+              const chargeMethod = 'post'
+              const chargeFormData = Object.assign(this.memberInfoPayment, values)
+              // 新增
+              chargeFormData.paymentType = 0
+              // 证书ID
+              chargeFormData.certificateId = res.result.id
+              // 缴费时长默认为 5年
+              chargeFormData.paymentTime = 5
+              // 4 是代表申请证书
+              chargeFormData.certificateModality = 4
+              // 设置缴费状态为已缴费
+              chargeFormData.paymentStatus = 1
+              // const certificateId = chargeFormData.certificateId
+              httpAction(chargeUrl, chargeFormData, chargeMethod).then((res) => {
+                if (res.success) {
+                  that.$message.success(res.message)
+                  that.$emit('ok')
+                  that.visible = false
+                } else {
+                  // 如果添加缴费信息没有成功，则删除已经添加的证书
+                  that.$message.warning(res.message)
+                  that.loadData()
+                }
+              })
+            } else {
+              that.$message.warning(res.message)
+            }
+          }).finally(() => {
+            that.confirmLoading = false
+          })
+        }
+      })
+    },
+    /* 缴费方式*/
+    changePaymentMethod(value) {
+      // 1 是电汇 2 打包 3 是现金
+      this.isWireTransfer = value
+      this.form.resetFields(['paymentType', 'paymentAmount', 'paymentTime', 'submissionTime', 'paymentRecord'])
+      if (value !== '1') {
+        this.paymentMethodFlag = true
+      } else {
+        this.paymentMethodFlag = false
+      }
+    },
+    // 校验是否选择 要发票
+    invoiceRequirementsChange(value) {
+      this.currentSelectInvoiceType = Number(value)
+      if (this.currentSelectInvoiceType !== 0) {
+        this.invoiceRequirementsFlag = true
+      } else {
+        this.invoiceRequirementsFlag = false
+      }
+    },
+    /*
+      * 续费选择换证
+      * */
+    selectcertificateType(val) {
+      this.selectType = val
+      // 记录原始的证书形式
+      const originType = this.model.certificateType
+      // 记录原始的证书代码
+      this.form.resetFields('reasonsRenewal')
+      const originCode = this.model.code
+      if (val !== originType.toString()) {
+        this.selectTypeDisabled = false
+        this.freeCertificate.code = ''
+      } else {
+        this.selectTypeDisabled = true
+        this.freeCertificate.code = originCode
+      }
+    },
+    changeCode() {
+      this.model.code = this.form.getFieldValue('code')
+      console.log(this.model.code)
+    },
+    handleCancel() {
+      this.visible = false
+    },
+    checkInvalidDate(rule, value, callback) {
+      if (value === undefined || value === '' || value == null) {
+        callback(new Error('请选择失效日期'))
+      }
+      console.log(value + ' :' + this.checkEffectDate)
+      var ck = this.checkEffectDate
+      if (!(ck === null || ck === undefined || ck === '')) {
+        if (value < this.checkEffectDate) {
+          callback(new Error('失效日期不能早于生效日期'))
+        }
+      }
+      callback()
+    }
+  },
+  computed: {
+    width() {
+      if (this.pageType === 14) {
+        return 400
+      }
+      if (this.pageType !== 4) {
+        return 1350
+      } else {
+        return 650
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.v-middle {
+  height: 100px;
+  text-align: center;
+  vertical-align: middle;
+
+  /deep/ .ant-form-item {
+    margin-bottom: 0px !important;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    color: rgba(0, 0, 0, 0.65);
+    font-size: 14px;
+    font-variant: tabular-nums;
+    line-height: 1.5;
+    list-style: none;
+    font-feature-settings: 'tnum';
+    vertical-align: middle;
+  }
+
+}
+
+.remark span {
+  display: inline-block;
+  font-size: 14px;
+  margin-left: 165px;
+  transform: translateY(-20px);
+}
+
+.vin-style {
+  display: inline-block;
+  max-width: 120px;
+  white-space: pre-wrap;
+  text-align: center;
+}
+
+.table {
+  width: 100%;
+  height: 180px;
+  text-align: center;
+  margin-bottom: 10px;
+  border-color: #ccc;
+  border-collapse: collapse;
+}
+
+// 证书状态颜色
+.certificate {
+  display: inline-block;
+  height: 24px;
+  font-size: 12px;
+  line-height: 24px;
+  padding: 0 7px;
+  border-radius: 3px;
+  color: #ddd;
+}
+
+.status-0 {
+  background: #c37e00;
+}
+
+.status-1 {
+  background: #40835e;
+}
+
+.status-2 {
+  background: #8a8c8e;
+}
+
+.transalte-y-10 {
+  transform: translateY(10px);
+}
+
+.apply-notice {
+  color: #f5222d;
+}
+
+.apply-code-notice {
+  color: #f5222d;
+  position: absolute;
+  bottom: 4px;
+  left: 25%
+}
+
+</style>
diff --git a/src/views/standardsAssociation/model/ChargeCertificateModel.vue b/src/views/standardsAssociation/model/ChargeCertificateModel.vue
new file mode 100644
index 0000000..7be978e
--- /dev/null
+++ b/src/views/standardsAssociation/model/ChargeCertificateModel.vue
@@ -0,0 +1,897 @@
+<template>
+  <j-modal
+    :title="title"
+    :width="width"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    :maskClosable="false"
+    switchFullscreen
+    @cancel="handleCancel"
+    cancelText="关闭">
+    <template>
+      <a-spin :spinning="confirmLoading">
+        <a-form :form="form">
+          <!--          当前用户已使用免费制作证书权益。可付费制作其他证书。-->
+          <span class="apply-notice">*申请提示* 尊敬的会员您好！您已完成2张证书的办理业务，第3张证书起，将执行付费办理，费用标准：5000元/张。请在本页提交“新增申请”后，前往“证书缴费”办理相关费用。</span>
+          <a-divider orientation="left">
+            申请信息
+          </a-divider>
+          <a-row>
+            <a-col :span="12">
+              <a-form-item label="证书类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-search-select-tag
+                  dict="certificate_type"
+                  :triggerChange="true"
+                  @change="vinOrWmi"
+                  v-decorator="['certificateType',validatorRules.certificateType]"
+                  placeholder="请选择证书类型"/>
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label=" 证书代码" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input
+                  :maxLength="50"
+                  placeholder="请输入证书代码"
+                  v-decorator="['code',validatorRules.clientCode]"
+                ></a-input>
+              </a-form-item>
+              <span class="apply-code-notice">一次申请仅能输入一个证书代码</span>
+            </a-col>
+          </a-row>
+
+          <a-row>
+            <a-col :span="12">
+              <a-form-item label="通讯地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input
+                  :maxLength="50"
+                  v-decorator="['address',validatorRules.address]"
+                  placeholder=""></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :span="12">
+              <a-form-item label="邮编" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input
+                  :maxLength="50"
+                  v-decorator="['postcode',validatorRules.postcode]"
+                  placeholder=""></a-input>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row>
+            <a-col :span="12" v-if="selectType == '1' ">
+              <a-form-item label="备案通知书" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-dict-select-tag
+                  v-decorator="['noticeOfFiling']"
+                  :triggerChange="true"
+                  placeholder="请选择备案通知书"
+                  dictCode="notice_of_filing"/>
+              </a-form-item>
+            </a-col>
+            <!--  输入证书代码显示上传 并为必填 -->
+            <a-col :span="12" v-if="freeCertificate.code">
+              <a-form-item label="证书文件" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-image-upload
+                  isLessThan5M
+                  isMultiple
+                  :number="1"
+                  bizPath="payment"
+                  v-decorator="['certificateImg',validatorRules.certificateImg]">
+                </j-image-upload>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row v-if="freeCertificate.code">
+            <a-col :span="12">
+              <a-form-item label="生效日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-date
+                  date-format="YYYY-MM-DD"
+                  placeholder="请选择生效日期"
+                  v-decorator="['effectDate',validatorRules.effectDate]"
+                  :trigger-change="true"
+                  style="width: 100%"/>
+                <span class="apply-notice">生效日期与上一周期证书的失效日期保持一致，失效日期顺延五年</span>
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="失效日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-date
+                  date-format="YYYY-MM-DD"
+                  placeholder="请选择失效日期"
+                  v-decorator="['invalidDate',validatorRules.invalidDate]"
+                  :trigger-change="true"
+                  style="width: 100%"/>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-divider orientation="left">
+            缴费信息
+          </a-divider>
+          <a-row>
+            <a-col :span="12">
+              <a-form-item label="单位全称" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input
+                  disabled
+                  :maxLength="50"
+                  v-decorator="['companyName']">
+                </a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="联系人" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input
+                  disabled
+                  :maxLength="50"
+                  v-decorator="['liaisonMan']"
+                  placeholder="请输入联系人">
+                </a-input>
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-row>
+            <a-col :span="12">
+              <a-form-item label="手机" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input disabled :maxLength="50" v-decorator="['mobile']" placeholder="请输入手机号"></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :span="12">
+              <a-form-item label="缴费方式" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-dict-select-tag
+                  type="list"
+                  v-decorator="['paymentMethod',validatorRules.paymentMethod]"
+                  @change="changePaymentMethod"
+                  :trigger-change="true"
+                  dictCode="payment_method"
+                  placeholder="请选择缴费方式"/>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <div style="height:150px" v-if="isWireTransfer === '2' ">
+            <a-row>
+              <a-col :span="12">
+                <a-form-item label="缴费金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                  <a-input-number
+                    :maxLength="50"
+                    v-decorator="['paymentAmount',validatorRules.paymentAmount]"
+                    placeholder="请输入缴费金额"
+                    style="width: 100%"/>
+                </a-form-item>
+              </a-col>
+              <a-col :span="12">
+                <a-form-item label="打包协议" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                  <j-upload
+                    file-type="pdf"
+                    file-type-error-message="请上传pdf文件"
+                    :multiple="false"
+                    :number="1"
+                    bizPath="payment"
+                    v-decorator="['paymentRecord',validatorRules.paymentRecord1]"
+                    :trigger-change="true"></j-upload>
+                  <span style="color: #bfbfbf">请上传pdf文件</span>
+                </a-form-item>
+
+              </a-col>
+            </a-row>
+          </div>
+          <div v-if="isWireTransfer === '1' ">
+            <a-row>
+              <a-col :span="12">
+                <a-form-item label="缴费金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                  <a-input-number
+                    :maxLength="50"
+                    v-decorator="['paymentAmount',validatorRules.paymentAmount]"
+                    placeholder="请输入缴费金额"
+                    style="width: 100%"/>
+                </a-form-item>
+              </a-col>
+              <a-col :span="12">
+                <a-form-item label="缴费日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                  <j-date
+                    date-format="YYYY-MM-DD HH:mm:ss"
+                    placeholder="请选择缴费时间"
+                    v-decorator="['submissionTime',validatorRules.submissionTime]"
+                    :trigger-change="true"
+                    style="width: 100%"/>
+                </a-form-item>
+              </a-col>
+            </a-row>
+
+            <a-row>
+              <a-col :span="12">
+                <a-form-item label="缴费凭证" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                  <j-image-upload
+                    isLessThan5M
+                    isMultiple
+                    :number="2"
+                    bizPath="payment"
+                    v-decorator="['paymentRecord',validatorRules.paymentRecord]"
+                  ></j-image-upload>
+                </a-form-item>
+              </a-col>
+              <a-col :span="12">
+                <a-form-item label="发票" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                  <j-dict-select-tag
+                    type="list"
+                    v-decorator="['invoiceRequirements',validatorRules.invoiceRequirements]"
+                    @change="invoiceRequirementsChange"
+                    :trigger-change="true"
+                    dictCode="invoice_requirements"
+                    placeholder="请选择发票"/>
+                </a-form-item>
+              </a-col>
+            </a-row>
+            <!--发票信息的显示-->
+            <template v-if="invoiceRequirementsFlag">
+              <a-row>
+                <a-col :span="12">
+                  <a-form-item label="付款单位发票抬头" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                    <a-input
+                      :maxLength="50"
+                      v-decorator="['headerName',{ ...validatorRules.headerName,initialValue:currentMemberInfo.invoiceInfo}]"
+                      placeholder="请输入付款单位发票抬头"></a-input>
+                  </a-form-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-item label="社会统一代码/税号" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                    <a-input
+                      :maxLength="50"
+                      v-decorator="['taxNumber',{ ...validatorRules.taxNumber,initialValue: currentMemberInfo.taxNo}]"
+                      placeholder="请输入社会统一代码/税号"></a-input>
+                  </a-form-item>
+                </a-col>
+              </a-row>
+              <!-- 2021-09-23变更 增加 单位地址 电话号码  开户银行 银行账户 增值税发票的时候存在-->
+              <a-row v-if="currentSelectInvoiceType === 2">
+                <a-col :span="12">
+                  <a-form-item label="单位地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                    <a-input
+                      @change="event => event.target.value = event.target.value.trim()"
+                      v-decorator="['invoiceAddress',{ ...validatorRules.invoiceAddress, initialValue:currentMemberInfo.invoiceAddress}]"
+                      placeholder="请输入单位地址"
+                      :maxLength="50"></a-input>
+                  </a-form-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-item label="电话号码" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                    <a-input
+                      v-decorator="['invoicePhone',{ ...validatorRules.invoiceAddress, initialValue: currentMemberInfo.invoicePhone}]"
+                      :trigger-change="true"
+                      @change="(e) => {e.target.value = e.target.value.replace(/[^0-9|-]/g,'')}"
+                      placeholder="请输入电话号码"
+                      :maxLength="50"></a-input>
+                  </a-form-item>
+                </a-col>
+              </a-row>
+              <a-row v-if="currentSelectInvoiceType === 2">
+                <a-col :span="12">
+                  <a-form-item label="开户银行" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                    <a-input
+                      @change="event => event.target.value = event.target.value.trim()"
+                      v-decorator="['depositBank',{ ...validatorRules.depositBank, initialValue:currentMemberInfo.depositBank}]"
+                      placeholder="请输入开户银行"
+                      :maxLength="50"></a-input>
+                  </a-form-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-item label="银行账户" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                    <a-input
+                      @change="(e) => {e.target.value = e.target.value.trim()}"
+                      v-decorator="['bankAccount',{ ...validatorRules.bankAccount, initialValue:currentMemberInfo.bankAccount}]"
+                      placeholder="请输入银行账户"
+                      :maxLength="50"></a-input>
+                  </a-form-item>
+                </a-col>
+              </a-row>
+            </template>
+
+          </div>
+          <div v-if="isWireTransfer === '3' ">
+            <a-row>
+              <a-col :span="12">
+                <a-form-item label="缴费金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                  <a-input-number
+                    :maxLength="50"
+                    v-decorator="['paymentAmount',validatorRules.paymentAmount]"
+                    placeholder="请输入缴费金额"
+                    style="width: 100%"/>
+                </a-form-item>
+              </a-col>
+              <a-col :span="12">
+                <a-form-item label="缴费日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                  <j-date
+                    date-format="YYYY-MM-DD HH:mm:ss"
+                    placeholder="请选择缴费时间"
+                    v-decorator="['submissionTime',validatorRules.submissionTime]"
+                    :trigger-change="true"
+                    style="width: 100%"/>
+                </a-form-item>
+              </a-col>
+            </a-row>
+            <a-row>
+              <a-col :span="12">
+                <a-form-item label="发票" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                  <j-dict-select-tag
+                    type="list"
+                    v-decorator="['invoiceRequirements',validatorRules.invoiceRequirements]"
+                    @change="invoiceRequirementsChange"
+                    :trigger-change="true"
+                    dictCode="invoice_requirements"
+                    placeholder="请选择发票"/>
+                </a-form-item>
+              </a-col>
+            </a-row>
+            <template v-if="invoiceRequirementsFlag">
+              <a-row>
+                <a-col :span="12">
+                  <a-form-item label="付款单位发票抬头" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                    <a-input
+                      :maxLength="50"
+                      v-decorator="['headerName',{ ...validatorRules.headerName,initialValue:currentMemberInfo.invoiceInfo}]"
+                      placeholder="请输入付款单位发票抬头"></a-input>
+                  </a-form-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-item label="社会统一代码/税号" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                    <a-input
+                      :maxLength="50"
+                      v-decorator="['taxNumber',{ ...validatorRules.taxNumber,initialValue: currentMemberInfo.taxNo}]"
+                      placeholder="请输入社会统一代码/税号"></a-input>
+                  </a-form-item>
+                </a-col>
+              </a-row>
+              <!-- 2021-09-23变更 增加 单位地址 电话号码  开户银行 银行账户 增值税发票的时候存在-->
+              <a-row v-if="currentSelectInvoiceType === 2">
+                <a-col :span="12">
+                  <a-form-item label="单位地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                    <a-input
+                      @change="event => event.target.value = event.target.value.trim()"
+                      v-decorator="['invoiceAddress',{ ...validatorRules.invoiceAddress, initialValue:currentMemberInfo.invoiceAddress}]"
+                      placeholder="请输入单位地址"
+                      :maxLength="50"></a-input>
+                  </a-form-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-item label="电话号码" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                    <a-input
+                      v-decorator="['invoicePhone',{ ...validatorRules.invoiceAddress, initialValue: currentMemberInfo.invoicePhone}]"
+                      :trigger-change="true"
+                      @change="(e) => {e.target.value = e.target.value.replace(/[^0-9|-]/g,'')}"
+                      placeholder="请输入电话号码"
+                      :maxLength="50"></a-input>
+                  </a-form-item>
+                </a-col>
+              </a-row>
+              <a-row v-if="currentSelectInvoiceType === 2">
+                <a-col :span="12">
+                  <a-form-item label="开户银行" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                    <a-input
+                      @change="event => event.target.value = event.target.value.trim()"
+                      v-decorator="['depositBank',{ ...validatorRules.depositBank, initialValue:currentMemberInfo.depositBank}]"
+                      placeholder="请输入开户银行"
+                      :maxLength="50"></a-input>
+                  </a-form-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-item label="银行账户" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                    <a-input
+                      @change="(e) => {e.target.value = e.target.value.trim()}"
+                      v-decorator="['bankAccount',{ ...validatorRules.bankAccount, initialValue:currentMemberInfo.bankAccount}]"
+                      placeholder="请输入银行账户"
+                      :maxLength="50"></a-input>
+                  </a-form-item>
+                </a-col>
+              </a-row>
+            </template>
+          </div>
+        </a-form>
+      </a-spin>
+    </template>
+    <template slot="footer">
+      <a-button @click="handleCancel">关闭</a-button>
+      <a-button @click="preSaveChargeCertificate" type="primary">暂存</a-button>
+      <a-button @click="addChargeCertificate" type="primary">提交</a-button>
+    </template>
+  </j-modal>
+</template>
+
+<script>
+import { deleteAction, getAction, httpAction } from '@api/memberManage'
+import JImageUpload from '@comp/standardsAssociation/JImageUpload'
+import JSearchSelectTag from '@comp/standardsAssociation/JSearchSelectTag'
+import JDate from '@comp/tools/JDate'
+import JUpload from '@comp/standardsAssociation/JUpload'
+import pick from 'lodash.pick'
+import JDictSelectTag from '@comp/standardsAssociation/JDictSelectTag'
+export default {
+  // 新建VIN证书申请 收费 窗口
+  name: 'ChargeCertificateModel',
+  components: {
+    JImageUpload,
+    JSearchSelectTag,
+    JDate,
+    JUpload,
+    JDictSelectTag
+  },
+  data() {
+    return {
+      loginUserId: this.$store.getters.userInfo.memberId,
+      model: {},
+      checkEffectDate: '',
+      confirmLoading: false,
+      visible: false,
+      title: '',
+      pageType: 6,
+      form: this.$form.createForm(this),
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 6 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 }
+      },
+      // 当前选择是否需要发票的值，用于dom的判断 0-无 1-普通发票 2-增值税发票
+      currentSelectInvoiceType: 0,
+      validatorRules: {
+        defaultRules: {
+          rules: [{ required: true, message: '请选择' },
+            { min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
+          ]
+        },
+        unBindId: {
+          rules: [{ required: true, message: '请选择要解绑的证书' }
+          ]
+        },
+        companyName: {
+          rules: [
+            { required: true, message: '请输入单位全称!' },
+            { min: 1, max: 50, message: '单位全称长度不超过50个字符', validateTrigger: 'blur' }
+          ]
+        },
+        mobile: {
+          rules: [
+            { required: true, message: '请输入手机!' },
+            { min: 1, max: 50, message: '手机号码不超过50个字符' },
+            { pattern: /^1[345678]\d{9}$/, message: '请输入正确的手机号', validateTrigger: 'blur' }
+          ]
+        },
+        code: {
+          rules: [
+            { required: true, message: '请输入证书代码!' },
+            { min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
+          ]
+        },
+        certificateImg: {
+          rules: [
+            { required: true, message: '请上传证书文件!' }
+          ],
+          validateTrigger: 'change'
+        },
+        clientCode: {
+          rules: [
+            { min: 0, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
+          ]
+        },
+        auditOpinion: {
+          rules: [
+            { min: 0, max: 500, message: '处理结果备注最多500个字符', validateTrigger: 'blur' }
+          ]
+        },
+        effectDate: {
+          rules: [{
+            required: true, message: '请选择生效日期'
+          }]
+        },
+        invalidDate: { rules: [{ required: true, validator: this.checkInvalidDate }] },
+        certificateType: {
+          rules: [{
+            required: true, message: '请输入证书类型!'
+          }]
+        },
+        address: {
+          rules: [
+            { required: true, message: '请输入通讯地址!' },
+            { min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
+          ]
+        },
+        postcode: {
+          rules: [
+            {
+              required: true, message: '请输入邮编!'
+            },
+            { min: 1, max: 50, message: '长度不超过50个字符' }
+            // { pattern: /^[0-9]\d{5}$/, message: '请输入正确的邮编', validateTrigger: 'blur' }
+          ]
+        },
+        paymentMethod: {
+          rules: [{
+            required: true, message: '请输入缴费方式!'
+          }]
+        },
+        paymentAmount: {
+          rules: [
+            {
+              required: true, message: '请输入缴费金额!'
+            },
+            {
+              pattern: /^[1-9](\d{1,10})?(\.\d{1,2})$|^0\.([1-9](\d{0,1})|\d[1-9])$|^[1-9]\d{0,10}$|^0$/,
+              message: '请输入合法的金额数字，最多2位小数,11位正数',
+              validateTrigger: 'blur'
+            }
+          ],
+          validateTrigger: 'blur'
+        },
+        submissionTime: {
+          rules: [{
+            required: true, message: '请输入缴费日期!'
+          }]
+        },
+        paymentRecord: {
+          rules: [{
+            required: true, message: '请上传缴费凭证!'
+          }]
+        },
+        paymentRecord1: { rules: [{ required: true, message: '请上传打包协议' }] },
+        liaisonMan: {
+          rules: [
+            { required: true, message: '请输入联系人!' },
+            { min: 1, max: 50, message: '联系人不超过50个字符', validateTrigger: 'blur' }
+          ]
+        },
+        invoiceRequirements: {
+          rules: [{
+            required: true, message: '请选择是否需要发票!'
+          }]
+        },
+        headerName: {
+          rules: [
+            {
+              required: true, message: '请输入付款单位发票抬头!'
+            },
+            { min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
+          ],
+          validateTrigger: 'blur'
+        },
+        taxNumber: {
+          rules: [
+            { required: true, message: '请输入社会统一代码/税号!' },
+            { min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' },
+            {
+              // pattern: /^[A-Z0-9]{15}$|^[A-Z0-9]{17}$|^[A-Z0-9]{18}$|^[A-Z0-9]{20}$/,
+              pattern: /^([0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}|[1-9]\d{14})$/,
+              // message: '15位、17位、18位、20位数字和大写英文字母',
+              message: '请输入15位、18位的社会统一代码/税号',
+              validateTrigger: 'blur'
+            }
+          ],
+          validateTrigger: 'blur'
+        },
+        invoiceAddress: { rules: [{ required: true, message: '请输入单位地址' }], validateTrigger: 'blur' },
+        invoicePhone: {
+          rules: [
+            { required: true, message: '请输入电话号码' },
+            {
+              pattern: /^((13[0-9])|(14[579])|(15([0-3]|[5-9]))|(17[0135678])|(18[0-9])|(19[8|9])|(16[6]))\d{8}$|^([0-9]{3,4}-)[0-9]{7,8}$/,
+              message: '请输入正确格式的电话号码',
+              validateTrigger: 'blur'
+            }
+          ],
+          validateTrigger: 'blur'
+        },
+        depositBank: { rules: [{ required: true, message: '请输入开户银行' }], validateTrigger: 'blur' },
+        bankAccount: { rules: [{ required: true, message: '请输入银行账户' }], validateTrigger: 'blur' },
+        reasonsRenewal: {
+          rules: [{
+            required: true, message: '请至少选择一个换证原因!'
+          }]
+        },
+        sendMethod: { rules: [{ required: false, message: '请选择快递公司' }], validateTrigger: 'change' },
+        postNo: { rules: [{ required: false, message: '请输入邮寄单号' }], validateTrigger: 'blur' }
+      },
+      // 免费证书对象
+      freeCertificate: {},
+      invoiceRequirementsFlag: false,
+      // 当前登录用户的会员信息
+      currentMemberInfo: {},
+      // 会员缴费信息
+      memberInfoPayment: {},
+      // 是否是电汇
+      isWireTransfer: '1',
+      // 记录续费证书选择
+      selectType: 1,
+      // 缴费方式标志
+      paymentMethodFlag: false // 发票选择
+    }
+  },
+  methods: {
+    add() {
+      // 数据准备
+      this.currentMemberInfo = {}
+      getAction('/memberInfo/memberInfo/getCurrentMemberInfo').then((res) => {
+        if (res.success) {
+          this.currentMemberInfo = res.result || {}
+          this.addEdit({})
+        }
+      })
+    },
+    addEdit() {
+      this.form.resetFields()
+      this.freeCertificate = {}
+      // 缴费信息置空
+      this.memberInfoPayment = {}
+      this.model = Object.assign({}, this.currentMemberInfo)
+      this.visible = true
+      this.$nextTick(() => {
+        this.form.setFieldsValue(pick(this.model, 'address', 'postcode', 'companyName', 'liaisonMan', 'mobile'))
+      })
+    },
+    // 添加收费证书
+    addChargeCertificate: function() {
+      this.handleChargeCertificateOk()
+    },
+    // 添加收费证书信息
+    handleChargeCertificateOk: function() {
+      const that = this
+      // 触发表单验证
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          that.confirmLoading = true
+          const httpurl = '/vinCertificate/vinCertificate/addChargeCertificate'
+          const method = 'post'
+          const formData = Object.assign(this.freeCertificate, values)
+          // 防止越权的注入
+          formData.memberId = this.loginUserId
+          // 设置提交状态为 已提交
+          formData.certificateStatus = 2
+          httpAction(httpurl, formData, method).then((res) => {
+            if (res.success) {
+              // 添加缴费信息
+              const chargeUrl = '/certificatePaymentInfo/addVinChargeInfo'
+              const chargeMethod = 'post'
+              const chargeFormData = Object.assign(this.memberInfoPayment, values)
+              // 新增
+              chargeFormData.paymentType = 0
+              // 证书ID
+              chargeFormData.certificateId = res.result.id
+              // 4 是代表申请证书
+              chargeFormData.certificateModality = 4
+              // 缴费时长默认为 5年
+              chargeFormData.paymentTime = 5
+              const certificateId = chargeFormData.certificateId
+              httpAction(chargeUrl, chargeFormData, chargeMethod).then((res) => {
+                if (res.success) {
+                  that.$message.success(res.message)
+                  that.$emit('ok')
+                  that.visible = false
+                } else {
+                  // 如果添加缴费信息没有成功，则删除已经添加的证书
+                  console.log(' VIN证书开始删除')
+                  deleteAction('/vinCertificate/vinCertificate/delete', { id: certificateId }).then((res) => {
+                    if (res.success) {
+                      console.log('删除证书成功！')
+                    } else {
+                      console.log('删除证书失败！')
+                    }
+                  })
+                  that.$message.warning(res.message)
+                  that.loadData()
+                }
+              })
+            } else {
+              that.$message.warning(res.message)
+            }
+          }).finally(() => {
+            that.confirmLoading = false
+          })
+        }
+      })
+    },
+
+    // 添加收费证书预处理
+    preSaveChargeCertificate() {
+      this.preHandleChargeCertificateOk()
+    },
+    // 添加收费证书信息预处理
+    preHandleChargeCertificateOk: function() {
+      const that = this
+      // 触发表单验证
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          that.confirmLoading = true
+          const httpurl = '/vinCertificate/vinCertificate/addChargeCertificate'
+          const method = 'post'
+          const formData = Object.assign(this.freeCertificate, values)
+          // 防止越权的注入
+          formData.memberId = this.loginUserId
+          // 设置提交状态为 未提交
+          formData.certificateStatus = 0
+          httpAction(httpurl, formData, method).then((res) => {
+            if (res.success) {
+              // 添加缴费信息
+              const chargeUrl = '/certificatePaymentInfo/addVinChargeInfo'
+              const chargeMethod = 'post'
+              const chargeFormData = Object.assign(this.memberInfoPayment, values)
+              // 新增
+              chargeFormData.paymentType = 0
+
+              // 缴费状态为 未提交状态
+              chargeFormData.paymentStatus = 0
+              // 4 是代表申请证书
+              chargeFormData.certificateModality = 4
+              // 证书ID
+              chargeFormData.certificateId = res.result.id
+              // 缴费时长默认为 5年
+              chargeFormData.paymentTime = 5
+              const certificateId = chargeFormData.certificateId
+              httpAction(chargeUrl, chargeFormData, chargeMethod).then((res) => {
+                if (res.success) {
+                  that.$message.success('添加成功')
+                  that.$emit('ok')
+                  that.visible = false
+                } else {
+                  // 如果添加缴费信息没有成功，则删除已经添加的证书
+                  console.log(' VIN证书开始删除')
+                  deleteAction('/vinCertificate/vinCertificate/delete', { id: certificateId }).then((res) => {
+                    if (res.success) {
+                      console.log('删除证书成功！')
+                    } else {
+                      console.log('删除证书失败！')
+                    }
+                  })
+                  that.$message.warning(res.message)
+                  that.loadData()
+                }
+              })
+            } else {
+              that.$message.warning(res.message)
+            }
+          }).finally(() => {
+            that.confirmLoading = false
+          })
+        }
+      })
+    },
+    // 校验是否选择 要发票
+    invoiceRequirementsChange(value) {
+      this.currentSelectInvoiceType = Number(value)
+      if (this.currentSelectInvoiceType !== 0) {
+        this.invoiceRequirementsFlag = true
+      } else {
+        this.invoiceRequirementsFlag = false
+      }
+    },
+    checkInvalidDate(rule, value, callback) {
+      if (value === undefined || value === '' || value == null) {
+        callback(new Error('请选择失效日期'))
+      }
+      console.log(value + ' :' + this.checkEffectDate)
+      var ck = this.checkEffectDate
+      if (!(ck === null || ck === undefined || ck === '')) {
+        if (value < this.checkEffectDate) {
+          callback(new Error('失效日期不能早于生效日期'))
+        }
+      }
+      callback()
+    },
+    /* 缴费方式*/
+    changePaymentMethod(value) {
+      // 1 是电汇 2 打包 3 是现金
+      this.isWireTransfer = value
+      this.form.resetFields(['paymentType', 'paymentAmount', 'paymentTime', 'submissionTime', 'paymentRecord'])
+      if (value !== '1') {
+        this.paymentMethodFlag = true
+      } else {
+        this.paymentMethodFlag = false
+      }
+    },
+    /*
+  * 证书下拉框改变
+  * */
+    vinOrWmi(val) {
+      this.selectType = Number(val)
+      this.form.resetFields('reasonsRenewal')
+    },
+    handleCancel() {
+      this.visible = false
+    }
+  },
+  computed: {
+    width() {
+      if (this.pageType === 14) {
+        return 400
+      }
+      if (this.pageType !== 4) {
+        return 1350
+      } else {
+        return 650
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.v-middle {
+  height: 100px;
+  text-align: center;
+  vertical-align: middle;
+
+  /deep/ .ant-form-item {
+    margin-bottom: 0px !important;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    color: rgba(0, 0, 0, 0.65);
+    font-size: 14px;
+    font-variant: tabular-nums;
+    line-height: 1.5;
+    list-style: none;
+    font-feature-settings: 'tnum';
+    vertical-align: middle;
+  }
+
+}
+
+.remark span {
+  display: inline-block;
+  font-size: 14px;
+  margin-left: 165px;
+  transform: translateY(-20px);
+}
+
+.vin-style {
+  display: inline-block;
+  max-width: 120px;
+  white-space: pre-wrap;
+  text-align: center;
+}
+
+.table {
+  width: 100%;
+  height: 180px;
+  text-align: center;
+  margin-bottom: 10px;
+  border-color: #ccc;
+  border-collapse: collapse;
+}
+
+// 证书状态颜色
+.certificate {
+  display: inline-block;
+  height: 24px;
+  font-size: 12px;
+  line-height: 24px;
+  padding: 0 7px;
+  border-radius: 3px;
+  color: #ddd;
+}
+
+.status-0 {
+  background: #c37e00;
+}
+
+.status-1 {
+  background: #40835e;
+}
+
+.status-2 {
+  background: #8a8c8e;
+}
+
+.transalte-y-10 {
+  transform: translateY(10px);
+}
+
+.apply-notice {
+  color: #f5222d;
+}
+
+.apply-code-notice {
+  color: #f5222d;
+  position: absolute;
+  bottom: 4px;
+  left: 25%
+}
+</style>
diff --git a/src/views/standardsAssociation/model/CheckCertificateModel.vue b/src/views/standardsAssociation/model/CheckCertificateModel.vue
new file mode 100644
index 0000000..c9a2d5b
--- /dev/null
+++ b/src/views/standardsAssociation/model/CheckCertificateModel.vue
@@ -0,0 +1,349 @@
+<template>
+  <j-modal
+    :title="title"
+    :width="width"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    :maskClosable="false"
+    switchFullscreen
+    @cancel="handleCancel"
+    cancelText="关闭">
+    <template>
+      <a-spin :spinning="confirmLoading">
+        <a-form :form="form">
+          <a-row>
+            <!--会员不显示单位全称-->
+            <a-col :span="7 " v-if="isMember !== 'member'">
+              <!--证书表头信息 开始-->
+              <a-form-item label="单位全称" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input :maxLength="50" disabled v-decorator="['companyName']"></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :span="7">
+              <a-form-item label="证书类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-search-select-tag
+                  disabled
+                  dict="certificate_type"
+                  v-decorator="['certificateType']"
+                  placeholder="请选择证书类型"/>
+              </a-form-item>
+            </a-col>
+            <a-col :span="10">
+              <a-form-item label=" 证书代码" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input :maxLength="50" disabled v-decorator="['code']" placeholder="请输入证书代码"></a-input>
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-row>
+            <a-col :span="7">
+              <a-form-item label="证书状态" :labelCol="labelCol" :wrapperCol="wrapperCol" style="color:green">
+                <span v-if="model.certificateStatus==0" class="certificate  status-0">待支付</span>
+                <span v-if="model.certificateStatus==1" class="certificate  status-1">已绑定</span>
+                <span v-if="model.certificateStatus==2" class="certificate  status-1">已支付</span>
+                <span v-if="model.certificateStatus==3" class="certificate  status-1">支付已审核</span>
+                <span v-if="model.certificateStatus==4" class="certificate  status-1">正常使用</span>
+                <span v-if="model.certificateStatus==5" class="certificate  status-2">已失效</span>
+                <span v-if="model.certificateStatus==6" class="certificate  status-2">已驳回</span>
+                <span v-if="model.certificateStatus==7" class="certificate  status-2">绑定已失效</span>
+              </a-form-item>
+            </a-col>
+
+            <a-col :span="7">
+              <a-form-item label="证书周期" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input
+                  :maxLength="50"
+                  disabled
+                  v-decorator="['certificateValidDate', {'initialValue': model.certificationDate}]"></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :span="10">
+              <a-form-item label="预计到期" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <label v-text="remainingTime" style="color:red;"></label>
+                天后
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-row v-if="model.code">
+            <a-col :span="7">
+              <a-form-item label=" 证书文件" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-image-upload
+                  isLessThan5M
+                  disabled
+                  :number="1"
+                  bizPath="payment"
+                  v-decorator="['certificateImg']">
+                </j-image-upload>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <div class="row clearfix">
+            <div class="col-md-5 column">
+              <p></p>
+              <b><p>证书历史信息</p></b>
+              <p>--------------------------------------------------</p>
+            </div>
+          </div>
+
+          <div class="container">
+
+            <div class="table-page-search-wrapper">
+              <div class="row clearfix">
+                <div class="col-md-11 column">
+                  <a-table
+                    ref="table"
+                    size="middle"
+                    bordered
+                    rowKey="id"
+                    :columns="columns"
+                    :dataSource="vinCertificateHistoryDataSource"
+                    :pagination="ipagination"
+                    @change="handleTableChange"
+                    class="j-table-force-nowrap">
+                  </a-table>
+                </div>
+              </div>
+            </div>
+          </div>
+        </a-form>
+      </a-spin>
+    </template>
+    <template slot="footer">
+      <a-button @click="handleCancel" type="primary">返回</a-button>
+    </template>
+  </j-modal>
+</template>
+
+<script>
+import { USER_INFO } from '@/store/mutation-types'
+import pick from 'lodash.pick'
+import Vue from 'vue'
+import { getAction } from '@api/memberManage'
+import JImageUpload from '@comp/standardsAssociation/JImageUpload'
+import JSearchSelectTag from '@comp/standardsAssociation/JSearchSelectTag'
+export default {
+  // 查看证书
+  name: 'CheckCertificateModel',
+  components: {
+    JImageUpload,
+    JSearchSelectTag
+  },
+  data() {
+    return {
+      visible: false,
+      confirmLoading: false,
+      pageType: 1,
+      form: this.$form.createForm(this),
+      // 角色码
+      isMember: Vue.ls.get(USER_INFO).roleCode,
+      title: '查看证书',
+      disableSubmit: true,
+      model: {},
+      // 证书有效期天数
+      remainingTime: 0,
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 6 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 }
+      },
+      // 证书历史信息表头
+      columns: [
+        {
+          title: '序号',
+          dataIndex: '',
+          key: 'rowIndex',
+          width: 60,
+          align: 'center',
+          customRender: function(t, r, index) {
+            return parseInt(index) + 1
+          }
+        },
+        {
+          title: '证书形式',
+          align: 'center',
+          dataIndex: 'certificateModality_dictText'
+        },
+        {
+          title: '生效日期',
+          align: 'center',
+          dataIndex: 'effectDate',
+          customRender: function(text) {
+            if (text == null) {
+              return '------------'
+            } else {
+              return !text ? '' : (text.length > 10 ? text.substr(0, 10) : text)
+            }
+          }
+        },
+        {
+          title: '失效日期',
+          align: 'center',
+          dataIndex: 'invalidDate',
+          customRender: function(text) {
+            if (text == null) {
+              return '------------'
+            } else {
+              return !text ? '' : (text.length > 10 ? text.substr(0, 10) : text)
+            }
+          }
+        },
+        {
+          title: '快递公司',
+          align: 'center',
+          dataIndex: 'sendMethod',
+          customRender: function(text) {
+            if (text === 1) {
+              return 'EMS'
+            } else if (text === 2) {
+              return '顺丰'
+            }
+          }
+        }],
+      // VIN证书历史数据源
+      vinCertificateHistoryDataSource: [],
+      // 页面分页信息
+      ipagination: {
+        current: 1,
+        pageSize: 10,
+        pageSizeOptions: ['10', '20', '30'],
+        showTotal: (total, range) => {
+          return range[0] + '-' + range[1] + ' 共' + total + '条'
+        },
+        showQuickJumper: true,
+        showSizeChanger: true,
+        total: 0
+      }
+    }
+  },
+  computed: {
+    width() {
+      if (this.pageType === 14) {
+        return 400
+      }
+      if (this.pageType !== 4) {
+        return 1350
+      } else {
+        return 650
+      }
+    }
+  },
+  methods: {
+    check(val) {
+      this.form.resetFields()
+      this.model = Object.assign({}, val)
+      this.paymentSearchQuery()
+      this.visible = true
+      this.$nextTick(() => {
+        this.form.setFieldsValue(pick(this.model, 'certificateImg', 'certificateValidDate', 'companyName', 'certificationDate', 'certificateType', 'certificateStatus', 'code',))
+      })
+    },
+    handleCancel() {
+      this.visible = false
+    },
+    // 获取证书历史数据源
+    paymentSearchQuery() {
+      const params = `certificateId=${this.model.id}&pageNo=${this.ipagination.current}&pageSize=${this.ipagination.pageSize}`
+      // const params = 'certificateId=' + this.vinCertificate.id + '&pageNo=' + this.ipagination.current + '&pageSize=' + this.ipagination.pageSize
+      getAction('/vinCertificateHistory/vinCertificateHistory/list?' + params).then((res) => {
+        this.vinCertificateHistoryDataSource = res.result.records
+        this.ipagination.total = res.result.total
+      })
+    },
+    // 页面分页改变重新请求
+    handleTableChange(pagination) {
+      this.ipagination = pagination
+      this.paymentSearchQuery()
+    }
+  }
+}
+</script>
+<style lang="less">
+.v-middle {
+  height: 100px;
+  text-align: center;
+  vertical-align: middle;
+
+  /deep/ .ant-form-item {
+    margin-bottom: 0px !important;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    color: rgba(0, 0, 0, 0.65);
+    font-size: 14px;
+    font-variant: tabular-nums;
+    line-height: 1.5;
+    list-style: none;
+    font-feature-settings: 'tnum';
+    vertical-align: middle;
+  }
+
+}
+
+.remark span {
+  display: inline-block;
+  font-size: 14px;
+  margin-left: 165px;
+  transform: translateY(-20px);
+}
+
+.vin-style {
+  display: inline-block;
+  max-width: 120px;
+  white-space: pre-wrap;
+  text-align: center;
+}
+
+.table {
+  width: 100%;
+  height: 180px;
+  text-align: center;
+  margin-bottom: 10px;
+  border-color: #ccc;
+  border-collapse: collapse;
+}
+
+// 证书状态颜色
+.certificate {
+  display: inline-block;
+  height: 24px;
+  font-size: 12px;
+  line-height: 24px;
+  padding: 0 7px;
+  border-radius: 3px;
+  color: #ddd;
+}
+
+.status-0 {
+  background: #c37e00;
+}
+
+.status-1 {
+  background: #40835e;
+}
+
+.status-2 {
+  background: #8a8c8e;
+}
+
+.transalte-y-10 {
+  transform: translateY(10px);
+}
+
+.apply-notice {
+  color: #f5222d;
+}
+
+.apply-code-notice {
+  color: #f5222d;
+  position: absolute;
+  bottom: 4px;
+  left: 25%
+}
+
+</style>
\ No newline at end of file
diff --git a/src/views/standardsAssociation/model/FreeCertificateEditModel.vue b/src/views/standardsAssociation/model/FreeCertificateEditModel.vue
new file mode 100644
index 0000000..44995ef
--- /dev/null
+++ b/src/views/standardsAssociation/model/FreeCertificateEditModel.vue
@@ -0,0 +1,405 @@
+<template>
+  <j-modal
+    :title="title"
+    :width="width"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    :maskClosable="false"
+    switchFullscreen
+    @cancel="handleCancel"
+    cancelText="关闭">
+    <template>
+      <a-spin :spinning="confirmLoading">
+        <a-form :form="form">
+          当前用户可享{{ freeCountVin }}次免费制作证书的机会
+          <a-divider orientation="left">
+            申请信息
+          </a-divider>
+          <a-row>
+            <a-col :span="12">
+              <a-form-item label="证书类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-search-select-tag
+                  dict="certificate_type"
+                  @change="vinOrWmi"
+                  :triggerChange="true"
+                  v-decorator="['certificateType',validatorRules.certificateType]"
+                  placeholder="请选择证书类型"/>
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label=" 证书代码" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input
+                  :maxLength="50"
+                  placeholder="请输入证书代码"
+                  v-decorator="['code',validatorRules.clientCode]"
+                ></a-input>
+              </a-form-item>
+              <span class="apply-code-notice">一次申请仅能输入一个证书代码</span>
+            </a-col>
+          </a-row>
+          <a-row v-if="selectType == '1' ">
+            <a-col :span="12">
+              <a-form-item label="备案通知书" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-dict-select-tag
+                  v-decorator="['noticeOfFiling']"
+                  :triggerChange="true"
+                  placeholder="请选择备案通知书"
+                  dictCode="notice_of_filing"/>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row>
+            <a-col :span="12">
+              <a-form-item label="通讯地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input
+                  :maxLength="50"
+                  v-decorator="['address',validatorRules.address]"
+                  placeholder="">
+                </a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :span="12">
+              <a-form-item label="邮编" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input
+                  :maxLength="50"
+                  v-decorator="['postcode',validatorRules.postcode]"
+                  placeholder="">
+                </a-input>
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-form>
+      </a-spin>
+    </template>
+    <template slot="footer">
+      <a-button @click="handleCancel">关闭</a-button>
+      <a-button @click="saveFreeCertificate" type="primary">暂存</a-button>
+      <a-button @click="handleRealSaveFreeCertificateOk" type="primary">提交</a-button>
+    </template>
+  </j-modal>
+</template>
+
+<script>
+import JSearchSelectTag from '@comp/standardsAssociation/JSearchSelectTag'
+import { httpAction } from '@api/memberManage'
+import pick from 'lodash.pick'
+export default {
+  // 免费证书申请编辑 窗口
+  name: 'FreeCertificateEditModel',
+  components: {
+    JSearchSelectTag
+  },
+  data() {
+    return {
+      loginUserId: this.$store.getters.userInfo.memberId,
+      title: '新增申请',
+      visible: false,
+      form: this.$form.createForm(this),
+      confirmLoading: false,
+      pageType: 10,
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 6 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 }
+      },
+      validatorRules: {
+        defaultRules: {
+          rules: [{ required: true, message: '请选择' },
+            { min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
+          ]
+        },
+        unBindId: {
+          rules: [{ required: true, message: '请选择要解绑的证书' }
+          ]
+        },
+        code: {
+          rules: [
+            { required: true, message: '请输入证书代码!' },
+            { min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
+          ]
+        },
+        certificateImg: {
+          rules: [
+            { required: true, message: '请上传证书文件!' }
+          ],
+          validateTrigger: 'change'
+        },
+        clientCode: {
+          rules: [
+            { min: 0, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
+          ]
+        },
+        effectDate: {
+          rules: [{
+            required: true, message: '请选择生效日期'
+          }]
+        },
+        certificateType: {
+          rules: [{
+            required: true, message: '请输入证书类型!'
+          }]
+        },
+        address: {
+          rules: [
+            { required: true, message: '请输入通讯地址!' },
+            { min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
+          ]
+        },
+        postcode: {
+          rules: [
+            {
+              required: true, message: '请输入邮编!'
+            },
+            { min: 1, max: 50, message: '长度不超过50个字符' },
+            { pattern: /^[0-9]\d{5}$/, message: '请输入正确的邮编', validateTrigger: 'blur' }
+          ]
+        },
+        paymentMethod: {
+          rules: [{
+            required: true, message: '请输入缴费方式!'
+          }]
+        },
+        paymentAmount: {
+          rules: [
+            {
+              required: true, message: '请输入缴费金额!'
+            },
+            {
+              pattern: /^[1-9](\d{1,10})?(\.\d{1,2})$|^0\.([1-9](\d{0,1})|\d[1-9])$|^[1-9]\d{0,10}$|^0$/,
+              message: '请输入合法的金额数字，最多2位小数,11位正数',
+              validateTrigger: 'blur'
+            }
+          ],
+          validateTrigger: 'blur'
+        },
+        submissionTime: {
+          rules: [{
+            required: true, message: '请输入缴费日期!'
+          }]
+        },
+        invoiceRequirements: {
+          rules: [{
+            required: true, message: '请选择是否需要发票!'
+          }]
+        },
+        headerName: {
+          rules: [
+            {
+              required: true, message: '请输入付款单位发票抬头!'
+            },
+            { min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
+          ],
+          validateTrigger: 'blur'
+        },
+        taxNumber: {
+          rules: [
+            { required: true, message: '请输入社会统一代码/税号!' },
+            { min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' },
+            {
+              // pattern: /^[A-Z0-9]{15}$|^[A-Z0-9]{17}$|^[A-Z0-9]{18}$|^[A-Z0-9]{20}$/,
+              pattern: /^([0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}|[1-9]\d{14})$/,
+              // message: '15位、17位、18位、20位数字和大写英文字母',
+              message: '请输入15位、18位的社会统一代码/税号',
+              validateTrigger: 'blur'
+            }
+          ],
+          validateTrigger: 'blur'
+        },
+        invoiceAddress: { rules: [{ required: true, message: '请输入单位地址' }], validateTrigger: 'blur' },
+        invoicePhone: {
+          rules: [
+            { required: true, message: '请输入电话号码' },
+            {
+              pattern: /^((13[0-9])|(14[579])|(15([0-3]|[5-9]))|(17[0135678])|(18[0-9])|(19[8|9])|(16[6]))\d{8}$|^([0-9]{3,4}-)[0-9]{7,8}$/,
+              message: '请输入正确格式的电话号码',
+              validateTrigger: 'blur'
+            }
+          ],
+          validateTrigger: 'blur'
+        },
+        depositBank: { rules: [{ required: true, message: '请输入开户银行' }], validateTrigger: 'blur' },
+        bankAccount: { rules: [{ required: true, message: '请输入银行账户' }], validateTrigger: 'blur' },
+        reasonsRenewal: {
+          rules: [{
+            required: true, message: '请至少选择一个换证原因!'
+          }]
+        },
+        sendMethod: { rules: [{ required: false, message: '请选择快递公司' }], validateTrigger: 'change' },
+        postNo: { rules: [{ required: false, message: '请输入邮寄单号' }], validateTrigger: 'blur' }
+      },
+      // 当前登录用户的会员信息
+      currentMemberInfo: {},
+      // 免费证书对象
+      freeCertificate: {},
+      // 记录续费证书选择
+      selectType: 1,
+      freeCountVin: 0,
+      model: {}
+    }
+  },
+  computed: {
+    width() {
+      if (this.pageType === 14) {
+        return 400
+      }
+      if (this.pageType !== 4) {
+        return 1350
+      } else {
+        return 650
+      }
+    }
+  },
+  methods: {
+    // 免费证书的编辑窗口
+    edit(record) {
+      this.form.resetFields()
+      this.model = Object.assign({}, record)
+      this.selectType = record.certificateType
+      this.visible = true
+      this.$nextTick(() => {
+        this.form.setFieldsValue(pick(this.model, 'noticeOfFiling', 'id', 'address', 'postcode', 'certificateType', 'code'))
+      })
+    },
+    /*
+   * 证书下拉框改变
+   * */
+    vinOrWmi(val) {
+      this.selectType = Number(val)
+    },
+    // 未提交 免费证书
+    saveFreeCertificate() {
+      this.handleSaveFreeCertificateOk(0)
+    },
+    // 编辑后保存
+    handleRealSaveFreeCertificateOk() {
+      this.handleSaveFreeCertificateOk(null)
+    },
+    // 未提交 免费证书
+    handleSaveFreeCertificateOk: function(certificateStatus) {
+      const that = this
+      // 触发表单验证
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          that.confirmLoading = true
+          const httpurl = '/vinCertificate/vinCertificate/addFreeCertificate'
+          const method = 'post'
+          const formData = Object.assign(this.model, values)
+          // 添加证书状态为未提交
+          formData.certificateStatus = certificateStatus
+          formData.createTime = null
+          formData.memberId = this.loginUserId
+          console.log('表单提交数据', formData)
+          httpAction(httpurl, formData, method).then((res) => {
+            if (res.success) {
+              if (certificateStatus === 0) {
+                that.$message.success(res.message)
+              } else {
+                that.$message.success(res.message)
+              }
+              that.$emit('ok')
+              that.visible = false
+            } else {
+              that.$message.warning(res.message)
+            }
+          }).finally(() => {
+            that.confirmLoading = false
+          })
+        }
+      })
+    },
+    handleCancel() {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.v-middle {
+  height: 100px;
+  text-align: center;
+  vertical-align: middle;
+
+  /deep/ .ant-form-item {
+    margin-bottom: 0px !important;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    color: rgba(0, 0, 0, 0.65);
+    font-size: 14px;
+    font-variant: tabular-nums;
+    line-height: 1.5;
+    list-style: none;
+    font-feature-settings: 'tnum';
+    vertical-align: middle;
+  }
+
+}
+
+.remark span {
+  display: inline-block;
+  font-size: 14px;
+  margin-left: 165px;
+  transform: translateY(-20px);
+}
+
+.vin-style {
+  display: inline-block;
+  max-width: 120px;
+  white-space: pre-wrap;
+  text-align: center;
+}
+
+.table {
+  width: 100%;
+  height: 180px;
+  text-align: center;
+  margin-bottom: 10px;
+  border-color: #ccc;
+  border-collapse: collapse;
+}
+
+// 证书状态颜色
+.certificate {
+  display: inline-block;
+  height: 24px;
+  font-size: 12px;
+  line-height: 24px;
+  padding: 0 7px;
+  border-radius: 3px;
+  color: #ddd;
+}
+
+.status-0 {
+  background: #c37e00;
+}
+
+.status-1 {
+  background: #40835e;
+}
+
+.status-2 {
+  background: #8a8c8e;
+}
+
+.transalte-y-10 {
+  transform: translateY(10px);
+}
+
+.apply-notice {
+  color: #f5222d;
+}
+
+.apply-code-notice {
+  color: #f5222d;
+  position: absolute;
+  bottom: 4px;
+  left: 25%
+}
+</style>
+
+FreeCertificateEditModel
diff --git a/src/views/standardsAssociation/model/FreeCertificateModel.vue b/src/views/standardsAssociation/model/FreeCertificateModel.vue
new file mode 100644
index 0000000..502d18c
--- /dev/null
+++ b/src/views/standardsAssociation/model/FreeCertificateModel.vue
@@ -0,0 +1,474 @@
+<template>
+  <j-modal
+    :title="title"
+    :width="width"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    :maskClosable="false"
+    switchFullscreen
+    @cancel="handleCancel"
+    cancelText="关闭">
+    <template>
+      <a-spin :spinning="confirmLoading">
+        <a-form :form="form">
+          当前用户可享{{ freeCount }}次免费制作证书的机会
+          <a-divider orientation="left">
+            申请信息
+          </a-divider>
+          <a-row>
+            <a-col :span="12">
+              <a-form-item label="证书类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-search-select-tag
+                  dict="certificate_type"
+                  @change="vinOrWmi"
+                  :triggerChange="true"
+                  v-decorator="['certificateType',validatorRules.certificateType]"
+                  placeholder="请选择证书类型"/>
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label=" 证书代码" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input
+                  :maxLength="50"
+                  placeholder="请输入证书代码"
+                  v-decorator="['code',validatorRules.clientCode]"
+                ></a-input>
+              </a-form-item>
+              <span class="apply-code-notice">一次申请仅能输入一个证书代码</span>
+            </a-col>
+          </a-row>
+          <a-row v-if="selectType == '1' ">
+            <a-col :span="12">
+              <a-form-item label="备案通知书" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-dict-select-tag
+                  v-decorator="['noticeOfFiling']"
+                  :triggerChange="true"
+                  placeholder="请选择备案通知书"
+                  dictCode="notice_of_filing"/>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row>
+            <a-col :span="12">
+              <a-form-item label="通讯地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input
+                  :maxLength="50"
+                  v-decorator="['address',validatorRules.address]"
+                  placeholder="">
+                </a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :span="12">
+              <a-form-item label="邮编" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input
+                  :maxLength="50"
+                  v-decorator="['postcode',validatorRules.postcode]"
+                  placeholder="">
+                </a-input>
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-form>
+      </a-spin>
+    </template>
+    <template slot="footer">
+      <a-button @click="handleCancel">关闭</a-button>
+      <a-button @click="preSaveFreeCertificate" type="primary">暂存</a-button>
+      <a-button @click="addFreeCertificate" type="primary">提交</a-button>
+    </template>
+  </j-modal>
+</template>
+
+<script>
+import JSearchSelectTag from '@/components/standardsAssociation/JSearchSelectTag'
+import { getAction, httpAction } from '@api/memberManage'
+import pick from 'lodash.pick'
+import JDictSelectTag from '@comp/standardsAssociation/JDictSelectTag'
+export default {
+  // 新建VIN证书申请 免费额度内 窗口
+  name: 'FreeCertificateModel',
+  components: {
+    JSearchSelectTag,
+    JDictSelectTag
+  },
+  data() {
+    return {
+      loginUserId: this.$store.getters.userInfo.memberId,
+      title: '',
+      visible: false,
+      form: this.$form.createForm(this),
+      confirmLoading: false,
+      pageType: 5,
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 6 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 }
+      },
+      validatorRules: {
+        defaultRules: {
+          rules: [{ required: true, message: '请选择' },
+            { min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
+          ]
+        },
+        unBindId: {
+          rules: [{ required: true, message: '请选择要解绑的证书' }
+          ]
+        },
+        companyName: {
+          rules: [
+            { required: true, message: '请输入单位全称!' },
+            { min: 1, max: 50, message: '单位全称长度不超过50个字符', validateTrigger: 'blur' }
+          ]
+        },
+        mobile: {
+          rules: [
+            { required: true, message: '请输入手机!' },
+            { min: 1, max: 50, message: '手机号码不超过50个字符' },
+            { pattern: /^1[345678]\d{9}$/, message: '请输入正确的手机号', validateTrigger: 'blur' }
+          ]
+        },
+        code: {
+          rules: [
+            { required: true, message: '请输入证书代码!' },
+            { min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
+          ]
+        },
+        certificateImg: {
+          rules: [
+            { required: true, message: '请上传证书文件!' }
+          ],
+          validateTrigger: 'change'
+        },
+        clientCode: {
+          rules: [
+            { min: 0, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
+          ]
+        },
+        auditOpinion: {
+          rules: [
+            { min: 0, max: 500, message: '处理结果备注最多500个字符', validateTrigger: 'blur' }
+          ]
+        },
+        effectDate: {
+          rules: [{
+            required: true, message: '请选择生效日期'
+          }]
+        },
+        invalidDate: { rules: [{ required: true, validator: this.checkInvalidDate }] },
+        certificateType: {
+          rules: [{
+            required: true, message: '请输入证书类型!'
+          }]
+        },
+        address: {
+          rules: [
+            { required: true, message: '请输入通讯地址!' },
+            { min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
+          ]
+        },
+        postcode: {
+          rules: [
+            {
+              required: true, message: '请输入邮编!'
+            },
+            { min: 1, max: 50, message: '长度不超过50个字符' },
+            { pattern: /^[0-9]\d{5}$/, message: '请输入正确的邮编', validateTrigger: 'blur' }
+          ]
+        },
+        paymentMethod: {
+          rules: [{
+            required: true, message: '请输入缴费方式!'
+          }]
+        },
+        paymentAmount: {
+          rules: [
+            {
+              required: true, message: '请输入缴费金额!'
+            },
+            {
+              pattern: /^[1-9](\d{1,10})?(\.\d{1,2})$|^0\.([1-9](\d{0,1})|\d[1-9])$|^[1-9]\d{0,10}$|^0$/,
+              message: '请输入合法的金额数字，最多2位小数,11位正数',
+              validateTrigger: 'blur'
+            }
+          ],
+          validateTrigger: 'blur'
+        },
+        submissionTime: {
+          rules: [{
+            required: true, message: '请输入缴费日期!'
+          }]
+        },
+        paymentRecord: {
+          rules: [{
+            required: true, message: '请上传缴费凭证!'
+          }]
+        },
+        paymentRecord1: { rules: [{ required: true, message: '请上传打包协议' }] },
+        liaisonMan: {
+          rules: [
+            { required: true, message: '请输入联系人!' },
+            { min: 1, max: 50, message: '联系人不超过50个字符', validateTrigger: 'blur' }
+          ]
+        },
+        invoiceRequirements: {
+          rules: [{
+            required: true, message: '请选择是否需要发票!'
+          }]
+        },
+        headerName: {
+          rules: [
+            {
+              required: true, message: '请输入付款单位发票抬头!'
+            },
+            { min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
+          ],
+          validateTrigger: 'blur'
+        },
+        taxNumber: {
+          rules: [
+            { required: true, message: '请输入社会统一代码/税号!' },
+            { min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' },
+            {
+              // pattern: /^[A-Z0-9]{15}$|^[A-Z0-9]{17}$|^[A-Z0-9]{18}$|^[A-Z0-9]{20}$/,
+              pattern: /^([0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}|[1-9]\d{14})$/,
+              // message: '15位、17位、18位、20位数字和大写英文字母',
+              message: '请输入15位、18位的社会统一代码/税号',
+              validateTrigger: 'blur'
+            }
+          ],
+          validateTrigger: 'blur'
+        },
+        invoiceAddress: { rules: [{ required: true, message: '请输入单位地址' }], validateTrigger: 'blur' },
+        invoicePhone: {
+          rules: [
+            { required: true, message: '请输入电话号码' },
+            {
+              pattern: /^((13[0-9])|(14[579])|(15([0-3]|[5-9]))|(17[0135678])|(18[0-9])|(19[8|9])|(16[6]))\d{8}$|^([0-9]{3,4}-)[0-9]{7,8}$/,
+              message: '请输入正确格式的电话号码',
+              validateTrigger: 'blur'
+            }
+          ],
+          validateTrigger: 'blur'
+        },
+        depositBank: { rules: [{ required: true, message: '请输入开户银行' }], validateTrigger: 'blur' },
+        bankAccount: { rules: [{ required: true, message: '请输入银行账户' }], validateTrigger: 'blur' },
+        reasonsRenewal: {
+          rules: [{
+            required: true, message: '请至少选择一个换证原因!'
+          }]
+        },
+        sendMethod: { rules: [{ required: false, message: '请选择快递公司' }], validateTrigger: 'change' },
+        postNo: { rules: [{ required: false, message: '请输入邮寄单号' }], validateTrigger: 'blur' }
+      },
+      // 当前登录用户的会员信息
+      currentMemberInfo: {},
+      // 免费证书对象
+      freeCertificate: {},
+      // 记录续费证书选择
+      selectType: 1,
+      freeCount: 0,
+      model: {}
+    }
+  },
+  methods: {
+    // 新增证书
+    add() {
+      // 数据准备
+      this.currentMemberInfo = {}
+      getAction('/memberInfo/memberInfo/getCurrentMemberInfo').then((res) => {
+        if (res.success) {
+          this.currentMemberInfo = res.result || {}
+          this.addEdit({})
+        }
+      })
+    },
+    addEdit() {
+      this.form.resetFields()
+      this.freeCertificate = {}
+      // 默认选择增值税发票
+      let defaultInvoiceRequirements = 2
+      this.model = Object.assign({}, this.currentMemberInfo,{invoiceRequirements: defaultInvoiceRequirements})
+      console.log(this.model)
+      this.visible = true
+      this.$nextTick(() => {
+        this.form.setFieldsValue(pick(this.model, 'address', 'postcode', 'companyName', 'liaisonMan', 'mobile','invoiceRequirements'))
+      })
+    },
+    // 添加免费证书
+    addFreeCertificate() {
+      this.handleFreeCertificateOk()
+    },
+    handleFreeCertificateOk: function() {
+      const that = this
+      // 触发表单验证
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          that.confirmLoading = true
+          const httpurl = '/vinCertificate/vinCertificate/addFreeCertificate'
+          const method = 'post'
+          const formData = Object.assign(this.freeCertificate, values)
+          formData.memberId = this.loginUserId
+          console.log('表单提交数据', formData)
+          httpAction(httpurl, formData, method).then((res) => {
+            if (res.success) {
+              that.$message.success(res.message)
+              that.$emit('ok')
+              that.visible = false
+            } else {
+              that.$message.warning(res.message)
+            }
+          }).finally(() => {
+            that.confirmLoading = false
+          })
+        }
+      })
+    },
+    preSaveFreeCertificate() {
+      this.preHandleSaveFreeCertificateOk()
+    },
+    // 未提交 免费证书
+    preHandleSaveFreeCertificateOk: function(certificateStatus) {
+      const that = this
+      // 触发表单验证
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          that.confirmLoading = true
+          const httpurl = '/vinCertificate/vinCertificate/addFreeCertificate'
+          const method = 'post'
+          const formData = Object.assign(this.model, values)
+          // 添加证书状态为未提交
+          formData.certificateStatus = certificateStatus
+          formData.createTime = null
+          formData.id = null
+          formData.updateTime = null
+          formData.memberId = this.loginUserId
+          formData.certificateStatus = 0
+          console.log('表单提交数据', formData)
+          httpAction(httpurl, formData, method).then((res) => {
+            if (res.success) {
+              that.$message.success('添加成功')
+              that.$emit('ok')
+              that.visible = false
+            } else {
+              that.$message.warning(res.message)
+            }
+          }).finally(() => {
+            that.confirmLoading = false
+          })
+        }
+      })
+    },
+    handleCancel() {
+      this.visible = false
+    },
+    /*
+   * 证书下拉框改变
+   * */
+    vinOrWmi(val) {
+      console.log(val)
+      this.selectType = Number(val)
+      this.form.resetFields('reasonsRenewal')
+    }
+  },
+  computed: {
+    width() {
+      if (this.pageType === 14) {
+        return 400
+      }
+      if (this.pageType !== 4) {
+        return 1350
+      } else {
+        return 650
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.v-middle {
+  height: 100px;
+  text-align: center;
+  vertical-align: middle;
+
+  /deep/ .ant-form-item {
+    margin-bottom: 0px !important;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    color: rgba(0, 0, 0, 0.65);
+    font-size: 14px;
+    font-variant: tabular-nums;
+    line-height: 1.5;
+    list-style: none;
+    font-feature-settings: 'tnum';
+    vertical-align: middle;
+  }
+
+}
+
+.remark span {
+  display: inline-block;
+  font-size: 14px;
+  margin-left: 165px;
+  transform: translateY(-20px);
+}
+
+.vin-style {
+  display: inline-block;
+  max-width: 120px;
+  white-space: pre-wrap;
+  text-align: center;
+}
+
+.table {
+  width: 100%;
+  height: 180px;
+  text-align: center;
+  margin-bottom: 10px;
+  border-color: #ccc;
+  border-collapse: collapse;
+}
+
+// 证书状态颜色
+.certificate {
+  display: inline-block;
+  height: 24px;
+  font-size: 12px;
+  line-height: 24px;
+  padding: 0 7px;
+  border-radius: 3px;
+  color: #ddd;
+}
+
+.status-0 {
+  background: #c37e00;
+}
+
+.status-1 {
+  background: #40835e;
+}
+
+.status-2 {
+  background: #8a8c8e;
+}
+
+.transalte-y-10 {
+  transform: translateY(10px);
+}
+
+.apply-notice {
+  color: #f5222d;
+}
+
+.apply-code-notice {
+  color: #f5222d;
+  position: absolute;
+  bottom: 4px;
+  left: 25%
+}
+</style>
diff --git a/src/views/standardsAssociation/model/FreeCertificateReplaceEditModel.vue b/src/views/standardsAssociation/model/FreeCertificateReplaceEditModel.vue
new file mode 100644
index 0000000..2d87282
--- /dev/null
+++ b/src/views/standardsAssociation/model/FreeCertificateReplaceEditModel.vue
@@ -0,0 +1,507 @@
+<template>
+  <j-modal
+    :title="title"
+    :width="width"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    :maskClosable="false"
+    switchFullscreen
+    @cancel="handleCancel"
+    cancelText="关闭">
+    <template>
+      <a-spin :spinning="confirmLoading">
+        <a-form :form="form">
+          <a-row>
+            <a-col :span="12">
+              <a-form-item label="证书类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-search-select-tag
+                  @change="vinOrWmi"
+                  dict="certificate_type"
+                  v-decorator="['certificateType',validatorRules.certificateType]"
+                  placeholder="请选择证书类型"/>
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label=" 证书代码" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input
+                  :maxLength="50"
+                  v-decorator="['code',validatorRules.clientCode]"
+                  placeholder="请输入证书代码"></a-input>
+              </a-form-item>
+              <span class="apply-code-notice">一次申请仅能输入一个证书代码</span>
+            </a-col>
+          </a-row>
+
+          <a-row>
+            <a-col :span="12">
+              <a-form-item label="通讯地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input :maxLength="50" v-decorator="['address',validatorRules.address]" placeholder="请输入通讯地址"/>
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="邮编" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input
+                  :maxLength="50"
+                  v-decorator="['postcode',validatorRules.postcode]"
+                  placeholder="请输入邮编"></a-input>
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-row>
+            <a-col :span="12">
+              <a-form-item label="生效日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-date
+                  date-format="YYYY-MM-DD"
+                  placeholder="请选择生效日期"
+                  v-decorator="['effectDate',validatorRules.effectDate]"
+                  :trigger-change="true"
+                  style="width: 100%"/>
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="失效日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-date
+                  date-format="YYYY-MM-DD"
+                  placeholder="请选择失效日期"
+                  v-decorator="['invalidDate',validatorRules.invalidDate]"
+                  :trigger-change="true"
+                  style="width: 100%"/>
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-row>
+            <a-col :span="12" v-if="selectType == '1'">
+              <a-form-item label="备案通知书" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-dict-select-tag
+                  v-decorator="['noticeOfFiling']"
+                  :triggerChange="true"
+                  placeholder="请选择备案通知书"
+                  dictCode="notice_of_filing"/>
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item
+                label="换证原因"
+                :labelCol="labelCol"
+                :wrapperCol="wrapperCol"
+                v-if="selectType == 1 ">
+                <j-multi-select-tag
+                  v-decorator="['reasonsRenewal',validatorRules.reasonsRenewal]"
+                  placeholder="请选择换证原因"
+                  dict-code="certificate_type_wmi">
+                </j-multi-select-tag>
+                {{ checkboxValue }}
+              </a-form-item>
+              <a-form-item label="换证原因" :labelCol="labelCol" :wrapperCol="wrapperCol" v-if="selectType == 2 ">
+                <j-multi-select-tag
+                  placeholder="请选择换证原因"
+                  v-decorator="['reasonsRenewal',validatorRules.reasonsRenewal]"
+                  dict-code="certificate_type_ec"
+                >
+                </j-multi-select-tag>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row v-if="model.code">
+            <a-col :span="12">
+              <a-form-item label="证书文件" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-image-upload
+                  isLessThan5M
+                  :number="1"
+                  bizPath="payment"
+                  v-decorator="['certificateImg',validatorRules.certificateImg]">
+                </j-image-upload>
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-row>
+            <a-col :span="24">
+              <a-form-item label="备注" :labelCol="labelColOne" :wrapperCol="wrapperColOne">
+                <a-textarea :maxLength="500" :rows="5" v-decorator="['auditOpinion',validatorRules.auditOpinion]"/>
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+        </a-form>
+      </a-spin>
+    </template>
+    <template slot="footer">
+      <a-button @click="handleCancel">关闭</a-button>
+      <a-button @click="saveReplacementCertificate" type="primary">暂存</a-button>
+      <a-button @click="realSaveReplacementCertificate" type="primary">提交</a-button>
+    </template>
+  </j-modal>
+</template>
+
+<script>
+import JDate from '@comp/tools/JDate'
+import JSearchSelectTag from '@comp/standardsAssociation/JSearchSelectTag'
+import JImageUpload from '@comp/standardsAssociation/JImageUpload'
+import JDictSelectTag from '@comp/standardsAssociation/JDictSelectTag'
+import JMultiSelectTag from '@comp/standardsAssociation/JMultiSelectTag'
+import { httpAction } from '@api/memberManage'
+import pick from 'lodash.pick'
+export default {
+  // 换证 编辑窗口
+  name: 'FreeCertificateReplaceEditModel',
+  components: {
+    JDate,
+    JSearchSelectTag,
+    JImageUpload,
+    JDictSelectTag,
+    JMultiSelectTag
+  },
+  data() {
+    return {
+      title: '换证',
+      visible: false,
+      confirmLoading: false,
+      form: this.$form.createForm(this),
+      pageType: 13,
+      checkboxValue: '',
+      model:{},
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 6 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 }
+      },
+      labelColOne: {
+        xs: { span: 24 },
+        sm: { span: 3 }
+      },
+      wrapperColOne: {
+        xs: { span: 24 },
+        sm: { span: 20 }
+      },
+      // 记录续费证书选择
+      selectType: 1,
+      validatorRules: {
+        defaultRules: {
+          rules: [{ required: true, message: '请选择' },
+            { min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
+          ]
+        },
+        unBindId: {
+          rules: [{ required: true, message: '请选择要解绑的证书' }
+          ]
+        },
+        code: {
+          rules: [
+            { required: true, message: '请输入证书代码!' },
+            { min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
+          ]
+        },
+        certificateImg: {
+          rules: [
+            { required: true, message: '请上传证书文件!' }
+          ],
+          validateTrigger: 'change'
+        },
+        clientCode: {
+          rules: [
+            { min: 0, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
+          ]
+        },
+        auditOpinion: {
+          rules: [
+            { min: 0, max: 500, message: '处理结果备注最多500个字符', validateTrigger: 'blur' }
+          ]
+        },
+        effectDate: {
+          rules: [{
+            required: true, message: '请选择生效日期'
+          }]
+        },
+        invalidDate: { rules: [{ required: true, validator: this.checkInvalidDate }] },
+        certificateType: {
+          rules: [{
+            required: true, message: '请输入证书类型!'
+          }]
+        },
+        address: {
+          rules: [
+            { required: true, message: '请输入通讯地址!' },
+            { min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
+          ]
+        },
+        postcode: {
+          rules: [
+            {
+              required: true, message: '请输入邮编!'
+            },
+            { min: 1, max: 50, message: '长度不超过50个字符' }
+            // { pattern: /^[0-9]\d{5}$/, message: '请输入正确的邮编', validateTrigger: 'blur' }
+          ]
+        },
+        paymentMethod: {
+          rules: [{
+            required: true, message: '请输入缴费方式!'
+          }]
+        },
+        paymentAmount: {
+          rules: [
+            {
+              required: true, message: '请输入缴费金额!'
+            },
+            {
+              pattern: /^[1-9](\d{1,10})?(\.\d{1,2})$|^0\.([1-9](\d{0,1})|\d[1-9])$|^[1-9]\d{0,10}$|^0$/,
+              message: '请输入合法的金额数字，最多2位小数,11位正数',
+              validateTrigger: 'blur'
+            }
+          ],
+          validateTrigger: 'blur'
+        },
+        submissionTime: {
+          rules: [{
+            required: true, message: '请输入缴费日期!'
+          }]
+        },
+        invoiceRequirements: {
+          rules: [{
+            required: true, message: '请选择是否需要发票!'
+          }]
+        },
+        headerName: {
+          rules: [
+            {
+              required: true, message: '请输入付款单位发票抬头!'
+            },
+            { min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
+          ],
+          validateTrigger: 'blur'
+        },
+        taxNumber: {
+          rules: [
+            { required: true, message: '请输入社会统一代码/税号!' },
+            { min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' },
+            {
+              // pattern: /^[A-Z0-9]{15}$|^[A-Z0-9]{17}$|^[A-Z0-9]{18}$|^[A-Z0-9]{20}$/,
+              pattern: /^([0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}|[1-9]\d{14})$/,
+              // message: '15位、17位、18位、20位数字和大写英文字母',
+              message: '请输入15位、18位的社会统一代码/税号',
+              validateTrigger: 'blur'
+            }
+          ],
+          validateTrigger: 'blur'
+        },
+        invoiceAddress: { rules: [{ required: true, message: '请输入单位地址' }], validateTrigger: 'blur' },
+        invoicePhone: {
+          rules: [
+            { required: true, message: '请输入电话号码' },
+            {
+              pattern: /^((13[0-9])|(14[579])|(15([0-3]|[5-9]))|(17[0135678])|(18[0-9])|(19[8|9])|(16[6]))\d{8}$|^([0-9]{3,4}-)[0-9]{7,8}$/,
+              message: '请输入正确格式的电话号码',
+              validateTrigger: 'blur'
+            }
+          ],
+          validateTrigger: 'blur'
+        },
+        depositBank: { rules: [{ required: true, message: '请输入开户银行' }], validateTrigger: 'blur' },
+        bankAccount: { rules: [{ required: true, message: '请输入银行账户' }], validateTrigger: 'blur' },
+        reasonsRenewal: {
+          rules: [{
+            required: true, message: '请至少选择一个换证原因!'
+          }]
+        },
+        sendMethod: { rules: [{ required: false, message: '请选择快递公司' }], validateTrigger: 'change' },
+        postNo: { rules: [{ required: false, message: '请输入邮寄单号' }], validateTrigger: 'blur' }
+      }
+    }
+  },
+  methods: {
+    edit(record) {
+      this.form.resetFields()
+      this.model = Object.assign({}, record)
+      this.newCertificate = Object.assign({}, record)
+      this.selectType = this.model.certificateType
+      this.visible = true
+      this.$nextTick(() => {
+        this.form.setFieldsValue(pick(this.model, 'noticeOfFiling', 'certificateImg', 'id', 'auditOpinion', 'address', 'postcode', 'certificateType', 'effectDate', 'invalidDate', 'reasonsRenewal', 'code'))
+      })
+    },
+    saveReplacementCertificate() {
+      const that = this
+      // 触发表单验证
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          that.confirmLoading = true
+          const httpurl = '/vinCertificate/vinCertificate/replacementCertificate'
+          const method = 'post'
+          // this.newCertificate
+          const formData = Object.assign(this.model, values)
+          // 处理状态为 未提交
+          formData.certificateStatus = 0
+          httpAction(httpurl, formData, method).then((res) => {
+            if (res.success) {
+              that.$message.success(res.message)
+              that.$emit('ok')
+              that.visible = false
+            } else {
+              that.$message.warning(res.message)
+            }
+          }).finally(() => {
+            that.confirmLoading = false
+          })
+        }
+      })
+    },
+    realSaveReplacementCertificate() {
+      const that = this
+      // 触发表单验证
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          that.confirmLoading = true
+          const httpurl = '/vinCertificate/vinCertificate/replacementCertificate'
+          const method = 'post'
+          // this.newCertificate
+          const formData = Object.assign(this.model, values)
+          // 处理状态为已处理
+          formData.certificateStatus = 3
+          httpAction(httpurl, formData, method).then((res) => {
+            if (res.success) {
+              that.$emit('ok')
+              that.visible = false
+              // 确认弹窗 显示
+              that.$emit('affirm')
+              // that.title = '提交成功'
+              // that.disableSubmit = true
+              // that.pageType = 14
+              // that.edit(that.record)
+            } else {
+              that.$message.warning(res.message)
+            }
+          }).finally(() => {
+            that.confirmLoading = false
+          })
+        }
+      })
+    },
+    handleCancel() {
+      this.visible = false
+    },
+    /*
+    * 证书下拉框改变
+    * */
+    vinOrWmi(val) {
+      this.selectType = Number(val)
+      this.form.resetFields('reasonsRenewal')
+    },
+    checkInvalidDate(rule, value, callback) {
+      if (value === undefined || value === '' || value == null) {
+        callback(new Error('请选择失效日期'))
+      }
+      console.log(value + ' :' + this.checkEffectDate)
+      var ck = this.checkEffectDate
+      if (!(ck === null || ck === undefined || ck === '')) {
+        if (value < this.checkEffectDate) {
+          callback(new Error('失效日期不能早于生效日期'))
+        }
+      }
+      callback()
+    }
+  },
+  computed: {
+    width() {
+      if (this.pageType === 14) {
+        return 400
+      }
+      if (this.pageType !== 4) {
+        return 1350
+      } else {
+        return 650
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.v-middle {
+  height: 100px;
+  text-align: center;
+  vertical-align: middle;
+
+  /deep/ .ant-form-item {
+    margin-bottom: 0px !important;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    color: rgba(0, 0, 0, 0.65);
+    font-size: 14px;
+    font-variant: tabular-nums;
+    line-height: 1.5;
+    list-style: none;
+    font-feature-settings: 'tnum';
+    vertical-align: middle;
+  }
+
+}
+
+.remark span {
+  display: inline-block;
+  font-size: 14px;
+  margin-left: 165px;
+  transform: translateY(-20px);
+}
+
+.vin-style {
+  display: inline-block;
+  max-width: 120px;
+  white-space: pre-wrap;
+  text-align: center;
+}
+
+.table {
+  width: 100%;
+  height: 180px;
+  text-align: center;
+  margin-bottom: 10px;
+  border-color: #ccc;
+  border-collapse: collapse;
+}
+
+// 证书状态颜色
+.certificate {
+  display: inline-block;
+  height: 24px;
+  font-size: 12px;
+  line-height: 24px;
+  padding: 0 7px;
+  border-radius: 3px;
+  color: #ddd;
+}
+
+.status-0 {
+  background: #c37e00;
+}
+
+.status-1 {
+  background: #40835e;
+}
+
+.status-2 {
+  background: #8a8c8e;
+}
+
+.transalte-y-10 {
+  transform: translateY(10px);
+}
+
+.apply-notice {
+  color: #f5222d;
+}
+
+.apply-code-notice {
+  color: #f5222d;
+  position: absolute;
+  bottom: 4px;
+  left: 25%
+}
+
+</style>
diff --git a/src/views/standardsAssociation/model/RenewChargeEditModel.vue b/src/views/standardsAssociation/model/RenewChargeEditModel.vue
new file mode 100644
index 0000000..7628e2d
--- /dev/null
+++ b/src/views/standardsAssociation/model/RenewChargeEditModel.vue
@@ -0,0 +1,699 @@
+<template>
+  <j-modal
+    :title="title"
+    :width="width"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    :maskClosable="false"
+    switchFullscreen
+    @cancel="handleCancel"
+    cancelText="关闭">
+    <template>
+      <a-spin :spinning="confirmLoading">
+        <a-form :form="form">
+          <a-divider orientation="left">
+            申请信息
+          </a-divider>
+          <a-row>
+            <a-col :span="12">
+              <a-form-item label="证书类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-search-select-tag
+                  disabled
+                  dict="certificate_type"
+                  v-model="model.certificateType"
+                  placeholder="请选择证书类型"/>
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label=" 证书代码" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input :maxLength="50" disabled v-model="model.code" placeholder="请输入证书代码"></a-input>
+              </a-form-item>
+              <span class="apply-code-notice">一次申请仅能输入一个证书代码</span>
+            </a-col>
+          </a-row>
+
+          <a-row>
+            <a-col :span="12">
+              <a-form-item label="通讯地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input
+                  :maxLength="50"
+                  disabled
+                  v-model="model.address"
+                  placeholder=""></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :span="12">
+              <a-form-item label="邮编" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input
+                  :maxLength="50"
+                  disabled
+                  v-model="model.postcode"
+                  placeholder=""></a-input>
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-divider orientation="left">
+            缴费信息
+          </a-divider>
+          <a-row>
+            <a-col :span="12">
+              <a-form-item label="单位全称" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input :maxLength="50" disabled v-model="model.companyName"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="联系人" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input :maxLength="50" disabled v-model="model.liaisonMan" placeholder="请输入联系人"></a-input>
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-row>
+            <a-col :span="12">
+              <a-form-item label="手机" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input :maxLength="50" disabled v-model="model.mobile" placeholder="请输入手机号"></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :span="12">
+              <a-form-item label="缴费方式" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-dict-select-tag
+                  type="list"
+                  v-model="memberInfoPayment.paymentMethod"
+                  v-decorator="['paymentMethod',validatorRules.paymentMethod]"
+                  @change="changePaymentMethod"
+                  :trigger-change="true"
+                  dictCode="payment_method"
+                  placeholder="请选择缴费方式"/>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row>
+            <a-col :span="12">
+              <a-form-item label="缴费金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input-number
+                  :maxLength="50"
+                  v-model="memberInfoPayment.paymentAmount"
+                  v-decorator="['paymentAmount',validatorRules.paymentAmount]"
+                  placeholder="请输入缴费金额"
+                  style="width: 100%"/>
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="缴费日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-date
+                  date-format="YYYY-MM-DD HH:mm:ss"
+                  placeholder="请选择缴费时间"
+                  v-model="memberInfoPayment.submissionTime"
+                  v-decorator="['submissionTime',validatorRules.submissionTime]"
+                  :trigger-change="true"
+                  style="width: 100%"/>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <div v-if="paymentMethodFlag">
+            <a-row>
+              <a-col :span="12" v-if="isWireTransfer == 2">
+                <a-form-item label="打包协议" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                  <j-upload
+                    file-type="pdf"
+                    file-type-error-message="请上传pdf文件"
+                    :multiple="false"
+                    :number="1"
+                    bizPath="payment"
+                    v-model="memberInfoPayment.paymentRecord"
+                    v-decorator="['paymentRecord',validatorRules.paymentRecord1]"
+                    :trigger-change="true"></j-upload>
+                  <span style="color: #bfbfbf">请上传pdf文件</span>
+                </a-form-item>
+              </a-col>
+            </a-row>
+          </div>
+
+          <div v-if="paymentMethodFlag == false">
+            <a-row>
+
+            </a-row>
+
+            <a-row>
+              <a-col :span="12">
+                <a-form-item label="缴费凭证" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                  <j-image-upload
+                    isLessThan5M
+                    isMultiple
+                    :number="2"
+                    bizPath="payment"
+                    v-decorator="['paymentRecord',validatorRules.paymentRecord]"
+                    v-model="memberInfoPayment.paymentRecord"></j-image-upload>
+                </a-form-item>
+              </a-col>
+              <a-col :span="12">
+                <a-form-item label="发票" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                  <j-dict-select-tag
+                    type="list"
+                    v-model="memberInfoPayment.invoiceRequirements"
+                    v-decorator="['invoiceRequirements',validatorRules.invoiceRequirements]"
+                    @change="invoiceRequirementsChange"
+                    :trigger-change="true"
+                    dictCode="invoice_requirements"
+                    placeholder="请选择发票"/>
+                </a-form-item>
+                <span v-if="!invoiceRequirementsFlag" class="apply-code-notice">本选项不提供任何形式的发票凭证</span>
+              </a-col>
+            </a-row>
+            <template v-if="invoiceRequirementsFlag">
+              <a-row>
+                <a-col :span="12">
+                  <a-form-item label="付款单位发票抬头" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                    <a-input
+                      :maxLength="50"
+                      v-decorator="['headerName',{ ...validatorRules.headerName,initialValue:currentMemberInfo.invoiceInfo}]"
+                      placeholder="请输入付款单位发票抬头"></a-input>
+                  </a-form-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-item label="社会统一代码/税号" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                    <a-input
+                      :maxLength="50"
+                      v-decorator="['taxNumber',{ ...validatorRules.taxNumber,initialValue: currentMemberInfo.taxNo}]"
+                      placeholder="请输入社会统一代码/税号"></a-input>
+                  </a-form-item>
+                </a-col>
+              </a-row>
+
+              <!-- 2021-09-23变更 增加 单位地址 电话号码  开户银行 银行账户 增值税发票的时候存在-->
+              <a-row v-if="currentSelectInvoiceType === 2">
+                <a-col :span="12">
+                  <a-form-item label="单位地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                    <a-input
+                      @change="event => event.target.value = event.target.value.trim()"
+                      v-decorator="['invoiceAddress',{ ...validatorRules.invoiceAddress, initialValue:currentMemberInfo.invoiceAddress}]"
+                      placeholder="请输入单位地址"
+                      :maxLength="50"></a-input>
+                  </a-form-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-item label="电话号码" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                    <a-input
+                      v-decorator="['invoicePhone',{ ...validatorRules.invoiceAddress, initialValue: currentMemberInfo.invoicePhone}]"
+                      :trigger-change="true"
+                      @change="(e) => {e.target.value = e.target.value.replace(/[^0-9|-]/g,'')}"
+                      placeholder="请输入电话号码"
+                      :maxLength="50"></a-input>
+                  </a-form-item>
+                </a-col>
+              </a-row>
+              <a-row v-if="currentSelectInvoiceType === 2">
+                <a-col :span="12">
+                  <a-form-item label="开户银行" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                    <a-input
+                      @change="event => event.target.value = event.target.value.trim()"
+                      v-decorator="['depositBank',{ ...validatorRules.depositBank, initialValue:currentMemberInfo.depositBank}]"
+                      placeholder="请输入开户银行"
+                      :maxLength="50"></a-input>
+                  </a-form-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-item label="银行账户" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                    <a-input
+                      @change="(e) => {e.target.value = e.target.value.trim()}"
+                      v-decorator="['bankAccount',{ ...validatorRules.bankAccount, initialValue:currentMemberInfo.bankAccount}]"
+                      placeholder="请输入银行账户"
+                      :maxLength="50"></a-input>
+                  </a-form-item>
+                </a-col>
+              </a-row>
+            </template>
+          </div>
+
+          <!--            缴费备注-->
+          <a-row>
+            <a-col :span="24" class="remark">
+              <a-form-item label="备注" :labelCol="labelColText" :wrapperCol="wrapperCol">
+                <a-textarea rows="5" v-decorator="['paymentMark' ]" placeholder="请输入备注" :maxLength="500"></a-textarea>
+              </a-form-item>
+              <span style="color: #bfbfbf">一个缴费单可在多个缴费处上传</span>
+            </a-col>
+          </a-row>
+          <a-row>
+            <!--              企业证书换证原因-->
+            <a-col :span="12" v-if="selectType == '2' ">
+              <!--                 :options="dictOptionsForCorporation"-->
+              <a-form-item label="换证原因" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-multi-select-tag
+                  placeholder="请选择换证原因"
+                  v-decorator="['reasonsRenewal']"
+                  dict-code="certificate_type_ec"
+
+                >
+                </j-multi-select-tag>
+              </a-form-item>
+            </a-col>
+            <!--            世界制造厂证书换证原因-->
+            <a-col :span="12" v-if="selectType == 1 ">
+              <!--                 :options="dictOptionsForCorporation"-->
+              <a-form-item label="换证原因" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-multi-select-tag
+                  placeholder="请选择换证原因"
+                  v-decorator="['reasonsRenewal']"
+                  dict-code="certificate_type_wmi"
+                >
+                </j-multi-select-tag>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <!--            换证备注-->
+          <a-row>
+            <a-col :span="24">
+              <a-form-item label="备注" :labelCol="labelColText" :wrapperCol="wrapperCol">
+                <a-textarea
+                  rows="5"
+                  v-decorator="['replacementRemark']"
+                  placeholder="请输入备注"
+                  :maxLength="500"></a-textarea>
+              </a-form-item>
+              <a-col :span="2"></a-col>
+            </a-col>
+          </a-row>
+        </a-form>
+      </a-spin>
+    </template>
+    <template slot="footer">
+      <a-button @click="handleCancel">关闭</a-button>
+      <a-button @click="saveRenewChargeCertificate" type="primary">暂存</a-button>
+      <a-button @click="realSaveRenewChargeCertificate" type="primary">提交</a-button>
+    </template>
+  </j-modal>
+</template>
+
+<script>
+import JMultiSelectTag from '@comp/standardsAssociation/JMultiSelectTag'
+import JImageUpload from '@comp/standardsAssociation/JImageUpload'
+import JUpload from '@comp/standardsAssociation/JUpload'
+import JDate from '@comp/tools/JDate'
+import JSearchSelectTag from '@comp/standardsAssociation/JSearchSelectTag'
+import { getAction, httpAction } from '@api/memberManage'
+import pick from 'lodash.pick'
+export default {
+  // 证书续费编辑 窗口
+  name: 'RenewChargeEditModel',
+  components: {
+    JMultiSelectTag,
+    JImageUpload,
+    JUpload,
+    JDate,
+    JSearchSelectTag
+  },
+  data() {
+    return {
+      title: '续费',
+      loginUserId: this.$store.getters.userInfo.memberId,
+      visible: false,
+      confirmLoading: false,
+      pageType: 12,
+      form: this.$form.createForm(this),
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 6 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 }
+      },
+      labelColText: {
+        xs: { span: 24 },
+        sm: { span: 3 }
+      },
+      // 会员缴费信息
+      memberInfoPayment: {},
+      // 当前登录用户的会员信息
+      currentMemberInfo: {},
+      model: {},
+      // 记录续费证书选择
+      selectType: 1,
+      invoiceRequirementsFlag: false,
+      // 当前选择是否需要发票的值，用于dom的判断 0-无 1-普通发票 2-增值税发票
+      currentSelectInvoiceType: 0,
+      validatorRules: {
+        defaultRules: {
+          rules: [{ required: true, message: '请选择' },
+            { min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
+          ]
+        },
+        unBindId: {
+          rules: [{ required: true, message: '请选择要解绑的证书' }
+          ]
+        },
+        companyName: {
+          rules: [
+            { required: true, message: '请输入单位全称!' },
+            { min: 1, max: 50, message: '单位全称长度不超过50个字符', validateTrigger: 'blur' }
+          ]
+        },
+        mobile: {
+          rules: [
+            { required: true, message: '请输入手机!' },
+            { min: 1, max: 50, message: '手机号码不超过50个字符' },
+            { pattern: /^1[345678]\d{9}$/, message: '请输入正确的手机号', validateTrigger: 'blur' }
+          ]
+        },
+        code: {
+          rules: [
+            { required: true, message: '请输入证书代码!' },
+            { min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
+          ]
+        },
+        certificateImg: {
+          rules: [
+            { required: true, message: '请上传证书文件!' }
+          ],
+          validateTrigger: 'change'
+        },
+        clientCode: {
+          rules: [
+            { min: 0, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
+          ]
+        },
+        effectDate: {
+          rules: [{
+            required: true, message: '请选择生效日期'
+          }]
+        },
+        certificateType: {
+          rules: [{
+            required: true, message: '请输入证书类型!'
+          }]
+        },
+        address: {
+          rules: [
+            { required: true, message: '请输入通讯地址!' },
+            { min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
+          ]
+        },
+        postcode: {
+          rules: [
+            {
+              required: true, message: '请输入邮编!'
+            },
+            { min: 1, max: 50, message: '长度不超过50个字符' }
+            // { pattern: /^[0-9]\d{5}$/, message: '请输入正确的邮编', validateTrigger: 'blur' }
+          ]
+        },
+        paymentMethod: {
+          rules: [{
+            required: true, message: '请输入缴费方式!'
+          }]
+        },
+        paymentAmount: {
+          rules: [
+            {
+              required: true, message: '请输入缴费金额!'
+            },
+            {
+              pattern: /^[1-9](\d{1,10})?(\.\d{1,2})$|^0\.([1-9](\d{0,1})|\d[1-9])$|^[1-9]\d{0,10}$|^0$/,
+              message: '请输入合法的金额数字，最多2位小数,11位正数',
+              validateTrigger: 'blur'
+            }
+          ],
+          validateTrigger: 'blur'
+        },
+        submissionTime: {
+          rules: [{
+            required: true, message: '请输入缴费日期!'
+          }]
+        },
+        paymentRecord: {
+          rules: [{
+            required: true, message: '请上传缴费凭证!'
+          }]
+        },
+        paymentRecord1: { rules: [{ required: true, message: '请上传打包协议' }] },
+        liaisonMan: {
+          rules: [
+            { required: true, message: '请输入联系人!' },
+            { min: 1, max: 50, message: '联系人不超过50个字符', validateTrigger: 'blur' }
+          ]
+        },
+        invoiceRequirements: {
+          rules: [{
+            required: true, message: '请选择是否需要发票!'
+          }]
+        },
+        headerName: {
+          rules: [
+            {
+              required: true, message: '请输入付款单位发票抬头!'
+            },
+            { min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
+          ],
+          validateTrigger: 'blur'
+        },
+        taxNumber: {
+          rules: [
+            { required: true, message: '请输入社会统一代码/税号!' },
+            { min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' },
+            {
+              // pattern: /^[A-Z0-9]{15}$|^[A-Z0-9]{17}$|^[A-Z0-9]{18}$|^[A-Z0-9]{20}$/,
+              pattern: /^([0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}|[1-9]\d{14})$/,
+              // message: '15位、17位、18位、20位数字和大写英文字母',
+              message: '请输入15位、18位的社会统一代码/税号',
+              validateTrigger: 'blur'
+            }
+          ],
+          validateTrigger: 'blur'
+        },
+        invoiceAddress: { rules: [{ required: true, message: '请输入单位地址' }], validateTrigger: 'blur' },
+        invoicePhone: {
+          rules: [
+            { required: true, message: '请输入电话号码' },
+            {
+              pattern: /^((13[0-9])|(14[579])|(15([0-3]|[5-9]))|(17[0135678])|(18[0-9])|(19[8|9])|(16[6]))\d{8}$|^([0-9]{3,4}-)[0-9]{7,8}$/,
+              message: '请输入正确格式的电话号码',
+              validateTrigger: 'blur'
+            }
+          ],
+          validateTrigger: 'blur'
+        },
+        depositBank: { rules: [{ required: true, message: '请输入开户银行' }], validateTrigger: 'blur' },
+        bankAccount: { rules: [{ required: true, message: '请输入银行账户' }], validateTrigger: 'blur' },
+        reasonsRenewal: {
+          rules: [{
+            required: true, message: '请至少选择一个换证原因!'
+          }]
+        },
+        sendMethod: { rules: [{ required: false, message: '请选择快递公司' }], validateTrigger: 'change' },
+        postNo: { rules: [{ required: false, message: '请输入邮寄单号' }], validateTrigger: 'blur' }
+      },
+      // 缴费方式标志
+      paymentMethodFlag: false, // 发票选择
+      // 免费证书对象
+      freeCertificate: {},
+      // 续费会员信pageType息
+      renewMemberInfo: {},
+      // 是否是电汇
+      isWireTransfer: '1'
+    }
+  },
+  methods: {
+    // 续费编辑方法
+    edit(record) {
+      // 获取证书类型
+      this.selectType = record.certificateType
+      // 数据准备
+      this.currentMemberInfo = {}
+      getAction('/memberInfo/memberInfo/getCurrentMemberInfo').then((res) => {
+        if (res.success) {
+          this.currentMemberInfo = res.result || {}
+        }
+      })
+      // 在核对证书的时候，需要设置生效日期的初始值
+      this.checkEffectDate = record.effectDate
+      this.form.resetFields()
+      this.model = Object.assign({}, record)
+      // this.freeCertificate = Object.assign({}, record)
+      // this.renewMemberInfo = Object.assign({}, record)
+      this.visible = true
+      this.$nextTick(() => {
+        this.form.setFieldsValue(pick(this.model, 'paymentRecord', 'paymentMark', 'id', 'address', 'postcode', 'mobile', 'liaisonMan', 'companyName', 'certificateType', 'effectDate', 'reasonsRenewal', 'certificateStatus', 'code'))
+      })
+
+      // 查询证书最新的缴费信息
+      // 获取驳回的缴费信息
+      this.memberInfoPayment = {}
+      // 查询对应证书的缴费信息
+      const params = 'certificateId=' + record.id
+      getAction('/certificatePaymentInfo/getLastCertificatePayment?' + params).then((res) => {
+        if (res.success) {
+          this.memberInfoPayment = res.result
+          // 获取缴费方式
+          this.isWireTransfer = res.result.paymentMethod + ''
+          if (this.memberInfoPayment.paymentMethod === 1) {
+            this.paymentMethodFlag = false
+          } else {
+            this.paymentMethodFlag = true
+          }
+          this.$nextTick(() => {
+            this.form.setFieldsValue(pick(this.memberInfoPayment, 'submissionTime', 'paymentMark', 'replacementRemark', 'paymentAmount', 'certificateType', 'headerName', 'invoiceRequirements', 'paymentMethod', 'taxNumber', 'invoiceAddress', 'invoicePhone', 'depositBank', 'bankAccount', 'paymentRecord', 'id', 'address', 'postcode', 'mobile', 'liaisonMan', 'companyName', 'effectDate', 'reasonsRenewal', 'certificateStatus', 'code'))
+          })
+        } else {
+          console.log(res.message)
+        }
+      })
+    },
+
+    saveRenewChargeCertificate() {
+      this.editHandleRenewChargeCertificateOk()
+    },
+    // 添加 证书续费信息
+    editHandleRenewChargeCertificateOk: function() {
+      const that = this
+      // 触发表单验证
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          that.confirmLoading = true
+          const httpurl = '/certificatePaymentInfo/addVinChargeInfo'
+          const method = 'post'
+          let formData = Object.assign(this.memberInfoPayment, values)
+
+          // 证书续费信息添加
+          formData.companyName = this.model.companyName
+          // 续费
+          formData.paymentType = 1
+          // 证书ID
+          formData.certificateId = this.model.id
+          // 缴费时长 默认为 5年
+          formData.paymentTime = 5
+
+          // 添加权限控制
+          formData.memberId = this.loginUserId
+          // 设置证书状态为 未提交
+          formData.certificateStatus = 0
+
+          formData = Object.assign(formData, pick(this.model, 'address', 'postcode', 'companyName'))
+
+          httpAction(httpurl, formData, method).then((res) => {
+            if (res.success) {
+              // 修改证书的状态，和证书的类型
+              const chargeUrl = '/vinCertificate/vinCertificate/renewChargeCertificate'
+              const chargeMethod = 'post'
+              const chargeFormData = Object.assign(this.model, values)
+              chargeFormData.certificateStatus = 0
+
+              httpAction(chargeUrl, chargeFormData, chargeMethod).then((res) => {
+                if (res.success) {
+                  that.$message.success(res.message)
+                  that.$emit('ok')
+                  that.visible = false
+                }
+              })
+            } else {
+              that.$message.warning(res.message)
+            }
+          }).finally(() => {
+            that.confirmLoading = false
+          })
+        }
+      })
+    },
+    realSaveRenewChargeCertificate() {
+      this.realSaveHandleRenewChargeCertificateOk()
+    },
+
+    // 添加 证书续费信息
+    realSaveHandleRenewChargeCertificateOk: function() {
+      const that = this
+      // 触发表单验证
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          that.confirmLoading = true
+          const httpurl = '/certificatePaymentInfo/addVinChargeInfo'
+          const method = 'post'
+          let formData = Object.assign(this.memberInfoPayment, values)
+
+          // 证书续费信息添加
+          formData.companyName = this.model.companyName
+          // 续费
+          formData.paymentType = 1
+          // 证书ID
+          formData.certificateId = this.model.id
+          // 缴费时长 默认为 5年
+          formData.paymentTime = 5
+
+          // 缴费状态为 未提交状态
+          formData.paymentStatus = 1
+
+          // 添加权限控制
+          formData.memberId = this.loginUserId
+
+          formData = Object.assign(formData, pick(this.model, 'address', 'postcode', 'companyName'))
+
+          httpAction(httpurl, formData, method).then((res) => {
+            if (res.success) {
+              // 修改证书的状态，和证书的类型
+              const chargeUrl = '/vinCertificate/vinCertificate/renewChargeCertificate'
+              const chargeMethod = 'post'
+              const chargeFormData = Object.assign(this.model, values)
+
+              // 设置证书的状态为已提交
+              chargeFormData.certificateStatus = 2
+
+              httpAction(chargeUrl, chargeFormData, chargeMethod).then((res) => {
+                if (res.success) {
+                  that.$message.success(res.message)
+                  that.$emit('ok')
+                  that.visible = false
+                }
+              })
+            } else {
+              that.$message.warning(res.message)
+            }
+          }).finally(() => {
+            that.confirmLoading = false
+          })
+        }
+      })
+    },
+    /* 缴费方式*/
+    changePaymentMethod(value) {
+      // 1 是电汇 2 打包 3 是现金
+      this.isWireTransfer = value
+      this.form.resetFields(['paymentType', 'paymentAmount', 'paymentTime', 'submissionTime', 'paymentRecord'])
+      if (value !== '1') {
+        this.paymentMethodFlag = true
+      } else {
+        this.paymentMethodFlag = false
+      }
+    },
+    // 校验是否选择 要发票
+    invoiceRequirementsChange(value) {
+      this.currentSelectInvoiceType = Number(value)
+      if (this.currentSelectInvoiceType !== 0) {
+        this.invoiceRequirementsFlag = true
+      } else {
+        this.invoiceRequirementsFlag = false
+      }
+    },
+    handleCancel() {
+      this.visible = false
+    }
+  },
+  computed: {
+    width() {
+      if (this.pageType === 14) {
+        return 400
+      }
+      if (this.pageType !== 4) {
+        return 1350
+      } else {
+        return 650
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/standardsAssociation/model/RenewChargeModel.vue b/src/views/standardsAssociation/model/RenewChargeModel.vue
new file mode 100644
index 0000000..21f9e75
--- /dev/null
+++ b/src/views/standardsAssociation/model/RenewChargeModel.vue
@@ -0,0 +1,792 @@
+<template>
+  <j-modal
+    :title="title"
+    :width="width"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    :maskClosable="false"
+    switchFullscreen
+    @cancel="handleCancel"
+    cancelText="关闭">
+    <template>
+      <a-spin :spinning="confirmLoading">
+        <a-form :form="form">
+          <a-divider orientation="left">
+            申请信息
+          </a-divider>
+          <a-row>
+            <a-col :span="12">
+              <a-form-item label="证书类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-search-select-tag
+                  dict="certificate_type"
+                  v-model="freeCertificate.certificateType"
+                  placeholder="请选择证书类型"
+                  @change="selectcertificateType"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label=" 证书代码" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input
+                  :maxLength="50"
+                  :disabled="selectTypeDisabled"
+                  v-model="freeCertificate.code"
+                  placeholder="请输入证书代码"></a-input>
+              </a-form-item>
+              <span class="apply-code-notice">一次申请仅能输入一个证书代码</span>
+            </a-col>
+          </a-row>
+
+          <a-row>
+            <a-col :span="12">
+              <a-form-item label="通讯地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input
+                  :maxLength="50"
+                  :disabled="selectTypeDisabled"
+                  v-model="renewMemberInfo.address"
+                  placeholder=""></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :span="12">
+              <a-form-item label="邮编" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input
+                  :maxLength="50"
+                  :disabled="selectTypeDisabled"
+                  v-model="renewMemberInfo.postcode"
+                  placeholder=""></a-input>
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-divider orientation="left">
+            缴费信息
+          </a-divider>
+          <a-row>
+            <a-col :span="12">
+              <a-form-item label="单位全称" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input :maxLength="50" disabled v-model="renewMemberInfo.companyName"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="联系人" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input
+                  :maxLength="50"
+                  :disabled="selectTypeDisabled"
+                  v-model="renewMemberInfo.liaisonMan"
+                  placeholder="请输入联系人"></a-input>
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-row>
+            <a-col :span="12">
+              <a-form-item label="手机" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input
+                  :maxLength="50"
+                  :disabled="selectTypeDisabled"
+                  v-model="renewMemberInfo.mobile"
+                  placeholder="请输入手机号"
+                ></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :span="12">
+              <a-form-item label="缴费方式" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-dict-select-tag
+                  type="list"
+                  v-decorator="['paymentMethod',validatorRules.paymentMethod]"
+                  @change="changePaymentMethod"
+                  :trigger-change="true"
+                  dictCode="payment_method"
+                  placeholder="请选择缴费方式"/>
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-row>
+            <a-col :span="12">
+              <a-form-item label="缴费金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input-number
+                  :maxLength="50"
+                  v-decorator="['paymentAmount',validatorRules.paymentAmount]"
+                  placeholder="请输入缴费金额"
+                  style="width:100%"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="缴费日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-date
+                  date-format="YYYY-MM-DD HH:mm:ss"
+                  placeholder="请选择缴费时间"
+                  v-decorator="['submissionTime',validatorRules.submissionTime]"
+                  :trigger-change="true"
+                  style="width: 100%"/>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <!--            打包会员显示-->
+          <div v-if="isWireTransfer ==='2' ">
+            <a-row>
+              <a-col :span="12">
+                <a-form-item label="打包协议" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                  <j-upload
+                    file-type="pdf"
+                    file-type-error-message="请上传pdf文件"
+                    :multiple="false"
+                    :number="1"
+                    bizPath="payment"
+                    v-decorator="['paymentRecord',validatorRules.paymentRecord1]"
+                    :trigger-change="true"></j-upload>
+                  <span style="color: #bfbfbf">请上传pdf文件</span>
+                </a-form-item>
+              </a-col>
+            </a-row>
+          </div>
+
+          <a-row v-if="isWireTransfer != '2'">
+            <a-col :span="12">
+              <a-form-item label="发票" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-dict-select-tag
+                  type="list"
+                  v-decorator="['invoiceRequirements',validatorRules.invoiceRequirements]"
+                  @change="invoiceRequirementsChange"
+                  :trigger-change="true"
+                  dictCode="invoice_requirements"
+                  placeholder="请选择发票"/>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <!--只有电汇才会上传缴费凭证-->
+          <a-row v-if="isWireTransfer ==='1' ">
+            <a-col :span="12">
+              <a-form-item label="缴费凭证" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-image-upload
+                  isLessThan5M
+                  isMultiple
+                  :number="2"
+                  bizPath="payment"
+                  v-decorator="['paymentRecord',validatorRules.paymentRecord]"
+                  ></j-image-upload>
+              </a-form-item>
+            </a-col>
+
+          </a-row>
+          <!--              是否需要发票-->
+          <template v-if="invoiceRequirementsFlag">
+            <a-row>
+              <a-col :span="12">
+                <a-form-item label="付款单位发票抬头" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                  <a-input
+                    :maxLength="50"
+                    v-decorator="['headerName',{ ...validatorRules.headerName,initialValue:currentMemberInfo.invoiceInfo}]"
+                    placeholder="请输入付款单位发票抬头"></a-input>
+                </a-form-item>
+              </a-col>
+              <a-col :span="12">
+                <a-form-item label="社会统一代码/税号" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                  <a-input
+                    :maxLength="50"
+                    v-decorator="['taxNumber',{ ...validatorRules.taxNumber,initialValue: currentMemberInfo.taxNo}]"
+                    placeholder="请输入社会统一代码/税号"></a-input>
+                </a-form-item>
+              </a-col>
+            </a-row>
+            <!-- 2021-09-23变更 增加 单位地址 电话号码  开户银行 银行账户 增值税发票的时候存在-->
+            <a-row v-if="currentSelectInvoiceType === 2">
+              <a-col :span="12">
+                <a-form-item label="单位地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                  <a-input
+                    @change="event => event.target.value = event.target.value.trim()"
+                    v-decorator="['invoiceAddress',{ ...validatorRules.invoiceAddress, initialValue:currentMemberInfo.invoiceAddress}]"
+                    placeholder="请输入单位地址"
+                    :maxLength="50"></a-input>
+                </a-form-item>
+              </a-col>
+              <a-col :span="12">
+                <a-form-item label="电话号码" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                  <a-input
+                    v-decorator="['invoicePhone',{ ...validatorRules.invoiceAddress, initialValue: currentMemberInfo.invoicePhone}]"
+                    :trigger-change="true"
+                    @change="(e) => {e.target.value = e.target.value.replace(/[^0-9|-]/g,'')}"
+                    placeholder="请输入电话号码"
+                    :maxLength="50"></a-input>
+                </a-form-item>
+              </a-col>
+            </a-row>
+            <a-row v-if="currentSelectInvoiceType === 2">
+              <a-col :span="12">
+                <a-form-item label="开户银行" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                  <a-input
+                    @change="event => event.target.value = event.target.value.trim()"
+                    v-decorator="['depositBank',{ ...validatorRules.depositBank, initialValue:currentMemberInfo.depositBank}]"
+                    placeholder="请输入开户银行"
+                    :maxLength="50"></a-input>
+                </a-form-item>
+              </a-col>
+              <a-col :span="12">
+                <a-form-item label="银行账户" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                  <a-input
+                    @change="(e) => {e.target.value = e.target.value.trim()}"
+                    v-decorator="['bankAccount',{ ...validatorRules.bankAccount, initialValue:currentMemberInfo.bankAccount}]"
+                    placeholder="请输入银行账户"
+                    :maxLength="50"></a-input>
+                </a-form-item>
+              </a-col>
+            </a-row>
+          </template>
+
+          <!--            缴费备注-->
+          <a-row>
+            <a-col :span="24" class="remark">
+              <a-form-item label="备注" :labelCol="labelColText" :wrapperCol="wrapperCol">
+                <a-textarea rows="5" v-decorator="['paymentMark' ]" placeholder="请输入备注" :maxLength="500"></a-textarea>
+              </a-form-item>
+              <span style="color: #bfbfbf">一个缴费单可在多个缴费处上传</span>
+            </a-col>
+          </a-row>
+          <a-row>
+            <!--              企业证书换证原因-->
+            <a-col :span="12" v-if="selectType == '2' ">
+              <!--                 :options="dictOptionsForCorporation"-->
+              <a-form-item label="换证原因" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-multi-select-tag
+                  placeholder="请选择换证原因"
+                  v-decorator="['reasonsRenewal']"
+                  dict-code="certificate_type_ec"
+
+                >
+                </j-multi-select-tag>
+              </a-form-item>
+            </a-col>
+            <!--            世界制造厂证书换证原因-->
+            <a-col :span="12" v-if="selectType == 1 ">
+              <!--                 :options="dictOptionsForCorporation"-->
+              <a-form-item label="换证原因" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-multi-select-tag
+                  placeholder="请选择换证原因"
+                  v-decorator="['reasonsRenewal']"
+                  dict-code="certificate_type_wmi"
+                >
+                </j-multi-select-tag>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <!--            换证备注-->
+          <a-row>
+            <a-col :span="24">
+              <a-form-item label="备注" :labelCol="labelColText" :wrapperCol="wrapperCol">
+                <a-textarea
+                  rows="5"
+                  v-decorator="['replacementRemark']"
+                  placeholder="请输入备注"
+                  :maxLength="500"></a-textarea>
+              </a-form-item>
+              <a-col :span="2"></a-col>
+            </a-col>
+          </a-row>
+        </a-form>
+      </a-spin>
+    </template>
+    <template slot="footer">
+      <a-button @click="handleCancel">关闭</a-button>
+      <a-button @click="preSaveRenewChargeCertificate" type="primary">暂存</a-button>
+      <a-button @click="renewChargeCertificate" type="primary">提交</a-button>
+    </template>
+  </j-modal>
+</template>
+
+<script>
+import JSearchSelectTag from '@comp/standardsAssociation/JSearchSelectTag'
+import JMultiSelectTag from '@comp/standardsAssociation/JMultiSelectTag'
+import JImageUpload from '@comp/standardsAssociation/JImageUpload'
+import JUpload from '@comp/standardsAssociation/JUpload'
+import JDate from '@comp/tools/JDate'
+import { getAction, httpAction } from '@api/memberManage'
+import pick from 'lodash.pick'
+export default {
+  // 证书续费 窗口
+  name: 'RenewChargeModel',
+  components: {
+    JSearchSelectTag,
+    JMultiSelectTag,
+    JImageUpload,
+    JUpload,
+    JDate
+  },
+  data() {
+    return {
+      // 是否是电汇
+      isWireTransfer: '1',
+      loginUserId: this.$store.getters.userInfo.memberId,
+      title: '续费',
+      visible: false,
+      confirmLoading: false,
+      pageType: 7,
+      // 记录续费证书选择
+      selectType: 1,
+      currentSelectInvoiceType: 0,
+      invoiceRequirementsFlag: false,
+      form: this.$form.createForm(this),
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 6 }
+      },
+      labelColText: {
+        xs: { span: 24 },
+        sm: { span: 3 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 }
+      },
+      model: {},
+      // 免费证书对象
+      freeCertificate: {},
+      validatorRules: {
+        defaultRules: {
+          rules: [{ required: true, message: '请选择' },
+            { min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
+          ]
+        },
+        unBindId: {
+          rules: [{ required: true, message: '请选择要解绑的证书' }
+          ]
+        },
+        companyName: {
+          rules: [
+            { required: true, message: '请输入单位全称!' },
+            { min: 1, max: 50, message: '单位全称长度不超过50个字符', validateTrigger: 'blur' }
+          ]
+        },
+        mobile: {
+          rules: [
+            { required: true, message: '请输入手机!' },
+            { min: 1, max: 50, message: '手机号码不超过50个字符' },
+            { pattern: /^1[345678]\d{9}$/, message: '请输入正确的手机号', validateTrigger: 'blur' }
+          ]
+        },
+        code: {
+          rules: [
+            { required: true, message: '请输入证书代码!' },
+            { min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
+          ]
+        },
+        certificateImg: {
+          rules: [
+            { required: true, message: '请上传证书文件!' }
+          ],
+          validateTrigger: 'change'
+        },
+        clientCode: {
+          rules: [
+            { min: 0, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
+          ]
+        },
+        auditOpinion: {
+          rules: [
+            { min: 0, max: 500, message: '处理结果备注最多500个字符', validateTrigger: 'blur' }
+          ]
+        },
+        effectDate: {
+          rules: [{
+            required: true, message: '请选择生效日期'
+          }]
+        },
+        invalidDate: { rules: [{ required: true, validator: this.checkInvalidDate }] },
+        certificateType: {
+          rules: [{
+            required: true, message: '请输入证书类型!'
+          }]
+        },
+        address: {
+          rules: [
+            { required: true, message: '请输入通讯地址!' },
+            { min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
+          ]
+        },
+        postcode: {
+          rules: [
+            {
+              required: true, message: '请输入邮编!'
+            },
+            { min: 1, max: 50, message: '长度不超过50个字符' },
+            // { pattern: /^[0-9]\d{5}$/, message: '请输入正确的邮编', validateTrigger: 'blur' }
+          ]
+        },
+        paymentMethod: {
+          rules: [{
+            required: true, message: '请输入缴费方式!'
+          }]
+        },
+        paymentAmount: {
+          rules: [
+            {
+              required: true, message: '请输入缴费金额!'
+            },
+            {
+              pattern: /^[1-9](\d{1,10})?(\.\d{1,2})$|^0\.([1-9](\d{0,1})|\d[1-9])$|^[1-9]\d{0,10}$|^0$/,
+              message: '请输入合法的金额数字，最多2位小数,11位正数',
+              validateTrigger: 'blur'
+            }
+          ],
+          validateTrigger: 'blur'
+        },
+        submissionTime: {
+          rules: [{
+            required: true, message: '请输入缴费日期!'
+          }]
+        },
+        paymentRecord: {
+          rules: [{
+            required: true, message: '请上传缴费凭证!'
+          }]
+        },
+        paymentRecord1: { rules: [{ required: true, message: '请上传打包协议' }] },
+        liaisonMan: {
+          rules: [
+            { required: true, message: '请输入联系人!' },
+            { min: 1, max: 50, message: '联系人不超过50个字符', validateTrigger: 'blur' }
+          ]
+        },
+        invoiceRequirements: {
+          rules: [{
+            required: true, message: '请选择是否需要发票!'
+          }]
+        },
+        headerName: {
+          rules: [
+            {
+              required: true, message: '请输入付款单位发票抬头!'
+            },
+            { min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
+          ],
+          validateTrigger: 'blur'
+        },
+        taxNumber: {
+          rules: [
+            { required: true, message: '请输入社会统一代码/税号!' },
+            { min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' },
+            {
+              // pattern: /^[A-Z0-9]{15}$|^[A-Z0-9]{17}$|^[A-Z0-9]{18}$|^[A-Z0-9]{20}$/,
+              pattern: /^([0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}|[1-9]\d{14})$/,
+              // message: '15位、17位、18位、20位数字和大写英文字母',
+              message: '请输入15位、18位的社会统一代码/税号',
+              validateTrigger: 'blur'
+            }
+          ],
+          validateTrigger: 'blur'
+        },
+        invoiceAddress: { rules: [{ required: true, message: '请输入单位地址' }], validateTrigger: 'blur' },
+        invoicePhone: {
+          rules: [
+            { required: true, message: '请输入电话号码' },
+            {
+              pattern: /^((13[0-9])|(14[579])|(15([0-3]|[5-9]))|(17[0135678])|(18[0-9])|(19[8|9])|(16[6]))\d{8}$|^([0-9]{3,4}-)[0-9]{7,8}$/,
+              message: '请输入正确格式的电话号码',
+              validateTrigger: 'blur'
+            }
+          ],
+          validateTrigger: 'blur'
+        },
+        depositBank: { rules: [{ required: true, message: '请输入开户银行' }], validateTrigger: 'blur' },
+        bankAccount: { rules: [{ required: true, message: '请输入银行账户' }], validateTrigger: 'blur' },
+        reasonsRenewal: {
+          rules: [{
+            required: true, message: '请至少选择一个换证原因!'
+          }]
+        },
+        sendMethod: { rules: [{ required: false, message: '请选择快递公司' }], validateTrigger: 'change' },
+        postNo: { rules: [{ required: false, message: '请输入邮寄单号' }], validateTrigger: 'blur' }
+      },
+      // 当前登录用户的会员信息
+      currentMemberInfo: {},
+      // 会员缴费信息
+      memberInfoPayment: {},
+      // 续费换证选择证书的flagcheckInvalidDatecheckInvalidDate
+      selectTypeDisabled: true,
+      // 续费会员信pageType息
+      renewMemberInfo: {},
+    }
+  },
+  methods: {
+    // 证书续费的编辑窗口
+    edit(record) {
+      // 是否要发票设置为false;
+      this.invoiceRequirementsFlag = false
+      // 打包会员设置为false
+      this.paymentMethodFlag = false
+      // 获取证书类型
+      this.selectType = record.certificateType
+      // 数据准备
+      this.currentMemberInfo = {}
+      getAction('/memberInfo/memberInfo/getCurrentMemberInfo').then((res) => {
+        if (res.success) {
+          this.currentMemberInfo = res.result || {}
+        }
+      })
+      this.form.resetFields()
+      this.freeCertificate = Object.assign({}, record)
+      this.renewMemberInfo = Object.assign({}, record)
+      this.model = {}
+      this.model = Object.assign({}, record)
+      this.visible = true
+      // 是否要发票设置为false;
+      this.invoiceRequirementsFlag = false
+      // 在核对证书的时候，需要设置生效日期的初始值
+      this.checkEffectDate = record.effectDate
+      this.$nextTick(() => {
+        this.form.setFieldsValue(pick(this.model, 'paymentRecord', 'id', 'auditOpinion', 'address', 'postcode', 'mobile', 'liaisonMan', 'certificateValidDate', 'companyName', 'certificationDate', 'certificateType', 'applyDate', 'effectDate', 'invalidDate', 'certificateStatus', 'memberId', 'code', 'chargeType'))
+      })
+    },
+    // 校验是否选择 要发票
+    invoiceRequirementsChange(value) {
+      this.currentSelectInvoiceType = Number(value)
+      if (this.currentSelectInvoiceType !== 0) {
+        this.invoiceRequirementsFlag = true
+      } else {
+        this.invoiceRequirementsFlag = false
+      }
+    },
+    /* 缴费方式*/
+    changePaymentMethod(value) {
+      // 1 是电汇 2 打包 3 是现金
+      this.isWireTransfer = value
+      this.form.resetFields(['paymentType', 'paymentAmount', 'paymentTime', 'submissionTime', 'paymentRecord'])
+      if (value !== '1') {
+        this.paymentMethodFlag = true
+      } else {
+        this.paymentMethodFlag = false
+      }
+    },
+    /*
+      * 续费选择换证
+      * */
+    selectcertificateType(val) {
+      this.selectType = val
+      // 记录原始的证书形式
+      const originType = this.model.certificateType
+      // 记录原始的证书代码
+      this.form.resetFields('reasonsRenewal')
+      const originCode = this.model.code
+      if (val !== originType.toString()) {
+        this.selectTypeDisabled = false
+        this.freeCertificate.code = ''
+      } else {
+        this.selectTypeDisabled = true
+        this.freeCertificate.code = originCode
+      }
+    },
+    // 证书续费
+    renewChargeCertificate() {
+      this.handleRenewChargeCertificateOk()
+    },
+    // 添加 证书续费信息
+    handleRenewChargeCertificateOk: function() {
+      const that = this
+      // 触发表单验证
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          that.confirmLoading = true
+          const httpurl = '/certificatePaymentInfo/addVinChargeInfo'
+          const method = 'post'
+          let formData = Object.assign(this.memberInfoPayment, values)
+
+          // 证书续费信息添加
+          formData.companyName = this.renewMemberInfo.companyName
+          // 续费
+          formData.paymentType = 1
+          // 证书ID
+          formData.certificateId = this.model.id
+          // 缴费时长 默认为 5年
+          formData.paymentTime = 5
+
+          // 添加权限控制
+          formData.memberId = this.loginUserId
+          formData = Object.assign(formData, pick(this.renewMemberInfo, 'address', 'postcode', 'companyName'))
+
+          httpAction(httpurl, formData, method).then((res) => {
+            if (res.success) {
+              // 修改证书的状态，和证书的类型
+              const chargeUrl = '/vinCertificate/vinCertificate/renewChargeCertificate'
+              const chargeMethod = 'post'
+              const chargeFormData = Object.assign(this.freeCertificate, values)
+              // 设置证书状态为 已提交
+              chargeFormData.certificateStatus = 2
+              httpAction(chargeUrl, chargeFormData, chargeMethod).then((res) => {
+                if (res.success) {
+                  that.$message.success(res.message)
+                  that.$emit('ok')
+                  that.visible = false
+                }
+              })
+            } else {
+              that.$message.warning(res.message)
+            }
+          }).finally(() => {
+            that.confirmLoading = false
+          })
+        }
+      })
+    },
+
+    // 预处理续费信息
+    preSaveRenewChargeCertificate() {
+      this.preHandleRenewChargeCertificateOk()
+    },
+    // 添加 证书续费信息
+    preHandleRenewChargeCertificateOk: function() {
+      const that = this
+      // 触发表单验证
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          that.confirmLoading = true
+          const httpurl = '/certificatePaymentInfo/addVinChargeInfo'
+          const method = 'post'
+          let formData = Object.assign(this.memberInfoPayment, values)
+
+          // 证书续费信息添加
+          formData.companyName = this.renewMemberInfo.companyName
+          // 续费
+          formData.paymentType = 1
+          // 证书ID
+          formData.certificateId = this.model.id
+          // 缴费时长 默认为 5年
+          formData.paymentTime = 5
+
+          // 添加权限控制
+          formData.memberId = this.loginUserId
+
+          // 缴费状态为 未提交状态
+          formData.paymentStatus = 0
+
+          formData = Object.assign(formData, pick(this.renewMemberInfo, 'address', 'postcode', 'companyName'))
+
+          httpAction(httpurl, formData, method).then((res) => {
+            if (res.success) {
+              // 修改证书的状态，和证书的类型
+              const chargeUrl = '/vinCertificate/vinCertificate/renewChargeCertificate'
+              const chargeMethod = 'post'
+              const chargeFormData = Object.assign(this.freeCertificate, values)
+              chargeFormData.certificateStatus = 0
+
+              httpAction(chargeUrl, chargeFormData, chargeMethod).then((res) => {
+                if (res.success) {
+                  that.$message.success(res.message)
+                  that.$emit('ok')
+                  that.close()
+                }
+              })
+            } else {
+              that.$message.warning(res.message)
+            }
+          }).finally(() => {
+            that.confirmLoading = false
+          })
+        }
+      })
+    },
+    handleCancel() {
+      this.visible = false
+    }
+  },
+  computed: {
+    width() {
+      if (this.pageType === 14) {
+        return 400
+      }
+      if (this.pageType !== 4) {
+        return 1350
+      } else {
+        return 650
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.v-middle {
+  height: 100px;
+  text-align: center;
+  vertical-align: middle;
+
+  /deep/ .ant-form-item {
+    margin-bottom: 0px !important;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    color: rgba(0, 0, 0, 0.65);
+    font-size: 14px;
+    font-variant: tabular-nums;
+    line-height: 1.5;
+    list-style: none;
+    font-feature-settings: 'tnum';
+    vertical-align: middle;
+  }
+
+}
+
+.remark span {
+  display: inline-block;
+  font-size: 14px;
+  margin-left: 165px;
+  transform: translateY(-20px);
+}
+
+.vin-style {
+  display: inline-block;
+  max-width: 120px;
+  white-space: pre-wrap;
+  text-align: center;
+}
+
+.table {
+  width: 100%;
+  height: 180px;
+  text-align: center;
+  margin-bottom: 10px;
+  border-color: #ccc;
+  border-collapse: collapse;
+}
+
+// 证书状态颜色
+.certificate {
+  display: inline-block;
+  height: 24px;
+  font-size: 12px;
+  line-height: 24px;
+  padding: 0 7px;
+  border-radius: 3px;
+  color: #ddd;
+}
+
+.status-0 {
+  background: #c37e00;
+}
+
+.status-1 {
+  background: #40835e;
+}
+
+.status-2 {
+  background: #8a8c8e;
+}
+
+.transalte-y-10 {
+  transform: translateY(10px);
+}
+
+.apply-notice {
+  color: #f5222d;
+}
+
+.apply-code-notice {
+  color: #f5222d;
+  position: absolute;
+  bottom: 4px;
+  left: 25%
+}
+
+</style>
\ No newline at end of file
diff --git a/src/views/standardsAssociation/model/ReplaceMentAffirmModel.vue b/src/views/standardsAssociation/model/ReplaceMentAffirmModel.vue
new file mode 100644
index 0000000..f33f7d8
--- /dev/null
+++ b/src/views/standardsAssociation/model/ReplaceMentAffirmModel.vue
@@ -0,0 +1,64 @@
+<template>
+  <j-modal
+    :title="title"
+    :width="width"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    :maskClosable="false"
+    switchFullscreen
+    @cancel="handleCancel"
+    cancelText="关闭">
+    <template>
+      <a-spin :spinning="confirmLoading">
+        <a-form>
+          <div class="container">
+            您的证书申请已收到！请确认您的换证纸质材料已经<br/>
+            邮寄签收并符合换证要求后，自会员资格生效日起，<br/>
+            10个工作日内，您将收到换发的纸质证书。
+          </div>
+        </a-form>
+      </a-spin>
+    </template>
+    <template slot="footer">
+      <a-button @click="handleCancel" type="primary" style="text-align: center">确定</a-button>
+    </template>
+  </j-modal>
+</template>
+
+<script>
+export default {
+  // 绑定会员 窗口
+  name: 'BindMemberAffirmModel',
+  data() {
+    return {
+      title: '',
+      visible: false,
+      confirmLoading: false
+    }
+  },
+  methods: {
+    show() {
+      this.visible = true
+    },
+    handleCancel() {
+      this.visible = false
+    }
+  },
+  computed: {
+    width() {
+      if (this.pageType === 14) {
+        return 400
+      }
+      if (this.pageType !== 4) {
+        return 1350
+      } else {
+        return 650
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/standardsAssociation/model/ReplaceMentModel.vue b/src/views/standardsAssociation/model/ReplaceMentModel.vue
new file mode 100644
index 0000000..08c79fa
--- /dev/null
+++ b/src/views/standardsAssociation/model/ReplaceMentModel.vue
@@ -0,0 +1,442 @@
+<template>
+  <j-modal
+    :title="title"
+    :width="width"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    :maskClosable="false"
+    switchFullscreen
+    @cancel="handleCancel"
+    cancelText="关闭">
+    <template>
+      <a-spin :spinning="confirmLoading">
+        <a-form :form="form">
+          <a-row>
+            <a-col :span="12">
+              <a-form-item label="证书类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-search-select-tag
+                  dict="certificate_type"
+                  :trigger-change="true"
+                  @change="vinOrWmi"
+                  v-decorator="['certificateType',validatorRules.certificateType]"
+                  placeholder="请选择证书类型"/>
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label=" 证书代码" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input
+                  :maxLength="50"
+                  placeholder="请输入证书代码"
+                  v-decorator="['code',validatorRules.clientCode, {initialValue: model.code}]">
+                </a-input>
+              </a-form-item>
+              <span class="apply-code-notice">一次申请仅能输入一个证书代码</span>
+            </a-col>
+          </a-row>
+
+          <a-row>
+            <a-col :span="12">
+              <a-form-item label="通讯地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input :maxLength="50" v-decorator="['address',validatorRules.address]" placeholder="请输入通讯地址"/>
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="邮编" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-input
+                  :maxLength="50"
+                  v-decorator="['postcode',validatorRules.postcode]"
+                  placeholder="请输入邮编"></a-input>
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-row>
+            <a-col :span="12">
+              <a-form-item label="生效日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-date
+                  disabled
+                  date-format="YYYY-MM-DD"
+                  placeholder="请选择生效日期"
+                  v-decorator="['effectDate',validatorRules.effectDate]"
+                  :trigger-change="true"
+                  style="width: 100%"/>
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="失效日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-date
+                  disabled
+                  date-format="YYYY-MM-DD"
+                  placeholder="请选择失效日期"
+                  v-decorator="['invalidDate',validatorRules.invalidDate]"
+                  :trigger-change="true"
+                  style="width: 100%"/>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row>
+            <a-col :span="12" v-if="selectType == '1'">
+              <a-form-item label="备案通知书" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-dict-select-tag
+                  v-decorator="['noticeOfFiling']"
+                  :triggerChange="true"
+                  placeholder="请选择备案通知书"
+                  dictCode="notice_of_filing"/>
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item
+                label="换证原因"
+                :labelCol="labelCol"
+                :wrapperCol="wrapperCol"
+                v-if="selectType == '1' ">
+                <j-multi-select-tag
+                  v-decorator="['reasonsRenewal',validatorRules.reasonsRenewal]"
+                  dict-code="certificate_type_wmi"
+                  placeholder="请选择换证原因"
+                >
+                </j-multi-select-tag>
+              </a-form-item>
+              <a-form-item label="换证原因" :labelCol="labelCol" :wrapperCol="wrapperCol" v-if="selectType == '2'">
+                <j-multi-select-tag
+                  v-decorator="['reasonsRenewal',validatorRules.reasonsRenewal]"
+                  dict-code="certificate_type_ec"
+                  placeholder="请选择换证原因"
+                >
+                </j-multi-select-tag>
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row v-if="model.code">
+            <a-col :span="12">
+              <a-form-item label="证书文件" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <j-image-upload
+                  isLessThan5M
+                  :number="1"
+                  bizPath="payment"
+                  v-decorator="['certificateImg',validatorRules.certificateImg]">
+                </j-image-upload>
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-row>
+            <a-col :span="24">
+              <a-form-item label="备注" :labelCol="labelColOne" :wrapperCol="wrapperColOne">
+                <a-textarea :maxLength="500" :rows="5" v-decorator="['auditOpinion',validatorRules.auditOpinion]"/>
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+        </a-form>
+      </a-spin>
+    </template>
+    <template slot="footer">
+      <a-button @click="handleCancel">关闭</a-button>
+      <a-button @click="preReplacementCertificate" type="primary">暂存</a-button>
+      <a-button @click="replacementCertificate" type="primary">提交</a-button>
+    </template>
+  </j-modal>
+</template>
+
+<script>
+import JSearchSelectTag from '@comp/standardsAssociation/JSearchSelectTag'
+import JMultiSelectTag from '@comp/standardsAssociation/JMultiSelectTag'
+import JImageUpload from '@comp/standardsAssociation/JImageUpload'
+import JDate from '@comp/tools/JDate'
+import { httpAction } from '@api/memberManage'
+import pick from 'lodash.pick'
+import JDictSelectTag from '@comp/standardsAssociation/JDictSelectTag'
+export default {
+  // 换证 窗口
+  name: 'ReplaceMentModel',
+  components: {
+    JSearchSelectTag,
+    JMultiSelectTag,
+    JImageUpload,
+    JDate,
+    JDictSelectTag,
+  },
+  data() {
+    return {
+      title: '换证',
+      visible: false,
+      confirmLoading: false,
+      pageType: 8,
+      form: this.$form.createForm(this),
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 6 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 }
+      },
+      model: {},
+      validatorRules: {
+        defaultRules: {
+          rules: [{ required: true, message: '请选择' },
+            { min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
+          ]
+        },
+        unBindId: {
+          rules: [{ required: true, message: '请选择要解绑的证书' }
+          ]
+        },
+        code: {
+          rules: [
+            { required: true, message: '请输入证书代码!' },
+            { min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
+          ]
+        },
+        certificateImg: {
+          rules: [
+            { required: true, message: '请上传证书文件!' }
+          ],
+          validateTrigger: 'change'
+        },
+        clientCode: {
+          rules: [
+            { min: 0, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
+          ]
+        },
+        auditOpinion: {
+          rules: [
+            { min: 0, max: 500, message: '处理结果备注最多500个字符', validateTrigger: 'blur' }
+          ]
+        },
+        effectDate: {
+          rules: [{
+            required: true, message: '请选择生效日期'
+          }]
+        },
+        invalidDate: { rules: [{ required: true, validator: this.checkInvalidDate }] },
+        certificateType: {
+          rules: [{
+            required: true, message: '请输入证书类型!'
+          }]
+        },
+        address: {
+          rules: [
+            { required: true, message: '请输入通讯地址!' },
+            { min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
+          ]
+        },
+        postcode: {
+          rules: [
+            {
+              required: true, message: '请输入邮编!'
+            },
+            { min: 1, max: 50, message: '长度不超过50个字符' }
+            // { pattern: /^[0-9]\d{5}$/, message: '请输入正确的邮编', validateTrigger: 'blur' }
+          ]
+        },
+        paymentMethod: {
+          rules: [{
+            required: true, message: '请输入缴费方式!'
+          }]
+        },
+        paymentAmount: {
+          rules: [
+            {
+              required: true, message: '请输入缴费金额!'
+            },
+            {
+              pattern: /^[1-9](\d{1,10})?(\.\d{1,2})$|^0\.([1-9](\d{0,1})|\d[1-9])$|^[1-9]\d{0,10}$|^0$/,
+              message: '请输入合法的金额数字，最多2位小数,11位正数',
+              validateTrigger: 'blur'
+            }
+          ],
+          validateTrigger: 'blur'
+        },
+        submissionTime: {
+          rules: [{
+            required: true, message: '请输入缴费日期!'
+          }]
+        },
+        paymentRecord: {
+          rules: [{
+            required: true, message: '请上传缴费凭证!'
+          }]
+        },
+        paymentRecord1: { rules: [{ required: true, message: '请上传打包协议' }] },
+        invoiceRequirements: {
+          rules: [{
+            required: true, message: '请选择是否需要发票!'
+          }]
+        },
+        headerName: {
+          rules: [
+            {
+              required: true, message: '请输入付款单位发票抬头!'
+            },
+            { min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' }
+          ],
+          validateTrigger: 'blur'
+        },
+        taxNumber: {
+          rules: [
+            { required: true, message: '请输入社会统一代码/税号!' },
+            { min: 1, max: 50, message: '长度不超过50个字符', validateTrigger: 'blur' },
+            {
+              // pattern: /^[A-Z0-9]{15}$|^[A-Z0-9]{17}$|^[A-Z0-9]{18}$|^[A-Z0-9]{20}$/,
+              pattern: /^([0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}|[1-9]\d{14})$/,
+              // message: '15位、17位、18位、20位数字和大写英文字母',
+              message: '请输入15位、18位的社会统一代码/税号',
+              validateTrigger: 'blur'
+            }
+          ],
+          validateTrigger: 'blur'
+        },
+        invoiceAddress: { rules: [{ required: true, message: '请输入单位地址' }], validateTrigger: 'blur' },
+        invoicePhone: {
+          rules: [
+            { required: true, message: '请输入电话号码' },
+            {
+              pattern: /^((13[0-9])|(14[579])|(15([0-3]|[5-9]))|(17[0135678])|(18[0-9])|(19[8|9])|(16[6]))\d{8}$|^([0-9]{3,4}-)[0-9]{7,8}$/,
+              message: '请输入正确格式的电话号码',
+              validateTrigger: 'blur'
+            }
+          ],
+          validateTrigger: 'blur'
+        },
+        depositBank: { rules: [{ required: true, message: '请输入开户银行' }], validateTrigger: 'blur' },
+        bankAccount: { rules: [{ required: true, message: '请输入银行账户' }], validateTrigger: 'blur' },
+        reasonsRenewal: {
+          rules: [{
+            required: true, message: '请至少选择一个换证原因!'
+          }]
+        },
+        sendMethod: { rules: [{ required: false, message: '请选择快递公司' }], validateTrigger: 'change' },
+        postNo: { rules: [{ required: false, message: '请输入邮寄单号' }], validateTrigger: 'blur' }
+      },
+      // 记录续费证书选择
+      selectType: 1,
+      labelColOne: {
+        xs: { span: 24 },
+        sm: { span: 3 }
+      },
+      wrapperColOne: {
+        xs: { span: 24 },
+        sm: { span: 20 }
+      }
+    }
+  },
+  methods: {
+    // 换证的编辑窗口
+    edit(record) {
+      this.form.resetFields()
+      this.model = Object.assign({}, record)
+      this.selectType = this.model.certificateType
+      this.visible = true
+      this.$nextTick(() => {
+        this.form.setFieldsValue(pick(this.model, 'certificateImg', 'id', 'auditOpinion', 'address', 'postcode', 'certificateType', 'effectDate', 'invalidDate', 'code'))
+      })
+    },
+    // 换证申请
+    replacementCertificate: function() {
+      this.handleReplacementCertificateOk()
+    },
+    // 添加 换证申请
+    handleReplacementCertificateOk: function() {
+      const that = this
+      // 触发表单验证
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          that.confirmLoading = true
+          const httpurl = '/vinCertificate/vinCertificate/replacementCertificate'
+          const method = 'post'
+          const formData = Object.assign(this.model, values)
+          // 处理状态为已处理
+          formData.certificateStatus = 3
+          httpAction(httpurl, formData, method).then((res) => {
+            if (res.success) {
+              that.$emit('ok')
+              that.visible = false
+              that.$emit('affirm')
+              // that.title = '提交成功'
+              // that.disableSubmit = true
+              // that.pageType = 14
+              // that.edit(that.record)
+            } else {
+              that.$message.warning(res.message)
+            }
+          }).finally(() => {
+            that.confirmLoading = false
+          })
+        }
+      })
+    },
+    // 换证申请预处理
+    preReplacementCertificate() {
+      this.preHandleReplacementCertificateOk()
+    },
+    // 添加 换证申请
+    preHandleReplacementCertificateOk: function() {
+      const that = this
+      // 触发表单验证
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          that.confirmLoading = true
+          const httpurl = '/vinCertificate/vinCertificate/replacementCertificate'
+          const method = 'post'
+          const formData = Object.assign(this.model, values)
+          // 处理状态为已处理
+          formData.certificateStatus = 0
+          httpAction(httpurl, formData, method).then((res) => {
+            if (res.success) {
+              that.$message.success(res.message)
+              that.$emit('ok')
+              that.visible = false
+            } else {
+              that.$message.warning(res.message)
+            }
+          }).finally(() => {
+            that.confirmLoading = false
+          })
+        }
+      })
+    },
+    /*
+    * 证书下拉框改变
+    * */
+    vinOrWmi(val) {
+      this.selectType = Number(val)
+      this.form.resetFields('reasonsRenewal')
+    },
+    checkInvalidDate(rule, value, callback) {
+      if (value === undefined || value === '' || value == null) {
+        callback(new Error('请选择失效日期'))
+      }
+      console.log(value + ' :' + this.checkEffectDate)
+      var ck = this.checkEffectDate
+      if (!(ck === null || ck === undefined || ck === '')) {
+        if (value < this.checkEffectDate) {
+          callback(new Error('失效日期不能早于生效日期'))
+        }
+      }
+      callback()
+    },
+
+    handleCancel() {
+      this.visible = false
+    }
+  },
+  computed: {
+    width() {
+      if (this.pageType === 14) {
+        return 400
+      }
+      if (this.pageType !== 4) {
+        return 1350
+      } else {
+        return 650
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>