rongshu/pc/src/views/EditEquityProduct.vue

<template>
  <div class="edit-equity-product">
    <el-card>
      <div slot="header" class="header-title">
        <span>编辑权益</span>
      </div>

      <!-- 步骤条 -->
      <el-steps :active="activeStep" simple style="margin-bottom: 20px;">
        <el-step title="填写权益信息" icon="el-icon-info"></el-step>
        <el-step title="设置规则" icon="el-icon-setting"></el-step>
        <el-step title="更多设置" icon="el-icon-monitor"></el-step>
      </el-steps>

      <!-- 步骤内容 -->
      <div v-show="activeStep === 0">
        <!-- 基本信息 -->
        <el-card shadow="never" class="section-card">
          <div slot="header" class="section-title">基本信息</div>
        <el-form :model="form" label-width="120px" label-position="left">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="权益来源" required>
                <!-- 编辑时不允许修改权益来源 -->
                <el-radio-group v-model="form.source" disabled>
                  <el-radio-button label="银行自有"></el-radio-button>
                  <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.source === '荣数商品'">
              <el-form-item label="选择权益" required>
                <el-input
                  v-model="form.rongshuProduct"
                  placeholder="请选择权益"
                  readonly
                >
                  <el-button slot="append" @click="rongshuDialogVisible = true">选择</el-button>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="form.source === '银行自有'">
              <el-form-item label="权益类型" required>
                <el-radio-group v-model="form.productType">
                  <el-radio-button label="券码"></el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8" v-if="form.source === '第三方'">
              <el-form-item label="外部权益链接" required>
                <el-select v-model="form.externalLink" placeholder="请选择外部权益链接">
                  <el-option label="太古地产" value="太古地产"></el-option>
                  <el-option label="龙腾" value="龙腾"></el-option>
                  <el-option label="h5链接" value="h5链接"></el-option>
                  <el-option label="小程序链接" value="小程序链接"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="form.source === '第三方' && form.externalLink === 'h5链接'">
              <el-form-item label="h5链接" required>
                <el-input v-model="form.customLink" placeholder="请输入h5链接"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="form.source === '第三方'">
              <el-form-item required label-width="140px">
                <span slot="label" style="white-space: nowrap;">是否有详情页<el-tooltip content="没有详情页时直接从首页/列表页跳转" placement="top"><i class="el-icon-question tip-icon"></i></el-tooltip></span>
                <el-radio-group v-model="form.externalJumpMethod">
                  <el-radio-button label="没有"></el-radio-button>
                  <el-radio-button label="有"></el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" v-if="form.source === '第三方' && form.externalLink === '小程序链接'">
            <el-col :span="8">
              <el-form-item label="小程序appid" required>
                <el-input v-model="form.miniAppId" placeholder="请输入小程序appid"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="小程序页面地址" required label-width="140px">
                <el-input v-model="form.miniAppPath" placeholder="请输入小程序页面地址"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <template v-if="form.source === '银行自有' || form.source === '荣数商品'">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="权益名称" required>
                  <el-input v-model="form.equityName" maxlength="40" placeholder="请输入权益名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="权益副标题">
                  <el-input v-model="form.subTitle" maxlength="40" placeholder="请输入权益副标题"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20" v-if="form.source === '荣数商品'">
              <el-col :span="8">
                <el-form-item label="库存数" required>
                  <el-input-number
                    v-model="form.stockCount"
                    :min="0"
                    :max="100000"
                    style="width: 100%"
                  ></el-input-number>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item required>
                  <span slot="label">权益图标
                    <el-tooltip content="展示在权益首页和权益列表页" placement="top">
                      <i class="el-icon-question tip-icon"></i>
                    </el-tooltip>
                  </span>
                  <el-upload
                    action=""
                    :auto-upload="false"
                    :file-list="form.listIcon"
                    :on-change="file => handleUpload(file, 'listIcon')"
                    :on-preview="handlePreviewImage"
                    :on-remove="() => form.listIcon = []"
                    :class="{ 'upload-hide-trigger': form.listIcon.length >= 1 }"
                    :limit="1"
                    list-type="picture-card"
                  >
                    <i class="el-icon-plus"></i>
                  </el-upload>
                  <div class="upload-size-tip">建议尺寸：80x80px</div>
                </el-form-item>
              </el-col>
            </el-row>
          </template>

          <template v-else-if="form.source === '第三方'">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="权益名称" required>
                  <el-input v-model="form.equityName" maxlength="40" placeholder="请输入权益名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="权益副标题">
                  <el-input v-model="form.subTitle" maxlength="40" placeholder="请输入权益副标题"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20" v-if="form.externalJumpMethod === '没有'">
              <el-col :span="8">
                <el-form-item required>
                  <span slot="label">权益图标
                    <el-tooltip content="展示在权益首页和权益列表页" placement="top">
                      <i class="el-icon-question tip-icon"></i>
                    </el-tooltip>
                  </span>
                  <el-upload
                    action=""
                    :auto-upload="false"
                    :file-list="form.listIcon"
                    :on-change="file => handleUpload(file, 'listIcon')"
                    :on-preview="handlePreviewImage"
                    :on-remove="() => form.listIcon = []"
                    :class="{ 'upload-hide-trigger': form.listIcon.length >= 1 }"
                    :limit="1"
                    list-type="picture-card"
                  >
                    <i class="el-icon-plus"></i>
                  </el-upload>
                  <div class="upload-size-tip">建议尺寸：80x80px</div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row v-if="form.externalJumpMethod === '有'" :gutter="20">
              <el-col :span="8">
                <el-form-item required>
                  <span slot="label">权益图标
                    <el-tooltip content="展示在权益首页和权益列表页" placement="top">
                      <i class="el-icon-question tip-icon"></i>
                    </el-tooltip>
                  </span>
                  <el-upload
                    action=""
                    :auto-upload="false"
                    :file-list="form.listIcon"
                    :on-change="file => handleUpload(file, 'listIcon')"
                    :on-preview="handlePreviewImage"
                    :on-remove="() => form.listIcon = []"
                    :class="{ 'upload-hide-trigger': form.listIcon.length >= 1 }"
                    :limit="1"
                    list-type="picture-card"
                  >
                    <i class="el-icon-plus"></i>
                  </el-upload>
                  <div class="upload-size-tip">建议尺寸：80x80px</div>
                </el-form-item>
              </el-col>
            </el-row>
          </template>
        </el-form>
      </el-card>

      <!-- 详情信息 -->
      <el-card v-if="shouldShowDetailCard" shadow="never" class="section-card">
        <div slot="header" class="section-title">详情信息</div>
        <el-form :model="form" label-width="120px" label-position="left">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="权益主图" required>
                <el-upload
                  action=""
                  :auto-upload="false"
                  :file-list="form.mainImage"
                  :on-change="file => handleUpload(file, 'mainImage')"
                  :on-preview="handlePreviewImage"
                  :on-remove="() => form.mainImage = []"
                  :class="{ 'upload-hide-trigger': form.mainImage.length >= 1 }"
                  :limit="1"
                  list-type="picture-card"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
                <div class="upload-size-tip">建议尺寸：716x400px</div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="权益介绍" required>
                <el-input
                  v-model="form.introduction"
                  type="textarea"
                  :rows="4"
                  maxlength="500"
                  show-word-limit
                  placeholder="请输入权益介绍"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="权益内容" required>
                <quill-editor v-model="form.overview" :options="quillOptions"></quill-editor>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="权益说明" required>
                <quill-editor v-model="form.details" :options="quillOptions"></quill-editor>
              </el-form-item>
            </el-col>
          </el-row>
          <template v-if="form.source === '银行自有' || form.source === '荣数商品'">
            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item>
                  <span slot="label">下单成功短信
                    <el-tooltip placement="top">
                      <div slot="content">
                        此模板为权益支付成功，发送给持卡人的短信模板；<br/>
                        开启后需选择短信模板，关闭则不发送短信。<br/>
                        占位符如下：<br/>
                        权益名称：${productName}<br/>
                        结束日期：${expireDate}<br/>
                        卡号：${exchangeNum}<br/>
                        卡密：${exchangePwd}<br/>
                        券码路径：${qrCodeDownPaths}
                      </div>
                      <i class="el-icon-question tip-icon"></i>
                    </el-tooltip>
                  </span>
                  <el-switch v-model="form.smsEnabled" @change="handleSmsEnabledChange"></el-switch>
                  <template v-if="form.smsEnabled">
                    <div style="width: 600px;background: #f1f2f5;padding: 20px;margin-top: 10px;">
                      <el-select
                        v-model="form.smsTemplateId"
                        placeholder="请选择短信模板"
                        style="width: 100%"
                        @change="handleSmsTemplateChange"
                      >
                        <el-option
                          v-for="item in smsTemplateOptions"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id"
                        />
                      </el-select>
                      <div v-if="form.smsTemplate" class="sms-template-preview">{{ form.smsTemplate }}</div>
                    </div>
                  </template>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="领取成功按钮" required>
                  <el-input v-model="form.successButtonText" placeholder="请输入按钮文案"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </template>
        </el-form>
      </el-card>

      </div>

      <div v-show="activeStep === 1">
        <!-- 设置规则 -->
        <el-card shadow="never" class="section-card">
          <div slot="header" class="section-title">设置规则</div>
        <div slot="header" class="section-title">展示规则</div>
        <el-form :model="form" label-width="120px" label-position="left">
          <el-form-item label="展示时间限制">
            <el-switch v-model="form.showTimeEnabled"></el-switch>
            <template v-if="form.showTimeEnabled">
              <div style="display: flex;width: 600px;background: #f1f2f5;padding: 20px;margin-top: 10px;">
                <el-date-picker
                  v-model="form.showStartTime"
                  type="datetime"
                  placeholder="请选择开始时间"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  style="width: 100%"
                ></el-date-picker>
                <div style="width: 50px;text-align: center;">-</div>
                <el-date-picker
                  v-model="form.showEndTime"
                  type="datetime"
                  placeholder="请选择结束时间"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  style="width: 100%"
                ></el-date-picker>
              </div>
            </template>
          </el-form-item>
          <el-form-item label="展示客群限制">
            <el-switch v-model="form.showGroupEnabled"></el-switch>
            <template v-if="form.showGroupEnabled">
              <div style="display: flex;width: 600px;background: #f1f2f5;padding: 20px;margin-top: 10px;">
                <el-select v-model="form.showGroupTagIds" multiple filterable placeholder="请选择客群" style="width: 100%">
                  <el-option label="客群A" value="客群A"></el-option>
                  <el-option label="客群B" value="客群B"></el-option>
                  <el-option label="客群C" value="客群C"></el-option>
                </el-select>
              </div>
            </template>
          </el-form-item>
        </el-form>
      </el-card>

      <!-- 领取规则 -->
      <el-card shadow="never" class="section-card">
        <div slot="header" class="section-title">领取规则</div>
        <el-form :model="form" label-width="120px" label-position="left">
          <el-form-item label="领取时间限制">
            <el-switch v-model="form.claimTimeEnabled"></el-switch>
            <template v-if="form.claimTimeEnabled">
              <div style="display: flex;width: 600px;background: #f1f2f5;padding: 20px;margin-top: 10px;">
                <el-date-picker
                  v-model="form.claimStartTime"
                  type="datetime"
                  placeholder="请选择开始时间"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  style="width: 100%"
                ></el-date-picker>
                <div style="width: 50px;text-align: center;">-</div>
                <el-date-picker
                  v-model="form.claimEndTime"
                  type="datetime"
                  placeholder="请选择结束时间"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  style="width: 100%"
                ></el-date-picker>
              </div>
            </template>
          </el-form-item>
          <el-form-item label="领取客群限制">
            <el-switch v-model="form.claimGroupEnabled"></el-switch>
            <template v-if="form.claimGroupEnabled">
              <div style="width: 600px;background: #f1f2f5;padding: 20px;margin-top: 10px;">
                <el-alert
                  title="需在【权益管理-权益发放】中选择权益发放，未发放的权益移动端不展示"
                  type="info"
                  :closable="false"
                  show-icon
                  style="margin-bottom: 12px;"
                ></el-alert>
                <div style="font-size: 14px;color: #606266;margin-bottom: 8px;font-weight: 500;">不满足提示</div>
                <el-form-item label="提示内容" label-width="80px" style="margin-bottom: 12px;">
                  <el-input v-model="form.claimDenyMessage" maxlength="200" placeholder="请输入提示内容"></el-input>
                </el-form-item>
                <el-form-item label="跳转按钮文案" label-width="100px" style="margin-bottom: 12px;">
                  <el-input v-model="form.claimDenyButtonText" maxlength="10" placeholder="请输入按钮文案"></el-input>
                </el-form-item>
                <el-form-item label="跳转按钮链接" label-width="100px" style="margin-bottom: 0;">
                  <el-input v-model="form.claimDenyButtonLink" maxlength="200" placeholder="请输入按钮链接"></el-input>
                </el-form-item>
              </div>
            </template>
          </el-form-item>
        </el-form>
      </el-card>
      </div>

      <div v-show="activeStep === 2">
        <!-- 显示页面 -->
        <el-card shadow="never" class="section-card">
          <div slot="header" class="section-title">显示页面</div>
          <el-form :model="form" label-width="120px" label-position="left">
            <el-form-item label="权益首页/列表页">
              <el-radio-group v-model="form.showOnHome">
                <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">
                <el-radio label="显示">显示</el-radio>
                <el-radio label="不显示">不显示</el-radio>
              </el-radio-group>
              <div
                v-if="form.showOnAssembly === '显示'"
                style="width: 600px;background: #f1f2f5;padding: 20px;margin-top: 10px;"
              >
                <el-select
                  v-model="form.assemblyPages"
                  multiple
                  filterable
                  placeholder="请选择组装页"
                  style="width: 100%"
                >
                  <el-option label="组装页A" value="组装页A"></el-option>
                  <el-option label="组装页B" value="组装页B"></el-option>
                  <el-option label="组装页C" value="组装页C"></el-option>
                  <el-option label="组装页D" value="组装页D"></el-option>
                </el-select>
              </div>
            </el-form-item>
          </el-form>
        </el-card>

        <!-- 分享设置 -->
        <el-card shadow="never" class="section-card">
          <div slot="header" class="section-title">分享设置</div>
          <el-form :model="form" label-width="120px" label-position="left">
            <el-form-item label="是否支持分享">
              <el-switch v-model="form.shareEnabled" @change="handleShareEnabledChange"></el-switch>
              <template v-if="form.shareEnabled">
                <div style="width: 600px;background: #f1f2f5;padding: 20px;margin-top: 10px;">
                  <el-form-item label="分享名称" label-width="100px" required style="margin-bottom: 16px;">
                    <el-input
                      v-model="form.shareName"
                      maxlength="40"
                      placeholder="请输入分享名称"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="分享图片" label-width="100px" required style="margin-bottom: 0;">
                    <el-upload
                      action=""
                      :auto-upload="false"
                      :file-list="form.shareImage"
                      :on-change="file => handleUpload(file, 'shareImage')"
                      :limit="1"
                      list-type="picture-card"
                    >
                      <i class="el-icon-plus"></i>
                    </el-upload>
                  </el-form-item>
                </div>
              </template>
            </el-form-item>
          </el-form>
        </el-card>
      </div>

      <!-- 操作栏 -->
      <div class="action-bar">
        <div class="action-left">
          <el-button
            v-if="activeStep > 0"
            @click="prevStep"
            icon="el-icon-arrow-left"
          >上一步</el-button>
        </div>
        <div class="action-center">
          <template v-if="activeStep === 2">
            <el-button type="primary" @click="handleSubmit">保存</el-button>
            <el-button @click="goBack">取消</el-button>
          </template>
        </div>
        <div class="action-right">
          <el-button
            v-if="activeStep < 2"
            type="primary"
            @click="nextStep"
          >下一步<i class="el-icon-arrow-right el-icon--right"></i></el-button>
        </div>
      </div>
    </el-card>

    <rongshu-product-dialog
      :visible.sync="rongshuDialogVisible"
      @select="onRongshuSelect"
    />

    <el-dialog :visible.sync="previewVisible" title="图片预览" width="640px" append-to-body>
      <img v-if="previewImageUrl" :src="previewImageUrl" style="display:block; max-width:100%; margin:0 auto;" />
    </el-dialog>
  </div>
