jje_spread_uniapp/pages/register/register.vue

<template>
  <view class="page">
    <!-- #ifdef H5-->
    <uni-nav-bar v-if="!$isWxBrowser()" :fixed="true" background-color="#FFE05C" :border="false" :statusBar="false"
                 title="注册"/>
    <!-- #endif -->
    <view :style="{'marginTop':'10rpx'}">
      <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm">
        <u-form-item :labelWidth="80" label="头像：" borderBottom prop="img" ref="item1">
          <view class="photoView" @click="updateAvatar">
            <image class="photoImage" :src="form.imgUrl || '/static/ud4.png'"></image>
          </view>
        </u-form-item>
        <u-form-item :labelWidth="80" label="姓名：" borderBottom prop="name" ref="item1">
          <u--input v-model="form.name" placeholder="请输入姓名" border="none"></u--input>
        </u-form-item>
        <u-form-item :labelWidth="80" label="身份证号：" borderBottom prop="idCard" ref="item1">
          <u--input v-model="form.idCard" placeholder="请输入身份证号" border="none"></u--input>
        </u-form-item>
        <u-form-item :labelWidth="80" label="密码：" borderBottom prop="newPassword" ref="item1">
          <u--input v-model="form.newPassword" placeholder="请输入密码" type="password" border="none"></u--input>
        </u-form-item>

        <u-form-item :labelWidth="80" label="确认密码：" borderBottom prop="againPassword" ref="item1">
          <u--input v-model="form.againPassword" placeholder="再次确认密码" type="password"
                    border="none"></u--input>
        </u-form-item>

        <u-form-item :labelWidth="80" label="手机号：" borderBottom prop="phone" ref="item1">
          <u--input v-model="form.phone" placeholder="请输入手机号" border="none"></u--input>
        </u-form-item>
        <u-form-item :labelWidth="80" label="验证码：" borderBottom prop="code" ref="item1">
          <view class="inputCode">
            <u--input v-model="form.code" placeholder="请输入验证码" border="none"></u--input>
          </view>
          <u-button slot="right" @tap="getCode" :text="tips" type="success" size="small"
                    :disabled="disabled1"></u-button>
        </u-form-item>

      </u--form>

      <view :style="{'marginTop':'100rpx'}">
        <!--                <button class="customStyle" @click="expandRegister">提交</button>-->
        <button class="customStyle" @click="debounce(expandRegister,500)">提交</button>
      </view>

      <view class="flex-row justify-center  register">
        <text>已有账号！</text>
        <text @click="gologin" :style="{color:'#FFE05C'}">切换登录</text>
      </view>

    </view>
    <u-code ref="uCode" @change="codeChange" seconds="60" @start="disabled1 = true"
            @end="disabled1 = false"></u-code>
    <u-action-sheet
        :show="showSex"
        :actions="actions"
        title="请选择性别"
        @close="showSex = false"
        @select="sexSelect">
    </u-action-sheet>
    <u-datetime-picker
        :show="showBirthday"
        :value="birthday"
        mode="date"
        closeOnClickOverlay
        @confirm="birthdayConfirm"
        @cancel="birthdayClose"
        @close="birthdayClose"
    ></u-datetime-picker>
  </view>
