why_reg_h5/pages/login/loginsms.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="tips">未注册的手机号验证后自动创建账户</view>

		  <!-- 登录按钮 -->
		  <view class="login-button" @click="handleLogin">
		    <text>登录</text>
		  </view>
	  </view>
	  <view class="tips">
		登录即表明同意《用户协议》和《隐私政策》
	  </view>
	  
	  <!-- 密码登录 -->
	  <view class="vfcode" @click="gtsms('upass')" >密码登录</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>
import * as LoginApi from '@/api/login'
import * as Verify from '@/utils/verify'
import store from '@/store'


  export default {
    components: {
		// nothing
    },

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

    methods: {
		//goto smslogin
		gtsms(){
			this.$navTo("pages/login/index")
		},
		// 点击登录
		handleLogin() {
		  const app = this
		  if (!app.isLoading && app.formValidationMobile(app.mobile)) {
		    //app.submitLogin()
			// 调整到验证码
			app.$navTo("pages/login/smscode?rt="+app.mobile)
		  }
		},
		
		// 验证
		formValidationMobile(str){
			if (Verify.isEmpty(str)) {
			  this.$toast('手机号不能为空')
			  return false
			}
			if(!Verify.isMobile(str)){
				this.$toast("输入的手机号码格式不对")
				return false
			}
			return true
		},
		
	  // 确认登录
	  submitLogin() {
		const app = this
		app.isLoading = true
		store.dispatch('Login', {
			smsCode: app.smsCode,
			mobile: app.mobile,
			isParty: app.isParty,
			partyData: app.partyData
		  })
		  .then(result => {
			// 显示登录成功
			app.$toast(result.message)
			// 相应全局事件订阅: 刷新上级页面数据
			uni.$emit('syncRefresh', true)
			// 跳转回原页面
			setTimeout(() => app.onNavigateBack(1), 2000)
		  })
		  .catch(err => {
			// 跳转回原页面
			if (err.result.data.isBack) {
			  setTimeout(() => app.onNavigateBack(1), 2000)
			}
		  })
		  .finally(() => app.isLoading = false)
	  },


    }
  }
</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;
	  padding-left: 12rpx;
      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%;
			background-color: #F8F8F8;
		}
	}

  }
  
  // 登录按钮
  .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>