xybpkmweb/src/components/PatRegister.vue

<template>
  <div class="container">
    <div class="bgimg"></div>
    <div class="content">
      <div class="title">登录信息</div>
      <div class="loginForm">
        <mt-field placeholder="姓 名" v-model="form.name"></mt-field>
        <div style="display:flex;">
          <div style="width:75%;">
            <mt-field placeholder="手机号" v-model="form.phone"></mt-field>
          </div>
          <div style="width:25%;">
            <mt-button :disabled="disable" type="primary" class="sendPhcode" @click="timeCounter">{{timeCouterText}}
            </mt-button>
          </div>
        </div>
        <mt-field placeholder="短信验证码" v-model="form.phcode" type="number"></mt-field>
      </div>
      <div class="footer">
        <div class="jbbtn" @click="submit">提交</div>
        <div class="agreeInfo">
          <input type="checkbox" checked v-if="form.isagree" @change="checkOnClick" />
          <input type="checkbox" v-else @change="checkOnClick" />
          <!-- <mt-checklist v-model="form.isagree" :options="['选项A', '选项B', '选项C']"></mt-checklist> -->
          <span>我已知晓<span @click="showAgree=true" style="color:blue;">《用户隐私条款》</span></span>

        </div>
      </div>
    </div>
    <!-- 用户隐私条款 -->
    <div class="container dialogContainer" v-if="showAgree">
      <div class="bgimg"></div>
      <div class="content">
        <div class="title">用户隐私条款</div>
        <div class="agreeForm">
          <div class="agreedoc" v-html="agreementInfo.content">
            
          </div>
        </div>
        <div class="footer">
          <div class="jbbtn" @click="showAgree=false">确定</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    Field,
    Button,
    Toast,
    MessageBox,
    Checklist
  } from 'mint-ui'

  export default {
    name: 'Index',
    components: {
      Field,
      Button,
      Toast,
      MessageBox,
      Checklist
    },
    data() {
      return {
        email: '',
        timeCouterText: '发送',
        seconds: 60,
        disable: false,
        isagree: false,
        form: {},
        showAgree: false,
        agreementInfo:{}
      }
    },
    methods: {
      goPage(path) {
        this.$router.push(path)
      },
      timeCounter() {
        if (!this.form.phone) {
          MessageBox({
            title: '提示',
            message: '请输入手机号?'
          })
          return
        }
        let _this = this
        this.$api.sendPhcode(this.form).then(res => {})
        var timer = setInterval(function () {
          if (_this.seconds < 2) {
            clearInterval(timer)
            _this.seconds = 60
            _this.timeCouterText = '发送'
            _this.disable = false
            return
          }
          _this.seconds -= 1
          _this.timeCouterText = _this.seconds + '秒后重新发送'
          _this.disable = true
        }, 1000)
      },
      checkOnClick(e) {
        if (e.target.checked) {
          this.form.isagree = true
        } else {
          this.form.isagree = false
        }
      },
      submit() {
        if (!this.form.name) {
          MessageBox({
            title: '提示',
            message: '请输入姓名'
          })
          return
        }
        if (!this.form.phone) {
          MessageBox({
            title: '提示',
            message: '请输入手机号'
          })
          return
        } else {
          if (!this.$recheck.checkPhone(this.form.phone)) {
            MessageBox({
              title: '提示',
              message: '请输入正确的手机号'
            })
            return
          }
        }
        if (!this.form.phcode) {
          MessageBox({
            title: '提示',
            message: '请输入验证码'
          })
          return
        }
        if (!this.form.isagree) {
          MessageBox({
            title: '提示',
            message: '请先同意《PK程序用户隐私条款》'
          })
          return
        }
        let params = this.form
        params.role = 2
        this.$api.login(params).then(res => {
          if (!res.data.code) {
            localStorage.setItem("token", res.data.data.token)
            this.goPage("/patindex")
          } else {
            Toast(res.data.message)
          }
        })
      }
    },
    created() {
      this.$api.getUserAgreementInfo({id:2}).then(res=>{
        this.agreementInfo = res.data.data
      })
    },
  }

</script>

<style scoped lang="scss">
  .content {
    position: relative;
    z-index: 1;

    .loginForm {
      .sendPhcode {
        /* width: 6rem; */
        width: 100%;
        margin-top: 1rem;
        height: 3.0rem;
        border-radius: 1.4rem;
      }
    }

    .footer {
      /* position: absolute; */
      bottom: 1rem;
      margin: 0 auto;
      left: 0;
      right: 0;
      bottom: 1rem;

      .agreeInfo {
        margin: 2rem 0;
      }
    }
  }
  .dialogContainer {
    position: absolute;
    z-index: 100;
    top: 0px;

    .agreeForm {
      width: 90%;
      margin: auto;
      margin-top: 1rem;
      /* border:1px solid red; */
      height: 70vh;
      border-radius: 1rem;
      background: #fff;
      padding: 10px;
    }

    .agreedoc {
      height: 100%;
      overflow-y: scroll;
      p{
        text-align: left;
      }
    }
  }

</style>