hotelHomestayWx/pages/login/appIndex.vue

<template>
	<view class="page" :style="{'min-height':h+'px'}">
		<view class="box">
			<view class="text">您好！欢迎使用<br>游嵊泗商家服务平台</view>
			<view class="login">
				<view class="item">
					<u--input
						placeholder="用户名"
						prefixIcon="account-fill"
						prefixIconStyle="font-size: 22px;color: #909399"
						labelColor="#ffffff"
						v-model="dataFrom.username"
					></u--input>
				</view>
				<view class="item">
					<u--input
						placeholder="密码"
						prefixIcon="lock-fill"
						prefixIconStyle="font-size: 22px;color: #909399"
						labelColor="#ffffff"
						type="password"
						v-model="dataFrom.password"
					></u--input>
				</view>
				<!-- <view class="item" @click="typeShow=true">
					<u--input
						placeholder="类型"
						prefixIcon="coupon-fill"
						suffixIcon="arrow-down"
						prefixIconStyle="font-size: 22px;color: #909399"
						suffixIconStyle="font-size: 22px;color: #909399"
						readonly
						v-model="userType"
					></u--input>
				</view> -->
				<button @click="login">登录</button>
				<u-picker :show="typeShow" :columns="columns" @close="typeShow=false" @cancel="typeShow=false" @confirm="confirm"></u-picker>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				typeShow:false,
				userType:'',
				columns:[['酒店民宿','商家']],
				typeCfg:{'酒店民宿':'1','商家':'2'},
				dataFrom:{
					username:'',
					password:'',
					usertype:'1',
					captcha:'handset',
					uuid: "",
					grant_type: "password",
				}
			}
		},
		onLoad() {
			uni.clearStorageSync();
		},
		methods: {
			confirm(e){
				this.userType = e.value[0];
				this.typeShow = false;
			},
			login(){
				// this.dataFrom.usertype = this.typeCfg[this.userType]||'';
				if(!this.dataFrom.username) return this.$showToast('请输入用户名');
				if(!this.dataFrom.password) return this.$showToast('请输入密码');
				// if(!this.dataFrom.usertype) return this.$showToast('请选择类型');
				
				uni.setStorageSync('authorization','Basic cmVucmVuaW86cmVucmVuaW8=');
				let that = this;
				this.$api.post("/auth/oauth/token", {
					...this.dataFrom,
					username: this.dataFrom.username + "&&" + `${this.dataFrom.usertype}`,
				},false,true).then(res=>{
					if(res.data.code==0){
						uni.setStorageSync('authorization',res.data.token_type+' '+res.data.access_token);
						uni.setStorageSync('access_token',res.data.access_token);
						that.$api.get('/sys/user/info').then(resu=>{
							if(resu.data.code===0){
								that.$showToast('登录成功');
								uni.setStorageSync('userInfo',resu.data.data);
								setTimeout(()=>{
									uni.reLaunch({
										url:'/pages/login/select?userInfo='+encodeURIComponent(JSON.stringify(resu.data.data))
									})
								},1500)
							}else that.$showToast(resu.data.msg)
						})
					}else that.$showToast(res.data.msg)
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.page{
		background: url(https://i.ringzle.com/file/20240109/472b6b7b9ea44652b85e73c796876378.png) no-repeat;
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		.box{
			width: calc(100% - 180rpx);
			display: flex;
			flex-direction: column;
			align-items: center;
			image{
				width: 480rpx;
				height: 520rpx;
			}
			.text{
				text-align: center;
				font-size: 56rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				color: #FFFFFF;
				line-height: 96rpx;
			}
			.login{
				margin-top: 80rpx;
				width: 100%;
				
				.item{
					margin-bottom: 40rpx;
					::v-deep input{
						color: #FFFFFF !important;
					}
				}
				
				button{
					width: 100%;
					height: 100%;
					background: #FFFFFF;
					border-radius: 48rpx 48rpx 48rpx 48rpx;
					line-height: 96rpx;
					text-align: center;
					font-size: 34rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #145EE6;
				}
			}
		}
	}
</style>