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

<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>