liedou_uniapp/pages/subPackages/login/bindInviteCo...

<template>
  <view class="page-wrap">
    <!-- 顶部导航 -->
    <u-navbar class="navbar-wrap" title="绑定邀请码" title-color="#fff" :title-size="36" :title-bold="false" :is-back="true" back-icon-color="#fff" :background="navbarBackground" />

    <!-- 登录提示语 -->
    <view class="tips-wrap">
      <view class="title">请输入邀请信息</view>
      <!-- <view class="tips">
        <text>登录代表您已阅读并同意</text>
        <text class="link">《猎豆隐私协议》</text>
      </view> -->
    </view>

    <!-- 表单 -->
    <view class="form-wrap">
      <view class="form-item">
        <image class="item-img" src="https://ld.726p.com/ldyx_static/imgs/icon-invite.png" />
        <u-input class="item-input" v-model="form.inviteCode" maxlength="20" :border="false" placeholder="请输入邀请码或邀请人手机号" />
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="footer-wrap">
      <view class="btn" @click="onClickSkip">跳过</view>
      <view :class="['btn', 'disabled', form.inviteCode ? 'on' : '']" @click="onClickBind">开启优选之旅</view>
      <!-- <view class="footer-tips">未注册的手机号码验证后自动注册</view> -->
    </view>

	<!-- #ifdef H5 -->
	<icp style="position: fixed;bottom:100rpx"></icp>
	<!-- #endif -->
  </view>
</template>

<script>
  const app = getApp()
  const $router = app.globalData.$router
  export default {
    data() {
      return {
        statusBarHeight: app.globalData.statusBarHeight,
        navbarBackground: {
          background: 'linear-gradient(90deg, #F57C29 0%, #F13641 100%)'
				},
        form: {
          inviteCode: '', // 邀请码
        },
      };
    },
    methods: {
      // 监听点击“跳过”
      async onClickSkip() {
        // await app.handleShowModal('确定绑定"默认邀请码"吗？')
        this.handleBind({ isSkip: true })
      },
      // 监听点击“绑定邀请码”
      async onClickBind() {
        if (!this.form.inviteCode) {
          this.$u.toast('请输入邀请码');
          return false
        }
        await app.handleShowModal(`确定绑定"${ this.form.inviteCode }"吗？`)
        this.handleBind()
      },
      // 执行绑定邀请码
      async handleBind(options = {}) {
        try {
          const isSkip = options.isSkip
          const url = this.$api.login_mbindingInvitationCode
          const params = {
            code: isSkip ? uni.getStorageSync('default_invite_code') : this.form.inviteCode,
            user_id: uni.getStorageSync('user_id'),
          }
          uni.showLoading({ title: '加载中...', mask: true })
          const { data: res } = await this.$postJSON(url, params)
          uni.hideLoading()
          if (res && res.errno == 0) {

            const { data: { flag, info, token, sex, nickname, up_user_id } } = res.rst || {}
            if (flag == 1) { // 绑定成功
              uni.setStorageSync('token', token || '')
              uni.setStorageSync('sex', sex)
              uni.setStorageSync('nickname', nickname || '')
              uni.setStorageSync('up_user_id', up_user_id || '')

              await app.handleGetUserInfo() // 获取用户信息

              uni.showToast({ title: '登录成功', icon: 'none' })
              setTimeout(() => {
                // $router.switchTab({
                //   url: '/pages/home/home'
                // })
				wx.navigateBack({delta: 2});
				uni.setStorageSync('loginPageBack',true)
              }, 1000);
            } else { // 绑定失败
              this.$u.toast(info || '操作失败');
            }
          } else {
            this.$u.toast(res.err || '操作失败')
          }
        } catch (error) {
          console.log('error => ', error)
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
.page-wrap {
  position: relative;
  min-height: 100vh;
  padding: 0 30rpx;
  .tips-wrap {
    margin-top: 60rpx;
    .title {
      font-size: 48rpx;
      color: #333;
    }
    .tips {
      margin-top: 30rpx;
      font-size: 26rpx;
      color: #666;
      .link {
        color: #51A6EF;
      }
    }
  }
  .form-wrap {
    margin-top: 100rpx;
    .form-item {
      display: flex;
      align-items: center;
      border-bottom: 2rpx solid #eee;
      padding: 20rpx 0;
      .item-img {
        margin-right: 30rpx;
        width: 45rpx;
        height: 45rpx;
        vertical-align: middle;
      }
      .item-label {
        width: 120rpx;
        font-size: 30rpx;
        color: #333;
      }
      .item-input {
        flex: 1;
        /deep/ .u-input__input {
          font-size: 30rpx;
          color: #333;
        }
      }
      .btn-text {
        padding: 0 10rpx 0 20rpx;
        color: #51A6EF;
      }
    }
  }
  .footer-wrap {
    margin-top: 100rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    .btn {
      margin-bottom: 40rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32rpx;
      width: 600rpx;
      height: 84rpx;
      border-radius: 42rpx;
      color: #999;
      background: #fff;
      border: 2rpx solid #999;
      &.disabled {
        color: #fff;
        background: #D0D0D0;
        border: none;
      }
      &.on {
        color: #fff;
        background: linear-gradient(270deg, #FF4040 0%, #FF7E40 100%);
        border: none;
      }
    }
    .footer-tips {
      font-size: 28rpx;
      color: #ccc;
    }
  }
}
</style>