update: 增加手机号邮箱验证，优化样式

src/modules/payment/components/InvoiceForm.vue

@@ -34,7 +34,7 @@
         <el-form-item label="地址" prop="taxpayer_address" :rules="{required: true, message: '请输入地址', trigger: 'blur'}">
           <el-input v-model="form.taxpayer_address" size="small" placeholder="请输入地址"/>
         </el-form-item>
-        <el-form-item label="电话" prop="taxpayer_mobile" :rules="{required: true, message: '请输入电话', trigger: 'blur'}">
+        <el-form-item label="电话" prop="taxpayer_mobile">
           <el-input v-model="form.taxpayer_mobile" size="small" placeholder="请输入电话"/>
         </el-form-item>
         <el-form-item label="开户行" prop="taxpayer_bank_name" :rules="{required: true, message: '请输入开户行', trigger: 'blur'}">
@@ -98,6 +98,26 @@ export default {
     }
   },
   data() {
+    const phoneReg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
+    const checkMobile = (rule, value, callback) => {
+      if (value) {
+        if (!phoneReg.test(value)) {
+          callback(new Error('手机号格式错误'));
+        } else {
+          callback()
+        }
+      }
+    }
+    const emailReg = /^[A-Za-z0-9]+([_.\\-][A-Za-z0-9]+)*@([A-Za-z0-9-]+\.)+[A-Za-z]{2,6}$/
+    const checkEmail = (rule, value, callback) => {
+      if (value) {
+        if (!emailReg.test(value)) {
+          callback(new Error('邮箱格式错误'));
+        } else {
+          callback()
+        }
+      }
+    }
     return {
       form: Object.assign({ taxpayer_type: '2' }, defaultForm),
       rules: {
@@ -106,10 +126,11 @@ export default {
         invoice_type: { required: true, message: '请选择发票类型', trigger: 'change' },
         taxpayer_name: { required: true, message: '请输入纳税人名称', trigger: 'blur' },
         taxpayer_identifier: { required: true, message: '请输入纳税人识别号', trigger: 'blur' },
-        recipient_email: { required: true, message: '请输入邮箱地址', trigger: 'blur' },
+        taxpayer_mobile: [{ required: true, message: '请输入电话', trigger: 'blur' }, { validator: checkMobile, trigger: 'blur' }],
+        recipient_email: [{ required: true, message: '请输入邮箱地址', trigger: 'blur' }, { validator: checkEmail, trigger: 'blur' }],
         recipient_name: { required: true, message: '请输入收件人名称', trigger: 'blur' },
         recipient_address: { required: true, message: '请输入邮寄地址', trigger: 'blur' },
-        recipient_mobile: { required: true, message: '请输入收件人手机号', trigger: 'blur' }
+        recipient_mobile: [{ required: true, message: '请输入收件人手机号', trigger: 'blur' }, { validator: checkMobile, trigger: 'blur' }]
       }
     }
   },

src/modules/payment/views/h5/Invoice.vue

@@ -13,7 +13,7 @@
         <van-field v-model="form.taxpayer_identifier" name="pattern" label="纳税人识别号" placeholder="请输入纳税人识别号" :rules="[{ required: true, message: '请输入纳税人识别号' }]" required/>
         <template v-if="form.invoice_type === '3'">
           <van-field v-model="form.taxpayer_address" name="pattern" label="地址" placeholder="请输入地址" :rules="[{ required: true, message: '请输入地址' }]" required/>
-          <van-field v-model="form.taxpayer_mobile" type="tel" name="pattern" label="电话" placeholder="请输入电话" :rules="[{ required: true, message: '请输入电话' }]" required/>
+          <van-field v-model="form.taxpayer_mobile" type="tel" name="pattern" label="电话" placeholder="请输入电话" :rules="[{ required: true, message: '请输入电话' }, { validator: phoneValidator, message: '输入格式有误' }]" required/>
           <van-field v-model="form.taxpayer_bank_name" name="pattern" label="开户行" placeholder="请输入开户行" :rules="[{ required: true, message: '请输入开户行' }]" required/>
           <van-field v-model="form.taxpayer_bank_account" name="pattern" label="银行账号" placeholder="请输入银行账号" :rules="[{ required: true, message: '请输入银行账号' }]" required/>
         </template>
@@ -21,11 +21,11 @@
       </div>
       <div class="form-group">
         <h5>收票信息</h5>
-        <van-field v-if="form.invoice_type === '2'" v-model="form.recipient_email" name="pattern" label="邮箱地址" placeholder="请输入邮箱地址" :rules="[{ required: true, message: '请输入邮箱地址' }]" required/>
+        <van-field v-if="form.invoice_type === '2'" v-model="form.recipient_email" name="pattern" label="邮箱地址" placeholder="请输入邮箱地址" :rules="[{ required: true, message: '请输入邮箱地址' }, { validator: emailValidator, message: '输入格式有误' }]" required/>
         <template v-else>
           <van-field v-model="form.recipient_address" name="pattern" label="邮寄地址" placeholder="请输入邮寄地址" :rules="[{ required: true, message: '请输入邮寄地址' }]" required/>
           <van-field v-model="form.recipient_name" name="pattern" label="收件人名称" placeholder="请输入收件人名称" :rules="[{ required: true, message: '请输入收件人名称' }]" required/>
-          <van-field v-model="form.recipient_mobile" type="tel" name="pattern" label="收件人手机号" placeholder="请输入收件人手机号" :rules="[{ required: true, message: '请输入收件人手机号' }]" required/>
+          <van-field v-model="form.recipient_mobile" type="tel" name="pattern" label="收件人手机号" placeholder="请输入收件人手机号" :rules="[{ required: true, message: '请输入收件人手机号' }, { validator: phoneValidator, message: '输入格式有误' }]" required/>
           <van-field v-model="form.follower" name="pattern" label="票据跟进人" placeholder="请输入票据跟进人" :rules="[{ required: true, message: '请输入票据跟进人' }]" required/>
         </template>
       </div>
@@ -96,6 +96,14 @@ export default {
     }
   },
   methods: {
+    phoneValidator(val) {
+      if (val === '') return true
+      return /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/.test(val)
+    },
+    emailValidator(val) {
+      if (val === '') return true
+      return /^[A-Za-z0-9]+([_.-][A-Za-z0-9]+)*@[A-Za-z0-9-.]+$/.test(val)
+    },
     handleTabChange(val) {
       this.form = Object.assign({ taxpayer_type: val }, defaultForm)
       this.setInvoiceType()

src/modules/payment/views/h5/details.vue

 <template>
-  <div>
+  <div class="pay-details">
     <van-cell-group>
       <van-cell title="项目" :value="details.project_name" />
       <van-cell title="应缴金额" :value="`￥${details.bill_total}`" />
@@ -10,7 +10,7 @@
       <van-cell title="备注" :value="details.invoice_remark" />
     </van-cell-group>
     <div class="btn-bar" v-if="['2', '6'].includes(details.invoice_status)">
-      <van-button type="info" size="small" block @click="handleInvoice">开具发票</van-button>
+      <van-button type="info" size="small" round block @click="handleInvoice">开具发票</van-button>
     </div>
   </div>
 </template>
@@ -47,6 +47,6 @@ export default {
 <style scoped>
 .btn-bar{
   text-align:center;
-  padding:20px 30px;
+  padding:20px;
 }
 </style>

src/modules/payment/views/pc/List.vue

@@ -6,7 +6,7 @@
       </template>
       <!-- 操作 -->
       <template v-slot:table-operate="{ row }">
-        <el-button v-if="['1', '2', '6'].includes(row.invoice_status)" type="text" @click="handleInvoice(row)" size="mini">开具发票</el-button>
+        <el-button v-if="['2', '6'].includes(row.invoice_status)" type="text" @click="handleInvoice(row)" size="mini">开具发票</el-button>
         <el-button type="text" @click="handleInvoiceQR(row)" size="mini">开票二维码</el-button>
       </template>
     </app-list>