jsh_erp_app/pages/login/login.vue

<template>
    <view class="content-block">
			<view class="text-box">
				<view class="text-box-1">Hello！</view>
				<view class="text-box-2">欢迎使用象力WMS系统</view>
			</view>
      <view class="input-box">
        <!-- 登录 -->
        <view class="login-box" v-if="isLogin">
          <view class="login-box-tab">
            <view
              class="ss-m-r-16"
              v-for="(item, i) in loginList"
              :key="i"
              :class="loginType == item.id ? 'activeLogin' : ''"
              @click="loginTypeClick(item)"
              >{{ item.name }}</view
            >
          </view>
          <view>
            <sms-login v-if="loginType == 1" ref="smsLoginRef"></sms-login>
            <account-login
              v-if="loginType == 2"
              ref="accountLoginRef"
            ></account-login>
            <button class="toLoginBtn ss-reset-button" @tap="toLogin">
              登  录
            </button>
            <view class="forget-box" @click="changePassword">忘记密码?</view>
          </view>
        </view>
        <!-- <view class="agreement-box flex_box">
					<radio
						:checked="protocol"
						color="var(&#45;&#45;ui-BG-Main)"
						style="transform: scale(0.8)"
						@tap.top="onChange"
					/>
					<view class="agreement-text flex_box" :class="{'isAgreement': protocol}">
						我已阅读并同意
						<view
							class="tcp-text"
							@tap.stop="
								onProtocol(1, '用户协议', 'small:program:user:agreement')
							"
						>
							《用户协议》
						</view>
						<view class="agreement-text" :class="{'isAgreement': protocol}">和</view>
						<view
							class="tcp-text"
							@tap.stop="
								onProtocol(2, '隐私条款', 'small:program:privacy:agreement')
							"
						>
							《隐私条款》
						</view>
					</view> -->
          <view class="safe-box"></view>
        </view>
      </view>
    </view>
</template>

<script>
import { onLoad, onShow } from "@dcloudio/uni-app";
import accountLogin from "./components/account-login.vue";
import smsLogin from "./components/sms-login.vue";
// import smsRegister from "./components/sms-register.vue";
export default {
	components:{
		accountLogin,
		smsLogin
	},
	data(){
		return {
			loginList:[
				{
					name: "验证码登录",
					id: 1,
				},
				{
					name: "密码登录",
					id: 2,
				},
			],
			loginType:2,
			barHeight:0.,
			protocol:false,
			isLogin:true,
			isDisabled:false
		}
	},
	onLoad() {
		
	},
	methods:{
		loginTypeClick(item) {
			this.loginType = item.id;
		},
		// 忘记密码
		changePassword() {
		  uni.navigateTo({
		    url: "/pages/login/forget-password",
		  });
		},
		//勾选协议
		onChange() {
		  this.protocol = !this.protocol;
		},
		// 查看协议
		onProtocol(id, title, key) {
			uni.navigateTo({
			  url: `/pages/public/richtext?id=${id}&title=${title}&key=${key}`,
			});
		},
		// 登录
		toLogin(){
		  // 同意协议
		  // if (!this.protocol) {
				// uni.$u.toast("请先阅读并勾选协议");
		  //   return;
		  // }
		  if (this.loginType == 1) {
		    this.$refs.smsLoginRef.smsLoginSubmit();
		  } else {
		    this.$refs.accountLoginRef.accountLoginSubmit();
		  }
		},
		// 注册下一步
		nextClick(){
		  if (this.protocol) {
		    uni.$u.toast("请先阅读并勾选协议");
		    return;
		  }
		  this.isDisabled = true;
		  // const res = await smsRegisterRef.value.smsRegisterSubmit();
		}
	}
}
</script>

<style lang="scss" scoped>
.content-block {
	min-height: 100vh;
  display: flex;
  flex-direction: column;
  // align-items: center;
  // height: calc(100vh - v-bind(barHeight));
  padding: 0 30rpx;
	padding-top: var(--status-bar-height);
	background: url('@/static/image/login/page-bg.png') no-repeat;
	background-size: 100% 100%;

	.text-box {
		color: #1A1A1A;
		margin-top: 74rpx;
		.text-box-1 {
			font-family: "PingFang SC";
			font-size: 80rpx;
			font-weight: 600;
		}
		.text-box-2 {
			font-family: "PingFang SC";
			font-size: 32rpx;
			font-weight: 500;
		}
	}

  .input-box {
		z-index: 3;
    border-radius: 40rpx 40rpx 0 0;
    flex: 1;
    width: 100%;
    padding: 40rpx 30rpx 30rpx;
		margin-top: 30rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
		background: url('@/static/image/login/box-bg.png') no-repeat;
		background-size: 100% 100%;

    .login-box {
      &-tab {
        color: #999;
        font-size: 32rpx;
        font-weight: 400;
        line-height: normal;
        display: flex;
        margin-bottom: 50rpx;
      }

      .activeLogin {
        color: #333;
        font-weight: 600;
        position: relative;
        z-index: 2;

        &::after {
          content: "";
          display: block;
          width: 66rpx;
          height: 12rpx;
          background-color: #0256FF;
          border-radius: 52rpx;
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          z-index: -1;
        }
      }
    }
  }

  .toLoginBtn {
    height: 88rpx;
    background: linear-gradient(90deg, #59C0E9 0%, #0256FF 100%);
    border-radius: 16rpx;
    color: #fff;
    margin-bottom: 32rpx;
    margin-top: 30rpx;
  }

  .toRegisterBtn {
    color: #333;
    border: 1px solid #bfc8db;
    border-radius: 16rpx;
    height: 88rpx;
  }

  .forget-box {
    color: #adb5bd;
    font-size: 24rpx;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: right;
    margin-top: 14rpx;
    text {
      color: #f39801;
    }
  }

  .agreement-box {
    .tcp-text {
      color: #f49700;
    }

    .agreement-text {
      color: #adb5bd;
      font-size: 24rpx;
    }
		.isAgreement {
			color: #333;
		}
    .safe-box {
      height: calc(constant(safe-area-inset-bottom) / 5 * 3);
      height: calc(env(safe-area-inset-bottom) / 5 * 3);
    }
  }
}
</style>