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

<route lang="yaml">
style:
  navigationBarTitleText: 登录
</route>
<script lang="ts" setup>
import { login } from '../../core/libs/requests'
import { useUserStore } from '../../store'
import { loginAccountIcon, loginPswIcon } from '@designer-hub/assets/src/svgs'

const userStore = useUserStore()
const { setUserInfo } = userStore
const formData = ref({
  mobile: '',
  password: '',
  socialType: 10,
  socialCode: '1024',
  socialState: '9b2ffbc1-7425-4155-9894-9d5c08541d62',
  socialCodeValid: true,
})
const handleLogin = async () => {
  const { msg, code, data } = await login(formData.value)
  if (code !== 0) {
    uni.showToast({ title: msg })
  } else {
    setUserInfo(data)
    uni.reLaunch({ url: '/pages/home/index' })
  }
}
</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="请输入手机号" v-model="formData.mobile" />
      </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="请输入密码" v-model="formData.password" />
      </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" @click="handleLogin">登录</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 {
    // height: 50px;
    padding: 10px;
    border-radius: 10px;
    :deep(.wd-input) {
      width: 100%;
      height: 100%;
      background: transparent;
      border: none;
    }
  }
}
</style>