Ropeskipping/pages/Login/Login.vue

<template>
	<view class="box">
		<swiper class="screen-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
		 :autoplay="true" interval="3000" duration="500">
			<swiper-item v-for="(item,index) in swiperList" :key="index">
				<img class="img" :src="item.url" mode="aspectFill" v-if="item.type=='img'"></img>
			</swiper-item>
		</swiper>
		<view class="title">
			登录
		</view>
		<view class="ipt-infor">
			<view class="ipt-username">
				<view>
					<text class="justleft">手机号</text>:
				</view>
				<input type="text" v-model.trim="userphone" placeholder="请输入"/>
			</view>
			<view class="ipt-password">
				<view>
					<text class="justleft">密码</text>:
				</view>
				<input type="password" v-model.trim="password" placeholder="请输入"/>
			</view>
		</view>
		<button type="default" class="btn cu-btn bg-green margin-tb-sm lg" @click="login">登录</button>

		<view class="go-register" @click="jump">注册</view>
		<view class="go-password" @click="jump1">忘记密码</view>
	</view>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import { login } from 'api/login'
	export default {
		data() {
			return {
				userphone:'',
				password:'',
				dotStyle: true,
				swiperList: [{
					id: 0,
					type: 'img',
					url: 'static/title.png'
				}, {
					id: 1,
					type: 'img',
					url: 'static/item01.png',
				}, {
					id: 2,
					type: 'img',
					url: 'static/item02.png'
				}]
			}
		},
		methods: {
			...mapMutations('user', ['setToken', 'setUser']),
			jump() {
				uni.navigateTo({
					url:`./Register`,
					
				})
			},
			jump1() {
				uni.navigateTo({
					url:`./Retrieve`,
					
				})
			},
			async login () {
				const that = this
				if (that.userphone === '') {
					uni.showToast({
						title: '请输入用户名',
						icon: 'none',
						duration: 1500
					})
				} else if (that.password === '') {
					uni.showToast({
						title: '请输入密码',
						icon: 'none',
						duration: 1500
					})
				} else {
					try {
						const params = {
							client: 1,
							data: {
								identifier: that.userphone,
								credential: that.password,
							},
							type: 3
						}
						const data = await login(params)
						console.log(data)
						that.cacheData(data)
						uni.navigateTo({
							url:`../First/First`
						})
					} catch(e){
						//TODO handle the exception
						console.log(e)
						uni.showToast({
							title:e,
							icon: "none",
							duration: 2000
						})
					}
				}
			},
			cacheData(data) {
				const { token } = data;
				this.setToken(token);
				this.setUser(data);
				// console.log(this.$store.state.user)
			}
			// ,
			// replace(e){
			// 	const that = this
			// 	that.userphone=e.detail.value.replace(/\s/g,"")
			// },
			// replace1(e){
			// 	const that = this
			// 	that.password=e.detail.value.replace(/\s/g,"")
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		position: relative;
	}
	.title {
		font-size: 20px;
		width: 150rpx;
		height: 30px;
		line-height: 30px;
		margin-top: 30px;
		border-bottom: 2px solid $blue;
		margin-left: 300rpx;
		text-align: center;
	}
	.ipt-infor {
		margin-left: 50rpx;
		width: 650rpx;
		margin-top: 50px;
		view{
			position: relative;
			padding-left: 30px;
		}
	}
	.justleft {
		position: absolute;
		left: -25px;
		width: 50px;
		text-align: justify !important;
		text-align-last: justify;
	}
	.ipt-username {
		position: relative;
		height: 60px;
		line-height: 60px;
		border-bottom: 1px solid $grey;
		
		input {
			position: absolute;
			top: 20px;
			left: 90px;
			font-size: 14px;
		}
	}
	.ipt-password {
		position: relative;
		height: 60px;
		line-height: 60px;
		border-bottom: 1px solid $grey;
		
		input {
			position: absolute;
			top: 20px;
			left: 90px;
			height: 20px;
			line-height: 20px;
			font-size: 14px;
		}
	}
	.go-password {
		color: $blue;
		position: absolute;
		left: 50rpx;
		margin-top: 20px;
	}
	.btn {
		width: 650rpx;
		margin-left: 50rpx;
		background: $blue;
		color: $white;
		margin-top: 50px;
	}
	.go-register {
		color: $blue;
		position: absolute;
		right: 50rpx;
		margin-top: 20px;
	}
	// .information {
	// 	height: 30px;
	// 	line-height: 30px;
	// 	text-align: center;
	// 	color: ;
	// }
	.img {
		width: 750rpx;
		height: 100%;
		top: 0;
		z-index: 1000;
	}
</style>