[update] 缴费凭证、注册

2021-12-17 11:08:09 +08:00
parent 4eba1f09ac
commit e035f3cdd3
7 changed files with 221 additions and 96 deletions
@@ -409,7 +409,9 @@ export default {
  }

  &-img {
-    width: calc(100% - 6rem);
+    max-width: calc(100% - 6rem);
+    max-height: 150px;
+    cursor: pointer;
  }
 }

@@ -40,7 +40,7 @@
        <div class="info-item">
          <label>付款凭证：</label>
          <div class="proof-img">
-            <img :src="proofSrc(proofInfo.proof)">
+            <img :src="proofSrc(proofInfo.proof)" @click="previewProofImg(proofInfo.proof)">
          </div>
        </div>
      </div>
@@ -49,12 +49,18 @@
    <template slot="footer">
      <a-button @click="handleCancel">关闭</a-button>
    </template>
+
+    <!--    预览缴费凭证-->
+    <preview-img-modal ref="previewImg"></preview-img-modal>
  </j-modal>
 </template>

 <script>
+import PreviewImgModal from '@views/MessagePage/modules/PreviewImgModal'
+
 export default {
  name: 'ProofInfoModal',
+  components: { PreviewImgModal },
  props: {
    // 项目名称
    projectName: {
@@ -93,6 +99,16 @@ export default {
    proofSrc(imgId) {
      return `${ window._CONFIG['domianURL'] }/sys/common/download/${ imgId }`
    },
+    /**
+     * 预览缴费凭证
+     * @param imgId
+     */
+    previewProofImg(imgId) {
+      this.$refs.previewImg.title = '缴费凭证图片'
+      this.$refs.previewImg.imgId = imgId
+      this.$refs.previewImg.visible = true
+      console.log()
+    }
  }
 }
 </script>
@@ -136,6 +152,8 @@ h3.title::before {

    img {
      max-width: 100%;
+      max-height: 200px;
+      cursor: pointer;
    }
  }
 }
@@ -7,25 +7,26 @@
      </router-link>
    </div>
    <div class='alteration-center'>
-      <div class='alteration-content' >
-        <a-form :form="form">
-          <span class='setPassword'>注册</span>
-          <div class="steps-box">
-            <a-steps :current="current">
-              <a-step v-for="item in steps" :key="item.title" :title="item.title"/>
-            </a-steps>
-          </div>
-          <!--          设置密码部分-->
-          <div v-show="current === 0">
+      <div class='alteration-content'>
+
+        <span class='setPassword'>注册</span>
+        <div class="steps-box">
+          <a-steps :current="current">
+            <a-step v-for="item in steps" :key="item.title" :title="item.title"/>
+          </a-steps>
+        </div>
+        <!--          设置密码部分-->
+        <div v-show="current === 0">
+          <a-form :form="form">
            <a-row>
              <a-col :span='22'>
                <a-form-item
                  label="手机号"
                  :labelCol="{span: 5}"
-                  :wrapperCol="{span: 19}"
-                >
+                  :wrapperCol="{span: 19}">
                  <a-input
                    type="text"
+                    :maxLength='11'
                    v-decorator="['phone', validatorRules.phone]"
                    placeholder="请输入手机号">
                  </a-input>
@@ -41,7 +42,7 @@
                  :labelCol="{span: 5}"
                  :wrapperCol="{span: 19}">
                  <a-input
-                    v-decorator="['captcha', validatorRules.captcha]"
+                    v-decorator="['verifyCode', validatorRules.verifyCode]"
                    type="text"
                    autocomplete="new-password"
                    placeholder="请输入验证码">
@@ -66,6 +67,7 @@
                    placeholder="请输入新密码"
                    v-decorator="['password', validatorRules.password]"
                    autocomplete="new-password"
+                    :maxLength='50'
                    @paste.native.capture.prevent="handleOperate"
                    type="password">
                  </a-input-password>
@@ -81,8 +83,9 @@
                  :wrapperCol="{span: 19}">
                  <a-input-password
                    placeholder="请输入确认密码"
-                    v-decorator="['confirmPassword', validatorRules.confirmPassword]"
+                    v-decorator="['verifyPassword', validatorRules.verifyPassword]"
                    type="password"
+                    :maxLength='50'
                    @paste.native.capture.prevent="handleOperate"
                    autocomplete="new-password">
                  </a-input-password>
@@ -90,10 +93,12 @@
              </a-col>
              <a-col :span='6'></a-col>
            </a-row>
-          </div>
+          </a-form>
+        </div>

-          <!--          完善信息部分-->
-          <div v-show="current===1">
+        <!--          完善信息部分-->
+        <div v-show="current===1">
+          <a-form :form="contactInfoForm">
            <a-row>
              <a-col :xl="12" :sm="24">
                <a-form-item
@@ -101,8 +106,9 @@
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol">
                  <company-select placeholder="请选择企业"
-                                  v-decorator="['chargeCompany',validatorRules.chargeCompany]"
-                                  :maxLength='50'></company-select>
+                                  v-decorator="['company',validatorRules.company]"
+                                  :maxLength="50"
+                                  is-limit></company-select>
                </a-form-item>
              </a-col>
              <a-col :xl="12" :sm="24">
@@ -112,7 +118,8 @@
                  :wrapperCol="wrapperCol">
                  <a-input
                    type="text"
-                    v-decorator="['phone', validatorRules.phone]"
+                    :maxLength='50'
+                    v-decorator="['name', validatorRules.name]"
                    placeholder="请输入姓名">
                  </a-input>
                </a-form-item>
@@ -138,7 +145,8 @@
                  :wrapperCol="wrapperCol">
                  <a-input
                    type="text"
-                    v-decorator="['phone', validatorRules.phone]"
+                    :maxLength='50'
+                    v-decorator="['post']"
                    placeholder="请输入职务">
                  </a-input>
                </a-form-item>
@@ -152,6 +160,8 @@
                  :wrapperCol="wrapperCol">
                  <a-input
                    type="text"
+                    :maxLength='11'
+                    disabled
                    v-decorator="['phone', validatorRules.phone]"
                    placeholder="请输入手机号">
                  </a-input>
@@ -164,7 +174,8 @@
                  :wrapperCol="wrapperCol">
                  <a-input
                    type="text"
-                    v-decorator="['phone', validatorRules.phone]"
+                    :maxLength='50'
+                    v-decorator="['email', validatorRules.email]"
                    placeholder="请输入邮箱">
                  </a-input>
                </a-form-item>
@@ -178,7 +189,8 @@
                  :wrapperCol="wrapperCol">
                  <a-input
                    type="text"
-                    v-decorator="['phone', validatorRules.phone]"
+                    :maxLength='50'
+                    v-decorator="['contactAddress', validatorRules.contactAddress]"
                    placeholder="请输入通讯地址">
                  </a-input>
                </a-form-item>
@@ -189,8 +201,9 @@
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol">
                  <a-input
+                    :maxLength='6'
                    type="text"
-                    v-decorator="['phone', validatorRules.phone]"
+                    v-decorator="['postalCode', validatorRules.postalCode]"
                    placeholder="请输入邮政编码">
                  </a-input>
                </a-form-item>
@@ -208,8 +221,8 @@
                </a-form-item>
              </a-col>
            </a-row>
-          </div>
-        </a-form>
+          </a-form>
+        </div>
        <div class="btn">
          <template v-if="current === 0">
            <a-button :loading="loading" type="primary" @click="toNextStep" style="margin-left:20px">下一步</a-button>
@@ -227,10 +240,11 @@

 <script>
 import { mapActions } from 'vuex'
-import { JSEncrypt } from 'jsencrypt'
 import { getAction, postAction } from '@api/manage'
 import { getRSAPublicKey } from '@api/login'
 import CompanySelect from '@comp/company/CompanySelect'
+import { encrypt } from '@/utils/util'
+import { phoneReg, postcode, isEmail } from '@/utils/validate'

 export default {
  name: 'Register',
@@ -239,6 +253,7 @@ export default {
  data() {
    return {
      form: this.$form.createForm(this),
+      contactInfoForm: this.$form.createForm(this),
      loading: false,
      labelCol: {
        xs: { span: 24 },
@@ -259,33 +274,53 @@ export default {
      validatorRules: {
        phone: {
          rules: [
-            { required: true, message: '请输入手机号!' }, { validator: this.validatePhone }],
+            { required: true, message: '请输入手机号' }, { validator: this.validatePhone }],
          validateTrigger: 'blur'
        },
-        captcha: {
-          rules: [{ required: true, message: '请输入验证码!' }],
+        verifyCode: {
+          rules: [{ required: true, message: '请输入验证码' }],
          validateTrigger: 'blur'
        },
        password: {
          rules: [
-            { required: true, message: '请输入新密码!' },
+            { required: true, message: '请输入新密码' },
            {
              pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,./]).{8,30}$/,
-              message: '密码由8位及以上数字、大小写字母和特殊符号组成！'
+              message: '密码由8位及以上数字、大小写字母和特殊符号组成'
            }
          ],
          validateTrigger: 'blur'
        },
-        confirmPassword: {
+        verifyPassword: {
          rules: [
-            { required: true, message: '请输入确认密码!' },
+            { required: true, message: '请输入确认密码' },
            {
              pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,./]).{8,30}$/,
-              message: '密码由8位及以上数字、大小写字母和特殊符号组成！'
+              message: '密码由8位及以上数字、大小写字母和特殊符号组成'
            },
            { validator: this.handlePasswordCheck }
          ],
          validateTrigger: 'blur'
+        },
+        company: {
+          rules: [{ required: true, message: '请选择企业' }],
+          validateTrigger: 'change'
+        },
+        name: {
+          rules: [{ required: true, message: '请输入姓名' }],
+          validateTrigger: 'blur'
+        },
+        email: {
+          rules: [{ required: true, validator: this.checkMail }],
+          validateTrigger: 'blur'
+        },
+        contactAddress: {
+          rules: [{ required: true, message: '请输入通讯地址' }],
+          validateTrigger: 'blur'
+        },
+        postalCode: {
+          rules: [{ required: true, validator: this.checkPostcode }],
+          validateTrigger: 'blur'
        }
      },
      state: {
@@ -295,50 +330,66 @@ export default {
      userList: {},
      temporaryUserInfo: null, // 临时用户数据
      // 默认步骤
-      current: 1,
+      current: 0,
      steps: [
        { title: '设置密码' },
        { title: '完善信息' }
-      ]
+      ],
+      // 用于提交的信息
+      submitData: {},
+      url: '/home/registerSelf'
    }
  },
  created() {
    document.title = '汽车标准化工作平台'
+    this.getPublicKey()
  },
  methods: {
    ...mapActions(['FirstPhoneLogin']),
    /**
     * 下一步
+     * 校验设置密码部分的表单
     */
    toNextStep() {
-      this.current++
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          let phone = values.phone
+          let param = {
+            rsaPublicKey: this.rsaPublicKey,
+            phone: encrypt(this.rsaPublicKey, values.phone),
+            password: encrypt(this.rsaPublicKey, values.password),
+            verifyPassword: encrypt(this.rsaPublicKey, values.verifyPassword),
+          }
+          this.submitData = Object.assign(values, param)
+          this.current++
+          this.contactInfoForm.setFieldsValue({ phone: phone })
+        }
+      })
    },
+    /**
+     * 上一步
+     */
    prev() {
      this.current--
    },
    submit() {
      let that = this
      that.loading = true
-      this.form.validateFields((err, values) => {
+      this.contactInfoForm.validateFields((err, values) => {
        if (!err) {
-          let params = {}
-          params.rsaPublicKey = this.rsaPublicKey
-          let encrypt = new JSEncrypt()
-          encrypt.setPublicKey(params.rsaPublicKey)
-          let url = ''
-          params.newPassword = encrypt.encrypt(values.password)
-          // 初次登录用password字段存了token
-          params.password = that.temporaryUserInfo.result.token
-          url = '/company/changePasswordWithToken'
-          params.verifyPassword = encrypt.encrypt(values.confirmPassword)
-          postAction(url, params).then((res) => {
+          values.companyId = values.company.id
+          values.companyName = values.company.companyName
+          this.submitData.payContactsManagement = Object.assign({}, values)
+          delete this.submitData.payContactsManagement.company
+          console.log(this.submitData)
+          postAction(this.url, this.submitData).then((res) => {
            if (res.success) {
-              that.loading = false
              that.$router.go(-1)
            } else {
-              this.passwordFailed(res.message)
-              that.loading = false
+              this.$message.warn(res.message)
            }
+          }).finally(() => {
+            that.loading = false
          })
        } else {
          that.loading = false
@@ -357,8 +408,7 @@ export default {
    },
    validatePhone(rule, value, callback) {
      if (value) {
-        var myreg = /^[1][3,4,5,7,8][0-9]{9}$/
-        if (!myreg.test(value)) {
+        if (!phoneReg(value)) {
          callback('请输入正确的手机号')
        } else {
          callback()
@@ -387,8 +437,9 @@ export default {
          const hide = this.$message.loading('验证码发送中..', 0)
          let smsParams = {
            phone: phone,
-            // 忘记密码是2
-            codeType: 2
+            // 注册是3
+            codeType: 3,
+            flag: 1
          }
          getAction('/company/sendVerificationCode', smsParams).then(res => {
            if (!res.success) {
@@ -425,7 +476,39 @@ export default {
    //  密码禁止粘贴
    handleOperate() {
      return false
-    }
+    },
+    /**
+     * 邮编校验
+     * @param rules
+     * @param value
+     * @param callback
+     */
+    checkPostcode(rules, value, callback) {
+      if (value) {
+        if (postcode(value)) {
+          callback()
+        } else {
+          callback('请输入正确格式的邮政编码')
+        }
+      }
+      callback('请输入邮政编码')
+    },
+    /**
+     * 邮箱校验
+     * @param rules
+     * @param value
+     * @param callback
+     */
+    checkMail(rules, value, callback) {
+      if (value) {
+        if (isEmail(value)) {
+          callback()
+        } else {
+          callback('请输入正确格式的邮箱')
+        }
+      }
+      callback('请输入邮箱')
+    },
  }
 }
 </script>
@@ -504,8 +587,8 @@ export default {
 }

 /deep/ .ant-row {
-  margin-bottom: 20px !important;
  height: 30px;
+  margin-bottom: 20px;
 }

 /deep/ .ant-form-item-label {