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="请填写手机号" 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="请填写验证码" label-width="50">
							<u-icon slot="icon" name="lock" size="36" color="#666666"></u-icon>
							<u-button size="mini" slot="right" type="primary" @click="getCode" shape="circle" :loading="codeLoading">{{codeText}}</u-button>
						</u-field>
					</view>
					<u-verification-code ref="uCode" @change="codeChange"></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">登录</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)">
								还没有账号？
							</view>
							<view style="color: #00A0EA">
								立即注册
							</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">赛轮店管家</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: ''
			}
		},
		computed: {
			...mapState(['hasLogin'])
		},
		created() {
			uni.getSystemInfo({
				success: (res) => {
					this.SystemInfo = res
				}
			});
			uni.getNetworkType({
				success: (res) => {
					this.networkType = res.networkType
				}
			});
			uni.getLocation({
			    success:res=>{
			    },
				fail:err=>{
					if(this.SystemInfo.platform=="ios"){
						this.judgeIosPermission()
					}else{
						this.requestAndroidPermission()
					}	
				}
			});		
			uni.$on('loginphone',data=>{
				this.tel=data
			})
		},
		methods: {
			...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": "1.00",
							"networkType": this.networkType,
						}
					}).then(res => {
						if (res.data.code == 0) {
							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.tel) {
					this.codeLoading = true
					request({
						url: '/sailun/appStoreBasicInfo/sendCode',
						method: 'post',
						data: {
							"phoneNumber": this.tel,
							"opreaType": "1"
						},
					}).then(res => {
						console.log(res)
						if (res.data.code == 0) {
							if (this.$refs.uCode.canGetCode) {
								this.$refs.uCode.start();
							} else {
								this.$u.toast('倒计时结束后再发送');
							}
						}
						if (res.data.code == 500) {
							this.$u.toast(res.data.msg);
						}
					}).catch(err => {
						console.log(err)
					}).finally(() => {
						this.codeLoading = false
					})
				} 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: -350rpx;
	}

	.foot {
		position: fixed;
		bottom: 10rpx;
		width: 100%;
	}
</style>