wangluohuoyun-huozhuapp/pages/public/loginOther.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='width:100%;margin-top:50px;border-bottom:1px solid #E8E9ED;padding:10px;' class="flex">
				<view class="phone-before-num NumberMedium">+86</view>

				<view style='width:85%;'>
					<!-- <u--input style='padding-left:10px;' class="NumberMedium" v-model='phone' @input='changephone' placeholder="请输入手机号码" type="number" maxlength="11" :clearable='true'></u--input> -->
					<input style='padding-left:10px;' class="NumberMedium" v-model='phone' @input='changephone'
						placeholder="请输入手机号码" type="number" maxlength="11">
				</view>
				<!-- <image v-if='phone!=""' @click='phone=""' class='close' src='../../static/img/login/guanbi@2x.png'></image> -->
			</view>
			<button @click='gocode' :class='codestatus?"active":""' class='verificationCode'>获取验证码</button>
			<view @click='gonumber' class="Regular use-password" style='text-align:center;color:#6A6A6A;'>使用账号密码登录
			</view>

			<button v-if='tabbar' @click='goregister' class='Regular register active'>手机号一键注册</button>
		</view>
		<view v-if="loginType === 'phone'" class="register-section">
			还没有账号?
			<text @click="toRegist">马上注册</text>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';
	import {
		openFSqlite,
		createFSQL,
		selectFSQL,
		addFSQL
	} from '../../util/f.js'
	import {
		queryData,
		upData,
		initData
	} from '../../util/dbUtil.js'
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				inputContent: null,
				loginType: "wechat",
				phone: '',
				password: '',
				logining: false,
				isPhone: false,
				isApple: true,
				accessToken: '',
				phone: '',
				params: {
					encryptedData: '',
					session_key: '',
					iv: '',
				},
				userInfo: {
					nickName: '',
					avatarUrl: '',
					gender: '',
					phone: ''
				},
				inputStatus: 'none',
				verifyCode: null,
				sendText: '获取验证码',
				sendDisabled: false,
				system: '',
				platform: '',
				userData: undefined,
				tabbar: true,
				windowHeight: '',
				canIUseProfile: false,
				codestatus: false
			}
		},
		computed: {
			...mapState(['clientId'])
		},
		onShow() {
			// this.loginType = "wechat"
			this.$api.logout()
		},
		onLoad(options) {
		},
		methods: {
			changephone(e) {
				if (e.detail.value.length > 11) {
					this.codestatus = true
				} else if (e.detail.value.length < 11) {
					this.codestatus = false
				} else {
					this.codestatus = true
				}
			},
			gonumber() {
				uni.navigateTo({
					url: '/pages/public/login'
				})
			},
			forgetpass() {
				uni.navigateTo({
					url: '/pages/public/reset'
				})
			},
			gocode() {
				if (this.phone.length == 11 && /^0?1[3|4|5|6|7|8][0-9]\d{8}$/.test(this.phone)) {
					uni.navigateTo({
						url: '/pages/public/code?phone=' + this.phone
					})
				} else if (this.phone.length == 0) {
					uni.showToast({
					 title: '手机号不能为空',
						icon: 'none'
					})
				} else {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
				}

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

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

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

	.container {
		/* padding-top: 223rpx; */
		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.active {
		background: #2772FB;
		color: #fff;
	}

	.verificationCode:after {
		border: none;
	}

	.register {
		position: absolute;
		bottom: 136rpx;
		left: 50%;
		transform: translateX(-50%);
		color: #333333;
		border-radius: 43rpx;
		border: 1px solid #444444;
		font-size: 28rpx;
		padding: 0rpx 49rpx;

	}

	.register:after {
		border: none;
	}

	.title {
		font-size: 46rpx;
	}

	.phone-before-num {
		font-size: 34rpx;
		font-family: DINPro-Medium, DINPro;
		font-weight: 500;
		color: #333333;
	}

	.use-password {
		margin-top: 31rpx;
	}
</style>