hitap-chat/pages/logIn/logIn.vue

<template>
	<view id="page">
		<view class="Width100 Box" :style="bgUrl1">
			<image class="pic" :src="$.imgSrc + '/scimg/login_bg_bottom.png'" mode="aspectFit"></image>
			<view class="Content MarginAuto">
				<image :src="$.imgSrc + '/scimg/jinghui.png'" mode="aspectFit" class="Block Logo"></image>
				<view class="NavBox Width100 MarginT_20rpx">
					<view class="logo-title">
						道路交通安全隐患
					</view>
					<view class="logo-title">
						排查助手
					</view>
				</view>
				<!-- <view class="TypeBox MarginT_60rpx" v-if="currNav == 1">
          <view class="Unit FloatL" v-for="(item,index) in typeList" @click="chooseType(item.type)">
            <view class="Point FloatL" v-show="currType == item.type">
              <image :src="$.imgSrc + '/scimg/choose_y1.png'" mode="aspectFit" class="Block Width100 Height100"></image>
            </view>
            <view class="Point Border FloatL BorderR_50 InsideB" v-show="currType != item.type"></view>
            <text class="Block MarginL_20rpx FontS_32rpx FloatL">{{item.label}}</text>
            <view class="ClearB"></view>
          </view>
          <view class="ClearB"></view>
        </view> -->
				<view class="InputBox" :class="currNav == 1 ? 'MarginT_40rpx' : 'MarginT_80rpx'">
					<view class="Input">
						<!--            <view class="Num FloatL TextLeft MarginL_60rpx">-->
						<!--              <text class="InlineBlock FontS_34rpx Color_1A1F39 FontBold">+86</text>-->
						<!--            </view>-->
						<view class="img-box">
							<image :src="$.imgSrc + '/scimg/login_user.png'" mode="aspectFit"
								class="input_left_icon input_icon"></image>
						</view>
						<input type="text" placeholder="请输入用户名" v-model="logInData.phone"
							class="Height100 Input1 FloatL FontS_32rpx" />
						<view class="img-box"></view>
						<view class="ClearB"></view>
					</view>
					<view class="Input" v-if="currNav == 1">
						<input type="text" v-model="logInData.validateCode" placeholder="请输入验证码"
							class="Height100 Input1 FloatL MarginL_60rpx FontS_32rpx" />
						<view class="CodeBox FloatR MarginR_60rpx" @click="getCode">
							<text class="Block FontS_28rpx"
								:class="isCodeDisabled ? 'Color_B4BAC9':'Color_0064FF'">{{ btnText }}</text>
						</view>
						<view class="ClearB"></view>
					</view>
					<view class="Input">
						<view class="img-box">
							<image :src="$.imgSrc + '/scimg/login_password.png'" mode="aspectFit"
								class="input_left_icon input_icon"></image>
						</view>
						<input v-show="!showPassword" type="password" v-model="logInData.password" placeholder="请输入您的密码"
							class="Height100 Input1 FloatL FontS_32rpx" />
						<input v-show="showPassword" type="text" v-model="logInData.password" placeholder="请输入您的密码"
							class="Height100 Input1 FloatL FontS_32rpx" />
						<view class="img-box">
							<image :src="$.imgSrc + (!showPassword ? '/scimg/login_no.png' : '/scimg/login_yes.png')"
								mode="aspectFit" class="input_left_icon input_icon" @click="clickPasswordBtn"></image>
						</view>
						<view class="ClearB"></view>
					</view>
				</view>
				<!-- <view class="Agree Width100 MarginT_60rpx" @click="chooseAgree">
          <view class="Point FloatL" v-if="isAgree">
            <image :src="$.imgSrc + '/scimg/choose_y1.png'" mode="aspectFit" class="Block Width100 Height100"></image>
          </view>
          <view class="Point Border FloatL BorderR_50 InsideB" v-else></view>
          <text class="Block FloatL MarginL_20rpx Color_605F72 FontS_26rpx">本人已同意</text>
          <text class="Block FloatL Color_0064FF FontS_26rpx" @click.stop="checkAgree(2)">《用户协议》</text>
          <text class="Block FloatL Color_605F72 FontS_26rpx">与</text>
          <text class="Block FloatL Color_0064FF FontS_26rpx" @click.stop="checkAgree(3)">《隐私协议》</text>
          <view class="ClearB"></view>
        </view> -->
				<button type="button" :disabled="isDisabled"
					class="Btn Block Width100 Color_FFFFFF FontS_36rpx FontBold"
					@click="confirmSub">立即{{ currNav == 1 ? '注册':'登录' }}</button>
				<!-- <text @click="findPsw" class="Block MarginT_40rpx TextCenter FontS_26rpx Color_0064FF"
					v-if="currNav == 2">找回密码？</text> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		// 组件
		components: {},
		data() {
			return {
				// 公用的js
				$: this.$,
				bgUrl1: '', // 登录信息背景图
				bgUrl2: '', // 登录信息背景图
				isAgree: false,
				navList: [
					// {type:1,label:'注册'},
					{
						type: 2,
						label: '登录'
					},
				],
				currNav: 2,
				currType: 1,
				isDisabled: false,
				logInData: {
					phone: '', //
					validateCode: '', //
					password: '', //
				}, //
				btnText: '获取验证码',
				times: null,
				seconds: 60,
				isCodeDisabled: false,
				showPassword: false,
			}
		},
		// 页面加载
		onLoad(e) {
			if (typeof(e.type) != 'undefined') {
				this.currNav = e.type
			}
		},
		// 页面显示
		onShow() {
			// 顶部背景图
			this.bgUrl1 = "background-image:url('" + this.$.imgSrc +
				"/scimg/login_bg_top.png');background-repeat: no-repeat; background-position: center; background-size: cover; min-height: 100vh; min-width: 100vw;"
		},
		// 计算属性
		computed: {},
		// 方法
		methods: {
			clickPasswordBtn() {
				this.showPassword = !this.showPassword
			},
			checkAgree(type) {
				let urlKey = 'portalTextType'
				this.$.open('/pages/logIn/agree?type=' + type)
			},
			getCode() {
				if (!this.$.isEmpty(this.logInData.phone)) {
					this.$.toast('请输入手机号')
					return
				}
				let datas = {
					phone: this.logInData.phone,
					type: 2
				}
				this.isCodeDisabled = true
				this.$request.globalRequest('/hyjg-admin/mapi/account/sendSmsCode', datas, 'POST').then(res => {
					if (res.code == 0) {
						this.timeDown()
					} else {
						this.$.toast(res.msg)
						this.isCodeDisabled = false
					}
				})
			},
			timeDown() {
				this.times = setInterval(() => {
					if (this.seconds > 0) {
						this.seconds--
						this.btnText = this.seconds + 'S'
					} else {
						this.seconds = 60
						this.isCodeDisabled = false
						this.btnText = '获取验证码'
						clearInterval(this.times)
					}
				}, 1000)
			},
			// 提交
			confirmSub() {
				// this.$.setData('token','1')
				// this.$.openTab('/pages/index/index')
				// return
				// this.$.open('/pages/logIn/userInfo')
				let url = '/hyjg-admin/mapi/account/register'
				if (!this.$.isEmpty(this.logInData.phone)) {
					this.$.toast('请填写用户名')
					return
				}
				if (!this.$.isEmpty(this.logInData.password)) {
					this.$.toast('请填写密码')
					return
				}
				// if(!this.isAgree){
				//   this.$.toast('请勾选用户协议和隐私协议')
				//   return
				// }
				let datas = {
					nuserid: this.logInData.phone,
					cuserpwd: this.logInData.password,
				}
				url = '/hiddenDanger/auth/login'
				this.$.showLoading('登录中...')
				this.isDisabled = true
				this.$request.globalRequest(url, datas, 'POST').then(res => {
					if (res.code === 200) {
						this.$.toast('登录成功')
						this.$.setData('token', res.result.nuserid)
						this.$.setData('userInfo', {
							username: res.result.nuserid,
							role: res.result.role
						})
						setTimeout(() => {
							this.$.hideLoading('登录中...')
							this.isDisabled = false
							this.$.openTab('/pages/index/index')
						}, 1500)
					} else {
						this.$.toast(res.message)
						this.isDisabled = false
					}
				}).catch(() => {
					this.isDisabled = false
					this.$.toast('连接服务器失败')
				})
			},
			// 找回密码
			findPsw() {
				this.$.open('/pages/logIn/findPsw')
			},
			chooseAgree() {
				this.isAgree = !this.isAgree
			},
			chooseNav(type) {
				this.currNav = type
			},
			chooseType(type) {
				this.currType = type
			},
			// 跳转页面
			skipPage(even) {
				this.$.open(even)
			},
		},
		onReady() {},
		// 页面卸载
		onUnload() {

		},
		// 触发下拉刷新
		onPullDownRefresh() {
			// 延迟关闭刷新动画
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1500);
		},
		// 页面上拉触底事件的处理函数
		onReachBottom() {},
	}
