wangluohuoyun-app/pages/public/login.vue

<template>
	<view class="container">
		<u-icon class="back-btn" name="arrow-left" color="black" size="20" @click="navBack"></u-icon>
		<view class="wrapper">
			<image style='width:38px;height:38px;margin:223rpx 0 20px 0;' src='@/static/logo.png'></image>
			<h2 class="title Semibold">欢迎使用智运</h2>
			<view
				style='position:relative;width:100%;margin-top:50px;border-bottom:1px solid #E8E9ED;padding:10px;align-items: center;'
				class="flex">
				<view class="phone-before-num NumberMedium">+86</view>
				<view style='width:85%;'>
					<!-- <u--input class="phone-number" border="none" maxlength='11' v-model='phone'
						placeholder="请输入手机号码" type="number"></u--input>
					<u-input /> -->
					<u--input v-model="phone" border="none" type='number' placeholder="请输入手机号码" class="phone-number"
						maxlength='11' :clearable='true'></u--input>
				</view>
			</view>
			<view style='margin-top:20px;border-bottom:1px solid #E8E9ED;position:relative;height:40px'>
				<!-- <u--input class='password' border="none" v-model='password'
					placeholder="请输入密码，6-16位字符" :type="type" value="">
					</u--input> -->
				<u-input v-if="isShowPassword=='password'" class='password' border="none" v-model='password' placeholder="请输入密码，6-16位字符"
					type="password" :clearable='true'>
					<template slot="suffix">
						<u-icon name="eye-fill" color="rgb(192, 196, 204)" size="24" @click="passWordStatus(1)"
							v-if="isShowPassword=='password'"></u-icon>
						<u-icon name="eye-off" color="rgb(192, 196, 204)" size="24" @click="passWordStatus(2)" v-else>
						</u-icon>
					</template>
				</u-input>
				<u-input v-else class='password' border="none" v-model='password' placeholder="请输入密码，6-16位字符"
					type="text" :clearable='true'>
					<template slot="suffix">
						<u-icon name="eye-fill" color="rgb(192, 196, 204)" size="24" @click="passWordStatus(1)"
							v-if="isShowPassword=='password'"></u-icon>
						<u-icon name="eye-off" color="rgb(192, 196, 204)" size="24" @click="passWordStatus(2)" v-else>
						</u-icon>
					</template>
				</u-input>
			</view>
			<button :class='phone!=""&&password!=""?"active":""' @click='passlogin'
				class='Regular verificationCode'>登录</button>
			<button @click='goregister' class='verificationCode active Regular'>手机号一键注册</button>
			<view class='flex' style='color:#6A6A6A;margin-top:10px;'>
				<view style='flex:1;text-align:center;border-right:1px solid #E8E9ED;' class="Regular"
					@click="forgetpass()">忘记密码</view>
				<view @click='gocode' style='flex:1;text-align:center;' class="Regular">验证码登录</view>
			</view>
		</view>
		 <u-modal :show="isShowAlert" :title="alertTitle" :closeOnClickOverlay='true' confirmText='退出登录' :showCancelButton='true' confirmColor='#2772FB'  @confirm="confirmClick" @close="cancelClick" @cancel="cancelClick"></u-modal>
	</view>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';
	import {
		openFSqlite,
		createFSQL,
		selectFSQL,
		addFSQL
	} from '../../util/f.js'
	import helper from '@/common/helper.js';
	import {
		queryData,
		upData,
		initData
	} from '../../util/dbUtil.js'
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				isShowAlert:false,
				alertTitle:'当前账号已禁用',
				isShowPassword: 'password',
				inputContent: null,
				loginType: "wechat",
				phone: '',
				password: '',
				logining: false,
				isPhone: false,
				isApple: true,
				accessToken: '',
				params: {
					encryptedData: '',
					session_key: '',
					iv: '',
				},
				userInfo: {
					nickName: '',
					avatarUrl: '',
					gender: '',
					phone: ''
				},
				type: 'password',
				inputStatus: 'none',
				verifyCode: null,
				sendText: '获取验证码',
				sendDisabled: false,
				system: '',
				platform: '',
				userData: undefined,
				canIUseProfile: false
			}
		},
		computed: {
			...mapState(['clientId'])
		},
		onShow() {
			// this.loginType = "wechat"
			this.$api.logout()
		},
		onLoad(options) {

			if (wx.getUserProfile) {
				console.log('--check getUserProfile--OK');
				this.canIUseProfile = true;
			}
			console.log("login on load")
			// var that = this
			// that.$request.baseRequest('user', 'sendIsApple', {
			// }).then(res => {
			// 	that.isApple = res.data
			// })
			//  uni.getSystemInfo({
			// 	success:(res) => {
			// 		// console.log(res)
			// 		this.system = res.system  // ios
			// 		this.platform = res.platform  // 14.3
			// 	}
			// })
		},
		methods: {
			passWordStatus(type) {
				if (type == 1) {
					this.isShowPassword = 'text'
				} else {
					this.isShowPassword = 'password'
				}
			},
			cancelClick(){
				this.isShowAlert = false
			},
			confirmClick(){
				
				if (uni.getSystemInfoSync().platform == 'ios'){
				    plus.ios.import("UIApplication").sharedApplication().performSelector("exit")
				} else if (uni.getSystemInfoSync().platform == 'android'){
				    plus.runtime.quit();
				}
			},
			passlogin(e) {
				var that = this
				uni.showLoading({
					title: '登录中',
					mask: true
				})
				console.log("clinetId", this.clientId)
				that.$request.baseRequest('get', '/commonUser/login', {
						phone: this.phone,
						password: this.password,
						loginFlag: 2,
						identification: 1
					}).then(res => {
						if (res.code == 200) {
							console.log("userInfo", res.data)
							uni.setStorageSync('userInfo', res.data)
							that.$request.baseRequest('get', '/newsInfo/unreadMessage', {
								reCommonId: this.userInfo.id,
							}).then(res3 => {
								if (res3.data) {
									let name = 'myTip';
									let value = res3.data
									if (value == 0) {
										uni.removeTabBarBadge({
											index: 2
										})
									}
									that.$store.commit('$uStore', {
										name,
										value
									});
									if (value != 0 && value) {
										uni.setTabBarBadge({
											index: 2,
											text: value + ""
										})
									}
								}
							})
							that.$request.baseRequest('get', '/driverInfo/firstAuthentication', {
								driverPhone: this.phone,
							}).then(res2 => {
								if(res.data.statusFlag=='已禁用'){
									this.isShowAlert = true
									uni.hideLoading()
									return
								}
								
								uni.setStorageSync('pcuserInfo', res.data)
								uni.setStorageSync('userInfo', res.data)
								uni.setStorageSync('firstAuthentication', res2.data)
								helper.getListByUserId()
								that.$store.commit('login', res.data)
								var name = 'userInfo';
								var value = res.data;
								that.$store.commit('$uStore', {
									name,
									value
								});
								
								uni.switchTab({
									url: '/pages/goodSource/index'
								});
								uni.hideLoading()
								uni.switchTab({
									url: '/pages/goodSource/index'
								});
								uni.hideLoading()

							})
				
				
						} else {
							uni.hideLoading()
							uni.showToast({
								title: res.message,
								icon: 'none',
								duration: 2000
							})
						}
					})
					.catch(res => {
						uni.$u.toast(res.message);
					});
			},
			gocode() {
				uni.navigateTo({
					url: '/pages/public/loginOther'
				})
			},
			forgetpass() {
				uni.navigateTo({
					url: '/pages/mine/settings/editPassword'
				})
			},
			goregister() {
				uni.navigateTo({
					url: '/pages/public/register'
				})
			},

			...mapMutations(['login']),
			navBack() {
				uni.navigateBack();
			},
		},

	}
