cqcarbonwxapp/pages/login/companyLogin.vue

<template>
	<view class="pages">
		<image :src="$getimg+'logo.png'" class="logo" mode="widthFix"></image>
		<view class="title">企业用户登陆</view>
		<view class="login-form">
			<view class="login-form-item">
				<view class="login-form-item-til">账号</view>
				<view class="login-form-item-con">
					<input type="text" value="" v-model="params.loginStr" placeholder="请输入账号" />
				</view>
			</view>
			<view class="login-form-item">
				<view class="login-form-item-til">密码</view>
				<view class="login-form-item-con">
					<input type="password" value="" v-model="params.pwd" placeholder="请输入密码" />
				</view>
			</view>
		</view>
		<view class="wrap">
			<view class="full-btn" @click="handleLogin">登录</view>
		</view>
		<view class="bottom-btn-wrap">
			<view class="bottom-btn forgetpass">忘记密码</view>
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex';
	export default {
		data() {
			return {
				$getimg:this.$getimg,
				params:{
					// loginStr:'66432356',
					loginStr:'64676376',
					pwd:'123456',
					
				},
				rules: {
					loginStr: {rule: /^[A-Za-z0-9]+$/,msg: "填写用户名"},
					pwd: {rule: /\S/,msg: "填写密码"},
				},
				
			}
		},
		onShow() {
			
		},
		onLoad() {

		},
		computed: mapState(['hasLogin', 'userInfo','hPage']),
		methods: {
			...mapMutations(['login', 'logout','upInfo']),
			handleLogin(){
				console.log('params',this.params);
				for (let x in this.params) {
					// console.log('x',x)
					if(!this.validate(x)) return;
				}
				this.$api.http.post(this.config.apiBaseurl + '/carbon-h5/wap/customer/customerLogin',this.params,{
				// 	header: {
				// 	Accept:'application/json',
				// 	Authorization: 'Bearer '+ this.token, //注意Bearer后面有一空格
				// },
				}).then(res => {
					// console.log('res.data.retBody.token',res.data.retBody)
					const token = res.data.retBody;
					//保存token
					// console.log('this.login',this.login);
					this.login(token);
					//取得用户信息
					this.upInfo();
					uni.switchTab({
						url: '/pages/index/index'
					});
				}).catch(err =>{
					console.log('err',err)
				});
			},
			//判断验证是否符合要求
			validate(key) {
				let bool = true;
				if (!this.rules[key].rule.test(this.params[key])) {
					//提示信息
					uni.showToast({
						icon:"none",
						title: this.rules[key].msg,
					})
					//取反
					bool = false;
					return false;
				}
				return bool;
			},
			

		}
	}
</script>

<style scoped>
/* 	@import url("./index.css"); */
.logo{display: block;margin: 128rpx auto 26rpx;width: 99rpx;height: 99rpx;}
.title{margin-bottom: 80rpx;font-size: 36rpx;color: #333;line-height: 50rpx;font-weight: bold;text-align: center;}
.login-form{margin-bottom: 40rpx;border-top: 1px solid #eee;border-bottom: 1px solid #eee;}
.login-form-item{display: flex;position: relative;height: 96rpx;align-items: center;border-bottom: 1px solid #eee;}
.login-form-item::before{content: '';width: 24rpx;height: 1px;background-color: #fff;position: absolute;left: 0;bottom: -1px;}
.login-form .login-form-item:last-of-type{border-bottom: 0;}
.login-form .login-form-item:last-of-type::before{height: 0;}
.login-form-item-til{margin-left: 24rpx;padding-left: 16rpx;}
.login-form-item-con{padding-left: 100rpx;}
.forgetpass{font-size: 30rpx;color: #999;}
</style>