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

<template>
  <div class="credit-card-activity-entry">
    <el-card>
      <template #header><div class="title">信用卡活动入口配置</div></template>
      <el-form :model="form" label-width="170px" style="max-width: 780px">
        <el-form-item label="展示客群" required>
          <el-select
            v-model="form.visibleCrowdIds"
            multiple
            collapse-tags
            collapse-tags-tooltip
            clearable
            placeholder="请选择展示客群，不选代表全部用户展示"
            class="field-md"
          >
            <el-option v-for="item in crowds" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
          <div class="form-tip">数据来自人群管理，不选代表全部用户展示（全部展示不包括潜客）</div>
        </el-form-item>
        <el-form-item label="活动图标">
          <el-upload
            class="entry-icon-uploader"
            :show-file-list="false"
            :auto-upload="false"
            :on-change="handleIconChange"
            accept="image/*"
          >
            <img v-if="form.icon" :src="form.icon" class="entry-icon-preview" />
            <el-icon v-else class="entry-icon-placeholder"><Plus /></el-icon>
          </el-upload>
          <div class="form-tip">建议尺寸 100 × 100 px，支持 PNG / JPG</div>
        </el-form-item>
        <el-form-item label="入口名称" required>
          <el-input v-model="form.name" placeholder="移动端入口标题" class="field-md" />
        </el-form-item>
        <el-form-item label="提示文案">
          <el-input v-model="form.tip" type="textarea" :rows="3" placeholder="温馨提示：如需查看信用卡活动进度，请点击上方“信用卡活动专区”。" class="field-lg" />
        </el-form-item>
        <el-form-item label="跳转地址" required>
          <el-input v-model="form.link" placeholder="CVP/信用卡权益平台 URL" />
        </el-form-item>
        <el-form-item label="启用信用卡活动 tab">
          <el-switch v-model="form.enableCreditCardTab" active-text="启用" inactive-text="不启用" />
        </el-form-item>
        <el-form-item label="更新时间">
          <span>{{ form.updatedAt }}</span>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="save">保存</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import activityStore from '@/store/activityStore'

export default {
  name: 'CreditCardActivityEntry',
  data() {
    return {
      Plus,
      form: { visibleCrowdIds: [], icon: '', enableCreditCardTab: false, ...activityStore.creditCardEntry }
    }
  },
  computed: {
    crowds() { return activityStore.activityCrowds }
  },
  methods: {
    handleIconChange(file) {
      const reader = new FileReader()
      reader.onload = (e) => { this.form.icon = e.target.result }
      reader.readAsDataURL(file.raw)
    },
    save() {
      if (!this.form.name) return ElMessage.warning('入口名称必填')
      if (!this.form.link) return ElMessage.warning('跳转地址必填')
      activityStore.updateCreditCardEntry(this.form)
      this.form = { ...activityStore.creditCardEntry }
      ElMessage.success('保存成功')
    }
  }
}
</script>

<style scoped>
.title { font-weight: 600; }
.form-tip { margin-top:4px; color:#909399; font-size:12px; line-height:1.4; }
.field-md { width:240px; max-width:100%; }
.field-lg { width:360px; max-width:100%; }
.entry-icon-uploader :deep(.el-upload) { border:1px dashed #dcdfe6; border-radius:6px; cursor:pointer; width:100px; height:100px; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#fafafa; transition:border-color .2s; }
.entry-icon-uploader :deep(.el-upload:hover) { border-color:#409eff; }
.entry-icon-preview { width:100%; height:100%; object-fit:cover; }
.entry-icon-placeholder { font-size:24px; color:#909399; }
</style>