<template>
  <view class="container">
    <view class="uni-popup__wrapper-box">
      <view class="login-popup">
        <image class="login-img" :src="$config('logoImg')" mode="aspectFit" />
        <view class="login-title">
          <text>授权登录</text>
        </view>
        <!-- #ifdef MP-ALIPAY -->
        <button
          class="goods-bottom-buy"
          :open-type="isSelect ? 'getAuthorize' : ''"
          scope="phoneNumber"
          @getAuthorize="getAlipayPhoneNumber"
          @click="loginSelect"
        >
          {{ loginBtnText }}
        </button>
        <!-- #endif -->
        <!-- #ifndef MP-ALIPAY -->
        <button
          class="goods-bottom-buy"
          :open-type="isSelect ? 'getPhoneNumber' : ''"
          @getphonenumber="getPhoneNumber"
          @click="loginSelect"
        >
          {{ loginBtnText }}
        </button>
        <!-- #endif -->
        <view class="login_agreement">
          <view class="login_radio">
            <radio color="#EE0A24" :checked="isSelect" @click="select" />
          </view>
          <view class="login_text">
            <text>我已阅读并同意</text>
            <text class="NTR_red" @click="navTo($config('zhuCeUrl'))">《注册协议》</text>
            <text>及</text>
            <text class="NTR_red" @click="navTo($config('yinSiUrl'))">《隐私协议》</text></view
          >
        </view>
      </view>
    </view>
    <user-info-popup
      ref="authPopup"
      @get-user-info="handleUserInfo"
      @get-user-close="handleUserClose"
    />
    <subscribeDialog
      ref="subscribe-dialog"
      @confirm="subscribeConfirm"
      @cancel="subscribeConfirm"
    />
  </view>
</template>

<script>
import subscribeDialog from "@/components/subscribeDialog";
import userInfoPopup from "@/components/userInfoPopup";
import loginMixin from "@/mixins/login.mixin";
export default {
  name: "Login",
  components: {
    subscribeDialog,
    userInfoPopup
  },
  mixins: [loginMixin],
  data() {
    return {
      loginType: 0, // loginType: 1~ 登录弹窗，0～登录页
      isSelect: false
    };
  },
  methods: {
    loginSelect() {
      if (!this.isSelect) {
        this.$api.msg("请勾选下方协议后登录");
        return;
      }
    },
    navTo(jumpUrl) {
      uni.navigateTo({
        url: `/pages/webview/webview?url=${encodeURIComponent(JSON.stringify(jumpUrl))}`
      });
    },
    select() {
      this.isSelect = !this.isSelect;
    },
    subscribeConfirm() {
      return uni.navigateBack();
    }
  }
};
</script>
<style lang="scss" scoped>
.container {
  background-color: #f7f8fa;
  width: 100vw;
  height: 100vh;
  padding-top: 60rpx;
}
.login-title {
  position: relative;
  margin-bottom: 30rpx;
  &::before {
    content: "";
    width: 100%;
    height: 1rpx;
    display: block;
    background: #ebebeb;
  }
  text {
    width: 200rpx;
    margin: 0 auto;
    display: block;
    text-align: center;
    position: relative;
    top: -22rpx;
    background: #fff;
    font-size: 28rpx;
    color: #999;
  }
}
.goods-bottom-buy {
  width: 526rpx;
  height: 80rpx;
  line-height: 80rpx;
  border: none;
  color: $white;
  background-image: $background-primary;
  border-radius: $border-radius-2;
  margin: 0 auto;
}
.login-img {
  width: 480rpx;
  height: 228rpx;
  margin: 100rpx auto;
  display: block;
}
.login-popup {
  padding: 20rpx 50rpx;
}

.uni-popup__wrapper-box {
  // width: 622rpx;
  // height: 694rpx;
  margin: 0 24rpx;
  display: block;
  position: relative;
  overflow: hidden;
  background-color: #fff;
  border-radius: 10rpx;
}
.login {
  &_agreement {
    text-align: center;
    font-size: 28rpx;
    margin-top: 42rpx;
    margin-bottom: 74rpx;
    color: #666666;
    position: relative;

    .NTR_red {
      color: #ec1500;
    }
  }
  &_radio {
    position: absolute;
    left: 0;
    top: -3rpx;
    radio {
      transform: scale(0.7);
    }
  }
  &_text {
    padding-left: 44rpx;
  }
}
</style>
