sound-chain/pages/index/login.vue

<template>
<view class="login_page">
	<view class="login_cont">
	  <view class="login_wrap">
		<!-- 1. 账号密码登录 accountLogin -->
		<account-login
		  v-if="loginType === 'accountLogin'"
		  :agreeStatus="state.protocol"
		  @onConfirm="onConfirm"
		/>
	  
		<!-- 2. 短信登录  smsLogin -->
		<sms-login
		  v-if="loginType === 'smsLogin'"
		  :agreeStatus="state.protocol"
		  @onConfirm="onConfirm"
		/>
		<!-- 3. 账号注册 accountReg -->
		<account-reg
		  v-if="loginType === 'accountReg'"
		  :agreeStatus="state.protocol"
		  @onConfirm="onConfirm"
		/>
		<view class="login_tips">
			<view v-if="loginType === 'accountReg'" class="login" @tap="showLoginPage('accountLogin')">已有帐号，去登录</view>
			<view v-if="loginType === 'accountLogin'||loginType === 'smsLogin'" class="reg" @tap="showLoginPage('accountReg')">注册新账号</view>
		</view>
	   </view>
	   <!-- 同意选项 -->
	   <!-- <view class="agreement-option ss-m-b-20">
		 <label class="radio ss-flex ss-col-center" @tap="onAgree">
		<view class="check_box" @tap.stop="onAgree">
			<image v-if="state.protocol" class="check_icon" src="/static/check_icon.png"></image>
			<image v-else class="check_icon" src="/static/check_icon1.png"></image>
		</view>
		   <view class="agreement-text ss-flex ss-col-center ss-m-l-8">
			 我已阅读并同意遵守
			 <view class="tcp-text" @tap.stop="onProtocol('用户协议')"> 《用户协议》 </view>
			 <view class="agreement-text">与</view>
			 <view class="tcp-text" @tap.stop="onProtocol('隐私协议')"> 《隐私协议》 </view>
		   </view>
		 </label>
	    </view> -->
	</view>
</view>
</template>

<script setup>
  import sheep from '@/common'
  import { computed, reactive } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import accountLogin from '../../common/components/s-auth-modal/components/account-login.vue'
  import smsLogin from '../../common/components/s-auth-modal/components/sms-login.vue'
  import accountReg from '../../common/components/s-auth-modal/components/account-reg.vue'
  import { closeLoginPage, showLoginPage } from '@/common/hooks/useModal';
  const modalStore = sheep.$store('modal');
  // 授权弹窗类型
  const loginType = computed(() => modalStore.loginType);
  const state = reactive({
	navigationBar: {},
	page: {
		backgroundColor: '#FAFAFA',
		backgroundImage: '/static/homeTopBg.png'
	},
    protocol: true, // false表示未选择，true表示同意
  })
  onLoad(async (options) => {
    
  })
  // 同意协议
  function onAgree(e) {
    state.protocol = !state.protocol;
  }
  // 查看协议
  function onProtocol(title) {
    sheep.$router.go('/pages/public/richtext', {
      title,
    });
  }
  // 点击登录 / 注册事件
  function onConfirm(e) {
  }
</script>
<style lang="scss" scoped>
.login_page{
	background: url(/static/homeTopBg.png) center top -44px / 100% no-repeat #fafafa;
	height: 100vh;
	width: 750rpx;
	margin: 0 auto;
	.login_cont{
		padding: 228rpx 30rpx 108rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
	}
}
.login_wrap{
	.login_tips{
		display: flex;
		justify-content: center;
		.reg,
		.login{
			margin-top: 40rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #222222;
			line-height: 40rpx;
		}
		.login{
			color: rgba(34, 34, 34, 0.5);
		}
	}
}
.agreement-option {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 120rpx;
  .check_box{
	  padding-right: 10rpx;
	  .check_icon{
		  width: 24rpx;
		  height: 24rpx;
	  }
  }
  .agreement-text {
	font-weight: 400;
	font-size: 24rpx;
	color: #222222;
	.tcp-text {
	  color: #24D688;
	}
  }
}
</style>