</script>

<style lang='scss' scoped>
	.apple {
		background: #000;
		width: 35px;
		height: 35px;
		padding: 8px;
		border-radius: 50%;
		vertical-align: middle;
	}

	page {
		background: #fff;
	}

	.close {
		width: 20px;
		height: 20px;
		position: absolute;
		right: 0px;
	}

	.close1 {
		width: 20px;
		height: 20px;
		position: absolute;
		right: 10px;
		top: 0;
	}

	.close2 {
		width: 15px;
		height: 15px;
		position: absolute;
		right: 19px;
		top: 50%;
		transform: translateY(-45%);
	}

	.password {
		border: none;
		outline: none;
	}

	.cuIcon-weixin {
		background: #2772FB;
		color: #fff;
		font-size: 18px;
		padding: 9px;
		border-radius: 50%;
		vertical-align: middle;
		margin-right: 5px;
	}

	.container {
		/* padding-top: 85px; */
		position: relative;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		background: url('~@/static/images/mine/bg@2x.png');
		background-size: cover;
	}

	.wrapper {
		position: relative;
		z-index: 90;
		padding-bottom: 40upx;
		height: 100%;
		padding: 0 30px;
	}

	.back-btn {
		position: absolute;
		left: 40upx;
		z-index: 9999;
		padding-top: var(--status-bar-height);
		top: 40upx;
		font-size: 40upx;
		color: red;
	}

	.verificationCode {
		margin-top: 20px;
		background: #F5F6F9;
		color: #AFB3BF;
	}

	.verificationCode:after {
		border: none;
	}

	.verificationCode.active {
		background: #2772FB;
		color: #fff;
	}

	.register {
		/* position:absolute; */
		bottom: 20px;
		left: 50%;
		transform: translateX(-50%);
		color: #333333;
		height: 50px;
		line-height: 50px;
		border-radius: 30px;
		border: 1px solid #444444;
	}

	.register:after {
		border: none;
	}

	.phone-before-num {
		font-size: 34rpx;
		color: #333333;
		border-right: 1px solid #E8E9ED;
		padding-right: 20rpx;
	}

	.phone-number {
		margin-left: 20rpx;
		font-size: 34rpx;
		font-family: DINPro-Medium, DINPro;
		font-weight: 500;
		color: #333333;
	}
</style>