tydata-webview-v2/src/views/Promote.vue

<template>
    <div class="min-h-screen p-4 promote">
        <div class="mb-4 card !bg-gradient-to-b from-orange-200 to-orange-200/80">
            <div class="">
                <div class="text-lg font-bold text-orange-500">直推用户查询</div>
                <div class="font-bold text-orange-400 mt-1">
                    自定义价格，赚取差价
                </div>
            </div>

            <div class="mt-6">
                <div class="mt-2 text-gray-600 bg-orange-100 rounded-xl px-4 py-2">
                    在下方 “自定义价格” 处选择报告类型，设置客户查询价（元）即可立即推广。
                </div>
            </div>
        </div>
        <VipBanner />
        <!-- 判断是否是代理 -->
        <div>
            <div class="card mb-4">
                <div class="">
                    <h2 class="text-xl font-semibold mb-2">生成推广码</h2>
                    <van-cell-group inset>
                        <!-- 报告类型 -->
                        <van-field v-model="pickerFieldText" is-link readonly label="报告类型" placeholder="请选择报告类型"
                            @click="showTypePicker = true" />
                        <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>
                        <!-- 定价 -->
                        <van-field v-model="clientPrice" is-link readonly label="客户查询价" placeholder="请输入价格"
                            @click="showPricePicker = true" />
                        <PriceInputPopup v-model:show="showPricePicker" :default-price="clientPrice"
                            :product-config="pickerProductConfig" @change="onPriceChange" />
                        <div class="flex items-center justify-between my-2">
                            <div class="text-sm text-gray-500">推广收益为 <span class="text-orange-500">{{ promotionRevenue
                                    }}</span> 元</div>
                            <div class="text-sm text-gray-500">我的成本为 <span class="text-orange-500">{{ costPrice
                                    }}</span> 元</div>
                        </div>
                    </van-cell-group>
                </div>

                <div class="mt-6">
                    <van-button type="primary" class="w-full" @click="generatePromotionCode">点击立即推广</van-button>
                </div>
            </div>
        </div>
        <!-- 如果不是代理，展示根据status显示不同内容 -->
        <!-- <div>
            <div v-if="status === 0" class="card mt-6">
                <div class="font-semibold text-lg text-gray-700">申请审核中</div>
                <div class="text-sm text-gray-500 mt-4 mb-8">
                    您的申请正在审核中，请耐心等待。
                </div>
            </div>

            <div v-else-if="status === 2" class="card mt-6">
                <div class="font-semibold text-lg text-gray-700">申请未通过</div>
                <div class="text-sm text-gray-500 mt-4 mb-8">
                    很抱歉，您的代理申请未通过。请检查您的信息或重新申请。
                </div>
                <van-button type="primary" round class="w-full" @click="showApplyPopup = true">
                    申请成为代理
                </van-button>
            </div>

            <div v-else-if="status === 3" class="card mt-6">
                <div class="font-semibold text-lg text-gray-700">未申请成为代理</div>
                <div class="text-sm text-gray-500 mt-4 mb-8">
                    您还没有申请成为代理，立即申请即可开始推广。
                </div>
                <van-button type="primary" round class="w-full" @click="showApplyPopup = true">
                    申请成为代理
                </van-button>
            </div>
        </div>
       <AgentApplicationForm v-model:show="showApplyPopup" @submit="submitApplication"
            @close="showApplyPopup = false" /> -->

        <QRcode v-model:show="showQRcode" :linkIdentifier="linkIdentifier" />
    </div>
</template>


<script setup>
import PriceInputPopup from '@/components/PriceInputPopup.vue';
import VipBanner from '@/components/VipBanner.vue';
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: 'rentalrisk', id: 6 },

];
const showTypePicker = ref(false);
const showApplyPopup = ref(false);  // 用来控制申请代理弹窗的显示
const showPricePicker = ref(false);
const pickerFieldText = ref('')
const pickerFieldVal = ref(null)
const pickerProductConfig = ref(null)
const selectedReportType = ref([]);
const clientPrice = ref(null);
const productConfig = ref(null);
const linkIdentifier = ref("")



// const costPrice = computed(() => {
//     if (!pickerProductConfig.value) return 0.00
//     // 平台定价成本
//     let platformPricing = 0
//     if (clientPrice.value > pickerProductConfig.value.p_pricing_standard) {
//         platformPricing = (clientPrice.value - pickerProductConfig.value.p_pricing_standard) * pickerProductConfig.value.p_overpricing_ratio
//     }
//     return (pickerProductConfig.value.cost_price + platformPricing).toFixed(2)
// })

