164 lines
3.2 KiB
Vue
164 lines
3.2 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view style="text-align: center;">
|
||
<image class="logo" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/35adb202404271727457954.png">
|
||
</image>
|
||
<view class="tips">欢迎登录惠农批发</view>
|
||
</view>
|
||
|
||
<view class='card'>
|
||
<view style="display: flex;align-items: center;">
|
||
<text>手机号：</text> <up-input v-model="formData.account" placeholder="请输入手机号"></up-input>
|
||
</view>
|
||
<view style="margin: 30rpx 0;">
|
||
</view>
|
||
<view style="display: flex;justify-content: space-between;align-items: center;">
|
||
<text style="margin-right: 20rpx;">验证码:</text>
|
||
<up-input v-model="formData.code" placeholder="请输入验证码" type='number'></up-input>
|
||
<view class="code-btn">
|
||
<view style="margin: 0 20rpx;">
|
||
<up-line color="grey" direction="col" length="30rpx"></up-line>
|
||
</view>
|
||
<text class='btn-text' style="color: grey;" v-if='cutDown'>重新获取({{cutDown}})</text>
|
||
<text @click="getCode" class='btn-text' v-else> {{flag?'获取验证码':'重新获取' }} </text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<view class="submit-btn">
|
||
<up-button @click="submit" color="#20B128" size="large">
|
||
登录</up-button>
|
||
|
||
</view>
|
||
|
||
|
||
|
||
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
userLoginApi,
|
||
userInfoApi,
|
||
getStoreInfo,
|
||
getloginSms
|
||
} from "@/api/user.js";
|
||
import {
|
||
ref,
|
||
reactive
|
||
} from "vue"
|
||
import useUserStore from "@/store/user";
|
||
const userStore = useUserStore();
|
||
|
||
|
||
|
||
|
||
const formData = reactive({
|
||
account: "",
|
||
code: "",
|
||
terminal: 1,
|
||
scene: 2
|
||
})
|
||
|
||
|
||
// 获取验证码
|
||
const cutDown = ref(0)
|
||
const flag = ref(true)
|
||
const code = ref('')
|
||
const checkPhone = (phone) => {
|
||
const regex = /^1[3-9]\d{9}$/;
|
||
return regex.test(phone) ? true : false
|
||
}
|
||
|
||
const getCode = async () => {
|
||
if (!checkPhone(formData.account)) return uni.$u.toast('请输入正确的手机号')
|
||
await getloginSms({
|
||
account: formData.account
|
||
})
|
||
flag.value = false
|
||
cutDown.value = 60
|
||
let timer = setInterval(() => {
|
||
cutDown.value--
|
||
if (cutDown.value <= 0) clearInterval(timer)
|
||
}, 1000)
|
||
}
|
||
// 获取验证码结束
|
||
|
||
|
||
const zh = ref("")
|
||
|
||
const submit = () => {
|
||
userLoginApi({
|
||
account: zh.value,
|
||
"password": "123456",
|
||
"terminal": 2,
|
||
"scene": 1
|
||
}).then(res => {
|
||
|
||
getStoreInfo().then(res => {
|
||
uni.setStorageSync("STORE_INFO", JSON.stringify(res.data))
|
||
})
|
||
|
||
uni.setStorageSync('token', res.data.token);
|
||
userStore.setToken(res.data.token);
|
||
console.log(res.data.token)
|
||
userInfoApi().then(res => {
|
||
const user = res.data;
|
||
userStore.setUserInfo(user);
|
||
uni.reLaunch({
|
||
url: '/pages/index/index'
|
||
}) // 存储token到本地存储中
|
||
})
|
||
})
|
||
|
||
|
||
|
||
}
|
||
</script>
|
||
|
||
<style lang='scss'>
|
||
.content {
|
||
background-color: white;
|
||
height: 100vh;
|
||
box-sizing: border-box;
|
||
padding-top: 15vh;
|
||
|
||
.logo {
|
||
height: 152rpx;
|
||
width: 152rpx;
|
||
}
|
||
|
||
.tips {
|
||
color: #444444;
|
||
font-size: 28rpx;
|
||
margin: 30rpx 0;
|
||
}
|
||
}
|
||
|
||
.card {
|
||
padding: 50rpx;
|
||
background-color: white;
|
||
margin-bottom: 30rpx;
|
||
padding-bottom: 30rpx;
|
||
}
|
||
|
||
.submit-btn {
|
||
position: absolute;
|
||
bottom: 100rpx;
|
||
width: 710rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.code-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.btn-text {
|
||
color: #20B128;
|
||
}
|
||
</style> |