wangluohuoyun-huozhuapp/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%;'>
					<input class='phone' maxlength='11' v-model='phone' placeholder="请输入手机号码" type="number">
				</view>
			</view>
			<view style='margin-top:20px;border-bottom:1px solid #E8E9ED;position:relative;height:40px'>
				<view style='position:relative;'>
					<input class='password' v-model='password' v-if="isShowPassword=='password'" placeholder="请输入密码"
						type="password" @input="check">
					<input maxlength='16' class='password' v-model='password' v-else type="text" placeholder="请输入密码"
						@input="check">
					<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>
	</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 {
				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()
			console.log("login onShow")
		},
		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: {
			check(val) {
				console.log(val)
				if (!uni.$u.test.enOrNum(val.detail.value)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "密码只能是字母或数字！"
					})
					this.password = ''
					return
				}
			},
			passWordStatus(type) {
				if (type == 1) {
					this.isShowPassword = 'text'
				} else {
					this.isShowPassword = 'password'
				}
			},
			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
				}
				if (!uni.$u.test.enOrNum(this.password)) {
					that.$refs.uToast.show({
						type: 'error',
						message: "密码只能是字母或数字！"
					})
					return
				}

				that.$request.baseRequest('get', '/cargoOwnerInfo/firstAuthentication', {
					phone: this.phone,
				}).then(res => {
					if (res.data.authenticationStatus == '已禁用') {
						that.$refs.uToast.show({
							type: 'error',
							message: "账号审核中！"
						})

					} else {
						uni.showLoading({
							title: '登录中',
							mask: true
						})
						that.$request.baseRequest('get', '/commonUser/login', {
								phone: that.phone,
								password: that.password,
								loginFlag: 1,
								identification: 2
							}).then(res => {
								if (res.code == 200) {
									uni.setStorageSync('userInfo', res.data)
									that.$request.baseRequest('get', '/newsInfo/unreadMessage', {
										reCommonId: that.userInfo.id,
									}).then(res3 => {
										if (res3.data || res3.data == 0) {
											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.$store.commit('login', res.data)
									var name = 'userInfo';
									var value = res.data;
									that.$store.commit('$uStore', {
										name,
										value
									});
									uni.switchTab({
										url: '/pages/order/index'
									});
									uni.hideLoading()
								} else {
									uni.hideLoading()
									uni.showToast({
										title: res.message,
										icon: 'none',
										duration: 2000
									})
								}
							})
							.catch(res => {
								uni.hideLoading()
								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;
	}

	.phone {
		padding: 20rpx;
		font-size: 28rpx;
	}

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

	.yanjingicon {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.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;
		font-size: 28rpx;
	}

	.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;
	}

	/deep/.uni-input-input:disabled {
		background: #fff;
	}
</style>