purchase-let/pages/login/test.vue

151 lines
2.9 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.password" placeholder="请输入密码" password="true"></up-input>
</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: "",
password:'',
terminal: 1,
scene: 1
})
// 获取验证码
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>