回传

src/api/index.ts

@@ -21,7 +21,8 @@ import {
   FinanceData,
   AdGroupData,
   AdgroupList,
-  IUserAdmin
+  IUserAdmin,
+  AccountPlanConfig
 } from "@/types/api";
 
 /**
@@ -472,3 +473,26 @@ export const statusAdChange = (data: {
 export const getAuthorUser = (): AxiosPromise<IUserAdmin> => {
   return axios("/userInfo");
 };
+
+// 获取公众号回传配置
+export const getOfficialBackConfig = (
+  channel_id: number
+): AxiosPromise<AccountPlanConfig> => {
+  return axios("/channel/reportConfig", { params: { channel_id } });
+};
+
+// 保存公众号回传配置
+export const setOfficialBackConfig = (data: any) => {
+  return axios.post("/channel/setReportConfig", data);
+};
+
+// 切换公众号回传方式
+export const onUpdateOfficialReportType = (
+  channel_id: number,
+  report_module: string
+) => {
+  return axios.post("/channel/switchReportModule", {
+    channel_id,
+    report_module
+  });
+};

src/types/api.d.ts

@@ -75,6 +75,7 @@ export interface IOfficials {
   channel_id: number;
   account_name: string;
   nickname: string;
+  report_module?: string;
 }
 
 export interface ADPlanItem {
@@ -396,3 +397,14 @@ interface IUserItem {
   nickname: string;
   id: number;
 }
+
+interface AccountPlanConfig {
+  ad_config: {
+    channel_id: string;
+    id: number;
+    rate: number;
+  };
+  channel_configs: PlanBack[];
+  channel_id: number | string;
+  report_module: string;
+}

src/views/_pageOptions/table-account.ts

@@ -2,46 +2,54 @@ export const TableColumnOfAccount = [
   {
     title: "公众号名称",
     dataIndex: "account_name",
-    ellipsis: true,
+    ellipsis: true
   },
   {
     title: "公众号appid",
     dataIndex: "app_id",
-    ellipsis: true,
+    ellipsis: true
   },
   {
     title: "平台",
     dataIndex: "platform",
-    ellipsis: true,
+    ellipsis: true
   },
   {
     title: "站点",
     dataIndex: "channel_id",
-    ellipsis: true,
+    ellipsis: true
+  },
+  {
+    title: "回传方式",
+    width: 200,
+    dataIndex: "module",
+    slots: {
+      customRender: "module"
+    }
   },
-
   {
     title: "开始/结束时间",
     dataIndex: "start_time",
     ellipsis: true,
-    width:200,
+    width: 200,
     slots: {
-      customRender: "time",
-    },
+      customRender: "time"
+    }
   },
+  // {
+  //   title: "站点回传比例",
+  //   dataIndex: "rate",
+  //   width: 120,
+  //   slots: {
+  //     customRender: "rate"
+  //   }
+  // },
   {
-    title: "站点回传比例",
-    dataIndex: "rate",
-    width:120,
-    slots: {
-      customRender: "rate",
-    },
-  },
-  /* {
     title: "操作",
-    dataIndex: "operte",
+    dataIndex: "action",
+    width: 150,
     slots: {
-      customRender: "operte",
-    }, 
-  },*/
+      customRender: "action"
+    }
+  }
 ];

src/views/account/account.vue

@@ -28,7 +28,7 @@
       :data-source="list"
       @change="onLoadOfficials"
     >
-      <template #rate="{ text, record }">
+      <!-- <template #rate="{ text, record }">
         <editable-cell
           :text="`${text}`"
           title="回传比例"
@@ -36,11 +36,19 @@
           :minValue="1"
           @change="(val) => onCellChange(record, 'rate', val)"
         />
+      </template> -->
+      <template #module="{ record }">
+        <p>{{ moduleType[record.report_module] }}</p>
       </template>
       <template #time="{ text, record }">
         <p>起:{{ record.start_time }}</p>
         <p>止:{{ record.end_time }}</p>
       </template>
+      <template #action="{record}">
+        <a-button type="primary" @click="initBackData(record)">
+          回传配置
+        </a-button>
+      </template>
       <!-- <template #operte="{ text, record }">
         <p
           v-clipboard:copy="record.fans_add_monitor_link"
@@ -50,6 +58,130 @@
         </p>
       </template> -->
     </a-table>
