1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283 |
- <template>
- <div class="asj-container">
- <div class="public-search">
- <DateRangePicker v-model="dateRange" :timezone="shopInfo.profile.time_zone"></DateRangePicker>
- <el-select
- v-model="selectedPortfolios"
- placeholder="广告组合"
- clearable
- multiple
- style="width: 400px"
- collapse-tags
- collapse-tags-tooltip
- :max-collapse-tags="3"
- >
- <el-option v-for="info of portfolios" :label="info.name" :value="info.portfolioId"></el-option>
- </el-select>
- </div>
- <div class="asj-tabs">
- <div v-for="tab of tabs" :key="tab.name" :class="['asj-tab', { active: tabActiveName === tab.name }]" @click="tabActiveName = tab.name">
- {{ tab.label }}
- </div>
- </div>
- <component :is="tabsComponents[tabActiveName]"></component>
- </div>
- </template>
- <script lang="ts" setup>
- import { ref, onBeforeMount, Ref, watch, provide } from 'vue'
- import { useShopInfo } from '/@/stores/shopInfo'
- import { usePublicData } from '/@/stores/publicData'
- import { GetList } from '/@/views/adManage/portfolios/api'
- import { storeToRefs } from 'pinia'
- import DateRangePicker from '/@/components/DateRangePicker/index.vue'
- import { recentDaysRange } from '/@/views/adManage/utils/tools'
- import Campaigns from './campaigns/index.vue'
- import Keywords from './keywords/index.vue'
- import Targets from './targets/index.vue'
- import SearchTerm from './searchTerm/index.vue'
- import AdvertisedProducts from './advertisedProducts/index.vue'
- import PurchasedProducts from './purchasedProducts/index.vue'
- import Placement from './placement/index.vue'
- const shopInfo = useShopInfo()
- const publicData = usePublicData()
- const selectedPortfolios: Ref<string[]> = ref([])
- const portfolios: Ref<Portfolio[]> = ref([])
- const { dateRange } = storeToRefs(publicData)
- const tabActiveName = ref('Campaigns')
- const tabs = [
- { label: '广告活动', name: 'Campaigns' },
- { label: '关键词投放', name: 'Keywords' },
- { label: '商品投放', name: 'Targets' },
- { label: '推广商品', name: 'AdvertisedProducts' },
- { label: '购买的其他商品', name: 'PurchasedProducts' },
- { label: '搜索词', name: 'SearchTerm' },
- { label: '广告位', name: 'Placement' }
- ]
- const tabsComponents: any = {
- Campaigns,
- Keywords,
- Targets,
- AdvertisedProducts,
- PurchasedProducts,
- SearchTerm,
- Placement
- }
- provide('dateRange', dateRange)
- onBeforeMount(async () => {
- const resp: APIResponseData = await GetList({ limit: 999 })
- portfolios.value = resp.data
- })
- publicData.$subscribe((mutation, state) => {
- // console.log(mutation)
- // console.log(state.dateRange)
- publicData.setDateRange(state.dateRange)
- })
- </script>
- <style scoped></style>
|