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 maxlength='16' 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';
	import * as config from '@/config/index.js'
	//插件对象
	var sdkwx = uni.requireNativePlugin('Hdgq-LocSdkWX');
	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,
				//定位
				shippingNoteInfos: [{
					shippingNoteNumber: '',
					serialNumber: "",
					startCountrySubdivisionCode: "",
					endCountrySubdivisionCode: "",
					startLongitude: "",
					startLatitude: "",
					endLongitude: "",
					endLatitude: "",
					startLocationText: "",
					endLocationText: "",
					vehicleNumber: "",
					driverName: "",
					interval: "",
				}],
				//网络货运信息定位
				appId: "", //网络货运企业APP的唯一标识
				appSecurity: "", //网络货运企业在省平台申请的接入安全码
				enterpriseSenderCode: "", //网络货运企业在省平台申请的企业发送代码
				environment: "", //环境:“debug”接入测试环境,“release”接入正式环境。
				clientid:"",
			}
		},
		computed: {
			...mapState(['clientId'])
		},
		onShow() {
			// console.log(uni.$u.test.date('2020-02-29'))
			// this.loginType = "wechat"
			this.$api.logout()
		},
		onLoad(options) {
			// #ifdef APP-PLUS
			plus.push.getClientInfoAsync((info) => {//获取设备唯一cid
				var name = 'clientId'
				var value = info.clientid
				// this.$store.commit('$uStore', {name,value});
				uni.setStorageSync("clientId", info.clientid)
				this.clientid = info.clientid
			}, err => {});
			
			var isContains = true; //隐私权政策是否包含高德开平隐私权政策  true是包含
			var isShow = true; //隐私权政策是否弹窗展示告知用户 true是展示 
			sdkwx.updatePrivacyShow(isContains, isShow);

			var isAgree = true; //隐私权政策是否取得用户同意  true是用户同意
			sdkwx.updatePrivacyAgree(isAgree);
			//检查定位权限
			// sdkwx.checkLocationPermission(function(res){
			// 	console.log(res);
			// });
			// #endif

			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: {
			restart() { //开启定位
				var remark = "测试"; //备注
				let that = this
				sdkwx.restart(this.shippingNoteInfos[0].vehicleNumber, this.shippingNoteInfos[0].driverName, remark, this
					.shippingNoteInfos,
					function(res) {
						if (res.type == "onSuccess") {
							//成功
							console.log("开启定位成功！！！", res)
							var shippingNoteInfos = res.data[0]; //运单信息列表
							if (shippingNoteInfos) {
								let dateTtime = Number(shippingNoteInfos.interval + 60000)
								console.log("开始定时", dateTtime)
								that.timer = setTimeout(() => {
									console.log("定时")
									that.send()
								}, dateTtime);
							}
						} else if (res.type == "onFailure") {
							//失败
							console.log("开启定位失败！！！", res)
							var errorCode = res.data.errorCode; //错误码
							var errorMsg = res.data.errorMsg; //错误描述
							that.timer = setTimeout(() => { //失败也需要定时发送定位
								console.log("定时")
								that.send()
							}, 975204); //15分钟
						}
					});
			},
			send() { //发送定位
				var remark = ""
				var that = this
				console.log("send参数", this.shippingNoteInfos)
				sdkwx.send(this.shippingNoteInfos[0].vehicleNumber, this.shippingNoteInfos[0].driverName, remark, this
					.shippingNoteInfos,
					function(res) {
						if (res.type == "onSuccess") {
							console.log("App.vue发送定位成功", res)
							var shippingNoteInfos = res.data[0]; //运单信息列表
							if (shippingNoteInfos) {
								let dateTime = Number(shippingNoteInfos.interval + 60000)
								console.log("定时开始", dateTime)
								that.timer = setTimeout(() => {
									that.send()
								}, dateTime);
							}
						} else if (res.type == "onFailure") {
							console.log("App.vue发送定位失败", res)
							//失败
							var errorCode = res.data.errorCode; //错误码
							var errorMsg = res.data.errorMsg; //错误描述
							that.timer = setTimeout(() => { //失败也需要定时上传定位(为了解决频繁调用接口问题)
								that.send()
							}, 975204);
						}
					});
			},
			auth() { //授权
				let phoneType = uni.getSystemInfoSync().platform //判断手机类型
				this.enterpriseSenderCode = config.def().enterpriseSenderCode
				this.environment = config.def().environment
				if (phoneType == "android") {
					this.appId = config.def().androidAppId
					this.appSecurity = config.def().androidAppSecurity
				} else if (phoneType == "ios") {
					// this.appId = "uni.UNIDCD13AC"
					// this.appSecurity = "b01e4805276646eeb25f0fad91de97a4f32e8c2c0e0d42e5b24cc4737e9f040f"
					this.appId = config.def().iosAppId
					this.appSecurity = config.def().iosAppSecurity
				}
				console.log("授权")
				let that = this
				sdkwx.auth(this.appId, this.appSecurity, this.enterpriseSenderCode, this.environment, function(res) {
					if (res.type == "onSuccess") {
						//成功
						if (res.data.length > 0) {
							that.restart()
						}
						console.log("授权成功", res)
					} else if (res.type == "onFailure") {
						//失败
						var errorCode = res.data.errorCode; //错误码
						var errorMsg = res.data.errorMsg; //错误描述
						console.log("授权失败", "没有可定位的订单")
						console.log(res)
					}
					// uni.showModal({
					// 	content: JSON.stringify(res)
					// });
				});
			},
			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,
								cid:that.clientid
							}, '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.shippingNoteInfos[0].shippingNoteNumber = res1.data[0]
												.orderNo //运单号
											that.shippingNoteInfos[0].serialNumber = "0000" //分单号
											that.shippingNoteInfos[0].startCountrySubdivisionCode =
												res1.data[0]
												.sendAdCode //起点位置行政区划代码，调 用 start/stop/pause/restart 时 必填，调用 send 非必填
											that.shippingNoteInfos[0].endCountrySubdivisionCode = res1
												.data[0]
												.unsendAdCode //到达位置行政区划代码，调 用 start/stop/pause/restart 时 必填，调用 send 非必填
											that.shippingNoteInfos[0].startLongitude = res1.data[0]
												.sendLongitude //起点位置经度，调用 start/stop/pause/restart 时必 填，调用 send 非必填
											that.shippingNoteInfos[0].startLatitude = res1.data[0]
												.sendLatitude //起点位置纬度，调用 start/stop/pause/restart 时必 填，调用 send 非必填
											that.shippingNoteInfos[0].endLongitude = res1.data[0]
												.unsendLongitude //到达位置经度，调用 start/stop/pause/restart 时必 填，调用 send 非必填
											that.shippingNoteInfos[0].endLatitude = res1.data[0]
												.unsendLatitude //到达位置纬度，调用 start/stop/pause/restart 时必 填，调用 send 非必填
											that.shippingNoteInfos[0].driverName = res1.data[0]
												.driverName //司机姓名，SDK 回调返回， 调用 start/stop/pause/restart/ 必填，send 时非必填
											that.shippingNoteInfos[0].vehicleNumber = res1.data[0]
												.carNumber //车牌号，SDK 回调返回，调 用 start/stop/pause/restart/必 填，send 时非必填
											that.shippingNoteInfos[0].startLocationText = res1.data[0]
												.sendCity //起点地址文字描述，调用 start/stop/pause/restart 时必 填，调用 send 非必填
											that.shippingNoteInfos[0].endLocationText = res1.data[0]
												.unloadCity //到达地址文字描述，调用 start/stop/pause/restart 时必 填，调用 send 非必填
											that.shippingNoteInfos[0].interval = "5000"
											console.log("查看参数", that.shippingNoteInfos)
											that.auth()
											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>