Skip to content

C
CFFP-HB
Commit 348b1c97 by Sweet Zhang
Options

产品对比版本回退为原始方案，新版本不上线

parent 2b45f1cf
Showing with 138 additions and 173 deletions
myPackageA/compare-result/compare-result.vue
...@@ -26,10 +26,11 @@ ...@@ -26,10 +26,11 @@
<!-- 对比内容（按group分组展示） --> <!-- 对比内容（按group分组展示） -->
<!-- 对比内容：从 productPKInfoList.basicInfos 提取分组渲染 --> <!-- 对比内容：从 productPKInfoList.basicInfos 提取分组渲染 -->
<view class="compare-content" v-if="productPKInfoList.length > 0 && renderGroups.length > 0"> <view class="compare-content" v-if="productPKInfoList.length > 0">
<!-- 核心：从第一个产品的 basicInfos 中遍历分组（A/B/C组） -->
<view <view
class="compare-section" class="compare-section"
v-for="group in renderGroups" v-for="group in getFirstProductGroups()"
:key="group.groupCode" :key="group.groupCode"
> >
<view class="section-header"> <view class="section-header">
...@@ -41,23 +42,24 @@ ...@@ -41,23 +42,24 @@
<text class="section-title">{{ group.groupName }}</text> <text class="section-title">{{ group.groupName }}</text>
</view> </view>
<view class="section-content"> <view class="section-content">
<!-- 遍历当前分组下的所有属性（factor） -->
<view <view
class="compare-item" class="compare-item"
:class="{ 'hidden-item': shouldHide(field.fieldBizId) }" :class="{ 'hidden-item': shouldHide(group.groupCode, factor.type) }"
v-for="field in group.fields" v-for="factor in group.factors"
:key="field.fieldBizId" :key="factor.type"
> >
<text class="item-label">{{ field.label }}</text> <text class="item-label">{{ factor.typeName }}</text>
<view class="item-values"> <view class="item-values">
<!-- 遍历所有产品，匹配当前分组+当前属性的内容 -->
<view class="item-value" v-for="product in productPKInfoList" :key="product.planBizId"> <view class="item-value" v-for="product in productPKInfoList" :key="product.planBizId">
{{ getProductFieldValue(product, field.fieldBizId) || '-' }} {{ getProductFactorValue(product, group.groupCode, factor.type) || '-' }}
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<!-- 产品彩页分组（单独处理，从 planFiles 提取） --> <!-- 产品彩页分组（单独处理，从 planFiles 提取） -->
<view class="compare-section" id="product-file-group"> <view class="compare-section" id="product-file-group">
<view class="section-header"> <view class="section-header">
...@@ -94,36 +96,6 @@ ...@@ -94,36 +96,6 @@
<text class="empty-text">暂无对比产品数据</text> <text class="empty-text">暂无对比产品数据</text>
</view> </view>
</view> </view>
<!-- 放在 </view> 最后，</template> 之前 -->
<!-- PDF 查看弹窗 -->
<!-- 调试用 -->
<view v-if="showPdfModal">Debug URL: {{ currentPdfUrl }}</view>
<uni-popup
ref="pdfPopupRef"
:mask-click="true"
type="bottom"
@change="onPopupChange"
>
<view class="pdf-modal-container">
<!-- 关闭按钮 -->
<view class="modal-header">
<button class="close-btn" @click="closePdfModal">✕</button>
</view>
<!-- PDF 查看器 -->
<view class="pdf-viewer-wrapper" v-if="showPdfModal && currentPdfUrl">
<PdfViewer
:pdfInfo="{ url: currentPdfUrl }"
:autoLoad="true"
:lazyLoad="false"
:maxRetryCount="2"
@loadComplete="handlePdfLoadComplete"
@loadError="handlePdfLoadError"
@pageChange="handlePageChange"
/>
</view>
</view>
</uni-popup>
</template> </template>
<script setup> <script setup>
...@@ -131,137 +103,165 @@ import { ref, computed, onMounted } from 'vue'; ...@@ -131,137 +103,165 @@ import { ref, computed, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router'; import { useRouter, useRoute } from 'vue-router';
import common from '@/common/common'; import common from '@/common/common';
import api from '@/api/api'; import api from '@/api/api';
import PdfViewer from '@/components/pdf-viewer/pdf-viewer.vue'; // 路由实例
import { onBeforeUnmount } from 'vue';
import uniPopup from '@dcloudio/uni-ui/lib/uni-popup/uni-popup.vue';
import { hshare } from '@/util/fiveshare';
const pdfPopupRef = ref();
const router = useRouter(); const router = useRouter();
const route = useRoute(); const route = useRoute();
// 原始数据 // 后端返回的原始数据
const resultData = ref({}); const resultData = ref({});
const configList = ref([]); // ← 新增：用于定义页面结构 // 配置分组列表（基本信息、适合人群等）
const configList = ref([]);
// 产品对比信息列表
const productPKInfoList = ref([]); const productPKInfoList = ref([]);
// 是否只看不同
const showOnlyDiff = ref(false); const showOnlyDiff = ref(false);
const currentPdfUrl = ref(''); // 查看文件的URL
const showPdfModal = ref(false); const viewFileUrl = ref()
// 【✅ 关键修正1：构建 fieldBizId → 字段元信息 的映射】
const fieldMetaMap = ref(new Map()); // fieldBizId => { cnName, groupCode }
// 【✅ 关键修正2：初始化 configList 并构建映射】
const initConfigStructure = (configs) => {
configList.value = configs;
const map = new Map();
configs.forEach(group => {
group.fieldList.forEach(field => {
map.set(field.fieldBizId, {
cnName: field.fieldCnName,
groupCode: group.groupCode,
groupName: group.groupName
});
});
});
fieldMetaMap.value = map;
};
// 【✅ 关键修正3：获取标准化的分组+字段结构（用于渲染）】
const renderGroups = computed(() => {
return configList.value.map(group => ({
groupCode: group.groupCode,
groupName: group.groupName,
fields: group.fieldList.map(field => ({
fieldBizId: field.fieldBizId,
label: field.fieldCnName
}))
}));
});
// 【✅ 关键修正4：根据 fieldBizId 获取产品值】
const getProductFieldValue = (product, fieldBizId) => {
for (const basicInfo of product.basicInfos || []) {
const factor = basicInfo.factors?.find(f => f.type === fieldBizId);
if (factor) return factor.content || '';
}
return ''; // 未找到返回空
};
// 【✅ 关键修正5：判断是否应隐藏（只看不同）】
const shouldHide = (fieldBizId) => {
if (!showOnlyDiff.value || productPKInfoList.value.length <= 1) return false;
const normalize = (val) => (val === '' || val === '/' ? '无数据' : val);
const baseValue = normalize(getProductFieldValue(productPKInfoList.value[0], fieldBizId));
return productPKInfoList.value.every(product => {
return normalize(getProductFieldValue(product, fieldBizId)) === baseValue;
});
};
// 其余方法保持不变（图标、颜色、PDF、分享等） // 根据分组编码获取对应的图标
const getGroupIcon = (groupCode) => { const getGroupIcon = (groupCode) => {
const iconMap = { A: 'info', B: 'auth', C: 'star', D: 'image' }; const iconMap = {
'A': 'info', // 基本信息
'B': 'auth', // 适合人群
'C': 'star', // 产品特色
'D': 'image' // 产品彩页
};
return iconMap[groupCode] || 'help'; return iconMap[groupCode] || 'help';
}; };
// 根据分组编码获取对应的颜色
const getGroupColor = (groupCode) => { const getGroupColor = (groupCode) => {
const colorMap = { A: '#20269B', B: '#00cc66', C: '#ff9900', D: '#cc66ff' }; const colorMap = {
'A': '#20269B', // 基本信息-蓝色
'B': '#00cc66', // 适合人群-绿色
'C': '#ff9900', // 产品特色-橙色
'D': '#cc66ff' // 产品彩页-紫色
};
return colorMap[groupCode] || '#999'; return colorMap[groupCode] || '#999';
}; };
import {hshare} from '@/util/fiveshare';
const wxShare = (productIds, categoryId) => { const wxShare = (productIds,categoryId)=>{
// H5 自定义分享
const shareLink = `${window.location.origin}/myPackageA/compare-result/compare-result?categoryId=${categoryId}&productIds=${productIds}`; const shareLink = `${window.location.origin}/myPackageA/compare-result/compare-result?categoryId=${categoryId}&productIds=${productIds}`;
// 2. 分享标题（简洁明了，包含产品数量）
const shareTitle = `多款产品对比结果`; const shareTitle = `多款产品对比结果`;
// 3. 分享描述（突出对比价值）
const shareDesc = `包含核心参数对比，快速了解差异`; const shareDesc = `包含核心参数对比，快速了解差异`;
// 4. 分享图标（建议用公司LOGO或产品相关图标，尺寸200x200px，HTTPS地址）
const shareIcon = `${window.location.origin}/static/mypoint_pic.png`; const shareIcon = `${window.location.origin}/static/mypoint_pic.png`;
let data = { title: shareTitle, desc: shareDesc, link: shareLink, imgUrl: shareIcon }; let data = {
title: shareTitle,
desc:shareDesc,
link: shareLink, //分享链接
imgUrl: shareIcon, //图片c
}
//安卓机型获取当前页面路径
let url = window.location.href.split('#')[0]; let url = window.location.href.split('#')[0];
//ios机型获取当前页面路径
let ua = navigator.userAgent.toLowerCase(); let ua = navigator.userAgent.toLowerCase();
let isWeixin = ua.indexOf('micromessenger') !== -1; let isWeixin = ua.indexOf('micromessenger') !== -1;
if (isWeixin) { if (isWeixin) {
let isiOS = /(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent); let isiOS = /(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent); //ios终端
if (isiOS && window.sessionStorage.getItem('firstEntryUrl')) { if (isiOS && window.sessionStorage.getItem('firstEntryUrl')) {
url = window.sessionStorage.getItem('firstEntryUrl').split('#')[0]; url = window.sessionStorage.getItem('firstEntryUrl').split('#')[0];
} }
} }
hshare(data, url); hshare(data, url)
}; }
const navigateToPKPage = () => {
uni.navigateBack();
};
const getUrl = (fileUrl) => { const getUrl = (fileUrl) => {
if (!fileUrl) { if (!fileUrl) {
uni.showToast({ title: '暂无文档', icon: 'none' }); uni.showToast({ title: '暂无文档', icon: 'none' });
return; return;
} }
uni.showLoading({ title: '加载PDF中...' });
currentPdfUrl.value = fileUrl; // 区分环境：H5 端直接打开 URL，其他端用原下载逻辑
showPdfModal.value = true; if (uni.getSystemInfoSync().uniPlatform === 'web') {
setTimeout(() => { // H5 方案：用浏览器新窗口打开 PDF（依赖浏览器原生支持）
pdfPopupRef.value?.open?.(); const opened = window.open(fileUrl, '_blank');
uni.hideLoading(); } else {
}, 100); // 非 H5 端（小程序/APP）：保留原下载+打开逻辑
uni.downloadFile({
url: fileUrl,
success: (res) => {
if (res.statusCode === 200) {
uni.openDocument({
filePath: res.tempFilePath,
showMenu: true,
success: () => console.log('打开文档成功'),
fail: (err) => {
uni.showToast({ title: '打开失败，请重试', icon: 'none' });
console.error('openDocument 失败：', err);
}
});
} else {
uni.showToast({ title: '下载失败', icon: 'none' });
}
},
fail: (err) => {
uni.showToast({ title: '下载失败，请检查网络', icon: 'none' });
console.error('downloadFile 失败：', err);
}
});
}
};
// 【核心1：获取第一个产品的分组列表（A/B/C组）】
// 所有产品的分组结构一致，取第一个产品的 basicInfos 作为分组源
const getFirstProductGroups = () => {
if (productPKInfoList.value.length === 0) return [];
return productPKInfoList.value[0].basicInfos || [];
}; };
const closePdfModal = () => { // 【核心2：获取指定产品、指定分组、指定属性的内容】
showPdfModal.value = false; const getProductFactorValue = (product, groupCode, factorType) => {
setTimeout(() => pdfPopupRef.value?.close?.(), 100); // 1. 找到产品中当前分组（如A组-基本信息）
const targetGroup = product.basicInfos.find(item => item.groupCode === groupCode);
if (!targetGroup) return '';
// 2. 找到分组中当前属性（如type=5-保障期限）
const targetFactor = targetGroup.factors.find(item => item.type === factorType);
return targetFactor ? targetFactor.content : '';
}; };
const onPopupChange = (e) => {
if (!e.show && showPdfModal.value) showPdfModal.value = false; // 【核心3：判断属性是否所有产品都相同（“只看不同”逻辑）】
const shouldHide = (groupCode, factorType) => {
// 未开启“只看不同”或只有1个产品，不隐藏
if (!showOnlyDiff.value || productPKInfoList.value.length <= 1) return false;
// 取第一个产品的属性值作为基准
const firstProduct = productPKInfoList.value[0];
const baseValue = getProductFactorValue(firstProduct, groupCode, factorType);
// 归一化空值（避免“/”“空字符串”视为不同）
const normalize = (val) => val === '' || val === '/' ? '无数据' : val;
const baseNormalized = normalize(baseValue);
// 检查所有产品的当前属性值是否与基准一致
const allSame = productPKInfoList.value.every(product => {
const currentValue = getProductFactorValue(product, groupCode, factorType);
return normalize(currentValue) === baseNormalized;
});
// 所有产品相同则隐藏，否则显示
return allSame;
}; };
onBeforeUnmount(() => {
if (pdfPopupRef.value) pdfPopupRef.value.close();
});
// 【✅ 关键修正6：初始化时同时处理 configList 和 productPKInfoList】 // 前往PK选择页
const navigateToPKPage = () => {
uni.navigateBack()
};
// 初始化数据
onMounted(() => { onMounted(() => {
const { productIds, categoryId } = route.query;
const { productIds, categoryId} = route.query;
if (!productIds || !categoryId) { if (!productIds || !categoryId) {
uni.showToast({ title: '缺少对比参数', icon: 'none' }); uni.showToast({ title: '缺少对比参数', icon: 'none' });
return; return;
...@@ -271,22 +271,21 @@ onMounted(() => { ...@@ -271,22 +271,21 @@ onMounted(() => {
category: categoryId, category: categoryId,
planBizIdList: productIds.split(',') planBizIdList: productIds.split(',')
}; };
let ua = navigator.userAgent.toLowerCase(); let ua = navigator.userAgent.toLowerCase();
let isWeixin = ua.indexOf('micromessenger') !== -1; let isWeixin = ua.indexOf('micromessenger') !== -1;
api.getProductPKInfo(params).then(res => { api.getProductPKInfo(params).then(res => {
if (res.success && res.data) { if (res.success && res.data?.productPKInfoList) {
// ✅ 同时保存 configList 和 product 列表 productPKInfoList.value = res.data.productPKInfoList;
initConfigStructure(res.data.configList || []);
productPKInfoList.value = res.data.productPKInfoList || [];
if (isWeixin) wxShare(productIds, categoryId); // 微信环境初始化分享（如有）
if (isWeixin) {
wxShare(productIds,categoryId)
}
} else { } else {
common.errorDialog(1, res.message || '获取对比数据失败'); common.errorDialog(1, res.message || '获取对比数据失败');
} }
}); });
}); })
</script> </script>
<style scoped> <style scoped>
...@@ -489,38 +488,4 @@ onMounted(() => { ...@@ -489,38 +488,4 @@ onMounted(() => {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.pdf-modal-container {
width: 100vw;
height: 90vh; /* 占屏 90% */
background: #fff;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
overflow: hidden;
display: flex;
flex-direction: column;
}
.modal-header {
padding: 20rpx;
text-align: right;
}
.close-btn {
width: 60rpx;
height: 60rpx;
font-size: 36rpx;
background: #f5f5f5;
border-radius: 50%;
border: none;
color: #999;
display: flex;
justify-content: center;
align-items: center;
}
.pdf-viewer-wrapper {
flex: 1;
width: 100%;
overflow: hidden;
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment