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

<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">
        <span style="color: rgb(177, 177, 177)">状态:</span> <el-button type="success" round plain size="small" style="margin-top: -3px">{{ dynStatusEnum[campaignInfo.state] }}</el-button><!--({{ campaignInfo.servingStatus }})-->
        <span class="head-span">预算:</span> <span>{{ profile.currency_symbol + campaignInfo.budget }} | {{ campaignInfo.budgetType }}</span>
        <!-- <span>投放类型：{{ campaignInfo.targetingType }}</span> -->
        <span class="head-span">投放日期:</span> <span>{{ campaignInfo.startDate }} ~ {{ campaignInfo.endDate ?? '无结束日期' }}</span>
        <span class="head-span">广告组合:</span> <span>{{ campaignInfo?.portfolioName }}</span>
        <span class="head-span">竞价:</span> <span>{{ getEnumLabel(dynBidOptimizationEnum, campaignInfo.bidOptimization) }}</span>
      </div>
    </div>
    <el-tabs type="border-card" class="asj-detail-tabs" v-model="tabActiveName">
      <el-tab-pane label="广告组" name="adGroup">
        <AdGroups :campaignId="route.query.campaignId" v-if="tabActiveName==='adGroup'"></AdGroups>
      </el-tab-pane>
      <el-tab-pane label="预算" name="budget">
        <Budget :campaignId="route.query.campaignId" v-if="tabActiveName==='budget'"></Budget>
      </el-tab-pane>
      <el-tab-pane label="自动化" name="automation">
        自动化
      </el-tab-pane>
      <el-tab-pane label="广告位" name="placement">
        <Placement :campaignId="route.query.campaignId" v-if="tabActiveName==='placement'"/>
      </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>

<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 {getEnumLabel} from '/@/views/adManage/utils/tools.js'
import {dynBidOptimizationEnum, dynStatusEnum} 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')

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

</script>

<style lang="scss" scoped>

.head-span {
  color: rgb(177, 177, 177);
  margin-left: 40px;
}
:deep(.el-tabs--border-card) {
  border: none;
}
</style>