recycapp/pages/login/login.vue

<template> 
	<view class="content">
		<view class="topStatus"></view>
		<view class="headBox flex-center" @click="getAddress">
			口袋快收
		</view>
		<image :src="path+'/assets/img/icon/bg2.png'" class="bgImg" mode="widthFix"></image>
		<!-- <view class="login">  
			<image   :src="logoImage"  ></image> 
		</view> --> 
		<view class="loginContent">
			<view class="loginTitle">账号密码登录
		{{addressText}} </view>
			<view class="inputBox">
				<image :src="path+'/assets/img/icon/user.png'" class="inputIcon"></image>
				<input v-model="mobile" type="text" class="inputEle" placeholder="请输入账号" />
			</view>
			<view class="inputBox">
				<image :src="path+'/assets/img/icon/code.png'" class="inputIcon"></image>
				<input v-model="password" type="text" class="inputEle" placeholder="请输入验证码" />
				<view class="codeBtn flex-center" @click="smsCode">发送验证码</view>
			</view>
			<view class="protBox">
				<image v-if="!isRead" @click="selectRead" :src="path+'/assets/img/icon/noSelected.png'"></image>
				<image v-else @click="selectRead" :src="path+'/assets/img/icon/selected.png'"></image>
				<text>同意</text>
				<text class="protText" @click="toshow()">《某某用户服务协议》</text>
				<text>和</text>
				<text class="protText" @click="toshow()">《隐私政策》</text>
			</view>
			<button class="loginBtn flex-center" @click="loginEn">登录</button>
		</view>
		<image :src="path+'/assets/img/icon/logo1.png'" class="loginImg" mode="widthFix"></image>
		<!-- <view class="login-b"> 
			<button class="auth-btn refuse" @click="handleRefuse">拒绝</button>
			 <button class="auth-btn " @click="getUserProfile"   v-if="login_type ==0">授权登录</button>  
			<button class="auth-btn "  open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" v-else   >登录</button>
		
		</view> -->
	</view>
 
</template>

<script>
var QQMapWX = require('@/common/qqmap-wx-jssdk.min.js')
export default {
  data() {
    return {
		mobile:'15655350912',
		password:'123456',
		login_type:0,
    	logoImage: '/static/img/t2.png',
        open_id: '',
		path: this.path,
		isRead: false,
		addressText:''
    }
  },
  computed: { 
  },
  onLoad() {
		
  }, 
  methods: { 
	  smsCode(){
		this.$api.smsCode({
			mobile: this.mobile
		}, res => {
			if (res.code == "1") { 
				console.log(res,'登录成功')
						uni.setStorageSync('userToken', res.data.token);
						uni.setStorageSync('userInfo', res.data.userInfo);
						uni.switchTab({
							url:'/pages/index/index'
						})
			}else{ 
				uni.showToast({ title: res.msg , icon: 'none'})
			}
		})
	  },
	  getAddress(){
		  let _this = this;
		  console.log('dddddd333d')
		// uni.getLocation({
		// 	type:'gcj02',
		// 	// geocode: true,
		// 	success(res) {
		// 		console.log(res)
		// 	},
		// 	fail() {
				
		// 	}
		// })  
		uni.getLocation({
			// type: 'gcj02',
			type: 'wgs84',
			geocode: true,
			success: function (res) {
				console.log('当前位置的经度：' + JSON.stringify(res));
				console.log('当前位置的经度：' + res.longitude);
				console.log('当前位置的纬度：' + res.latitude);
				let location = {
					longitude: res.longitude,
					latitude: res.latitude
				}
				console.log(location,'fffffff')
				const qqmapsdk = new QQMapWX({
					key: 'GHNBZ-LUALS-RGKO2-6YTHN-PRVDV-D4BDT'
				})
				qqmapsdk.reverseGeocoder({
					location,
					success: function(res){
						console.log(res,res.result.address,'9999')
						_this.addressText = res.result.address
					}
				})
			},
			fail: function (res) {
				console.log('当前位置的纬度：222' , res);	
			}
		});
	  },
	  loginEn(){
		  if(!this.isRead){
			  uni.showToast({ title: "请同意用户服务协议和隐私政策" , icon: 'none'})
			  return
		  }
		  this.$api.personlogin({
			  mobile: this.mobile,
			  password: this.password
		  }, res => {
		  	if (res.code == "1") { 
		  		console.log(res,'登录成功')
				uni.setStorageSync('userToken', res.data.token);
				uni.setStorageSync('userInfo', res.data.userInfo);
				uni.switchTab({
					url:'/pages/index/index'
				})
		  	}else{ 
		  		uni.showToast({ title: res.msg , icon: 'none'})
		  	}
		  }) 
	  },
	  selectRead(){
	  	this.isRead = !this.isRead;
	  },
	  config(){
		this.$api.config({}, res => { 
			if (res.code == "1") { 
				this.login_type = res.data.login_type;
				if(res.data.logo){
					this.logoImage = res.data.logo;
				}
				
			}else{ 
				 
			}
		}) 
	},
    getCode: function(callback) {
      uni.login({ 
        success: function(res) {
          if (res.code) {
            return callback(res.code)
          } else {
			uni.showToast({ title: '未取得code' , icon: 'none' })  
          }
        },
        fail: function(res) { 
			uni.showToast({ title: '用户授权失败wx.login', icon: 'none' })  
        }
      })
    },
    handleRefuse(){
      uni.showToast({
        title: '未授权',
        icon: 'none',
        duration: 1000,
      })
      setTimeout(() => {
		uni.hideToast();
        uni.navigateBack(-1);
      }, 1000);
    },
	getPhoneNumber (e) {   
		if(e.detail.errMsg == "getPhoneNumber:fail user deny") {
		    uni.showToast({
				icon: "none",
		        title: '请允许获取手机号，否则功能不可用！',
		    })
		    return
		} 
		uni.login({
		    success: res => {
		        if(res.code){
				  var data = {
				    code: res.code, 
					phonecode:e.detail.code
				  } 
				  this.$api.getPhoneNumber(data, (res)=>{ 
						if(res.code == '1'){  
							uni.setStorageSync('userToken', res.data.token);  
							 uni.navigateBack({
							   delta: 1
							 })
							 return false
						}else{ 
							uni.showToast({ title: res.msg , icon: 'none' }) 
						}				 
					})
		        }
		    }
		})
	}, 
	getUserProfile() {
			let _this = this
			_this.getCode(function(code) {
					let t =  Date.parse(new Date())
					var data = {
					  code: code,
					  t:t
					}
					_this.$api.wxapplogin(data, (res)=>{ 
						    uni.showToast({ title: res.msg , icon: 'none' }) 
					  if (res.code ==1) { 
						uni.setStorageSync('userToken', res.data.token);  
						 uni.navigateBack({
						   delta: 1
						 })
						 return false
					  }else{ 
					  }
					})
			})
		  },  
		  
		  toLogin(){ 
	  		 var _this = this;
	  		  var data = { 
	  			 mobile:this.mobile,
	  			 password: this.password   
	  		  }
	  		  _this.$api.login(data, (res)=>{ 
	  				if (res.code == '1') {   
						uni.setStorageSync('userToken', res.data.token);  
	  					 uni.switchTab({
	  					 	url:'/pages/index/index'
	  					 })
	  					 return false  
	  				}else{
	  					uni.showToast({
	  						icon: "none",
	  						title: res.msg ,
	  					})
	  					return
	  				}
	  		  })
	  }, 
  }
}
</script>

