service_card/qianshancard_wx/pages/login/login.vue

<template>
	<view class="login" >
		<image :src="bgimg" class="loginbg"></image>
		<view :style="'padding-top:'+padtop+'px'">
			<navbar :back="false" :bgcolor="backgroundColor" fixed zIndex="1010" :center="true"	:custom='true' @getTop="getTop" />
			
			<view class="login_tit">
				<view class="login_tita">登录</view>
				<view class="login_txt">欢迎使用潜商服务卡~</view>
				
			</view>
			
			<view style="padding-bottom: 56rpx;">
				<view class="login_i">
					<image :src="zimg"></image>
					<input  placeholder="请输入账号" v-model="formData.username"/>
				</view>
				<view class="login_i">
					<image :src="mimg" style="width: 30rpx;height: 38rpx;margin-right: 26rpx;"></image>
					<input  placeholder="请输入密码" type="password" v-model="formData.password"/>
				</view>
			</view>
			<view class="login_btn btn1" @click="passwordlogin">账号登录</view>
			<button  type="primary" class="login_btn btn2" open-type="getUserInfo" @getuserinfo="getuserinfo">
				<text class="btn-txt">快速登录</text>
			</button>

			<!-- 显示弹窗 -->
			<div class="box_hei" @click="btn" v-if="box_status">
				<div  @click.stop="btns" class="hei_box">
					<div class="box_top">
						<div class="box_title">
							<div>
								潜山信惠 申请使用
							</div>
						</div>
						<div class="box_nameq">你的手机号码</div>
					</div>
					<!-- <div class="boxs"></div> -->
					<div class="box_btns">
						<div @click="btn" class="box_btn box_btn1">拒绝</div>
						<button class="box_btn box_btn2" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">允许</button>
					</div>
				</div>
			</div>
		</view>
		
		
	</view>
</template>

