mobile_h5/actMgt/pages/login/login.vue

<template>
	<view class="body body-bg">
		<view class="main uni-column">
			<view class="topLogo"></view>
			<text class="title">主理人登录</text>
			<view class="box uni-column">
				<input class="input" placeholder-class="input-placeholder" type="text" maxlength="11"
					placeholder="请输入手机号" v-model="formData.username" />
				<view class="uni-row uni-jcsb uni-ais" style="width: 82%;">
					<input class="input" style="width: 48%; margin-right: 10px;" placeholder-class="input-placeholder" type="text" maxlength="6"
						placeholder="请输入验证码" v-model="formData.vfcode" />
					<button class="btnSendVfcode" style="padding: 0px;" :disabled="!sendVfCode.state"
						@click="sendVfcodeClick">
						<view v-if="sendVfCode.state">
							获取验证码
						</view>
						<view v-else class="uni-row uni-jcc">
							<uni-countdown color="#c6c6c6" @timeup="timeup" :show-day="false" :showHour="false"
								:showMinute="false" :second="sendVfCode.counttime"></uni-countdown>
							秒后重试
						</view>
					</button>
				</view>
				<button class="button" @click="login">登 录</button>
				<!-- <text class="hint">没有账号？点击 <text style="color: #FF8D1A;" @click="registerClick">注册</text></text> -->
			</view>
			<view class="bottomLogo"></view>
		</view>
		<text class="bottomText">&copy; 彩图奔跑 All Rights Reserved.</text>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex';
	import tools from '/utils/tools';
	import {
		apiSmsSend,
		apiSignIn
	} from '/utils/api.js';

	export default {
		data() {
			return {
				sendVfCode: {
					state: true,
					counttime: 30 // 倒计时 秒
				},
				formData: {
					username: "",
					vfcode: "",
				}
			}
		},
		computed: {
			/* ...mapState([
				'username', // 映射 this.username 为 store.state.username
				'token'
			]), */
			...mapGetters([
				'metadata'
			]),
		},
		onLoad() {

		},
		methods: {
			smsSend() {
				uni.request({
					url: apiSmsSend,
					header: this.metadata,
					method: "POST",
					data: {
						phone: this.formData.username,
					},
					success: (res) => {
						// console.log("smsSend", res);
						if (res.data.code == 0) {
						} else {
							uni.showToast({
								title: `验证码发送失败：${res.data.message}`,
								icon: 'none',
								duration: 5000
							});
						}
					},
					fail: (err) => {
						console.log("smsSend err", err);
					},
				});
			},
			login() {
				if (this.formData.username.length != 11) {
					uni.showToast({
						title: '请输入合法的手机号',
						icon: 'none'
					});
					return;
				}
				if (!tools.isPhone(this.formData.username)) {
					return;
				}
				if (!(this.formData.vfcode.length >= 4)) {
					uni.showToast({
						title: '请输入合法的验证码',
						icon: 'none'
					});
					return;
				}
				
				uni.request({
					url: apiSignIn,
					header: this.metadata,
					method: "POST",
					data: {
						username: this.formData.username,
						vfCode: this.formData.vfcode
					},
					success: (res) => {
						console.log("login", res);
						if (res.data.code == 0) {
							const data = res.data.data;
							this.$store.commit("setUsername", data.userName);
							this.$store.commit("setUserlevel", data.level);
							this.$store.commit("setToken", data.token);

							uni.showToast({
								title: `登录成功`,
								icon: 'none',
								duration: 3000
							});

							setTimeout(() => {
								const url = '/pages/actManage/index';
								tools.appAction(url, "uni.switchTab");
							}, 100);
						} else {
							uni.showToast({
								title: `登录失败: ${res.data.message}`,
								icon: 'none',
								duration: 5000
							});
						}
					},
					fail: (err) => {
						console.log("login err", err);
					},
				});
			},
			/* registerClick() {
				const url = "/pages/login/register";
				tools.appAction(url, "uni.navigateTo");
			}, */
			sendVfcodeClick() {
				if (this.formData.username.length != 11) {
					uni.showToast({
						title: '请输入合法的手机号',
						icon: 'none'
					});
					return;
				}
				if (!tools.isPhone(this.formData.username)) {
					return;
				}
				
				this.sendVfCode.state = false;
				this.smsSend();
			},
			// 倒计时结束
			timeup() {
				this.sendVfCode.state = true;
			}
		}
	}
</script>

<style scoped>
	.body-bg {
		width: 100vw;
		height: 100vh;
		background: url("/static/bg_login.png") no-repeat;
		background-size: 100% 100%;
		/* background-size: 100% auto; */
		justify-content: space-between;
	}

	.main {
		width: 90%;
		/* height: 590px; */
		margin-top: 10%;
		justify-content: space-evenly;
	}

	.topLogo {
		width: 90px;
		height: 110px;
		background: url("/static/run.png") no-repeat;
		background-size: contain;
	}

	.title {
		margin: 10px 0px;
		font-weight: 500;
		color: #ffffff;
		font-size: 30px;
		text-align: center;
	}

	.box {
		/* width: 317px; */
		width: 92%;
		height: 237px;
		padding-top: 10px;
		padding-bottom: 10px;
		justify-content: space-evenly;
		background-color: white;
		border-radius: 13px;
		box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.16);
	}

	.input {
		width: 72%;
		height: 46px;
		padding: 0 5%;
		border: 1px solid;
		border-color: #c6c6c6;
		border-radius: 3px;
	}

	.input-placeholder {
		font-weight: 300;
		color: #bfbfbf;
		font-size: 16px;
	}

	.btnSendVfcode {
		width: 50%;
		height: 47px;
		font-size: 16px;
		line-height: 47px;
	}

	.button {
		width: 82%;
		background: #ffb40b;
		border-radius: 6px;
		font-weight: 500;
		color: #333333;
		word-spacing: 15px;
	}

	.hint {
		font-size: 16px;
		font-weight: 500;
		color: #383838;
	}

	.bottomLogo {
		width: 232px;
		height: 36px;
		margin-top: 20px;
		background: url("/static/ctbp.png") no-repeat;
		background-size: contain;
	}

	.bottomText {
		margin-bottom: 30px;
		font-weight: 500;
		color: #000000;
		font-size: 12px;
		text-align: center;
	}
</style>