+    <!-- 站点回传配置drawer -->
+    <a-drawer
+      v-model:visible="visible"
+      title="回传配置"
+      width="40%"
+      class="drawer-back-config"
+    >
+      <div class="wrap-box">
+        <p class="title">回传方式</p>
+        <a-radio-group
+          v-model:value="report_module"
+          @change="onReportModuleChange"
+        >
+          <a-radio value="ad">计划</a-radio>
+          <a-radio value="channel">站点</a-radio>
+        </a-radio-group>
+      </div>
+      <div class="wrap-box">
+        <p class="title">按计划回传配置</p>
+        <a-form :label-col="{ span: 6 }" :wrapper-col="{ offset: 1, span: 11 }">
+          <a-form-item label="回传比例">
+            <a-input-number v-model:value="ad_config.rate" />
+          </a-form-item>
+          <a-form-item :wrapper-col="{ offset: 7 }">
+            <a-button type="primary" @click="onRateChange">
+              保存
+            </a-button>
+          </a-form-item>
+        </a-form>
+      </div>
+      <div class="wrap-box">
+        <p class="title">按站点回传配置</p>
+        <a-tabs size="small" @change="onTabChange">
+          <a-tab-pane
+            v-for="(d, i) in popForm"
+            :key="i"
+            :tab="d.desc"
+          ></a-tab-pane>
+        </a-tabs>
+        <a-form :label-col="{ span: 6 }" :wrapper-col="{ offset: 1, span: 11 }">
+          <a-form-item label="回传条件">
+            <a-select
+              style="width: 150px"
+              size="small"
+              v-model:value="popForm[currentTab].condition"
+            >
+              <a-select-option
+                :value="item.name"
+                v-for="item in popForm[currentTab].report_conditions"
+              >
+                {{ item.desc }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item label="回传开关">
+            <a-switch
+              v-model:checked="popForm[currentTab].back_on"
+              checked-children="开"
+              un-checked-children="关"
+            />
+          </a-form-item>
+          <a-form-item label="回传比例">
+            <a-input
+              v-model:value="popForm[currentTab].rate"
+              size="small"
+              style="width: 150px"
+              type="number"
+              placeholder="回传比例"
+            >
+              <template #suffix>
+                <a-tooltip title="比例0-100">
+                  <info-circle-outlined style="color: rgba(0,0,0,.45)" />
+                </a-tooltip>
+              </template>
+            </a-input>
+          </a-form-item>
+          <a-form-item label="回传平台">
+            <a-input
+              v-model:value="popForm[currentTab].back_platform"
+              disabled
+              size="small"
+              style="width: 150px"
+            />
+          </a-form-item>
+          <a-form-item
+            label="回传付费最低金额"
+            v-if="popForm[currentTab].report_type === 'recharge'"
+          >
+            <a-input
+              v-model:value="popForm[currentTab].price"
+              size="small"
+              style="width: 150px"
+              type="number"
+              placeholder="回传付费最低金额"
+            />
+          </a-form-item>
+          <a-form-item label="浮动回传比例">
+            <a-input
+              v-model:value="popForm[currentTab].float_rate"
+              size="small"
+              style="width: 150px"
+              type="number"
+              placeholder="浮动回传比例"
+            >
+              <template #suffix>
+                <a-tooltip title="浮动比例小于固定回传比例">
+                  <info-circle-outlined style="color: rgba(0,0,0,.45)" />
+                </a-tooltip>
+              </template>
+            </a-input>
+          </a-form-item>
+          <a-form-item :wrapper-col="{ offset: 7 }">
+            <a-button
+              :disabled="!hasPopFormData"
+              :loading="saving"
+              type="primary"
+              @click="onSaveConfig"
+            >
+              保存
+            </a-button>
+          </a-form-item>
+        </a-form>
+      </div>
+    </a-drawer>
   </div>
 </template>
 
@@ -61,7 +193,7 @@ import {
   onMounted,
   reactive,
   ref,
-  toRefs,
+  toRefs
 } from "vue";
 import EditableCell from "@/components/edit-cell/index.vue";
 import ToolBar from "@/components/tool-bar/index.vue";
@@ -69,13 +201,24 @@ import useApp from "@/hooks/useApp";
 import usePagination from "@/hooks/usePagination";
 
 import { TableColumnOfAccount } from "@/views/_pageOptions/table-account";
-import { getOfficialAccounts,setChannelRate } from "@/api";
-import { IOfficials,  } from "@/types/api";
+import {
+  getOfficialAccounts,
+  setChannelRate,
+  getOfficialBackConfig
+} from "@/api";
+import { IOfficials, PlanBack } from "@/types/api";
+import { message } from "ant-design-vue";
+import { InfoCircleOutlined } from "@ant-design/icons-vue";
+import {
+  setOfficialBackConfig,
+  onUpdateOfficialReportType
+} from "../../api/index";
 
 const Account = defineComponent({
   components: {
     ToolBar,
     EditableCell,
+    InfoCircleOutlined
   },
   setup() {
     let { loading, meta, tablePageOptions } = usePagination();
@@ -85,11 +228,37 @@ const Account = defineComponent({
       list: ref<IOfficials[]>([]),
       columns: TableColumnOfAccount,
       searching: false,
+      moduleType: ref<any>({
+        channel: "按站点回传",
+        ad: "按计划回传"
+      }),
       query: {
         official_name: "",
         platform: "",
-        page: 1,
+        page: 1
       },
+      hasPopFormData: false,
+      popForm: ref<any[]>([
+        {
+          id: 0,
+          back_on: false,
+          rate: 0,
+          condition: "",
+          price: 0,
+          float_rate: 0,
+          desc: ""
+        }
+      ]),
+      ad_config: {
+        channel_id: "",
+        id: 0,
+        rate: 0
+      },
+      report_module: "ad",
+      report_channel_id: 0,
+      visible: false,
+      saving: false,
+      currentTab: 0
     });
 
     const onSearch = (fields: Record<string, string>) => {
@@ -112,12 +281,96 @@ const Account = defineComponent({
 
     onMounted(onLoadOfficials);
 
+    const initBackData = async (item: IOfficials) => {
+      try {
+        const { data } = await getOfficialBackConfig(item.channel_id);
+        state.ad_config.channel_id = data.ad_config.channel_id;
+        state.ad_config.id = data.ad_config.id;
+        state.ad_config.rate = data.ad_config.rate;
+        state.report_module = data.report_module;
+        state.report_channel_id = +data.channel_id;
+        let list = data.channel_configs.map((r: PlanBack) => {
+          r.price = r.extra?.price;
+          r.float_rate = r.extra?.float_rate;
+          r.back_on = !!Number(r.back_on);
+          return r;
+        });
+        list.length > 0
+          ? (state.hasPopFormData = true)
+          : (state.hasPopFormData = false);
+        state.popForm = list;
+        state.visible = true;
+      } catch (error) {
+        console.log("error happened in get back plan data:", error.message);
+      }
+    };
+
+    const onTabChange = (key: number) => {
+      state.currentTab = key;
+    };
+
+    const onRateChange = () => {
+      const { rate, channel_id } = state.ad_config;
+      setChannelRate({ rate, channel_id }).then((res) => {
+        message.success("修改回传比例成功！");
+        state.visible = false;
+      });
+    };
+
+    const onReportModuleChange = () => {
+      onUpdateOfficialReportType(
+        state.report_channel_id,
+        state.report_module
+      ).then((_) => {
+        message.success("修改回传方式成功！");
+      });
+    };
+
+    const onSaveConfig = () => {
+      let { id, back_on, rate, condition, price, float_rate } = state.popForm[
+        state.currentTab
+      ];
+      if (float_rate && float_rate >= rate) {
+        message.error("浮动比例必须小于固定回传比例");
+        return;
+      }
+
+      state.saving = true;
+
+      let data = {
+        id,
+        back_on: Number(back_on),
+        rate,
+        condition,
+        price,
+        float_rate
+      };
+
+      setOfficialBackConfig(data)
+        .then((_) => {
+          onLoadOfficials();
+          message.success("保存成功");
+          state.visible = false;
+        })
+        .catch((e) => {
+          message.error(e.message || e.msg || "系统错误");
+        })
+        .finally(() => {
+          state.saving = false;
+        });
+    };
+
     return {
       ...toRefs(state),
       loading,
       tablePageOptions,
       onSearch,
       onLoadOfficials,
+      initBackData,
+      onTabChange,
+      onRateChange,
+      onSaveConfig,
+      onReportModuleChange
     };
   },
   methods: {
@@ -125,12 +378,29 @@ const Account = defineComponent({
       this.$message.success("复制成功");
     },
     onCellChange(record: any, dataIndex: string, value: string) {
-      setChannelRate({rate:value,channel_id:record.channel_id}).then(res=>{
-        this.$message.success("修改回传比例成功！");
-      })
-    },
-  },
+      setChannelRate({ rate: value, channel_id: record.channel_id }).then(
+        (res) => {
+          this.$message.success("修改回传比例成功！");
+        }
+      );
+    }
+  }
 });
 
 export default Account;
 </script>
+
+<style lang="scss">
+.drawer-back-config {
+  .wrap-box {
+    margin-bottom: 15px;
+
+    .title {
+      font-size: 16px;
+      color: #333;
+      font-weight: bold;
+      margin-bottom: 5px;
+    }
+  }
+}
+</style>