<style lang="scss">
.content {
  background-color: #fff;
  height: 100vh;
  background: #FAF7F5;
  // padding: 100upx 60upx 0;
}
.login{
	text-align: center;
	margin-top: 10%;
	image{
		width: 130px;
		height: 130px;
		margin-bottom: 110rpx;
		border-radius: 50%;
	}
} 
.auth-btn{
  flex:1;
	display: block;
	height: 80upx;
	line-height: 80upx;
	text-align: center;
	font-size: 12px;
	color:#FFF;
	background:#00a73b;
	border-radius: 40upx;
  &.refuse{
    background:#999;
    margin-right:40upx;
  }
}
 
.login-b{
	display: flex;
	justify-content: space-between;
}
.headBox{
	height: 131rpx;
	background: #F77829;
	font-weight: 800;
	font-size: 34rpx;
	color: #FFFFFF;
}
.bgImg{
	width: 100%;
}
.inputBox{
	background: rgba(245,241,235,0.4);
	border-radius: 10rpx;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	.inputIcon{
		width: 34rpx;
		height: 34rpx;
	}
}
.loginContent{
	width: 680rpx;
	height: 700rpx;
	background: #FFFFFF;
	border-radius: 30rpx;
	position: fixed;
	bottom: 144rpx;
	left: 35rpx;
	padding: 40rpx;
	.loginTitle{
		margin-top: 26rpx;
		padding-bottom: 20rpx;
		text-align: center;
		font-weight: bold;
		font-size: 36rpx;
		color: #282F38;
	}
	.inputBox{
		padding: 28rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: #C9C2BA;
		margin-top: 26rpx;
		.inputEle{
			padding-left: 22rpx;
			flex: 1;
			font-weight: 300;
			color: #333333;
		}
		.codeBtn{
			width: 184rpx;
			height: 60rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			border: 1px solid #FB7D06;
			font-weight: 500;
			font-size: 24rpx;
			color: #FB7D06;
		}
	}
	
	.loginBtn{
		background: #FB7D06;
		border-radius: 10rpx;
		margin-top: 80rpx;
		font-weight: 500;
		font-size: 30rpx;
		color: #FFFFFF;
		border: none;
	}
}
.protBox{
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		// background: #F8F4F0;
		// position: absolute;
		// top: -60rpx;
		// left: 0;
		font-weight: 500;
		font-size: 24rpx;
		color: #333333;
		margin-top: 20rpx;
		// padding-left: 40rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		image{
			width: 24rpx;
			height: 24rpx;
			margin-right: 10rpx;
		}
		.protText{
			color: #FF852C;
		}
	}
	.loginImg{
		position: fixed;
		left: 0;
		right: 0;
		margin: 0 auto 0rpx;
		bottom: 24rpx;
		width: 241rpx;
	}
</style>