计划模板初步制作完成

src/api/campaignTemplate.js

 import request from '@/utils/request'
 
-export function getCampaignTemplateList() {
+export function getCampaignTemplateList(params) {
   return request({
     url: process.env.PUTIN_API + '/campaign-templates',
-    method: 'get'
+    method: 'get',
+    params
   })
 }
 

src/components/GroupSelectors/DescriptionGroupSelector.vue

@@ -47,7 +47,7 @@ export default {
   methods: {
     async fetchOptions() {
       try {
-        const response = await axios.get('http://localhost:8567/description-groups')
+        const response = await axios.get(process.env.PUTIN_API + '/description-groups')
         this.options = response.data
       } catch (error) {
         console.error('Failed to fetch description groups:', error)

src/components/GroupSelectors/LocationGroupSelector.vue

@@ -47,7 +47,7 @@ export default {
   methods: {
     async fetchOptions() {
       try {
-        const response = await axios.get('http://localhost:8567/location-groups')
+        const response = await axios.get(process.env.PUTIN_API + '/location-groups')
         this.options = response.data
       } catch (error) {
         console.error('Failed to fetch location groups:', error)

src/views/campaignTemplate/CampaignTemplateManage.vue

@@ -63,16 +63,16 @@
     <el-table
       :data="tableData"
       border
-      style="width: 100%"
+      style="width: 100%;"
       v-loading="loading">
       <el-table-column prop="id" label="ID" width="80"></el-table-column>
-      <el-table-column prop="name" label="模板名称" width="150"></el-table-column>
-      <el-table-column prop="daily_budget" label="日预算" width="120">
+      <el-table-column prop="name" label="模板名称" width="250"></el-table-column>
+      <el-table-column prop="daily_budget" label="日预算($)" width="120">
         <template slot-scope="scope">
           {{ scope.row.daily_budget }}
         </template>
       </el-table-column>
-      <el-table-column prop="target_roas" label="目标考核ROAS" width="150">
+      <el-table-column prop="target_roas" label="考核ROAS(%)" width="150">
         <template slot-scope="scope">
           {{ scope.row.target_roas }}
         </template>
@@ -80,7 +80,7 @@
       <el-table-column label="应用组" width="200">
         <template slot-scope="scope">
           <el-tag
-            v-for="group in JSON.parse(scope.row.app_groups || '[]')"
+            v-for="group in scope.row.app_groups || []"
             :key="group"
             size="small"
             style="margin: 2px">
@@ -91,7 +91,7 @@
       <el-table-column label="地域组" width="200">
         <template slot-scope="scope">
           <el-tag
-            v-for="group in JSON.parse(scope.row.location_groups || '[]')"
+            v-for="group in scope.row.location_groups || []"
             :key="group"
             size="small"
             style="margin: 2px">
@@ -102,7 +102,7 @@
       <el-table-column label="素材组" width="200">
         <template slot-scope="scope">
           <el-tag
-            v-for="group in JSON.parse(scope.row.material_groups || '[]')"
+            v-for="group in scope.row.material_groups || []"
             :key="group"
             size="small"
             style="margin: 2px">
@@ -113,7 +113,7 @@
       <el-table-column label="标题组" width="200">
         <template slot-scope="scope">
           <el-tag
-            v-for="group in JSON.parse(scope.row.title_groups || '[]')"
+            v-for="group in scope.row.title_groups || []"
             :key="group"
             size="small"
             style="margin: 2px">
@@ -124,7 +124,7 @@
       <el-table-column label="描述组" width="200">
         <template slot-scope="scope">
           <el-tag
-            v-for="group in JSON.parse(scope.row.description_groups || '[]')"
+            v-for="group in scope.row.description_groups || []"
             :key="group"
             size="small"
             style="margin: 2px">
@@ -132,7 +132,7 @@
           </el-tag>
         </template>
       </el-table-column>
-      <el-table-column label="操作" width="150" fixed="right">
+      <el-table-column label="操作" align="center">
         <template slot-scope="scope">
           <el-button
             size="mini"
@@ -154,8 +154,8 @@
         :current-page="currentPage"
         :page-sizes="[10, 20, 50, 100]"
         :page-size="pageSize"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="total">
+        :total="total"
+        layout="total, prev, pager, next, sizes">
       </el-pagination>
     </div>
 
@@ -187,9 +187,9 @@
 
         <el-form-item label="转化目标" prop="bidding_type">
           <el-select v-model="form.bidding_type" placeholder="请选择">
-            <el-option label="安装量" :value="2"></el-option>
-            <el-option label="应用内操作次数" :value="3"></el-option>
-            <el-option label="biddingStrategyGoalType" :value="5"></el-option>
+            <el-option label="安装量" :value="2" :disabled="true"></el-option>
+            <el-option label="应用内操作次数" :value="3" :disabled="true"></el-option>
+            <el-option label="应用内操作价值" :value="5"></el-option>
           </el-select>
         </el-form-item>
 
@@ -231,6 +231,7 @@ import LocationGroupSelector from '@/components/GroupSelectors/LocationGroupSele
 import MaterialGroupSelector from '@/components/GroupSelectors/MaterialGroupSelector'
 import TitleGroupSelector from '@/components/GroupSelectors/TitleGroupSelector'
 import DescriptionGroupSelector from '@/components/GroupSelectors/DescriptionGroupSelector'
+import axios from 'axios'
 import { getCampaignTemplateList, createCampaignTemplate, updateCampaignTemplate, deleteCampaignTemplate } from '@/api/campaignTemplate'
 
 export default {
@@ -264,7 +265,7 @@ export default {
         campaign_type: 1,
         appStore: 3,
         daily_budget: 0,
-        bidding_type: 3,
+        bidding_type: 5,
         target_roas: 0,
         app_groups: [],
         location_groups: [],
@@ -306,9 +307,14 @@ export default {
     async fetchData() {
       this.loading = true
       try {
-        const response = await getCampaignTemplateList()
+        const response = await getCampaignTemplateList({
+          page: this.currentPage,
+          size: this.pageSize,
+          ...this.condition
+        })
+        console.log(response)
         if (response.status === 200) {
-          this.tableData = response.result.data
+          this.tableData = response.result.data.value
           this.total = response.result.total
         } else {
           this.$message.error(response.msg || '获取数据失败')
@@ -374,7 +380,7 @@ export default {
         campaign_type: 1,
         appStore: 3,
         daily_budget: 0,
-        bidding_type: 3,
+        bidding_type: 5,
         target_roas: 0,
         app_groups: [],
         location_groups: [],
@@ -389,11 +395,11 @@ export default {
       this.dialogTitle = '编辑模板'
       this.form = {
         ...row,
-        app_groups: JSON.parse(row.app_groups || '[]'),
-        location_groups: JSON.parse(row.location_groups || '[]'),
-        material_groups: JSON.parse(row.material_groups || '[]'),
-        title_groups: JSON.parse(row.title_groups || '[]'),
-        description_groups: JSON.parse(row.description_groups || '[]')
+        app_groups: row.app_groups || [],
+        location_groups: row.location_groups || [],
+        material_groups: row.material_groups || [],
+        title_groups: row.title_groups || [],
+        description_groups: row.description_groups || []
       }
       this.dialogVisible = true
     },
@@ -424,11 +430,11 @@ export default {
         if (valid) {
           const formData = {
             ...this.form,
-            app_groups: JSON.stringify(this.form.app_groups),
-            location_groups: JSON.stringify(this.form.location_groups),
-            material_groups: JSON.stringify(this.form.material_groups),
-            title_groups: JSON.stringify(this.form.title_groups),
-            description_groups: JSON.stringify(this.form.description_groups)
+            app_groups: this.form.app_groups,
+            location_groups: this.form.location_groups,
+            material_groups: this.form.material_groups,
+            title_groups: this.form.title_groups,
+            description_groups: this.form.description_groups
           }
 
           try {
@@ -504,14 +510,79 @@ export default {
   gap: 10px;
 }
 
+.el-tag {
+  margin-right: 5px;
+  margin-bottom: 5px;
+}
+
+.el-table--enable-row-hover .el-table__body tr:hover > td {
+  background-color: #f5f7fa;
+}
+
+.el-button--primary {
+  background-color: #1890ff;
+  border-color: #1890ff;
+}
+
+.el-button--primary:hover,
+.el-button--primary:focus {
+  background-color: #40a9ff;
+  border-color: #40a9ff;
+}
+
+.el-link {
+  color: #1890ff;
+}
+
+.el-link:hover {
+  color: #40a9ff;
+}
+
+.el-select .el-input__inner,
+.el-input__inner {
+  border-radius: 2px;
+}
+
 .pagination-container {
   margin-top: 20px;
   display: flex;
-  justify-content: center;
+  justify-content: flex-end;
+  padding: 10px 0;
 }
 
-.el-tag {
-  margin-right: 5px;
-  margin-bottom: 5px;
+.el-pagination {
+  font-weight: normal;
+}
+
+.el-pagination .el-select .el-input {
+  width: 110px;
+}
+
+.el-pagination .el-select .el-input__inner {
+  padding-right: 25px;
+}
+
+.el-pagination .btn-prev,
+.el-pagination .btn-next {
+  background: transparent;
+}
+
+.el-pagination .el-pager li {
+  background: transparent;
+  border: none;
+}
+
+.el-pagination .el-pager li.active {
+  color: #1890ff;
+  background-color: #e6f7ff;
+  border-radius: 2px;
+}
+
+.el-pagination__total {
+  margin-right: 10px;
+}
+
+.el-pagination__sizes {
+  margin-left: 10px;
 }
 </style>