554 lines
12 KiB
Vue
554 lines
12 KiB
Vue
<template>
|
||
<view class="box">
|
||
|
||
<view class="" style="height: var(--status-bar-height);">
|
||
|
||
</view>
|
||
|
||
<Myindex style="float: right;"></Myindex>
|
||
|
||
|
||
|
||
<view class="content">
|
||
<view class="tit" style="margin: 0;">
|
||
您好！
|
||
</view>
|
||
<view class="tit">
|
||
欢迎进入吟龙土壤墒情监测溯系统!
|
||
</view>
|
||
|
||
<view class="input-card">
|
||
<view class="card-head">
|
||
<!-- <view class="triangle top" />
|
||
<view class="triangle bottom" />
|
||
<view class="code-login" @click="changeLoginType(0)" :class="{act:loginType==2}">
|
||
<span>验证码登录</span>
|
||
<view class="line" :style="{transform: 'translateX('+lineX+'rpx)'}" />
|
||
|
||
</view>
|
||
<view class="password-login" @click="changeLoginType(350)" :class="{act:loginType==1}">
|
||
密码登录
|
||
</view> -->
|
||
<view class="" style="background-color: #35D190;color: white;width: 100%;height: 100rpx;
|
||
text-align: center;line-height: 100rpx;">
|
||
账号登录
|
||
</view>
|
||
</view>
|
||
<view class="login-content">
|
||
<view class="code">
|
||
|
||
<view class="" v-if="loginType==1" style="margin-bottom: 20rpx;">
|
||
<view class="" style="display: flex;margin-bottom: 10rpx;">
|
||
<up-image :src="u('sj')" width="30rpx" height="44rpx"
|
||
style="margin-right: 20rpx;"></up-image>账号
|
||
</view>
|
||
<u-input placeholder="请输入用户账号"
|
||
customStyle="background:#F5F5F5;height:80rpx;padding-left:40rpx;border:none"
|
||
shape='circle' border="surround" v-model="formData.account"></u-input>
|
||
|
||
<view class="" style="display: flex;margin-top: 30rpx;margin-bottom: 10rpx;">
|
||
<up-image :src="u('mm')" width="30rpx" height="44rpx"
|
||
style="margin-right: 20rpx;"></up-image>密码
|
||
</view>
|
||
<u-input :password="!pwdShow" shape='circle'
|
||
customStyle="background:#F5F5F5;height:80rpx;padding-left:40rpx;border:none"
|
||
placeholder="请输入密码" border="surround" v-model="formData.password">
|
||
</u-input>
|
||
</view>
|
||
|
||
|
||
|
||
<view class="" v-else>
|
||
|
||
<view class="" style="display: flex;margin-bottom: 10rpx;">
|
||
<up-image :src="u('sj')" width="30rpx" height="44rpx"
|
||
style="margin-right: 20rpx;"></up-image>手机号
|
||
</view>
|
||
|
||
<u-input placeholder="请输入账号"
|
||
customStyle="background:#F5F5F5;height:80rpx;padding-left:40rpx;border:none"
|
||
shape='circle' border="surround" v-model="formData.account"></u-input>
|
||
|
||
<view class="" style="display: flex;margin-top: 30rpx;margin-bottom: 10rpx;">
|
||
<up-image :src="u('yzm')" width="30rpx" height="44rpx"
|
||
style="margin-right: 20rpx;"></up-image>验证码
|
||
</view>
|
||
<view class="" style="position: relative;">
|
||
<u-input type="number" shape='circle'
|
||
customStyle="background:#F5F5F5;height:80rpx;padding-left:40rpx;border:none;margin-bottom:15rpx"
|
||
placeholder="请输入验证码" border="surround" v-model="formData.code"></u-input>
|
||
|
||
|
||
<view class="get-code" :style="{color: countDown?'grey':''}" @click="getCode"><text
|
||
class="lineY"></text>
|
||
获取验证码 <text v-if='countDown'>{{countDown}}s</text> </view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
|
||
|
||
|
||
<!-- <view class="" style="font-size: 26rpx;">
|
||
<text>还没有账号？点击</text> <text @click="resgiter"
|
||
style="color: #35D190;text-decoration: underline;">注册</text>
|
||
</view> -->
|
||
|
||
<view class="sub-btn">
|
||
<u-button @click="submitFn" type="primary"
|
||
customStyle="border:none;height:90rpx;border-radius: 50rpx;" color="#34D190"
|
||
text="登录"></u-button>
|
||
</view>
|
||
|
||
|
||
</view>
|
||
|
||
|
||
|
||
</view>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<!-- <>old -->
|
||
|
||
<!-- <view class="login-type" v-for="(item,i) in arr1.list" :key="i" @click="aclick(i)">
|
||
{{item.name}}
|
||
<view class="line" v-if="i==num" />
|
||
</view>
|
||
<view class="" style="margin: 30rpx 0;">
|
||
<u-input placeholder="请输入账号"
|
||
customStyle="background:#F5F5F5;height:80rpx;padding-left:40rpx;border:none" shape='circle'
|
||
border="surround" v-model="formData.account"></u-input>
|
||
</view>
|
||
|
||
<view class="yanzm" v-if="num==0">
|
||
<u-input type="number" shape='circle'
|
||
customStyle="background:#F5F5F5;height:80rpx;padding-left:40rpx;border:none;width:120rpx;"
|
||
placeholder="请输入验证码" border="surround" v-model="formData.code"></u-input>
|
||
|
||
<view @tap="getCode" class="code" v-if="!isshow">{{tips}}</view>
|
||
<view class="code" v-else>{{countDown}}s</view>
|
||
|
||
</view>
|
||
<view class="" v-if="num==1">
|
||
<u-input :password="!pwdShow" shape='circle'
|
||
customStyle="background:#F5F5F5;height:80rpx;;padding-left:40rpx;border:none"
|
||
placeholder="请输入密码" border="surround" v-model="formData.password">
|
||
<template #suffix>
|
||
<u-icon :name="pwdShow?'eye-off':'eye-fill'" @click="pwdShow=!pwdShow" size="25"></u-icon>
|
||
</template>
|
||
</u-input>
|
||
</view>
|
||
<view class="resgiter" @click="resgiter">
|
||
用户注册
|
||
</view>
|
||
<view class="sub-btn">
|
||
<u-button @click="submitFn" type="primary" customStyle="border:none;height:90rpx" color="#34D190"
|
||
text="登录"></u-button>
|
||
</view> -->
|
||
|
||
</view>
|
||
|
||
|
||
|
||
</view>
|
||
<view class="agreement">
|
||
<text>登录代表您已经同意</text> <text style="color:#2D94FE ;">服务协议、隐私政策</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<style lang="scss" scoped>
|
||
.box {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background-image: url('/static/main/login/bg.png');
|
||
background-size: 100% 100%;
|
||
position: relative;
|
||
}
|
||
|
||
.content {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 700rpx;
|
||
|
||
.tit {
|
||
color: white;
|
||
font-size: 44rpx;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.input-card {
|
||
width: 700rpx;
|
||
box-sizing: border-box;
|
||
|
||
.card-head {
|
||
background-color: #fff;
|
||
display: flex;
|
||
position: relative;
|
||
|
||
|
||
.triangle {
|
||
position: absolute;
|
||
width: 0;
|
||
height: 0;
|
||
border-left: 12rpx solid transparent;
|
||
border-right: 12rpx solid transparent;
|
||
left: 50%;
|
||
}
|
||
|
||
.top {
|
||
border-top: 50rpx solid #31BE89;
|
||
top: -1rpx;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.bottom {
|
||
border-bottom: 50rpx solid white;
|
||
bottom: -1rpx;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.code-login {
|
||
width: 50%;
|
||
height: 50px;
|
||
background-color: #35D190;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 20rpx;
|
||
transition: 500ms;
|
||
color: white;
|
||
|
||
.line {
|
||
width: 100rpx;
|
||
background-color: #35D190;
|
||
height: 3px;
|
||
border-radius: 100rpx;
|
||
transition: 500ms;
|
||
|
||
}
|
||
}
|
||
|
||
.password-login {
|
||
width: 50%;
|
||
height: 50px;
|
||
background-color: #35D190;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 20rpx;
|
||
transition: 500ms;
|
||
color: white;
|
||
}
|
||
|
||
.act {
|
||
background-color: white;
|
||
color: black;
|
||
font-weight: bold;
|
||
}
|
||
|
||
|
||
|
||
}
|
||
|
||
.login-content {
|
||
background-color: #fff;
|
||
padding: 10rpx 40rpx;
|
||
transform: translateY(-1rpx);
|
||
color: #7A7A7A;
|
||
|
||
.code {
|
||
|
||
.get-code {
|
||
color: $theme-main-color;
|
||
font-size: 28rpx;
|
||
position: absolute;
|
||
right: 30rpx;
|
||
top: 20rpx;
|
||
|
||
.lineY {
|
||
width: 1px;
|
||
height: 20rpx;
|
||
background-color: $theme-main-color;
|
||
display: inline-block;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
|
||
.password {}
|
||
|
||
|
||
.sub-btn {
|
||
margin-top: 80rpx;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
// box-sizing: b;
|
||
}
|
||
|
||
// .login-type {
|
||
// display: flex;
|
||
// display: inline-block;
|
||
// margin-right: 50rpx;
|
||
// flex-direction: column;
|
||
// // align-items: center;
|
||
// justify-content: flex-start;
|
||
|
||
// .line {
|
||
// border-top: 3px solid #34D190;
|
||
// margin: 0 auto;
|
||
// margin-top: 10rpx;
|
||
// width: 60rpx;
|
||
// }
|
||
// }
|
||
|
||
// .yanzm {
|
||
// display: flex;
|
||
// justify-content: space-between;
|
||
|
||
// .u-input {
|
||
|
||
// margin-right: 60rpx;
|
||
// }
|
||
|
||
|
||
// }
|
||
|
||
// .code {
|
||
// width: 120rpx;
|
||
// height: 80rpx;
|
||
// background-color: #34D190;
|
||
// line-height: 80rpx;
|
||
// text-align: center;
|
||
// border-radius: 20rpx 20rpx;
|
||
// font-size: 20rpx;
|
||
// padding: 0rpx 20rpx;
|
||
// color: #fff;
|
||
// margin-top: 10rpx;
|
||
|
||
// }
|
||
|
||
|
||
|
||
// .resgiter {
|
||
// font-size: 30rpx;
|
||
// margin-top: 40rpx;
|
||
|
||
// }
|
||
|
||
}
|
||
}
|
||
|
||
.agreement {
|
||
position: absolute;
|
||
bottom: 100rpx;
|
||
margin: 0 auto;
|
||
font-size: 24rpx;
|
||
color: white;
|
||
width: auto;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 700rpx;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
}
|
||
</style>
|
||
<script setup>
|
||
import Myindex from '@/components/return/index.vue';
|
||
import {
|
||
login,
|
||
xinregister
|
||
} from '@/api/api.js';
|
||
|
||
import {
|
||
useStore
|
||
} from 'vuex'
|
||
import {
|
||
onMounted,
|
||
reactive,
|
||
ref
|
||
} from 'vue';
|
||
|
||
|
||
|
||
|
||
const store = useStore()
|
||
const num = ref(0)
|
||
const isshow = ref(false)
|
||
const pwdShow = ref(false)
|
||
const tips = ref('获取验证码')
|
||
const countDown = ref(0); // 倒计时秒数
|
||
const formData = reactive({
|
||
account: "",
|
||
password: "",
|
||
code: '',
|
||
scene: "1",
|
||
terminal: ''
|
||
|
||
})
|
||
const arr1 = reactive({
|
||
list: [{
|
||
name: '验证码登录',
|
||
id: 1
|
||
},
|
||
{
|
||
name: '账号登录',
|
||
id: 2
|
||
},
|
||
]
|
||
})
|
||
|
||
//判断安卓 ios
|
||
const checkUserAgent = () => {
|
||
|
||
uni.getSystemInfo({
|
||
success: (res) => {
|
||
const platform = res.platform.toLowerCase();
|
||
|
||
if (platform === 'ios') {
|
||
formData.terminal = 5;
|
||
} else if (platform === 'android') {
|
||
formData.terminal = 6;
|
||
} else if (platform === 'windows') {
|
||
formData.terminal = 4;
|
||
} else if (platform === 'mac') {
|
||
formData.terminal = 4;
|
||
}
|
||
|
||
|
||
}
|
||
})
|
||
// #ifdef H5
|
||
formData.terminal = 3;
|
||
// #endif
|
||
// #ifdef MP-WEIXIN
|
||
formData.terminal = 1;
|
||
// #endif
|
||
|
||
};
|
||
//倒计时
|
||
const startCountDown = () => {
|
||
countDown.value = 60
|
||
const timer = setInterval(() => {
|
||
countDown.value -= 1; // 更新倒计时秒数
|
||
|
||
if (countDown.value <= 0) {
|
||
clearInterval(timer); // 倒计时结束，清除定时器
|
||
isshow.value = false
|
||
|
||
}
|
||
}, 1000);
|
||
};
|
||
|
||
const getCode = () => {
|
||
|
||
if (countDown.value) return
|
||
|
||
if (!formData.account) return uni.$u.toast('账号不能为空');
|
||
let data = {
|
||
phone: formData.account,
|
||
scene: 101
|
||
}
|
||
xinregister(data).then((res) => {
|
||
|
||
if (res.code == 1) {
|
||
isshow.value = true
|
||
uni.$u.toast('验证码已发送');
|
||
// 通知验证码组件内部开始倒计时
|
||
startCountDown()
|
||
}
|
||
})
|
||
}
|
||
|
||
//注册
|
||
|
||
const resgiter = () => {
|
||
uni.navigateTo({
|
||
url: '/pages/Login/resgier'
|
||
})
|
||
}
|
||
//登录
|
||
const submitFn = () => {
|
||
|
||
|
||
if (!formData.account) return uni.$u.toast('账号不能为空');
|
||
if (!formData.password && formData.scene == 1) return uni.$u.toast('密码不能为空');
|
||
if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(formData.account)) return uni.$u.toast(
|
||
'请输入正确的手机号码'
|
||
);
|
||
// console.log(formData)
|
||
if (!formData.code && formData.scene == 2) return uni.$u.toast('验证码不能为空');
|
||
login(formData).then((res) => {
|
||
if (res.code == 1) {
|
||
uni.showLoading({
|
||
title: '登陆中'
|
||
})
|
||
|
||
store.dispatch('saveUserInfo', res.data)
|
||
setTimeout(() => {
|
||
uni.hideLoading()
|
||
uni.reLaunch({
|
||
url: '/pages/index/massif'
|
||
})
|
||
uni.$u.toast('登录成功');
|
||
}, 500)
|
||
|
||
}
|
||
|
||
})
|
||
|
||
|
||
}
|
||
|
||
const codeChange = (text) => {
|
||
tips.value = text
|
||
|
||
}
|
||
const aclick = (i) => {
|
||
num.value = i
|
||
if (i == 1) {
|
||
formData.scene = 1
|
||
formData.password = ''
|
||
} else {
|
||
formData.code = ''
|
||
formData.scene = 2
|
||
}
|
||
}
|
||
const lineX = ref(0)
|
||
const loginType = ref(1)
|
||
const changeLoginType = (num) => {
|
||
num ? loginType.value = 1 : loginType.value = 2
|
||
formData.scene = loginType.value
|
||
|
||
console.log(formData.scene)
|
||
lineX.value = num
|
||
}
|
||
const u = (name) => {
|
||
return `/static/main/login/${name}.png`
|
||
}
|
||
onMounted(() => {
|
||
checkUserAgent()
|
||
|
||
|
||
})
|
||
</script> |