<template>
	<view class="web_box">
		<view class="title">
			账号登录
		</view>
		<view class="form">
			<u--form ref="form1">
				<u-form-item borderBottom prop="name">
					<u--input border="none" v-model="userInfo.name" placeholder="请输入手机号"></u--input>
				</u-form-item>
				<u-form-item borderBottom prop="password">
					<u--input border="none" type="password" v-model="userInfo.password" placeholder="请输入账号密码"></u--input>
				</u-form-item>
			</u--form>
		</view>
		<view class="hflex acenter">
			<u-checkbox-group @change="checkboxChange">
				<u-checkbox v-model="agree" shape="circle"></u-checkbox>
			</u-checkbox-group>
			<view class="text">我已阅读并同意<span class="read" @click="open(0)">《用户协议》</span>、<span class="read" @click="open(1)">《隐私协议》</span></view>
		</view>
		<view class="bottom">
			<u-button @click="login">登录</u-button>
			<view class="hflex acenter jbetween" style="padding-top: 14rpx;">
				<span class="read" @click="forget">忘记密码</span>
				<span class="read" @click="toRegister">我要注册</span>
			</view>
		</view>
		<!-- 弹出层 -->
		<u-modal :show="showProtocol" :title="protocolTitle" confirmColor="#2988FE" @confirm="showProtocol = false" confirmText="我已阅读">
			<view class="slot-content">
				<rich-text :nodes="protocolContent"></rich-text>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	export default {
		data() {
			return {
				userInfo: {
					name: '',
					password: ''
				},
				agree: false,
				showProtocol: false,
				protocolTitle: '',
				protocolContent: '',
				
			}
		},
		onLoad() {
			
		},
		methods: {
			// 阅读并同意
			checkboxChange(n) {
				this.agree = !this.agree
			},
			// 打开弹出层
			open(index) {
				const that = this
				if(index == 0) {
					$api.req({
						url: '/api/Publics/config_info'
					}, function(res) {
						if (res.code == 1) {
							that.protocolTitle = '用户协议'
							that.protocolContent = res.data.xieyi
						}
					})
					
				} else {
					that.protocolTitle = '隐私政策'
					that.protocolContent = ''
				}
				that.showProtocol = true
			},
			toRegister() {
				uni.navigateTo({
					url: '/pages/login/register'
				})
			},
			// 忘记密码
			forget() {
				uni.navigateTo({
					url: '/pages/login/forget'
				})
			},
			// 登录
			login() {
				var that = this
				
				if ($api.formCheck(that.userInfo.name,"phone") && $api.formCheck(that.userInfo.password, "required")) {
					if (!that.agree) {
						$api.info('请先阅读并同意用户协议和隐私协议')
					} else {
						$api.req({
							url: '/api/Login/login',
							data: {
								type: 1,
								phone: that.userInfo.name,
								password: that.userInfo.password
							}
						}, function(res) {
							if (res.code == 1) {
								$api.info(res.msg)
								uni.setStorageSync("token",res.data)
								that.bindId()
								
							} else if(res.code == 0) {
								$api.info(res.msg)
							}
						})
						
					}
				}
			},
			bindId() {
				var that = this 
				$api.req({
					url: '/api/User/userinfo'
				}, function (res) {
					if (!res.data.openid) {
						uni.getSetting({
						   success(res) {
						      if (res.authSetting['scope.userInfo']) {
								  uni.login({
									provider: 'weixin',
									success: function(res2) {
										if(res2.code) {
											$api.req({
												url: '/api/Login/bind_openid',
												data: {
													code: res2.code
												}
											}, function(res2) {
												if (res2.code == 1) {
													$api.jump("/pages/mine/mine",3)
												}
												
											})
										}
									}
								  })
							  }
						   }
						})
					} else {
						$api.jump("/pages/mine/mine",3)
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.web_box::v-deep {
		background: url('@/static/images/login/login-bg.png') no-repeat;
		background-size: 100%;
		padding: 226rpx 66rpx 0;
		
		.title {
			font-size: 40rpx;
			font-weight: 500;
			color: #333333;
		}
		.form {
			width: 100%;
			box-sizing: border-box;
			padding: 80rpx 0 0;
			margin-bottom: 20rpx;
		}
		.text {
			font-size: 24rpx;
			color: #999999;
		}
		.read {
			font-size: 24rpx;
			color: #2988FE;
		}
		.bottom {
			margin-top: 80rpx;
		}
		.u-button {
			width: 578rpx;
			height: 80rpx;
			background: linear-gradient(135deg, #53BDFF 0%, #57BBF0 29%, #3B86FE 72%, #2988FE 100%);
			border-radius: 40rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #FFFFFF;
		}
		.bottom_text {
			width: 100%;
			text-align: right;
			margin: 14rpx 0 80rpx;
		}
	}
</style>