<script>
	export default{
		data(){
			return{
				padtop:this.$http._GET.customBarH||0,
				backgroundColor:'transparent',
				zimg:require("@/static/image/loginz.png"),
				mimg:require("@/static/image/loginm.png"),
				bgimg:require("@/static/image/lbg.png"),
				formData: {
					username: '',
					password: ''
				},
				box_status: false,
				userId:''
			}
		},
		onLoad() {
			uni.clearStorage()
		},
		methods:{
			getTop(e){
				this.padtop=e
			},
			btns() {
				
			},
			btn() {
				this.box_status = false
			},
			// 手机号登录
			passwordlogin() {
				if(!this.formData.username){
					uni.showToast({
						title: "请输入账号",
						duration: 1000,
						icon: 'none'
					});
					return
				}
				if(!this.formData.password){
					uni.showToast({
						title: "请输入密码",
						duration: 1000,
						icon: 'none'
					});
					return
				}
				// this.$http.post('boman-auth/login', this.formData).then(res=>{
				this.$http.post('loginApp', this.formData).then(res=>{
					if(res.code == 200 ) {
						this.userId=res.userId;
						uni.setStorageSync('token', res.token)
						uni.setStorageSync('userId', res.userId)
						uni.setStorageSync('businessId',res.settledMerchants.businessId)
						uni.setStorageSync('phone', res.settledMerchants.businessPhone)
						 setTimeout(function(){
						 	uni.switchTab({
						 	    url: '/pages/index/index',
						 	});
						 },1000)
						// this.getUserInfoes();
						// uni.switchTab({
						//     url: '/pages/index/index',
						// });
					} else{
						uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: 'none'
						});
					}
				})
			},
			// 快捷登录
			async getPhoneNumber(e){
				console.log(e)
				const {iv,encryptedData} = e.detail
				console.log(iv,encryptedData)
				let res = await this.$http.uniApi({events: uni.login})
						if(res.code) {
							// console.log(res,9876)
							this.$http.post("applet/login",{
								iv: iv,
								encryptedData: encryptedData,
								code : res.code,
								// mode:this.mode,
								// userInfo:this.userInfo
							}).then(red => {
								// console.log(red)
								if(red.code == 200){
									// console.log(JSON.parse(red.data).phoneNumber,9999)
									this.box_status = false;
									this.userId=red.data.userId;
									uni.setStorageSync('token', red.data.access_token)
									uni.setStorageSync('userId', red.data.userId)
									uni.setStorageSync('businessId',red.data.settledMerchants.businessId)
									uni.setStorageSync('phone', red.data.settledMerchants.businessPhone)
									// this.getUserInfoes();
									uni.switchTab({
									    url: '/pages/index/index',
									});
									// uni.navigateTo({
									// 	url: '/pages/index/index'
									// })
								}else{
									uni.showToast({
										title: red.msg,
										duration: 1000,
										icon: 'none'
									});
								}
							})
						}
			},
			// 个人信息
			getUserInfoes() {
				this.$http.get('system/user/'+this.userId).then(res=>{
					// console.log(JSON.stringify(res))
					if(res.code == 200 ) {
						uni.setStorageSync('phone', res.data.phonenumber)   
						 setTimeout(function(){
						 	uni.switchTab({
						 	    url: '/pages/index/index',
						 	});
						 },1000)
					} 
				})
			},
			async getuserinfo(e) {
				console.log(e,9999)
				const {nickName, avatarUrl, ...userInfo} = e.detail.userInfo
				// uni.navigateTo({
				// 	url: `login_phone?nickName=${nickName}&avatarUrl=${avatarUrl}`
				// })
				try{
					let res = await this.$http.uniApi({events: uni.login})
					if(res.code) {
						// console.log(res)
						// console.log(res.code)
						// console.log(nickName)
						// console.log(avatarUrl)
						this.avatarUrl = avatarUrl
						this.nickName = nickName
						this.code = res.code
						this.userInfo =e.detail.userInfo
						uni.setStorageSync('userInfo', e.detail.userInfo)
						// this.bindUserinfo({code: res.code, nickName, avatarUrl})
						this.box_status=true
					}
				} catch(e){
					//TODO handle the exception
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.loginbg{width: 342rpx;height:  382rpx;position: absolute;right: 0;top: 0;z-index: -1;}
	.login{height: 100vh; width: 100%;box-sizing: border-box;padding: 0 74rpx;position: relative;}
	.login_tit{padding-top: 100rpx;margin-bottom: 150rpx;
		.login_tita{font-size: 48rpx;font-weight: bold;color: #2F2F2F;}
		.login_txt{font-size: 30rpx;color: #666666;font-weight: 400;margin-top: 12rpx;}
	}
	.login_i{
		display: flex;align-items: center;height:90rpx;padding: 0 32rpx;border-radius: 48rpx;margin-bottom: 28rpx;background: rgba(244, 244, 244, .6);
		image{
			width: 36rpx;height: 34rpx;margin-right: 20rpx;
		}
		input{
			font-size: 28rpx;color: #000000;
		}
	}
	.login_btn{width: 100%;height: 90rpx;display: flex;align-items: center;justify-content: center;font-size: 30rpx;border-radius: 48rpx;
	&.btn1{background: #A04CFF;color: #ffffff;margin-bottom: 28rpx;}
	&.btn2{border: 1px solid #A04CFF;color: #A04CFF;background: #fff;}
	}
	
	// 快捷登录弹窗
	.box_hei{
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.8);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 3;
		.hei_box{
			background: #fff;
			border-radius:22upx 22upx 0 0;
			height: 440upx;
			padding: 52upx 28upx 104upx;
			position: absolute;
			bottom:0;
			width: 100%;
			box-sizing: border-box;
			.box_top{
				padding: 0 18upx 62upx;
				.box_title{
					display: flex;
					justify-content: space-between;
					font-size: 30upx;
					margin-bottom: 30upx;
					div{
						display: flex;
						align-items: center;
						color: #333333;
					}
					.img{
						margin-right: 14upx;
						width: 180upx;
						height: 48upx;
					}
					.imgs{
						width: 40upx;
						height: 40upx;
					}
				}
				.box_nameq{
					color: #333333;
					font-size: 44upx;
					font-weight: bold;
				}
			}
			.box_phone{
				height: 106upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28upx;
				color: #A6A6A6;
				border-bottom: 1upx solid #EBEBEB;
				border-top: 1upx solid #EBEBEB;
				div{
					display: flex;
					align-items: center;
				}
				.img{
					width: 26upx;
					height: 22upx;
				}
				span{
					color: #333333;
					font-size: 32upx;
					padding-right: 18upx;
					font-weight: bold;
				}
			}
			.box_qita{
				height: 106upx;
				font-size: 28upx;
				color: #7CA4FC;
				line-height: 106upx;
			}
			.boxs{
				height: 50upx;
			}
			.box_btns{
				margin-top: 10upx;
				display: flex;
				justify-content: space-between;
				.box_btn{
					width: 324upx;
					height: 82upx;
					font-size: 32upx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 4upx;
				}
				.box_btn1{
					background: #F3F3F3;
					color: #33B925;
				}
				.box_btn2{
					background: #37962B;
					color: #FFFFFF;
				}
			}
		}
	}
</style>