a77/pages/login/login.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>
		<!-- 返回按钮 -->
		<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="iptLogin">
					<view class="input_item">
						<view class="">
							<input type="number" v-model="tel" placeholder="输入账号">
						</view>
					</view>
				</view>
				<!-- 手机号 结束-->
				<!-- 密码 -->
				<view class="iptLogin" style="margin-top: 50rpx;">
					<view class="input_item">
						<view class="">
							<input type="password" v-model="pwd" placeholder="输入密码">
						</view>
					</view>

					<view class="forgetpass" @click="href('/pages/login/forgetpassword')">
						忘记密码
					</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: "admin",
				// 密码
				pwd: "",
				// 验证码还是密码登录 2 验证码登录 1 密码登录
				loginType: 1,
				// 手机验证码
				code: "",
				// 验证码倒计数
				count: 0,
				time: ""
			}
		},
		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

		},
		watch: {

		},
		methods: {
			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.login(this.tel, this.pwd).then(res => {
					if (res.code == 1) {
						uni.setStorageSync("user_info", res.data)
						uni.setStorageSync("token", res.data.token.token)
						this.$api.pop("登录成功")
						this.tel = ""
						this.pwd = ""
						setTimeout(() => {
							this.$api.totabar("/pages/index/index")
						}, 500)
					}
				})
			},

		}
	}
</script>

<style scoped>
	.login {
		width: 100%;
		height: 100vh;
		background: #171918;
		overflow-x: hidden;
		color: #fff;
	}

	.logincontent {
		width: 710rpx;
		margin: auto;
		border-radius: 30rpx;
		padding-bottom: 70rpx;
	}

	.title {
		font-size: 46rpx;
		/* margin-top: 130rpx; */
		display: flex;
		align-items: center;
	}

	.login_view {
		margin: 166rpx 158rpx 164rpx 96rpx;
	}

	.login_view>view:first-child {
		font-size: 68rpx;
	}

	.login_view>view:last-child {
		font-size: 28rpx;
	}

	.title>view:last-child {
		width: 120rpx;
		height: 106rpx;
	}


	.login_content {
		margin-left: 80rpx;

	}

	.input_item {
		display: flex;
		width: 558rpx;
		height: 80rpx;
		font-size: 32rpx;
		position: relative;
		/* background: #F0F9FD; */
		/* border-radius: 30rpx; */
		border-bottom: 1px solid #333333;
	}



	.input_item:last-of-type {
		margin-top: 20rpx;
	}

	input {
		height: 70rpx;
		width: 400rpx;
		line-height: 70rpx;
		/* margin-left: 30rpx; */
	}

	.tools {
		width: 550rpx;
		display: flex;
		justify-content: space-between;
		font-size: 30rpx;
		margin: 134rpx auto 0 auto;
	}

	.tools>view:first-child {
		color: #999;
	}

	.tools>view:last-child {
		color: #fff;
	}

	.blue {
		color: #fff;
	}

	.login_btn {
		width: 558rpx;
		height: 96rpx;
		color: #000;
		background: linear-gradient(to bottom, #69FF60, #0C9D5B);
		font-size: 32rpx;
		line-height: 96rpx;
		margin: 0 auto;
		margin-top: 88rpx;
		text-align: center;
		border-radius: 138rpx;
	}

	.agreement {
		/* width: 550rpx; */
		/* margin: 50rpx 30rpx; */
		font-size: 28rpx;
		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;
	}

	.changeType {
		margin: 0 auto;
		/* margin-top: 346rpx; */
		/* margin-top: 146rpx; */
		width: 432rpx;
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
		font-weight: 400;
		color: #999999;
	}

	.colorWhite {
		color: #fff;
	}

	.colorGray {
		color: #999999;
	}

	.sendcode {
		color: #E5D798;
		font-size: 24rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: right;
		width: 200rpx;
		position: absolute;
		right: 0;
		margin-right: 20rpx;
	}

	.sendcode_count {
		color: #E5D798;
		font-size: 24rpx;
		height: 70rpx;
		line-height: 70rpx;
		width: 200rpx;
		position: absolute;
		right: 0;
	}

	.iptLogin>view:first-child>view:first-child {
		width: 24rpx;
		height: 28rpx;
		margin-top: 8rpx;
		margin-right: 10rpx;
	}

	.iptLogin>view:first-child {
		display: flex;
	}

	.iptLogin:last-child {
		position: relative;
	}

	/deep/.uni-input-wrapper {
		color: #fff;
	}

	.text {
		height: 50rpx;
		width: 170rpx;
	}

	.forgetpass {
		height: 42rpx;
		font-size: 28rpx;
		text-align: center;
		line-height: 42rpx;
		color: #fff;
		position: absolute;
		bottom: 0;
		right: 0;
		margin-right: 80rpx;
		margin-bottom: 10rpx;
		border-bottom: 1px solid #fff;
	}

	.regist {
		text-align: center;
		font-size: 22rpx;
		margin-top: 24rpx;
		color: #999;
	}
</style>