zhongshen_project/addon/cashier---/source/os/pages/login/login.vue

<template>
	<page-meta :root-font-size="getRootFontSize"></page-meta>
	<view class="container" :style="{ backgroundImage: 'url(' + $util.img('public/uniapp/cashier/login_bg.png') + ')' }">
		<view class="login-wrap">
			<view class="header">
				<image class="title" :src="$util.img('public/uniapp/cashier/login_logo.png')" mode="aspectFit"></image>
				<!-- <view class="desc">若未注册请先到牛云官网进行注册</view> -->
			</view>
			<view class="form-wrap">
				<view class="input-wrap"><input type="text" @confirm="login" v-model="formData.username" placeholder="请输入用户名" placeholder-class="placeholder" /></view>
				<view class="input-wrap">
					<input type="text" @confirm="login" v-model="formData.password" placeholder="请输入登录密码" placeholder-class="placeholder" v-show="passShow" />
					<input type="password" @confirm="login" v-model="formData.password" placeholder="请输入登录密码" placeholder-class="placeholder" v-show="!passShow" />
					<view class="iconfont" :class="{ iconyanjing5: passShow, iconinvisible: !passShow }" @click="passShow = !passShow"></view>
				</view>
				<view class="input-wrap">
					<input type="number" @confirm="login" v-model="formData.vercode" placeholder="请输入验证码" placeholder-class="placeholder" />
					<image :src="captcha.img" class="captcha" @click="getCaptcha"></image>
				</view>
				<button type="default" class="login-btn primary-btn" @click="login">登录</button>
			</view>
		</view>
	</view>
</template>

<script>
import validate from 'common/js/validate.js';

export default {
	data() {
		return {
			passShow: false,
			formData: {
				username: '',
				password: '',
				vercode: '',
				dynacode: '',
				key: ''
			},
			captcha: {
				id: '',
				img: ''
			},
			isSub: false
		};
	},
	onLoad() {
		this.getCaptcha();
	},
	methods: {
		/**
		 * 获取验证码
		 */
		getCaptcha() {
			this.$api.sendRequest({
				url: '/storeapi/captcha/captcha',
				data: {
					captcha_id: this.captcha.id
				},
				success: res => {
					if (res.code >= 0) {
						this.captcha = res.data;
						this.captcha.img = this.captcha.img.replace(/\r\n/g, '');
					}
				}
			});
		},
		login() {
			var data = {
				username: this.formData.username,
				password: this.formData.password
			};

			if (this.captcha.id != '') {
				data.captcha_id = this.captcha.id;
				data.captcha_code = this.formData.vercode;
			}

			uni.showLoading({});

			if (this.verify(data)) {
				if (this.isSub) return;
				this.isSub = true;
				this.$api.sendRequest({
					url: '/cashier/storeapi/login/login',
					data,
					success: res => {
						uni.hideLoading();
						if (res.code >= 0) {
							uni.setStorageSync('site_id', res.data.site_id);
							uni.setStorageSync('store_id', res.data.store_id);
							uni.setStorage({
								key: 'cashier_token',
								data: res.data.token,
								success: () => {
									this.$store.dispatch('getStoreInfo');
									this.$store.dispatch('getUserInfo');
									this.$store.dispatch('getUserGroup');
								}
							});
						} else {
							this.isSub = false;
							this.getCaptcha();
							this.$util.showToast({ title: res.message });
						}
					},
					fail: res => {
						this.isSub = false;
						this.getCaptcha();
					}
				});
			}
		},
		verify(data) {
			var rule = [
				{ name: 'username', checkType: 'required', errorMsg: '请输入手机号' },
				{ name: 'password', checkType: 'required', errorMsg: '请输入密码' },
				{ name: 'captcha_code', checkType: 'required', errorMsg: '请输入验证码' }
			];

			var checkRes = validate.check(data, rule);
			if (checkRes) {
				return true;
			} else {
				this.$util.showToast({ title: validate.error });
				return false;
			}
		}
	},
	computed: {
		menu() {
			return this.$store.state.menu;
		}
	},
	watch: {
		menu: function(menu) {
			if (menu && menu.length) {
				if (menu[0].path) this.$util.redirectTo(menu[0].path, {}, 'redirectTo');
				else this.$util.redirectTo('/pages/stat/index', {}, 'redirectTo');
			}
		}
	}
};
</script>

<style lang="scss">
page {
	width: 100vw;
	height: 100vh;
	background: #f7f8fa;
}
.container {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
	.login-bg {
		margin-right: 1.5rem;
		width: 5.9rem;
		height: 4.3rem;
		image {
			width: 5.9rem;
			height: 4.3rem;
		}
	}
}

.login-wrap {
	padding: 0.3rem 0;
	width: 3.48rem;
	background-color: #fff;
	box-shadow: 0 0.01rem 0.09rem 0 rgba(15, 92, 251, 0.12);
	border-radius: 0.05rem;

	.header {
		text-align: center;

		.title {
			width: 2.13rem;
			height: 0.78rem;
		}

		.desc {
			font-size: 0.16rem;
			color: #969799;
			margin-top: 0.1rem;
		}
	}
}

.form-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 0.3rem;

	.input-wrap {
		width: 2.85rem;
		padding: 0 0.1rem;
		border: 0.01rem solid #e6e6e6;
		margin-top: 0.25rem;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		border-radius: 0.05rem;

		input {
			flex: 1;
			height: 0.4rem;
			line-height: 0.4rem;
			font-size: $uni-font-size-base;
		}

		.placeholder {
			font-size: $uni-font-size-base;
			color: #999999;
			font-weight: 500;
		}

		.send-code {
			color: $primary-color;
			cursor: pointer;

			&.disabled {
				cursor: not-allowed;
				color: #999;
			}
		}

		.captcha {
			width: 0.76rem;
			height: 0.3rem;
			cursor: pointer;
		}

		.iconfont {
			font-size: 0.14rem;
			cursor: pointer;
		}
	}

	.login-btn {
		width: 2.85rem;
		margin-top: 0.3rem;
		height: 0.4rem;
		line-height: 0.4rem;
		border-radius: 0.05rem;
	}
}

.login-action {
	margin-top: 0.1rem;
	text-align: right;
	color: #999;

	text {
		margin-left: 0.1rem;
		cursor: pointer;
	}
}
</style>