<template>
  <view class="container">
    <unitv-page id="loginPage" ref="loginPage" class="loginPage" :show="true">
      <app-header :is-show-user-info="false" />
      <view class="main_title">
        <text>登录可享</text>
        <text>3</text>
        <text>大权益</text>
      </view>
      <view class="rights_and_interests">
        <view class="item">
          <view class="icon">
            <image src="/static/1080P.png" style="width: 17rpx; height: 9rpx" />
          </view>
          <view class="title">尊享1080P画质</view>
        </view>
        <view class="item">
          <view class="icon">
            <image
              src="/static/w_yunduan.png"
              style="width: 16rpx; height: 11rpx"
            />
          </view>
          <view class="title">同步云端观看历史</view>
        </view>
        <view class="item">
          <view class="icon">
            <image src="/static/fuli.png" style="width: 12rpx; height: 12rpx" />
          </view>
          <view class="title">福利活动享不停</view>
        </view>
      </view>
      <view class="flex">
        <view class="login_methods">
          <view class="item">
            <view class="icon">
              <image
                src="/static/scan_login.png"
                style="width: 33rpx; height: 33rpx"
              />
            </view>
            <view class="right">
              <view class="title">扫码登录</view>
              <view class="subtitle">使用手机扫码授权</view>
            </view>
          </view>
        </view>
        <view class="qrcode">
          <view class="image">
            <canvas
              id="qrcode"
              canvas-id="qrcode"
              :style="{ width: canvasSize + 'px', height: canvasSize + 'px' }"
            />
          </view>
        </view>
      </view>
    </unitv-page>
  </view>
</template>

<script>
import UQRCode from "uqrcodejs";

export default {
  data() {
    return {
      canvasSize: uni.upx2px(170),
    };
  },
  onShow() {
    if (this.$refs.loginPage) {
      this.$refs.loginPage.showPage();
    }
  },
  onReady() {
    const qr = new UQRCode();
    qr.data = "qrcode_url";
    qr.size = this.canvasSize;
    qr.make();
    qr.canvasContext = uni.createCanvasContext("qrcode");
    qr.drawCanvas();
  },
};
</script>

<style scoped lang="scss">
.container {
  .main_title {
    margin-top: 10rpx;
    font-size: 30rpx;

    text:nth-child(2) {
      color: rgba(0, 204, 255, 1);
      padding: 0 4rpx;
    }
  }

  .rights_and_interests {
    margin-top: 21rpx;
    display: flex;
    align-items: center;

    .item {
      display: flex;
      align-items: center;
      margin-left: 18rpx;

      &:first-child {
        margin-left: 0;
      }

      .title {
        margin-left: 3rpx;
        font-size: 12rpx;
      }
    }
  }

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

    .login_methods {
      margin-top: 27rpx;

      .item {
        width: 359rpx;
        height: 72rpx;
        background-image: url("/static/scan_login_bg.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        display: flex;
        align-items: center;
        padding-left: 12rpx;

        .right {
          margin-left: 14rpx;

          .title {
            font-size: 14rpx;
          }

          .subtitle {
            padding-top: 9rpx;
            font-size: 9rpx;
            color: #ccc;
          }
        }
      }
    }

    .qrcode {
      background-color: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.17);
      border-radius: 4px;
      padding: 12rpx;

      .image {
        background-color: #fff;
        padding: 12rpx;
      }
    }
  }
}
</style>
