<template>
	<view class="albumBox" :style="{'padding-top': albumBoxTop + 'px' }">
		<!--头部 获取相片-->
		<view class="nav-bar"	:style="{'display': 'flex','top': statusBarHeight + 'px', 'height': navHeight + 'px','line-height': navHeight + 'px'}">
			<u-icon name="arrow-left" color="#333" @click="returnClick"></u-icon>
			&nbsp;
		</view>
		<view class="login-title">
			<view class="title-cn">获取相片</view>
			<view class="title-en">Get Photos</view>
		</view>
		<view class="login-list">
			<image class="list-img" src="../static/album/longin02.png"></image>
			<input class="uni-input list-input" v-model="phone" placeholder="请输入摄影时预留手机号" />
		</view>
		<view class="login-list login-listAct">
			<image class="list-img" src="../static/album/longin01.png"></image>
			<input class="uni-input list-input" v-model="verifyCode" placeholder="请输入验证码" />
			<view class="list-verification" @click="verifyCodeSend">获取验证码</view>
		</view>
		<view class="login-btn" @click="userLogin">
			登陆
		</view>
	</view>
</template>

<script>
export default {
  data() {
    return {
      phone:'',//手机号
      verifyCode:'',//验证码
      statusBarHeight: 0,//状态栏高度
      capsule: 0,// 胶囊大小、位置数据
      navHeight: 0,// 导航栏高度
      albumBoxTop:0,//顶部高度
      companyId:'',
    }
  },
  onLoad(option) {
    this.companyId = this.$commonjs.getKey(option,'companyId')||''
	  this.recordDeviceInfo()
  },
  methods: {
    verifyCodeSend(){//发送验证码
      var data = {
			  phone : this.phone
      }
      this.$request('scenic/albumUser/albumVerifyCodeSend', data).then(res => {
			  if (res.code === '00') {   
			    uni.showToast({
			      title: '发送成功',
			    })
			  } else {
			    uni.showToast({
			      title: res.message,
			      icon: 'none'
			    })
			  }
      }).catch(err => {
			  uni.showToast({
			    title: err,
			    icon: 'none'
			  })
      })
    },
    userLogin(){//登陆
      var data = {
			  phone : this.phone,
        verifyCode : this.verifyCode,
        openid : uni.getStorageSync('openid')
      }
      this.$request('scenic/albumUser/albumUserLogin', data).then(res => {
			  if (res.code === '00') {
          var phone = this.phone
          uni.navigateTo({
					  url: '/pages/album/myPhotoAlbum/myPhotoAlbum?phone='+phone+'&companyId='+this.companyId
          })
			  } else {
			    uni.showToast({
			      title: res.message,
			      icon: 'none'
			    })
			  }
      }).catch(err => {
			  uni.showToast({
			    title: err,
			    icon: 'none'
			  })
      })
    },
    recordDeviceInfo() { //---记录设备信息
		  this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight // 状态栏高度
		  this.capsule = uni.getMenuButtonBoundingClientRect() // 胶囊大小、位置数据
		  this.navHeight = (this.capsule.top - this.statusBarHeight) * 2 + this.capsule.height // 导航栏高度
		  this.albumBoxTop = this.statusBarHeight+this.navHeight
    },
    returnClick() {//头部 点击返回
		  uni.navigateBack({
		    delta: 1
		  })
    },
  }
}
</script>

<style scoped lang="scss">
	.albumBox{
		display: flex;
		flex-direction:column;
		height: 100vh;
		background-color: #fff;
	}
	.nav-bar {
		width: 100%;
		justify-content:center;
		font-size: 36rpx;
		font-weight: 700;
		padding: 0 24rpx 0 24rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		/deep/ .u-icon{
			color: #333333;
			margin: auto;
			position: absolute;
			left: 24rpx;
			top: 0;
			bottom: 0;
		}
	}
	.login-title{
		margin-top: 80rpx;
		padding: 0 56rpx 0 56rpx;
		margin-bottom: 104rpx;
		.title-cn{
			font-weight: 600;
			font-size: 40rpx;
			color: #333333;
			line-height: 56rpx;
			margin-bottom: 16rpx;
		}
		.title-en{
			font-size: 28rpx;
			color: #999999;
			line-height: 32rpx;
		}
	}
	.login-list{
		display: flex;
		width: 636rpx;
		height: 98rpx;
		background: #F9F9F9;
		border-radius: 50rpx;
		margin: 0 auto 40rpx auto;
		padding: 0 40rpx 0 52rpx;
		.list-img{
			display: block;
			width: 44rpx;
			height: 44rpx;
			margin-top: 28rpx;
			margin-right: 24rpx;
		}
		.list-input{
			flex: 1;
			height: 98rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #BDC3CE;
		}
		.list-verification{
			font-weight: 400;
			font-size: 28rpx;
			color: #FE6600;
			line-height: 98rpx;
		}
	}
	.login-listAct{
		margin-bottom: 0;
	}
	.login-btn{
		width: 638rpx;
		height: 98rpx;
		background: linear-gradient( 90deg, #FFA000 0%, #FE6600 100%);
		margin: 0 auto;
		border-radius: 50rpx;
		font-weight: 600;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 98rpx;
		text-align: center;
		margin-top: 80rpx;
	}
</style>
