init

project-wl-siji-uniapp-vue3/pages/login/index.vue

@@ -0,0 +1,137 @@
+<!-- 手机号登录页面 -->
+<template>
+	<!-- 公用nav -->
+	<view class="navBox"><uni-nav-bar title="神领物流" :border="false" /></view>
+	<!-- end -->
+	<view class="loginBox">
+		<view class="tit">
+			<text>手机号登录</text>
+			<text class="text" @click="goLogin">
+				账号登录
+				<icon></icon>
+			</text>
+		</view>
+		<!-- 登录表单 手机号、验证码 -->
+		<view class="loginMain">
+			<uni-forms ref="customForm" :rules="customRules" :modelValue="fromInfo">
+				<uni-forms-item name="phone"><uni-easyinput class="item" v-model="fromInfo.phone" placeholder="请输入手机号" /></uni-forms-item>
+				<uni-forms-item name="verifyCode">
+					<uni-easyinput class="item inputW" v-model="fromInfo.verifyCode" placeholder="请输入验证码" />
+					<view class="codeBox">
+						<text class="code" v-show="codeInfo.show" @click="getCode">获取验证码</text>
+						<text class="code fontCol" v-show="!codeInfo.show">{{ codeInfo.times }}s后重新获取</text>
+					</view>
+				</uni-forms-item>
+			</uni-forms>
+			<!-- 按钮 -->
+			<view class="btnBox" style="padding-top:100rpx;">
+				<text class="button"
+				:class="fromInfo.phone.length === 0 || fromInfo.verifyCode.length === 0 ? 'buttonDis1' : 'button'"
+				 @click="handleSubmit"
+				 >登 录</text>
+			</view>
+			<!-- end -->
+		</view>
+		<!-- end -->
+	</view>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue';
+import { useStore } from 'vuex';
+// 接口
+import { phoneLogins, getUserInfo, getsmsCode } from '../api/user.js';
+// 验证
+import { validatePhone, timeCountdown, isPhone } from '@/utils/validate';
+// ------定义变量------
+const store = useStore(); //vuex获取储存数据
+const customForm = ref();
+const isVerifySuccess = ref(false);
+// 表单数据
+const fromInfo = reactive({
+	phone: '', //手机号
+	verifyCode: '' // 验证码
+});
+// 验证码倒计时数据
+const codeInfo = reactive({
+	show: true,
+	timer: null,
+	times: 60
+});
+// 表单校验
+const customRules = reactive({
+	phone: {
+		rules: [
+			{
+				required: true,
+				validateFunction: validatePhone,
+				errorMessage: '请输入手机号'
+			}
+		]
+	},
+	verifyCode: {
+		rules: [
+			{
+				required: true,
+				errorMessage: '请输入验证码'
+			}
+		]
+	}
+});
+// ------生命周期------
+onMounted(() => {});
+// ------定义方法------
+// 获取验证码
+const getCode = async () => {
+	let p = fromInfo.phone;
+	isVerifySuccess.value = isPhone(p);
+	if (isVerifySuccess.value) {
+		timeCountdown(codeInfo);
+		const parent = {
+			phone: phone.value
+		};
+	} else {
+		return uni.showToast({
+			title: '手机号输入错误！请重新输入',
+			duration: 1000,
+			icon: 'none'
+		});
+	}
+};
+// 登录
+const handleSubmit = async() => {
+	// 表单校验
+	const valid = await customForm.value.validate();
+	if (valid) {
+		// 登录接口
+		await phoneLogins(fromInfo)
+			.then(res => {
+				if (res.code === 200) {
+					store.commit('user/setToken', res.token);
+					// 通过vuex获取用户信息
+					store.dispatch('user/GetUsersInfo')
+					// 跳转到首页
+					uni.redirectTo({
+						url: '/pages/index/index'
+					});
+				} else {
+					return uni.showToast({
+						title: res.data.msg,
+						duration: 1000,
+						icon: 'none'
+					});
+					// 密码输入错误！请重新输入
+					// 账号输入错误！请重新输入
+				}
+			})
+			.catch(err => {});
+	}
+};
+// 去手机登录页面
+const goLogin = () => {
+	uni.redirectTo({
+		url: '/pages/login/user'
+	});
+};
+</script>
+<style src="./index.scss" lang="scss" scoped></style>