147 lines
4.8 KiB
Vue
147 lines
4.8 KiB
Vue
<route lang="jsonc" type="page">{
|
||
"layout": "default",
|
||
"style": {
|
||
"navigationStyle": "custom"
|
||
}
|
||
}</route>
|
||
|
||
<template>
|
||
<view class="login-bg">
|
||
<wd-navbar safeAreaInsetTop :bordered="false"
|
||
custom-style="background-color: transparent !important;"></wd-navbar>
|
||
<view class="px-68rpx">
|
||
<view class="font-bold text-44rpx text-[#333333] leading-60rpx">你好，欢迎使用</view>
|
||
<view class="font-bold text-44rpx text-[#333333] leading-60rpx mt-18rpx">茶艺师平台</view>
|
||
<view class="mt-18rpx font-400 text-26rpx text-[#606266] leading-40rpx w-354rpx">此小程序仅供企业内部员工登录，请凭茶艺师账号密码登录
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 登录表单 -->
|
||
<view class="mt-100rpx px-58rpx">
|
||
<wd-form ref="form" :model="model">
|
||
<view>
|
||
<view class="font-400 text-30rpx text-[#606266] leading-44rpx">账号</view>
|
||
<view class="mt-20rpx">
|
||
<wd-input v-model="model.mobile" type="text" placeholder="请输入账号" inputmode="numeric" no-border
|
||
custom-class="!bg-[#F6F7F8] !rounded-16rpx"
|
||
custom-input-class="!px-32rpx !h-104rpx"/>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="mt-40rpx">
|
||
<view class="font-400 text-30rpx text-[#606266] leading-44rpx">密码</view>
|
||
<view class="mt-20rpx password-input">
|
||
<wd-input v-model="model.passowrd" showPassword placeholder="请输入密码" no-border
|
||
custom-class="!bg-[#F6F7F8] !rounded-16rpx"
|
||
custom-input-class="!px-32rpx !h-104rpx">
|
||
</wd-input>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="mt-74rpx">
|
||
<wd-button custom-class="!bg-[#4C9F44] !rounded-8rpx !text-[#fff] !text-30rpx !leading-42rpx !h-90rpx !w-[100%] box-border" @click="Login.handleToLogin">立即登录</wd-button>
|
||
</view>
|
||
|
||
<view class="mt-44rpx font-400 text-28rpx text-[#4C9F44] leading-40rpx" @click="router.navigateTo('/pages/login/password')">
|
||
忘记密码？
|
||
</view>
|
||
</wd-form>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { mobile as testMobile } from '@/utils/test'
|
||
import { router } from '@/utils/tools'
|
||
import { useToast } from 'wot-design-uni'
|
||
import { useUserStore } from '@/store'
|
||
|
||
const OSS = inject('OSS')
|
||
const toast = useToast()
|
||
|
||
/** 表单相关 **/
|
||
const model = reactive<{
|
||
mobile: string
|
||
passowrd: string
|
||
}>({
|
||
mobile: '', // 18857339563
|
||
passowrd: ''
|
||
})
|
||
|
||
|
||
onLoad((args) => {
|
||
// 读取缓存的账号密码
|
||
const savedMobile = uni.getStorageSync('loginMobile')
|
||
const savedPassword = uni.getStorageSync('loginPassword')
|
||
if (savedMobile) {
|
||
model.mobile = savedMobile
|
||
}
|
||
|
||
if (savedPassword) {
|
||
model.passowrd = savedPassword
|
||
}
|
||
})
|
||
|
||
const Login = {
|
||
// 登录
|
||
handleToLogin: async () => {
|
||
// TODO 如果是edit的话就是修改手机号
|
||
if (!testMobile(model.mobile)) {
|
||
toast.info('请输入正确的账号')
|
||
return
|
||
}
|
||
|
||
if (!model.passowrd) {
|
||
toast.info('请输入密码')
|
||
return
|
||
}
|
||
|
||
uni.showLoading({
|
||
title: '登录中...'
|
||
})
|
||
|
||
try {
|
||
const userStore = useUserStore()
|
||
const res = await userStore.mobileLogin(model.mobile, model.passowrd, 1, 1, 1)
|
||
uni.hideLoading()
|
||
|
||
// 这里记录用户账号密码，下次自动填充
|
||
uni.setStorageSync('loginMobile', model.mobile)
|
||
uni.setStorageSync('loginPassword', model.passowrd)
|
||
|
||
toast.success('登录成功')
|
||
setTimeout(() => {
|
||
router.reLaunch('/pages/index/index')
|
||
}, 1000)
|
||
} catch (error) {
|
||
toast.info('登录失败，请稍后重试')
|
||
uni.hideLoading()
|
||
return
|
||
}
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-color: #fff;
|
||
}
|
||
|
||
.login-bg {
|
||
background-color: #fff;
|
||
background-image: url(#{$OSS}images/chayishi/login_image1.png);
|
||
background-size: 100% 420rpx;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
.password-input {
|
||
:deep() {
|
||
.wd-input__icon {
|
||
padding-right: 20rpx !important;
|
||
background: transparent !important;
|
||
}
|
||
}
|
||
}
|
||
</style>
|