why_reg_h5/pages/login/index.vue

<template>
  <view class="login">
	  <view class="titzone">
		 <view class="title">你好，欢迎使用</view>
		 <view class="subtitle">国家文化专网网络注册登录系统</view> 
	  </view>
	  
	  <!-- 表单 -->
	  <view class="login-form">
		  <!-- 手机号 -->
		  <view class="form-item">
			  <view class="form-item--parts">
			    <view class="gjcode">
				  <select>
					  <option class="">+86</option>
				  </select>
			    </view>
			  </view>
		    <input class="form-item--input" type="number" v-model="mobile" maxlength="11" placeholder="请输入手机号码" />
		  </view>
		  <!-- 密码 -->
		  <view class="form-item">
			  <input  class="form-item--input" type="password" v-model="vpass" placeholder="请输入密码"/>
		  </view>
		  
		  <!-- 登录按钮 -->
		  <view class="login-button" @click="handleLogin">
		    <text>登录</text>
		  </view>
	  </view>
	  <view class="tips">
		登录即表明同意《用户协议》和《隐私政策》
	  </view>
	  
	  <!-- 验证码登录 -->
	  <!-- <view class="vfcode" @click="gtsms('smscode')" >验证码登录</view> -->
	  
	  <!-- logo -->
	  <view class="vbottom">
		  <view class="imagezone">
			  <image mode="heightFix" style="height: 72rpx;" src="../../static/wjslogo.png"/>X
			  <image mode="heightFix" style="height: 72rpx;" src="../../static/ccde.png"/>
		  </view>
		  <view class="txtzone">
			  <view class="txtit">由深圳文化产权交易所向百链数据科技（深圳）有限公司定制</view>
			  <text class="txbk">文化专网网络运营商：百链数据科技（深圳）有限公司</text>
			  <text class="txck">中国人民共和国增值电信业务经营许可证编号：B1.B2-20211922</text>
		  </view>

	  </view>
  </view>
</template>

<script>
import * as LoginApi from '@/api/login'
import * as Verify from '@/utils/verify'
import store from '@/store'
// 校验登录
import { checkLogin, showError } from '@/core/app'


  export default {
    components: {
		// nothing
    },

    data() {
      return {
        // 数据加载完成 [防止在微信小程序端onLoad和view渲染同步进行]
        isLoad: false,
		// 手机号
		mobile: '',
		// 密码
		vpass:"",
      }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    async onLoad(options) {
		// do nothing
    },
	mounted() {
		this.init()
	},
    methods: {
		
		// 系统初始化
		init(){
			if(checkLogin()==true){
				this.isLogin = true
				// 登录了的话 就跳转到相应的页面
				this.$navTo("pages/home")
			}
		},
		//goto smslogin
		gtsms(){
			this.$navTo("pages/login/loginsms")
		},
		
		// 点击登录
		handleLogin() {
		  const app = this
		  if (!app.isLoading && app.formValidationName(app.mobile) && app.formValidationPass(app.vpass)) {
		    app.submitLogin()
		  }
		},
		//todo 
		formValidationName(str){
			if(Verify.isEmpty(str)){
				this.$toast('手机号不能为空')
				return false
			}
			if(!Verify.isMobile(str)){
				this.$toast('手机号格式不对')
				return false
			}
			return true
		},
		
		formValidationPass(str){
			if(Verify.isEmpty(str)){
				this.$toast('密码不能为空')
				return false
			}
			return true
		},
		// 提交登录
		submitLogin(){
			const app = this
			app.isLoading = true
			store.dispatch('Login', {
				smsCode: '6459',
				mobile: app.mobile
			  })
			  .then(result => {
				// 显示登录成功
				app.$toast(result.message)
				// 到设备选择
				this.$navTo("pages/verfiy/index")
				
				// 相应全局事件订阅: 刷新上级页面数据
				// uni.$emit('syncRefresh', true)
				// this.$navTo("pages/home")
				// 跳转回原页面
				//setTimeout(() => app.onNavigateBack(1), 2000)
			  })
			  .catch(err => {
				  console.log(err);
			  })
			  .finally(() => app.isLoading = false)
		}

    }
  }
</script>

<style lang="scss" scoped>
	.login{
		position: relative;
		min-height: 100vh;
		height: 100%;
	}
	.titzone{
		padding: 3.2rem;
		font-size: 32rpx;
		
		.title{
			display: flex;
			font-size: 40rpx;
			font-weight: 600;
			line-height: 1.4;
		}
		.subtitle{
			line-height: 1.6;
		}
	}
  // 输入框元素
  .form-item {
    display: flex;
    padding: 18rpx;
    margin-bottom: 30rpx;
    height: 126rpx;

    &--input {
	  padding-left: 22rpx;
      font-size: 28rpx;
	  border-bottom: 1rpx solid #f3f1f2;
      letter-spacing: 1rpx;
      flex: 1;
      height: 100%;
	  background-color: #F8F8F8;
    }

    &--parts {
      min-width: 100rpx;
      height: 100%;
    }
	
	// 国家代码选择
	.gjcode{
		width: 66rpx;
		height: 100%;
		
		select{
			font-size: 32rpx;
			border: none;
			padding: 6rpx;
			margin-right: 22rpx;
			height: 100%;
			border-right: 1px solid #034373;
			background-color: #F8F8F8;
		}
	}
	// end
  }
  
  // 登录按钮
  .login-button {
    width: 90%;
	
	margin-left: auto;
	margin-right: auto;
    height: 86rpx;
    margin-top: 80rpx;
    background: linear-gradient(to right, #034373, #034373); 
    color: #fff;
    
    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
    letter-spacing: 5rpx;
    display: flex;
    justify-content: center;
    align-items: center;
	border-radius: 20rpx;
  }
  //
  .tips{
	  padding:12rpx;
	  color:#999;
	  margin-left: 26rpx;
  }
  //vfcode
  .vfcode{
	  margin-left: 32rpx;
  }
  
  //输入框的时候
	@media screen and (max-height: 500px){
		.vbottom{
		  display: none;
		}
	}
  .vbottom{
	  position: absolute;
	  width: 100%;
	  height: 72rpx;
	  // margin-top: 272rpx;
	  left: 12rpx;
	  bottom: 18%;
	  padding: 2%;
	
	  .imagezone{
		  display: flex;
		  line-height: 72rpx;
		  text-align: center;
		  margin: 10rpx auto;
		  width: 76%;
		  
		  img{
			  margin-left: 36rpx;
		  }
	  }
	  
	  .txtzone{
		  margin-top: 12rpx;
		  font-size: 22rpx;
		  color: #999;
		  line-height: 1.4;
		  display: flex;
		  flex-direction: column;
		  width: 96%;
		  padding-bottom: 12rpx;
		  text-align: center;
		  
		  .txtit{
			  font-size: 20rpx;
			  font-weight: 600;
			  color: #034373;
			  line-height: 1.4;
			  white-space: nowrap;
		  }
		  .txbk{
			  margin-top: 10rpx;
			  color: #034373;
			  font-size: 20rpx;
		  }
		  .txck{
			  margin-top: 14rpx;
			  color: #999;
		  }
	  }

  }
</style>