sailun-tbr-web/pages/login/index.vue

<template>
	<view>
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<u-image src="../../static/sailun/login_bg.png" mode="widthFix"></u-image>
		<view class="content">
			<u-card padding="50" :head-border-bottom="false" :show-head="false" :show-foot="false" :border="false" box-shadow="0px 1px 10px rgba(0,0,0,0.2)"
			 border-radius="20" margin="50rpx">
				<view slot="body">
					<view style="margin-top: 20rpx;">
						<u-field v-model="tel" :placeholder="$t('login.mobile')" label-width="50">
							<u-icon slot="icon" name="account" size="36" color="#666666"></u-icon>
						</u-field>
					</view>
					<view style="margin-top: 30rpx;">
						<u-field v-model="code" :placeholder="$t('login.code')" label-width="50">
							<u-icon slot="icon" name="lock" size="36" color="#666666"></u-icon>
							<u-button v-if="send!='zh'" size="mini" slot="right" type="primary" @click="getCode" shape="circle" :loading="codeLoading">{{codeText}}</u-button>
							<u-button v-else size="mini" slot="right" type="primary" @click="getCode" shape="circle" :loading="codeLoading">{{codeText}}</u-button>
						</u-field>
					</view>
					<view class="" v-if="send!='zh'">
						<u-verification-code  ref="uCode" @change="codeChange"></u-verification-code>
					</view>
					<u-verification-code v-else ref="uCode" @change="codeChange" start-text="Send" change-text="Reacquire in X S" end-text="Reacquire"></u-verification-code>
					<view style="margin-top: 80rpx;">
						<u-button type="primary" :ripple="true" ripple-bg-color="#99d4ff" shape="circle" @tap="$u.debounce(submit, 2000,immediate = true)"
						 :loading="loading">{{$t("login.login")}}</u-button>
					</view>
					<view style="margin-top: 80rpx;display: flex;justify-content: center;">
						<view class="u-flex" @click="inregister">
							<view style="color: rgba(0,160,234,0.5)">
								{{$t("login.no")}}
							</view>
							<view style="color: #00A0EA">
								{{$t("login.sign")}}
							</view>
						</view>
					</view>
				</view>
			</u-card>
		</view>
		<view class="foot">
			<view class="u-flex u-row-center u-col-center">
				<u-divider color="#0095FF" border-color="#0095FF" bg-color="#F4F4F4" fontSize="30" @click="switchLang">{{$t("login.Lan")}}</u-divider>
			</view>
		</view>
	</view>
</template>

<script>
	import permision from "@/js_sdk/wa-permission/permission.js"
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		request
	} from '../../common/request/request'
	require("promise.prototype.finally").shim()
	export default {
		data() {
			return {
				tel: '',
				code: '',
				codeText:"",
				pact: false,
				loading: false,
				codeLoading: false,
				SystemInfo: '',
				networkType: '',
				version: '',
				send:'',
			}
		},
		computed: {
			...mapState(['hasLogin'])
		},
		created() {
			uni.getSystemInfo({
				success: (res) => {
					this.SystemInfo = res
				}
			});
			uni.getNetworkType({
				success: (res) => {
					this.networkType = res.networkType
				}
			});
			// #ifdef APP-PLUS
			uni.getLocation({
				success: res => {},
				fail: err => {
					if (this.SystemInfo.platform == "ios") {
						this.judgeIosPermission()
					} else {
						this.requestAndroidPermission()
					}
				}
			});
			// #endif
			// #ifdef APP-PLUS
			plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) => {
				this.version = wgtinfo.version
			})
			// #endif
			uni.$on('loginphone', data => {
				this.tel = data
			})
		},
		methods: {
			switchLang() {
				this.$i18n.locale = this.$i18n.locale == 'en' ? 'zh' : 'en';
				this.send= this.$i18n.locale == 'en' ? 'zh' : 'en';
				console.log(this.send)
			},
			...mapMutations(['login']),
			judgeIosPermission() {
				let result = permision.judgeIosPermission('location')
				if (!result) {
					uni.showModal({
						title: "温馨提示",
						content: "为了更好地为您服务，请开启定位权限，请问是否同意？?",
						cancelText: "不同意",
						confirmText: "同意",
						success: res => {
							if (res.confirm) {
								plus.runtime.openURL("app-settings://");
							}
						}
					})
				}
			},
			async requestAndroidPermission() {
				let result = await permision.requestAndroidPermission('android.permission.ACCESS_FINE_LOCATION')
			},
			toUser(provider) {
				this.login(provider);
				if (this.hasLogin) {
					this.$u.route({
						url: 'pages/home/index',
						type: 'switchTab',
					})
				} else {
					uni.navigateBack();
				}
			},
			submit() {
				if (this.$u.test.mobile(this.tel)) {
					this.loading = true
					request({
						url: '/sailun/appLogin/storeLogin',
						method: 'post',
						data: {
							"account": "",
							"loginType": "1",
							"mobileCode": this.code,
							"password": "",
							"phoneNumber": this.tel,
							"osType": this.SystemInfo.platform,
							"osVersion": this.SystemInfo.system,
							"phoneBrand": this.SystemInfo.brand,
							"phoneModel": this.SystemInfo.model,
							"appVersion": this.version,
							"networkType": this.networkType,
						}
					}).then(res => {
						if (res.data.code == 0) {
							console.log(res.data.data)
							this.toUser(res.data.data)
							uni.$emit('login', {
								msg: '登录成功'
							})

						} else {
							this.$u.toast(res.data.msg);
						}
					}).catch(err => {
						console.log(err)
						this.$u.toast('登录失败');
					}).finally(() => {
						this.loading = false
					})
				}
			},
			inregister() {
				this.$u.route({
					url: 'pages/login/register',
				})
			},
			codeChange(text) {
				this.codeText = text;
			},
			getCode() {
				if (this.$u.test.mobile(this.tel)) {
					if (this.$refs.uCode.canGetCode) {
						this.codeLoading = true
						request({
							url: '/sailun/appStoreBasicInfo/sendCode',
							method: 'post',
							data: {
								"phoneNumber": this.tel,
								"opreaType": "1"
							},
						}).then(res => {
							if (res.data.code == 0) {
								this.$refs.uCode.start();
							}
							if (res.data.code == 500) {
								this.$u.toast(res.data.msg);
							}
						}).catch(err => {
							console.log(err)
						}).finally(() => {
							this.codeLoading = false
						})
					} else {
						this.$u.toast('倒计时结束后再发送');
					}
				} else {
					this.$u.toast('请输入手机号');
				}

			},
		}
	};
</script>

<style lang="scss" scoped>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #0095FF;
	}

	.content {
		position: relative;
		top: -400rpx;
	}

	.foot {
		position: fixed;
		bottom: 10rpx;
		width: 100%;
		padding-bottom: 0;  
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
</style>