rongshu/工作空间/产研/权益/汇丰全行/产品原型/pc-demo/src/views/AuditDetail.vue

<template>
  <div class="audit-detail" v-if="audit">
    <el-card>
      <!-- 步骤条 -->
      <el-steps :active="activeStep" simple style="margin-bottom: 20px;">
        <el-step title="权益信息">
          <template #icon><el-icon><InfoFilled /></el-icon></template>
        </el-step>
        <el-step title="设置规则">
          <template #icon><el-icon><Setting /></el-icon></template>
        </el-step>
        <el-step title="更多设置">
          <template #icon><el-icon><Monitor /></el-icon></template>
        </el-step>
      </el-steps>

      <!-- 步骤 0：权益信息 -->
      <div v-show="activeStep === 0">
        <el-card shadow="never" class="section-card">
          <template #header>
            <div class="section-title">基本信息</div>
          </template>
          <el-form :model="form" label-width="120px" label-position="left">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="是否权益平台兑换" label-width="150px">
                  <el-radio-group v-model="form.isPlatformExchange" disabled>
                    <el-radio-button label="是"></el-radio-button>
                    <el-radio-button label="否"></el-radio-button>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="8" v-if="form.isPlatformExchange === '是'">
                <el-form-item label="商品类型">
                  <el-radio-group v-model="form.productType" disabled>
                    <el-radio-button label="券码"></el-radio-button>
                    <el-radio-button label="微信立减金"></el-radio-button>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="8" v-if="form.isPlatformExchange === '是' && form.productType === '微信立减金'">
                <el-form-item label="选择权益">
                  <el-input :value="form.rongshuProduct" readonly></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8" v-if="form.isPlatformExchange === '否'">
                <el-form-item label="是否有详情页">
                  <el-radio-group v-model="form.externalJumpMethod" disabled>
                    <el-radio-button label="没有"></el-radio-button>
                    <el-radio-button label="有"></el-radio-button>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="8" v-if="form.isPlatformExchange === '否'">
                <el-form-item label="外部权益链接">
                  <el-input :value="form.externalLink" readonly></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="权益名称">
                  <el-input :value="form.equityName" readonly></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="权益图标">
                  <div v-if="form.listIcon && form.listIcon.length" class="image-preview">
                    <img :src="form.listIcon[0]" class="preview-img" />
                  </div>
                  <span v-else class="no-data">暂无图片</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>

        <el-card v-if="shouldShowDetailCard" shadow="never" class="section-card">
          <template #header>
            <div class="section-title">详情信息</div>
          </template>
          <el-form :model="form" label-width="120px" label-position="left">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="权益主图">
                  <div v-if="form.mainImage && form.mainImage.length" class="image-preview">
                    <img :src="form.mainImage[0]" class="preview-img" />
                  </div>
                  <span v-else class="no-data">暂无图片</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="权益介绍">
                  <el-input :value="form.introduction" type="textarea" :rows="4" readonly></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20" v-if="form.isPlatformExchange === '是'">
              <el-col :span="12">
                <el-form-item label="领取有效期">
                  <el-input
                    :value="form.claimStartTime && form.claimEndTime ? `${form.claimStartTime} 至 ${form.claimEndTime}` : '-'"
                    readonly
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20" v-if="form.isPlatformExchange === '是'">
              <el-col :span="12">
                <el-form-item label="使用有效期">
                  <el-input
                    :value="validityDisplay"
                    readonly
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="权益内容">
                  <div class="rich-text-view" v-html="form.overview || '暂无内容'"></div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="权益说明">
                  <div class="rich-text-view" v-html="form.details || '暂无内容'"></div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20" v-if="form.isPlatformExchange === '是' && form.productType === '券码'">
              <el-col :span="8">
                <el-form-item label="领取成功按钮">
                  <el-input :value="form.successButtonText" readonly></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="领取链接">
                  <template #label>
                    <span>领取链接</span>
                    <el-tooltip content="使用链接填写后,可在详情页复制" placement="top">
                      <el-icon style="margin-left: 4px; vertical-align: middle; cursor: pointer;"><QuestionFilled /></el-icon>
                    </el-tooltip>
                  </template>
                  <el-input :value="form.claimLink" readonly></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </div>

      <!-- 步骤 1：规则 -->
      <div v-show="activeStep === 1">
        <el-card shadow="never" class="section-card">
          <template #header>
            <div class="section-title">展示规则</div>
          </template>
          <el-form :model="form" label-width="120px" label-position="left">
            <el-form-item label="展示时间限制">
              <el-switch v-model="form.showTimeEnabled" disabled></el-switch>
              <template v-if="form.showTimeEnabled">
                <div class="rule-pane">
                  <el-input :value="form.showStartTime" readonly style="width: 240px;"></el-input>
                  <span style="margin: 0 8px;">-</span>
                  <el-input :value="form.showEndTime" readonly style="width: 240px;"></el-input>
                </div>
              </template>
            </el-form-item>
            <el-form-item label="展示客群限制">
              <el-switch v-model="form.showGroupEnabled" disabled></el-switch>
              <template v-if="form.showGroupEnabled">
                <div class="rule-pane">
                  <el-input :value="(form.showGroupTagIds || []).join('、')" readonly></el-input>
                </div>
              </template>
            </el-form-item>
          </el-form>
        </el-card>

        <el-card shadow="never" class="section-card">
          <template #header>
            <div class="section-title">领取规则</div>
          </template>
          <el-form :model="form" label-width="120px" label-position="left">
            <el-form-item label="领取客群限制">
              <el-switch v-model="form.claimGroupEnabled" disabled></el-switch>
            </el-form-item>
          </el-form>
        </el-card>
      </div>

      <!-- 步骤 2：更多设置 -->
      <div v-show="activeStep === 2">
        <el-card shadow="never" class="section-card">
          <template #header>
            <div class="section-title">显示页面</div>
          </template>
          <el-form :model="form" label-width="120px" label-position="left">
            <el-form-item label="权益首页">
              <el-radio-group v-model="form.showOnHome" disabled>
                <el-radio label="显示">显示</el-radio>
                <el-radio label="不显示">不显示</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="组装页">
              <el-radio-group v-model="form.showOnAssembly" disabled>
                <el-radio label="显示">显示</el-radio>
                <el-radio label="不显示">不显示</el-radio>
              </el-radio-group>
              <div v-if="form.showOnAssembly === '显示'" class="rule-pane">
                <el-input :value="(form.assemblyPages || []).join('，')" readonly></el-input>
              </div>
            </el-form-item>
          </el-form>
        </el-card>

        <el-card shadow="never" class="section-card">
          <template #header>
            <div class="section-title">分享设置</div>
          </template>
          <el-form :model="form" label-width="120px" label-position="left">
            <el-form-item label="是否支持分享">
              <el-switch v-model="form.shareEnabled" disabled></el-switch>
            </el-form-item>
          </el-form>
        </el-card>
      </div>

      <!-- 步骤导航 -->
      <div class="step-navigation">
        <el-button v-if="activeStep > 0" @click="prevStep"><el-icon><ArrowLeft /></el-icon>上一步</el-button>
        <el-button
          v-if="activeStep < 2"
          type="primary"
          @click="nextStep"
          style="margin-left: auto;"
        >下一步<el-icon class="el-icon--right"><ArrowRight /></el-icon></el-button>
      </div>

      <!-- 已审记录 -->
      <el-card v-if="audit.auditStatus !== 'pending'" shadow="never" class="section-card audit-action-card">
        <template #header>
          <div class="section-title">审核记录</div>
        </template>
        <el-form label-width="120px" label-position="left">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="审核人">
                <span>{{ audit.auditorName || '-' }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="审核时间">
                <span>{{ audit.auditTime || '-' }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="审核结果">
                <el-tag :type="auditStatusTag(audit.auditStatus)" size="small">
                  {{ auditStatusLabel(audit.auditStatus) }}
                </el-tag>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>

      <!-- 操作栏 -->
      <div class="action-bar">
        <el-button @click="goBack">返回</el-button>
        <template v-if="canAudit">
          <el-button type="danger" @click="handleReject">驳回</el-button>
          <el-button type="primary" @click="handleApprove">通过</el-button>
        </template>
      </div>
    </el-card>
  </div>
</template>

<script>
import request from '@/utils/request'
import { ElMessage, ElMessageBox } from 'element-plus'

const detailMockMap = {
  'Q100001': {
    isPlatformExchange: '是', productType: '券码',
    listIcon: [], mainImage: [],
    introduction: '权益A 介绍内容示例',
    overview: '<p>权益内容内容</p>',
    details: '<p>权益说明内容</p>',
    successButtonText: '马上去使用',
    showTimeEnabled: true,
    showStartTime: '2026-01-01 00:00:00',
    showEndTime: '2026-12-31 23:59:59',
    showGroupEnabled: false,
    showGroupTagIds: [],
    claimTimeEnabled: true,
    claimStartTime: '2026-01-01 00:00:00',
    claimEndTime: '2026-12-31 23:59:59',
    claimGroupEnabled: false
  },
  'Q100002': {
    isPlatformExchange: '否', productType: '',
    externalJumpMethod: '没有', externalLink: '太古地产',
    listIcon: [], mainImage: [], introduction: '',
    overview: '', details: '',
    successButtonText: '',
    showTimeEnabled: false, showStartTime: '', showEndTime: '',
    showGroupEnabled: true, showGroupTagIds: ['客群A'],
    claimTimeEnabled: true,
    claimStartTime: '2026-02-01 00:00:00',
    claimEndTime: '2026-11-30 23:59:59',
    claimGroupEnabled: true
  },
  'Q100003': {
    isPlatformExchange: '否', productType: '',
    externalJumpMethod: '有', externalLink: '龙腾',
    listIcon: [], mainImage: [],
    introduction: '权益C 介绍内容示例',
    overview: '<p>外部详情页权益内容</p>',
    details: '<p>外部详情页权益说明</p>',
    showTimeEnabled: false,
    claimTimeEnabled: false,
    claimGroupEnabled: false
  },
  'Q100004': {
    isPlatformExchange: '否', productType: '',
    externalJumpMethod: '有', externalLink: 'h5链接',
    listIcon: [], mainImage: [],
    introduction: '权益D 介绍内容示例',
    overview: '<p>自定义链接权益内容</p>',
    details: '<p>自定义链接权益说明</p>',
    showTimeEnabled: false,
    claimTimeEnabled: false,
    claimGroupEnabled: false
  }
}

export default {
  name: 'AuditDetail',
  data() {
    return {
      audit: null,
      activeStep: 0,
      form: {
        isPlatformExchange: '是',
        source: '银行自有',
        productType: '券码',
        rongshuProduct: '',
        externalJumpMethod: '',
        externalLink: '',
        equityName: '',
        subTitle: '',
        skuNo: '',
        merchantName: '',
        listIcon: [],
        mainImage: [],
        introduction: '',
        validityType: 'fixed',
        validityText: '',
        overview: '',
        details: '',
        successButtonText: '',
        showTimeEnabled: false,
        showStartTime: '',
        showEndTime: '',
        showGroupEnabled: false,
        showGroupTagIds: [],
        claimTimeEnabled: false,
        claimStartTime: '',
        claimEndTime: '',
        claimGroupEnabled: false,
        showOnHome: '不显示',
        showOnAssembly: '不显示',
        assemblyPages: [],
        shareEnabled: false
      }
    }
  },
  computed: {
    validityDisplay() {
      if (this.form.validityType === 'relative') {
        return `领取后${this.form.validityDays || '-'}天`
      }
      if (Array.isArray(this.form.validityRange) && this.form.validityRange.length === 2) {
        return `${this.form.validityRange[0]} 至 ${this.form.validityRange[1]}`
      }
      return this.form.validityText || '-'
    },
    mappedSource() {
      if (this.form.isPlatformExchange === '否') return '第三方'
      if (this.form.productType === '微信立减金') return '荣数商品'
      return '银行自有'
    },
    shouldShowDetailCard() {
      if (this.form.isPlatformExchange === '是') return true
      if (this.form.isPlatformExchange === '否' && this.form.externalJumpMethod === '有') return true
      return false
    },
    canAudit() {
      if (!this.audit || this.audit.auditStatus !== 'pending') return false
      const t = this.audit.auditType
      if (t === 'new') return this.activeStep === 2
      return true
    }
  },
  created() {
    this.loadAudit()
  },
  methods: {
    loadAudit() {
      const id = this.$route.params.id
      request.get(`/api/audit/detail?id=${id}`).then(res => {
        this.audit = res.data
        if (this.audit) this.populateForm()
      }).catch(() => {})
    },
    populateForm() {
      const bizId = this.audit.bizId
      // 1) 先用 mockMap 填充丰富的详情字段
      if (detailMockMap[bizId]) {
        Object.assign(this.form, detailMockMap[bizId])
      }
      // 2) 用 audit snapshot 覆盖（变更类型时会包含最新内容）
      Object.assign(this.form, this.audit.snapshot || {})
      // 3) 根据接口返回的 source 推算 isPlatformExchange 和 productType
      if (!this.form.isPlatformExchange || this.form.isPlatformExchange === '') {
        if (this.form.source === '第三方') this.form.isPlatformExchange = '否'
        else this.form.isPlatformExchange = '是'
      }
      if (this.form.isPlatformExchange === '是' && (!this.form.productType || this.form.productType === '')) {
        this.form.productType = this.form.source === '荣数商品' ? '微信立减金' : '券码'
      }
      if (this.form.isPlatformExchange === '否') {
        this.form.productType = ''
      }
      // 4) 推导第三方相关字段
      if (this.form.isPlatformExchange === '否') {
        if (this.form.jumpLink && !this.form.externalLink) this.form.externalLink = this.form.jumpLink
        if (this.form.jumpMethod && !this.form.externalJumpMethod) {
          this.form.externalJumpMethod = this.form.jumpMethod
        }
      }
    },
    auditTypeLabel(t) {
      return { new: '新增', offshelf: '下架' }[t] || t
    },
    auditTypeTag(t) {
      return { new: 'success', offshelf: 'danger' }[t] || ''
    },
    auditStatusLabel(s) {
      return { pending: '待审核', approved: '已通过', rejected: '已驳回' }[s] || s
    },
    auditStatusTag(s) {
      return { pending: 'warning', approved: 'success', rejected: 'danger' }[s] || ''
    },
    nextStep() { if (this.activeStep < 2) this.activeStep++ },
    prevStep() { if (this.activeStep > 0) this.activeStep-- },
    handleApprove() {
      ElMessageBox.confirm('确定通过该审核单吗？', '提示', {
        confirmButtonText: '通过',
        cancelButtonText: '取消',
        type: 'success'
      }).then(() => {
        request.post('/api/audit/approve', { id: this.audit.id }).then(() => {
          ElMessage.success('审核通过')
          this.$router.push('/customization/hsbc/audit')
        }).catch(() => {})
      }).catch(() => {})
    },
    handleReject() {
      ElMessageBox.confirm('确定驳回该审核单吗？', '提示', {
        confirmButtonText: '驳回',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request.post('/api/audit/reject', { id: this.audit.id }).then(() => {
          ElMessage.success('已驳回')
          this.$router.push('/customization/hsbc/audit')
        }).catch(() => {})
      }).catch(() => {})
    },
    goBack() {
      this.$router.push('/customization/hsbc/audit')
    }
  }
}
</script>

<style scoped>
.audit-detail {
  padding: 0;
}
.header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header-left .title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}
.section-card {
  margin-bottom: 16px;
  border: none;
}
.section-card >>> .el-card__header {
  padding: 12px 20px;
  background: #fafafa;
  border-bottom: 1px solid #ebeef5;
}
.section-title {
  font-size: 14px;
  font-weight: 600;
  color: #303133;
}
.offshelf-reason {
  color: #f56c6c;
  font-weight: 500;
}
.rule-pane {
  display: flex;
  align-items: center;
  width: 600px;
  background: #f1f2f5;
  padding: 12px 20px;
  margin-top: 10px;
}
.image-preview {
  width: 80px;
  height: 80px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  overflow: hidden;
}
.preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.no-data {
  color: #c0c4cc;
  font-size: 13px;
}
.rich-text-view {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 8px 12px;
  min-height: 80px;
  font-size: 14px;
  color: #606266;
  line-height: 1.6;
}
.step-navigation {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
}
.audit-action-card {
  margin-top: 8px;
}
.action-bar {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
}
</style>