HomeLease/pages/agents/requestAgent.vue

<template>
  <view class="agents-page">
    <!-- 头部区域 -->
    <custom-nav-bar :fill="false" :show-back="true" background-color="transparent" title="" />
    <view class="header">
      <image :src="commonEnum.INVITE" class="agent-background" mode="aspectFill"></image>
    </view>

    <!-- 主要内容区域 -->
    <view class="main-content">
      <view class="qrcode-container">
        <uv-qrcode :options="qrcodeOptions" :value="qrcodeValue" size="500rpx"></uv-qrcode>
      </view>

      <view class="button-container">
        <button class="action-button" @click="copyQrcodeValue">
          <text class="button-text">复制邀请链接</text>
        </button>

        <!--        <button class="action-button" @click="sendToFriends">-->
        <!--          <text class="button-text">保存分享海报</text>-->
        <!--          <text class="button-sub-text">发给好友扫码</text>-->
        <!--        </button>-->
      </view>
    </view>
  </view>
</template>

<script>
import commonEnum from '../../enum/commonEnum'
import UvQrcode from '../../uni_modules/uv-qrcode/components/uv-qrcode/uv-qrcode.vue'
import { getLocalUserId } from '../../api/user/user.js'
import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'

onShareAppMessage(e => {
  return {}
})

export default {
  name: 'AgentsPage',
  components: { UvQrcode },
  data() {
    return {
      qrcodeValue: '',
      qrcodeOptions: {
        errorCorrectLevel: 'Q',
        margin: 10,
        areaColor: '#fff',
      },
    }
  },
  computed: {
    commonEnum() {
      return commonEnum
    },
  },
  onLoad() {
    // 页面加载时获取本地存储的用户ID作为二维码内容
    this.initQrcodeValue()
  },
  methods: {
    // 复制二维码链接
    copyQrcodeValue() {
      uni.setClipboardData({
        data: this.qrcodeValue,
        success: () => {
          uni.showToast({
            title: '链接已复制',
            icon: 'success',
          })
          console.log('复制成功:', this.qrcodeValue)
        },
        fail: err => {
          console.error('复制失败:', err)
          uni.showToast({
            title: '复制失败',
            icon: 'none',
          })
        },
      })
    },
    // 初始化二维码内容
    initQrcodeValue() {
      const userId = getLocalUserId()
      if (userId) {
        // 构建包含登录页面链接和用户ID的二维码内容
        this.qrcodeValue = `https://wx.ccttiot.com/cf/i/?agentId=${userId}`
        console.log('二维码内容:', this.qrcodeValue)
      } else {
        // 如果没有用户ID，使用默认值
        this.qrcodeValue = 'https://wx.ccttiot.com/cf/i?/agentId=123456'
        console.warn('未找到用户ID，使用默认二维码内容')
      }
    },

    // 保存分享海报
    saveAndSharePoster() {
      uni.showToast({
        title: '保存分享海报功能',
        icon: 'none',
      })
      // TODO: 实现保存分享海报功能
      console.log('保存分享海报')
    },

    // 发送给好友扫码
    sendToFriends() {
      uni.showToast({
        title: '发送给好友扫码功能',
        icon: 'none',
      })
      // TODO: 实现发送给好友扫码功能
      console.log('发送给好友扫码')
    },
  },
}
</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;

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

  .button-container {
    display: flex;
    gap: 30rpx;
    width: 100%;
    justify-content: center;
  }

  .action-button {
    flex: 1;
    max-width: 280rpx;
    height: 80rpx;
    background: white;
    border: 2rpx solid #ff6b35;
    border-radius: 50rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20rpx;
    box-shadow: 0 4rpx 12rpx rgba(255, 107, 53, 0.2);

    .button-text {
      color: #ff6b35;
      font-size: 28rpx;
      font-weight: 500;
      line-height: 1.2;
    }

    .button-sub-text {
      color: #ff6b35;
      font-size: 20rpx;
      opacity: 0.8;
      margin-top: 4rpx;
    }
  }
}
</style>