ec.uniapp-master/pages/business/login/login.vue

<template>
	<view>
		<lf-nav title="商家登录" :showIcon="true" bgColor="#fff"></lf-nav>
		<view class="head">
			<view class="head-content">
				<image class="logo" :src="avatar" v-if="avatar"></image>
				<image class="logo" src="../../../static/images/login.png" v-else></image>
				<view class="title">欢迎来到金诚优选！</view>
			</view>
		</view>
		<view class="content">
			<view class="list">
				<view class="lf-flex">
					<view class="lf-font-28 lf-color-black" style="width: 140rpx;">手机号</view>
					<input class="input" placeholder="请输入手机号码" v-model="phone" maxlength="11" />
				</view>
				<view class="clear" v-if="phone.length" @click="phone = ''">
					<text class="lf-iconfont icon-status-error"></text>
				</view>
			</view>
			<view class="list">
				<view class="lf-flex">
					<view class="lf-font-28 lf-color-black" style="width: 140rpx;">密码</view>
					<input class="input" placeholder="请输入密码" v-model="password" />
				</view>
				<view class="clear" v-if="password.length" @click="password = ''">
					<text class="lf-iconfont icon-status-error"></text>
				</view>
			</view>
		</view>
		<button class="next-btn" hover-class="lf-opacity" @click="next">登录</button>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				phone: '',
				password: '',
				avatar: ''
			}
		},
		onLoad(){
			let userInfo = this.$cookieStorage.get('user_info');
			if(this.$isRight(userInfo)){
				this.avatar = userInfo.avatar;
			}
		},
		methods: {
			next(){
				if(!this.phone) return this.$msg('请输入登录手机号');
				if(!this.$check(this.phone, 'mobile')) return this.$msg('请输入正确的手机号');
				if(!this.password) return this.$msg('请输入密码');
				uni.showLoading({
					title: '正在登录'
				})
				this.$http.post({
					api: 'api/supplier/login',
					data: {
						username: this.phone,
						password: this.password
					}
				}).then(res => {
					console.log("login", res);
					uni.hideLoading();
					if(res.data.code != 200){
						this.$msg(res.data.data);
					}else{
						let token = res.data.data.token;
						// let expires_in = res.data.data.expires_in || 315360000; // 登录超时时效
						// this.$cookieStorage.set('store_token', token, expires_in);
						this.$cookieStorage.set('store_token', token);
						this.$url('/pages/business/center/center', {type: 'redirect'});
					}
				}).catch(err => uni.hideLoading())
			}
		}
	}
</script>

<style lang="scss" scoped>
	.head{
		height: 400rpx;
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.head-content{
			display: flex;
			flex-direction: column;
			
			align-items: center;
			.logo{
				width: 182rpx;
				height: 182rpx;
				border-radius: 50%;
				background-color: #EEEEEE;
			}
			.title{
				font-size: 32rpx;
				color: #222222;
				font-weight: bold;
				font-family: '楷体';
				margin-top: 20rpx;
			}
		}
	}
	
	.content{
		padding: 0 32rpx;
	}
	.next-btn{
		width: 550rpx;
		height: 100rpx;
		background: #0D2E9A;
		border-radius: 50rpx;
		line-height: 100rpx;
		color: #FFFFFF;
		margin-top: 100rpx;
	}
	.list{
		height: 120rpx;
		width: 100%;
		border-bottom: 1rpx solid #e5e5e5;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.input{
			width: 430rpx;
			height: 80rpx;
			font-size: 28rpx;
		}
		.input-code{
			width: 340rpx;
		}
		.clear{
			padding: 20rpx;
		}
		.code{
			min-width: 180rpx;
			max-width: 220rpx;
			height: 64rpx;
			padding: 0 4rpx;
			font-size: 24rpx;
			color: #0D2E9A;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 32rpx;
			border: 2rpx solid #0D2E9A;
		}
		.active-bg{
			background: #efefef;
		}
	}
	
	.fixed-desc{
		position: fixed;
		bottom: 50rpx;
		left: calc(50% - 343rpx);
		width: 686rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		font-size: 28rpx;
		color: #777777;
		&>text:nth-child(2){
			color: #FF9D9D;
		}
	}
</style>