rongshu/工作空间/产研/权益/汇丰全行/产品原型/pc-demo/scripts/capture-supplements.js

/* eslint-disable */
// B 类补截：每张图独立 try-catch
const { chromium } = require('playwright')
const path = require('path')

const BASE = 'http://localhost:8080'
const OUT_DIR = path.resolve(__dirname, '../../prd/汇丰银行/screenshots')

async function shot(page, name, full = false) {
  await page.screenshot({ path: path.join(OUT_DIR, name + '.png'), fullPage: full })
  console.log('✓', name)
}

async function safe(label, fn) {
  try { await fn() } catch (e) { console.log('✗', label, '—', e.message.split('\n')[0]) }
}

;(async () => {
  const browser = await chromium.launch({ headless: true })
  const context = await browser.newContext({ viewport: { width: 1800, height: 1125 }, deviceScaleFactor: 2 })
  const page = await context.newPage()

  await page.goto(BASE + '/#/login', { waitUntil: 'domcontentloaded' })
  await page.evaluate(() => {
    localStorage.setItem('token', 'mock-token-' + Date.now())
    localStorage.setItem('username', 'admin')
  })

  // ---- 详情页（3 张）----
  for (const item of [
    { name: 'crowd-task-view', url: '/#/customization/hsbc/crowd-tasks/view/00000120251224' },
    { name: 'rule-group-view', url: '/#/customization/hsbc/rule-groups/view/RG20260401001' },
    { name: '4-grant-campaign-view', url: '/#/customization/hsbc/equity-grant-campaign/view/P000001' }
  ]) {
    await safe(item.name, async () => {
      await page.goto(BASE + item.url, { waitUntil: 'domcontentloaded' })
      await page.waitForTimeout(1200)
      await shot(page, item.name, true)
    })
  }

  // ---- 添加权益 4 个分支 ----
  const goAdd = async () => {
    await page.goto(BASE + '/#/customization/hsbc/equity-products/add', { waitUntil: 'domcontentloaded' })
    await page.waitForTimeout(800)
  }

  await safe('2-2-equity-add-source-rongshu', async () => {
    await goAdd()
    await page.locator('label.el-radio:has-text("荣数商品")').first().click()
    await page.waitForTimeout(400)
    await shot(page, '2-2-equity-add-source-rongshu', true)
  })

  await safe('2-2-equity-add-third-list', async () => {
    await goAdd()
    await page.locator('label.el-radio:has-text("第三方")').first().click()
    await page.waitForTimeout(400)
    await shot(page, '2-2-equity-add-third-list', true)
  })

  await safe('2-2-equity-add-third-detail', async () => {
    await goAdd()
    await page.locator('label.el-radio:has-text("第三方")').first().click()
    await page.waitForTimeout(300)
    await page.locator('label.el-radio-button:has-text("有")').first().click()
    await page.waitForTimeout(400)
    await shot(page, '2-2-equity-add-third-detail', true)
  })

  await safe('2-2-equity-add-third-miniprogram', async () => {
    await goAdd()
    await page.locator('label.el-radio:has-text("第三方")').first().click()
    await page.waitForTimeout(300)
    await page.locator('.el-form-item:has-text("外部权益链接") .el-select').click()
    await page.waitForTimeout(300)
    await page.locator('.el-select-dropdown__item:has-text("小程序链接")').click()
    await page.waitForTimeout(400)
    await shot(page, '2-2-equity-add-third-miniprogram', true)
  })

  // ---- 关键弹窗 ----
  // 下架确认（权益A 已上架 + 审核通过）
  await safe('dialog-offshelf-confirm', async () => {
    await page.goto(BASE + '/#/customization/hsbc/equity-products', { waitUntil: 'domcontentloaded' })
    await page.waitForTimeout(1000)
    // 通过权益A 这一行的"下架"按钮
    await page.locator('tr:has-text("权益A") button:has-text("下架")').first().click({ force: true })
    await page.waitForTimeout(500)
    await shot(page, 'dialog-offshelf-confirm', false)
    await page.locator('.el-message-box__btns button:has-text("取消")').click({ force: true }).catch(() => {})
    await page.waitForTimeout(300)
  })

  // 删除确认（权益F 草稿状态）
  await safe('dialog-delete-confirm', async () => {
    await page.goto(BASE + '/#/customization/hsbc/equity-products', { waitUntil: 'domcontentloaded' })
    await page.waitForTimeout(1000)
    await page.locator('tr:has-text("权益F（草稿）") button.el-button--text:has(i.el-icon-more)').first().click({ force: true })
    await page.waitForTimeout(500)
    await page.evaluate(() => {
      const el = [...document.querySelectorAll('.more-actions-item')]
        .find(e => e.textContent.trim() === '删除' && e.offsetParent !== null)
      el && el.click()
    })
    await page.waitForTimeout(500)
    await shot(page, 'dialog-delete-confirm', false)
    await page.locator('.el-message-box__btns button:has-text("取消")').click({ force: true }).catch(() => {})
    await page.waitForTimeout(300)
  })

  // 调整顺序气泡（权益A 行）
  await safe('popover-adjust-order', async () => {
    await page.goto(BASE + '/#/customization/hsbc/equity-products', { waitUntil: 'domcontentloaded' })
    await page.waitForTimeout(1000)
    await page.locator('tr:has-text("权益A") button.el-button--text:has(i.el-icon-more)').first().click({ force: true })
    await page.waitForTimeout(500)
    await page.evaluate(() => {
      const el = [...document.querySelectorAll('.more-actions-item')]
        .find(e => e.textContent.trim() === '调整显示顺序' && e.offsetParent !== null)
      el && el.click()
    })
    await page.waitForTimeout(500)
    await shot(page, 'popover-adjust-order', false)
    // 关闭：点空白处
    await page.mouse.click(10, 10).catch(() => {})
    await page.waitForTimeout(300)
  })

  // 设置显示页面对话框（信用卡列表）
  await safe('dialog-show-pages', async () => {
    await page.goto(BASE + '/#/customization/hsbc/credit-card-equity', { waitUntil: 'domcontentloaded' })
    await page.waitForTimeout(1000)
    await page.locator('button:has-text("设置显示页面")').first().click({ force: true })
    await page.waitForTimeout(700)
    await shot(page, 'dialog-show-pages', false)
    await page.locator('.el-dialog__footer button:has-text("取消")').click({ force: true }).catch(() => {})
    await page.waitForTimeout(300)
  })

  // 生成链接弹窗
  await safe('dialog-equity-link', async () => {
    await page.goto(BASE + '/#/customization/hsbc/equity-products', { waitUntil: 'domcontentloaded' })
    await page.waitForTimeout(1000)
    await page.locator('tr:has-text("权益A") button.el-button--text:has(i.el-icon-more)').first().click({ force: true })
    await page.waitForTimeout(500)
    await page.evaluate(() => {
      const el = [...document.querySelectorAll('.more-actions-item')]
        .find(e => e.textContent.trim() === '生成链接' && e.offsetParent !== null)
      el && el.click()
    })
    await page.waitForTimeout(700)
    await shot(page, 'dialog-equity-link', false)
    await page.locator('.el-dialog__headerbtn').click({ force: true }).catch(() => {})
    await page.waitForTimeout(300)
  })

  // 荣数商品选择弹窗
  await safe('dialog-rongshu-product', async () => {
    await page.goto(BASE + '/#/customization/hsbc/equity-products/add', { waitUntil: 'domcontentloaded' })
    await page.waitForTimeout(1000)
    await page.locator('label.el-radio:has-text("荣数商品")').first().click()
    await page.waitForTimeout(500)
    await page.locator('button:has-text("选择")').first().click({ force: true })
    await page.waitForTimeout(800)
    await shot(page, 'dialog-rongshu-product', false)
  })

  await browser.close()
  console.log('\nB 类截图完成。')
})()