</template>
<script>
export default {
  data() {
    return {
      timer: null, //定时任务
      recordId: '',//拓客经理二维码被扫记录id
      qrCodeInvalid: false,//二维码是否无效标识
      requestStatus: false,
      disabled1: false,
      showBirthday: false,
      showSex: false,
      birthday: Number(new Date()),
      actions: [{
        name: '男',
        value: '1'
      },
        {
          name: '女',
          value: '0'
        }, {
          name: '保密',
          value: '2'
        }
      ],
      tips: '',
      form: {
        roleId: '',
        parentId: '',
        img: '',
        imgUrl: '',
        name: '',
        idCard: '',
        newPassword: '',
        againPassword: '',
        phone: '',
        code: '',
      },
      rules: {
        // 'img': {
        // 	type: 'string',
        // 	required: true,
        // 	message: '请上传头像',
        // 	trigger: ['blur', 'change']
        // },
        // 'name': [
        //     {
        //         type: 'string',
        //         required: true,
        //         min: 2,
        //         pattern: '^([\u4e00-\u9fa5]{2,20})$',
        //         message: '请输入正确的姓名',
        //         trigger: ['blur', 'change']
        //     }
        // ],
        // 'idCard': [
        //     {
        //         type: 'string',
        //         required: false,
        //         min: 18,
        //         max: 18,
        //         pattern: this.$idCardPattern,
        //         message: '请输入身份证号',
        //         trigger: ['blur', 'change']
        //     }
        // ],
        'phone': {
          type: 'string',
          required: true,
          min: 11,
          max: 11,
          pattern: this.$phonePattern,
          message: '请输入正确的电话号码',
          trigger: ['blur', 'change']
        },
        'code': {
          type: 'string',
          required: true,
          min: 4,
          max: 6,
          message: '请输入验证码',
          trigger: ['blur', 'change']
        },
        'newPassword': {
          type: 'string',
          min: 6,
          max: 16,
          required: true,
          message: '请输入6-18位密码',
          trigger: ['blur', 'change']
        },
        'againPassword': {
          type: 'string',
          min: 6,
          max: 16,
          required: true,
          message: '请输入6-18位密码',
          trigger: ['blur', 'change']
        }
      },
    }
  },
  onLoad(e) {
    if (e.roleId) {
      console.log('++++++++++++扫码进注册页面+++++++++++++++++++')
      uni.setStorageSync('isRegister', true)
      this.form.roleId = e.roleId
      console.log('获取到的id', e.roleId)
    }
    if (e.type) {
      this.form.type = e.type
      console.log('获取到的type', e.type)
    }
    if (e.parentId) {
      this.form.parentId = e.parentId
      console.log('获取到的name', e.parentId)
      this.addRecordForManager()
    }
    if (e.timestamp) {
      console.log('获取到的时间戳', e.timestamp, new Date().getTime() > e.timestamp)
      if (new Date().getTime() > e.timestamp) {
        this.qrCodeInvalid = true

        uni.showModal({
          title: '温馨提示',
          content: ' 当前二维码已过期，请重新扫码',
          showCancel: false,
          success: function (res) {
            if (res.confirm) {
              console.log('用户点击确定');
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        });

      }
    }
  },
  methods: {

    addRecordForManager() {
      console.log("+++++++++++++创建被扫码记录++++++++++++++")
      console.log("+++++++++++++拓客经理id++++++++++++++", this.form.parentId)
      console.log("+++++++++++++角色id++++++++++++++", this.form.roleId)
      this.$api.service.addRecordForManager({
        expandUserId: this.form.parentId,
        roleId: this.form.roleId,
        type: this.form.type
      }).then(res => {
        console.log("获取到的记录id", res.data.data)
        this.recordId = res.data.data
      })
    },

    updateScanRecordById() {
      this.$api.service.updateScanRecordById({
        recordId: this.recordId
      }).then(res => {
        console.log("+++++++++++++创建被扫码记录为成功++++++++++++++", res)
      })
    },

     idCardAndName() {
       this.$api.service.idCardAndName({
        name: this.form.name,
        idCard: this.form.idCard,
      }).then(res => {
        if (res.data.data != null && res.data.data.respCode !== '0000') {
          this.rules.idCard.push({
            validator: (a, b, callback) => {
              callback(new Error(res.data.data.respMessage));
            },
            // 触发器可以同时用blur和change
            trigger: []
          })
          this.$refs.uForm.validateField('idCard')
        }else {
          this.register()
        }
      })
    },

    gologin() {
      uni.redirectTo({
        url: '/pages/login/login'
      })
    },

    updateAvatar() {
      let that = this
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album'], //从相册选择
        success: function (res) {
          let tempUrl = res.tempFiles[0].path
          uni.uploadFile({
            url: that.$baseUrl + '/resource/oss/upload', //仅为示例，非真实的接口地址
            filePath: tempUrl,
            name: 'file',
            header: {
              // "Content-Type": "multipart/form-data",
              // 'X-Access-Token': uni.getStorageSync('token'),
              'Authorization': 'Bearer ' + uni.getStorageSync('accessToken'),
            },
            success: (uploadFileRes) => {
              let res = JSON.parse(uploadFileRes.data)
              console.log('+++++++++++++++++chooseavatar+++++++++++++++++++++++', uploadFileRes.data)
              that.form.imgUrl = res.data.url.replace(/^http:/, "https:")
              that.form.img = res.data.ossId
            },
            fail: (err) => {
              console.log(err)
              uni.showToast({
                icon: 'error',
                duration: 2000,
                title: err.errMsg
              });
            }
          });

        },
        fail: function (err) {
          console.log(err)
          uni.showToast({
            icon: 'error',
            duration: 2000,
            title: err.errMsg
          });
        }
      })

    },

    birthdayClose() {
      this.showBirthday = false
      // this.$refs.form1.validateField('userInfo.birthday')
    },
    birthdayConfirm(e) {
      console.log(e)
      this.showBirthday = false
      this.form.birthday = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
      // this.$refs.form1.validateField('userInfo.birthday')
    },

    sexSelect(e) {
      console.log(e)
    },
    expandRegister() {
      if (this.qrCodeInvalid) {
        uni.showModal({
          title: '温馨提示',
          content: ' 当前二维码已过期，请重新扫码',
          showCancel: false,
          success: function (res) {
            if (res.confirm) {
              console.log('用户点击确定');
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        });
        return;
      }
      // this.rules.idCard = [
      //     {
      //         type: 'string',
      //         required: false,
      //         min: 18,
      //         max: 18,
      //         pattern: this.$idCardPattern,
      //         message: '请输入身份证号',
      //         trigger: ['blur', 'change']
      //     }
      // ]

      this.$refs.uForm.validate().then(validate => {
        this.register()
      })
    },


    register () {
      if (this.requestStatus) {
        return
      }
      this.requestStatus = true
      // 如果校验通过执行注册
      uni.showLoading({
        title: '正在注册...'
      });
      this.$api.login.expandRegister(this.form).then(res => {
        uni.hideLoading();
        uni.showToast({
          icon: 'success',
          duration: 2000,
          title: '注册成功，即将跳转登录页'
        });
        uni.removeStorageSync('isRegister');
        setTimeout(() => {
          this.requestStatus = false
          this.gologin()
        }, 2000)
        this.updateScanRecordById()

      }).catch(err => {
        uni.hideLoading();
        this.requestStatus = false
      })

    },



    logout() {
      this.$api.login.logout().then(res => {
        uni.clearStorageSync();
        uni.navigateTo({
          url: '/pages/login/login'
        })
      })
    },
    back() {
      uni.navigateBack({
        delta: 1
      });
    },
    codeChange(text) {
      this.tips = text;
    },
    getCode() {
      let regExp = new RegExp(this.$phonePattern);
      let b = regExp.test(this.form.phone)
      if (!b) {
        uni.$u.toast('请输入正确的手机号')
        return
      }
      if (this.$refs.uCode.canGetCode) {
        // 模拟向后端请求验证码
        uni.showLoading({
          title: '正在获取验证码'
        })
        this.$api.service.getSmsCode({phonenumber: this.form.phone}).then(res => {
          uni.hideLoading();
          // 这里此提示会被this.start()方法中的提示覆盖
          uni.$u.toast('验证码已发送');
          // 通知验证码组件内部开始倒计时
          this.$refs.uCode.start();
        })
      } else {
        uni.$u.toast('倒计时结束后再发送');
      }
    },
    debounce(fn, delay) {
      console.log(delay)
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        fn.apply();
      }, delay);
    }

  }
}
</script>

<style lang="scss" scoped>
@import './index.rpx.css';
</style>