productDev/dmvisit.git

¶Ô±ÈÐÂÎÄ¼þ
			@@ -0,0 +1,360 @@
			<template>
			<view class="login">
			<image class="login_bg" src="@/static/login_bg@2x.png" mode="widthFix" />
			<image class="login_logo" src="@/static/logo@2x.png" mode="widthFix" />
			<view class="login_title">å®æ³°ç©æµæºæ§ååº</view>
			<view class="login_title">ç©æµè½¦å¸æºç»å½</view>
			<view class="tabs">
			<view class="tab" @click="tabsClick(0)" :class="{active: activeTab == 0 }">
			<view>è´¦å·ç»å½</view>
			<view class="bor"></view>
			</view>
			<view class="tab" @click="tabsClick(1)" :class="{active: activeTab == 1 }">
			<view>éªè¯ç ç»å½</view>
			<view class="bor"></view>
			</view>
			</view>
			<view class="login_list">
			<template v-if="activeTab == 0">
			<view class="login_list_item">
			<image src="@/static/login_ic_phone@2x.png" mode="widthFix" />
			<input v-model="form.username" type="tel" @focus="showKeyboard = true" @blur="showKeyboard = false"
			maxlength="18" placeholder="è´¦å·" />
			</view>
			<view class="login_list_item">
			<image src="@/static/login_ic_password@2x.png" mode="widthFix" />
			<input v-model="form.password" @focus="showKeyboard = true" @blur="showKeyboard = false" type="password"
			placeholder="å¯ç " />
			</view>
			</template>
			<template v-else>
			<view class="login_list_item">
			<image src="@/static/login_ic_phone@2x.png" mode="widthFix" />
			<input v-model="form.phone" type="tel" @focus="showKeyboard = true" @blur="showKeyboard = false"
			:maxlength="18" placeholder="ææºå·" />
			</view>
			<view class="login_list_item">
			<image src="@/static/ic_captcha.png" mode="widthFix"></image>
			<input v-model="form.code" placeholder="è¯·è¾å¥éªè¯ç " :maxlength="6" type="number" />
			<text class="captcha" v-if="countDown == 0" @click="initCaptcha">è·åéªè¯ç </text>
			<text class="placeholder9" v-else>{{ countDown }}</text>
			</view>
			</template>
			</view>
			<view class="login_btn">
			<view class="login_btn_n" @click="onLogin">ç«å³ç»å½</view>
			</view>
			<!-- -->
			<view class="btns" v-if="!showKeyboard">
			<view class="btn" @click="handleRegister">ç«å³æ³¨å</view>
			<view class="btn separate"> \| </view>
			<view class="btn" @click="handleSetPsd">å¿è®°å¯ç </view>
			</view>
			</view>
			</template>

			<script>
			import {
			driverLogin,
			loginCaptcha,
			getUserInfo,
			sendSms,
			loginDriverByPhone
			} from '@/api'
			import {
			mapState,
			mapMutations
			} from 'vuex'
			export default {
			data() {
			return {
			form: {
			username: null,
			phone: null,
			password: null
			},
			isShowProtocol: false,
			showKeyboard: false,
			countDown: 0,
			activeTab: 0,

			ywinfo: {}
			}
			},
			onLoad() {
			const ywinfo = uni.getStorageSync('ywinfo') \|\| {}
			if (ywinfo.ywid && ywinfo.type == 0) {
			this.ywinfo = ywinfo
			uni.setStorageSync('ywinfo', {})
			}
			},

			methods: {
			onLogin() {
			const {
			form,
			activeTab
			} = this
			if (activeTab == 0) {
			if (!form.username) return uni.showToast({
			title: 'è´¦å·ä¸è½ä¸ºç©º',
			icon: 'none'
			})
			if (!form.password) return uni.showToast({
			title: 'å¯ç ä¸è½ä¸ºç©º',
			icon: 'none'
			})
			} else {
			if (!form.phone) return uni.showToast({
			title: 'ææºå·ä¸è½ä¸ºç©º',
			icon: 'none'
			})
			if (!form.code) return uni.showToast({
			title: 'éªè¯ç ä¸è½ä¸ºç©º',
			icon: 'none'
			})
			}
			let fn = activeTab == 0 ? driverLogin : loginDriverByPhone
			fn({
			...form,
			openid: this.$store.state.openId,
			}).then(res => {
			if (res.code === 200) {
			this.setToken(res.data)
			getUserInfo().then(ress => {
			setTimeout(() => {
			this.showToast('ç»å½æå')
			})
			uni.setStorageSync('ywinfo', this.ywinfo)
			this.setDriverInfo(ress.data)
			uni.redirectTo({
			url: "/pages/driver/index"
			})
			})
			}
			})
			},
			...mapMutations(["setToken", "setDriverInfo"]),
			handleRegister() {
			uni.navigateTo({
			url: "/pages/driver/register"
			})
			},
			tabsClick(val) {
			this.activeTab = val
			if (val == 0) {
			this.form.username = this.form.username \|\| this.form.phone
			this.form.phone = null
			this.form.code = null
			} else {
			this.form.phone = this.form.username \|\| this.form.phone
			this.form.password = null
			this.form.username = null
			}
			},
			handleSetPsd() {
			if (this.form.username \|\| this.form.phone) {
			uni.navigateTo({
			url: "/pages/driver/forgetPsd?phone=" + this.form.username \|\| this.form.phone \|\| ''
			})
			} else {
			uni.navigateTo({
			url: "/pages/driver/forgetPsd"
			})
			}

			},
			dealChange(e) {
			console.log(e)
			},
			initCaptcha() {
			if (!this.form.phone) return uni.showToast({
			title: 'ææºå·ä¸è½ä¸ºç©º',
			icon: 'none'
			})
			sendSms({
			phone: this.form.phone
			}).then(res => {
			if (res.code === 200) {
			this.countDown = 60
			setInterval(() => {
			if (this.countDown == 0) return
			this.countDown--
			}, 1000)
			}
			})
			},
			}
			}
			</script>

			<style lang="scss" scoped>
			.login {
			width: 100%;
			display: flex;
			padding-top: 100rpx;
			box-sizing: border-box;
			align-items: center;
			flex-direction: column;
			background: linear-gradient(180deg,
			rgba(39, 155, 170, 0.2) 0%,
			rgba(39, 155, 170, 0) 100%);

			.login_logo {
			width: 180rpx;
			height: 180rpx;
			margin-bottom: 40rpx;
			}

			.login_bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			z-index: -1;
			}

			.login_title {
			font-size: 44rpx;
			font-weight: 600;
			color: #333333;
			}

			.tabs {
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			width: 530rpx;
			margin: 48rpx auto 0rpx;

			.tab {
			font-size: 30rpx;
			color: #666666;
			display: flex;
			flex-direction: column;
			align-items: center;
			height: 52rpx;
			line-height: 36rpx;
			}

			.active {
			font-weight: bold;
			font-size: 34rpx;
			color: #222222;

			.bor {
			width: 80rpx;
			height: 8rpx;
			background: linear-gradient(to bottom, #4d99a8, #a3c8d4);
			}
			}
			}

			.login_list {
			margin-top: 36rpx;
			width: 100%;
			padding: 0 60rpx;
			box-sizing: border-box;

			.login_list_item {
			width: 100%;
			border-radius: 50rpx;
			height: 98rpx;
			padding: 0 40rpx;
			box-sizing: border-box;
			background: #ffffff;
			margin-bottom: 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			&:last-child {
			margin-bottom: 0 !important;
			}

			image {
			flex-shrink: 0;
			width: 40rpx;
			height: 40rpx;
			}

			.captcha {
			color: $uni-color-primary;
			font-size: 30rpx;
			}

			input {
			flex: 1;
			height: 100%;
			color: #666666;
			margin-left: 24rpx;
			border: none;
			}
			}
			}

			.login_btn {
			width: 100%;
			padding: 0 60rpx;
			box-sizing: border-box;
			margin-top: 80rpx;

			.for_psd {
			color: $uni-color-primary;
			margin-top: 40rpx;
			width: 140rpx;
			text-align: center;
			margin: 40rpx auto;
			}

			.login_btn_n {
			width: 100%;
			height: 98rpx;
			background: $uni-color-primary;
			box-shadow: 0rpx 12rpx 24rpx 0rpx rgba(39, 155, 170, 0.2);
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 600;
			font-size: 32rpx;
			color: #ffffff;
			border-radius: 50rpx;
			}
			}

			.deal_wrap {
			position: absolute;
			width: 100%;
			left: 0;
			text-align: center;
			bottom: 108rpx;

			.deal {
			color: $uni-color-primary;
			}
			}

			.btns {
			display: flex;
			align-items: center;
			justify-content: center;
			position: fixed;
			bottom: 60rpx;
			left: 0;
			width: 100%;

			.btn {
			font-size: 30rpx;
			color: $uni-color-primary;
			}

			.separate {
			margin: 0 8rpx;
			}
			}
			}

			.modal {
			padding: 32rpx;
			}
			</style>