</script>

<style>
	page {
		background: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
	.Box {
		padding-top: var(--status-bar-height);

		.Content {
			width: calc(100% - 176rpx);
			padding: 112rpx 0rpx 180rpx 0rpx;

			.Logo {
				width: 150rpx;
				height: 150rpx;
				margin: auto;
			}

			.NavBox {
				.logo-title {
					font-family: 'MFLiHei_Noncommercial-Regular';
					font-size: 70rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					color: white;
				}

				.Unit {
					margin-right: 110rpx;

					.Line {
						left: 50%;
						transform: translateX(-50%);
						bottom: -26rpx;
						width: 74rpx;
						height: 10rpx;
						border-radius: 6rpx;
					}
				}
			}

			.TypeBox {
				.Unit {
					margin-right: 108rpx;

					.Point {
						width: 46rpx;
						height: 46rpx;
					}

					.Border {
						width: 46rpx;
						height: 46rpx;
						border: 4rpx solid #B3BACB;
					}
				}
			}

			.InputBox {
				.Input {
					height: 110rpx;
					border-radius: 8rpx;
					margin-bottom: 48rpx;
					background-color: rgba(225, 225, 225, 0.8);
					box-shadow: 0px 4px 10px 1px rgba(0, 0, 0, 0.1);
					position: relative;
					display: flex;

					.img-box {
						height: 110rpx;
						width: 110rpx;
						display: flex;
						justify-content: center;
						align-items: center;

						.input_icon {
							width: 54rpx;
							height: 54rpx;
						}

						.input_left_icon {
							position: absolute;
						}
					}

					.input-placeholder {
						color: rgba(0, 0, 0, 0.4) !important;
					}

					.CodeBox {
						text {
							line-height: 110rpx;
						}
					}

					.Num {
						width: 110rpx;
						border-right: 4rpx solid #DADADA;
						margin-top: 34rpx;
					}

					.Input1 {
						// padding-left: 20rpx;
						// width: calc(100% - 260rpx);
						flex: 1;
					}

					.Input2 {
						width: calc(100% - 120rpx);
					}
				}
			}

			.Agree {
				.Point {
					width: 34rpx;
					height: 34rpx;
				}

				.Border {
					width: 34rpx;
					height: 34rpx;
					border: 2rpx solid #B3BACB;
				}
			}

			.Btn {
				font-family: 'SOURCEHANSANSCN-MEDIUM';
				margin-top: 96rpx;
				height: 108rpx;
				background: linear-gradient(0deg, #0064FF 0%, #2D99FD 100%);
				box-shadow: 0px 4px 10px 1px rgba(0, 0, 0, 0.1);
				border-radius: 8rpx;
				line-height: 108rpx;
			}
		}
	}

	.pic {
		position: absolute;
		bottom: 0;
		width: 100%;
	}
</style>