395 lines
12 KiB
Vue
395 lines
12 KiB
Vue
|
<script setup>
|
|||
|
|
definePage({
|
|||
|
|
layout: 'PageLayout',
|
|||
|
|
style: {
|
|||
|
|
navigationBarTitleText: '推广报告',
|
|||
|
|
navigationStyle: 'default',
|
|||
|
|
},
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
import { ref, computed, watch, onMounted } from 'vue'
|
|||
|
|
import { onLoad } from '@dcloudio/uni-app'
|
|||
|
|
import useApiFetch from '@/composables/useApiFetch'
|
|||
|
|
import { getProductConfig, generateLink } from '@/api/agent'
|
|||
|
|
import PriceInputPopup from '@/components/PriceInputPopup.vue'
|
|||
|
|
import QRcode from '@/components/QRcode.vue'
|
|||
|
|
import ReportFeatures from '@/components/ReportFeatures.vue'
|
|||
|
|
|
|||
|
|
const currentFeature = ref('')
|
|||
|
|
const reportTypes = ref([])
|
|||
|
|
const showPricePicker = ref(false)
|
|||
|
|
const pickerFieldText = ref('')
|
|||
|
|
const selectedReportTypeIndex = ref(0)
|
|||
|
|
const pickerProductConfig = ref(null)
|
|||
|
|
const pickerFieldVal = ref(null)
|
|||
|
|
const clientPrice = ref(null)
|
|||
|
|
const productConfig = ref(null)
|
|||
|
|
const fullLink = ref('')
|
|||
|
|
const featureData = ref({})
|
|||
|
|
const showQRcode = ref(false)
|
|||
|
|
const showFollowPopup = ref(false)
|
|||
|
|
|
|||
|
|
const logoMap = {
|
|||
|
|
riskassessment: '/static/promote/personal_data_logo.png',
|
|||
|
|
companyinfo: '/static/promote/company_logo.png',
|
|||
|
|
preloanbackgroundcheck: '/static/promote/preloan_background_check_logo.png',
|
|||
|
|
marriage: '/static/promote/marriage_risk_logo.png',
|
|||
|
|
homeservice: '/static/promote/housekeeping_risk_logo.png',
|
|||
|
|
backgroundcheck: '/static/promote/backgroundcheck_logo.png',
|
|||
|
|
consumerFinanceReport: '/static/promote/consumer_finance_report_logo.png',
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const currentLogo = computed(() => (currentFeature.value ? logoMap[currentFeature.value] || null : null))
|
|||
|
|
|
|||
|
|
function safeTruncate(num, decimals = 2) {
|
|||
|
|
if (isNaN(num) || !isFinite(num)) return '0.00'
|
|||
|
|
const factor = 10 ** decimals
|
|||
|
|
const scaled = Math.trunc(num * factor)
|
|||
|
|
return (scaled / factor).toFixed(decimals)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const baseCost = computed(() => {
|
|||
|
|
if (!pickerProductConfig.value) return '0.00'
|
|||
|
|
const v = Number(pickerProductConfig.value.actual_base_price) || 0
|
|||
|
|
return safeTruncate(v)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const raiseCost = computed(() => {
|
|||
|
|
if (!pickerProductConfig.value) return '0.00'
|
|||
|
|
const priceNum = Number(clientPrice.value) || 0
|
|||
|
|
const threshold = Number(pickerProductConfig.value.price_threshold) || 0
|
|||
|
|
const rate = Number(pickerProductConfig.value.price_fee_rate) || 0
|
|||
|
|
let cost = 0
|
|||
|
|
if (priceNum > threshold) cost = (priceNum - threshold) * rate
|
|||
|
|
return safeTruncate(cost)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const promotionRevenue = computed(() => {
|
|||
|
|
const priceNum = Number(clientPrice.value) || 0
|
|||
|
|
const base = parseFloat(baseCost.value) || 0
|
|||
|
|
const raise = parseFloat(raiseCost.value) || 0
|
|||
|
|
const revenue = priceNum - base - raise
|
|||
|
|
return safeTruncate(revenue >= 0 ? revenue : 0)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const pickerProductConfigForPopup = computed(() => pickerProductConfig.value || {})
|
|||
|
|
|
|||
|
|
async function getProductInfo() {
|
|||
|
|
if (!currentFeature.value) return
|
|||
|
|
try {
|
|||
|
|
const { data, error } = await useApiFetch(`/product/en/${currentFeature.value}`).get().json()
|
|||
|
|
if (data.value && !error.value && data.value.data) {
|
|||
|
|
featureData.value = data.value.data
|
|||
|
|
if (featureData.value.features?.length) {
|
|||
|
|
featureData.value.features.sort((a, b) => {
|
|||
|
|
if (a.api_id === 'FLXG0V4B') return -1
|
|||
|
|
if (b.api_id === 'FLXG0V4B') return 1
|
|||
|
|
return 0
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} catch (e) {
|
|||
|
|
console.error(e)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function findReportTypeByFeature(feature) {
|
|||
|
|
return reportTypes.value.find((t) => t.value === feature)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function selectTypePicker(reportType) {
|
|||
|
|
if (!reportType) return
|
|||
|
|
pickerFieldVal.value = reportType.value
|
|||
|
|
pickerFieldText.value = reportType.text
|
|||
|
|
const idx = reportTypes.value.findIndex((t) => t.value === reportType.value)
|
|||
|
|
selectedReportTypeIndex.value = idx >= 0 ? idx : 0
|
|||
|
|
if (productConfig.value) {
|
|||
|
|
for (const i of productConfig.value) {
|
|||
|
|
if (i.product_en === reportType.value) {
|
|||
|
|
pickerProductConfig.value = i
|
|||
|
|
clientPrice.value = Number(i.actual_base_price) || Number(i.price_range_min) || 0
|
|||
|
|
break
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
currentFeature.value = reportType.value
|
|||
|
|
getProductInfo()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function getPromoteConfig() {
|
|||
|
|
const token = typeof uni !== 'undefined' && uni.getStorageSync ? uni.getStorageSync('token') : ''
|
|||
|
|
if (!token) return
|
|||
|
|
const { data, error } = await getProductConfig()
|
|||
|
|
if (!data.value || error.value || data.value.code !== 200) return
|
|||
|
|
const list = data.value.data?.list || []
|
|||
|
|
productConfig.value = list
|
|||
|
|
const types = list.filter((c) => c.product_en).map((c) => ({ text: c.product_name, value: c.product_en, id: c.product_id }))
|
|||
|
|
reportTypes.value = types
|
|||
|
|
let reportType = currentFeature.value ? findReportTypeByFeature(currentFeature.value) : null
|
|||
|
|
if (!reportType && types.length) reportType = types[0]
|
|||
|
|
if (reportType) selectTypePicker(reportType)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function onTypePickerChange(e) {
|
|||
|
|
const idx = Number(e.detail?.value ?? e.detail?.value?.[0] ?? 0)
|
|||
|
|
selectedReportTypeIndex.value = idx
|
|||
|
|
const reportType = reportTypes.value[idx]
|
|||
|
|
if (reportType) selectTypePicker(reportType)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function generatePromotionCode() {
|
|||
|
|
if (!pickerFieldVal.value || !pickerProductConfig.value) {
|
|||
|
|
uni.showToast({ title: '请选择报告类型', icon: 'none' })
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
const priceNum = Number(clientPrice.value)
|
|||
|
|
if (isNaN(priceNum) || priceNum <= 0) {
|
|||
|
|
uni.showToast({ title: '请输入有效的查询价格', icon: 'none' })
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
const minPrice = Number(pickerProductConfig.value.price_range_min) || 0
|
|||
|
|
const maxPrice = Number(pickerProductConfig.value.price_range_max) ?? Infinity
|
|||
|
|
if (priceNum < minPrice) {
|
|||
|
|
uni.showToast({ title: `价格不能低于 ${minPrice.toFixed(2)} 元`, icon: 'none' })
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if (priceNum > maxPrice) {
|
|||
|
|
uni.showToast({ title: `价格不能高于 ${maxPrice.toFixed(2)} 元`, icon: 'none' })
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
try {
|
|||
|
|
const targetPath = '/agent/promotionInquire/'
|
|||
|
|
const { data, error } = await generateLink({
|
|||
|
|
product_id: pickerProductConfig.value.product_id,
|
|||
|
|
set_price: priceNum,
|
|||
|
|
target_path: targetPath,
|
|||
|
|
})
|
|||
|
|
if (data.value && !error.value && data.value.code === 200) {
|
|||
|
|
fullLink.value = data.value.data?.full_link || ''
|
|||
|
|
showQRcode.value = true
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({ title: data.value?.msg || '生成推广链接失败，请重试', icon: 'none' })
|
|||
|
|
}
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error(err)
|
|||
|
|
uni.showToast({ title: '生成推广链接失败，请重试', icon: 'none' })
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function onPriceChange(price) {
|
|||
|
|
const num = Number(price)
|
|||
|
|
if (!isNaN(num) && isFinite(num)) clientPrice.value = num
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function openPricePicker() {
|
|||
|
|
showPricePicker.value = true
|
|||
|
|
}
|
|||
|
|
function onUpdateShowPricePicker(v) {
|
|||
|
|
showPricePicker.value = !!v
|
|||
|
|
}
|
|||
|
|
function onUpdateShowQRcode(v) {
|
|||
|
|
showQRcode.value = !!v
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function toExample() {
|
|||
|
|
if (!currentFeature.value) return
|
|||
|
|
showFollowPopup.value = true
|
|||
|
|
}
|
|||
|
|
function closeFollowPopup() {
|
|||
|
|
showFollowPopup.value = false
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onLoad((options) => {
|
|||
|
|
currentFeature.value = options?.feature || ''
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
watch(
|
|||
|
|
() => currentFeature.value,
|
|||
|
|
() => {
|
|||
|
|
if (currentFeature.value) getPromoteConfig()
|
|||
|
|
},
|
|||
|
|
{ immediate: false },
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
getPromoteConfig()
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<view class="min-h-screen promote bg-gray-100">
|
|||
|
|
<view class="promote-header-bg">
|
|||
|
|
<image src="/static/promote/promote_bg.jpg" class="bg-image" mode="aspectFill" />
|
|||
|
|
</view>
|
|||
|
|
<view class="px-4 pb-6">
|
|||
|
|
<view class="card card-with-header rounded-2xl bg-white shadow-lg p-4 -mt-12 relative">
|
|||
|
|
<view class="report-header-elegant">
|
|||
|
|
<view class="report-header-content">
|
|||
|
|
<view v-if="currentLogo" class="report-logo-wrapper">
|
|||
|
|
<image :src="currentLogo" class="report-logo-elegant" mode="aspectFit" />
|
|||
|
|
</view>
|
|||
|
|
<view class="report-info-elegant">
|
|||
|
|
<view class="report-label-elegant">推广报告</view>
|
|||
|
|
<view class="report-title-elegant">{{ pickerFieldText || '请选择报告类型' }}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<picker
|
|||
|
|
v-if="reportTypes.length"
|
|||
|
|
mode="selector"
|
|||
|
|
:range="reportTypes"
|
|||
|
|
range-key="text"
|
|||
|
|
:value="selectedReportTypeIndex"
|
|||
|
|
@change="onTypePickerChange"
|
|||
|
|
>
|
|||
|
|
<view class="report-action-elegant">
|
|||
|
|
<text class="report-action-text">切换</text>
|
|||
|
|
</view>
|
|||
|
|
</picker>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="pt-6 space-y-4">
|
|||
|
|
<view class="flex items-center justify-between py-3 border-b border-gray-100">
|
|||
|
|
<text class="font-medium text-gray-700">客户查询价</text>
|
|||
|
|
<text class="text-lg font-semibold text-orange-500">¥{{ clientPrice != null ? clientPrice : '0.00' }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="rounded-xl bg-gray-50 p-3 space-y-2">
|
|||
|
|
<view class="flex justify-between">
|
|||
|
|
<text class="text-sm text-gray-600">底价成本</text>
|
|||
|
|
<text class="text-sm font-semibold text-orange-500">¥{{ baseCost }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex justify-between">
|
|||
|
|
<text class="text-sm text-gray-600">提价成本</text>
|
|||
|
|
<text class="text-sm font-semibold text-orange-500">¥{{ raiseCost }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="flex justify-between">
|
|||
|
|
<text class="text-sm text-gray-600">推广收益</text>
|
|||
|
|
<text class="text-sm font-semibold text-orange-500">¥{{ promotionRevenue }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="grid grid-cols-3 gap-3 mt-4">
|
|||
|
|
<wd-button type="primary" size="large" @click="openPricePicker">设置价格</wd-button>
|
|||
|
|
<wd-button
|
|||
|
|
type="primary"
|
|||
|
|
size="large"
|
|||
|
|
:disabled="!clientPrice || !currentFeature"
|
|||
|
|
@click="generatePromotionCode"
|
|||
|
|
>
|
|||
|
|
推广报告
|
|||
|
|
</wd-button>
|
|||
|
|
<wd-button type="default" size="large" :disabled="!currentFeature" @click="toExample">示例报告</wd-button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view v-if="featureData.product_name" class="card mt-4 rounded-2xl bg-white shadow-lg p-4">
|
|||
|
|
<ReportFeatures :features="featureData.features || []" />
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<PriceInputPopup
|
|||
|
|
:show="showPricePicker"
|
|||
|
|
:default-price="clientPrice"
|
|||
|
|
:product-config="pickerProductConfigForPopup"
|
|||
|
|
@update:show="onUpdateShowPricePicker"
|
|||
|
|
@change="onPriceChange"
|
|||
|
|
/>
|
|||
|
|
<QRcode :show="showQRcode" :full-link="fullLink" @update:show="onUpdateShowQRcode" />
|
|||
|
|
|
|||
|
|
<!-- 示例报告 - 关注公众号弹窗 -->
|
|||
|
|
<view v-if="showFollowPopup" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50" @click.self="closeFollowPopup">
|
|||
|
|
<view class="mx-4 rounded-2xl bg-white p-6 shadow-xl" @click.stop>
|
|||
|
|
<view class="text-center text-lg font-bold text-gray-800 mb-2">查看示例报告</view>
|
|||
|
|
<view class="text-center text-sm text-gray-500 mb-4">请长按识别下方公众号二维码，关注后获取示例报告</view>
|
|||
|
|
<image
|
|||
|
|
src="/static/qrcode/ycc_qrcode.jpg"
|
|||
|
|
class="w-56 h-56 mx-auto block rounded-lg bg-gray-100"
|
|||
|
|
mode="aspectFit"
|
|||
|
|
show-menu-by-longpress
|
|||
|
|
/>
|
|||
|
|
<button
|
|||
|
|
class="mt-4 w-full rounded-full py-2.5 text-base font-medium text-white bg-blue-500"
|
|||
|
|
@click="closeFollowPopup"
|
|||
|
|
>
|
|||
|
|
关闭
|
|||
|
|
</button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.promote-header-bg {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 200rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
.bg-image {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
.report-header-elegant {
|
|||
|
|
position: absolute;
|
|||
|
|
top: -2.5rem;
|
|||
|
|
left: 1rem;
|
|||
|
|
right: 1rem;
|
|||
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(249, 250, 251, 0.98));
|
|||
|
|
border-radius: 1.25rem;
|
|||
|
|
padding: 1rem 1.5rem;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
z-index: 10;
|
|||
|
|
}
|
|||
|
|
.report-header-content {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 1rem;
|
|||
|
|
flex: 1;
|
|||
|
|
min-width: 0;
|
|||
|
|
}
|
|||
|
|
.report-logo-wrapper {
|
|||
|
|
width: 72rpx;
|
|||
|
|
height: 72rpx;
|
|||
|
|
border-radius: 1rem;
|
|||
|
|
overflow: hidden;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
.report-logo-elegant {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
.report-info-elegant {
|
|||
|
|
flex: 1;
|
|||
|
|
min-width: 0;
|
|||
|
|
}
|
|||
|
|
.report-label-elegant {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #6b7280;
|
|||
|
|
margin-bottom: 4rpx;
|
|||
|
|
}
|
|||
|
|
.report-title-elegant {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: #111827;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
.report-action-elegant {
|
|||
|
|
padding: 0 14rpx;
|
|||
|
|
height: 72rpx;
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
background: linear-gradient(135deg, #64b5f6, #42a5f5);
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
.report-action-text {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
</style>
|