快应用开发注册功能手机注册与登录

快应用开发注册功能手机注册与登录

<import name='header' src='../Common/header'></import>
<import name='footer' src='../Common/footer'></import>


<template>
<div class="demo-page">

    
    
      <div class="page-title-wrap">
        <text class="page-title">现在注册</text>
      </div>

      <div class="input-item">
        <input class="input-text" type="tel" autocomplete="on" placeholder="请输入手机号" onchange="showChangeMobile"></input>

        <input class="input-button color-3" type="button" value="提交" onclick="login()"></input>
      </div>


      <div class="page-title-content">
        <text class="page-title-two">说明：内容。。。</text>
        <text class="page-title-two">说明：内容。。。</text>
        <text class="page-title-two">说明：内容。。。</text>
      </div>

	<!-- footer -->
	<div>
	    
	</div>


</div>
</template>

<script>
import prompt from '@system.prompt'
import device from '@system.device'
import fetch from '@system.fetch'
import router from '@system.router'

export default {
  private: {
    text: '立即注册',
    componentName: 'input',
    inputValueMobile: '',
    inputType: 'text',
    thisdevice:''
  },
  /**
   * 当用户点击菜单按钮时触发，调用app中定义的方法showMenu
   * 注意：使用加载器测试`创建桌面快捷方式`功能时，请先在`系统设置`中打开`应用加载器`的`桌面快捷方式`权限
   */
  onMenuPress() {
    this.$app.$def.showMenu()
  },
  onInit () {
    this.getdevide()
  },
  getdevide(){
    //console.log('init getdevide')
    var thisobj   = this.$app.$data
    device.getDeviceId({
      success: function(data) {
        //console.log('init getdevide()')
        //prompt.showToast({message:data.deviceId})
        thisobj.thisdevice = data.deviceId
      },
      fail: function(data, code) {
        prompt.showToast({message:code})
      }
    })
  },
  

  showChangeMobile (e) {
    this.$app.$data.inputValueMobile = e.value
  },


  login()
  {
    var mobile      = this.$app.$data.inputValueMobile
    var thisdevice  = this.$app.$data.thisdevice
    if(!mobile || mobile.length!==11)
    {
      prompt.showToast({message:'请输入正确的手机号'})
      return
    }

    fetch.fetch({
      url: 'http://www.a.com/api_quickapp/index',
      data:{mobile:mobile, device:thisdevice},
      responseType: 'json',
      success: function (response) {        
        var returnData = response.data//response:{code:2, data:{'success':1,'msg':'','data':{}}}
        prompt.showToast({message:returnData.msg})

        if(!returnData || (returnData.success!=1))
        {
          return //end
        }
        //prompt.showToast({message:JSON.stringify(response)})

        router.push ({
          uri: '/DemoDetail/loginin'
        })
      },
      fail: function (data, code) {
        prompt.showToast(`handling fail, errMsg = ${data}`)
        prompt.showToast(`handling fail, errCode = ${code}`)
      }
    })


  }




}
</script>

<style>
  .demo-page {
    flex-direction: column;
    justify-content: center;
    padding-left: 100px;
  }

  .page-title-wrap{
    margin-bottom: 100px;
    margin-top: 100px;
  }

  .page-title{
    font-size: 40px;
  }
  .page-title-content{
    margin-top: 200px;

  }
  .title {
    font-size: 40px;
    text-align: center;
  }

  .input-text
  {
    background-color: #fff;
    border: 1px solid #c9c9c6;
    height: 100px;
    width: 60%;
    padding-left: 20px;
  }

  .input-button{
    width: 120px;
    color:#fff;
     background-color: #09ba07;
  }
</style>