<template>
  <div style="padding: 15px;">
    <div class="head">
      <headerCard name="积分锁客" icon="jfsk" intro="设置充值消费的N倍，当前订单立即免单" />
    </div>
    <el-tabs type="border-card" v-model="datas.activeName" @tab-click="handleClick">
      <el-tab-pane label="基本设置" name="BasicSettings" key="BasicSettings">
        <BasicSettings />
      </el-tab-pane>
      <el-tab-pane label="商品设置" name="ProductSettings" key="ProductSettings">
        <ProductSettings />
      </el-tab-pane>
      <el-tab-pane label="兑换记录" name="Exchangerecords" key="Exchangerecords">
        <Exchangerecords />
      </el-tab-pane>
      <el-tab-pane label="用户积分" name="Memberpoints" key="Memberpoints">
        <Memberpoints />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup>
import BasicSettings from './pointsconfig/BasicSettings.vue'
import Exchangerecords from './pointsconfig/exchangerecords.vue'
import Memberpoints from './pointsconfig/Memberpoints.vue'
import ProductSettings from './pointsconfig/ProductSettings.vue'
import headerCard from '@/views/marketing_center/components/headerCard.vue'

let datas = reactive({
  activeName: "BasicSettings",
})
function handleClick(tab) {
  datas.activeName = tab.props.name;
}
</script>

<style scoped lang="scss">
.head {
  padding: 14px;
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 14px;
}
</style>