|
@@ -0,0 +1,131 @@
|
|
|
+<template>
|
|
|
+ <div class="outer-container">
|
|
|
+ <div class="filters">
|
|
|
+ <el-input placeholder="ASIN/父ASIN/标题/SKU"></el-input>
|
|
|
+ <el-select style="width: 300px"></el-select>
|
|
|
+ <DateRangePicker v-model="dateRange"></DateRangePicker>
|
|
|
+ </div>
|
|
|
+ <div class="table-tips">
|
|
|
+ <el-icon><Warning /></el-icon>
|
|
|
+ <p style="margin-left: 3px">商品中心广告数据统计不包含SB广告</p>
|
|
|
+ </div>
|
|
|
+ <el-card>
|
|
|
+ <DataTendencyChart
|
|
|
+ :query="queryParams"
|
|
|
+ :fetchCard="getCardData"
|
|
|
+ :fetchLine="getLineData"
|
|
|
+ :fetch-line-month="getLineMonthData"
|
|
|
+ :fetch-line-week="getLineWeekData">
|
|
|
+ </DataTendencyChart>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style="width: 100%; padding: 12px">
|
|
|
+ <el-scrollbar>
|
|
|
+ <div class="scrollbar-flex-content">
|
|
|
+ <el-card v-for="item in 50" :key="item" class="scrollbar-demo-item">
|
|
|
+ {{ item }}
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ </el-scrollbar>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="pl-and-asin-tables">
|
|
|
+ <div class="asin-table-container">
|
|
|
+ <div class="xp-radio-group-wrapper">
|
|
|
+ <el-button-group>
|
|
|
+ <el-button bg pain>产品线</el-button>
|
|
|
+ <el-button bg pain>父ASIN</el-button>
|
|
|
+ <el-button bg pain>ASIN</el-button>
|
|
|
+ <el-button bg pain>SKU</el-button>
|
|
|
+ </el-button-group>
|
|
|
+ </div>
|
|
|
+ <div style="width: auto">
|
|
|
+ <el-table :data="tableData">
|
|
|
+ <el-table-column prop="date" label="Date" />
|
|
|
+ <el-table-column prop="name" label="Name" />
|
|
|
+ <el-table-column prop="address" label="Address" />
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { storeToRefs } from 'pinia'
|
|
|
+import { usePublicData } from '/@/stores/publicData'
|
|
|
+import DateRangePicker from '/@/components/DateRangePicker/index.vue'
|
|
|
+import DataTendencyChart from '/@/views/adManage/sb/chartComponents/dataTendency.vue'
|
|
|
+import { useShopInfo } from '/@/stores/shopInfo'
|
|
|
+import { getCardData, getLineData, getLineMonthData, getLineWeekData } from './api'
|
|
|
+import { ref } from 'vue'
|
|
|
+
|
|
|
+const publicData = usePublicData()
|
|
|
+const { dateRange } = storeToRefs(publicData)
|
|
|
+const shopInfo = useShopInfo()
|
|
|
+const { profile } = storeToRefs(shopInfo)
|
|
|
+const queryParams = ref({
|
|
|
+ profileId: profile.value.profile_id,
|
|
|
+ dateRange,
|
|
|
+})
|
|
|
+
|
|
|
+const tableData = ref([
|
|
|
+ { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
|
|
|
+ { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
|
|
|
+ { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
|
|
|
+ { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' },
|
|
|
+])
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.outer-container {
|
|
|
+ padding: 5px 10px 0 10px;
|
|
|
+}
|
|
|
+.filters {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ gap: 10px;
|
|
|
+}
|
|
|
+.table-tips {
|
|
|
+ color: #8d9095;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin: 8px 0;
|
|
|
+}
|
|
|
+.pl-and-asin-tables {
|
|
|
+ padding: 10px 12px 0 12px;
|
|
|
+}
|
|
|
+.product-lines {
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+.asin-table-container {
|
|
|
+ width: 100%;
|
|
|
+ padding: 8px;
|
|
|
+ color: #4e5969;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 4px;
|
|
|
+ box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.06);
|
|
|
+}
|
|
|
+.xp-radio-group-wrapper {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.scrollbar-flex-content {
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+.scrollbar-demo-item {
|
|
|
+ flex-shrink: 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 100px;
|
|
|
+ height: 50px;
|
|
|
+ margin: 10px;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 4px;
|
|
|
+ background: var(--el-color-danger-light-9);
|
|
|
+ color: var(--el-color-danger);
|
|
|
+}
|
|
|
+</style>
|