const costPrice = computed(() => {
    if (!pickerProductConfig.value) return 0.00
    // 平台定价成本
    let platformPricing = 0
    platformPricing += pickerProductConfig.value.cost_price
    if (clientPrice.value > pickerProductConfig.value.p_pricing_standard) {
        platformPricing += (clientPrice.value - pickerProductConfig.value.p_pricing_standard) * pickerProductConfig.value.p_overpricing_ratio
    }

    if (pickerProductConfig.value.a_pricing_standard > platformPricing && pickerProductConfig.value.a_pricing_end > platformPricing && pickerProductConfig.value.a_overpricing_ratio > 0) {
        if (clientPrice.value > pickerProductConfig.value.a_pricing_standard) {
            if (clientPrice.value > pickerProductConfig.value.a_pricing_end) {
                platformPricing += (pickerProductConfig.value.a_pricing_end - pickerProductConfig.value.a_pricing_standard) * pickerProductConfig.value.a_overpricing_ratio
            } else {
                platformPricing += (clientPrice.value - pickerProductConfig.value.a_pricing_standard) * pickerProductConfig.value.a_overpricing_ratio
            }
        }
    }

    return safeTruncate(platformPricing)
})

const promotionRevenue = computed(() => {
    return safeTruncate(clientPrice.value - costPrice.value)
});
const showQRcode = ref(false);
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 generatePromotionCode = async () => {
    if (selectedReportType.value.length === 0) {
        showToast({ message: '请选择报告类型' });
        return;
    }
    if (!clientPrice.value) {
        showToast({ message: '请输入查询价格' });
        return;
    }

    const { data, error } = await useApiFetch("/agent/generating_link")
        .post({ product: pickerFieldVal.value, price: clientPrice.value })
        .json()

    if (data.value && !error.value) {
        if (data.value.code === 200) {
            linkIdentifier.value = data.value.data.link_identifier
        } else {
            console.log("Error fetching agent info", data.value);
        }
    }
    if (!linkIdentifier.value) return
    showQRcode.value = true;
};

onMounted(() => {
    getPromoteConfig();
    // getAgentInfo();
});
const SelectTypePicker = (reportType) => {
    selectedReportType.value = [reportType];
    pickerFieldText.value = reportType.text;
    pickerFieldVal.value = reportType.value;
    for (let i of productConfig.value) {
        if (i.product_id === reportType.id) {
            pickerProductConfig.value = i
            clientPrice.value = i.cost_price
        }
    }
};
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;
            SelectTypePicker(reportTypes[0])
        } else {
            console.log("Error fetching agent info", data.value);
        }
    }
}
const onPriceChange = (price) => {
    clientPrice.value = price
}

// const getAgentInfo = async () => {
//     const { data, error } = await useApiFetch("/agent/info")
//         .get()
//         .json()

//     if (data.value && !error.value) {
//         if (data.value.code === 200) {
//             isAgent.value = data.value.data.is_agent;  // 判断是否是代理
//             status.value = data.value.data.status;  // 获取代理状态
//             agentID.value = data.value.data.agent_id
//         } else {
//             console.log("Error fetching agent info", data.value);
//         }
//     }
// };

const onConfirmType = ({ selectedValues, selectedOptions }) => {
    SelectTypePicker(selectedOptions[0])
    showTypePicker.value = false;
};


const submitApplication = async (formData) => {
    // 提交代理申请的数据
    const { region, mobile, wechat_id, code } = formData;
    const { data, error } = await useApiFetch("/agent/apply")
        .post({ region, mobile, wechat_id, code })
        .json();

    if (data.value && !error.value) {
        if (data.value.code === 200) {
            showApplyPopup.value = false;
            // 这里可以提示成功，或者刷新代理状态
            showToast({ message: "已提交申请" });
        } else {
            console.log('申请失败', data.value);
        }
    }
};
</script>
<style scoped>
/* .promote {
    background-color: #ffeee0;
    background-image: linear-gradient(45deg,
            rgba(255, 235, 205, 0.3) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 235, 205, 0.3) 50%,
            rgba(255, 235, 205, 0.3) 75%,
            transparent 75%,
            transparent);
    background-size: 40px 40px;
    min-height: 100vh;
}
    */
</style>