|
|
|
|
@ -1,11 +1,403 @@
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
//
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
<view class="login">login</view>
|
|
|
|
|
<view class="">
|
|
|
|
|
<HeadTabbar :isShowIcon="false" tabbarName="登录页面"></HeadTabbar>
|
|
|
|
|
<view class="normal-login-container" style="">
|
|
|
|
|
<!--鸿森通货运 标题 -->
|
|
|
|
|
<view
|
|
|
|
|
class="logo-content align-center justify-center flex"
|
|
|
|
|
style="position: relative; z-index: 9999"
|
|
|
|
|
>
|
|
|
|
|
<text class="title">鸿森通货运</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="login-form-content">
|
|
|
|
|
<view class="login_menu"> </view>
|
|
|
|
|
|
|
|
|
|
<!-- 账号登录 -->
|
|
|
|
|
<view class="">
|
|
|
|
|
<view class="input-item flex align-center">
|
|
|
|
|
<view class="iconfont icon-user icon"></view>
|
|
|
|
|
<input
|
|
|
|
|
v-model="loginForm.account"
|
|
|
|
|
class="input"
|
|
|
|
|
type="number"
|
|
|
|
|
placeholder="请输入手机号"
|
|
|
|
|
:maxlength="11"
|
|
|
|
|
/>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="input-item flex align-center">
|
|
|
|
|
<view class="iconfont icon-password icon"></view>
|
|
|
|
|
<input
|
|
|
|
|
v-model="loginForm.password"
|
|
|
|
|
type="password"
|
|
|
|
|
class="input"
|
|
|
|
|
placeholder="请输入密码"
|
|
|
|
|
:maxlength="15"
|
|
|
|
|
/>
|
|
|
|
|
</view>
|
|
|
|
|
<view>
|
|
|
|
|
<uni-row>
|
|
|
|
|
<uni-col :span="16">
|
|
|
|
|
<view class="input-item flex align-center">
|
|
|
|
|
<view class="iconfont icon-code icon"></view>
|
|
|
|
|
<input
|
|
|
|
|
v-model="loginForm.smsCode"
|
|
|
|
|
type="number"
|
|
|
|
|
class="input"
|
|
|
|
|
placeholder="请输入验证码"
|
|
|
|
|
:maxlength="6"
|
|
|
|
|
/>
|
|
|
|
|
</view>
|
|
|
|
|
</uni-col>
|
|
|
|
|
<uni-col :span="8">
|
|
|
|
|
<view class="login-code">
|
|
|
|
|
<button
|
|
|
|
|
:class="{ 'login-code-verification': canclick, disabled: !canclick }"
|
|
|
|
|
plain
|
|
|
|
|
@click="countdown"
|
|
|
|
|
>
|
|
|
|
|
{{ content }}
|
|
|
|
|
</button>
|
|
|
|
|
</view>
|
|
|
|
|
</uni-col>
|
|
|
|
|
</uni-row>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<view class="action-btn">
|
|
|
|
|
<button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">
|
|
|
|
|
登录
|
|
|
|
|
</button>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<view class="text-center">
|
|
|
|
|
<text @click="handleUserAgrement" class="text-blue">忘记密码</text>
|
|
|
|
|
<text class="border_class"></text>
|
|
|
|
|
<text @click="handlePrivacy" class="text-blue">注册账号</text>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<!-- ---------------用户协议---------------- -->
|
|
|
|
|
<view style="display: flex; justify-content: center; margin-right: 66rpx">
|
|
|
|
|
<view style="margin: 20rpx 0 10rpx 30rpx; display: flex; align-items: center">
|
|
|
|
|
<view>
|
|
|
|
|
<uni-data-checkbox
|
|
|
|
|
v-model="agreementSearch"
|
|
|
|
|
@change="agreementSearchItem"
|
|
|
|
|
multiple
|
|
|
|
|
:localdata="agreement"
|
|
|
|
|
></uni-data-checkbox>
|
|
|
|
|
</view>
|
|
|
|
|
<view @click="clickNativeRule" style="margin-left: -25px"
|
|
|
|
|
>《鸿森通用户服务协议》</view
|
|
|
|
|
>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
import { loginSmsCode, loginUser } from '@/services/home'
|
|
|
|
|
import { ENV } from '@/utils/env'
|
|
|
|
|
import { useMemberStore } from '@/stores'
|
|
|
|
|
import { onMounted } from 'vue'
|
|
|
|
|
import { ref } from 'vue'
|
|
|
|
|
|
|
|
|
|
const feilUrl = ref()
|
|
|
|
|
const feilUrl1 = ref()
|
|
|
|
|
const agreementSearch = ref([]) //默认选中协议
|
|
|
|
|
const showGetPhoneNumber = ref(false) //默认可以点击一键登录
|
|
|
|
|
const agreement = ref([
|
|
|
|
|
{
|
|
|
|
|
value: 1,
|
|
|
|
|
},
|
|
|
|
|
])
|
|
|
|
|
|
|
|
|
|
const loginForm = ref({
|
|
|
|
|
account: '',
|
|
|
|
|
password: '',
|
|
|
|
|
smsCode: '',
|
|
|
|
|
jsCode: '',
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
const content = ref('获取验证码') // 按钮里显示的内容
|
|
|
|
|
const totaltime = ref(60) // 记录具体倒计时时间
|
|
|
|
|
const UniCode = ref() // 记录
|
|
|
|
|
const canclick = ref(true) // 记录具体倒计时时间
|
|
|
|
|
const clock = ref() //时间标记
|
|
|
|
|
|
|
|
|
|
// 判断 是否以读协议
|
|
|
|
|
const agreementSearchItem = (e: any) => {
|
|
|
|
|
if (agreementSearch.value[0]) {
|
|
|
|
|
showGetPhoneNumber.value = true
|
|
|
|
|
} else {
|
|
|
|
|
showGetPhoneNumber.value = false
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 规则跳转
|
|
|
|
|
const clickNativeRule = () => {
|
|
|
|
|
uni.navigateTo({
|
|
|
|
|
url: '/pageOthers/pageLoginAccent/pageLoginAccent',
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 注册账号
|
|
|
|
|
const handlePrivacy = () => {
|
|
|
|
|
uni.navigateTo({
|
|
|
|
|
url: '/pages/login/appleId/appleId',
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 忘记密码
|
|
|
|
|
const handleUserAgrement = () => {
|
|
|
|
|
uni.navigateTo({
|
|
|
|
|
url: '/pages/login/loginPassword/loginPassword',
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 登录账号 方法
|
|
|
|
|
const handleLogin = async () => {
|
|
|
|
|
if (!agreementSearch.value[0]) {
|
|
|
|
|
uni.showToast({
|
|
|
|
|
title: '请先阅读协议',
|
|
|
|
|
icon: 'error',
|
|
|
|
|
})
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (loginForm.value.account === '') {
|
|
|
|
|
uni.showToast({
|
|
|
|
|
title: '请输入您的账号',
|
|
|
|
|
icon: 'error',
|
|
|
|
|
})
|
|
|
|
|
return
|
|
|
|
|
} else if (loginForm.value.password === '') {
|
|
|
|
|
uni.showToast({
|
|
|
|
|
title: '请输入您的密码',
|
|
|
|
|
icon: 'error',
|
|
|
|
|
})
|
|
|
|
|
return
|
|
|
|
|
} else if (loginForm.value.smsCode === '') {
|
|
|
|
|
uni.showToast({
|
|
|
|
|
title: '请输入验证码',
|
|
|
|
|
icon: 'error',
|
|
|
|
|
})
|
|
|
|
|
return
|
|
|
|
|
} else {
|
|
|
|
|
// 先发送请求
|
|
|
|
|
// loginForm.value.jsCode = UniCode.value
|
|
|
|
|
let URL = '/pages/index/index'
|
|
|
|
|
loginUser(loginForm.value)
|
|
|
|
|
.then((res: any) => {
|
|
|
|
|
if (res.code == 200) {
|
|
|
|
|
// 存储 vuex token
|
|
|
|
|
// setToken(res.data.access_token)
|
|
|
|
|
// setExpiresIn(res.data.expires_in)
|
|
|
|
|
// 保存会员信息
|
|
|
|
|
const memberStore = useMemberStore()
|
|
|
|
|
memberStore.setProfile(res.data.access_token)
|
|
|
|
|
|
|
|
|
|
// 消息提示
|
|
|
|
|
uni.showToast({
|
|
|
|
|
title: '登录成功',
|
|
|
|
|
icon: 'success',
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
uni.reLaunch({
|
|
|
|
|
// 跳转到首页
|
|
|
|
|
url: URL,
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
.catch(() => {
|
|
|
|
|
// loginCode.value()
|
|
|
|
|
console.log('重新请求login-ui')
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//获取验证码
|
|
|
|
|
const countdown = () => {
|
|
|
|
|
//如果等于false，那么属于按钮无法点击状态，直接返回
|
|
|
|
|
if (!canclick.value) {
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
if (loginForm.value.account === '') {
|
|
|
|
|
uni.showToast({
|
|
|
|
|
title: '请输入手机号码',
|
|
|
|
|
icon: 'error',
|
|
|
|
|
})
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
if (loginForm.value.password === '') {
|
|
|
|
|
uni.showToast({
|
|
|
|
|
title: '请输入登录密码',
|
|
|
|
|
icon: 'error',
|
|
|
|
|
})
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
smsVerif()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 请求验证码接口
|
|
|
|
|
const smsVerif = () => {
|
|
|
|
|
//调用发送验证码方法
|
|
|
|
|
// SmsVerificationCode( loginForm.username)
|
|
|
|
|
loginSmsCode(loginForm.value.account, 1, loginForm.value.password)
|
|
|
|
|
.then((res) => {
|
|
|
|
|
uni.showToast({
|
|
|
|
|
title: '发送验证码成功',
|
|
|
|
|
icon: 'success',
|
|
|
|
|
})
|
|
|
|
|
canclick.value = false
|
|
|
|
|
content.value = totaltime.value + 's后重新发送'
|
|
|
|
|
clock.value = setInterval(() => {
|
|
|
|
|
totaltime.value--
|
|
|
|
|
content.value = totaltime.value + 's后重新发送'
|
|
|
|
|
if (totaltime.value < 0) {
|
|
|
|
|
// 重新发送验证码样式
|
|
|
|
|
// resend = true
|
|
|
|
|
clearInterval(clock.value)
|
|
|
|
|
content.value = '重新发送验证码'
|
|
|
|
|
totaltime.value = 60
|
|
|
|
|
canclick.value = true
|
|
|
|
|
}
|
|
|
|
|
}, 1000)
|
|
|
|
|
})
|
|
|
|
|
.catch((err) => {
|
|
|
|
|
canclick.value = true //不禁用按钮
|
|
|
|
|
// resend = true
|
|
|
|
|
clearInterval(clock.value)
|
|
|
|
|
content.value = '重新发送验证码'
|
|
|
|
|
totaltime.value = 60
|
|
|
|
|
// isBTn = false
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
feilUrl.value = ENV.APP_FILE_URL + 'hhkj-dev'
|
|
|
|
|
feilUrl1.value = ENV.APP_FILE_URL
|
|
|
|
|
})
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
|
//
|
|
|
|
|
page {
|
|
|
|
|
background-color: #55aaff;
|
|
|
|
|
background: url('http://106.58.179.30:19005/hhkj-dev/2023/10/29/JmDFnTCUxWmd67e2e3bcbbf32e092742c002d20acc9c_20231029155526A008.png');
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.border_class {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 20px;
|
|
|
|
|
height: 20px;
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.normal-login-container {
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
|
|
.login_menu {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
|
|
|
|
.grid-text_active {
|
|
|
|
|
color: #000;
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
// font-weight: 555;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rounded_corners {
|
|
|
|
|
margin-top: 0.4rem;
|
|
|
|
|
border-bottom: 4px solid #f3d4a8;
|
|
|
|
|
width: 2rem;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.logo-content {
|
|
|
|
|
width: 100%;
|
|
|
|
|
font-size: 21px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
padding-top: 25%;
|
|
|
|
|
//height: 12rem;
|
|
|
|
|
//bottom: 0;
|
|
|
|
|
|
|
|
|
|
image {
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.title {
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
font-size: 25px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.login-form-content {
|
|
|
|
|
text-align: center;
|
|
|
|
|
margin: 20px auto;
|
|
|
|
|
margin-top: 15%;
|
|
|
|
|
width: 80%;
|
|
|
|
|
|
|
|
|
|
.input-item {
|
|
|
|
|
margin: 20px auto 0;
|
|
|
|
|
background-color: #f5f6f7;
|
|
|
|
|
height: 45px;
|
|
|
|
|
border-radius: 20px;
|
|
|
|
|
|
|
|
|
|
.icon {
|
|
|
|
|
font-size: 38 rpx;
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
color: #999;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.input {
|
|
|
|
|
width: 100%;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
line-height: 20px;
|
|
|
|
|
text-align: left;
|
|
|
|
|
padding-left: 15px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.login-btn {
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
height: 45px;
|
|
|
|
|
// border-radius: 50px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.login-code {
|
|
|
|
|
height: 45px;
|
|
|
|
|
|
|
|
|
|
.login-code-verification {
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
height: 45px;
|
|
|
|
|
line-height: 45px;
|
|
|
|
|
border: 1px #8bd70f solid;
|
|
|
|
|
border-radius: 20px;
|
|
|
|
|
color: black;
|
|
|
|
|
font-size: 0.9rem;
|
|
|
|
|
background-color: #96e811;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.text-blue {
|
|
|
|
|
color: #707070;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.disabled {
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
height: 45px;
|
|
|
|
|
line-height: 45px;
|
|
|
|
|
border: 1px #b9b9b9 solid !important;
|
|
|
|
|
border-radius: 20px;
|
|
|
|
|
color: black;
|
|
|
|
|
font-size: 0.75rem;
|
|
|
|
|
background-color: #d0d0d0 !important;
|
|
|
|
|
color: #57a3f3;
|
|
|
|
|
cursor: not-allowed;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
dongmu
11 months ago