feat(api): 新增多个API接口并优化配置

石广澎

2025-11-17 8771da2ccf6f7c3fd2a8c89a1a0e230c6386db7f

 pages/pay/register.vue

New file
@@ -0,0 +1,218 @@
<template>
   <view class="u-p-h-50">
      <view class="title">您好，欢迎注册！</view>
      <u-form labelPosition="top" :model="form" :rules="rules" labelWidth="200"
         :labelStyle="{fontSize:'34rpx',fontWeight:'bold'}" ref="uForm">
         <u-form-item label="姓名" prop="memberName" borderBottom>
            <u-input v-model="form.memberName" border="none" placeholder="请输入姓名"></u-input>
         </u-form-item>
         <u-form-item label="身份证号" prop="idcard" borderBottom>
            <u-input v-model="form.idcard" border="none" placeholder="请输入身份证号"></u-input>
         </u-form-item>
         <u-form-item label="手机号" prop="mobile" borderBottom>
            <u-input v-model="form.mobile" border="none" placeholder="请输入手机号"></u-input>
         </u-form-item>
         <u-form-item label="图形验证码" prop="captchaCode" borderBottom>
            <u-input v-model="form.captchaCode" border="none" placeholder="请输入图形验证码"></u-input>
            <image @click="getImgCode" class="img-code" slot="right" :src="imgCode.bg" mode=""></image>
         </u-form-item>
         <u-form-item label="短信验证码" prop="verificationCode" borderBottom>
            <u-input v-model="form.verificationCode" maxlength="6" border="none" placeholder="请输入短信验证码"></u-input>
            <u-button slot="right" @tap="getCode" color="#de2d35" plain>{{tips}}</u-button>
         </u-form-item>
      </u-form>
      <view class="u-text-center u-m-t-40 color-999 u-font-24">
         <label @click="checked = !checked" class="radio">
            <radio style="transform: scale(0.7);" color="#de2d35" :checked="checked" /><text>我已阅读并同意</text>
            <text style="color: #de2d35;" @click.stop="show = true">《金融生态圈平台会员注册协议》</text>
         </label>

      </view>
      <u-modal confirmText="阅读并同意" confirmColor="#de2d35" @confirm="show = false;checked = true" :show="show" title="金融生态圈平台会员注册协议">
         <scroll-view scroll-y style="height: 60vh;">
            <user-agreement></user-agreement>
         </scroll-view>
      </u-modal>
      <u-code :seconds="seconds" ref="uCode" @change="codeChange"></u-code>
      <view class="btn-box">
         <u-button @click="submit" text="注册" type="error" color="#de2d35" shape="circle"></u-button>
      </view>
   </view>
</template>

<script>
   import {
      getVerify,
      getH5PayCheckVerifyCode,
      h5PayLogin
   } from '@/common/api/index'
   export default {
      data() {
         return {
            show: false,
            checked: true,
            cid: '',
            imgCode: {},
            tips: '',
            // refCode: null,
            seconds: 60,
            form: {
               memberName: '',
               idcard: '',
               mobile: '',
               captchaCode: '',
               verificationCode: '',
            },
            rules: {
               memberName: [{
                  type: 'string',
                  required: true,
                  message: '姓名不能为空',
                  trigger: ['blur']
               }],
               idcard: [{
                  type: 'string',
                  required: true,
                  message: '身份证号不能为空',
                  trigger: ['blur']
               }, {
                  validator: (rule, value, callback) => {
                     return uni.$u.test.idCard(value);
                  },
                  message: '身份证号不正确',
                  // 触发器可以同时用blur和change
                  trigger: ['blur'],
               }],
               mobile: [{
                     type: 'string',
                     required: true,
                     message: '手机号不能为空',
                     trigger: ['blur']
                  },
                  {
                     validator: (rule, value, callback) => {
                        return uni.$u.test.mobile(value);
                     },
                     message: '手机号码不正确',
                     // 触发器可以同时用blur和change
                     trigger: ['change'],
                  }
               ],
               captchaCode: [{
                  type: 'string',
                  required: true,
                  message: '图形验证码不能为空',
                  trigger: ['blur', 'change']
               }],
               verificationCode: [{
                  type: 'string',
                  required: true,
                  message: '短信验证码不能为空',
                  trigger: ['blur', 'change']
               }],
            },
         };
      },
      onLoad(opt) {
         this.cid = opt.cid
         this.getImgCode()
      },
      methods: {
         codeChange(text) {
            this.tips = text;
         },
         getCode() {
            if (!this.form.captchaCode) {
               uni.showToast({
                  icon: 'none',
                  title: '请输入图形验证码'
               })
               return
            }
            if (!this.form.mobile) {
               uni.showToast({
                  icon: 'none',
                  title: '请输入手机号'
               })
               return
            }
            if (this.$refs.uCode.canGetCode) {
               // 模拟向后端请求验证码
               uni.showLoading({
                  title: '正在获取验证码'
               })
               getH5PayCheckVerifyCode({
                  mobile: this.form.mobile,
                  captchaCode: this.form.captchaCode,
                  verifyToken: this.imgCode.token
               }).then(res => {
                  uni.hideLoading();
                  // 这里此提示会被this.start()方法中的提示覆盖
                  uni.$u.toast('验证码已发送');
                  // 通知验证码组件内部开始倒计时
                  this.$refs.uCode.start();
               }).catch(() => {
                  // uni.hideLoading();
                  this.getImgCode()
               })
            } else {
               uni.$u.toast('倒计时结束后再发送');
            }
         },
         getImgCode() {
            uni.showLoading()
            getVerify().then(res => {
               uni.hideLoading();
               res.bg = 'data:image/jpeg;base64,' + res.bg
               this.imgCode = res
            }).catch(() => {
               uni.hideLoading();
            })
         },
         submit() {
            if(!this.checked){
               uni.showToast({
                  icon: 'none',
                  title: '请先阅读并同意用户协议'
               })
               return
            }
            this.$refs.uForm.validate().then(res => {
               uni.showLoading()
               h5PayLogin(this.form).then(res => {
                  uni.hideLoading();
                  uni.setStorageSync('IS_NEW', false)
                  uni.redirectTo({
                     url: '/pages/pay/scanpay?cid=' + this.cid
                  })
               }).catch(() => {
                  uni.hideLoading();
               })
            }).catch(errors => {
               // uni.$u.toast('校验失败')
            })
         }
      },
   }
</script>
<style>
   page {
      background-color: #fff;
   }
</style>
<style lang="scss">
   .title {
      font-size: 44rpx;
      font-weight: bold;
      padding: 50rpx 0;
   }

   .btn-box {
      margin-top: 40rpx;
   }

   .img-code {
      width: 140rpx;
      height: 70rpx;
   }
</style>