a77/pages/login/landLogin.vue

<template>
	<view class="login">

		<view class="zindex999" @click="href('/pages/login/index')">
			<image src="@/static/index/details/arrow_back.png" mode="widthFix"
				style="width: 48rpx;margin-left: 20rpx;margin-top: 50rpx;"></image>
		</view>
		<!-- 返回按钮 -->


		<!-- logo部分 -->
		<view class="title">
			<view class="login_view">
				<view class="">
					鲑鱼数藏
				</view>
				<view class="">
					开启你的数字藏品之旅
				</view>
			</view>
			<view class="text">
				<image src="@/static/logo.png" mode="widthFix" style="width: 120rpx;"></image>
			</view>
		</view>
		<!-- logo部分 结束-->


		<view class="logincontent">
			<!-- 手机号登录 -->
			<view class="login_content">
				<view class="input_item">
					<view class="">
						<input type="number" v-model="tel" placeholder="输入手机号">
					</view>
				</view>
				<view class="input_item">
					<view class="">
						<input type="text" v-model="codeImgVal" placeholder="输入图形验证">
						<view @click="graphVer">
							<image :src="codeImgData.image" mode="" style="width: 130rpx;height: 50rpx;"></image>
						</view>
					</view>
				</view>
				
				
				<view class="input_item">
					<view class="">
						<input type="number" v-model="code" placeholder="输入验证码" style="width: 150px;">
						<view class="sendcode systemColor" @click="sendCode" v-if="count<=0">
							获取验证码
						</view>
						<view class="sendcode systemColor" v-else>
							{{count}}秒后重新发送
						</view>
					</view>
				</view>

				
			</view>
			<view class="regist">
				还没有账号？<text style="color: #fff;" @click="href('/pages/login/register')">注册账号</text>
			</view>


			<!-- 登录按钮 -->
			<view class="login_btn" @click="login">
				登录
			</view>
			<!-- 登录按钮 结束-->

			<!-- 用户协议 -->
			<view class="agreement">
				<!-- 是否选中样式 -->
				<view class="">
					<view class="circle_checked" v-if="confim" @click="confim=false"></view>
					<view class="circle" v-else @click="confim=true"></view>
				</view>
				<view class="">
					已阅读并同意<text class="blue" @click="href('/pages/my/set/relevant?type=1')">《用户协议》</text>和<text
						class="blue" @click="href('/pages/my/set/relevant?type=2')">《隐私政策》</text>
				</view>
				<!-- 是否选中样式 结束-->
			</view>
			<!-- 用户协议 结束-->
		</view>
	</view>


	</view>
</template>

<script>
	//隐私政策弹框

	export default {
		components: {},
		data() {
			return {
				//是否同意授权登录
				confim: false,
				//动画类名
				add_class: "",
				//是否显示隐私弹框
				Jur: false,
				//是否显示权限谈款
				Privacy: false,
				// 账号
				tel: "",
				// 密码
				pwd: "",
				// 验证码还是密码登录 2 验证码登录 1 密码登录
				loginType: 1,
				// 手机验证码
				code: "",
				// 验证码倒计数
				count: 0,
				time: "",
				codeImgData: {},
				codeImgVal: '',
			}
		},
		onLoad() {

			//判断是否是第一次打开系统
			// #ifdef APP
			if (!uni.getStorageSync("isInSystem")) {
				this.Jur = true
			}
			// #endif

			// #ifdef H5
			if (uni.getStorageSync("isInSystemH5") == "" || uni.getStorageSync("isInSystemH5") == null) {
				this.Jur = true
			}
			// #endif
			this.getVerify()
		},
		watch: {

		},
		onHide() {
			clearInterval(this.time)
		},
		methods: {
			getVerify() {
				this.api.graphVer().then(res => {
					this.codeImgData = res.data
				})
			},
			setInSystem() {
				// #ifdef APP
				uni.setStorageSync("isInSystem", "true")
				// #endif
				// #ifdef H5
				uni.setStorageSync("isInSystemH5", "true")
				// #endif
			},
			login() {
				if (!this.confim) {
					this.$api.pop("请选勾选用户协议及隐私政策")
					return;
				}
				this.api.loginVer(this.tel, this.code).then(res => {
					console.log(res)
					if (res.code == 1) {
						uni.setStorageSync("user_info", res.data)
						uni.setStorageSync("token", res.data.data.token.token)
						this.$api.pop("登录成功")
						this.tel = ""
						this.code = ""
						setTimeout(() => {
							this.$api.totabar("/pages/index/index")
						}, 500)
					}
				})
			},

			// 发送验证码
			sendCode() {
				if (!this.codeImgVal) {
					this.$api.pop("请输入图形验证")
					return;
				}
				this.api.smsCode(this.tel, this.codeImgVal, this.codeImgData.uniqid).then(res => {
					console.log(res)
					if (res.code == 1) {
						if (res.data.time < 115) {
							this.$api.pop(res.data.time + 's后重试')
						} else {
							this.$api.pop(res.info)
							this.count = 60
							setInterval(() => {
								if (this.count <= 0) {
									this.count = 0
									return
								}
								--this.count
							}, 1000)
						}
					}
				})
			},


		}
	}
</script>

<style scoped lang="less">
	.login {
		width: 100%;
		height: 100vh;
		background: #171918;
		overflow-x: hidden;
		color: #fff;
		.title {
			display: flex;
			align-items: center;
			margin: 96rpx 96rpx 164rpx 96rpx ;
			.login_view {
				margin-right: 158rpx;
				>view:first-child {
					font-size: 68rpx;
				}
				>view:last-child {
					font-size: 28rpx;
				}
				
			}
		}
		
		
		
		
		.logincontent {
			width: 558rpx;
			margin: auto;
			.input_item {
				border-bottom: 1px solid #333333;
				width: 558rpx;
				font-size: 32rpx;
				color: #fff;
				margin-top: 70rpx;
				height: 66rpx;
				input {
					color: #fff;
				}
				.input-placeholder {
					color: #9A9A9A;
					font-size: 32rpx;
				}
			
				>view:first-child {
					font-size: 24rpx;
					font-weight: 400;
					margin-bottom: 48rpx;
					color: #434343;
				}
			
				>view:last-child {
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
			
				.sendcode {
					font-size: 28rpx;
					color: #FFFFFF;
				}
			}
		}
		.regist {
			text-align: center;
			font-size: 22rpx;
			margin-top: 24rpx;
			color: #999;
		}
		.login_btn {
			width: 558rpx;
			height: 96rpx;
			color: #000;
			background: linear-gradient(to bottom, #69FF60, #0C9D5B);
			font-size: 28rpx;
			line-height: 96rpx;
			margin-top: 88rpx;
			text-align: center;
			border-radius: 138rpx;
		}
		
		.agreement {
			font-size: 24rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #999999;
			text-indent: 14rpx;
			margin-top: 32rpx;
		}
		
		.circle {
			width: 24rpx;
			height: 24rpx;
			border-radius: 50%;
			border: 1px solid #999999;
		}
		
		.circle_checked {
			width: 24rpx;
			height: 24rpx;
			border-radius: 50%;
			background: #0C9D5B;
			border: 1px solid #0C9D5B;
		}
		.blue {
			color: #fff;
		}
		
	}

	
	
	
	



	

	

	

	

	

	

	

</style>