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

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

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

      <u-form-item label="验证码" prop="smsCode" label-width="150">
        <u-input @focus="mixinInit.hasvalue(form)" 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>

      <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 justify-between">
      <view class="u-m-t-30" style="color: #2885ED;" @click="openPage('/pages/user/rigister')">新用户注册</view>
      <view class="u-m-t-30" style="color: #2885ED;" @click="openPage('/pages/user/accountLogin')">用户名登录</view>
    </view>

    <view style="margin-top: 200rpx;text-align: center; color: #999999;font-size: 35rpx;">
      快速登录
    </view>
    <view style="text-align: center; margin-top: 20rpx;" @click="mixinInit.handleWxLogin">
      <image src="/common/img/weixinIcon.png" mode="" style="width: 85rpx;height: 85rpx;"></image>
    </view>
  </view>
</template>

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

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

  const form = reactive({
    phone: '',
    verificationCodeId: '', // 图形验证码id
    verificationCodeValue: '', // 图形验证码值
    smsCode: ''
  });
  const imageBase64 = ref(null); // 图形验证码图片

  getImageCode();

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

  const submit = () => {
    loginForm.value.validate(valid => {
      if (valid) {
        login()
      }
    });
  }

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

  async function login() {
    uni.$ui.showLoading();
    try {
      const params = reactive({
        client: 1,
        data: {
          identifier: form.phone,
          credential: form.smsCode,
        },
        type: 1,
      });

      let res = await uni.$u.api.signin(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);
    }
  }

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

<style lang="scss" scoped>
  .code-image {
    width: 200rpx;
    height: 70rpx;
  }
</style>