index.vue 4.1 KB
Newer Older
芊里 已提交
1
<template>
L
123  
linju 已提交
2 3
	<view class="wrap">
		<!-- <uni-nav-bar left-icon="back" left-text="返回" right-text="菜单" title="导航栏组件"></uni-nav-bar> -->
L
213  
linju 已提交
4
		<view class="wrap-content">
芊里 已提交
5
			<view class="content">
L
linju 已提交
6
				<!-- 顶部文字 -->
芊里 已提交
7
				<text class="content-top-title">登陆后即可展示自己</text>
芊里 已提交
8
				<login-ikonw class="login-iknow" :link="link" text="登录即表示同意用户协议和隐私政策"></login-ikonw>
L
linju 已提交
9
				<!-- 登录框 (选择手机号所属国家和地区需要另行实现) -->
芊里 已提交
10 11 12 13
				<uni-forms ref="form" :value="formData" :rules="rules">
					<uni-forms-item name="phone">
						<uni-easyinput type="number" class="phone-input-box" :inputBorder="false"
							v-model="formData.phone" maxlength="11" placeholder="请输入手机号">
L
123  
linju 已提交
14
							<template slot="left">
芊里 已提交
15 16 17 18
								<!-- 当前仅支持中国大陆手机号 -->
								<!-- <picker mode="selector" :range="phoneArea" @change="selectPhoneArea"> -->
									<text class="phone-area" @click="selectPhoneArea">{{currenPhoneArea}}</text>
								<!-- </picker> -->
芊里 已提交
19 20 21 22 23
							</template>
						</uni-easyinput>
					</uni-forms-item>
					<button class="send-btn-box" :disabled="!canGetShortMsg" :type="canGetShortMsg?'primary':'default'"
						@click="sendShortMsg">获取短信验证码</button>
L
123  
linju 已提交
24 25 26
				</uni-forms>

				<!-- tip -->
芊里 已提交
27
				<text class="tip-text">未注册的手机号验证通过后将自动注册</text>
L
linju 已提交
28 29

				<!-- 其他登录方式 -->
L
23  
linju 已提交
30
				<view class="auth-box" v-if="loginList.includes('password')">
芊里 已提交
31
					<text class="login-text" hover-class="hover" @click="toPwdLogin">密码登录</text>
芊里 已提交
32
					<!-- <text class="login-text" hover-class="hover" @click="openLoginList">其他登录方式</text> -->
L
linju 已提交
33 34
				</view>
			</view>
芊里 已提交
35
		</view>
L
linju 已提交
36
		<!-- 登录按钮弹窗 -->
芊里 已提交
37
		<login-action-sheet ref="loginActionSheet"></login-action-sheet>
L
123  
linju 已提交
38
		<uni-quick-login ref="uniQuickLogin"></uni-quick-login>
芊里 已提交
39 40 41
	</view>
</template>

L
123  
linju 已提交
42
<script>	
L
23  
linju 已提交
43 44
var univerify_first,currentWebview;//是否一键登陆优先
import baseappConfig from '@/baseapp.config.json';
L
123  
linju 已提交
45
	import mixin from '../../common/loginPage.mixin.js';
L
12  
linju 已提交
46
	var currentPage;
L
123  
linju 已提交
47
	export default {
芊里 已提交
48
		mixins:[mixin],
芊里 已提交
49
		data() {
芊里 已提交
50
			return {
芊里 已提交
51
				phoneArea: ['+86'],
L
21  
linju 已提交
52
				currenPhoneArea: '+86',
L
23  
linju 已提交
53
				loginList:[]
L
linju 已提交
54
			}
L
123  
linju 已提交
55 56
		},
		onLoad(e) {
L
23  
linju 已提交
57
			this.loginList = baseappConfig.router.login
L
123  
linju 已提交
58
			univerify_first = e.univerify_first
L
21  
linju 已提交
59 60
			//#ifdef APP-PLUS
			if(univerify_first){
L
123  
linju 已提交
61 62 63
				const pages = getCurrentPages();
				currentWebview = pages[pages.length - 1].$getAppWebview();
				currentWebview.hide();
L
21  
linju 已提交
64
			}
芊里 已提交
65
			//#endif
L
12  
linju 已提交
66 67
		},
		onReady() {
芊里 已提交
68
			//#ifdef APP-PLUS
L
21  
linju 已提交
69
			if(univerify_first){
L
23  
linju 已提交
70
				console.log('开始一键登陆');
L
21  
linju 已提交
71 72
				this.$refs.uniQuickLogin.login('univerify')
				setTimeout(() => {
L
123  
linju 已提交
73 74 75 76 77
					currentWebview.setStyle({
						titleNView:{
							autoBackButton:true,
							backgroundColor:"#FFFFFF"
						}
L
21  
linju 已提交
78
					})
L
123  
linju 已提交
79
					currentWebview.show()
L
21  
linju 已提交
80 81
				}, 1500);
			}
芊里 已提交
82
			//#endif
芊里 已提交
83
		},
L
linju 已提交
84 85
		computed: {
			canGetShortMsg() {
86
				return this.isPhone;
芊里 已提交
87 88
			}
		},
L
linju 已提交
89
		methods: {
L
123  
linju 已提交
90 91 92 93
			selectPhoneArea(event) {
				uni.showToast({
					title: '当前仅支持中国大陆手机号',
					icon: 'none'
芊里 已提交
94 95
				});
				// this.currenPhoneArea = this.phoneArea[event.detail.value];
L
linju 已提交
96 97 98 99
			},
			sendShortMsg() {
				/**
				 * 发送验证吗
100
				 */
L
123  
linju 已提交
101
				uni.showLoading();
L
123  
linju 已提交
102 103 104 105 106 107 108
				uni.navigateTo({
					url: './phone-code?phoneNumber=' + this.formData.phone + '&phoneArea=' +
						this.currenPhoneArea,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
L
linju 已提交
109 110 111
			},
			/**
			 * 去密码登录页
芊里 已提交
112
			 */
L
linju 已提交
113 114 115 116 117 118 119
			toPwdLogin() {
				uni.navigateTo({
					url: './pwd-login'
				})
			},
			openLoginList() {
				this.$refs.loginActionSheet.open();
L
12  
linju 已提交
120 121 122
			},
			back() {
				uni.navigateBack()
芊里 已提交
123 124 125 126 127
			}
		}
	}
</script>

芊里 已提交
128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146
<style>
	@import url("../../common/loginPage.css");

	.content-top-title {
		text-align: center;
	}

	.login-iknow {
		justify-content: center;
	}

	.phone-area {
		/* #ifdef APP-NVUE */
		border-right-width: 1rpx;
		border-right-color: #d7d9d8;
		/* #endif */
		/* #ifndef APP-NVUE */
		border-right: 1rpx solid #d7d9d8;
		/* #endif */
芊里 已提交
147
	}
L
123  
linju 已提交
148
</style>