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:93%;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> -->
					<input placeholder-style="color:#AFB3BF" v-model="phone" border="none" type='number' placeholder="请输入手机号码" class="phone-number"
							maxlength='11' >
				</view>
			</view>
			<view style='margin-top:20px;border-bottom:1px solid #E8E9ED;position:relative;height:40px'>
				<view style='position:relative;'>
					<input placeholder-style="color:#AFB3BF" class='password' v-model='password' v-if="isShowPassword=='password'" placeholder="请输入密码" type="password">
					<input placeholder-style="color:#AFB3BF" class='password' v-model='password' v-else type="text" placeholder="请输入密码">
					<!-- <u-icon name="eye-off" color="rgb(192, 196, 204)" size="24" @click="passWordStatus(2)" v-else>
						</u-icon> -->
						<image class='yanjingicon' style='width:22px;height:22px;' @click="passWordStatus(1)" v-if="isShowPassword=='password'" src="../../static/yioncang.png" mode=""></image>
						<image class='yanjingicon' style='width:22px;height:22px;' @click="passWordStatus(2)" v-else src="../../static/xianshi.png" mode=""></image>
				</view>
			</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-toast ref="uToast"></u-toast>
		 <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() {
			// console.log(uni.$u.test.date('2020-02-29'))
			// 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
				if(this.phone==''){
					that.$refs.uToast.show({
						type: 'error',
						message: "请输入手机号！"
					})
					return
				}
				if(this.password==''){
					that.$refs.uToast.show({
						type: 'error',
						message: "请输入密码！"
					})
					return
				}
				that.$request.baseRequest('get', '/driverInfo/firstAuthentication', {
					driverPhone: this.phone,
				}).then(res => {
					if (res.data.authenticationStatus == '已禁用') {
						that.$refs.uToast.show({
							type: 'error',
							message: "账号审核中！"
						})
						
					} else {
				uni.showLoading({
					title: '登录中',
					mask: true
				})
				console.log("clinetId", this.clientId)
				that.$request.baseRequest('get', '/commonUser/login', {
						phone: that.phone,
						password: that.password,
						loginFlag: 2,
						identification: 1
					},'application/x-www-form-urlencoded').then(res => {
						if (res.code == 200) {
// 							uni.setStorageSync("shiro",encodeURIComponent(`ws_login_companyShortName=
// '黑龙江中天昊元贸易有限公司'; ws_login_rememberMe=1; ws_login_account=${that.phone}; ws_login_pwd=${that.password}; shiro.session=65500189-7bb5-457f-9ff6-0db069150e78`)
							uni.setStorageSync('userInfo', res.data)
							// uni.setStorageSync("shiro",res.header['Set-Cookie'])
							that.$request.baseRequest('get', '/newsInfo/unreadMessage', {
								reCommonId: that.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', '/orderInfo/getData',  {
									commonId:uni.getStorageSync('userInfo').id,
								}).then(res1 => {
								if(res1.data.length>0){
									that.$helper.fUN_AmapLocation.start({
											intervalTime: 5000,
											isReport: false
										},
										res => {
											// console.log('====确认装车开启连续定位====');
											// console.log(res)
											let _data = {
												orderId: res1.data[0].id,
												longitude: res.longitude,
												latitude: res.latitude,
												province: res.province,
												city: res.city,
												area: res.district
											}
											that.$helper.gjList.push(_data)
											uni.setStorageSync('mapGJ', that.$helper.gjList);
											// console.log('this.$helper.gjList')
											// console.log(this.$helper.gjList)
											// console.log("条数", uni.getStorageSync('mapGJ').length)
											if (uni.getStorageSync('mapGJ').length > 100) {
												console.log(JSON.stringify(uni.getStorageSync('mapGJ')) )
												that.$request.baseRequest('post', '/hyOrderTravelPath/api/addInfo',  {
															orderId:"cdae6ec34c2349768c490a9fefa03fb3",
															longitudeLatitude:JSON.stringify(uni.getStorageSync('mapGJ'))   
													}).then(res => {
														uni.removeStorageSync('mapGJ');
														that.$helper.gjList = []
													})
													.catch(res => {
														uni.$u.toast(res.message);
													});
											}
											//判断缓存数据条数，超过reportInterval时清空缓存，重新存入缓存
										}
									);	
								}
							
							})
							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;
	}
	.yanjingicon{
		position:absolute;
		right:0;
		top:50%;
		transform: translate(-50%,-50%);
	}
	.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>