designer-hub/packages/merchant/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'
import { loginAccountIcon, loginPswIcon, loginPswEye } from '@designer-hub/assets/src/svgs'

const userStore = useUserStore()
const { setUserInfo } = userStore
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 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-start px-7.5 bg-[#ffffff] pt-[100px]">
    <div class="flex flex-col justify-start mb-[57px] title">
      <div class="text-black text-2xl font-normal font-['PingFang SC']">你好!</div>
      <div class="text-black text-2xl font-normal font-['PingFang SC'] mt-[9px]">
        欢迎来到筑巢荟
      </div>
    </div>
    <div class="w-full form">
      <div class="bg-[#F6F6F6] item mb-[10px] flex items-center">
        <wd-img :src="loginAccountIcon" mode="widthFix" width="19px" class="mr-[16px]" />
        <wd-input type="number" placeholder="请输入手机号" />
      </div>
      <div class="bg-[#F6F6F6] item flex items-center">
        <wd-img :src="loginPswIcon" mode="widthFix" width="19px" class="mr-[16px]" />
        <wd-input type="number" placeholder="请输入密码" />
      </div>
    </div>
    <div class="w-full flex items-center justify-between mt-[19px]">
      <wd-checkbox :modelValue="true" shape="square">记住密码</wd-checkbox>
      <div class="text-[#2357e9] text-xs font-normal font-['PingFang SC']">忘记密码？</div>
    </div>
    <div class="w-full mt-[50px]"><wd-button block :round="false">登录</wd-button></div>
    <div class="mt-8">
      <span class="text-black/40 text-xs font-normal font-['PingFang SC'] leading-tight">
        登录即代表您已阅读并同意筑巢荟的
      </span>
      <span class="text-[#2357e9] text-xs font-normal font-['PingFang SC'] leading-tight">
        《服务使用协议》
      </span>
    </div>
  </div>
</template>

<style lang="scss">
.title {
  width: 100%;
}
.form {
  .item {
    border-radius: 10px;
    // height: 50px;
    padding: 10px;
    :deep(.wd-input) {
      background: transparent;
      height: 100%;
      border: none;
      width: 100%;
    }
  }
}
</style>