feat(property-marketing): 优化投放指南详情页样式和平台图标展示 perf: 移除冗余代码和定时任务日志 style: 统一使用Alibaba PuHuiTi字体,调整间距和样式结构

This commit is contained in:
林志军
2025-07-10 16:49:33 +08:00
parent 9174b62557
commit e8616db292
5 changed files with 48 additions and 64 deletions

View File

@ -102,5 +102,4 @@ const props = defineProps({
}); });
</script> </script>
<style lang="scss"> <style lang="scss"></style>
</style>

View File

@ -2,9 +2,9 @@
<view> <view>
<a-table class="account-table" :columns="columns" :data="listData" :pagination="false"> <a-table class="account-table" :columns="columns" :data="listData" :pagination="false">
<template #platform="{ record }"> <template #platform="{ record }">
<span class="mr-5px" v-if="record.platform.length > 0" v-for="(item, index) in record.platform"> <span class="mr-8px" v-if="record.platform.length > 0" v-for="(item, index) in record.platform">
<img :src="PLATFORM_LIST[item].icon" width="19" class="mr-4px" /> <img :src="PLATFORM_LIST?.[item]?.icon" width="15" height="15" />
<span>{{ PLATFORM_LIST[item].label }}</span> <span class="label ml-5px">{{ PLATFORM_LIST?.[item]?.label }}</span>
</span> </span>
</template> </template>
<template #operation="{ record }"> <template #operation="{ record }">
@ -33,7 +33,6 @@
import { IconDelete } from '@arco-design/web-vue/es/icon'; import { IconDelete } from '@arco-design/web-vue/es/icon';
import { PLATFORM_LIST } from '@/views/property-marketing/put-account/common_constants'; import { PLATFORM_LIST } from '@/views/property-marketing/put-account/common_constants';
import { Message } from '@arco-design/web-vue'; import { Message } from '@arco-design/web-vue';
import html2canvas from 'html2canvas';
const columns = [ const columns = [
{ {
@ -113,30 +112,11 @@ const props = defineProps({
}); });
</script> </script>
<style scoped lang="less"> <style scoped lang="scss">
.arco-textarea-wrapper,
.arco-input-wrapper {
border-radius: 4px;
border-color: #d7d7d9;
background-color: #fff;
&:focus-within,
&.arco-input-focus {
background-color: var(--color-bg-2);
border-color: rgb(var(--primary-6));
box-shadow: 0 0 0 0 var(--color-primary-light-2);
}
&.arco-input-wrapper {
height: 35px;
}
}
.operation-btn { .operation-btn {
// 下载
color: var(--Brand-6, #6d4cfe); color: var(--Brand-6, #6d4cfe);
font-size: 14px; font-size: 14px;
font-family: PuHuiTi-Medium; font-family: Alibaba PuHuiTi;
font-weight: 400; font-weight: 400;
line-height: 22px; line-height: 22px;
word-wrap: break-word; word-wrap: break-word;

View File

@ -10,8 +10,8 @@
<a-col :span="12"> <a-col :span="12">
<div class=""> <div class="">
<a-space direction="vertical"> <a-space direction="vertical">
<span>账户</span> <span class="span-title">账户</span>
<span>{{ detailData?.account }}</span> <span class="span-content">{{ detailData?.account }}</span>
</a-space> </a-space>
</div> </div>
</a-col> </a-col>
@ -19,8 +19,8 @@
<a-col :span="12"> <a-col :span="12">
<div class=""> <div class="">
<a-space direction="vertical"> <a-space direction="vertical">
<span>计划</span> <span class="span-title">计划</span>
<span>3</span> <span class="span-content">{{detailData.plan}}</span>
</a-space> </a-space>
</div> </div>
</a-col> </a-col>
@ -29,32 +29,36 @@
<a-col :span="12"> <a-col :span="12">
<div class=""> <div class="">
<a-space direction="vertical"> <a-space direction="vertical">
<span>平台</span> <span class="span-title">平台</span>
<span class="mr-5px" v-if="detailData.platform.length > 0" v-for="(item, index) in detailData.platform"> <a-space>
<img :src="PLATFORM_LIST[item].icon" width="19" class="mr-4px" /> <span
<span>{{ PLATFORM_LIST[item].label }}</span> class="mr-8px"
v-if="detailData.platform.length > 0"
v-for="(item, index) in detailData.platform"
>
<img :src="PLATFORM_LIST?.[item]?.icon" width="15" height="15" />
<span class="label ml-5px">{{ PLATFORM_LIST?.[item]?.label }}</span>
</span> </span>
</a-space> </a-space>
</a-space>
</div> </div>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<div class=""> <div class="">
<a-space direction="vertical"> <a-space direction="vertical">
<span>生成时间</span> <span class="span-title">生成时间</span>
<span>{{ detailData.created_at }}</span> <span class="span-content">{{ detailData.created_at }}</span>
</a-space> </a-space>
</div> </div>
</a-col> </a-col>
</a-row> </a-row>
</div> </div>
</div> </div>
<div>
<MonthData :overview="aiResult.overview"></MonthData> <MonthData :overview="aiResult.overview"></MonthData>
<!-- 投放建议--> <!-- 投放建议-->
<PlacementSuggestions :optimization="aiResult.optimization"></PlacementSuggestions> <PlacementSuggestions :optimization="aiResult.optimization"></PlacementSuggestions>
</div>
<div class="ignore-export"> <div class="ignore-export">
<a-space class="down-btn"> <a-space class="down-btn">
<a-button type="outline" :loading="exportLoading" @click="downPage"> <a-button type="outline" :loading="exportLoading" @click="downPage">

View File

@ -44,18 +44,10 @@
/> />
</div> </div>
</div> </div>
<a-spin
v-show="tabData === 'placement_guide'"
:loading="loading"
tip="AI分析中...."
wrapperClassName="custom-spin-wrapper"
>
<div>
<MonthData :overview="aiResult.overview"></MonthData>
<!-- 投放建议--> <!-- 投放建议-->
<MonthData :overview="aiResult.overview"></MonthData>
<PlacementSuggestions :optimization="aiResult.optimization"></PlacementSuggestions> <PlacementSuggestions :optimization="aiResult.optimization"></PlacementSuggestions>
</div>
</a-spin>
<div v-if="tabData == 'placement_guide'" class="ignore-export"> <div v-if="tabData == 'placement_guide'" class="ignore-export">
<a-space class="down-btn"> <a-space class="down-btn">
<a-button type="outline" :loading="exportLoading" @click="downPage"> <a-button type="outline" :loading="exportLoading" @click="downPage">
@ -89,7 +81,7 @@ import {
savePlacementGuide, savePlacementGuide,
} from '@/api/all/propertyMarketing'; } from '@/api/all/propertyMarketing';
import { Message } from '@arco-design/web-vue'; import { Message } from '@arco-design/web-vue';
import { AiResultStatus } from '@/views/property-marketing/put-account/investment-guidelines/constants'; import { AiResultStatus, generatePDF } from '@/views/property-marketing/put-account/investment-guidelines/constants';
import { uploadPdf } from '@/views/property-marketing/put-account/investment-guidelines/constants'; import { uploadPdf } from '@/views/property-marketing/put-account/investment-guidelines/constants';
const tabData = ref('placement_guide'); const tabData = ref('placement_guide');
@ -164,10 +156,7 @@ const downPage = async () => {
let fileUrl = saveForm.file_url; let fileUrl = saveForm.file_url;
exportLoading.value = true; exportLoading.value = true;
if (saveForm.file_url === '') { if (saveForm.file_url === '') {
// fileUrl = await uploadPdf('投放指南.pdf', '.guidelines-data-wrap'); fileUrl = await uploadPdf('投放指南.pdf', '.guidelines-data-wrap');
fileUrl =
'https://lingji-test-1334771076.cos.ap-nanjing.myqcloud.com/files/1b0d2056-75e1-4f23-995a-17c1b28b44e9.pdf';
saveForm.file_url = fileUrl;
} }
console.log(fileUrl, 'fileUrl'); console.log(fileUrl, 'fileUrl');
const link = document.createElement('a'); const link = document.createElement('a');
@ -206,7 +195,6 @@ const syncGetAiResult = async () => {
console.log('定时任务执行结果:', data); console.log('定时任务执行结果:', data);
if (data.ai_result_status === AiResultStatus.SUCCESS || data.ai_result_status === AiResultStatus.FAILED) { if (data.ai_result_status === AiResultStatus.SUCCESS || data.ai_result_status === AiResultStatus.FAILED) {
stopTask(); stopTask();
console.log('任务已完成,定时器已关闭');
} }
if (data.ai_result_status === AiResultStatus.SUCCESS) { if (data.ai_result_status === AiResultStatus.SUCCESS) {
loading.value = false; loading.value = false;
@ -235,7 +223,6 @@ const handleReset = () => {
console.log('handleReset'); console.log('handleReset');
query.page = 1; query.page = 1;
query.page_size = 20; query.page_size = 20;
query.account_name = '';
query.platform = ''; query.platform = '';
query.sort_column = ''; query.sort_column = '';
query.sort_order = ''; query.sort_order = '';

View File

@ -1,7 +1,8 @@
.table-wrap { .table-wrap {
width: 100%; width: 100%;
.pagination-box { .pagination-box {
display: flex; display: flex;
width: 100%; width: 100%;
@ -202,7 +203,7 @@
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; align-items: flex-start;
gap: 12px; gap: 12px;
display: inline-flex; display: flex;
margin: 20px; margin: 20px;
} }
@ -271,4 +272,17 @@
line-height: 22px; line-height: 22px;
word-wrap: break-word word-wrap: break-word
} }
.span-content{
font-family: Alibaba PuHuiTi;
}
.span-title{
color: var(--Text-3, #737478);
font-size: 14px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
line-height: 22px;
word-wrap: break-word
}
} }