</template>

<script>
import RongshuProductDialog from '@/components/RongshuProductDialog.vue'

export default {
  name: 'EditEquityProduct',
  components: { RongshuProductDialog },
  data() {
    return {
      activeStep: 0,
      rongshuDialogVisible: false,
      previewVisible: false,
      previewImageUrl: '',
      quillOptions: {
        placeholder: '请输入内容...',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline'],
            [{ list: 'ordered' }, { list: 'bullet' }],
            [{ header: [1, 2, 3, false] }],
            ['link', 'image'],
            ['clean']
          ]
        }
      },
      smsTemplateOptions: [
        { id: 'SMS_TPL_001', name: '通用权益支付成功模板', content: '【银行】您购买的${productName}已支付成功，卡号：${exchangeNum}，卡密：${exchangePwd}，有效期至${expireDate}，详情：${qrCodeDownPaths}' },
        { id: 'SMS_TPL_002', name: '券码类短信模板', content: '【银行】尊敬的客户，您的${productName}购买成功，券码为${exchangeNum}，请于${expireDate}前使用。' },
        { id: 'SMS_TPL_003', name: '实物类短信模板', content: '【银行】您购买的${productName}已受理，我们将尽快安排发货，感谢您的支持。' }
      ],
      form: {
        source: '银行自有',
        rongshuProduct: '',
        productType: '券码',
        faceValueThreshold: '',
        faceValueDiscount: '',
        stockCount: null,
        shareEnabled: false,
        shareImage: [],
        shareName: '',
        externalJumpMethod: '没有',
        externalLink: '太古地产',
        customLink: '',
        miniAppId: '',
        miniAppPath: '',
        skuNo: '',
        equityName: '',
        productId: '',
        merchantName: '',
        subTitle: '',
        listIcon: [],
        mainImage: [],
        introduction: '',
        overview: '',
        details: '',
        smsEnabled: false,
        smsTemplateId: '',
        smsTemplate: '',
        successButtonText: '',
        showTimeEnabled: false,
        showStartTime: '',
        showEndTime: '',
        showGroupEnabled: false,
        showGroupTagIds: [],
        claimTimeEnabled: false,
        claimStartTime: '',
        claimEndTime: '',
        claimGroupEnabled: false,
        claimGroupIsPotential: false,
        claimGroupTagId: '',
        claimDenyMessage: '',
        claimDenyButtonText: '',
        claimDenyButtonLink: '',
        showOnHome: '显示',
        showOnAssembly: '不显示',
        assemblyPages: []
      }
    }
  },
  computed: {
    shouldShowDetailCard() {
      const s = this.form.source
      if (s === '银行自有' || s === '荣数商品') return true
      if (s === '第三方' && this.form.externalJumpMethod === '有') return true
      return false
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    loadData() {
      const id = this.$route.params.id
      const mockMap = {
        100001: {
          source: '银行自有',
          externalJumpMethod: '',
          externalLink: '',
          customLink: '',
        miniAppId: '',
        miniAppPath: '',
          skuNo: 'SKU001',
          equityName: '权益A',
          subTitle: '副标题示例',
          listIcon: [],
          mainImage: [],
          overview: '<p>权益内容内容</p>',
          details: '<p>权益说明内容</p>',
          smsEnabled: true,
          smsTemplateId: 'SMS_TPL_001',
          smsTemplate: '【银行】您购买的${productName}已支付成功，卡号：${exchangeNum}，卡密：${exchangePwd}，有效期至${expireDate}，详情：${qrCodeDownPaths}',
          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,
          claimGroupTagId: '',
          claimDenyMessage: '',
          claimDenyButtonText: '',
          claimDenyButtonLink: ''
        },
        100002: {
          source: '第三方',
          externalJumpMethod: '没有',
          externalLink: '太古地产',
          customLink: '',
        miniAppId: '',
        miniAppPath: '',
          skuNo: 'SKU002',
          equityName: '权益B',
          subTitle: '外部列表页副标题',
          listIcon: [],
          mainImage: [],
          overview: '',
          details: '',
          smsEnabled: false,
          smsTemplateId: '',
          smsTemplate: '',
          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,
          claimGroupIsPotential: false,
          claimGroupTagId: '客群奖励活动A',
          claimDenyMessage: '您暂不满足领取条件',
          claimDenyButtonText: '去升级',
          claimDenyButtonLink: 'https://example.com/upgrade'
        },
        100003: {
          source: '第三方',
          externalJumpMethod: '有',
          externalLink: '龙腾',
          customLink: '',
        miniAppId: '',
        miniAppPath: '',
          skuNo: 'SKU003',
          equityName: '权益C',
          subTitle: '外部详情页副标题',
          listIcon: [],
          mainImage: [],
          overview: '<p>外部详情页权益内容</p>',
          details: '<p>外部详情页权益说明</p>',
          smsEnabled: false,
          smsTemplateId: '',
          smsTemplate: '',
          successButtonText: '',
          showTimeEnabled: false,
          showStartTime: '',
          showEndTime: '',
          showGroupEnabled: false,
          showGroupTagIds: [],
          claimTimeEnabled: false,
          claimStartTime: '',
          claimEndTime: '',
          claimGroupEnabled: false,
          claimGroupTagId: '',
          claimDenyMessage: '',
          claimDenyButtonText: '',
          claimDenyButtonLink: ''
        },
        100004: {
          source: '第三方',
          externalJumpMethod: '有',
          externalLink: 'h5链接',
          customLink: 'https://example.com/custom',
          skuNo: 'SKU004',
          equityName: '权益D',
          subTitle: '外部自定义链接副标题',
          listIcon: [],
          mainImage: [],
          overview: '<p>自定义链接权益内容</p>',
          details: '<p>自定义链接权益说明</p>',
          smsEnabled: false,
          smsTemplateId: '',
          smsTemplate: '',
          successButtonText: '',
          showTimeEnabled: false,
          showStartTime: '',
          showEndTime: '',
          showGroupEnabled: false,
          showGroupTagIds: [],
          claimTimeEnabled: false,
          claimStartTime: '',
          claimEndTime: '',
          claimGroupEnabled: false,
          claimGroupTagId: '',
          claimDenyMessage: '',
          claimDenyButtonText: '',
          claimDenyButtonLink: ''
        }
      }
      if (id && mockMap[id]) {
        Object.assign(this.form, mockMap[id])
      }
    },
    nextStep() {
      if (this.activeStep < 2) {
        this.activeStep++
      }
    },
    prevStep() {
      if (this.activeStep > 0) {
        this.activeStep--
      }
    },
    handleSubmit() {
      this.$message.success('保存成功')
      this.$router.push('/customization/hsbc/equity-products')
    },
    goBack() {
      this.$router.push('/customization/hsbc/equity-products')
    },
    handleSmsEnabledChange(val) {
      if (!val) {
        this.form.smsTemplateId = ''
        this.form.smsTemplate = ''
      }
    },
    handleShareEnabledChange(val) {
      if (val) {
        if (!this.form.shareName) {
          this.form.shareName = this.form.equityName || ''
        }
      }
    },
    handleSmsTemplateChange(id) {
      const tpl = this.smsTemplateOptions.find(i => i.id === id)
      this.form.smsTemplate = tpl ? tpl.content : ''
    },
    handleUpload(file, field) {
      if (!file || !file.raw) return
      const reader = new FileReader()
      reader.onload = (e) => {
        this.form[field] = [{ name: file.name, url: e.target.result, uid: file.uid }]
      }
      reader.readAsDataURL(file.raw)
    },
    handlePreviewImage(file) {
      this.previewImageUrl = file.url || ''
      this.previewVisible = !!this.previewImageUrl
    },
    onRongshuSelect(product) {
      this.form.rongshuProduct = product.name
      this.form.equityName = product.name
      this.form.merchantName = product.merchant
      this.form.stockCount = product.stock
      this.form.mainImage = product.mainImage ? [...product.mainImage] : []
    }
  }
}
</script>

<style scoped>
.edit-equity-product {
  padding: 20px;
}
.header-title {
  font-size: 18px;
  font-weight: 500;
}
.section-card {
  margin-bottom: 16px;
  border: none;
}
.upload-hide-trigger >>> .el-upload--picture-card { display: none; }

.section-card >>> .el-card__header {
  padding: 12px 20px;
  background: #fafafa;
  border-bottom: 1px solid #ebeef5;
}
.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}
.action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
}
.action-left, .action-right {
  width: 120px;
}
.action-center {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.tip-icon {
  color: #909399;
  cursor: pointer;
  font-size: 14px;
}
.upload-size-tip {
  margin-top: 4px;
  font-size: 12px;
  color: #909399;
  line-height: 1.5;
}
.sms-template-preview {
  margin-top: 12px;
  padding: 12px;
  background: #fff;
  border: 1px dashed #dcdfe6;
  border-radius: 4px;
  font-size: 13px;
  color: #606266;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-all;
}
</style>