TALL-MUI-4/pages/user/rigister.vue

<template>
  <view class="u-p-l-50 u-p-r-50 u-p-t-30">
    <u-form :model="form" ref="signUpForm" :error-type="['message']">
      <u-form-item label="手机号码" prop="phone" label-width="160">
        <u-input placeholder="请输入手机号" v-model="form.phone" type="number"></u-input>
      </u-form-item>

      <u-form-item label="图形验证码" prop="verificationCodeValue" label-width="160">
        <u-input placeholder="请输入计算结果" v-model="form.verificationCodeValue" type="number"></u-input>
        <image slot="right" :src="renderData.imageBase64" mode="aspectFit" class="code-image" @click="getImageCode"></image>
      </u-form-item>

      <u-form-item label="验证码" prop="smsCode" label-width="160">
        <u-input @focus="mixinInit.hasvalue(form, renderData)" placeholder="请输入验证码" v-model="form.smsCode" type="text"></u-input>
        <u-button slot="right" type="primary" size="mini" v-show="mixinInit.dataObj.showPaste" @click="mixinInit.setCode" class="u-m-r-20">粘贴</u-button>
        <u-button slot="right" size="mini" v-if="mixinInit.dataObj.showInterval">{{ mixinInit.dataObj.interval }}</u-button>
      </u-form-item>

      <u-form-item label="用户名" prop="account" label-width="160">
        <u-input placeholder="请输入用户名" v-model="form.account" type="text"></u-input>
      </u-form-item>

      <u-form-item label="密码" prop="password" label-width="160">
        <u-input :password-icon="true" type="password" v-model="form.password" placeholder="请输入密码"></u-input>
      </u-form-item>

      <view class="flex flex-nowrap">
        <view class="flex-sub"></view>
        <view class="u-m-t-30 u-font-12 text-gray-400" @click="openPage('/pages/user/forgetPassword')">忘记密码</view>
      </view>
    </u-form>

    <view class="u-m-t-50">
      <u-button @click="submit" type="primary">立即注册</u-button>
    </view>

    <view class="flex flex-direction u-m-t-30">
      <view class="flex flex-nowrap u-m-b-20">
        <u-checkbox v-model="renderData.checked" @change="changeChecked"></u-checkbox>
        <view class="agreement-text">
          已阅读并同意使用
          <span class="text-blue" @click="openPage('/pages/user/agreement')">《时物链条用户协议》</span>
        </view>
      </view>
      <p class="text-blue u-m-l-70">没有套路，真实需求</p>
    </view>

    <view class="flex flex-nowrap">
      <view class="flex-1"></view>
      <view class="u-m-t-60 text-blue" @click="openPage('/pages/user/accountLogin')">已有账号，去登录</view>
    </view>
  </view>
</template>

<script setup>
  import { ref, computed, reactive } from 'vue';
  import { useStore } from 'vuex';
  import { onReady } from '@dcloudio/uni-app';
  import userMixin from '@/hooks/user/userMixin'

  const store = useStore();
  const mixinInit = userMixin();
  const signUpForm = ref(null);

  const form = reactive({
    phone: '',
    verificationCodeValue: '', // 图形验证码值
    smsCode: '',
    account: '',
    password: ''
  })
  const renderData = reactive({
    verificationCodeId: '', // 图形验证码id
    imageBase64: '', // 图形验证码图片
    checked: false
  })

  onReady(() => {
    signUpForm.value.setRules(mixinInit.rules);
  });

  getImageCode(); // 获取图形验证码

  const submit = () => {
    signUpForm.value.validate(valid => {
      if (valid) {
        signUp()
      }
    });
  }

  async function signUp() {
    uni.$ui.showLoading();
    try {
      if (!renderData.checked) {
        uni.$ui.showToast('请阅读并同意使用用户协议');
        return;
      }

      const params = {
        account: form.account,
        password: form.password,
        phone: form.phone,
        smsCode: form.smsCode
      };

      let res = await uni.$u.api.signup(params);
      store.commit('user/setToken', res.token);
      store.commit('user/setUser', res);
      uni.$storage.setStorageSync('anyringToken', res.token || '');
      uni.$storage.setStorageSync('user', JSON.stringify(res) || '');

      uni.$ui.hideLoading();

      uni.navigateTo({
        url: '/pages/index/index'
      });
    } catch (error) {
      uni.$ui.hideLoading();
      uni.$ui.showToast(error);
    }
  }

  // 获取图形验证码
  async function getImageCode() {
    uni.$ui.showLoading();
    try {
      const data = await uni.$u.api.getImageCode();
      renderData.imageBase64 = data.imageBase64 || '';
      renderData.verificationCodeId = data.verificationCodeId || '';
      uni.$ui.hideLoading();
    } catch (error) {
      uni.$ui.hideLoading();
      uni.$ui.showToast(error);
    }
  }

  // 改变用户协议选中状态
  function changeChecked() {
    renderData.checked = !renderData.checked;
  }

  function openPage(url) {
    uni.navigateTo({
      url: url
    })
  }
</script>

<style>
  .code-image {
    width: 200rpx;
    height: 70rpx;
  }

  .text-blue {
    color: #0081ff;
  }
</style>