press-plus/press-convert-exchange-template/template-mixin.js

易用的跨端组件库

import ExchangeList from '../press-convert-exchange-list/press-convert-exchange-list.vue';
import PointCost from '../press-convert-point-cost/press-convert-point-cost.vue';

/**
 * 模板组件公共 Mixin
 * 用于 多产品多模板 共享逻辑
 */
export default {
  components: {
    ExchangeList,
    PointCost,
  },
  props: {
    // ========== 兑换列表相关 ==========
    // 兑换列表数据
    exchangeList: {
      type: Array,
      default: () => [],
    },
    // 积分图标
    pointIcon: {
      type: String,
      default: '',
    },
    // 兑换列表背景图
    exchangeListBg: {
      type: String,
      default: '',
    },
    // 兑换列表标签背景图
    tagBg: {
      type: String,
      default: '',
    },
    // 奖励框背景图
    redeemRewardBg: {
      type: String,
      default: '',
    },
    // 奖励文字颜色
    rewardTextColor: {
      type: String,
      default: '',
    },
    // 奖励按钮背景图
    rewardBtnBg: {
      type: String,
      default: '',
    },
    // 奖励按钮文字颜色
    rewardBtnTextColor: {
      type: String,
      default: '',
    },

    // ========== 积分消耗相关 ==========
    // 积分信息
    pointInfo: {
      type: Object,
      default: () => ({}),
    },
    // 积分文字颜色
    pointTextColor: {
      type: String,
      default: '',
    },
  },
  emits: ['exchangeClick', 'showRewardExplain', 'refresh'],
  methods: {
    // 处理兑换点击
    handleExchangeClick(item) {
      this.$emit('exchangeClick', item);
    },
    // 处理显示奖励说明
    handleShowRewardExplain(index) {
      this.$emit('showRewardExplain', index);
    },
    // 处理刷新
    handleRefresh() {
      this.$emit('refresh');
    },
  },
};