<template>
  <view class="agents-page">
    <!-- 头部区域 -->
    <custom-nav-bar3 title=""></custom-nav-bar3>
    <view class="header">
      <image :src="commonEnum.INVITE" class="agent-background" mode="aspectFill"></image>
    </view>

    <!-- 主要内容区域 -->
    <view class="main-content">
      <view class="qrcode-container">
        <uv-qrcode
          ref="qrcode"
          :options="options"
          :value="value"
          canvas-id="qrcode"
          size="300rpx"
        ></uv-qrcode>
      </view>
    </view>
  </view>
</template>

<script>
import commonEnum from '../../enum/commonEnum'
import UvQrcode from '../../uni_modules/uv-qrcode/components/uv-qrcode/uv-qrcode.vue'

export default {
  name: 'AgentsPage',
  components: { UvQrcode },
  data() {
    return {
      inviteCode: '1114514',
      value: '123456',
      options: {
        errorCorrectLevel: 'Q',
        margin: 10,
        areaColor: '#fff',
      },
    }
  },
  computed: {
    commonEnum() {
      return commonEnum
    },
  },
  onLoad() {
    // 页面加载时的逻辑
  },
  methods: {
    // 页面方法
  },
}
</script>

<style lang="scss" scoped>
.agents-page {
  position: relative;
  background: #fbe4ba;
  min-height: 100vh;
}

// 头部区域
.header {
  position: relative;
  background: #fedfcd;

  .agent-background {
    position: relative;
    width: 750rpx;
  }
}

// 主要内容区域
.main-content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  top: -25rpx;
  background: #ffffff;
  border-radius: 40rpx;
  margin: 0 30rpx;
  padding: 40rpx;
  height: 1050rpx;
  border: red solid 1rpx;

  .qrcode-container {
    padding: 40rpx;
    background: white;
    border-radius: 20rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
    margin-bottom: 60rpx;
  }
}
</style>
