<template>
  <view class="box">
    <!-- <uni-popup ref="popup" type="bottom"> -->
    <view class="header">
      <image :src="$img1('common/logo.png')"></image>
    </view>
    <view class="content">
      <view>申请获取以下权限</view>
      <text>获得您的手机号</text>
    </view>
    <!-- type='primary' -->
    <button
      class="bottom"
      withCredentials="true"
      lang="zh_CN"
      open-type="getPhoneNumber"
      @getphonenumber="getPhoneNumber"
    >
      授权手机号
    </button>
    <view class="quxiao" @click="back()">取消</view>
    <!-- </uni-popup> -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      z_imgPath: this.$z_img2
    }
  },
  created() {
    //默认加载
    // this.login();
  },
  methods: {
    back() {
      uni.navigateBack()
    },
    getPhoneNumber(e) {
      // console.log(e)
      let that = this
      uni.login({
        success(res) {
          // console.log(res)
          uni.checkSession({
            success() {
              that.req({
                url: 'login_bind_mobile',
                data: {
                  code: e.detail.code,
                  encryptedData: e.detail.encryptedData,
                  iv: e.detail.iv
                },
                success(res) {
                  if (res.status == 1) {
                    // uni.setStorageSync('token', res.data)
                    uni.showToast({
                      title: '绑定成功~',
                      icon: 'success',
                      success() {
                        setTimeout(() => {
                          uni.navigateBack()
                        }, 1000)
                      }
                    })
                  }
                }
              })
            }
          })
        }
      })
    }
  }
}
</script>

<style>
/* .box {
		position: fixed;
		bottom: 0;
	} */

.header {
  margin: 90rpx 0 90rpx 50rpx;
  border-bottom: 1px solid #ccc;
  text-align: center;
  width: 650rpx;
  height: 300rpx;
  line-height: 450rpx;
}

.header image {
  width: 200rpx;
  height: 200rpx;
}

.content {
  margin-left: 50rpx;
  margin-bottom: 90rpx;
  color: #fff;
}

.content text {
  display: block;
  margin-top: 40rpx;
}

.bottom {
  /* border-radius: 80rpx; */
  margin: 70rpx 50rpx;
  font-size: 35rpx;
}

button::after {
  border: none;
}

button {
  background: #AD77EF;
  font-size: 36rpx;
  font-family: zihun152hao-jijiachaojihei;
  font-weight: 400;
  color: #ffffff;
  border-radius: 80rpx;
}

.quxiao {
  background: linear-gradient(90deg, #2dcbff 0%, #ff95fb 100%);
  filter: grayscale(1);
  width: 650rpx;
  height: 78rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 80rpx;
  margin: auto;
  font-size: 36rpx;
  font-family: zihun152hao-jijiachaojihei;
  font-weight: 400;
  color: #ffffff;
}
</style>
