sfms3.0-uniapp/src/pages/login/index.vue

<template>
  <view class="content">
    <image mode="widthFix" class="loginimg" src="../../static/icons_ui/login_bg.png"></image>
    <view class="login_title">
      <text>您好，欢迎使用</text><br />
      WMS仓库管理系统<br />
      版本: {{ version }}
    </view>
    <view class="bgf login_wrap">
      <view class="loginbox">
        <form>
          <view class="mytab">
            <view class="mytabline" :class="tapstyle == 2 ? 'active_in' : ''" @click="tapchenge(2)">密码登录</view>
          </view>
          <view class="mybox" v-if="tapstyle == 2">
            <view class="conone">
              <view class="title uni-flex">
                <image class="icon_normal" src="@/static/icons_ui/icon_tenant.svg"></image>
                租户
              </view>
              <view>
                <!-- 	<input class="uni-input" placeholder="请输入租户名" v-model="tenantName" disabled="true" /> -->
                <uni-data-select class="uni-data-select" placeholder="请输入租户名" v-model="tenantValue" :clear="false" :localdata="tenantArray"></uni-data-select>
              </view>
            </view>
            <view class="conone">
              <view class="title uni-flex">
                <image class="icon_normal" src="@/static/icons_ui/icon_login_user.svg"></image>
                用户名
              </view>
              <view>
                <input class="uni-input" style="padding: 25rpx" placeholder="请输入用户名" v-model="username" />
              </view>
            </view>
            <view class="conone">
              <view class="title uni-flex">
                <image class="icon_normal" src="../../static/icons_ui/icon_login_password.svg"></image>
                密码
              </view>
              <view class="uni-input-wrapper">
                <input class="uni-input" style="padding: 25rpx" placeholder="请输入密码" :password="showPassword" v-model="password" />
                <text class="uni-icon" :class="[!showPassword ? 'uni-eye-active' : '']" @click="changePassword">&#xe568;</text>
              </view>
            </view>
          </view>
          <view style="display: flex; flex-direction: row">
            <view class="uni-input-wrapper">
              <input class="" style="height: 80rpx; background-color: #f7f9ff; margin-right: 20rpx" placeholder="请输入验证码" type="number" v-model="code" />
            </view>
            <view class="display: flex; align-items: center; text-center">
              <view class="">
                <image :src="imageSrc" style="width: 260rpx; height: 80rpx" @click="getCode"></image>
              </view>
              <view style="font-size: 35rpx; color: #476df5" @click="getCode"> 获取验证码?</view>
            </view>
          </view>
          <view class="loginbtnbox">
            <button @click="handelerlogin()" class="loginbtn">登录</button>
          </view>
        </form>
      </view>
    </view>
    <com-message ref="comMessageRef" />
  </view>
</template>

