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

<route lang="yaml">
style:
  navigationBarTitleText: 登录
</route>
<script lang="ts" setup>
import { weixinMiniAppLogin } from '../../core/libs/requests'
import { logo } from '../../core/libs/svgs'
import { useUserStore } from '../../store'

const userStore = useUserStore()
const { setUserInfo } = userStore
const loginCode = ref('')
const phoneCode = ref('')
const getPhoneNumber = async ({ detail: { code: phoneCode } }) => {
  const { code } = await uni.login()
  console.log(code, phoneCode)
  const { data } = await weixinMiniAppLogin(phoneCode, code, '9b2ffbc1-7425-4155-9894-9d5c08541d62')
  setUserInfo({
    token: data.accessToken,
    userId: data.userId,
    accessToken: data.accessToken,
    refreshToken: data.refreshToken,
    expiresTime: data.expiresTime,
    openid: data.openid,
  })
  uni.switchTab({
    url: '/pages/mine/index',
  })
}
const getTestCode = async ({ detail }) => {
  phoneCode.value = detail.code
  const { code } = await uni.login()
  loginCode.value = code
}
</script>
<template>
  <div class="flex-grow flex flex-col items-center justify-around px-3.5">
    <div>
      <wd-img :src="logo" width="78" height="78"></wd-img>
      <div class="text-black text-2xl font-normal font-['PingFang SC'] leading-[10.18px]">
        筑巢荟
      </div>
    </div>
    <div class="w-full">
      <button
        type="primary"
        size="large"
        :style="{
          backgroundColor: 'black',
        }"
        open-type="getPhoneNumber"
        @getphonenumber="getPhoneNumber"
      >
        手机号一键登录
      </button>
      <div class="w-[318px] mt-8">
        <span class="text-black/40 text-xs font-normal font-['PingFang SC'] leading-tight">
          如您点击授权，您将同意并授权
        </span>
        <span class="text-[#0cbe7c] text-xs font-normal font-['PingFang SC'] leading-tight">
          《筑巢荟用户服务协议》、《隐私政策》、《注册协议》
        </span>
      </div>
    </div>
  </div>
  <!-- <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>