designer-hub/src/pages/login/index.vue

<script lang="ts" setup>
import { weixinMiniAppLogin } from '@/core/libs/requests'

const loginCode = ref('')
const phoneCode = ref('')
const loginType = ref('weixin')
const loginTypeOption = ref([
  {
    value: 'weixin',
    text: '微信',
  },
  {
    value: 'univerify',
    text: '一键登录',
  },
  {
    value: 'username',
    text: '账号密码',
  },
  {
    value: 'smsCode',
    text: '手机验证码',
  },
])
const toLogin = () => {
  if (loginType.value === 'username') {
    uni.navigateTo({
      url: '/uni_modules/uni-id-pages/pages/login/login-withpwd',
    })
  } else {
    uni.navigateTo({
      url: '/pages/login/login-withoutpwd?type=' + loginType.value,
      animationType: 'none',
      animationDuration: 0,
    })
  }
}
const toUserInfoPage = () => {
  uni.navigateTo({
    url: '/uni_modules/uni-id-pages/pages/userinfo/userinfo?showLoginManage=true',
  })
}
const weixinLogin = async () => {
  //   wx.getPhoneNumber
}
const getPhoneNumber = async ({ detail }) => {
  console.log(phoneCode)
  phoneCode.value = detail.code
  const { code } = await uni.login()
  loginCode.value = code
  console.log(code)
  const a = await weixinMiniAppLogin(phoneCode.value, code, '9b2ffbc1-7425-4155-9894-9d5c08541d62')
  console.log(a)
}
const getTestCode = async ({ detail }) => {
  phoneCode.value = detail.code
  const { code } = await uni.login()
  loginCode.value = code
}
</script>
<template>
  <view class="content">
    <textarea v-model="loginCode" placeholder="" placeholder-class="textarea-placeholder" />
    <textarea v-model="phoneCode" placeholder="" placeholder-class="textarea-placeholder" />
    <button style="margin: 20px 0 20px 0" @click="toUserInfoPage">个人资料</button>
    <uni-forms-item label="切换登录方式" labelWidth="70">
      <uni-data-checkbox
        :multiple="false"
        v-model="loginType"
        :localdata="loginTypeOption"
        mode="button"
      ></uni-data-checkbox>
    </uni-forms-item>
    <button @click="weixinLogin">前往登录</button>
    <!-- #ifdef MP-WEIXIN -->
    <button type="primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
      手机号一键登录
    </button>
    <!-- #endif -->
    <!-- #ifdef MP-WEIXIN -->
    <button type="primary" open-type="getPhoneNumber" @getphonenumber="getTestCode">
      获取测试码
    </button>
    <!-- #endif -->
  </view>
</template>

<style lang="scss">
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6rpx;
}

.logo {
  width: 200rpx;
  height: 200rpx;
  margin-top: 200rpx;
  margin-right: auto;
  margin-bottom: 50rpx;
  margin-left: auto;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 18px;
  color: #8f8f94;
}
</style>