<script setup lang="ts">
import { onLoad, onShow, onNavigationBarButtonTap, onReady } from '@dcloudio/uni-app'
import { ref, getCurrentInstance } from 'vue'
import { getCaptchaImage } from '@/api/request2.js'
import { useCountStore } from '@/store'
// 获取自定义的store
const store = useCountStore()
const { proxy } = getCurrentInstance()
const tenantArray = ref(JSON.parse(import.meta.env.VITE_TENANT))
const smloginmsg = ref('')
const tenantValue = ref(0)
// const tenantName = ref('闻荫源码')
const username = ref('')
const password = ref('')
const tapstyle = ref(2)
const loading = ref(false)
const showPassword = ref(true)
const imageSrc = ref('')
const code = ref('')
const uuid = ref('')
const version = ref('')
const comMessageRef = ref('')
// 返回首页
onNavigationBarButtonTap((e) => {
  if (e.index === 0) {
    uni.navigateTo({
      url: '/pages/config/config'
    })
  }
})
onReady(() => {
  console.log()
})
onLoad(() => {
  tenantValue.value = tenantArray.value[0].value
  uni.clearStorageSync()
  uni.clearStorage() // 清除缓存
  if (import.meta.env.VITE_USER_NODE_ENV === 'development') {
    username.value = 'admin'
    password.value = 'win123456'
  }
  uni.setNavigationBarColor({
    frontColor: '#ffffff',
    backgroundColor: '#476DF5 !important'
  })

  // #ifdef APP-PLUS
  uni.setNavigationBarColor({
    frontColor: '#ffffff',
    backgroundColor: '#476DF5'
  })
  // #endif
  getCode()
})
const handelerlogin = () => {
  if (username.value === '') {
    proxy.$modal.showToast('用户名不能为空')
  } else if (password.value === '') {
    proxy.$modal.showToast('密码不能为空')
  } else if (code.value === '') {
    proxy.$modal.showToast('验证码不能为空')
  } else {
    // console.log("用户名：", this.username, "密码：", this.password, this.tapstyle, this.smloginmsg)
    const logininfo = {
      username: '',
      password: '',
      code: '',
      uuid: ''
    }
    // 密码登录
    if (tapstyle.value == 2) {
      logininfo.username = username.value
      logininfo.password = password.value
      logininfo.code = code.value
      logininfo.uuid = uuid.value
      logininfo.tenantName = tenantArray.value.find((item) => item.value == tenantValue.value).text
      uni.setStorageSync('tenantId', tenantValue.value)
    } else if (tapstyle.value == 1) {
    }
    const params = JSON.stringify(logininfo)
    newLogin(logininfo)
  }
}
const newLogin = async (logininfo) => {
  try {
    proxy.$modal.loading('正在登录')
    await store.Login(logininfo)
    proxy.$modal.closeLoading()
    uni.setStorageSync('hasLogin', true)
    uni.switchTab({
      url: '/pages/index/index'
    })
    uni.setStorageSync('username', username.value)
  } catch (e) {
    proxy.$modal.closeLoading()
    proxy.$modal.showToast(e)
  }
}
const tapchenge = (e) => {
  tapstyle.value = e
}
const onchange = (e) => {
  const { value } = e.detail
}
const changePassword = () => {
  showPassword.value = !showPassword.value
}
const showErrorMessage = (message) => {
  console.log(comMessag1e.value)
  comMessageRef.value.showErrorMessage(message, (res) => {})
}
const getCode = () => {
  getCaptchaImage()
    .then((res) => {
      if (res) {
        const code = res.data.img
        const base64 = `data:image/jpeg;base64,${code}`
        imageSrc.value = base64.replace(/[\r\n]/g, '')
        uuid.value = res.data.uuid
      }
    })
    .catch((error) => {
      showErrorMessage(error)
    })
  getAppVersion()
}
const getAppVersion = () => {
  const systemInfo = uni.getSystemInfoSync()
  // #ifdef H5
  version.value = systemInfo.appVersion
  console.log(systemInfo.appVersion, '版本号')
  // #endif

  // #ifdef APP
  version.value = systemInfo.appWgtVersion
  // #endif
}
</script>

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

.content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
}

.cs {
  margin-bottom: 20upx;
}

.mytab {
  display: flex;
}

.mytabline {
  flex: 1;
  text-align: center;
  padding: 10rpx 0;
  color: #666;
  position: relative;
  font-size: 0.875rem;
}

.active_in {
  color: #101010;
  font-weight: bold;
}

.active_in::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 8rpx;
  background-color: #007aff;
  width: 40rpx;
  border-radius: 8rpx;
}

.loginbox {
  box-sizing: border-box;
  padding: 30rpx;
}

.loginimg {
  width: 100%;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.conone {
  margin: 30rpx 0;
  align-items: center;
}

.conone .uni-input-wrapper {
  position: relative;
}

.conone .uni-input {
  background-color: #f7f9ff;
  height: 90rpx;
  line-height: 90rpx;
  padding: 0 0 0 20rpx;
}
.conone .uni-data-select .uni-select {
  background-color: #f7f9ff;
  height: 90rpx;
  line-height: 90rpx;
  border: 0px;
  padding: 0 10rpx 0 20rpx;
}
.conone .title {
  font-size: 0.875rem;
  align-items: center;
  margin-bottom: 20rpx;
  letter-spacing: 1rpx;
}

.conone .title image {
  margin-right: 6rpx;
}

.uni-easyinput .is-input-border {
  border-color: transparent !important;
}

.loginbtnbox {
  margin-top: 40rpx;
}

.loginbtn {
  color: #fff;
  font-size: 0.875rem;
  height: 100rpx;
  line-height: 100rpx;
  background: #5d66de;
  border-radius: 8rpx;
  border: none;
  outline: none;
}

.conone .uni-icon {
  float: right;
  position: absolute;
  right: 20rpx;
  color: #ccc;
  font-size: 1.25rem;
}

.conone .uni-eye-active {
  color: #5a7cf3;
}
</style>