diff --git a/src/api/affiliate.js b/src/api/affiliate.js
index be83888..af0c1c1 100644
--- a/src/api/affiliate.js
+++ b/src/api/affiliate.js
@@ -1,5 +1,13 @@
 import { request } from '@/utils/request'
 
+export function getAffiliateConfig() {
+    return request('/affiliate/getAffiliateConfig')
+}
+
+export function setAffiliateConfig(params) {
+    return request('/affiliate/setAffiliateConfig','post',params)
+}
+
 export function getAffiliateList(params) {
     return request('/affiliate/getAffiliateList', 'post', params)
 }
diff --git a/src/assets/css/common.less b/src/assets/css/common.less
index 3c5e220..4e7c16a 100644
--- a/src/assets/css/common.less
+++ b/src/assets/css/common.less
@@ -55,4 +55,11 @@ body {
 
 .el-drawer__header{
     margin-bottom: 0 !important;
+}
+
+.list-div {
+    font-size: 14px;
+    color: #606266;
+    border: 0;
+    width: 100%;
 }
\ No newline at end of file
diff --git a/src/pages/affiliate/Index.vue b/src/pages/affiliate/Index.vue
index 137c1d6..15d851d 100644
--- a/src/pages/affiliate/Index.vue
+++ b/src/pages/affiliate/Index.vue
@@ -53,17 +53,32 @@ const handleDelete = (row) => {
       <template #breadcrumb>
         <el-breadcrumb separator="/">
           <el-breadcrumb-item> 電商管理中心 </el-breadcrumb-item>
-          <el-breadcrumb-item>推薦設置</el-breadcrumb-item>
+          <el-breadcrumb-item>推薦列表</el-breadcrumb-item>
         </el-breadcrumb>
       </template>
       <template #content>
-        <span class="text-large font-600 mr-3"> 推薦設置 </span>
+        <span class="text-large font-600 mr-3"> 推薦列表 </span>
       </template>
     </el-page-header>
     <!-- Breadcrumb: End -->
     <hr />
     <el-card>
-      
+      <el-table :data="tableData" style="width: 100%">
+        <el-table-column prop="order_sn" label="訂單號" />
+        <el-table-column prop="user_name" label="會員名稱" />
+        <el-table-column prop="order_amount" label="訂單金額" />
+        <el-table-column prop="money" label="分潤金額" />
+        <el-table-column prop="time" label="時間" />
+        <el-table-column label="操作" width="100">
+          <template #default="scope">
+            <el-button size="small" type="danger" @click="handleDelete(scope.row)">刪除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="pagination-block">
+        <el-pagination v-model:current-page="page" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
+          small="small" layout="->,total, sizes, prev, pager, next, jumper" :total="total" />
+      </div>
     </el-card>
   </div>
 </template>
diff --git a/src/pages/affiliate/Info.vue b/src/pages/affiliate/Info.vue
index 8e781eb..32b36d6 100644
--- a/src/pages/affiliate/Info.vue
+++ b/src/pages/affiliate/Info.vue
@@ -1,10 +1,178 @@
-<scipt setup>
-import { ref, reactive, watch, onMounted } from "vue";
-</scipt>
+<script setup>
+import { onMounted, ref } from 'vue'
+import { Delete } from "@element-plus/icons-vue";
+
+import { getAffiliateConfig, setAffiliateConfig } from "@/api/affiliate";
+
+const defaultForm = {
+    on: "1",
+    config: {
+        separator_type: "1",
+        expire: "24",
+        expire_unit: "hour",
+        level_money_all: "0",
+        level_point_all: "0",
+        level_register_all: "0",
+        level_register_up: "0",
+    },
+    item: []
+}
+
+const form = ref(defaultForm)
+
+onMounted(async () => {
+    let res = await getAffiliateConfig()
+    if(res.code === 200) {
+        // form.value = res.data
+    }else{
+        ElMessage.error('讀取推薦設定失敗')
+    }
+})
+
+const handleAddLevel = () => {
+    form.value.item.push({
+        level_money: "0",
+        level_point: "0",
+    })
+}
+
+const handleDeleteLevel = (key) => {
+    form.value.item.splice(key, 1)
+    ElMessage.success("刪除成功")
+}
+
+const onSubmit = async() => {
+    let res = await setAffiliateConfig(form.value)
+    if(res.code === 200) {
+        ElMessage.success("設定成功")
+    }else{
+        ElMessage.error("設定失敗")
+    }
+}
+</script>
 
 <template>
-info
-</template>
+    <div class="main">
+        <!-- Breadcrumb: Start -->
+        <el-page-header :icon="null" title=" " @back="onBack">
+            <template #breadcrumb>
+                <el-breadcrumb separator="/">
+                    <el-breadcrumb-item> 電商管理中心 </el-breadcrumb-item>
+                    <el-breadcrumb-item>推薦設置</el-breadcrumb-item>
+                </el-breadcrumb>
+            </template>
+            <template #content>
+                <span class="text-large font-600 mr-3"> 推薦設置 </span>
+            </template>
+        </el-page-header>
+        <!-- Breadcrumb: End -->
+        <hr>
+        <el-form :model="form" label-width="120px">
+            <el-form-item label="是否開啟推薦">
+                <el-radio-group v-model="form.on">
+                    <el-radio label="1">開啟</el-radio>
+                    <el-radio label="0">關閉</el-radio>
+                </el-radio-group>
+            </el-form-item>
+            <template v-if="form.on==='1'">
+                <el-form-item label="分成方式">
+                    <el-radio-group v-model="form.config.separator_type">
+                        <el-radio label="1">推薦註冊分成</el-radio>
+                        <el-radio label="2">推薦訂單分成</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item label="推薦時效">
+                    <el-input v-model="form.config.expire" placeholder="">
+                        <template #append>Hour</template>
+                    </el-input>
+                </el-form-item>
+                <el-form-item label="推薦分成">
+                    <el-input v-model="form.config.level_money_all" placeholder="">
+                        <template #append>%</template>
+                    </el-input>
+                </el-form-item>
+                <el-form-item v-if="form.config.separator_type === '1'">
+                    <div class="list-div">
+                        <div class="level-op-btn">
+                            <el-button type="primary" @click="handleAddLevel">增加層級</el-button>
+                        </div>
+                        <table class="table table-borderd">
+                            <tr>
+                                <th>級別</th>
+                                <th>現金分成(%)</th>
+                                <th>積分分成(%)</th>
+                                <th>操作</th>
+                            </tr>
+                            <tr v-for="(v, k) in form.item" :key="k">
+                                <td>
+                                    {{ k + 1 }}
+                                </td>
+                                <td> <el-input v-model="v.level_money" placeholder="">
+                                        <template #append>%</template>
+                                    </el-input>
+                                </td>
+                                <td>
+                                    <el-input v-model="v.level_point" placeholder="">
+                                        <template #append>%</template>
+                                    </el-input>
+                                </td>
+                                <td>
+                                    <el-icon @click="handleDeleteLevel(k)">
+                                        <delete />
+                                    </el-icon>
+                                </td>
+                            </tr>
+                        </table>
+                    </div>
+                </el-form-item>
+            </template>
+            <el-form-item>
+                <el-button type="primary" @click="onSubmit">確定</el-button>
+            </el-form-item>
+        </el-form>
+    </div>
+</template >
 
 <style lang="less" scoped>
+.el-input {
+    max-width: 200px;
+}
+
+
+
+.list-div {
+    table {
+        width: 100%;
+        background-color: #eee;
+
+        td {
+            padding: 0.25rem;
+            vertical-align: middle;
+            background-color: #fff;
+        }
+
+        td:first-child {
+            width: 50px;
+            text-align: center;
+        }
+
+        td:last-child {
+            width: 50px;
+            text-align: center;
+        }
+
+        .el-input {
+            max-width: 100%;
+        }
+    }
+
+    .table-borderd {
+        border: 1px solid #dee2e6;
+    }
+
+    .level-op-btn {
+        padding: 10px;
+        text-align: right;
+    }
+}
 </style>
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
index bedb734..f55d4da 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -39,6 +39,7 @@ export default defineConfig(({ mode }) => {
           shipping: resolve(__dirname, 'shipping.html'),
           order: resolve(__dirname, 'order.html'),
           bonus: resolve(__dirname, 'bonus.html'),
+          bonus: resolve(__dirname, 'affiliate.html'),
         },
       },
       emptyOutDir: true,