evshop_api/public/adm/templates/components/affiliate.vue

<template>
  <h1>
    <!-- <span class="action-span"><a href="privilege.php?act=add">添加管理員</a></span> -->
    <span class="action-span1"><a href="index.php?act=main">商城網站管理中心</a> </span><span id="search_id"
      class="action-span1"> - 推薦設定 </span>
    <div style="clear:both"></div>
  </h1>
  <el-form :model="affiliate.config" label-width="100px">
  <div class="form-div">
    <el-radio-group v-model="affiliate.on" class="ml-4">
      <el-radio :label="1" size="large">開</el-radio>
      <el-radio :label="0" size="large">關</el-radio>
    </el-radio-group>
  </div>
  <div id="separate" v-if="affiliate.on === 1">
    <div>
      <div class="form-div">
        <el-form-item label="推薦模式">
          <el-radio-group v-model="affiliate.config.separate_by">
            <el-radio :label="0">推薦註冊模式</el-radio>
            <el-radio :label="1">推薦商品模式</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="推薦有效時間">
          <el-input class="w-50 m-2" v-model="affiliate.config.expire">
            <template #append>小時</template>
          </el-input>
        </el-form-item>
        <div class="list-div" v-if="affiliate.config.separate_by === 0">
          <div>
            <el-button type="primary" @click="handleAdd">增加級別</el-button>
          </div>
          <table class="table table-bordered">
            <tbody>
              <tr>
                <th>級別</th>
                <th>積分分成%</th>
                <th>現金分成%</th>
                <th>操作</th>
              </tr>
              <tr v-for="(item,index) in affiliate.item" :key="index">
                <td >{{ index+1  }}</td>
                <td ><el-input v-model="item.level_point" placeholder="Please input" /></td>
                <td ><el-input v-model="item.level_money" placeholder="Please input" /></td>
                <td class="action">
                  <i class="icon-delete btn-delete" @click="handleDelete(index)"></i>
                  <!-- <el-button type="danger" @click="handleDelete(index)">刪除</el-button> -->
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

    </div>
  </div>
  <el-form-item>
          <el-button type="primary" @click="onSubmit">確定送出</el-button>
  </el-form-item>
  </el-form>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'ElementPlus'

const columns = [
  {
    title: '級別',
    dataIndex: 'no',
    width: '30%',
  },
  {
    title: '積分分成百分比',
    dataIndex: 'level_point',
  },
  {
    title: '現金分成百分比',
    dataIndex: 'level_money',
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action'
  },
];

onMounted(() => {
  init()
})

const affiliate = ref({
  config: {
    expire: 24,
    expire_unit: 'hour',
    separate_by: 1,
    level_point_all: '0%',
    level_money_all: '0%',
    level_register_all: '0',
    level_register_up: '0'
  },
  item: [],
  on: 0
})


const tableData = ref([])

const init = async () => {
  let res = await axios.get('https://shop.h888.fun/admin/affiliate.php?act=get_config')
  affiliate.value = res.data.data
  tableData.value = affiliate.value.item
}

const edit = key => {
  console.log(key)
  //   editableData[key] = cloneDeep(dataSource.value.filter(item => key === item.key)[0]);
};

const handleAdd = () => {
  affiliate.value.item.push({
    level_point: '0%',
    level_money: '0%',
  })
}

const handleDelete = (id) => {
  affiliate.value.item = affiliate.value.item.filter((item, index)=>{
      if(index !== id){
        return item
      }
  })
}

const onSubmit = async () => {
  let res = await axios.post('https://shop.h888.fun/admin/affiliate.php?act=update',affiliate.value)

  if(res.data.code !== 200){
    ElMessage({
    message: '更新失敗!!!',
    type: 'error  ',
    })
    return
  }
  ElMessage({
    message: '更新成功.',
    type: 'success',
  })
  return  

}

</script>

<style>
.action .btn-delete{
  color: red;
  font-weight: 700;
  line-height: 32px;
}

td{
  text-align: center;
  line-height: 32px;
}

</style>