hotelHomestayWx/pages/login/appIndex.vue

<template>
	<view class="page" :style="{'min-height':h+'px'}">
		<!-- 返回按钮 -->
		<c-nav-bar title=" "  :showHome="false"></c-nav-bar>
		<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="showPassword ? 'text' : 'password'"
					:suffixIcon="passwordIcon"
					suffixIconStyle="font-size: 22px;color: #909399"
					v-model="dataFrom.password"
					@clickSuffixIcon="togglePassword"
				></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 :immediateChange="true"  :show="typeShow" :columns="columns" @close="typeShow=false" @cancel="typeShow=false" @confirm="confirm"></u-picker>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				h: uni.getSystemInfoSync().windowHeight,
				typeShow:false,
				userType:'',
				columns:[['酒店民宿','非酒店民宿']],
				typeCfg:{'酒店民宿':'1','非酒店民宿':'2'},
				showPassword: false, // 控制密码是否可见
				passwordIcon: 'eye-fill', // 密码显示图标
				dataFrom:{
					username:'',
					password:'',
					usertype:'2',
					captcha:'handset',
					uuid: "",
					grant_type: "password",
				}
			}
		},
		onLoad() {
			uni.clearStorageSync();
		},
		methods: {
			confirm(e){
				this.userType = e.value[0];
				this.typeShow = false;
			},
			// 切换密码显示/隐藏
			togglePassword() {
				this.showPassword = !this.showPassword;
				this.passwordIcon = this.showPassword ? 'eye-off' : 'eye-fill';
			},
			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)
				})
			},
			// 返回上一页
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style scoped lang="less">
	.page{
		background: url(https://fsy.shengsi.gov.cn/file/20240109/472b6b7b9ea44652b85e73c796876378.png) no-repeat;
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		
		.back-btn {
			position: absolute;
			top: 80rpx;
			left: 40rpx;
			width: 60rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 10;
		}
		
		.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>