bn-q-icon/pages/login/register.vue

<template>
  <view class="register-box" v-if="shouPage">
    <top-head :top-type="1"></top-head>
    <view class="contract-data">
      <view class="data-input">
        <view class="input-item">
          <view class="item-detail">{{$t('index.register.address')}}：</view>
          <view class="item-detail"></view>
        </view>
        <view class="input-item-two">
          <input v-model="inviteCode" :placeholder="$t('index.register.add-address')">
        </view>
      </view>
      <view class="data-but">
        <button @click="register">{{$t('index.index.affirm')}}</button>
      </view>
      <view class="data-button" @click="goToUrl(1)">
        <image src="@/static/img/index/msg.svg"></image>
        <view>{{$t('index.contract.word')}}>></view>
      </view>
    </view>
    <view class="register-from" v-if="false">
      <view class="from-input"><input v-model="inviteCode" :placeholder="$t('index.index.affirm')"></view>
      <view class="from-but">
        <button @click="register">{{$t('index.index.affirm')}}</button>
      </view>
    </view>
  </view>
</template>
<script>
import {register} from "@/api/member";
import tools from "@/common/js/tools";
import TopHead from "@/pages/index/components/top-head";

export default {
  name: "register",
  props: {},
  components: {TopHead},
  data() {
    return {
      address: '',
      inviteCode: '',
      isAjax: false,
      shouPage:false
    }
  },
  onLoad(query) {
    if (query.address !== undefined) {
      this.address = query.address
      let inviteCode = uni.getStorageSync('inviteCode');
      if (inviteCode) {
        this.inviteCode = inviteCode
        this.register()
      }else {
        this.shouPage=true
      }
    } else {
      tools.leftClick()
    }
  },
  mounted() {

  },
  methods: {
    goToUrl(type) {
      switch (type) {
        case 1:
          uni.navigateTo({
            'url': 'pages/index/intro'
          })
          break
      }
    },
    register() {
      if (this.inviteCode === '') {
        this.shouPage=true
        tools.error(this.$t('index.error.errorMsg.noInvite'))
        return;
      }
      if (this.isAjax) {
        return;
      }
      this.isAjax = true
      register({'inviteCode': this.inviteCode, 'address': this.address}).then((res) => {
        if (res.code) {
          tools.setLoginInfo(res.data)
          setTimeout(() => {
            uni.reLaunch({
              url: '/pages/index/contract'
            })
          }, 50)
        } else {
          tools.error(res.msg)
          this.isAjax = false
          this.shouPage=true
        }
      }).catch((e) => {
        this.isAjax = false
      })
    }
  }

}
</script>

<style scoped lang="scss">
.register-box{
  padding-top: 40rpx;
  box-shadow: 0 0 24rpx 0 #000;
  box-sizing: border-box;
  width: 100%;
  height: 100vh;
  background: linear-gradient(0deg, rgb(64, 74, 96) 0%, rgb(9, 21, 36) 100%);
  .contract-data {
    background: #fff;
    width: 90%;
    margin: 120rpx auto 0;
    border-radius: 20rpx;
    padding: 40rpx 20rpx;
    font-size: 36rpx;
    box-shadow: 8rpx 8rpx 16rpx 0 rgba(255, 255, 255, 0.3);

    .data-input {
      border: 1rpx solid #000;
      overflow: hidden;
      border-radius: 10rpx;
      padding: 20rpx;

      .input-item {
        display: flex;
        justify-content: space-between;

        .item-detail {
          font-size: 26rpx;
        }
      }

      .item-img {
        display: flex;
        justify-content: right;

        .text-img {
          display: inline-block;
          border-radius: 50%;
          height: 60rpx;
          width: 60rpx;
          box-sizing: border-box;
          margin-right: 10rpx;

          image {
            width: 60rpx;
            height: 60rpx;
            z-index: 100;
          }
        }

        .text {
          line-height: 60rpx;
        }
      }
      .input-item:first-child {
        margin-bottom: 40rpx;
      }

      .input-item-two {
        height: 60rpx;
      }
    }

    .data-but {
      border-radius: 20rpx;
      margin-top: 60rpx;

      button {
        height: 90rpx;
        line-height: 90rpx;
        text-align: center;
        background: rgb(0, 87, 255);
        color: #fff;
        font-size: 26rpx;
      }
    }

    .data-button {
      margin-top: 40rpx;
      display: flex;
      justify-content: right;
      image {
        width: 40rpx;
        height: 40rpx;
      }
      view {
        font-size: 26rpx;
        margin-left: 10rpx;
        color: rgb(0, 87, 255);
        line-height: 40rpx;
      }

    }

  }
}

</style>