workspace/code/base-project/base-uniapp-main/src/pages-sub/login/index.vue

<script lang="ts" setup>
import type { FieldValidateError, FormExpose, FormRules } from 'sard-uniapp'
import { getWindowInfo, toast } from 'sard-uniapp'
import { reactive, ref } from 'vue'
import { loginOrgApi } from '@/request/api'
import { useUserStore } from '@/store'

const userStore = useUserStore()

const startOffset = ref(getWindowInfo().statusBarHeight + 60)

const _loading = ref(false)

const formModel = reactive({
  orgid: userStore.userInfo.orgid,
  userid: userStore.userInfo.userid,
  password: '',
})

const formRules: FormRules = {
  orgid: {
    required: true,
    message: '请输入机构码',
  },
  userid: {
    required: true,
    message: '请输入账号',
  },
}

const formRef = ref<FormExpose>()

function onSubmit() {
  formRef.value
    ?.validate()
    .then(() => {
      _loading.value = true
      loginOrgApi({
        orgid: formModel.orgid,
        userid: formModel.userid,
        password: formModel.password,
      }).then((res) => {
        if (res.data) {
          userStore.userInfo.orgid = formModel.orgid
          userStore.userInfo.userid = formModel.userid
          userStore.userInfo.token = res.data

          uni.showToast({
            title: '登录成功',
            icon: 'success',
          })

          uni.switchTab({
            url: '/pages/home/index',
          })
        }
        else {
          uni.showToast({
            title: '登录失败，请稍后再试',
            icon: 'error',
          })
        }
      }).finally(() => {
        _loading.value = false
      })
    })
    .catch((error: FieldValidateError[]) => {
      toast.fail(error[0].message)
      console.log('error submit!', error)
    })
}
</script>

<template>
  <view class="form-container">
    <sar-form-plain
      ref="formRef"
      :model="formModel"
      :rules="formRules"
      scroll-to-first-error
      :scroll-into-view-options="{
        startOffset,
        position: 'start',
      }"
    >
      <view class="form-description">
        <view class="form-title">
          欢迎登录！
        </view>
        <view class="form-subtitle">
          请输入机构码、账号和密码
        </view>
      </view>

      <view class="form-list">
        <sar-form-item-plain name="orgid">
          <template #custom="{ fieldId }">
            <view class="form-label" :class="fieldId">
              <text>机构码</text>
            </view>
            <view class="form-input">
              <sar-input
                v-model="formModel.orgid"
                placeholder="请输入机构码"
                clearable
              >
                <template #prepend>
                  <sar-icon family="iconfont" name="company" size="36rpx" />
                </template>
              </sar-input>
            </view>
          </template>
        </sar-form-item-plain>
        <sar-form-item-plain name="userid">
          <template #custom="{ fieldId }">
            <view class="form-label" :class="fieldId">
              账号
            </view>
            <view class="form-input">
              <sar-input
                v-model="formModel.userid"
                placeholder="请输入账号"
                clearable
              >
                <template #prepend>
                  <sar-icon family="iconfont" name="user" size="36rpx" />
                </template>
              </sar-input>
            </view>
          </template>
        </sar-form-item-plain>
        <sar-form-item-plain name="password">
          <template #custom="{ fieldId }">
            <view class="form-label" :class="fieldId">
              密码
            </view>
            <view class="form-input">
              <sar-input
                v-model="formModel.password"
                placeholder="请输入密码"
                clearable
              >
                <template #prepend>
                  <sar-icon family="iconfont" name="lock" size="36rpx" />
                </template>
              </sar-input>
            </view>
          </template>
        </sar-form-item-plain>
      </view>

      <view class="footer">
        <sar-button loading-type="clock" :loading="_loading" @click="onSubmit">
          登录
        </sar-button>
      </view>
    </sar-form-plain>
  </view>
</template>

<style>
page {
  background-color: #fff;
}
</style>

<style lang="scss" scoped>
@import '@/style/mixins.scss';

.form-container {
  padding: 0rpx 32rpx;
}

.form-description {
  padding: 64rpx 0 64rpx;
  color: var(--sar-secondary-color);

  .form-title {
    font-size: 42rpx;
    font-weight: bold;
    color: #000;
  }
  .form-subtitle {
    margin-top: 16rpx;
    font-size: 24rpx;
  }
}

.form-list {
  display: flex;
  flex-direction: column;
  @include flexGap(36rpx, column);
}

.form-label {
  display: flex;
  font-size: 28rpx;
}

.form-star {
  color: var(--sar-danger);
}
.form-input {
  margin-top: 20rpx;
  :deep(.sar-input) {
    background-color: #fff;
    .sar-icon {
      color: var(--sar-input-placeholder-color);
    }
  }
  :deep(.sar-input_focused) {
    .sar-input__prepend {
      .sar-icon {
        color: var(--sar-input-focused-border-color);
      }
    }
  }
}

.footer {
  // position: sticky;
  // bottom: 0;
  padding-top: 64rpx;
}
</style>