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 {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
			    }
			});
		},
		methods: {
			...mapMutations(['login']),
			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>