ads_web/src/views/adManage/sp/campaigns/campaignDetail/index.vue

<script lang="ts" setup>
import { onMounted, ref, Ref } from 'vue';
import { useRoute } from 'vue-router';
import AdGroups from './adGroups/index.vue';
import Placement from './placement/index.vue';
import Budget from './budget/index.vue';
import Automation from './automation/index.vue';
import { getEnumLabel } from '/@/views/adManage/utils/tools.js';
import { dynBidStrategyEnum } from '/@/views/adManage/utils/enum.js';
import { useShopInfo } from '/@/stores/shopInfo';
// import { usePublicData } from '/@/stores/publicData'
import { storeToRefs } from 'pinia';

import { GetObj } from './api';


const shopInfo = useShopInfo();
const { profile } = storeToRefs(shopInfo);
const route = useRoute();
const campaignInfo: Ref<SpCampaign> = ref({});
const tabActiveName = ref('adGroup');

const campaignId = ref(route.query.campaignId);

onMounted(async () => {
  const resp = await GetObj(route.query.campaignId);
  campaignInfo.value = resp.data;
});


</script>

<template>
  <div class="asj-container">
    <div class="asj-detail-header">
      <span style="font-size: x-large; font-weight: bold; color: #0f1111;margin: 5px;">
        <span> {{ campaignInfo.campaignName }}</span>
      </span>
      <div class="asj-detail-info">
        <div>
          <span class="label">状态：</span>
          <span class="value">{{ campaignInfo.state }} ({{ campaignInfo.servingStatus }})</span>
        </div>
        <div>
          <span class="label">预算：</span>
          <span class="value">{{ profile.currency_symbol + campaignInfo.budget }} | {{ campaignInfo.budgetType }}</span>
        </div>
        <div>
          <span class="label">投放类型：</span>
          <span class="value">{{ campaignInfo.targetingType }}</span>
        </div>
        <div>
          <span class="label">投放日期：</span>
          <span class="value">{{ campaignInfo.startDate }} ~ {{ campaignInfo.endDate ?? '无结束日期' }}</span>
        </div>
        <div>
          <span class="label">广告组合：</span>
          <span class="value">{{ campaignInfo?.portfolioName }}</span>
        </div>
        <div>
          <span class="label">竞价策略：</span>
          <span class="value">{{ getEnumLabel(dynBidStrategyEnum, campaignInfo.dynBidStrategy) }}</span>
        </div>
      </div>
    </div>
    <el-tabs v-model="tabActiveName" class="asj-detail-tabs" type="border-card">
      <el-tab-pane label="广告组" name="adGroup">
        <AdGroups v-if="tabActiveName==='adGroup'" :campaignId="campaignId"></AdGroups>
      </el-tab-pane>
      <el-tab-pane label="预算" name="budget">
        <Budget v-if="tabActiveName==='budget'" :campaignId="campaignId"></Budget>
      </el-tab-pane>
      <el-tab-pane label="自动化" name="automation">
        <Automation v-if="tabActiveName==='automation'" :campaignId="campaignId"
                    :profileId="profile.profile_id"></Automation>
      </el-tab-pane>
      <el-tab-pane label="广告位" name="placement">
        <Placement v-if="tabActiveName==='placement'" :campaignId="campaignId" />
      </el-tab-pane>
      <!--<el-tab-pane label="否定投放" name="negative">-->
      <!--  否定投放-->
      <!--</el-tab-pane>-->
      <!-- <el-tab-pane label="操作日志" :lazy="true"></el-tab-pane> -->
    </el-tabs>
  </div>
</template>

<style>
/* .el-tabs--card {
  height: calc(100vh - 80px);
}
.el-tab-pane {
  height: calc(100vh - 80px);
  overflow-y: auto;
} */
</style>