ai_uniapp_v2/pages/my/wechat.vue

<template>
  <view class="wrap">
    <view class="hero-card">
      <text class="eyebrow">AIONLINE 助手</text>
      <text class="hero-title">关注公众号</text>
      <text class="hero-desc">分享 AI 资讯与使用技巧，并定期发放福利。</text>
    </view>

    <view class="qr-card">
      <image
        class="qr-img"
        :src="qrUrl"
        mode="aspectFit"
        show-menu-by-longpress
        @click="previewQr"
      />
      <text class="qr-name">AIonline助手</text>
      <view class="steps">
        <!-- 小程序 / H5 里可以长按识别，App 只能保存到相册再去微信扫 -->
        <!-- #ifdef APP-PLUS -->
        <view class="step"><text class="step-index">1</text><text class="step-text">点击二维码查看大图</text></view>
        <view class="step"><text class="step-index">2</text><text class="step-text">长按保存到相册</text></view>
        <view class="step"><text class="step-index">3</text><text class="step-text">打开微信扫一扫识别</text></view>
        <!-- #endif -->
        <!-- #ifndef APP-PLUS -->
        <view class="step"><text class="step-index">1</text><text class="step-text">长按上方二维码</text></view>
        <view class="step"><text class="step-index">2</text><text class="step-text">识别并前往图中的公众号</text></view>
        <view class="step"><text class="step-index">3</text><text class="step-text">点击关注即可</text></view>
        <!-- #endif -->
      </view>
    </view>

    <view class="tip-card">
      <text class="tip-title">关注后可以做什么</text>
      <text class="tip-line">· 第一时间收到新功能与活动通知</text>
      <text class="tip-line">· 获取 AI 绘画、写作的实用提示词</text>
      <text class="tip-line">· 参与不定期的点数与会员福利活动</text>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { commonApi } from '@/api/index.js'

// 二维码优先读配置项，便于运营换图；取不到用默认图兜底（与 PC 站页脚同一张）
const DEFAULT_QR = 'https://cdn.aionline.cc/ai/aionline_qr.jpg'
const CONFIG_KEY = 'wechat_qr'
const qrUrl = ref(DEFAULT_QR)

onLoad(() => loadQr())

async function loadQr() {
  try {
    const res = await commonApi.getConfig({ keys: CONFIG_KEY })
    const rows = Array.isArray(res.list) ? res.list : []
    const item = rows.find((it) => it.key === CONFIG_KEY)
    if (item && item.value) qrUrl.value = item.value
  } catch (e) {
    // 配置缺失就用默认图
  }
}

function previewQr() {
  uni.previewImage({ urls: [qrUrl.value] })
}
</script>

<style lang="scss" scoped>
.wrap {
  min-height: 100vh;
  padding: 24rpx 28rpx 60rpx;
  background: #f3f7fb;
  box-sizing: border-box;
}

.hero-card {
  padding: 32rpx;
  border-radius: 26rpx;
  background: linear-gradient(135deg, #1f8cff, #41b9ff);
}
.eyebrow { display: block; color: rgba(255, 255, 255, 0.75); font-size: 21rpx; font-weight: 800; }
.hero-title { display: block; margin-top: 12rpx; color: #fff; font-size: 40rpx; font-weight: 900; }
.hero-desc {
  display: block;
  margin-top: 12rpx;
  color: rgba(255, 255, 255, 0.85);
  font-size: 23rpx;
  line-height: 1.5;
}

.qr-card {
  margin-top: 22rpx;
  padding: 36rpx 28rpx 28rpx;
  border-radius: 24rpx;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.qr-img {
  width: 420rpx;
  height: 420rpx;
  border-radius: 20rpx;
  background: #f7f9fd;
}
.qr-name { margin-top: 20rpx; color: #172033; font-size: 30rpx; font-weight: 800; }

.steps { margin-top: 24rpx; width: 100%; }
.step { display: flex; align-items: center; gap: 14rpx; margin-top: 14rpx; }
.step-index {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  color: #1f8cff;
  background: #eef7ff;
  font-size: 22rpx;
  font-weight: 800;
  line-height: 40rpx;
  text-align: center;
  flex-shrink: 0;
}
.step-text { color: #5f6f83; font-size: 25rpx; }

.tip-card {
  margin-top: 22rpx;
  padding: 28rpx;
  border-radius: 24rpx;
  background: #fff;
}
.tip-title { display: block; margin-bottom: 12rpx; color: #172033; font-size: 28rpx; font-weight: 800; }
.tip-line {
  display: block;
  margin-top: 8rpx;
  color: #7f8896;
  font-size: 23rpx;
  line-height: 1.6;
}
</style>