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">
			      +86
			    </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">验证码登录</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>

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

<script>


  export default {
    components: {
		// nothing
    },

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

    /**
     * 生命周期函数--监听页面加载
     */
    async onLoad(options) {
      console.log('login onLoad')
      // 设置当前是否显示微信小程序授权登录
      // await this.setShowUserInfo()
      // 数据加载完成
      this.isLoad = true
      console.log('isLoad', true)
    },

    methods: {
		
		// 点击登录
		handleLogin() {
		  const app = this
		  if (!app.isLoading && app.formValidation(SUBMIT_LOGIN)) {
		    app.submitLogin()
		  }
		},

      /**
       * 设置当前是否显示微信小程序授权登录
       *  - 条件1: 只有微信小程序才显示获取用户信息按钮
       *  - 条件2: 后台设置是否已开启该选项 [后台-客户端-注册设置]
       */
      async setShowUserInfo() {
        console.log('setShowUserInfo start')
        const app = this
        // 判断当前客户端是微信小程序, 并且支持getUserProfile接口
        const isMpWeixin = app.platform === 'MP-WEIXIN' && wx.canIUse('getUserProfile')

        // 获取后台设置
        await SettingModel.item(SettingKeyEnum.REGISTER.value, false)
          .then(setting => {
            app.isMpWeixinAuth = isMpWeixin && setting.isOauthMpweixin
            console.log('setShowUserInfo complete')
          })
      },

      // 获取到用户信息的回调函数
      onGetUserInfoSuccess({ oauth, code, userInfo }) {
        // 记录第三方用户信息数据
        this.partyData = { oauth, code, userInfo }
        // 显示注册页面
        this.onShowRegister()
      },

      // 显示注册页面
      onShowRegister() {
        // 是否显示微信小程序授权登录
        this.isMpWeixinAuth = false
        // 已获取到了第三方用户信息
        this.isParty = true
      }
    }
  }
</script>

<style lang="scss" scoped>
	.login{
		position: relative;
		min-height: 100vh;
	}
	.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;
    border-bottom: 1rpx solid #f3f1f2;
    margin-bottom: 30rpx;
    height: 126rpx;

    &--input {
      font-size: 28rpx;
      letter-spacing: 1rpx;
      flex: 1;
      height: 100%;
	  background-color: #F8F8F8;
    }

    &--parts {
      min-width: 100rpx;
      height: 100%;
    }
	
	.gjcode{
		font-size: 36rpx;
		width: 46rpx;
		height: 100%;
	}

    // 图形验证码
    .captcha {
      height: 100%;

      .image {
        display: block;
        width: 192rpx;
        height: 100%;
		line-height: 100%;
      }
    }
  }
  
  // 登录按钮
  .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;
  }
  //
  .tips{
	  padding:12rpx;
	  color:#999;
	  margin-left: 26rpx;
  }
  //vfcode
  .vfcode{
	  margin-left: 32rpx;
  }
  .vbottom{
	  position: absolute;
	  width: 100%;
	  height: 72rpx;
	  // margin-top: 272rpx;
	  left: 12rpx;
	  bottom: 12%;
	  left: 2%;
	
	  .imagezone{
		  display: flex;
		  line-height: 72rpx;
		  padding: 10rpx;
		  
		  img{
			  margin-left: 32rpx;
		  }
	  }
	  
	  .txtzone{
		  margin-top: 12rpx;
		  font-size: 26rpx;
		  color: #999;
		  padding-left: 32rpx;
	  }

  }
</style>