f
This commit is contained in:
565
src/views/Promote.vue
Normal file
565
src/views/Promote.vue
Normal file
@@ -0,0 +1,565 @@
|
||||
<template>
|
||||
<div class="min-h-screen promote">
|
||||
<!-- 顶部背景图 -->
|
||||
<div class="promote-header-bg">
|
||||
<img src="@/assets/images/promote/promote_bg.jpg" alt="推广背景" class="bg-image" />
|
||||
</div>
|
||||
|
||||
<div class="p-4">
|
||||
<!-- 价格设置卡片 -->
|
||||
<div class="card mb-4 card-with-header">
|
||||
<!-- 优雅的报告头部 -->
|
||||
<div class="report-header-elegant">
|
||||
<div class="report-header-content">
|
||||
<div class="report-logo-container" v-if="currentLogo">
|
||||
<div class="report-logo-wrapper">
|
||||
<img :src="currentLogo" :alt="pickerFieldText" class="report-logo-elegant" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="report-info-elegant">
|
||||
<div class="report-label-elegant">推广报告</div>
|
||||
<div class="report-title-elegant">{{ pickerFieldText || '请选择报告类型' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="report-action-elegant" @click="showTypePicker = true">
|
||||
<div class="report-action-icon">
|
||||
<van-icon name="exchange" size="16" color="#ffffff" />
|
||||
</div>
|
||||
<span class="report-action-text">切换</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4 pt-6">
|
||||
<!-- 当前价格显示 -->
|
||||
<div class="flex items-center justify-between py-3 border-b border-gray-100">
|
||||
<label class="font-medium text-gray-700">客户查询价</label>
|
||||
<span class="text-lg font-semibold text-orange-500">¥{{ clientPrice || '0.00' }}</span>
|
||||
</div>
|
||||
|
||||
<!-- 成本和收益信息 -->
|
||||
<div class="bg-gray-50 rounded-lg p-3 space-y-2">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm text-gray-600">我的成本</span>
|
||||
<span class="text-sm font-semibold text-orange-500">¥{{ costPrice }}</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm text-gray-600">推广收益</span>
|
||||
<span class="text-sm font-semibold text-orange-500">¥{{ promotionRevenue }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮组 -->
|
||||
<div class="grid grid-cols-3 gap-3 mt-4">
|
||||
<van-button type="primary" size="large" class="custom-btn-primary"
|
||||
@click="showPricePicker = true">设置价格</van-button>
|
||||
<van-button type="primary" size="large" class="custom-btn-primary"
|
||||
@click="generatePromotionCode" :disabled="!clientPrice || !currentFeature">推广报告</van-button>
|
||||
<van-button type="default" size="large" class="custom-btn-default" @click="toExample"
|
||||
:disabled="!currentFeature">示例报告</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 报告信息卡片 -->
|
||||
<div v-if="featureData.product_name" class="card mb-4">
|
||||
<ReportFeatures :features="featureData.features" />
|
||||
</div>
|
||||
|
||||
<!-- 报告类型选择弹窗 -->
|
||||
<van-popup v-model:show="showTypePicker" destroy-on-close round position="bottom">
|
||||
<van-picker :model-value="selectedReportType" :columns="reportTypes" @cancel="showTypePicker = false"
|
||||
@confirm="onConfirmType" />
|
||||
</van-popup>
|
||||
|
||||
<!-- 价格设置弹窗 -->
|
||||
<PriceInputPopup v-model:show="showPricePicker" :default-price="clientPrice"
|
||||
:product-config="pickerProductConfig" @change="onPriceChange" />
|
||||
|
||||
<!-- 二维码弹窗 -->
|
||||
<QRcode v-model:show="showQRcode" :linkIdentifier="linkIdentifier" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import PriceInputPopup from '@/components/PriceInputPopup.vue';
|
||||
import QRcode from '@/components/QRcode.vue';
|
||||
import ReportFeatures from '@/components/ReportFeatures.vue';
|
||||
|
||||
// 导入logo图片
|
||||
import personalDataLogo from '@/assets/images/promote/personal_data_logo.png';
|
||||
import companyLogo from '@/assets/images/promote/company_logo.png';
|
||||
import preloanBackgroundCheckLogo from '@/assets/images/promote/preloan_background_check_logo.png';
|
||||
import marriageRiskLogo from '@/assets/images/promote/marriage_risk_logo.png';
|
||||
import housekeepingRiskLogo from '@/assets/images/promote/housekeeping_risk_logo.png';
|
||||
import backgroundcheckLogo from '@/assets/images/promote/backgroundcheck_logo.png';
|
||||
import consumerFinanceReportLogo from '@/assets/images/promote/consumer_finance_report_logo.png';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
// 报告类型配置（保持原来的数据结构）
|
||||
const reportTypes = [
|
||||
{ text: "小微企业", value: "companyinfo", id: 2 },
|
||||
{ text: "贷前风险", value: "preloanbackgroundcheck", id: 5 },
|
||||
{ text: "个人大数据", value: "personalData", id: 27 },
|
||||
{ text: '入职背调', value: 'backgroundcheck', id: 1 },
|
||||
{ text: '家政风险', value: 'homeservice', id: 3 },
|
||||
{ text: '婚恋风险', value: 'marriage', id: 4 },
|
||||
{ text: "消金报告", value: "consumerFinanceReport", id: 28 },
|
||||
];
|
||||
|
||||
// 从 query 参数获取报告类型（使用 computed 以响应路由变化）
|
||||
const currentFeature = computed(() => route.query.feature || '');
|
||||
const showPricePicker = ref(false);
|
||||
const showTypePicker = ref(false);
|
||||
const pickerFieldText = ref('');
|
||||
const selectedReportType = ref([]);
|
||||
const pickerProductConfig = ref(null);
|
||||
const pickerFieldVal = ref(null); // 保持原来的变量名，用于存储报告类型的 value
|
||||
const clientPrice = ref(null);
|
||||
const productConfig = ref(null);
|
||||
const linkIdentifier = ref("");
|
||||
const featureData = ref({});
|
||||
const showQRcode = ref(false);
|
||||
|
||||
// Logo映射
|
||||
const logoMap = {
|
||||
'personalData': personalDataLogo,
|
||||
'companyinfo': companyLogo,
|
||||
'preloanbackgroundcheck': preloanBackgroundCheckLogo,
|
||||
'marriage': marriageRiskLogo,
|
||||
'homeservice': housekeepingRiskLogo,
|
||||
'backgroundcheck': backgroundcheckLogo,
|
||||
'consumerFinanceReport': consumerFinanceReportLogo,
|
||||
};
|
||||
|
||||
// 当前报告的logo
|
||||
const currentLogo = computed(() => {
|
||||
if (!currentFeature.value) return null;
|
||||
return logoMap[currentFeature.value] || null;
|
||||
});
|
||||
|
||||
const costPrice = computed(() => {
|
||||
if (!pickerProductConfig.value) return 0.00
|
||||
|
||||
// 确保所有金额值都是数字类型
|
||||
const baseCost = Number(pickerProductConfig.value.cost_price) || 0;
|
||||
const clientPriceNum = Number(clientPrice.value) || 0;
|
||||
const pStandard = Number(pickerProductConfig.value.p_pricing_standard) || 0;
|
||||
const pRatio = Number(pickerProductConfig.value.p_overpricing_ratio) || 0;
|
||||
const aStandard = Number(pickerProductConfig.value.a_pricing_standard) || 0;
|
||||
const aEnd = Number(pickerProductConfig.value.a_pricing_end) || 0;
|
||||
const aRatio = Number(pickerProductConfig.value.a_overpricing_ratio) || 0;
|
||||
|
||||
// 平台定价成本
|
||||
let platformPricing = baseCost;
|
||||
|
||||
// 提价成本计算
|
||||
if (clientPriceNum > pStandard) {
|
||||
platformPricing += (clientPriceNum - pStandard) * pRatio;
|
||||
}
|
||||
|
||||
// 代理提价成本计算
|
||||
if (aStandard > platformPricing && aEnd > platformPricing && aRatio > 0) {
|
||||
if (clientPriceNum > aStandard) {
|
||||
if (clientPriceNum > aEnd) {
|
||||
platformPricing += (aEnd - aStandard) * aRatio;
|
||||
} else {
|
||||
platformPricing += (clientPriceNum - aStandard) * aRatio;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return safeTruncate(platformPricing);
|
||||
});
|
||||
|
||||
const promotionRevenue = computed(() => {
|
||||
const clientPriceNum = Number(clientPrice.value) || 0;
|
||||
const costPriceNum = parseFloat(costPrice.value) || 0; // costPrice 返回字符串，需要转换为数字
|
||||
const revenue = clientPriceNum - costPriceNum;
|
||||
return safeTruncate(revenue >= 0 ? revenue : 0); // 确保收益不为负数
|
||||
});
|
||||
|
||||
function safeTruncate(num, decimals = 2) {
|
||||
if (isNaN(num) || !isFinite(num)) return "0.00";
|
||||
|
||||
const factor = 10 ** decimals;
|
||||
const scaled = Math.trunc(num * factor);
|
||||
const truncated = scaled / factor;
|
||||
|
||||
return truncated.toFixed(decimals);
|
||||
}
|
||||
// 获取产品信息
|
||||
const getProductInfo = async () => {
|
||||
if (!currentFeature.value) {
|
||||
console.warn('No feature parameter found in query');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const { data, error } = await useApiFetch(`/product/en/${currentFeature.value}`)
|
||||
.get()
|
||||
.json();
|
||||
|
||||
if (data.value && !error.value) {
|
||||
featureData.value = data.value.data;
|
||||
// 确保 FLXG0V4B 排在首位
|
||||
if (featureData.value.features && featureData.value.features.length > 0) {
|
||||
featureData.value.features.sort((a, b) => {
|
||||
if (a.api_id === "FLXG0V4B") return -1;
|
||||
if (b.api_id === "FLXG0V4B") return 1;
|
||||
return 0;
|
||||
});
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch product info:', err);
|
||||
}
|
||||
};
|
||||
|
||||
// 根据 feature 找到对应的报告类型（保持原来的数据结构匹配方式）
|
||||
const findReportTypeByFeature = (feature) => {
|
||||
return reportTypes.find(type => type.value === feature);
|
||||
};
|
||||
|
||||
// 选择报告类型并设置配置（保持原来的处理逻辑）
|
||||
const SelectTypePicker = (reportType) => {
|
||||
if (!reportType) return;
|
||||
|
||||
// 保持原来的变量赋值方式
|
||||
pickerFieldVal.value = reportType.value;
|
||||
pickerFieldText.value = reportType.text;
|
||||
selectedReportType.value = [reportType];
|
||||
|
||||
// 如果产品配置已加载，则设置配置
|
||||
if (productConfig.value) {
|
||||
// 遍历产品配置，找到匹配的产品
|
||||
for (let i of productConfig.value) {
|
||||
if (i.product_id === reportType.id) {
|
||||
pickerProductConfig.value = i;
|
||||
// 确保初始价格为数字类型
|
||||
clientPrice.value = Number(i.cost_price) || 0;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 更新路由参数
|
||||
router.replace({ query: { ...route.query, feature: reportType.value } });
|
||||
|
||||
// 重新获取产品信息
|
||||
getProductInfo();
|
||||
};
|
||||
|
||||
// 获取产品配置
|
||||
const getPromoteConfig = async () => {
|
||||
const { data, error } = await useApiFetch("/agent/product_config")
|
||||
.get()
|
||||
.json();
|
||||
|
||||
if (data.value && !error.value) {
|
||||
if (data.value.code === 200) {
|
||||
productConfig.value = data.value.data.AgentProductConfig;
|
||||
|
||||
// 根据当前 feature 找到对应的报告类型，然后设置配置
|
||||
// 如果没有 feature 参数，默认选择第一个报告类型
|
||||
let reportType;
|
||||
if (currentFeature.value) {
|
||||
reportType = findReportTypeByFeature(currentFeature.value);
|
||||
}
|
||||
|
||||
// 如果没有找到匹配的报告类型或没有feature参数，使用第一个报告类型
|
||||
if (!reportType && reportTypes.length > 0) {
|
||||
reportType = reportTypes[0];
|
||||
}
|
||||
|
||||
if (reportType) {
|
||||
SelectTypePicker(reportType);
|
||||
}
|
||||
} else {
|
||||
console.log("Error fetching product config", data.value);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const generatePromotionCode = async () => {
|
||||
if (!pickerFieldVal.value) {
|
||||
showToast({ message: '请选择报告类型' });
|
||||
return;
|
||||
}
|
||||
|
||||
// 确保 price 是有效的数字
|
||||
const priceNum = Number(clientPrice.value);
|
||||
if (isNaN(priceNum) || priceNum <= 0) {
|
||||
showToast({ message: '请输入有效的查询价格' });
|
||||
return;
|
||||
}
|
||||
|
||||
// 保持原来的接口调用方式，price 参数需要转换为 string 类型
|
||||
// 使用 toFixed(2) 确保精度，避免浮点数精度问题
|
||||
const priceStr = priceNum.toFixed(2);
|
||||
|
||||
const { data, error } = await useApiFetch("/agent/generating_link")
|
||||
.post({ product: pickerFieldVal.value, price: priceStr })
|
||||
.json();
|
||||
|
||||
if (data.value && !error.value) {
|
||||
if (data.value.code === 200) {
|
||||
linkIdentifier.value = data.value.data.link_identifier;
|
||||
showQRcode.value = true;
|
||||
} else {
|
||||
console.log("Error generating promotion link", data.value);
|
||||
showToast({ message: '生成推广链接失败，请重试' });
|
||||
}
|
||||
} else {
|
||||
showToast({ message: '生成推广链接失败，请重试' });
|
||||
}
|
||||
};
|
||||
|
||||
const onPriceChange = (price) => {
|
||||
// 确保接收的价格是数字类型
|
||||
const priceNum = Number(price);
|
||||
if (!isNaN(priceNum) && isFinite(priceNum)) {
|
||||
clientPrice.value = priceNum;
|
||||
}
|
||||
};
|
||||
|
||||
// 确认选择报告类型
|
||||
const onConfirmType = ({ selectedValues, selectedOptions }) => {
|
||||
if (selectedOptions && selectedOptions.length > 0) {
|
||||
SelectTypePicker(selectedOptions[0]);
|
||||
}
|
||||
showTypePicker.value = false;
|
||||
};
|
||||
|
||||
// 跳转到示例报告
|
||||
const toExample = () => {
|
||||
if (!currentFeature.value) return;
|
||||
router.push({ path: '/example', query: { feature: currentFeature.value } });
|
||||
};
|
||||
|
||||
|
||||
// 监听路由变化，重新加载数据
|
||||
watch(() => route.query.feature, async (newFeature) => {
|
||||
if (newFeature) {
|
||||
await Promise.all([getPromoteConfig(), getProductInfo()]);
|
||||
}
|
||||
}, { immediate: false });
|
||||
|
||||
onMounted(async () => {
|
||||
await getPromoteConfig();
|
||||
// getProductInfo 会在 SelectTypePicker 中调用
|
||||
});
|
||||
</script>
|
||||
<style scoped>
|
||||
.promote {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.promote-header-bg {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bg-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.card {
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.5rem;
|
||||
transition: all 0.3s ease;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
box-shadow:
|
||||
0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
||||
0 2px 4px -1px rgba(0, 0, 0, 0.06),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.card-with-header {
|
||||
position: relative;
|
||||
padding-top: 3rem;
|
||||
margin-top: -4rem;
|
||||
}
|
||||
|
||||
/* 优雅的报告头部设计 */
|
||||
.report-header-elegant {
|
||||
position: absolute;
|
||||
top: -2.5rem;
|
||||
left: 1rem;
|
||||
right: 1rem;
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(249, 250, 251, 0.98) 100%);
|
||||
border-radius: 1.25rem;
|
||||
padding: 1rem 1.5rem;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.report-header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.report-logo-container {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.report-logo-wrapper {
|
||||
position: relative;
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(37, 99, 235, 0.15) 100%);
|
||||
border-radius: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.5rem;
|
||||
box-shadow:
|
||||
0 4px 12px rgba(59, 130, 246, 0.2),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.report-logo-elegant {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
|
||||
}
|
||||
|
||||
.report-info-elegant {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.report-label-elegant {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: #6b7280;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 0.25rem;
|
||||
text-transform: uppercase;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.report-title-elegant {
|
||||
font-size: 1.375rem;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
line-height: 1.3;
|
||||
letter-spacing: -0.01em;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.report-action-elegant {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.4rem;
|
||||
padding: 0 0.875rem;
|
||||
border-radius: 0.75rem;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
box-shadow: 0 2px 8px rgba(100, 181, 246, 0.25);
|
||||
background: linear-gradient(135deg, #64b5f6 0%, #42a5f5 100%);
|
||||
border: none;
|
||||
height: 36px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.report-action-elegant:active {
|
||||
box-shadow: 0 1px 4px rgba(100, 181, 246, 0.2);
|
||||
}
|
||||
|
||||
.report-action-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.report-action-text {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
/* 精致按钮样式 */
|
||||
:deep(.custom-btn-small) {
|
||||
border-radius: 0.5rem !important;
|
||||
font-weight: 500 !important;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
|
||||
transition: all 0.3s ease !important;
|
||||
padding: 0 16px !important;
|
||||
height: 32px !important;
|
||||
}
|
||||
|
||||
:deep(.custom-btn-small:active) {
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) !important;
|
||||
}
|
||||
|
||||
:deep(.custom-btn-primary) {
|
||||
border-radius: 0.75rem !important;
|
||||
font-weight: 600 !important;
|
||||
font-size: 15px !important;
|
||||
box-shadow: 0 2px 8px rgba(100, 181, 246, 0.25) !important;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
background: linear-gradient(135deg, #64b5f6 0%, #42a5f5 100%) !important;
|
||||
border: none !important;
|
||||
height: 40px !important;
|
||||
}
|
||||
|
||||
:deep(.custom-btn-primary:not(.van-button--disabled):active) {
|
||||
box-shadow: 0 1px 4px rgba(100, 181, 246, 0.2) !important;
|
||||
}
|
||||
|
||||
:deep(.custom-btn-primary.van-button--disabled) {
|
||||
background: linear-gradient(135deg, #e0e0e0 0%, #bdbdbd 100%) !important;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
|
||||
opacity: 0.5 !important;
|
||||
}
|
||||
|
||||
:deep(.custom-btn-default) {
|
||||
border-radius: 0.75rem !important;
|
||||
font-weight: 600 !important;
|
||||
font-size: 15px !important;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%) !important;
|
||||
border: 1px solid #e0e0e0 !important;
|
||||
color: #616161 !important;
|
||||
height: 40px !important;
|
||||
}
|
||||
|
||||
:deep(.custom-btn-default:not(.van-button--disabled):active) {
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
|
||||
background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%) !important;
|
||||
}
|
||||
|
||||
:deep(.custom-btn-default.van-button--disabled) {
|
||||
background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%) !important;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
|
||||
opacity: 0.4 !important;
|
||||
color: #bdbdbd !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user