ufutx-love-h5-public/src/views/activity/activityPoster.vue

<template>
  <div class="poster-generator-container">

    <div class="input-card">
      <div class="card-header">
        <span class="header-icon">📋</span>
        <span class="header-title">选择活动</span>
      </div>
      <div class="activity-selector" @click="showActivityPicker = true">
        <div class="selector-label">活动名称</div>
        <div class="selector-value" :class="{ placeholder: !selectedActivityTitle }">
          <span class="selector-text">{{ selectedActivityTitle || '点击选择活动' }}</span>
        </div>
        <div class="selector-arrow">
          <van-icon name="arrow" />
        </div>
      </div>
    </div>

    <!-- 活动选择弹窗 -->
    <van-popup v-model:show="showActivityPicker" position="bottom" round class="activity-popup">
      <div class="activity-picker-header">
        <span class="cancel-btn" @click="showActivityPicker = false">取消</span>
        <span class="title">选择活动</span>
        <span class="confirm-btn" @click="showActivityPicker = false">确定</span>
      </div>
      <div class="scroll-wrapper">
        <van-list v-model:loading="listLoading" :finished="listFinished" finished-text="没有更多活动了"
                  @load="onLoadMore">
          <div v-for="item in activityList" :key="item.id" class="activity-item"
               :class="{ active: selectedActivity?.id === item.id }" @click="onSelectActivity(item)">
            <div class="activity-title">{{ item.title }}</div>
            <div class="activity-time">{{ item.Subtitle }} | {{ formatDateToShow(item.end_time) }}</div>
          </div>
        </van-list>
      </div>
    </van-popup>

    <!-- 隐藏海报区域（样式保持原样） -->
    <div ref="posterRef" class="poster-wrapper hidden-poster">
      <div class="poster-card">
        <div class="poster-content">
          <img src="https://images.health.ufutx.com/202604/13/8fa1b3080a60f97ef3f75e1370a6217c.jpeg" alt="海报背景图" />
          <div class="poster-content-wrapper">
            <div class="poster-title">
              <p class="poster-title-text">{{ selectedActivity?.Subtitle || '河南·襄城站' }}</p>
            </div>
            <div class="sponsor-name">
              <p class="name">主办：{{ sponsorName }}</p>
            </div>

            <div class="poster-qrcode">
              <canvas ref="qrcodeCanvas" class="poster-qrcode-image"></canvas>
            </div>

            <div class="poster-time-wrap">
              <div class="poster-date">{{ formatDateToChinese(selectedActivity?.end_time) }}</div>
              <div class="poster-time">
                <span class="start-time">{{ formatTime(selectedActivity?.start_time) }}</span>
                <span class="end-time">{{ formatTime(selectedActivity?.end_time) }}</span>
              </div>
            </div>
            <div class="poster-address">
              <div class="_text-warp">
                <div class="_title">活动地点：</div>
                <div class="_text">{{ selectedActivity?.address || '广东省深圳市南山区阳光科创' }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 操作按钮组 -->
    <div class="btn-group">
      <button class="btn btn-primary" :disabled="isGenerating" @click="generatePoster">
        <van-loading v-if="isGenerating" size="20px" color="#fff" />
        <span v-else>✨ 生成海报</span>
      </button>
      <button v-if="posterImg && !isWeChatEnv" class="btn btn-secondary" @click="downloadPoster"> 📥 下载海报</button>
    </div>

    <!-- 生成预览区域 -->
    <div v-if="posterImg" class="generated-poster-preview">
      <div class="preview-header">
        <div class="preview-icon">🎉</div>
        <h4 class="preview-title">{{ isWeChatEnv ? '长按图片保存到手机' : '点击图片预览大图' }}</h4>
      </div>
      <img :src="posterImg" alt="生成的海报" class="preview-img" @click="showImagePreviewFn(posterImg)" />
    </div>
  </div>
</template>

<script setup>
import { nextTick, onMounted, ref, watch } from 'vue'
import html2canvas from 'html2canvas'
import { showDialog, showImagePreview, showLoadingToast, showToast } from 'vant'
import requestApp from '@/utils/requestApp'
import QRCode from 'qrcode'
import { weXinShare } from '@/plugins/wxShare'

// 🔥 主办方：从活动接口自动获取，无需手动选择
const sponsorName = ref('')

const posterRef = ref(null)
const posterImg = ref('')
const isGenerating = ref(false)
const isWeChatEnv = ref(false)
const qrcodeCanvas = ref(null)

const activityList = ref([])
const selectedActivity = ref(null)
const selectedActivityTitle = ref('')
const showActivityPicker = ref(false)
const listLoading = ref(false)
const listFinished = ref(true)
const openId = ref('')

// 监听选中的活动：自动填充主办方 + 生成二维码
watch(selectedActivity, async (newVal) => {
  if (newVal && newVal.id && qrcodeCanvas.value) {
    // 自动从活动数据中读取主办方
    sponsorName.value = newVal.sponsor || ''
    openId.value = localStorage.getItem('openid')
    const link = `https://love.ufutx.cn/api/official/live/wechat/FamilyAuth?merchant_id=44&serve_tab=&from_openid=${openId.value}&url=https%3A%2F%2Flove.ufutx.cn%2Fpu%2F%23%2FactivityDetails%2F${newVal.id}`
    await QRCode.toCanvas(qrcodeCanvas.value, link, {
      width: 76,
      margin: 1,
      color: { dark: '#000000', light: '#ffffff' }
    })
  }
})

const getData = () => {
  listLoading.value = true
  weXinShare('https://image.fulllinkai.com/202310/28/88e931a50ec0a8094fb46191b389457e.png', `https://health.ufutx.cn/go_html/role_apply#/activityPoster`, '活动海报生成「saas」', '查看详情')
  requestApp({ url: '/sh5/uftx/community/activity/list', method: 'get' })
    .then((res) => {
      if (res.code === 0 && Array.isArray(res.data)) {
        activityList.value = res.data
        // 默认选中第一个活动，自动填充主办方
        // if (res.data.length > 0) {
        //   onSelectActivity(res.data[0]);
        // }
      } else {
        showToast('活动列表获取失败')
      }
    })
    .catch((err) => {
      console.error('获取活动列表失败：', err)
      showToast('活动列表获取失败，请重试')
    })
    .finally(() => {
      listLoading.value = false
      listFinished.value = true
    })
}

const detectWeChatEnv = () => {
  const userAgent = navigator.userAgent.toLowerCase()
  isWeChatEnv.value = /micromessenger/.test(userAgent)
}

// 选择活动：自动填充主办方
const onSelectActivity = (item) => {
  selectedActivity.value = item
  selectedActivityTitle.value = item.title
  showActivityPicker.value = false
  generatePoster()
}

const onLoadMore = () => {
  listLoading.value = false
  listFinished.value = true
}

const formatDateToShow = (timeStr) => {
  if (!timeStr) return ''
  const date = new Date(timeStr)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  return `${year}年${month}月${day}日`
}

const formatDateToChinese = (timeStr) => {
  if (!timeStr) {
    const now = new Date()
    const year = now.getFullYear()
    const month = String(now.getMonth() + 1).padStart(2, '0')
    const day = String(now.getDate()).padStart(2, '0')
    return `${year}/${month}/${day}`
  }
  const [datePart] = timeStr.split(' ')
  const [year, month, day] = datePart.split('-')
  return `${year}/${month}/${day}`
}

const formatTime = (timeStr) => {
  if (!timeStr) return '14:00'
  const [, timePart] = timeStr.split(' ')
  return timePart.slice(0, 5)
}

const showImagePreviewFn = (img) => {
  return showImagePreview([img])
}

const generatePoster = async () => {
  try {
    if (!selectedActivity.value) {
      showDialog({ message: '请先选择活动！' })
      return
    }

    isGenerating.value = true
    const toast = showLoadingToast({
      message: '海报生成中...',
      forbidClick: true,
      duration: 0
    })

    await nextTick()
    const posterElement = posterRef.value
    if (!posterElement) {
      isGenerating.value = false
      toast.close()
      return
    }

    const canvas = await html2canvas(posterElement, {
      useCORS: true,
      scale: 3,
      backgroundColor: null,
      logging: false,
      imageTimeout: 10000
    })

    posterImg.value = canvas.toDataURL('image/png', 1.0)
    toast.close()
    showToast({ message: '海报生成成功！', icon: 'success' })
  } catch (err) {
    console.error('生成海报失败：', err)
    showToast({ message: '生成海报失败，请重试！', icon: 'fail' })
  } finally {
    isGenerating.value = false
  }
}

function downloadPoster() {
  if (!posterImg.value) return
  const link = document.createElement('a')
  link.href = posterImg.value
  // 修复文件名括号闭合、正则多余/的问题
  const fileName = `[${selectedActivity.value?.title || '活动'}]海报.png`
  link.download = fileName.replace(/[\\/:*?"<>|]/g, '')
  link.click()
  URL.revokeObjectURL(link.href)
}

onMounted(() => {
  detectWeChatEnv()
  getData()
})
</script>

<style scoped>
img {
  display: inline-block !important;
  max-width: 100%;
  max-height: 100%;
}

.poster-wrapper {
  width: 375px;
  height: 788px;
  overflow: hidden;
}

.hidden-poster {
  position: absolute;
  left: -9999px;
  top: -9999px;
  z-index: -1;
  pointer-events: none;
}

.poster-card {
  width: 100%;
  height: 100%;
  color: #ffffff;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #333333;
  position: relative;
}

.poster-content img {
  object-fit: cover;
}

.poster-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
}

.poster-title {
  position: absolute;
  left: 0;
  top: 262px;
  width: 100%;
  letter-spacing: 4px;
  font-size: 20px;
  font-weight: 400;
  display: flex;
  justify-content: center;
  padding: 0;
}

.poster-title .poster-title-text {
  text-align: center;
  width: 300px;
  color: #0d2f73;
  line-height: 1.6;
  padding: 2px 0;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sponsor-name {
  position: absolute;
  left: 0;
  top: 446px;
  width: 100%;
  letter-spacing: 0.8px;
  display: flex;
  justify-content: center;
  padding: 0;
}

.sponsor-name .name {
  font-size: 14px;
  color: #0e2965;
}

.poster-qrcode {
  position: absolute;
  left: 0;
  top: 532px;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0;
}

.poster-qrcode-image {
  width: 76px;
  height: 76px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  background-color: #ffffff;
  padding: 3px;
}

.poster-time-wrap {
  position: absolute;
  left: 0;
  top: 630px;
  width: 100%;
  text-align: center;
  justify-content: center;
  letter-spacing: 1px;
}

.poster-date {
  font-size: 24px;
  font-weight: 500;
  color: #0e2866;
}

.poster-time {
  font-weight: 400;
  font-size: 22px;
  color: #0e2866;
  margin-top: 14px;
}

.start-time {
  margin-right: 30px;
}

.poster-address {
  position: absolute;
  left: 0;
  top: 720px;
  width: 100%;
  max-height: 50px;
  display: flex;
  text-align: center;
  justify-content: center;
  letter-spacing: 1px;
}

.poster-address ._text-warp {
  max-width: 80%;
  font-size: 14px;
  color: #0f2967;
  font-weight: 500;
  background: white;
  border-radius: 32px;
  padding: 4px 16px;
  display: flex;
  justify-content: space-between;
}

.poster-address ._title {
  width: 76px;
  flex-shrink: 0;
}

.poster-address ._text {
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ========== 以下为美化后的外部样式（选择器、按钮、预览区域） ========== */
.poster-generator-container {
  min-height: 100vh;
  padding: 20px 16px 40px;
  background: linear-gradient(135deg, #f5f7fa 0%, #e9eef3 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* 输入卡片 */
.input-card {
  width: 100%;
  max-width: 400px;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}

.input-card:hover {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px 0;
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
}

.header-icon {
  font-size: 20px;
}

.header-title {
  background: linear-gradient(135deg, #18ca6e, #0f9d58);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.activity-selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px 12px 20px;
  cursor: pointer;
  transition: background 0.2s;
}

.activity-selector:active {
  background: #f8fafc;
}

.selector-label {
  font-size: 14px;
  color: #6b7280;
  font-weight: 500;
  flex-shrink: 0;
}

.selector-value {
  flex: 1;
  margin: 0 12px;
  font-size: 15px;
  font-weight: 500;
  color: #1f2937;
  text-align: right;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 42px;
}

.selector-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  max-width: 100%;
  line-height: 1.4;
}

.selector-value.placeholder .selector-text {
  color: #9ca3af;
  font-weight: 400;
}

.selector-arrow {
  color: #9ca3af;
  font-size: 14px;
  flex-shrink: 0;
}

/* 弹窗样式 */
.activity-popup {
  height: 70vh;
  display: flex;
  flex-direction: column;
  border-radius: 20px 20px 0 0;
  overflow: hidden;
}

.activity-picker-header {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
  background: #fff;
}

.cancel-btn {
  font-size: 15px;
  color: #9ca3af;
  cursor: pointer;
}

.title {
  font-size: 17px;
  font-weight: 600;
  color: #1f2937;
}

.confirm-btn {
  font-size: 15px;
  color: #18ca6e;
  font-weight: 600;
  cursor: pointer;
}

.scroll-wrapper {
  flex: 1;
  overflow-y: auto;
}

.activity-item {
  padding: 16px 20px;
  border-bottom: 1px solid #f5f5f5;
  cursor: pointer;
  transition: background 0.2s;
}

.activity-item:active {
  background: #f8fafc;
}

.activity-item.active {
  background: #f0fdf4;
  border-left: 3px solid #18ca6e;
}

.activity-title {
  font-size: 15px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 6px;
}

.activity-time {
  font-size: 12px;
  color: #9ca3af;
}

/* 按钮组 */
.btn-group {
  display: flex;
  gap: 16px;
  width: 100%;
  max-width: 400px;
}

.btn {
  flex: 1;
  padding: 14px 20px;
  border: none;
  border-radius: 60px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-primary {
  background: linear-gradient(135deg, #18ca6e, #0f9d58);
  color: white;
  box-shadow: 0 4px 12px rgba(24, 202, 110, 0.3);
}

.btn-primary:active {
  transform: scale(0.97);
  box-shadow: 0 2px 6px rgba(24, 202, 110, 0.3);
}

.btn-primary:disabled {
  opacity: 0.7;
  transform: none;
  cursor: not-allowed;
}

.btn-secondary {
  background: #2c3e50;
  color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.btn-secondary:active {
  transform: scale(0.97);
}

/* 预览区域 */
.generated-poster-preview {
  width: 100%;
  max-width: 400px;
  background: white;
  border-radius: 28px;
  padding: 20px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
}

.preview-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}

.preview-icon {
  font-size: 22px;
}

.preview-title {
  font-size: 15px;
  font-weight: 500;
  color: #374151;
  margin: 0;
}

.preview-img {
  width: 100%;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.2s;
}

.preview-img:active {
  transform: scale(0.99);
}

/* 适配小屏幕 */
@media (max-width: 420px) {
  .poster-generator-container {
    padding: 16px 12px 32px;
  }

  .btn {
    padding: 12px 16px;
    font-size: 14px;
  }
}
</style>