minnan/src/pages/user/login.vue

<template>
  <view class="p-3">
    <view v-if="type == 'mobile'" class="d-flex flex-column align-center justify-center">
      <image class="width-300 m-5" :src="baseLogo" mode="widthFix"></image>
      <view class="w-100 mt-3 mb-3">
        <u-form
          labelPosition="top"
          labelWidth="180"
          :model="loginFormModel"
          :rules="loginFormRules"
          ref="uForm"
        >
          <u-form-item
            label="手机号"
            prop="mobile"
            borderBottom
          >
            <u-input
              v-model="loginFormModel.mobile"
              placeholder="请输入手机号"
            />
          </u-form-item>
          <u-form-item
            label="密码"
            prop="password"
            borderBottom
          >
            <u-input
              v-model="loginFormModel.password"
              :password="true"
              placeholder="请输入密码(6-16位)"
            ></u-input>
          </u-form-item>
        </u-form>
      </view>
      <u-button type="primary" @click="loginMobile">
        登录
      </u-button>
      <view class="mt-3" />
      <u-button class="mt-3" type="primary" :plain="true" @click="type='wechat'">
        微信登录
      </u-button>
    </view>

    <view v-if="type == 'wechat'" class="d-flex flex-column align-center justify-center">
      <image class="width-300 m-5" :src="baseLogo" mode="widthFix"></image>
      <view class="mt-3 mb-3">
        <text class="text-align-center">请点击微信登录，并授权获取公开信息， 登录后您将获得更多权益</text>
      </view>
      <u-button type="primary" @click="loginWechat">
        微信登录
      </u-button>
      <!-- <view class="mt-3" />
      <u-button type="primary" :plain="true" @click="type='mobile'">
        手机号登录
      </u-button> -->
    </view>
  </view>
</template>

<script setup lang="ts">
import { useAuthStore } from '@/store/auth';
import baseLogo from 'https://mn.wenlvti.net/app_static/minnan/logo.png';
import { onLoad } from '@dcloudio/uni-app';
import { back } from '@/common/utils/PageAction';
import { toast } from '@/common/utils/DialogAction';
import { ref } from 'vue';
import { showError } from '@/common/composeabe/ErrorDisplay';

const type = ref('wechat');
const authStore = useAuthStore();

const loginFormModel = ref({
  mobile: '',
  password: '',
});
const loginFormRules = {
  'mobile': {
    type: 'string',
    required: true,
    message: '请填写手机号',
    trigger: ['blur', 'change']
  },
  'password': {
    type: 'string',
    min: 6,
    max: 16,
    required: true,
    message: '请填写密码(6-16位)',
    trigger: ['blur', 'change']
  },
}

function loginWechat() {
  uni.showLoading({ title: '登录中...' });
  Promise.all([
    uni.login({ provider: 'weixin' }),
    uni.getUserProfile({ desc: '用于完善会员资料' }),
  ])
    .then((res) => {
      console.log(res);
      //return;
      authStore.loginWechart(res[0].code, res[1]).then(() => {
        toast('登录成功');
        setTimeout(back, 200);
      }).catch(showError);
    })
    .catch(showError)
    .finally(() => uni.hideLoading());
}
function loginMobile() {
  uni.showLoading({ title: '登录中...' });
  authStore.loginMobile(
    loginFormModel.value.mobile, 
    loginFormModel.value.password
  ).then(() => {
    toast('登录成功');
    setTimeout(back, 200);
  }).catch(showError)
}
onLoad(() => {
  if (authStore.isLogged) {
    setTimeout(() => {
      back();
    }, 200);
  } else {
  }
})

</script>