rtk-wms-uniapp/pages/login/loginPage.vue

<template>
  <gui-page :is-loading="isLoading">
    <template #gBody>
      <view style="padding:50rpx;">
        <view class="server-config" @click="handleSetServerIP">
          <text class="font-icons">&#xe6bc;</text>
        </view>
        <view style="height:150rpx;" />
        <view class="gui-flex gui-row gui-justify-content-center login-title">
          <image src="../../static/logo.png" style="width: 90rpx;height: 90rpx;" mode="aspectFit" />
          <text class="login-title-text">东智-MOMPlus</text>
          <!-- <text
								class="login-logo gui-icons gui-color-white gui-block gui-border-box gui-bg-primary gui-box-shadow gui-box">&#xe620;</text> -->
        </view>
        <view style="margin-top:80rpx;">
          <form @submit="submit">
            <view>
              <text class="gui-text-small gui-color-gray">账户</text>
            </view>
            <view class="gui-border-b">
              <input
                v-model="loginForm.username"
                type="text"
                class="gui-form-input"
                name="username"
                placeholder="登录账户"
              >
            </view>
            <view class="gui-margin-top">
              <text class="gui-text-small gui-color-gray">密码</text>
            </view>
            <view class="gui-border-b">
              <input
                v-model="loginForm.password"
                type="password"
                class="gui-form-input"
                name="password"
                placeholder="密码"
              >
            </view>
            <view class="gui-margin-top gui-flex gui-rows gui-space-between" hover-class="gui-tap">
              <text class="gui-text gui-color-gray gui-block" @tap="forgetPwd">忘记密码</text>
              <text class="gui-text gui-color-gray gui-block gui-text-right" @tap="loginbymsg">短信登录</text>
            </view>
            <view style="margin-top:68rpx;">
              <button
                type="default"
                class="gui-button gui-bg-primary gui-noborder"
                formType="submit"
                style="border-radius:50rpx;"
              >
                <text class="gui-color-white gui-button-text">登 录</text>
              </button>
            </view>
          </form>
        </view>

        <!-- <view class="gui-flex gui-rows gui-nowrap gui-align-items-center"
							style="margin-top:80rpx; display: flex;justify-content: center;">
							<view class="gui-title-line"></view>
							<text class="gui-primary-color gui-h6"
								style="padding-left:50rpx; padding-right:50rpx;">其他方式登录</text>
							<view class="gui-title-line"></view>
						</view>
						<view class="gui-flex gui-rows gui-nowrap gui-justify-content-center gui-margin-top">
							<view hover-class="gui-tap">
								<text class="other-login-icons gui-icons gui-color-gray">&#xe63e;</text>
							</view>
							<view hover-class="gui-tap">
								<text class="other-login-icons gui-icons gui-color-gray">&#xe6cd;</text>
							</view>
						</view> -->
      </view>
    </template>
  </gui-page>
</template>
<script>
import graceChecker from '@/Grace6/js/checker.js'
import {
  getFileStorage
} from '@/unit/fileStorage.js'
export default {
  data() {
    return {
      isLoading: false,
      loginForm: {
        username: 'admin',
        password: 'admin123',
        // username: "",
        // password: "",
        validCode: 'akiooa'
      }
    }
  },
  beforeCreate() {
    // #ifdef APP-PLUS
    getFileStorage('serverConfig.txt')
      .then(data => {
        if (data === null) {
          uni.$baseUrl = ''
        } else {
          const ipconfig = JSON.parse(data)
          uni.$baseUrl = ipconfig.deal + '://' + ipconfig.ip + ':' + ipconfig.port
        }
      })
      .catch((e) => {
        uni.showToast({
          title: '获取服务配置失败, 请检查本地文件是否丢失',
          duration: 2000,
          icon: 'none'
        })
      })
    // #endif
  },
  methods: {
    forgetPwd: function() {},
    loginbymsg: function() {},
    handleSetServerIP: function() {
      uni.navigateTo({
        url: '/pages/personCenter/accountConfig'
      })
    },
    submit: async function(e) {
      // 表单数据
      var formData = e.detail.value
      // 利用 graceUI 的表单验证工具进行验证
      // 定义表单规则
      var rule = [{
        name: 'username',
        checkType: 'string',
        checkRule: '4,50',
        errorMsg: '登录账户输入有误, 至少4个字符'
      },
      {
        name: 'password',
        checkType: 'string',
        checkRule: '4,16',
        errorMsg: '登录密码至少4个字符'
      }
      ]
      var checkRes = graceChecker.check(formData, rule)
      if (checkRes) {
        uni.$grace.showLoading('登录中...')
        await uni.$reqPost('login', {
          ...formData,
          tenantName: '瑞泰克',
		  tenantId: 1,
          rememberMe: true
        })
          .then(({
            code,
            data,
            msg
          }) => {
            if (code === 0) {
              uni.setStorageSync('token', data?.accessToken)
              // uni.setStorageSync("ACCESS_TOKEN", data?.accessToken);
              // uni.setStorageSync("REFRESH_TOKEN", data?.refreshToken);
              uni.$reqGet('loginInfo')
                .then(({
                  data
                }) => {
                  uni.setStorageSync('permissions', JSON.stringify(data?.permissions))
                  uni.setStorageSync('user', JSON.stringify(data?.user))
                })
              uni.$emit('loginSuccess', true)
              uni.switchTab({
                url: '/pages/tabbar/tabbarPanel',
                success: function(e) { // 跳转成功后刷新页面
                  // var page = getCurrentPages().pop()
                  // if (page === undefined || page === null) return
                  // page.onLoad();
                }
              })
            } else {
              uni.showToast({
                title: msg ?? '服务器配置错误！',
                duration: 2000,
                icon: 'none'
              })
            }
          })
      } else {
        uni.showToast({
          title: graceChecker.error,
          icon: 'none'
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
	.login-logo {
		width: 180rpx;
		height: 180rpx;
		font-size: 80rpx;
		text-align: center;
		line-height: 120rpx;
		padding: 30rpx;
		border-radius: 18rpx;
	}

	.login-title {
		height: 140rpx;
		display: flex;
		align-items: center;

		.login-title-text {
			font-size: 54rpx;
			font-weight: bold;
			color: rgba(0, 160, 233, 1);
		}
	}

	.other-login-icons {
		width: 88rpx;
		height: 88rpx;
		text-align: center;
		font-size: 70rpx;
		margin: 20rpx;
	}

	.server-config {
		position: fixed;
		top: 20px;
		right: 20px;

		text {
			font-size: 32px;
			color: #808080;
		}
	}
</style>