recycle-front/pages/subcomponent/promo-qrcode.vue

<template>
  <view class="promo-modal-page">
    <!-- 顶部导航栏 -->
    <view class="nav-bar" :style="{height: navBarTotalHeight + 'px', paddingTop: statusBarHeight + 'px'}">
      <view class="nav-bar-inner">
        <view class="back-icon" @tap="navigateBack">
          <uni-icons type="left" size="22" color="#222" />
        </view>
        <view class="nav-bar-title">推广链接</view>
        <view class="nav-bar-right">
          <uni-icons type="more-filled" size="22" color="#222" />
        </view>
      </view>
    </view>
    <!-- 用户信息 -->
    <view class="user-info-modal" :style="{ marginTop: navBarTotalHeight + 'px' }">
      <view class="avatar-frame">
        <image class="avatar-img" :src="userInfo.avatar" mode="aspectFill" />
      </view>
      <view class="nickname">{{userInfo.name}}</view>
    </view>
    <!-- 二维码区 -->
    <view class="qrcode-modal-section">
      <image class="qrcode-img" :src="qrcodeUrl" mode="aspectFit" />
      <view class="invite-code">邀请码：{{inviteCode}}</view>
    </view>
    <!-- 底部按钮 -->
    <view class="bottom-btns-modal">
      <button class="btn gray">分享给好友</button>
      <button class="btn green">保存到本地</button>
    </view>
  </view>
</template>

<script>
import pullRefreshMixin from '@/pages/mixins/pullRefreshMixin.js'

export default {
  mixins: [pullRefreshMixin],
  data() {
    return {
      statusBarHeight: 0,
      navBarHeight: 44,
      navBarTotalHeight: 44,
      userInfo: {
        avatar: '/static/avatar.png',
        name: '战斗世界',
      },
      qrcodeUrl: '/static/qrcode.png',
      inviteCode: '888888',
    }
  },
  onLoad() {
    const sysInfo = uni.getSystemInfoSync()
    this.statusBarHeight = sysInfo.statusBarHeight
    this.navBarHeight = 44
    this.navBarTotalHeight = this.statusBarHeight + this.navBarHeight
  },
  methods: {
    async onRefresh() {
      // 模拟刷新数据
      await new Promise(resolve => setTimeout(resolve, 1000))
      this.stopPullRefresh()
    },
    navigateBack() {
      uni.navigateBack()
    },
  }
}
</script>

<style lang="scss" scoped>
.promo-modal-page {
  min-height: 100vh;
  background: linear-gradient(to bottom, #f6fff2 0%, #fff 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  .nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    width: 100vw;
    background: linear-gradient(to right, #b2f08d 0%, #39e9d2 100%);
    box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.03);
    .nav-bar-inner {
      display: flex;
      align-items: center;
      height: 44px;
      width: 100vw;
      position: relative;
    }
    .back-icon, .nav-bar-right {
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 0;
    }
    .back-icon { left: 0; }
    .nav-bar-right { right: 0; }
    .nav-bar-title {
      flex: 1;
      text-align: center;
      font-size: 36rpx;
      font-weight: bold;
      color: #222;
      letter-spacing: 2rpx;
      line-height: 44px;
    }
  }
  .user-info-modal {
    display: flex;
    flex-direction: column;
    align-items: center;
    .avatar-frame {
      width: 104rpx;
      height: 104rpx;
      border-radius: 10rpx;
      overflow: hidden;
      background: #f2f2f2;
      box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.10);
      .avatar-img {
        width: 104rpx;
        height: 104rpx;
        object-fit: cover;
        display: block;
      }
    }
    .nickname {
      margin-top: 24rpx;
      font-size: 32rpx;
      font-weight: bold;
      color: #222;
      text-align: center;
    }
  }
  .qrcode-modal-section {
    margin-top: 48rpx;
    width: 80vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    .qrcode-img {
      width: 80vw;
      height: 80vw;
      max-width: 480rpx;
      max-height: 480rpx;
      background: #fff;
      border-radius: 24rpx;
      box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08);
    }
    .invite-code {
      margin-top: 32rpx;
      font-size: 30rpx;
      color: #222;
      font-weight: bold;
      text-align: center;
    }
  }
  .bottom-btns-modal {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    padding: 24rpx 32rpx calc(env(safe-area-inset-bottom) + 24rpx) 32rpx;
    background: #fff;
    z-index: 100;
    .btn {
      flex: 1;
      height: 88rpx;
      border-radius: 44rpx;
      font-size: 32rpx;
      font-weight: bold;
      margin: 0 12rpx;
      border: none;
      &.gray {
        background: linear-gradient(90deg, #f7f7f7, #f2f2f2);
        color: #888;
      }
      &.green {
        background: linear-gradient(90deg, #b2f08d, #39e9d2);
        color: #fff;
      }
    }
  }
}
</style>