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 @@
<!-- 对比内容（按group分组展示） -->
<!-- 对比内容：从 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
class="compare-section"
v-for="group in renderGroups"
v-for="group in getFirstProductGroups()"
:key="group.groupCode"
>
<view class="section-header">
......@@ -41,23 +42,24 @@
<text class="section-title">{{ group.groupName }}</text>
</view>
<view class="section-content">
<!-- 遍历当前分组下的所有属性（factor） -->
<view
class="compare-item"
:class="{ 'hidden-item': shouldHide(field.fieldBizId) }"
v-for="field in group.fields"
:key="field.fieldBizId"
:class="{ 'hidden-item': shouldHide(group.groupCode, factor.type) }"
v-for="factor in group.factors"
:key="factor.type"
>
<text class="item-label">{{ field.label }}</text>
<text class="item-label">{{ factor.typeName }}</text>
<view class="item-values">
<!-- 遍历所有产品，匹配当前分组+当前属性的内容 -->
<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>
<!-- 产品彩页分组（单独处理，从 planFiles 提取） -->
<view class="compare-section" id="product-file-group">
<view class="section-header">
......@@ -94,36 +96,6 @@
<text class="empty-text">暂无对比产品数据</text>
</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>
<script setup>
......@@ -131,137 +103,165 @@ import { ref, computed, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import common from '@/common/common';
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 route = useRoute();
// 原始数据
// 后端返回的原始数据
const resultData = ref({});
const configList = ref([]); // ← 新增：用于定义页面结构
// 配置分组列表（基本信息、适合人群等）
const configList = ref([]);
// 产品对比信息列表
const productPKInfoList = ref([]);
// 是否只看不同
const showOnlyDiff = ref(false);
const currentPdfUrl = ref('');
const showPdfModal = ref(false);
// 【✅ 关键修正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;
});
};
// 查看文件的URL
const viewFileUrl = ref()
// 其余方法保持不变（图标、颜色、PDF、分享等）
// 根据分组编码获取对应的图标
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';
};
// 根据分组编码获取对应的颜色
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';
};
const wxShare = (productIds, categoryId) => {
import {hshare} from '@/util/fiveshare';
const wxShare = (productIds,categoryId)=>{
// H5 自定义分享
const shareLink = `${window.location.origin}/myPackageA/compare-result/compare-result?categoryId=${categoryId}&productIds=${productIds}`;
// 2. 分享标题（简洁明了，包含产品数量）
const shareTitle = `多款产品对比结果`;
// 3. 分享描述（突出对比价值）
const shareDesc = `包含核心参数对比，快速了解差异`;
// 4. 分享图标（建议用公司LOGO或产品相关图标，尺寸200x200px，HTTPS地址）
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];
//ios机型获取当前页面路径
let ua = navigator.userAgent.toLowerCase();
let isWeixin = ua.indexOf('micromessenger') !== -1;
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')) {
url = window.sessionStorage.getItem('firstEntryUrl').split('#')[0];
}
}
hshare(data, url);
};
const navigateToPKPage = () => {
uni.navigateBack();
};
hshare(data, url)
}
const getUrl = (fileUrl) => {
if (!fileUrl) {
uni.showToast({ title: '暂无文档', icon: 'none' });
return;
}
uni.showLoading({ title: '加载PDF中...' });
currentPdfUrl.value = fileUrl;
showPdfModal.value = true;
setTimeout(() => {
pdfPopupRef.value?.open?.();
uni.hideLoading();
}, 100);
// 区分环境：H5 端直接打开 URL，其他端用原下载逻辑
if (uni.getSystemInfoSync().uniPlatform === 'web') {
// H5 方案：用浏览器新窗口打开 PDF（依赖浏览器原生支持）
const opened = window.open(fileUrl, '_blank');
} else {
// 非 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 = () => {
showPdfModal.value = false;
setTimeout(() => pdfPopupRef.value?.close?.(), 100);
// 【核心2：获取指定产品、指定分组、指定属性的内容】
const getProductFactorValue = (product, groupCode, factorType) => {
// 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(() => {
const { productIds, categoryId } = route.query;
const { productIds, categoryId} = route.query;
if (!productIds || !categoryId) {
uni.showToast({ title: '缺少对比参数', icon: 'none' });
return;
......@@ -271,22 +271,21 @@ onMounted(() => {
category: categoryId,
planBizIdList: productIds.split(',')
};
let ua = navigator.userAgent.toLowerCase();
let isWeixin = ua.indexOf('micromessenger') !== -1;
api.getProductPKInfo(params).then(res => {
if (res.success && res.data) {
// ✅ 同时保存 configList 和 product 列表
initConfigStructure(res.data.configList || []);
productPKInfoList.value = res.data.productPKInfoList || [];
if (res.success && res.data?.productPKInfoList) {
productPKInfoList.value = res.data.productPKInfoList;
if (isWeixin) wxShare(productIds, categoryId);
// 微信环境初始化分享（如有）
if (isWeixin) {
wxShare(productIds,categoryId)
}
} else {
common.errorDialog(1, res.message || '获取对比数据失败');
}
});
});
})
</script>
<style scoped>
......@@ -489,38 +488,4 @@ onMounted(() => {
align-items: 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>
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