guosen-ldt-shop/pages/login/account-login.vue

<template>
	<view style="position: relative;">
		<block >
			<view class="bg"></view>
			<view class="bg1"></view>
			<view class="content">
				<view class="top">
					<view class="logo">
						<image src="@/static/icon/logo2.png" mode=""></image>
					</view>
				</view>
				<view style="width: 76%;margin-top: 30rpx;">
					<u-form :model="form" :error-type="['message']" ref="uForm">
						<u-form-item label-position="top" label="账号" prop="phone" label-width="150">
							<u-input :border="false" placeholder="请输入账号" v-model="form.phone" type="number"></u-input>
						</u-form-item>
						<u-form-item label-position="top" label="密码" prop="password" label-width="150">
							<u-input :border="false" placeholder="请输入登录密码" type="password" v-model="form.password">
							</u-input>
						</u-form-item>
					</u-form>
					<view class="text-right margin-top-10 text-sm">
						<text @click="$jump('/pages/login/login')"
							style="margin-left: 20rpx;">手机号快捷登录</text>
					</view>
				</view>
			
				<view style="width: 86%;margin-top: 120rpx;">
					<view @click="login" class="btn cu-btn round" style="width:100%;height: 90rpx;font-size: 36rpx;">
						立即登录
					</view>
			
					<view class="flex justify-between  text-sm" style="margin: 30rpx 30rpx 0;">
						<text @click="$jump('/pages/login/forget')">忘记密码</text>
						<text @click="$jump('/pages/login/register')">注册账号</text>
					</view>
				</view>
			</view>
		</block>
		<toast ref="toast" ></toast>
		<loading ref="loading" type="3" />
	</view>
</template>

<script>
	import md5Libs from "uview-ui/libs/function/md5";
	export default {
		data() {
			return {
				loading:true,
				
				customStyle: {
					'backgroundColor': '#d18c42',
					'color': '#ffffff'
				},
				form: {
					type: 'SHOP',
					phone: '',
					password: ''
				},
				rules: {
					phone: [{
						required: true,
						message: '请输入账号',
						trigger: ['change', 'blur'],
					}, {
						message: '手机号码不正确',
						trigger: ['change', 'blur'],
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						},
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: ['change', 'blur'],
					}],
				}
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		async onLoad(options) {
			console.log(this.$u.guid(20));
			
			this.form.phone=options.phone || ''
			if (this.$cache.get('phone')) {
				this.$refs.loading.show("登录中..")
				uni.reLaunch({
					url: "/pages/index/index",
					success: () => {
						this.$refs.loading.hide()
					}
				})
				
			}
		},
		methods: {
			login() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.loginIn()
					}
				});
			},
			async loginIn() {
				await this.$mpi.subscribe(this.$tmplIds)
				let p = {
					type: this.form.type,
					phone: this.form.phone,
					secret: md5Libs.md5(this.form.password),
				}
				let res = await this.$api.accout.login(p)
				this.cacheToken(res.data)
				let shopList = res.data.list
				if (!res.success) {
					//登录失败
					this.$refs.loading.hide()
					this.$refs.toast.info(res.msg)
					return
				}
				this.$refs.loading.showLoading('登录中..')
				this.loading=true
				uni.setStorageSync("phone", this.form.phone)
				uni.navigateTo({
					url: '/pages/index/index'
				})
				setTimeout(()=>{
					this.loading=false
					this.$refs.loading.hide()
					this.$refs.toast.info('登录成功')
				},1200)
			},
			cacheToken(data){
				let tokenInfo={
					accessToken:data.access_token,
					//提前200秒过期
					expiresIn:new Date().getTime() + (data.expires_in - 200) * 1000,
					refreshToken:data.refresh_token,
					tenantId:data.tenant_id,
					nickName:data.nick_name
				}
				this.$cache.put('token',data.access_token)
				this.$cache.put("tokenInfo",tokenInfo)
			},

		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}
</style>

<style lang="scss" scoped>
	page {
		background-color: #FFFFFF;
	}

	.btn {
		background-color: $color;
		color: #FFFFFF;
	}

	.bg {
		overflow: hidden;
		z-index: 99;
		height: 400rpx;
		width: 400rpx;
		position: absolute;
		right: -240rpx;
		top: -240rpx;
		background-color: $color;
		border-radius: 50%;
		box-shadow: 0rpx 0rpx 50rpx #e28e3f;
	}

	.bg1 {
		overflow: hidden;
		height: 460rpx;
		width: 460rpx;
		position: absolute;
		right: -240rpx;
		top: -240rpx;
		background-color: $color;
		border-radius: 50%;
		box-shadow: #c6813b;
	}

	.content {
		height: 84vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.top {
			display: flex;

			.logo {
				image {
					width: 150rpx;
					height: 150rpx;
				}
			}

			.title {
				margin-right: 20rpx;
				display: flex;
				flex-direction: column;
				text-align: left;

				text:first-child {
					font-size: 46rpx;
					color: #000;
					margin-bottom: 20rpx;
				}

				text:last-child {
					font-size: 28rpx;
					color: #7f7f7f;
				}
			}


		}
	}
</style>