rongshu/pc/src/components/EquityLinkDialog.vue

<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="680px"
    @open="resetForm"
  >
    <el-form label-width="100px" inline>
      <el-form-item label="Campaign ID">
        <el-select v-model="form.campaignId" clearable placeholder="请选择 (无)">
          <el-option
            v-for="opt in campaignOptions"
            :key="opt.value"
            :label="opt.label"
            :value="opt.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="Channel ID">
        <el-select v-model="form.channelId" clearable placeholder="请选择 (无)">
          <el-option
            v-for="opt in channelOptions"
            :key="opt.value"
            :label="opt.label"
            :value="opt.value"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <div class="link-section">
      <div class="link-label"><span class="dot"></span> 权益链接</div>
      <div class="link-row">
        <span class="link-type">H5 链接</span>
        <el-input :value="h5Url" readonly size="small" />
        <el-button size="small" type="primary" plain @click="copyLink(h5Url)">复制</el-button>
      </div>
      <div class="link-row">
        <span class="link-type">小程序/APP</span>
        <el-input :value="appUrl" readonly size="small" />
        <el-button size="small" type="primary" plain @click="copyLink(appUrl)">复制</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'EquityLinkDialog',
  props: {
    visible: { type: Boolean, default: false },
    id: { type: [String, Number], default: '' },
    pathName: { type: String, default: 'equity' },
    title: { type: String, default: '生成链接' }
  },
  data() {
    return {
      form: { campaignId: '', channelId: '' },
      campaignOptions: [
        { label: 'CAMP202511', value: 'CAMP202511' },
        { label: 'CAMP_WINTER', value: 'CAMP_WINTER' }
      ],
      channelOptions: [
        { label: 'APP推送', value: 'CH_APP' },
        { label: '微信公众号', value: 'CH_WECHAT' }
      ]
    }
  },
  computed: {
    dialogVisible: {
      get() { return this.visible },
      set(v) { this.$emit('update:visible', v) }
    },
    queryStr() {
      const params = []
      if (this.form.campaignId) params.push(`CampaignId=${this.form.campaignId}`)
      if (this.form.channelId) params.push(`Channelid=${this.form.channelId}`)
      return params.length ? '&' + params.join('&') : ''
    },
    h5Url() {
      return `https://hsbc.com/${this.pathName}?id=${this.id}${this.queryStr}`
    },
    appUrl() {
      return `hsbc-app://${this.pathName}?id=${this.id}${this.queryStr}`
    }
  },
  methods: {
    resetForm() {
      this.form = { campaignId: '', channelId: '' }
    },
    copyLink(text) {
      if (!text) return
      navigator.clipboard.writeText(text).then(() => {
        this.$message.success('链接已复制到剪贴板')
      }).catch(() => {
        this.$message.error('复制失败，请手动选取')
      })
    }
  }
}
</script>

<style scoped>
.link-section {
  margin-top: 8px;
  padding: 12px;
  background: #fafafa;
  border-radius: 6px;
  border: 1px solid #ebeef5;
}
.link-label {
  font-weight: 600;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #303133;
}
.link-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.link-row:last-child { margin-bottom: 0; }
.link-type {
  font-size: 12px;
  color: #909399;
  width: 70px;
  flex-shrink: 0;
}
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  background: #67C23A;
}
</style>