purchase-let/pages/login/test.vue

157 lines
3.2 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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,
loginUpdateUserApi
} 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({
...formData
}).then(res => {
getStoreInfo().then(res => {
uni.setStorageSync("STORE_INFO", JSON.stringify(res.data))
})
uni.setStorageSync('token', res.data.token);
userStore.setToken(res.data.token);
userInfoApi().then(res => {
const user = res.data;
userStore.setUserInfo(user);
if (!user.openid) loginUpdateUserApi({
mobile: user.mobile
})
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>