f
This commit is contained in:
301
src/views/Agent.vue
Normal file
301
src/views/Agent.vue
Normal file
@@ -0,0 +1,301 @@
|
||||
<template>
|
||||
<div class="p-4 bg-gradient-to-b from-gray-50/50 to-gray-100/30 min-h-screen">
|
||||
<!-- 资产卡片 -->
|
||||
<div class="rounded-xl shadow-lg mb-4 bg-gradient-to-r from-primary-50/70 to-primary-100/50 p-6">
|
||||
<div class="flex justify-between items-center mb-3">
|
||||
<div class="flex items-center">
|
||||
<van-icon name="balance-pay" class="text-xl mr-2" style="color: var(--van-theme-primary);" />
|
||||
<span class="text-lg font-bold" style="color: var(--van-text-color);">余额</span>
|
||||
</div>
|
||||
<span class="text-3xl font-bold" style="color: var(--van-theme-primary);">¥ {{ (data?.balance ||
|
||||
0).toFixed(2) }}</span>
|
||||
</div>
|
||||
<div class="text-sm mb-2" style="color: var(--van-text-color-2);">
|
||||
累计收益：¥ {{ (data?.total_earnings || 0).toFixed(2) }}
|
||||
</div>
|
||||
<div class="text-sm mb-6 flex items-center" style="color: var(--van-text-color-2);">
|
||||
待结账金额：¥ {{ (data?.frozen_balance || 0).toFixed(2) }}
|
||||
<van-popover v-model:show="showTooltip" placement="bottom-start" :offset="10">
|
||||
<template #reference>
|
||||
<van-icon name="question-o" class="ml-2 cursor-help" @mouseenter="showTooltip = true" @mouseleave="showTooltip = false" />
|
||||
</template>
|
||||
<div class="p-2 text-sm" style="max-width: 200px;">
|
||||
待结账金额将在订单创建24小时后自动结账。
|
||||
</div>
|
||||
</van-popover>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<button @click="toWithdraw"
|
||||
class="text-white rounded-full py-2 px-4 shadow-md flex items-center justify-center"
|
||||
style="background: linear-gradient(135deg, var(--van-theme-primary), var(--van-theme-primary-dark));">
|
||||
<van-icon name="gold-coin" class="mr-1" />
|
||||
提现
|
||||
</button>
|
||||
<button @click="toWithdrawDetails"
|
||||
class="bg-white/90 border rounded-full py-2 px-4 shadow-sm flex items-center justify-center"
|
||||
style="color: var(--van-text-color-2); border-color: var(--van-border-color);">
|
||||
<van-icon name="notes" class="mr-1" />
|
||||
提现记录
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 直推报告收益 -->
|
||||
<div class="rounded-xl shadow-lg mb-4 bg-gradient-to-r from-warning-50/60 to-warning-100/50 p-6">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<div class="flex items-center">
|
||||
<van-icon name="balance-list" class="text-xl mr-2" style="color: var(--color-warning);" />
|
||||
<span class="text-lg font-bold" style="color: var(--van-text-color);">直推报告收益</span>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div class="text-2xl font-bold" style="color: var(--color-warning);">
|
||||
¥
|
||||
{{
|
||||
(data?.direct_push?.total_commission || 0).toFixed(
|
||||
2
|
||||
)
|
||||
}}
|
||||
</div>
|
||||
<div class="text-sm mt-1" style="color: var(--van-text-color-2);">
|
||||
有效报告 {{ data?.direct_push?.total_report || 0 }} 份
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 日期选择 -->
|
||||
<div class="grid grid-cols-3 gap-2 mb-6">
|
||||
<button v-for="item in promoteDateOptions" :key="item.value" @click="selectedPromoteDate = item.value"
|
||||
class="rounded-full transition-all py-1 px-4 text-sm" :class="[
|
||||
selectedPromoteDate === item.value
|
||||
? 'text-white shadow-md'
|
||||
: 'bg-white/90 border',
|
||||
]" :style="selectedPromoteDate === item.value
|
||||
? 'background-color: var(--color-warning);'
|
||||
: 'color: var(--van-text-color-2); border-color: var(--van-border-color);'">
|
||||
{{ item.label }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4 mb-6">
|
||||
<div class="p-3 rounded-lg backdrop-blur-sm" style="background-color: rgba(245, 158, 11, 0.08);">
|
||||
<div class="flex items-center text-sm" style="color: var(--van-text-color-2);">
|
||||
<van-icon name="gold-coin" class="mr-1" />本日收益
|
||||
</div>
|
||||
<div class="text-xl font-bold mt-1" style="color: var(--color-warning);">
|
||||
¥
|
||||
{{
|
||||
currentPromoteData.commission?.toFixed(2) || "0.00"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-3 rounded-lg backdrop-blur-sm" style="background-color: rgba(245, 158, 11, 0.08);">
|
||||
<div class="flex items-center text-sm" style="color: var(--van-text-color-2);">
|
||||
<van-icon name="description" class="mr-1" />有效报告
|
||||
</div>
|
||||
<div class="text-xl font-bold mt-1" style="color: var(--color-warning);">
|
||||
{{ currentPromoteData.report || 0 }} 份
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between text-sm font-semibold cursor-pointer pt-4"
|
||||
style="color: var(--color-warning);" @click="goToPromoteDetail">
|
||||
<span>查看收益明细</span>
|
||||
<span class="text-lg">→</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 活跃下级奖励 -->
|
||||
<div class="rounded-xl shadow-lg bg-gradient-to-r from-success-50/50 to-success-100/40 p-6">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<div class="flex items-center">
|
||||
<van-icon name="friends" class="text-xl mr-2" style="color: var(--color-success);" />
|
||||
<span class="text-lg font-bold" style="color: var(--van-text-color);">活跃下级奖励</span>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div class="text-2xl font-bold" style="color: var(--color-success);">
|
||||
¥
|
||||
{{
|
||||
(data?.active_reward?.total_reward || 0).toFixed(2)
|
||||
}}
|
||||
</div>
|
||||
<div class="text-sm mt-1" style="color: var(--van-text-color-2);">活跃下级 0 位</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 日期选择 -->
|
||||
<div class="grid grid-cols-3 gap-2 mb-6">
|
||||
<button v-for="item in activeDateOptions" :key="item.value" @click="selectedActiveDate = item.value"
|
||||
class="rounded-full transition-all py-1 px-4 text-sm" :class="[
|
||||
selectedActiveDate === item.value
|
||||
? 'text-white shadow-md'
|
||||
: 'bg-white/90 border',
|
||||
]" :style="selectedActiveDate === item.value
|
||||
? 'background-color: var(--color-success);'
|
||||
: 'color: var(--van-text-color-2); border-color: var(--van-border-color);'">
|
||||
{{ item.label }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-2 mb-6">
|
||||
<div class="p-3 rounded-lg backdrop-blur-sm" style="background-color: rgba(16, 185, 129, 0.08);">
|
||||
<div class="flex items-center text-sm" style="color: var(--van-text-color-2);">
|
||||
<van-icon name="medal" class="mr-1" />本日奖励
|
||||
</div>
|
||||
<div class="text-xl font-bold mt-1" style="color: var(--color-success);">
|
||||
¥
|
||||
{{ (currentActiveData.active_reward || 0).toFixed(2) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-3 rounded-lg backdrop-blur-sm" style="background-color: rgba(16, 185, 129, 0.08);">
|
||||
<div class="flex items-center text-sm" style="color: var(--van-text-color-2);">
|
||||
<van-icon name="discount" class="mr-1" />下级推广奖励
|
||||
</div>
|
||||
<div class="text-xl font-bold mt-1" style="color: var(--color-success);">
|
||||
¥
|
||||
{{
|
||||
(currentActiveData.sub_promote_reward || 0).toFixed(
|
||||
2
|
||||
)
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-3 rounded-lg backdrop-blur-sm" style="background-color: rgba(16, 185, 129, 0.08);">
|
||||
<div class="flex items-center text-sm" style="color: var(--van-text-color-2);">
|
||||
<van-icon name="contact" class="mr-1" />新增活跃奖励
|
||||
</div>
|
||||
<div class="text-xl font-bold mt-1" style="color: var(--color-success);">
|
||||
¥
|
||||
{{
|
||||
(currentActiveData.sub_upgrade_reward || 0).toFixed(
|
||||
2
|
||||
)
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-3 rounded-lg backdrop-blur-sm" style="background-color: rgba(16, 185, 129, 0.08);">
|
||||
<div class="flex items-center text-sm" style="color: var(--van-text-color-2);">
|
||||
<van-icon name="fire" class="mr-1" />下级转化奖励
|
||||
</div>
|
||||
<div class="text-xl font-bold mt-1" style="color: var(--color-success);">
|
||||
¥
|
||||
{{
|
||||
(
|
||||
currentActiveData.sub_withdraw_reward || 0
|
||||
).toFixed(2)
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between text-sm font-semibold cursor-pointer pt-4"
|
||||
style="color: var(--color-success);" @click="goToActiveDetail">
|
||||
<span>查看奖励明细</span>
|
||||
<span class="text-lg">→</span>
|
||||
</div>
|
||||
|
||||
<!-- 添加查看下级按钮 -->
|
||||
<div class="mt-4">
|
||||
<button @click="toSubordinateList"
|
||||
class="w-full text-white rounded-full py-2 px-4 shadow-md flex items-center justify-center bg-success"
|
||||
style="background: linear-gradient(135deg, var(--color-success), var(--color-success-600));">
|
||||
<van-icon name="friends" class="mr-1" />
|
||||
查看我的下级
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { storeToRefs } from "pinia";
|
||||
import { ref, computed } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
const agentStore = useAgentStore();
|
||||
const { isAgent } = storeToRefs(agentStore);
|
||||
const router = useRouter();
|
||||
const data = ref(null);
|
||||
const showTooltip = ref(false);
|
||||
|
||||
// 日期选项映射
|
||||
const dateRangeMap = {
|
||||
today: "today",
|
||||
week: "last7d",
|
||||
month: "last30d",
|
||||
};
|
||||
|
||||
// 直推报告数据
|
||||
const promoteDateOptions = [
|
||||
{ label: "今日", value: "today" },
|
||||
{ label: "近7天", value: "week" },
|
||||
{ label: "近1月", value: "month" },
|
||||
];
|
||||
const selectedPromoteDate = ref("today");
|
||||
|
||||
// 活跃下级数据
|
||||
const activeDateOptions = [
|
||||
{ label: "今日", value: "today" },
|
||||
{ label: "近7天", value: "week" },
|
||||
{ label: "近1月", value: "month" },
|
||||
];
|
||||
const selectedActiveDate = ref("today");
|
||||
|
||||
// 计算当前直推数据
|
||||
const currentPromoteData = computed(() => {
|
||||
const range = dateRangeMap[selectedPromoteDate.value];
|
||||
return data.value?.direct_push?.[range] || { commission: 0, report: 0 };
|
||||
});
|
||||
|
||||
// 计算当前活跃数据
|
||||
const currentActiveData = computed(() => {
|
||||
const range = dateRangeMap[selectedActiveDate.value];
|
||||
return (
|
||||
data.value?.active_reward?.[range] || {
|
||||
active_reward: 0,
|
||||
sub_promote_reward: 0,
|
||||
sub_upgrade_reward: 0,
|
||||
sub_withdraw_reward: 0,
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
const getData = async () => {
|
||||
const { data: res, error } = await useApiFetch("/agent/revenue")
|
||||
.get()
|
||||
.json();
|
||||
|
||||
if (res.value?.code === 200 && !error.value) {
|
||||
data.value = res.value.data;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
if (isAgent.value) {
|
||||
getData();
|
||||
}
|
||||
});
|
||||
|
||||
// 路由跳转
|
||||
const goToPromoteDetail = () => router.push({ name: "promoteDetails" });
|
||||
const goToActiveDetail = () => router.push({ name: "rewardsDetails" });
|
||||
|
||||
const toWithdraw = () => router.push({ name: "withdraw" });
|
||||
|
||||
const toWithdrawDetails = () => router.push({ name: "withdrawDetails" });
|
||||
|
||||
// 添加跳转到下级列表的方法
|
||||
const toSubordinateList = () => {
|
||||
router.push("/agent/subordinateList");
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* 添加按钮悬停效果 */
|
||||
button {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
</style>
|
||||
806
src/views/AgentManageAgreement.vue
Normal file
806
src/views/AgentManageAgreement.vue
Normal file
@@ -0,0 +1,806 @@
|
||||
<template>
|
||||
<div class="container mx-auto p-4 text-gray-800">
|
||||
<div class="box">
|
||||
<p class="text-center font-bold text-xl mb-4">代理管理制度</p>
|
||||
|
||||
<p class="indent-8 mb-2"><span>一、</span><strong>前言</strong></p>
|
||||
<p class="indent-8 mb-2">
|
||||
广西福铭网络科技有限公司为加强对全国代理的统一管理，规范各代理行为，确保"天远查"的顺利推广，特依据如下原则制定代理管理制度，望各级代理认真贯彻、严格遵守。
|
||||
</p>
|
||||
<p class="indent-8 mb-2">1.谨慎性原则</p>
|
||||
<p class="indent-8 mb-2">
|
||||
本着对双方负责的态度，请各级代理务必认真贯彻执行本管理制度的工作程序，不可草率行事。
|
||||
</p>
|
||||
<p class="indent-8 mb-2">2.用心协助原则</p>
|
||||
<p class="indent-8 mb-2">
|
||||
广西福铭网络科技有限公司配合各代理的工作，对于代理在推广工作中遇到的问题用心配合解决。
|
||||
</p>
|
||||
<p class="indent-8 mb-2">3.诚信的原则</p>
|
||||
<p class="indent-8 mb-2">双方务必诚实有信用，决不提供虚假信息。</p>
|
||||
<p class="indent-8 mb-2">4.严格管理原则</p>
|
||||
<p class="indent-8 mb-2">
|
||||
认真贯彻执行各项管理制度。对违反管理制度的代理，坚决按制度规定予以处罚，直至取消代理资格，决不姑息迁就。
|
||||
</p>
|
||||
<p class="indent-8 mb-2">5.双方共赢原则</p>
|
||||
<p class="indent-8 mb-2">
|
||||
广西福铭网络科技有限公司的目标是与代理共赢，共同发展。
|
||||
</p>
|
||||
<p class="indent-8 mb-2">6.长期性原则</p>
|
||||
<p class="indent-8 mb-2">
|
||||
立足市场，与代理长期协作，确保代理用心放心地进行市场推广工作。
|
||||
</p>
|
||||
|
||||
<p class="indent-8 mb-2"><strong>二、总则</strong></p>
|
||||
<p class="indent-8 mb-2">
|
||||
第一条 代理期限为一年，代理协议实行一年一签制。
|
||||
</p>
|
||||
<p class="indent-8 mb-2">
|
||||
第二条
|
||||
本制度规定广西福铭网络科技有限公司代理(以下称代理)权限、运作及业务处理等相关事项，旨在使广西福铭网络科技有限公司与各代理之间持续良好合作关系，促进双方共同发展;
|
||||
</p>
|
||||
<p class="indent-8 mb-2">
|
||||
第三条
|
||||
代理经广西福铭网络科技有限公司授权并自代理协议书生效之日起，应严格依照代理协议及本制度的规定履行义务，享受权利。
|
||||
</p>
|
||||
<p class="indent-8 mb-2">
|
||||
第四条
|
||||
广西福铭网络科技有限公司确定的代理应遵循广西福铭网络科技有限公司的规定从事代理活动，不得做出损害广西福铭网络科技有限公司利益和形象的行为;
|
||||
</p>
|
||||
<p class="indent-8 mb-2">
|
||||
第五条
|
||||
代理在代理推广过程中，应妥善处理做好售前、售中、售后的咨询维护工作。
|
||||
</p>
|
||||
|
||||
<p class="indent-8 mb-2"><strong>三、开通代理账户要求</strong></p>
|
||||
<p class="indent-8 mb-2"><strong>个人类：</strong></p>
|
||||
<p class="indent-8 mb-2">1、完全民事行为能力人。</p>
|
||||
<p class="indent-8 mb-2">2、本人实名认证的手机号。</p>
|
||||
<p class="indent-8 mb-2">
|
||||
3、首次提现时必须进行本人实名认证并进行人脸识别。
|
||||
</p>
|
||||
<p class="indent-8 mb-2">
|
||||
4、全面赞同天远查的各项制度，并能积极参加天远查为各代理所举办的各种活动;
|
||||
</p>
|
||||
|
||||
<p class="indent-8 mb-2">企业类：</p>
|
||||
<p class="indent-8 mb-2">
|
||||
1、具有独立法人资格，并能提供有效营业执照、组织代码证等相关文件复印件，经审查合格签定代理协议后即成为广西福铭网络科技有限公司认证代理。
|
||||
</p>
|
||||
<p class="indent-8 mb-2">
|
||||
2、应具备良好的经营规模、办公条件、设备及人员，有固定的营业场所，良好的资信潜力和商业信誉。并提供以下资料：
|
||||
</p>
|
||||
<p class="indent-8 mb-2">◆营业执照复印件</p>
|
||||
<p class="indent-8 mb-2">◆身份证复印件</p>
|
||||
<p class="indent-8 mb-2">◆代理合作协议</p>
|
||||
<p class="indent-8 mb-2">◆业务场景展示</p>
|
||||
<p class="indent-8 mb-2">
|
||||
3、全面赞同天远查的各项制度，并能积极参加天远查为各代理所举办的各种活动;
|
||||
</p>
|
||||
|
||||
<p class="indent-8 mb-4"><strong>四、代理权利和义务</strong></p>
|
||||
<p class="indent-8 mb-2">
|
||||
在成为广西福铭网络科技有限公司的认证代理后，可享有如下权利并承担相应的义务:
|
||||
</p>
|
||||
<p class="indent-8 mb-2">
|
||||
1、使用天远查开展广告宣传、市场推广活动;
|
||||
</p>
|
||||
<p class="indent-8 mb-2">
|
||||
2、维护广西福铭网络科技有限公司及其产品的良好形象;
|
||||
</p>
|
||||
<p class="indent-8 mb-2">
|
||||
3、开拓下级业务推广并负责对其定期进行业务培训;
|
||||
</p>
|
||||
<p class="indent-8 mb-2">4、推广过程中做好售前、售中、售后工作。</p>
|
||||
<p class="indent-8 mb-2">
|
||||
5、如用户需要开具发票，代理则需向用户开具（咨询费）发票。如代理未开具发票，天远查有义务配合税务机关采取相关措施。
|
||||
</p>
|
||||
<p class="indent-8 mb-2">
|
||||
6、代理业务推广过程中，未经广西福铭网络科技有限公司授权，不得使用"天远查官方"词汇用于广告宣传。
|
||||
</p>
|
||||
|
||||
<p class="font-bold mb-2">五、推广管理</p>
|
||||
<p class="indent-8 mb-2">
|
||||
1、天远查负责建立与代理之间的沟通与联系渠道，不定期地向代理提供宣传资料、信息、政策以及推广方案与管理制度等方面的支持。
|
||||
</p>
|
||||
<p class="indent-8 mb-2">
|
||||
2、广西福铭网络科技有限公司充分尊重代理代理推广权，但有下列状况之一时，广西福铭网络科技有限公司将保留或者取消该代理的权利:
|
||||
</p>
|
||||
<p class="indent-8 mb-2">
|
||||
a代理经营管理不善，造成工作无法正常开展的;
|
||||
</p>
|
||||
<p class="indent-8 mb-2">b国家政策变化等不可抗力发生时;</p>
|
||||
<p class="indent-8 mb-2">c遇有客户投诉，经确认属代理操作不当的;</p>
|
||||
<p class="indent-8 mb-2">
|
||||
d其他严重损害广西福铭网络科技有限公司形象与产品形象的行为发生时;
|
||||
</p>
|
||||
<p class="indent-8 mb-2">e违反国家法律法规时;</p>
|
||||
<p class="indent-8 mb-2">
|
||||
3、当代理名下发生投诉时，代理需配合相关的协调。否则广西福铭网络科技有限公司有权无条件取消其代理资格，终止其代理协议。
|
||||
</p>
|
||||
<p class="indent-8 mb-2">
|
||||
4、代理应合规宣传广西福铭网络科技有限公司产品形象。
|
||||
</p>
|
||||
<p class="indent-8 mb-2">
|
||||
5、市场运作过程中，各代理在接到市场投诉时，应及时做好记录，并报广西福铭网络科技有限公司相关部门妥善处理。
|
||||
</p>
|
||||
|
||||
<p class="indent-8 mb-2"><strong>六、违规处罚</strong></p>
|
||||
<p class="indent-8 mb-2">
|
||||
1、各代理在推广广西福铭网络科技有限公司过程中，有损害广西福铭网络科技有限公司产品信誉行为时，视情节轻重，广西福铭网络科技有限公司将对其提出书面警告直至取消其代理资格;
|
||||
</p>
|
||||
<p class="indent-8 mb-2">
|
||||
2、未按广西福铭网络科技有限公司有关规定和本制度开展工作的，广西福铭网络科技有限公司将提出书面警告并限期整改;
|
||||
</p>
|
||||
<p class="indent-8 mb-2">
|
||||
3、不遵守广西福铭网络科技有限公司的相关规章制度，造成与其他推广代理纠纷时，广西福铭网络科技有限公司将视其情节轻重，处以20000元以上50000元以下的罚款，并取消其代理资格。
|
||||
</p>
|
||||
<p class="indent-8 mb-2">
|
||||
4、违反保密义务，导致广西福铭网络科技有限公司重大损失的，广西福铭网络科技有限公司将对其处以5000-20000元罚款，情节严重者将直接取消其代理资格。
|
||||
</p>
|
||||
<p class="indent-8 mb-2">
|
||||
5、代理如严重违反广西福铭网络科技有限公司相关规章制度，广西福铭网络科技有限公司可随时解除双方约定的部分或全部协议。
|
||||
</p>
|
||||
|
||||
<p class="indent-8 mb-2"><strong>七、推广收益及提现</strong></p>
|
||||
<p class="indent-8 mb-2">
|
||||
1、用户通过平台推广产品/服务所获得的佣金收益，须在平台规定的条件下申请提现；
|
||||
</p>
|
||||
<p class="indent-8 mb-2">
|
||||
2、平台有权根据国家税收法律法规，对用户佣金收入依法代扣代缴个人所得税；
|
||||
</p>
|
||||
<p class="indent-8 mb-4">
|
||||
3、若用户未通过实名认证或未完成相关信息认证，平台有权暂缓或拒绝佣金发放。
|
||||
</p>
|
||||
|
||||
<p class="indent-8 mb-2"><strong>八、税务处理说明</strong></p>
|
||||
<p class="indent-8 mb-2">
|
||||
1、用户确认并同意，其通过本平台获得的推广佣金、奖励、分润等收入，依法属于"个人所得税"征收范畴；
|
||||
</p>
|
||||
<p class="indent-8 mb-2">
|
||||
2、用户同意授权平台代为完成相关税务申报及代扣代缴义务，平台有权依据国家相关税收标准，在佣金发放前先行扣除应缴税款；
|
||||
</p>
|
||||
<p class="indent-8 mb-2">
|
||||
3、用户理解，因未能完成实名认证、税务资料提交、或不配合税务处理流程所导致的提现延迟、失败或法律后果，平台不承担任何责任；
|
||||
</p>
|
||||
<p class="indent-8 mb-4">
|
||||
4、在法律允许的范围内，平台有权委托第三方（如税务服务平台、灵活用工平台等）代为完成税务申报、发放结算等合规流程。
|
||||
</p>
|
||||
|
||||
<p class="indent-8 mb-2"><strong>九、信息收集与使用说明</strong></p>
|
||||
<p class="indent-8 mb-2">
|
||||
1、用户在申请提现、实名认证或佣金结算过程中，需向平台提供包括但不限于姓名、身份证号、银行卡号、手机号、税务身份信息等个人资料；
|
||||
</p>
|
||||
<p class="indent-8 mb-2">
|
||||
2、用户同意平台为履行合同义务、税务申报、身份核验、财务结算等必要目的，收集、使用、存储并在必要范围内共享该等信息；
|
||||
</p>
|
||||
<p class="indent-8 mb-2">
|
||||
3、平台承诺遵守国家相关法律法规，在取得用户同意的前提下，对用户个人信息进行合理保护和使用；
|
||||
</p>
|
||||
<p class="indent-8 mb-2">
|
||||
4、在进行税务代扣代缴、结算服务时，平台有权将必要信息提供给依法合作的第三方税务服务商、结算服务商，前提是该第三方承担同等信息保护义务；
|
||||
</p>
|
||||
<p class="indent-8 mb-4">
|
||||
5、用户有权查询、更正其个人信息，也可以根据平台流程申请注销账户或停止使用相关服务，平台将根据法律要求妥善处理相关信息。
|
||||
</p>
|
||||
|
||||
<p class="indent-8 mb-4"><strong>十、投诉类处罚</strong></p>
|
||||
<p class="indent-8 mb-2">1、代理账户累计投诉率处罚措施</p>
|
||||
<p class="indent-8 mb-2">a.月查询报告数量≥200单</p>
|
||||
|
||||
<div class="mb-4 overflow-x-auto">
|
||||
<table class="w-full border-collapse border border-gray-300">
|
||||
<thead>
|
||||
<tr class="bg-gray-100">
|
||||
<th class="border border-gray-300 p-2 w-40">
|
||||
处理类型
|
||||
</th>
|
||||
<th class="border border-gray-300 p-2">提高底价</th>
|
||||
<th class="border border-gray-300 p-2">
|
||||
限制修改查询售价
|
||||
</th>
|
||||
<th class="border border-gray-300 p-2">罚款</th>
|
||||
<th class="border border-gray-300 p-2">禁止提现</th>
|
||||
<th class="border border-gray-300 p-2">封号</th>
|
||||
<th class="border border-gray-300 p-2">黑名单</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="border border-gray-300 p-2">
|
||||
投诉率≥5%＜8%
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
+1
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
×
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
×
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
×
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
×
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
×
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border border-gray-300 p-2">
|
||||
投诉率≥8%＜10%
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
+3
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
×
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
×
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
×
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
×
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
×
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border border-gray-300 p-2">
|
||||
投诉率≥10%
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
+5
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
×
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
√
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
×
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
×
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
×
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<p class="indent-8 mb-2">b.月查询报告数量＜100单</p>
|
||||
<div class="mb-4 overflow-x-auto">
|
||||
<table class="w-full border-collapse border border-gray-300">
|
||||
<thead>
|
||||
<tr class="bg-gray-100">
|
||||
<th class="border border-gray-300 p-2 w-40">
|
||||
处理类型
|
||||
</th>
|
||||
<th class="border border-gray-300 p-2">提高底价</th>
|
||||
<th class="border border-gray-300 p-2">
|
||||
限制修改查询售价
|
||||
</th>
|
||||
<th class="border border-gray-300 p-2">罚款</th>
|
||||
<th class="border border-gray-300 p-2">禁止提现</th>
|
||||
<th class="border border-gray-300 p-2">封号</th>
|
||||
<th class="border border-gray-300 p-2">黑名单</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="border border-gray-300 p-2">
|
||||
投诉率≥6%＜8%
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
+1
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
×
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
×
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
×
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
×
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
×
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border border-gray-300 p-2">
|
||||
投诉率≥8%＜15%
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
+5
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
49
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
×
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
×
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
×
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
√
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border border-gray-300 p-2">
|
||||
投诉率≥15%
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
×
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
×
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
√
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
√
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
√
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
×
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<p class="indent-8 mb-2">c.月查询报告数量＜50单</p>
|
||||
<div class="mb-4 overflow-x-auto">
|
||||
<table class="w-full border-collapse border border-gray-300">
|
||||
<thead>
|
||||
<tr class="bg-gray-100">
|
||||
<th class="border border-gray-300 p-2 w-40">
|
||||
处理类型
|
||||
</th>
|
||||
<th class="border border-gray-300 p-2">提高底价</th>
|
||||
<th class="border border-gray-300 p-2">
|
||||
限制修改查询售价
|
||||
</th>
|
||||
<th class="border border-gray-300 p-2">罚款</th>
|
||||
<th class="border border-gray-300 p-2">禁止提现</th>
|
||||
<th class="border border-gray-300 p-2">封号</th>
|
||||
<th class="border border-gray-300 p-2">黑名单</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="border border-gray-300 p-2">
|
||||
投诉率≥15%＜20%
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
+3
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
×
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
×
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
×
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
×
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
×
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border border-gray-300 p-2">
|
||||
投诉率≥20%＜50%
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
+5
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
39
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
×
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
×
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
×
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
√
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border border-gray-300 p-2">
|
||||
投诉率≥50%
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
×
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
×
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
√
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
√
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
√
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
×
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<p class="indent-8 mb-2">
|
||||
备注：针对客户自身原因投诉，对于产生投诉的代理账户只有三次加底价机会（底价只加不减），到第四次时直接封号。
|
||||
</p>
|
||||
<p class="indent-8 mb-4">执行时间：每月1号出数据统计，2号执行。</p>
|
||||
|
||||
<p class="indent-8 mb-2">2、代理单笔投诉处罚措施</p>
|
||||
<div class="mb-4 overflow-x-auto">
|
||||
<table class="w-full border-collapse border border-gray-300">
|
||||
<thead>
|
||||
<tr class="bg-gray-100">
|
||||
<th class="border border-gray-300 p-2 w-40">
|
||||
处理类型
|
||||
</th>
|
||||
<th class="border border-gray-300 p-2">提高底价</th>
|
||||
<th class="border border-gray-300 p-2">
|
||||
冻结推广收益
|
||||
</th>
|
||||
<th class="border border-gray-300 p-2">
|
||||
单笔风险资金冻结
|
||||
</th>
|
||||
<th class="border border-gray-300 p-2">罚款</th>
|
||||
<th class="border border-gray-300 p-2">禁止提现</th>
|
||||
<th class="border border-gray-300 p-2">封号</th>
|
||||
<th class="border border-gray-300 p-2">黑名单</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="border border-gray-300 p-2">
|
||||
网络公开恶意投诉（非欺诈类可解）
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
×
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
√
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
×
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
√
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
√
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
×
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
×
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border border-gray-300 p-2">
|
||||
支付宝投诉
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
×
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
√
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
×
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
√
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
√
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
×
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
×
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border border-gray-300 p-2">
|
||||
政务部门投诉
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
×
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
×
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
×
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
×
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
×
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
√
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
√
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border border-gray-300 p-2">
|
||||
（非产品质量类）客户一般退款
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
1+退款次数（最高10元）
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
√
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
√
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
×
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
×
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
×
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
×
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="border border-gray-300 p-2">
|
||||
受代理教唆客户恶意退款
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
5+退款次数
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
√
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
√
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
√
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
√
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
×
|
||||
</td>
|
||||
<td class="border border-gray-300 p-2 text-center">
|
||||
×
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<p class="indent-8 mb-2">3、扬言给客户做"数据修复"类投诉措施</p>
|
||||
<p class="indent-8 mb-2">
|
||||
第一步：每接到此类投诉一次，所属代理底价+10元/次，并警告。
|
||||
</p>
|
||||
<p class="indent-8 mb-2">
|
||||
第二步：警告无效后，依旧发生则采取直接封号并加入黑名单。
|
||||
</p>
|
||||
<p class="indent-8 mb-2 text-red-600">备注：</p>
|
||||
<p class="indent-8 mb-2 text-red-600">
|
||||
1）√为执行项 ×为不执行项
|
||||
</p>
|
||||
<p class="indent-8 mb-2 text-red-600">
|
||||
2）一般投诉罚款投诉金额1倍（除退还投诉金额外，另行按投诉金额1倍的标准进行罚款）。
|
||||
</p>
|
||||
<p class="indent-8 mb-2 text-red-600">
|
||||
如：投诉金额为45元，则退还用户投诉金额：45元，代理罚款：45*1=45元
|
||||
</p>
|
||||
<p class="indent-8 mb-2 text-red-600">
|
||||
3）公开投诉，代理罚款2倍/封号（依据具体严重情况而定，除退还投诉金额外，另行按投诉金额2倍的标准进行罚款）。
|
||||
</p>
|
||||
<p class="indent-8 mb-2 text-red-600">
|
||||
如：投诉金额为45元，退还用户金额：45元，则代理罚款：45*2=90元
|
||||
</p>
|
||||
<p class="indent-8 mb-2 text-red-600">
|
||||
4）如代理发生单笔投诉涉及到本制度第六条所规定的事由，将按第六条、第七条处罚规则合并执行。
|
||||
</p>
|
||||
|
||||
<p class="indent-8 mb-2">4、冻结、封禁类代理处罚措施</p>
|
||||
<p class="indent-8 mb-2">
|
||||
a.自冻结、封禁之日起，3个月之内无任何新的投诉、舆情升级、违法犯罪情形，代理可向平台提交"提现申请函"，平台根据处罚规则先行处罚后，对可提现余额再追加10%的罚款。代理可在7个工作日内完成相关的提现操作。但该代理账户的推广功能，则进入到审核期。
|
||||
</p>
|
||||
<p class="indent-8 mb-2">
|
||||
b.自冻结、封禁之日起，3个月之内有新的投诉、舆情升级、违法犯罪情形，则平台对该账户的审查期将会延长，审查期间无法提现。
|
||||
</p>
|
||||
|
||||
<p class="indent-8 mb-4"><strong>十一、封号规则</strong></p>
|
||||
<p class="mb-2">
|
||||
1、同一个设备频繁更换账号登录，或同一个账号频繁在多个设备登陆，系统自动自动检测手机登录IP和设备信息，有封号风险（一机一号，不要频繁切换设备或者账户）;
|
||||
</p>
|
||||
<p class="mb-2">2、欺诈用户（诱导用户）;</p>
|
||||
<p class="mb-2">3、先付款后退款等承诺;</p>
|
||||
<p class="mb-2">4、保证高额下款;</p>
|
||||
<p class="mb-2">5、使用数据优化（征信优化）等骗取用户钱财。</p>
|
||||
<p class="mb-2">6、发布涉嫌性骚扰的文字、图片;</p>
|
||||
<p class="mb-2">
|
||||
7、使用含色情、淫秽意味或其他令人不适的头像或资料;
|
||||
</p>
|
||||
<p class="mb-2">8、触犯新广告法;</p>
|
||||
<p class="mb-2">9、在朋友圈中使用辱骂、恐吓、威胁等言论;</p>
|
||||
<p class="mb-2">10、发布各类垃圾广告、恶意信息、诱骗信息;</p>
|
||||
<p class="mb-2">11、盗用他人头像或资料，伪装他人身份;</p>
|
||||
<p class="mb-2">12、多人举报的账号并涉及恶意诈骗;</p>
|
||||
<p class="mb-2">13、频繁被举报，每月超过20次以上的代理账户。</p>
|
||||
<p class="mb-2">
|
||||
14、恶意投诉，比如没有异议非说有异议且无法提供有效证明材料，各种奇葩投诉。
|
||||
</p>
|
||||
<p class="mb-2">15、租用账号，发布不良言论，诈骗信息。</p>
|
||||
<p class="mb-4">
|
||||
16、发布不当政治言论或者任何违反国家法规政策的言论。
|
||||
</p>
|
||||
<p class="mb-4">更多详细内容请认真阅读天远查《代理协议》。</p>
|
||||
|
||||
<h3 class="font-bold mb-2">退款的规则及途径</h3>
|
||||
<h4 class="font-bold mb-2">【退款规则】</h4>
|
||||
<p class="mb-2">
|
||||
1、自订单支付完成后3天内为有效期，在3天内可申请退款。
|
||||
</p>
|
||||
<p class="mb-2">2、超过报告有效期3天，则无法办理退款。</p>
|
||||
<p class="mb-2">
|
||||
3、符合相关退款条件的用户，退款时仅退还实付金额。
|
||||
</p>
|
||||
<p class="mb-2">
|
||||
4、用户购买报告成功后，因不可抗力等法定原因或平台原因，导致平台无法提供服务，用户可联系客服，发起退款。
|
||||
</p>
|
||||
<p class="mb-2">5、若因用户的失误重复付款，则支持退款重复金额。</p>
|
||||
<p class="mb-2">6、服务已发生且不符合退款情形的费用不予退款。</p>
|
||||
<p class="mb-2">
|
||||
7、如代理在市场推广中存在欺诈等相关行为，用户可提供有效的凭证办理退款事宜。
|
||||
</p>
|
||||
<p class="mb-4">
|
||||
8、产品呈现的情况与用户本人实际情况不符，用户可提供有效的凭证发起退款申请。
|
||||
</p>
|
||||
|
||||
<h4 class="font-bold mb-2">【用户发起投诉】</h4>
|
||||
<p class="mb-2">
|
||||
1.当代理拒绝退款，用户与代理双方线下也未达成一致时，用户可联系客服发起投诉。
|
||||
</p>
|
||||
<p class="mb-2">
|
||||
2.用户提交投诉后，请用户和代理按照相关提示举证，完成举证后客服将介入处理纠纷。
|
||||
</p>
|
||||
<p class="mb-2">
|
||||
3.平台客服介入前，若用户与代理双方已对退款协商一致，商家可直接联系平台客服说明情况，或者用户联系平台提供撤销投诉函并说明情况即可，同时投诉会关闭。
|
||||
</p>
|
||||
<p class="mb-2">
|
||||
4.平台客服介入后，若需要用户与代理提供举证信息，可发送相关材料至邮箱，方便客服及时处理。
|
||||
</p>
|
||||
<p class="mb-4">
|
||||
5.平台客服会根据举证信息，联系用户与代理双方处理投诉。
|
||||
</p>
|
||||
|
||||
<h5 class="indent-8 font-bold mb-2">十二、退款服务以及流程</h5>
|
||||
<p class="indent-8 mb-4">
|
||||
自用户购买查询报告成功之日起，无论由于何种原因，用户均可向平台申请退款（不适用退款服务的情况除外）。
|
||||
</p>
|
||||
|
||||
<div class="flex flex-col items-center mb-4">
|
||||
<p class="mb-2">用户发起退款申请</p>
|
||||
<p class="mb-2">↓</p>
|
||||
<p class="mb-2">提供有效证明凭证</p>
|
||||
<p class="mb-2">↓</p>
|
||||
<p class="mb-2">平台审核是否符合退款标准</p>
|
||||
<p class="mb-2">↓</p>
|
||||
<p class="mb-2">确认无误后退款完成</p>
|
||||
<p class="mb-2">（预计1-7个工作日内完成）</p>
|
||||
</div>
|
||||
|
||||
<h4 class="font-bold mb-2">【退款流程说明】</h4>
|
||||
<p class="indent-8 mb-2">
|
||||
原路返回----直接把金额退回到用户付款的来源方，包括但不限于支付宝帐户，暂不收取手续费。
|
||||
</p>
|
||||
<p class="indent-8 mb-4">
|
||||
具体操作流程：在发生退款时，用户可在查询页面点击"联系客服"发起"申请退款"申请，并提供有效的证明凭证，客服提交至平台系统，系统通过审核后，相关的退款金额将在1-7个工作日内原路返回对应的付款账户中。通过网银或支付宝等第三方支付平台进行支付的费用将直接退到原账户。
|
||||
</p>
|
||||
|
||||
<h4 class="font-bold mb-2">【不适用退款服务的情况】</h4>
|
||||
<p class="indent-8 mb-2">1、已超过退款期限；</p>
|
||||
<p class="indent-8 mb-2">2、恶意投诉；</p>
|
||||
<p class="indent-8 mb-4">3、违反《用户使用协议》相关规则。</p>
|
||||
|
||||
<h4 class="font-bold mb-2">【补充说明】</h4>
|
||||
<p class="indent-8 mb-4">
|
||||
如您需要退款的产品类型不在以上3天，或者超出了30
|
||||
天限制，则无法办理退款。如您有产品使用方面的疑问，您可以通过联系客服进行反馈。
|
||||
</p>
|
||||
|
||||
<p class="indent-8 mb-2"><strong>十三、附则</strong></p>
|
||||
<p class="indent-8 mb-2">
|
||||
1、本制度作为《代理协议》之附件与《代理协议》具有同等法律效力。
|
||||
</p>
|
||||
<p class="indent-8 mb-2">
|
||||
2、广西福铭网络科技有限公司将本着"诚信为本、长期服务"的宗旨和"公平合理"的原则对代理进行合理布局和调整，以实现互利互惠、共同快速发展的目的。
|
||||
</p>
|
||||
<p class="indent-8 mb-2">
|
||||
3、因其他原因需终止代理关系，需向广西福铭网络科技有限公司提出书面申请。
|
||||
</p>
|
||||
<p class="indent-8 mb-2">
|
||||
4、代理之间发生业务竞争和冲突，广西福铭网络科技有限公司将依据公平、公正、公开的原则按相关制度予以调解、处理。
|
||||
</p>
|
||||
<p class="indent-8 mb-2">
|
||||
5、如广西福铭网络科技有限公司与各代理之间出现协议上的纠纷，由广西福铭网络科技有限公司所在地法院裁决。
|
||||
</p>
|
||||
<p class="indent-8 mb-2">
|
||||
6、本制度的制定、修改与废止皆经由广西福铭网络科技有限公司讨论决定，解释权归广西福铭网络科技有限公司所有。
|
||||
</p>
|
||||
<p class="indent-8 mb-4">
|
||||
7、本制度于2022年1月1日起实施，公司将根据实施情况对本制度进行修正和调整。
|
||||
</p>
|
||||
|
||||
<p class="indent-8 mb-8">
|
||||
本制度一经网上点击/勾选，即代表理解并同意勾选遵守。
|
||||
</p>
|
||||
|
||||
<p class="text-right">本制度于 {{ effectiveDate }} 生效。</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 获取当前日期并格式化为中文格式
|
||||
const getFormattedDate = () => {
|
||||
const date = new Date();
|
||||
const year = date.getFullYear();
|
||||
const month = (date.getMonth() + 1).toString().padStart(2, "0");
|
||||
const day = date.getDate().toString().padStart(2, "0");
|
||||
return `${year} 年 ${month} 月 ${day} 日`;
|
||||
};
|
||||
|
||||
const effectiveDate = ref(getFormattedDate());
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
228
src/views/AgentPromoteDetails.vue
Normal file
228
src/views/AgentPromoteDetails.vue
Normal file
@@ -0,0 +1,228 @@
|
||||
<template>
|
||||
<div class="min-h-screen bg-gray-50">
|
||||
<!-- 收益列表 -->
|
||||
<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
|
||||
<div v-for="(item, index) in data.list" :key="index" class="mx-4 my-2 bg-white rounded-lg p-4 shadow-sm">
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<!-- 修改点 1: 使用 desen 函数处理 mobile -->
|
||||
<span class="text-gray-500 text-sm">{{ desen(item.query_params?.mobile, 'mobile') || '-' }}</span>
|
||||
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium"
|
||||
:class="getReportTypeStyle(item.product_name)">
|
||||
<span class="w-2 h-2 rounded-full mr-1" :class="getDotColor(item.product_name)"></span>
|
||||
{{ item.product_name }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<h4 class="text-gray-700 font-medium">直接收益</h4>
|
||||
<div class="flex flex-col items-end">
|
||||
<!-- 主金额：显示净佣金 -->
|
||||
<span :class="getAmountColor(item)" class="font-bold text-lg">
|
||||
{{ getAmountPrefix(item) }}{{ (item.net_amount || 0).toFixed(2) }}
|
||||
</span>
|
||||
<!-- 如果有部分退款，显示原始金额和已退金额 -->
|
||||
<span v-if="item.refunded_amount > 0 && item.net_amount > 0" class="text-gray-400 text-xs mt-1">
|
||||
原始 {{ item.amount.toFixed(2) }}，已退 {{ item.refunded_amount.toFixed(2) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-gray-500 text-sm">{{ desen(item.query_params?.name) || '-' }}</span>
|
||||
<!-- 状态标签 -->
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium"
|
||||
:class="getStatusStyle(item)">
|
||||
{{ getStatusText(item) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<span class="text-gray-500 text-sm">{{ item.create_time || '-' }}</span>
|
||||
</div>
|
||||
<div class="flex items-center mt-2">
|
||||
<span class="text-gray-500 text-sm">订单号：</span>
|
||||
<span class="text-gray-700 text-sm font-mono">{{ item.order_id || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</van-list>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 颜色配置（根据产品名称映射）
|
||||
const typeColors = {
|
||||
'小微企业': { bg: 'bg-blue-100', text: 'text-blue-800', dot: 'bg-blue-500' },
|
||||
'入职风险': { bg: 'bg-green-100', text: 'text-green-800', dot: 'bg-green-500' },
|
||||
'家政风险': { bg: 'bg-purple-100', text: 'text-purple-800', dot: 'bg-purple-500' },
|
||||
'婚恋风险': { bg: 'bg-pink-100', text: 'text-pink-800', dot: 'bg-pink-500' },
|
||||
'贷前风险': { bg: 'bg-orange-100', text: 'text-orange-800', dot: 'bg-orange-500' },
|
||||
'租赁风险': { bg: 'bg-indigo-100', text: 'text-indigo-800', dot: 'bg-indigo-500' },
|
||||
'个人风险': { bg: 'bg-red-100', text: 'text-red-800', dot: 'bg-red-500' },
|
||||
'个人大数据': { bg: 'bg-red-100', text: 'text-red-800', dot: 'bg-red-500' },
|
||||
// 默认类型
|
||||
'default': { bg: 'bg-gray-100', text: 'text-gray-800', dot: 'bg-gray-500' }
|
||||
}
|
||||
|
||||
// 新增点 4: 定义脱敏函数
|
||||
const desen = (value, type) => {
|
||||
// 如果值是空，直接返回空字符串，让外层的 || '-' 生效
|
||||
if (!value) {
|
||||
return '';
|
||||
}
|
||||
// 根据类型进行不同的替换
|
||||
switch (type) {
|
||||
case 'mobile': // 手机号：保留前3位和后4位，中间4位替换为 ****
|
||||
return value.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2');
|
||||
case 'id_card':// 身份证：保留前6位和后1位，中间替换为 ********
|
||||
return value.replace(/^(.{6}).*(.{1})$/, '$1********$2');
|
||||
default:
|
||||
return value; // 其他类型不处理
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const page = ref(1)
|
||||
const pageSize = ref(10)
|
||||
const data = ref({
|
||||
total: 0,
|
||||
list: []
|
||||
})
|
||||
const loading = ref(false)
|
||||
const finished = ref(false)
|
||||
|
||||
// 获取颜色样式
|
||||
const getReportTypeStyle = (name) => {
|
||||
const color = typeColors[name] || typeColors.default
|
||||
return `${color.bg} ${color.text}`
|
||||
}
|
||||
|
||||
// 获取小圆点颜色
|
||||
const getDotColor = (name) => {
|
||||
return (typeColors[name] || typeColors.default).dot
|
||||
}
|
||||
|
||||
// 获取金额颜色
|
||||
const getAmountColor = (item) => {
|
||||
// 如果净佣金为0或状态为已退款，显示红色
|
||||
if (item.net_amount <= 0 || item.status === 2) {
|
||||
return 'text-red-500'
|
||||
}
|
||||
// 如果有部分退款，显示橙色
|
||||
if (item.refunded_amount > 0) {
|
||||
return 'text-orange-500'
|
||||
}
|
||||
// 正常情况显示绿色
|
||||
return 'text-green-500'
|
||||
}
|
||||
|
||||
// 获取金额前缀（+ 或 -）
|
||||
const getAmountPrefix = (item) => {
|
||||
if (item.net_amount <= 0 || item.status === 2) {
|
||||
return '-'
|
||||
}
|
||||
return '+'
|
||||
}
|
||||
|
||||
// 获取状态文本
|
||||
const getStatusText = (item) => {
|
||||
if (item.status === 2 || item.net_amount <= 0) {
|
||||
return '已退款'
|
||||
}
|
||||
if (item.status === 1) {
|
||||
// 冻结中
|
||||
if (item.refunded_amount > 0) {
|
||||
return '冻结中（部分退款）'
|
||||
}
|
||||
return '冻结中'
|
||||
}
|
||||
if (item.status === 0) {
|
||||
// 已结算
|
||||
if (item.refunded_amount > 0) {
|
||||
return '已结算（部分退款）'
|
||||
}
|
||||
return '已结算'
|
||||
}
|
||||
return '未知状态'
|
||||
}
|
||||
|
||||
// 获取状态样式
|
||||
const getStatusStyle = (item) => {
|
||||
if (item.status === 2 || item.net_amount <= 0) {
|
||||
return 'bg-red-100 text-red-800'
|
||||
}
|
||||
if (item.status === 1) {
|
||||
// 冻结中
|
||||
if (item.refunded_amount > 0) {
|
||||
return 'bg-orange-100 text-orange-800'
|
||||
}
|
||||
return 'bg-yellow-100 text-yellow-800'
|
||||
}
|
||||
if (item.status === 0) {
|
||||
// 已结算
|
||||
if (item.refunded_amount > 0) {
|
||||
return 'bg-blue-100 text-blue-800'
|
||||
}
|
||||
return 'bg-green-100 text-green-800'
|
||||
}
|
||||
return 'bg-gray-100 text-gray-800'
|
||||
}
|
||||
|
||||
// 加载更多数据
|
||||
const onLoad = async () => {
|
||||
if (!finished.value) {
|
||||
page.value++
|
||||
await getData()
|
||||
}
|
||||
}
|
||||
|
||||
// 获取数据
|
||||
const getData = async () => {
|
||||
try {
|
||||
loading.value = true
|
||||
const { data: res, error } = await useApiFetch(
|
||||
`/agent/commission?page=${page.value}&page_size=${pageSize.value}`
|
||||
).get().json()
|
||||
|
||||
if (res.value?.code === 200 && !error.value) {
|
||||
// 首次加载
|
||||
if (page.value === 1) {
|
||||
data.value = res.value.data
|
||||
} else {
|
||||
// 分页加载
|
||||
data.value.list.push(...res.value.data.list)
|
||||
}
|
||||
|
||||
// 判断是否加载完成
|
||||
if (data.value.list.length >= res.value.data.total ||
|
||||
res.value.data.list.length < pageSize.value) {
|
||||
finished.value = true
|
||||
}
|
||||
}
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化加载
|
||||
onMounted(() => {
|
||||
getData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 列表项入场动画 */
|
||||
.list-enter-active {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.list-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
/* 适配vant组件 */
|
||||
:deep(.van-list__finished-text) {
|
||||
@apply py-4 text-gray-400 text-sm;
|
||||
}
|
||||
|
||||
:deep(.van-list__loading) {
|
||||
@apply py-4;
|
||||
}
|
||||
</style>
|
||||
137
src/views/AgentRewardsDetails.vue
Normal file
137
src/views/AgentRewardsDetails.vue
Normal file
@@ -0,0 +1,137 @@
|
||||
<template>
|
||||
<div class="min-h-screen bg-gray-50">
|
||||
<!-- 收益列表 -->
|
||||
<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
|
||||
<div v-for="(item, index) in data.list" :key="index" class="mx-4 my-2 bg-white rounded-lg p-4 shadow-sm">
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<span class="text-gray-500 text-sm">{{ item.create_time || '-' }}</span>
|
||||
<span class="text-green-500 font-bold">+{{ item.amount.toFixed(2) }}</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium"
|
||||
:class="getReportTypeStyle(item.type)">
|
||||
<span class="w-2 h-2 rounded-full mr-1" :class="getDotColor(item.type)"></span>
|
||||
{{ typeToChinese(item.type) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</van-list>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 类型映射配置
|
||||
const typeConfig = {
|
||||
descendant_promotion: {
|
||||
chinese: '下级推广奖励',
|
||||
color: { bg: 'bg-blue-100', text: 'text-blue-800', dot: 'bg-blue-500' }
|
||||
},
|
||||
descendant_upgrade_vip: {
|
||||
chinese: '下级升级VIP奖励',
|
||||
color: { bg: 'bg-green-100', text: 'text-green-800', dot: 'bg-green-500' }
|
||||
},
|
||||
descendant_upgrade_svip: {
|
||||
chinese: '下级升级SVIP奖励',
|
||||
color: { bg: 'bg-purple-100', text: 'text-purple-800', dot: 'bg-purple-500' }
|
||||
},
|
||||
descendant_stay_activedescendant: {
|
||||
chinese: '下级活跃奖励',
|
||||
color: { bg: 'bg-pink-100', text: 'text-pink-800', dot: 'bg-pink-500' }
|
||||
},
|
||||
new_active: {
|
||||
chinese: '新增活跃奖励',
|
||||
color: { bg: 'bg-orange-100', text: 'text-orange-800', dot: 'bg-orange-500' }
|
||||
},
|
||||
descendant_withdraw: {
|
||||
chinese: '下级提现奖励',
|
||||
color: { bg: 'bg-indigo-100', text: 'text-indigo-800', dot: 'bg-indigo-500' }
|
||||
},
|
||||
default: {
|
||||
chinese: '其他奖励',
|
||||
color: { bg: 'bg-gray-100', text: 'text-gray-800', dot: 'bg-gray-500' }
|
||||
}
|
||||
}
|
||||
|
||||
const page = ref(1)
|
||||
const pageSize = ref(10)
|
||||
const data = ref({
|
||||
total: 0,
|
||||
list: []
|
||||
})
|
||||
const loading = ref(false)
|
||||
const finished = ref(false)
|
||||
|
||||
// 类型转中文
|
||||
const typeToChinese = (type) => {
|
||||
return typeConfig[type]?.chinese || typeConfig.default.chinese
|
||||
}
|
||||
|
||||
// 获取颜色样式
|
||||
const getReportTypeStyle = (type) => {
|
||||
const config = typeConfig[type] || typeConfig.default
|
||||
return `${config.color.bg} ${config.color.text}`
|
||||
}
|
||||
|
||||
// 获取小圆点颜色
|
||||
const getDotColor = (type) => {
|
||||
return typeConfig[type]?.color.dot || typeConfig.default.color.dot
|
||||
}
|
||||
|
||||
// 加载更多数据
|
||||
const onLoad = async () => {
|
||||
if (!finished.value) {
|
||||
page.value++
|
||||
await getData()
|
||||
}
|
||||
}
|
||||
|
||||
// 获取数据
|
||||
const getData = async () => {
|
||||
try {
|
||||
loading.value = true
|
||||
const { data: res, error } = await useApiFetch(
|
||||
`/agent/rewards?page=${page.value}&page_size=${pageSize.value}`
|
||||
).get().json()
|
||||
|
||||
if (res.value?.code === 200 && !error.value) {
|
||||
if (page.value === 1) {
|
||||
data.value = res.value.data
|
||||
} else {
|
||||
data.value.list.push(...res.value.data.list)
|
||||
}
|
||||
|
||||
if (data.value.list.length >= res.value.data.total ||
|
||||
res.value.data.list.length < pageSize.value) {
|
||||
finished.value = true
|
||||
}
|
||||
}
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化加载
|
||||
onMounted(() => {
|
||||
getData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 保持原有样式不变 */
|
||||
.list-enter-active {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.list-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
:deep(.van-list__finished-text) {
|
||||
@apply py-4 text-gray-400 text-sm;
|
||||
}
|
||||
|
||||
:deep(.van-list__loading) {
|
||||
@apply py-4;
|
||||
}
|
||||
</style>
|
||||
277
src/views/AgentServiceAgreement.vue
Normal file
277
src/views/AgentServiceAgreement.vue
Normal file
@@ -0,0 +1,277 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="container mx-auto p-4 text-gray-800">
|
||||
<p class="text-center font-bold text-lg">信息技术服务合同
|
||||
</p>
|
||||
<p class="text-left"><span></span></p>
|
||||
<p class="text-left"><span class="text-black">甲方：</span></p>
|
||||
<p class="text-left"><span class="text-black">乙方：</span><span
|
||||
class="text-black">广西福铭网络科技有限公司</span>
|
||||
</p>
|
||||
<p class="text-left"> </p>
|
||||
<p class="text-left"><span class="text-black">鉴于：</span></p>
|
||||
<p class="text-left"><span class="text-black">1.
|
||||
甲方为其合法合规经营之业务，依法需对甲方最终用户或有关交易和交往利害关系主体有关信息进行识别；</span></p>
|
||||
<p class="text-left"><span class="text-black">2.
|
||||
乙方具备相关信息技术之专业能力，能够为甲方提供相应服务；</span></p>
|
||||
<p class="text-left"></p>
|
||||
<p class="text-left"><span class="text-black">
|
||||
现双方根据《中华人民共和国</span><span class="text-black">民法典</span><span
|
||||
class="text-black">》等相关法律法规，本着诚实、信用、公平，促进社会诚信发展为原则，经友好协商就</span><span
|
||||
class="text-black">广西福铭网络科技有限公司</span><span
|
||||
class="text-black">信息技术服务事宜达成一致，签订本合同。</span></p>
|
||||
<p class="text-left"><span></span></p>
|
||||
<p class="text-left"></p>
|
||||
<p class="text-left"><span class="text-black">一、
|
||||
释义</span></p>
|
||||
<p class="text-left"><span class="text-black">
|
||||
除上下文另有约定外，下列用语具有如下含义：</span></p>
|
||||
<p class="text-left"><span class="text-black">1.1
|
||||
</span><span class="text-black">广西福铭网络科技有限公司</span><span
|
||||
class="text-black">信息技术服务／服务
|
||||
指乙方通过信息化、人工智能和信息科技等技术手段对</span><span class="text-black">大数据</span><span
|
||||
class="text-black">进行以公众号、小程序、APP、web页面（以下简称平台）或标准接口形式为客户提供的服务，协助客户完成信息的整理、管理等业务流程。</span>
|
||||
</p>
|
||||
<p class="text-left"><span class="text-black">1.2
|
||||
本合同 指本文本协议，及其形成本合同不可分割的附件。</span></p>
|
||||
<p class="text-left"><span class="text-black">1.3
|
||||
本合同标题仅供方便参考之用，不影响本合同的含义与解释。</span></p>
|
||||
<p class="text-left"><span class="text-black">1.4
|
||||
本合同甲方、乙方单独称为“一方”，合称为“双方”。</span></p>
|
||||
<p class="text-left"><span class="text-black">1.5
|
||||
法律法规 指中国法律、行政法规、部门规章、地方性法规、地方性政府部门规章以及由政府机构颁布的其他规范性文件。</span></p>
|
||||
<p class="text-left"><span class="text-black">1.6
|
||||
工作日 指法定节假日、休息日之外的日期。</span></p>
|
||||
<p class="text-left"><span class="text-black">1.7
|
||||
服务有效期 指乙方依据本合同提供服务的期限。</span></p>
|
||||
<p class="text-left"><span class="text-black">1.8
|
||||
授权
|
||||
指甲方最终用户以书面签名或法律效力等同于书面的电子签名等方式明确同意甲方向第三方服务商（指乙方并含其关联方，下同）提供本人／单位相关数据信息（包括但不限于个人信息、行为、交易、设备、不良信息，下同），及同意该第三方服务提供商查询、核实、搜集、处理、共享、使用（含合法业务应用）其本人／单位相关数据的行为，但是法律法规规定可以不经同意的除外。</span>
|
||||
</p>
|
||||
<p class="text-left"><span class="text-black">1.9
|
||||
API（Application Programming Interface,应用程序编程接口）
|
||||
指一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。</span></p>
|
||||
<p class="text-left"><span class="text-black">1.10
|
||||
Web应用 指一种可以通过Web访问的应用程序，由完成特定任务的各种Web组件（web
|
||||
components）构成的并通过Web将服务展示给客户。</span></p>
|
||||
<p class="text-left"><span class="text-black">1.11
|
||||
SFTP(Secure File Transfer Protocol,安全文件传送协议)
|
||||
指可以为传输文件提供一种安全的加密方法。</span></p>
|
||||
<p class="text-left"></p>
|
||||
<p class="text-left"><span class="text-black">二、
|
||||
合作内容与方式</span></p>
|
||||
<p class="text-left"><span class="text-black">2.1
|
||||
根据本合同约定的条件和条款，甲方使用乙方提供的【</span><span
|
||||
class="text-black">广西福铭网络科技有限公司</span><span class="text-black">相关</span><span
|
||||
class="text-black">信息技术】服务（简称“乙方服务”或“本服务”）。</span></p>
|
||||
<p class="text-left"><span class="text-black">2.2
|
||||
|
||||
乙方负责提供服务平台或接口，供甲方通过平台或接口使用本服务。乙方向甲方提供的平台或接口是使用本服务的重要凭证，除非另有约定或说明，甲方通过该平台或接口向乙方所发出的指令及相关行为均视为甲方的行为。</span>
|
||||
</p>
|
||||
<p class="text-left"><span class="text-black">2.3
|
||||
甲方通过乙方提供的平台或API／Web应用向乙方发起服务需求，乙方通过平台或API／Web应用将服务结果返回给甲方。</span>
|
||||
</p>
|
||||
<p class="text-left"><span class="text-black">三、
|
||||
费用及支付</span></p>
|
||||
<p class="text-left"><span class="text-black">3.1
|
||||
本合同采用先付费，后使用的计价模式。甲方依据自主选择的服务项目对应费用向乙方支付服务费用。</span></p>
|
||||
<p class="text-left"><span class="text-black">3.2
|
||||
服务有效期及支付方式</span></p>
|
||||
<p class="text-left"><span class="text-black">3.2.1
|
||||
服务有效期以1年为准。
|
||||
除非另有约定，充值金额使用完毕/流量限额全部用完或服务有效期届满之日（以先到者为准）且未在服务有效期内续费或者续流量的，则本合同即终止；在服务有效期内继续充值的，则续充的服务有效期为该次充值之后12个月；如当期服务有效期届满而预付金额/流量限额未用完，乙方无需退还服务费并不予以延期使用。</span>
|
||||
</p>
|
||||
<p class="text-left"><span class="text-black">3.3
|
||||
支付方式：</span></p>
|
||||
<p class="text-left"><span class="text-black">3.3.1
|
||||
甲方向乙方一次性</span><span class="text-black">或分多次</span><span
|
||||
class="text-black">支付服务费。</span></p>
|
||||
<p class="text-left"><span class="text-black">3.3.2
|
||||
乙方根据甲方使用功能和次数实时计费，并从甲方已支付费用中扣除。</span></p>
|
||||
<p class="text-left"><span class="text-black">3.3.3
|
||||
若甲方拟继续使用服务的，则须在预付费/流量使用完毕后，继续充值。具体充值的服务项目和价格见平台展示。</span></p>
|
||||
<p class="text-left"></p>
|
||||
<p class="text-left"><span class="text-black">四、
|
||||
权利与义务</span></p>
|
||||
<p class="text-left"><span class="text-black">4.1
|
||||
甲方权利与义务</span></p>
|
||||
<p class="text-left"><span class="text-black">4.1.1
|
||||
甲方有权根据本合同约定向乙方提起服务需求</span></p>
|
||||
<p class="text-left"><span class="text-black">4.1.2
|
||||
甲方</span><span
|
||||
class="text-black">使用乙方服务，不得违反《中华人民共和国个人信息保护法》及《征信业务管理办法》的相关规定，</span><span
|
||||
class="text-black">对乙方所提供的服务信息予以保密，且严格遵守法律法规，不从事任何侵犯个人信息或商业秘密的活动。</span>
|
||||
</p>
|
||||
<p class="text-left"><span class="text-black">4.1.3
|
||||
甲方向乙方提交的服务需求及相关数据，均已经过被查询用户、最终用户充分有效的书面或电子授权，同意乙方及乙方的关联合作方对相关数据进行获取，并在乙方系统中或提交数据源方用于该合同项下的识别并进行储存、分析、处理及使用（含业务应用）等合法行为，甲方对此充分理解并认可。</span>
|
||||
</p>
|
||||
<p class="text-left"><span
|
||||
class="text-black">根据乙方要求，甲方应当向乙方提供由最终用户签字的授权文件，乙方仅予以形式审查；乙方对授权文件的审查不免除甲方就授权的真实性、合法性、完整性、与本合同约定的一致性所承担的责任。</span>
|
||||
</p>
|
||||
<p class="text-left"><span class="text-black">4.1.4
|
||||
甲方需向乙方提供经乙方服务识别有相关用户之信息及验证结果反馈。</span></p>
|
||||
<p class="text-left"><span class="text-black">4.1.5
|
||||
未经乙方同意，甲方不得将乙方提供的服务进行宣传或使用乙方名称、业务介绍、标识、商标、知识产权等。</span></p>
|
||||
<p class="text-left"><span class="text-black">4.1.6
|
||||
甲方应限于自身使用乙方提供的产品和服务，不得从事与乙方有竞争关系的业务。</span></p>
|
||||
<p class="text-left"><span class="text-black">4.1.7
|
||||
除为实现本合同目的确有必要外，甲方不将获得的服务信息进行存储、复制、下载、打印。</span></p>
|
||||
<p class="text-left"><span class="text-black">4.2
|
||||
乙方的权利和义务</span></p>
|
||||
<p class="text-left"><span class="text-black">4.2.1
|
||||
负责提供服务，向甲方提供标准平台服务或接口文件，为甲方开通服务账号。</span></p>
|
||||
<p class="text-left"><span class="text-black">4.2.2
|
||||
乙方负责其系统的设计、开发，使系统能够支撑合作业务正常运行，并有义务对甲方提出的维护请求给予支持。</span></p>
|
||||
<p class="text-left"><span class="text-black">4.2.3
|
||||
乙方为优化对甲方提供的服务，可对其服务系统进行升级、调试等处理。</span></p>
|
||||
<p class="text-left"><span class="text-black">4.2.4
|
||||
在乙方受甲方委托为甲方提供信息技术服务中所产生的后果（包括但不限于因甲方提供数据缺乏真实性或准确性导致服务偏差、乙方在受托服务中与甲方用户发生纠纷或遭投诉的），由甲方负责处理与承担。</span>
|
||||
</p>
|
||||
<p class="text-left"><span class="text-black">4.2.5
|
||||
如甲方未按约定支付服务费时，乙方有权中止服务。</span></p>
|
||||
<p class="text-left"><span class="text-black">4.2.6
|
||||
因甲方违反合同保密、授权条款或违反约定使用本服务（包括但不限于5.1.6、5.1.7、5.1.8）的，乙方可以中止或终止服务，并向甲方索赔对乙方造成损失的违约费用；</span>
|
||||
</p>
|
||||
<p class="text-left"><span class="text-black">4.2.7
|
||||
乙方为履行本合同在不影响甲方权利的前提下可以通过乙方关联公司向甲方提供服务。</span></p>
|
||||
<p class="text-left"></p>
|
||||
<p class="text-left"><span class="text-black">五、
|
||||
知识产权</span></p>
|
||||
<p class="text-left"><span class="text-black">5.1
|
||||
|
||||
乙方享有本合同产品和服务相关内容之知识产权与所有权包括但不限于：软件、程序、源代码、文档、专利、商标、著作权、域名、专有技术、商业秘密、文字表达及其组合、数据、数据变量、数据算法、数据／模型、图标、图饰、图表、色彩、界面设计；除非经乙方许可，本合同并不赋予甲方享有乙方任何知识产权上的权利。</span>
|
||||
</p>
|
||||
<p class="text-left"><span class="text-black">5.2
|
||||
除非另有约定，任何一方均不可凭借本合同取得另一方所拥有的著作权、专利权、商标权或其他知识产权。</span></p>
|
||||
<p class="text-left"></p>
|
||||
<p class="text-left"><span class="text-black">六、
|
||||
保密与信息安全</span></p>
|
||||
<p class="text-left"><span class="text-black">
|
||||
除非双方签订《商业保密协议》对保密另有约定外，需履行以下保密约定：
|
||||
</span></p>
|
||||
<p class="text-left"><span class="text-black">6.1
|
||||
|
||||
保密信息：提供方（或其母公司、子公司、关联公司）向接受方披露的信息包括但不限于本合同内容、合作模式、商业计划、投资、经营方案、分析或计算方法、系统、数据、数据变量、数据算法、数据／模型、程序、装置、规格、序列、设计、研究或开发活动和方案、知识产权、专有技术、服务信息与服务说明、业务与营销方案、推广方法、销售额、客户名单、商业机会、成本、价格及其他财务信息。</span>
|
||||
</p>
|
||||
<p class="text-left"><span class="text-black">6.2
|
||||
|
||||
保密信息不包括：（1）在收到保密信息之时或之前已合法知悉的信息且该信息不受保密义务约束；（2）非因接受方违约而成为公众信息的信息；（3）接受方从披露方及其关联方以外的其他信息源所获知的信息；（4）提供方未明示为保密信息的信息；（5）接受方未利用任何保密信息而合法独立开发的信息，或通过接受方信息数据分析而获知的信息。</span>
|
||||
</p>
|
||||
<p class="text-left"><span class="text-black">6.3
|
||||
|
||||
上述保密信息可以以数据、文字及记载上述内容的书面资料、图书、录音资料、录像资料、光盘、软件、网页、客户端等有形媒介体现，也可通过口头等形式体现。</span>
|
||||
</p>
|
||||
<p class="text-left"><span class="text-black">6.4
|
||||
任何一方在提供保密信息时，如以书面形式提供，应注明‘保密’等相关字样；如以口头或可视形式透露，应在披露前明示接受方为保密信息。</span></p>
|
||||
<p class="text-left"><span class="text-black">6.5
|
||||
|
||||
除另有约定外，未经披露方书面同意，须将保密信息严格保密，并不得直接或间接导致、准许或容许向任何第三方披露、公布、转移、挪用或泄露保密信息；接受方均不向第三方及其不必要知悉的员工披露保密信息。</span>
|
||||
</p>
|
||||
<p class="text-left"><span class="text-black">6.6
|
||||
|
||||
除另有约定外，承担保密义务的范围不包括：（1）由乙方提供给数据源方的；（2）提供给乙方关联公司的；（3）将经适当汇总、编辑、修改、整理的保密信息在必要与合理范围内提供给律师和会计师及其他专业服务提供者；（4）按照法律、法规、监管、有管辖权的法院要求须提供的信息，但在不禁止的情况下应立即向保密信息提供方予以通报。</span>
|
||||
</p>
|
||||
<p class="text-left"><span class="text-black">6.7
|
||||
双方确认除非保密信息依法公开，保密义务自本合同签订时开始持续有效；甲方是否继续使用乙方的服务，不影响保密义务的承担。</span>
|
||||
</p>
|
||||
<p class="text-left"><span class="text-black">6.8
|
||||
|
||||
双方均应当遵守法律法规关于信息安全的管理规定，并采取有效措施保障信息安全包括但不限于保障计算机系统及其相关配套设备、设施（含网络）、运行环境、信息系统功能的安全运行等。</span>
|
||||
</p>
|
||||
<p class="text-left"></p>
|
||||
<p class="text-left"><span class="text-black">七、
|
||||
反商业贿赂</span></p>
|
||||
<p class="text-left"><span class="text-black">7.1
|
||||
双方都清楚并愿意严格遵守反商业贿赂的法律规定，任何形式的贿赂和贪渎行为都将触犯法律，并将受到不利后果。</span></p>
|
||||
<p class="text-left"><span class="text-black">7.2
|
||||
|
||||
双方均不得向对方或对方经办人或其他相关人员索要、收受、提供给予本合同约定外的任何利益，包括但不限于明扣、暗扣、现金、购物卡、实物、有价证券旅游或其他非物质利益等，但如该等利益属于行业惯例或通常礼仪做法的除外。</span>
|
||||
</p>
|
||||
<p class="text-left"><span
|
||||
class="text-black">本款“相关人员”是指双方经办人以外的与本合同有直接或间接利益关系的人员，如经办人的亲友等。</span>
|
||||
</p>
|
||||
<p class="text-left"></p>
|
||||
<p class="text-left"><span class="text-black">八、
|
||||
违约责任</span></p>
|
||||
<p class="text-left"><span class="text-black">8.1
|
||||
|
||||
除非另有约定，任何一方未履行本合同或违反约定且未及时改正或采取补救措施的，违约方应向守约方按照已发生合同金额的</span><span
|
||||
class="text-black">30</span><span
|
||||
class="text-black">%向守约方承担违约责任，并赔偿守约方因此受到的直接经济损失（包括调查、仲裁、诉讼、律师等合理费用）。</span></p>
|
||||
<p class="text-left"><span class="text-black">8.2
|
||||
|
||||
如因甲方原因导致本合同终止的，其无权要求乙方退回已收取而未使用的服务费；若一方因对方或其它非己方原因未能履行本合同下的义务，一方无需赔偿对方承受的损失。</span>
|
||||
</p>
|
||||
<p class="text-left"><span class="text-black">8.3
|
||||
一方未行使、迟延行使或部分行使其权利，并不意味该权利被放弃；某一权利不行使并不意味着其它权利被放弃。</span></p>
|
||||
<p class="text-left"></p>
|
||||
<p class="text-left"><span class="text-black">九、
|
||||
免责事由</span></p>
|
||||
<p class="text-left"><span class="text-black">除特别指明外，一方无须就下列情形承担责任：</span></p>
|
||||
<p class="text-left"><span class="text-black">9.1
|
||||
|
||||
不可抗力。不可抗力是指合同双方当事人不能预见、不能避免并不能克服的客观情况，包括但不限于：战争、骚乱、恐怖主义、洪水、地震、台风、国家公布的疫情等事件。</span>
|
||||
</p>
|
||||
<p class="text-left"><span class="text-black">9.2
|
||||
|
||||
因法律、法规、规章、规定、指引、通知、政策、命令及其他规范性文件或政府行为原因导致本合同不能履行的，适用关于不可抗力的规定。</span></p>
|
||||
<p class="text-left"><span class="text-black">9.3
|
||||
乙方为改善服务质量或数据源方对系统进行调整、升级、扩容等措施而导致服务中断、延时等情况。</span></p>
|
||||
<p class="text-left"><span class="text-black">9.4
|
||||
因网络、设备、黑客攻击、计算机病毒侵入或发作、通信或电力故障等不可预测因素造成不能提供服务的情形。</span></p>
|
||||
<p class="text-left"></p>
|
||||
<p class="text-left"><span class="text-black">十、
|
||||
争议解决与法律适用</span></p>
|
||||
<p class="text-left"><span class="text-black">10.1
|
||||
因履行本合同而发生的一切争议，甲乙双方应协商解决。协商不成的，任何一方均有权向乙方所在地有管辖权法院提起诉讼。</span></p>
|
||||
<p class="text-left"><span class="text-black">十一、
|
||||
通知与送达</span></p>
|
||||
<p class="text-left"><span class="text-black">11.1
|
||||
|
||||
本合同项下的通知应以电子邮件、快递、传真、专人递送按合同签署页所列示联系方式发出,除非任何一方已书面通知对方变更联系方式并经对方确认。</span></p>
|
||||
<p class="text-left"><span class="text-black">11.2
|
||||
|
||||
书面通知的形式包括在网站公告、电子邮件、站内信、微信、手机短信和传真等电子方式及纸质文件。通知在下列日期视为送达被通知方：如以电子邮件发送，显示成功发送确认时，或发送后第一个工作日内未被退回；如是以快递发送，以交邮后第五个工作日；如以传真发送，于发件人传真机记录传输确认时；如以专人递送，被通知方签收日。</span>
|
||||
</p>
|
||||
<p class="text-left"></p>
|
||||
<p class="text-left"><span class="text-black">十二、
|
||||
其他</span></p>
|
||||
<p class="text-left"><span class="text-black">12.1
|
||||
|
||||
本合同附件作为本合同的组成部分，与本合同具有同等的法律效力；未尽事宜经双方协商后签订补充合同，补充合同与本合同条款如有冲突，以补充合同为准。</span>
|
||||
</p>
|
||||
<p class="text-left"><span class="text-black">12.2
|
||||
本合同终止日与服务有效期终止日相同，在合同期限届满前由双方友好协商是否续约。</span></p>
|
||||
<p class="text-left"><span class="text-black">12.3
|
||||
|
||||
本合同终止不影响合同中有关授权、付款、保密、知识产权、反商业贿赂、违约责任、争议解决与法律适用等可以独立存在的条款的效力，一方未履行完毕的义务仍需继续履行。</span>
|
||||
</p>
|
||||
<p class="text-left"><span class="text-black">12.4
|
||||
本合同自甲方支付/充值费用之日</span><span class="text-black">计算服务期限</span><span
|
||||
class="text-black">，合同期限为12个月。</span></p>
|
||||
<p style="text-indent:24pt;"><span>本协议通过点击同意/勾选的方式签署，自签署之日生效。</span>
|
||||
</p>
|
||||
<p style="text-indent: 24pt; text-align: right;"><span>本协议于 {{ effectiveDate }}生效。</span></p>
|
||||
<p class="text-center"></p>
|
||||
<p></p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const getFormattedDate = () => {
|
||||
const date = new Date()
|
||||
const year = date.getFullYear()
|
||||
const month = (date.getMonth() + 1).toString().padStart(2, '0')
|
||||
const day = date.getDate().toString().padStart(2, '0')
|
||||
return `${year} 年 ${month} 月 ${day} 日`
|
||||
}
|
||||
|
||||
const effectiveDate = ref(getFormattedDate())
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
p {
|
||||
@apply my-1
|
||||
}
|
||||
</style>
|
||||
33
src/views/AgentVip.vue
Normal file
33
src/views/AgentVip.vue
Normal file
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<div class="relative">
|
||||
<img class="" src="@/assets/images/vip_bg.png" alt="代理会员" />
|
||||
<div class="absolute left-[50%] translate-x-[-50%] bottom-80 flex flex-col gap-4 items-center">
|
||||
<div @click="toVipApply"
|
||||
class="bg-gradient-to-r from-amber-500 to-amber-600 py-2 px-6 rounded-lg text-white text-[24px] font-bold shadow-[0_0_15px_rgba(255,255,255,0.3)] hover:scale-105 transition-transform">
|
||||
申请VIP代理
|
||||
</div>
|
||||
<div @click="toService"
|
||||
class="bg-gradient-to-r from-gray-900 via-black to-gray-900 py-2 px-4 rounded-lg text-white text-[20px] font-bold shadow-[0_0_15px_rgba(255,255,255,0.3)] hover:scale-105 transition-transform">
|
||||
联系客服
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
function toVipApply() {
|
||||
router.push("/agent/vipApply");
|
||||
}
|
||||
|
||||
function toService() {
|
||||
// window.location.href = '/service' // 跳转到客服页面
|
||||
window.location.href =
|
||||
"https://work.weixin.qq.com/kfid/kfc5c19b2b93a5e73b9"; // 跳转到客服页面
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
907
src/views/AgentVipApply.vue
Normal file
907
src/views/AgentVipApply.vue
Normal file
@@ -0,0 +1,907 @@
|
||||
<template>
|
||||
<div class="agent-VIP-apply w-full min-h-screen bg-gradient-to-b from-amber-50 via-amber-100 to-amber-50 pb-24">
|
||||
<!-- 装饰元素 -->
|
||||
<div
|
||||
class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-amber-300 to-amber-500 rounded-bl-full opacity-20">
|
||||
</div>
|
||||
<div
|
||||
class="absolute top-40 left-0 w-16 h-16 bg-gradient-to-tr from-amber-400 to-amber-600 rounded-tr-full opacity-20">
|
||||
</div>
|
||||
<div
|
||||
class="absolute bottom-60 right-0 w-24 h-24 bg-gradient-to-bl from-amber-300 to-amber-500 rounded-tl-full opacity-20">
|
||||
</div>
|
||||
|
||||
<!-- 顶部标题区域 -->
|
||||
<div class="header relative pt-8 px-4 pb-6 text-center">
|
||||
<div
|
||||
class="animate-pulse absolute -top-2 left-1/2 -translate-x-1/2 w-24 h-1 bg-gradient-to-r from-amber-300 via-amber-500 to-amber-300 rounded-full">
|
||||
</div>
|
||||
<h1 class="text-3xl font-bold text-amber-800 mb-1">
|
||||
{{ isVipOrSvip ? '代理会员续费' : 'VIP代理申请' }}
|
||||
</h1>
|
||||
<p class="text-sm text-amber-700 mt-2 max-w-xs mx-auto">
|
||||
<template v-if="isVipOrSvip">
|
||||
您的会员有效期至 {{ formatExpiryTime(ExpiryTime) }}，续费后有效期至
|
||||
{{ renewalExpiryTime }}
|
||||
</template>
|
||||
<template v-else>
|
||||
平台为疯狂推广者定制的赚买计划，助您收益<span class="text-red-500 font-bold">翻倍增升</span>
|
||||
</template>
|
||||
</p>
|
||||
|
||||
<!-- 装饰性金币图标 -->
|
||||
<div class="absolute top-6 left-4 transform -rotate-12">
|
||||
<div
|
||||
class="w-8 h-8 bg-gradient-to-br from-yellow-300 to-yellow-500 rounded-full flex items-center justify-center shadow-lg">
|
||||
<span class="text-white font-bold text-xs">¥</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute top-10 right-6 transform rotate-12">
|
||||
<div
|
||||
class="w-6 h-6 bg-gradient-to-br from-yellow-400 to-yellow-600 rounded-full flex items-center justify-center shadow-lg">
|
||||
<span class="text-white font-bold text-xs">¥</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 选择代理类型 -->
|
||||
<div class="card-container px-4 mb-8">
|
||||
<div class="bg-white rounded-xl shadow-lg overflow-hidden border border-amber-100 transform transition-all">
|
||||
<h2
|
||||
class="bg-gradient-to-r from-amber-500 to-amber-600 text-white py-3 px-4 text-center font-bold relative overflow-hidden">
|
||||
<span class="relative z-10">选择代理类型</span>
|
||||
<div class="absolute inset-0 bg-amber-500 opacity-30">
|
||||
<div
|
||||
class="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-transparent via-white to-transparent opacity-20 transform -skew-x-30 translate-x-full animate-shimmer">
|
||||
</div>
|
||||
</div>
|
||||
</h2>
|
||||
|
||||
<div class="flex p-6 gap-4">
|
||||
<div
|
||||
class="flex-1 border-2 rounded-lg p-4 text-center cursor-pointer transition-all duration-300 relative transform hover:-translate-y-1"
|
||||
:class="[
|
||||
selectedType === 'vip'
|
||||
? 'border-amber-500 bg-amber-50 shadow-md'
|
||||
: 'border-gray-200 hover:border-amber-300',
|
||||
]" @click="selectType('vip')">
|
||||
<div class="text-xl font-bold text-amber-700">VIP代理</div>
|
||||
<div class="text-amber-600 font-bold mt-1 text-lg">{{ vipConfig.price }}{{ vipConfig.priceUnit }}</div>
|
||||
<div class="mt-2 text-gray-600 text-sm">标准VIP权益</div>
|
||||
<div v-if="selectedType === 'vip'"
|
||||
class="absolute -top-2 -right-2 w-6 h-6 bg-gradient-to-br from-amber-500 to-amber-600 rounded-full flex items-center justify-center shadow-md">
|
||||
<van-icon name="success" color="#fff" size="14" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex-1 border-2 rounded-lg p-4 text-center cursor-pointer transition-all duration-300 relative transform hover:-translate-y-1"
|
||||
:class="[
|
||||
selectedType === 'svip'
|
||||
? 'border-amber-500 bg-amber-50 shadow-md'
|
||||
: 'border-gray-200 hover:border-amber-300',
|
||||
]" @click="selectType('svip')">
|
||||
<div class="text-xl font-bold text-amber-700">SVIP代理</div>
|
||||
<div class="text-amber-600 font-bold mt-1 text-lg">{{ vipConfig.svipPrice }}{{ vipConfig.priceUnit }}</div>
|
||||
<div class="mt-2 text-gray-600 text-sm">超级VIP权益</div>
|
||||
<div v-if="selectedType === 'svip'"
|
||||
class="absolute -top-2 -right-2 w-6 h-6 bg-gradient-to-br from-amber-500 to-amber-600 rounded-full flex items-center justify-center shadow-md">
|
||||
<van-icon name="success" color="#fff" size="14" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 六大超值权益 -->
|
||||
<div class="card-container px-4 mb-8">
|
||||
<div class="bg-white rounded-xl shadow-lg overflow-hidden border border-amber-100">
|
||||
<h2
|
||||
class="bg-gradient-to-r from-amber-500 to-amber-600 text-white py-3 px-4 text-center font-bold relative overflow-hidden">
|
||||
<span class="relative z-10">六大超值权益</span>
|
||||
<div class="absolute inset-0 bg-amber-500 opacity-30">
|
||||
<div
|
||||
class="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-transparent via-white to-transparent opacity-20 transform -skew-x-30 translate-x-full animate-shimmer">
|
||||
</div>
|
||||
</div>
|
||||
</h2>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4 p-4">
|
||||
<!-- 权益1 -->
|
||||
<div
|
||||
class="bg-gradient-to-br from-amber-50 to-amber-100 rounded-lg p-3 border border-amber-200 transition-all duration-300 hover:shadow-md hover:border-amber-300">
|
||||
<div class="text-amber-800 font-bold mb-2 flex items-center">
|
||||
<span
|
||||
class="w-6 h-6 bg-gradient-to-br from-amber-500 to-amber-600 rounded-full flex items-center justify-center text-white text-xs mr-2">1</span>
|
||||
下级贡献收益
|
||||
</div>
|
||||
<p class="text-sm text-gray-600">
|
||||
下级完全收益您来定，涨多少赚多少，一单最高收益<span class="text-red-500 font-bold">10元</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 权益2 -->
|
||||
<div
|
||||
class="bg-gradient-to-br from-amber-50 to-amber-100 rounded-lg p-3 border border-amber-200 transition-all duration-300 hover:shadow-md hover:border-amber-300">
|
||||
<div class="text-amber-800 font-bold mb-2 flex items-center">
|
||||
<span
|
||||
class="w-6 h-6 bg-gradient-to-br from-amber-500 to-amber-600 rounded-full flex items-center justify-center text-white text-xs mr-2">2</span>
|
||||
下级提现收益
|
||||
</div>
|
||||
<p class="text-sm text-gray-600">
|
||||
下级定价标准由您定，超过标准部分收益更丰厚，一单最高多赚<span class="text-red-500 font-bold">10元</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 权益3 -->
|
||||
<div
|
||||
class="bg-gradient-to-br from-amber-50 to-amber-100 rounded-lg p-3 border border-amber-200 transition-all duration-300 hover:shadow-md hover:border-amber-300">
|
||||
<div class="text-amber-800 font-bold mb-2 flex items-center">
|
||||
<span
|
||||
class="w-6 h-6 bg-gradient-to-br from-amber-500 to-amber-600 rounded-full flex items-center justify-center text-white text-xs mr-2">3</span>
|
||||
转换高额奖励
|
||||
</div>
|
||||
<p class="text-sm text-gray-600">
|
||||
下级成为VIP、SVIP，高额奖励立马发放，<span class="text-red-500 font-bold">399元</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 权益4 -->
|
||||
<div
|
||||
class="bg-gradient-to-br from-amber-50 to-amber-100 rounded-lg p-3 border border-amber-200 transition-all duration-300 hover:shadow-md hover:border-amber-300">
|
||||
<div class="text-amber-800 font-bold mb-2 flex items-center">
|
||||
<span
|
||||
class="w-6 h-6 bg-gradient-to-br from-amber-500 to-amber-600 rounded-full flex items-center justify-center text-white text-xs mr-2">4</span>
|
||||
下级提现奖励
|
||||
</div>
|
||||
<p class="text-sm text-gray-600">下级成为SVIP，每次提现都奖励1%，坐享被动收入</p>
|
||||
</div>
|
||||
|
||||
<!-- 权益5 -->
|
||||
<div
|
||||
class="bg-gradient-to-br from-amber-50 to-amber-100 rounded-lg p-3 border border-amber-200 transition-all duration-300 hover:shadow-md hover:border-amber-300">
|
||||
<div class="text-amber-800 font-bold mb-2 flex items-center">
|
||||
<span
|
||||
class="w-6 h-6 bg-gradient-to-br from-amber-500 to-amber-600 rounded-full flex items-center justify-center text-white text-xs mr-2">5</span>
|
||||
月度现金奖励
|
||||
</div>
|
||||
<p class="text-sm text-gray-600">
|
||||
下级每月活跃达100名额外奖励<span class="text-red-500 font-bold">50元</span>，新增15名活跃下级再得<span
|
||||
class="text-red-500 font-bold">50元</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 权益6 -->
|
||||
<div
|
||||
class="bg-gradient-to-br from-amber-50 to-amber-100 rounded-lg p-3 border border-amber-200 transition-all duration-300 hover:shadow-md hover:border-amber-300">
|
||||
<div class="text-amber-800 font-bold mb-2 flex items-center">
|
||||
<span
|
||||
class="w-6 h-6 bg-gradient-to-br from-amber-500 to-amber-600 rounded-full flex items-center justify-center text-white text-xs mr-2">6</span>
|
||||
平台专项扶持
|
||||
</div>
|
||||
<p class="text-sm text-gray-600">一对一专属客服服务，为合作伙伴提供全方位成长赋能</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 权益对比表 -->
|
||||
<div class="card-container px-4 mb-8" v-if="selectedType">
|
||||
<div class="bg-white rounded-xl shadow-lg overflow-hidden border border-amber-100">
|
||||
<h2
|
||||
class="bg-gradient-to-r from-amber-500 to-amber-600 text-white py-3 px-4 text-center font-bold relative overflow-hidden">
|
||||
<span class="relative z-10">{{ selectedType === 'vip' ? 'VIP' : 'SVIP' }}代理权益对比</span>
|
||||
<div class="absolute inset-0 bg-amber-500 opacity-30">
|
||||
<div
|
||||
class="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-transparent via-white to-transparent opacity-20 transform -skew-x-30 translate-x-full animate-shimmer">
|
||||
</div>
|
||||
</div>
|
||||
</h2>
|
||||
|
||||
<div class="p-4 overflow-x-auto">
|
||||
<table class="w-full border-collapse">
|
||||
<thead>
|
||||
<tr class="bg-gradient-to-r from-amber-100 to-amber-200">
|
||||
<th class="border border-amber-200 p-2 text-left text-amber-800">权益项目</th>
|
||||
<th class="border border-amber-200 p-2 text-center text-amber-800">普通代理</th>
|
||||
<th class="border border-amber-200 p-2 text-center text-amber-800"
|
||||
:class="{ 'bg-amber-200': selectedType === 'vip' }">
|
||||
VIP代理
|
||||
</th>
|
||||
<th class="border border-amber-200 p-2 text-center text-amber-800"
|
||||
:class="{ 'bg-amber-200': selectedType === 'svip' }">
|
||||
SVIP代理
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="hover:bg-amber-50 transition-colors">
|
||||
<td class="border border-amber-200 p-2 font-medium">会员权益</td>
|
||||
<td class="border border-amber-200 p-2 text-center">普通代理<br />免费</td>
|
||||
<td class="border border-amber-200 p-2 text-center font-bold" :class="{
|
||||
'text-amber-700 bg-amber-50': selectedType === 'vip',
|
||||
}">
|
||||
{{ vipConfig.price }}{{ vipConfig.priceUnit }}
|
||||
</td>
|
||||
<td class="border border-amber-200 p-2 text-center font-bold" :class="{
|
||||
'text-amber-700 bg-amber-50': selectedType === 'svip',
|
||||
}">
|
||||
{{ vipConfig.svipPrice }}{{ vipConfig.priceUnit }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-amber-50 transition-colors">
|
||||
<td class="border border-amber-200 p-2 font-medium">下级贡献收益</td>
|
||||
<td class="border border-amber-200 p-2 text-center">1元/单</td>
|
||||
<td class="border border-amber-200 p-2 text-center" :class="{
|
||||
'text-amber-700 font-bold bg-amber-50': selectedType === 'vip',
|
||||
}">
|
||||
{{ vipConfig.vipCommission }}元/单
|
||||
</td>
|
||||
<td class="border border-amber-200 p-2 text-center" :class="{
|
||||
'text-amber-700 font-bold bg-amber-50': selectedType === 'svip',
|
||||
}">
|
||||
{{ vipConfig.svipCommission }}元/单
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-amber-50 transition-colors">
|
||||
<td class="border border-amber-200 p-2 font-medium">自定义设置下级成本</td>
|
||||
<td class="border border-amber-200 p-2 text-center">❌</td>
|
||||
<td class="border border-amber-200 p-2 text-center" :class="{
|
||||
'text-amber-700 font-bold bg-amber-50': selectedType === 'vip',
|
||||
}">
|
||||
✓
|
||||
</td>
|
||||
<td class="border border-amber-200 p-2 text-center" :class="{
|
||||
'text-amber-700 font-bold bg-amber-50': selectedType === 'svip',
|
||||
}">
|
||||
✓
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-amber-50 transition-colors">
|
||||
<td class="border border-amber-200 p-2 font-medium">下级价格浮动收益</td>
|
||||
<td class="border border-amber-200 p-2 text-center">❌</td>
|
||||
<td class="border border-amber-200 p-2 text-center" :class="{
|
||||
'text-amber-700 font-bold bg-amber-50': selectedType === 'vip',
|
||||
}">
|
||||
最高{{ vipConfig.vipFloatingRate }}%
|
||||
</td>
|
||||
<td class="border border-amber-200 p-2 text-center" :class="{
|
||||
'text-amber-700 font-bold bg-amber-50': selectedType === 'svip',
|
||||
}">
|
||||
最高{{ vipConfig.svipFloatingRate }}%
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-amber-50 transition-colors">
|
||||
<td class="border border-amber-200 p-2 font-medium">下级提现奖励</td>
|
||||
<td class="border border-amber-200 p-2 text-center">❌</td>
|
||||
<td class="border border-amber-200 p-2 text-center" :class="{
|
||||
'text-amber-700 font-bold bg-amber-50': selectedType === 'vip',
|
||||
}">
|
||||
❌
|
||||
</td>
|
||||
<td class="border border-amber-200 p-2 text-center" :class="{
|
||||
'text-amber-700 font-bold bg-amber-50': selectedType === 'svip',
|
||||
}">
|
||||
{{ vipConfig.withdrawRatio }}%
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-amber-50 transition-colors">
|
||||
<td class="border border-amber-200 p-2 font-medium">下级活跃奖励</td>
|
||||
<td class="border border-amber-200 p-2 text-center">❌</td>
|
||||
<td class="border border-amber-200 p-2 text-center" :class="{
|
||||
'text-amber-700 font-bold bg-amber-50': selectedType === 'vip',
|
||||
}">
|
||||
{{ vipConfig.monthlyRewardForTeam }}元/月
|
||||
</td>
|
||||
<td class="border border-amber-200 p-2 text-center" :class="{
|
||||
'text-amber-700 font-bold bg-amber-50': selectedType === 'svip',
|
||||
}">
|
||||
{{ vipConfig.monthlyRewardForTeam }}元/月
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-amber-50 transition-colors">
|
||||
<td class="border border-amber-200 p-2 font-medium">新增活跃奖励</td>
|
||||
<td class="border border-amber-200 p-2 text-center">❌</td>
|
||||
<td class="border border-amber-200 p-2 text-center" :class="{
|
||||
'text-amber-700 font-bold bg-amber-50': selectedType === 'vip',
|
||||
}">
|
||||
{{ vipConfig.monthlyRewardForNewTeam }}元/月
|
||||
</td>
|
||||
<td class="border border-amber-200 p-2 text-center" :class="{
|
||||
'text-amber-700 font-bold bg-amber-50': selectedType === 'svip',
|
||||
}">
|
||||
{{ vipConfig.monthlyRewardForNewTeam }}元/月
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-amber-50 transition-colors">
|
||||
<td class="border border-amber-200 p-2 font-medium">下级转化奖励</td>
|
||||
<td class="border border-amber-200 p-2 text-center">❌</td>
|
||||
<td class="border border-amber-200 p-2 text-center" :class="{
|
||||
'text-amber-700 font-bold bg-amber-50': selectedType === 'vip',
|
||||
}">
|
||||
{{ vipConfig.vipConversionBonus }}元*10个
|
||||
</td>
|
||||
<td class="border border-amber-200 p-2 text-center" :class="{
|
||||
'text-amber-700 font-bold bg-amber-50': selectedType === 'svip',
|
||||
}">
|
||||
{{ vipConfig.svipConversionBonus }}元*10个
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-amber-50 transition-colors">
|
||||
<td class="border border-amber-200 p-2 font-medium">提现次数额度</td>
|
||||
<td class="border border-amber-200 p-2 text-center">800元/次</td>
|
||||
<td class="border border-amber-200 p-2 text-center" :class="{
|
||||
'text-amber-700 font-bold bg-amber-50': selectedType === 'vip',
|
||||
}">
|
||||
{{ vipConfig.vipWithdrawalLimit }}元/次
|
||||
</td>
|
||||
<td class="border border-amber-200 p-2 text-center" :class="{
|
||||
'text-amber-700 font-bold bg-amber-50': selectedType === 'svip',
|
||||
}">
|
||||
{{ vipConfig.svipWithdrawalLimit }}元/次
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-amber-50 transition-colors">
|
||||
<td class="border border-amber-200 p-2 font-medium">提现次数</td>
|
||||
<td class="border border-amber-200 p-2 text-center">1次/日</td>
|
||||
<td class="border border-amber-200 p-2 text-center" :class="{
|
||||
'text-amber-700 font-bold bg-amber-50': selectedType === 'vip',
|
||||
}">
|
||||
1次/日
|
||||
</td>
|
||||
<td class="border border-amber-200 p-2 text-center" :class="{
|
||||
'text-amber-700 font-bold bg-amber-50': selectedType === 'svip',
|
||||
}">
|
||||
2次/日
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 收益预估 -->
|
||||
<div class="card-container px-4 mb-8" v-if="selectedType">
|
||||
<div class="bg-white rounded-xl shadow-lg overflow-hidden border border-amber-100">
|
||||
<h2
|
||||
class="bg-gradient-to-r from-amber-500 to-amber-600 text-white py-3 px-4 text-center font-bold relative overflow-hidden">
|
||||
<span class="relative z-10">收益预估对比</span>
|
||||
<div class="absolute inset-0 bg-amber-500 opacity-30">
|
||||
<div
|
||||
class="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-transparent via-white to-transparent opacity-20 transform -skew-x-30 translate-x-full animate-shimmer">
|
||||
</div>
|
||||
</div>
|
||||
</h2>
|
||||
|
||||
<div class="p-4">
|
||||
<!-- 顶部收益概览 -->
|
||||
<div class="mb-6 rounded-lg overflow-hidden border border-amber-200">
|
||||
<div class="bg-gradient-to-r from-amber-100 to-amber-200 py-2 px-4 text-center font-bold text-amber-800">
|
||||
VIP与SVIP代理收益对比
|
||||
</div>
|
||||
<div class="grid grid-cols-2 divide-x divide-amber-200">
|
||||
<div class="p-4 text-center" :class="{ 'bg-amber-50': selectedType === 'vip' }">
|
||||
<div class="text-sm text-gray-600 mb-1">VIP月预计收益</div>
|
||||
<div class="text-amber-600 font-bold text-xl">{{ revenueData.vipMonthly }}元</div>
|
||||
<div class="text-xs text-gray-500 mt-1">年收益：{{ revenueData.vipYearly }}元</div>
|
||||
</div>
|
||||
<div class="p-4 text-center" :class="{ 'bg-amber-50': selectedType === 'svip' }">
|
||||
<div class="text-sm text-gray-600 mb-1">SVIP月预计收益</div>
|
||||
<div class="text-red-500 font-bold text-xl">{{ revenueData.svipMonthly }}元</div>
|
||||
<div class="text-xs text-gray-500 mt-1">年收益：{{ revenueData.svipYearly }}元</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gradient-to-r from-red-50 to-red-100 py-2 px-4 text-center text-red-600 font-medium">
|
||||
选择SVIP，相比VIP月增收益：<span class="font-bold">{{ revenueData.monthlyDifference }}元</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 详细收益表格 -->
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full border-collapse">
|
||||
<thead>
|
||||
<tr class="bg-gradient-to-r from-amber-100 to-amber-200">
|
||||
<th class="border border-amber-200 p-2 text-left text-amber-800">收益来源</th>
|
||||
<th class="border border-amber-200 p-2 text-center text-amber-800 w-1/3"
|
||||
:class="{ 'bg-amber-200': selectedType === 'vip' }">
|
||||
VIP代理
|
||||
</th>
|
||||
<th class="border border-amber-200 p-2 text-center text-amber-800 w-1/3"
|
||||
:class="{ 'bg-amber-200': selectedType === 'svip' }">
|
||||
SVIP代理
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="hover:bg-amber-50 transition-colors">
|
||||
<td class="border border-amber-200 p-2 font-medium">推广收益(月)</td>
|
||||
<td class="border border-amber-200 p-2 text-center" :class="{
|
||||
'text-amber-700 font-medium bg-amber-50': selectedType === 'vip',
|
||||
}">
|
||||
300单×50元=15,000元
|
||||
</td>
|
||||
<td class="border border-amber-200 p-2 text-center" :class="{
|
||||
'text-amber-700 font-medium bg-amber-50': selectedType === 'svip',
|
||||
}">
|
||||
300单×50元=15,000元
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-amber-50 transition-colors">
|
||||
<td class="border border-amber-200 p-2 font-medium">下级贡献收益(月)</td>
|
||||
<td class="border border-amber-200 p-2 text-center" :class="{
|
||||
'text-amber-700 font-medium bg-amber-50': selectedType === 'vip',
|
||||
}">
|
||||
300单×{{ vipConfig.vipCommission }}元=360元
|
||||
</td>
|
||||
<td class="border border-amber-200 p-2 text-center" :class="{
|
||||
'text-amber-700 font-medium bg-amber-50': selectedType === 'svip',
|
||||
}">
|
||||
300单×{{ vipConfig.svipCommission }}元=450元
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-amber-50 transition-colors">
|
||||
<td class="border border-amber-200 p-2 font-medium">下级价格浮动收益(月)</td>
|
||||
<td class="border border-amber-200 p-2 text-center" :class="{
|
||||
'text-amber-700 font-medium bg-amber-50': selectedType === 'vip',
|
||||
}">
|
||||
100单×100元×{{ vipConfig.vipFloatingRate }}%=500元
|
||||
</td>
|
||||
<td class="border border-amber-200 p-2 text-center" :class="{
|
||||
'text-amber-700 font-medium bg-amber-50': selectedType === 'svip',
|
||||
}">
|
||||
200单×100元×{{ vipConfig.svipFloatingRate }}%=2,000元
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-amber-50 transition-colors">
|
||||
<td class="border border-amber-200 p-2 font-medium">下级提现奖励(月)</td>
|
||||
<td class="border border-amber-200 p-2 text-center" :class="{
|
||||
'text-amber-700 font-medium bg-amber-50': selectedType === 'vip',
|
||||
}">
|
||||
-
|
||||
</td>
|
||||
<td class="border border-amber-200 p-2 text-center" :class="{
|
||||
'text-amber-700 font-medium bg-amber-50': selectedType === 'svip',
|
||||
}">
|
||||
{{ revenueData.withdrawReward }}元
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-amber-50 transition-colors">
|
||||
<td class="border border-amber-200 p-2 font-medium">下级活跃奖励(月)</td>
|
||||
<td class="border border-amber-200 p-2 text-center" :class="{
|
||||
'text-amber-700 font-medium bg-amber-50': selectedType === 'vip',
|
||||
}">
|
||||
{{ vipConfig.monthlyRewardForTeam }}元
|
||||
</td>
|
||||
<td class="border border-amber-200 p-2 text-center" :class="{
|
||||
'text-amber-700 font-medium bg-amber-50': selectedType === 'svip',
|
||||
}">
|
||||
{{ vipConfig.monthlyRewardForTeam }}元
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-amber-50 transition-colors">
|
||||
<td class="border border-amber-200 p-2 font-medium">新增活跃奖励(月)</td>
|
||||
<td class="border border-amber-200 p-2 text-center" :class="{
|
||||
'text-amber-700 font-medium bg-amber-50': selectedType === 'vip',
|
||||
}">
|
||||
{{ vipConfig.monthlyRewardForNewTeam }}元
|
||||
</td>
|
||||
<td class="border border-amber-200 p-2 text-center" :class="{
|
||||
'text-amber-700 font-medium bg-amber-50': selectedType === 'svip',
|
||||
}">
|
||||
{{ vipConfig.monthlyRewardForNewTeam }}元
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-amber-50 transition-colors">
|
||||
<td class="border border-amber-200 p-2 font-medium">下级转化奖励(月)</td>
|
||||
<td class="border border-amber-200 p-2 text-center" :class="{
|
||||
'text-amber-700 font-medium bg-amber-50': selectedType === 'vip',
|
||||
}">
|
||||
{{ vipConfig.vipConversionBonus }}元×2个=598元
|
||||
</td>
|
||||
<td class="border border-amber-200 p-2 text-center" :class="{
|
||||
'text-amber-700 font-medium bg-amber-50': selectedType === 'svip',
|
||||
}">
|
||||
{{ vipConfig.svipConversionBonus }}元×2个=798元
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-amber-50 transition-colors">
|
||||
<td class="border border-amber-200 p-2 font-medium">额外业务收益(月)</td>
|
||||
<td class="border border-amber-200 p-2 text-center" :class="{
|
||||
'text-amber-700 font-medium bg-amber-50': selectedType === 'vip',
|
||||
}">
|
||||
约3,000元
|
||||
</td>
|
||||
<td class="border border-amber-200 p-2 text-center" :class="{
|
||||
'text-amber-700 font-medium bg-amber-50': selectedType === 'svip',
|
||||
}">
|
||||
约6,000元
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="bg-gradient-to-r from-amber-50 to-amber-100 font-bold">
|
||||
<td class="border border-amber-200 p-3">月计收益</td>
|
||||
<td class="border border-amber-200 p-3 text-center text-amber-700" :class="{
|
||||
'bg-amber-50 border-amber-300': selectedType === 'vip',
|
||||
}">
|
||||
{{ revenueData.vipMonthly }}元
|
||||
</td>
|
||||
<td class="border border-amber-200 p-3 text-center text-red-500" :class="{
|
||||
'bg-amber-50 border-amber-300': selectedType === 'svip',
|
||||
}">
|
||||
{{ revenueData.svipMonthly }}元
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="bg-gradient-to-r from-amber-50 to-amber-100 font-bold">
|
||||
<td class="border border-amber-200 p-3">年计收益</td>
|
||||
<td class="border border-amber-200 p-3 text-center text-amber-700" :class="{
|
||||
'bg-amber-50 border-amber-300': selectedType === 'vip',
|
||||
}">
|
||||
{{ revenueData.vipYearly }}元
|
||||
</td>
|
||||
<td class="border border-amber-200 p-3 text-center text-red-500" :class="{
|
||||
'bg-amber-50 border-amber-300': selectedType === 'svip',
|
||||
}">
|
||||
{{ revenueData.svipYearly }}元
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- 投资回报率 -->
|
||||
<div class="mt-6 p-4 bg-gradient-to-r from-amber-50 to-amber-100 rounded-lg border border-amber-200">
|
||||
<div class="text-center mb-3 font-bold text-amber-800">投资收益分析</div>
|
||||
<div class="grid grid-cols-1 gap-4">
|
||||
<div class="p-3 bg-white rounded-lg shadow-sm">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex-1 border-r border-amber-100 pr-3">
|
||||
<div class="text-amber-700 font-medium text-center mb-1">VIP方案</div>
|
||||
<div class="text-center">
|
||||
<div class="text-amber-600 text-sm">投资{{ vipConfig.price }}元</div>
|
||||
<div class="text-gray-600 text-sm">月收益{{ revenueData.vipMonthly }}元</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 pl-3">
|
||||
<div class="text-red-500 font-medium text-center mb-1">SVIP方案</div>
|
||||
<div class="text-center">
|
||||
<div class="text-red-500 text-sm">投资{{ vipConfig.svipPrice }}元</div>
|
||||
<div class="text-gray-600 text-sm">月收益{{ revenueData.svipMonthly }}元</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 升级收益对比 -->
|
||||
<div class="p-3 bg-gradient-to-r from-red-50 to-amber-50 rounded-lg shadow-sm">
|
||||
<div class="text-center font-medium text-red-700 mb-2">SVIP升级优势分析</div>
|
||||
<div class="flex items-center justify-center gap-3">
|
||||
<div class="text-center">
|
||||
<div class="text-sm text-gray-600">额外投资</div>
|
||||
<div class="text-red-600 font-bold">{{ revenueData.priceDifference }}元</div>
|
||||
</div>
|
||||
<div
|
||||
class="bg-red-500 flex-shrink-0 text-white rounded-full w-6 h-6 flex items-center justify-center">
|
||||
<div class="transform -translate-y-px">→</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-sm text-gray-600">每月额外收益</div>
|
||||
<div class="text-red-600 font-bold">{{ revenueData.monthlyDifference }}元</div>
|
||||
</div>
|
||||
<div
|
||||
class="bg-red-500 flex-shrink-0 text-white rounded-full w-6 h-6 flex items-center justify-center">
|
||||
<span class="transform -translate-y-px">→</span>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-sm text-gray-600">投资回收时间</div>
|
||||
<div class="text-red-600 font-bold">{{ revenueData.recoverDays }}天</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center text-red-500 font-medium mt-3">
|
||||
额外投资{{ revenueData.priceDifference }}元，<span class="text-red-600 font-bold">年多赚{{
|
||||
revenueData.yearlyDifference }}元</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 申请按钮（固定在底部） -->
|
||||
<div
|
||||
class="fixed bottom-0 left-0 right-0 px-4 py-3 bg-gradient-to-t from-amber-100 to-transparent backdrop-blur-sm z-30">
|
||||
<div class="flex flex-col gap-2">
|
||||
<button :class="buttonClass" @click="applyVip" :disabled="!canPerformAction">
|
||||
<span class="relative z-10">{{ buttonText }}</span>
|
||||
<div
|
||||
class="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-transparent via-white to-transparent opacity-20 transform -skew-x-30 translate-x-full animate-shimmer">
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
class="w-full py-3 rounded-lg font-medium text-amber-700 border border-amber-400 bg-white shadow-md active:bg-amber-50 transform transition-transform active:scale-98"
|
||||
@click="contactService">
|
||||
<div class="flex items-center justify-center">
|
||||
<van-icon name="service-o" class="mr-1" />
|
||||
<span>联系客服咨询</span>
|
||||
</div>
|
||||
</button>
|
||||
<!-- 最终解释权声明 -->
|
||||
<div class="text-center text-xs text-gray-400 py-1">最终解释权归广西福铭网络科技有限公司所有</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Payment v-model="showPayment" :data="payData" :id="payID" type="agent_vip" @close="showPayment = false" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, reactive, computed } from 'vue'
|
||||
import { showToast } from 'vant'
|
||||
import { useAgentStore } from '@/stores/agentStore'
|
||||
import { storeToRefs } from 'pinia'
|
||||
|
||||
// 获取代理状态
|
||||
const agentStore = useAgentStore()
|
||||
const { level, ExpiryTime } = storeToRefs(agentStore)
|
||||
|
||||
// 计算是否已经是VIP或SVIP
|
||||
const isVipOrSvip = computed(() => ['VIP', 'SVIP'].includes(level.value))
|
||||
const isVip = computed(() => level.value === 'VIP')
|
||||
const isSvip = computed(() => level.value === 'SVIP')
|
||||
|
||||
// 计算续费后的到期时间
|
||||
const renewalExpiryTime = computed(() => {
|
||||
if (!ExpiryTime.value) return '未知'
|
||||
|
||||
// 从格式化字符串中提取日期部分
|
||||
const dateStr = ExpiryTime.value.split(' ')[0] // 假设格式是 "YYYY-MM-DD HH:MM:SS"
|
||||
const [year, month, day] = dateStr.split('-').map(num => parseInt(num))
|
||||
|
||||
// 创建日期对象并加一年
|
||||
const expiryDate = new Date(year, month - 1, day) // 月份从0开始，所以要-1
|
||||
expiryDate.setFullYear(expiryDate.getFullYear() + 1)
|
||||
|
||||
// 返回格式化的日期字符串
|
||||
return `${expiryDate.getFullYear()}-${String(expiryDate.getMonth() + 1).padStart(2, '0')}-${String(expiryDate.getDate()).padStart(2, '0')}`
|
||||
})
|
||||
|
||||
// 按钮文字 - 根据当前状态显示不同文案
|
||||
const buttonText = computed(() => {
|
||||
if (!isVipOrSvip.value) return '立即开通' // 非会员状态
|
||||
|
||||
if (selectedType.value === 'vip') {
|
||||
if (isVip.value) return '续费VIP代理' // VIP续费VIP
|
||||
return '降级不可用' // SVIP不能降级到VIP
|
||||
} else {
|
||||
if (isSvip.value) return '续费SVIP代理' // SVIP续费SVIP
|
||||
return '升级SVIP代理' // VIP升级SVIP
|
||||
}
|
||||
})
|
||||
|
||||
// 是否可以操作按钮
|
||||
const canPerformAction = computed(() => {
|
||||
// 非会员可以开通任何会员
|
||||
if (!isVipOrSvip.value) return true
|
||||
|
||||
// VIP不能降级到普通会员
|
||||
if (isVip.value && selectedType.value === '') return false
|
||||
|
||||
// SVIP不能降级到VIP
|
||||
if (isSvip.value && selectedType.value === 'vip') return false
|
||||
|
||||
return true
|
||||
})
|
||||
|
||||
// 计算按钮类名
|
||||
const buttonClass = computed(() => {
|
||||
const baseClass =
|
||||
'w-full py-4 rounded-lg font-bold text-lg shadow-lg transform transition-transform active:scale-98 relative overflow-hidden'
|
||||
|
||||
if (!canPerformAction.value) {
|
||||
return `${baseClass} bg-gray-400 text-white cursor-not-allowed`
|
||||
}
|
||||
|
||||
if (isVip.value && selectedType.value === 'svip') {
|
||||
return `${baseClass} bg-gradient-to-r from-purple-500 to-indigo-600 text-white`
|
||||
}
|
||||
|
||||
return `${baseClass} bg-gradient-to-r from-amber-500 to-amber-600 active:from-amber-600 active:to-amber-700 text-white`
|
||||
})
|
||||
|
||||
// VIP价格配置
|
||||
const vipConfig = reactive({})
|
||||
|
||||
// 计算得出的收益数据
|
||||
const revenueData = computed(() => {
|
||||
const baseOrders = 300 // 基础订单数
|
||||
const pricePerOrder = 50 // 每单价格
|
||||
const baseRevenue = baseOrders * pricePerOrder // 基础推广收益
|
||||
|
||||
const vipCommissionRevenue = baseOrders * vipConfig.vipCommission // VIP下级贡献收益
|
||||
const svipCommissionRevenue = baseOrders * vipConfig.svipCommission // SVIP下级贡献收益
|
||||
|
||||
const vipFloatingRevenue = 100 * 100 * (vipConfig.vipFloatingRate / 100) // VIP浮动收益
|
||||
const svipFloatingRevenue = 200 * 100 * (vipConfig.svipFloatingRate / 100) // SVIP浮动收益
|
||||
|
||||
const vipConversionRevenue = vipConfig.vipConversionBonus * 2 // VIP转化奖励
|
||||
const svipConversionRevenue = vipConfig.svipConversionBonus * 2 // SVIP转化奖励
|
||||
|
||||
const vipExtraRevenue = 3000 // VIP额外收益估计
|
||||
const svipExtraRevenue = 6000 // SVIP额外收益估计
|
||||
|
||||
// 平级提现奖励(只有SVIP才有)
|
||||
const withdrawReward = 20000 * (vipConfig.withdrawRatio / 100)
|
||||
|
||||
// 计算月总收益
|
||||
const vipMonthlyTotal =
|
||||
baseRevenue +
|
||||
vipCommissionRevenue +
|
||||
vipFloatingRevenue +
|
||||
vipConfig.monthlyRewardForTeam +
|
||||
vipConfig.monthlyRewardForNewTeam +
|
||||
vipConversionRevenue +
|
||||
vipExtraRevenue
|
||||
|
||||
const svipMonthlyTotal =
|
||||
baseRevenue +
|
||||
svipCommissionRevenue +
|
||||
svipFloatingRevenue +
|
||||
withdrawReward +
|
||||
vipConfig.monthlyRewardForTeam +
|
||||
vipConfig.monthlyRewardForNewTeam +
|
||||
svipConversionRevenue +
|
||||
svipExtraRevenue
|
||||
|
||||
// 计算VIP和SVIP之间的差额
|
||||
const monthlyDifference = svipMonthlyTotal - vipMonthlyTotal
|
||||
const priceDifference = vipConfig.svipPrice - vipConfig.price
|
||||
|
||||
return {
|
||||
vipMonthly: Math.round(vipMonthlyTotal),
|
||||
svipMonthly: Math.round(svipMonthlyTotal),
|
||||
vipYearly: Math.round(vipMonthlyTotal * 12),
|
||||
svipYearly: Math.round(svipMonthlyTotal * 12),
|
||||
monthlyDifference: Math.round(monthlyDifference),
|
||||
yearlyDifference: Math.round(monthlyDifference * 12),
|
||||
vipRate: Math.round(vipMonthlyTotal / vipConfig.price),
|
||||
svipRate: Math.round(svipMonthlyTotal / vipConfig.svipPrice),
|
||||
priceDifference,
|
||||
recoverDays: Math.ceil(priceDifference / (monthlyDifference / 30)),
|
||||
withdrawReward,
|
||||
}
|
||||
})
|
||||
|
||||
// 加载价格配置
|
||||
onMounted(async () => {
|
||||
document.documentElement.style.scrollBehavior = 'smooth'
|
||||
|
||||
// 从API获取会员配置信息
|
||||
try {
|
||||
const { data, error } = await useApiFetch('/agent/membership/info').get().json()
|
||||
|
||||
if (data.value && !error.value && data.value.code === 200) {
|
||||
const configData = data.value.data
|
||||
|
||||
// 更新VIP配置
|
||||
if (configData.vip_config) {
|
||||
const vipData = configData.vip_config
|
||||
vipConfig.price = vipData.price
|
||||
vipConfig.vipCommission = vipData.report_commission // 直接显示，就是几元/单
|
||||
vipConfig.vipFloatingRate = vipData.price_ratio * 100 // 转换为百分比
|
||||
vipConfig.monthlyRewardForTeam = vipData.lower_activity_reward
|
||||
vipConfig.monthlyRewardForNewTeam = vipData.new_activity_reward
|
||||
vipConfig.vipConversionBonus = vipData.lower_convert_vip_reward
|
||||
vipConfig.vipWithdrawalLimit = vipData.exemption_amount
|
||||
}
|
||||
|
||||
// 更新SVIP配置
|
||||
if (configData.svip_config) {
|
||||
const svipData = configData.svip_config
|
||||
vipConfig.svipPrice = svipData.price
|
||||
vipConfig.svipCommission = svipData.report_commission // 直接显示，就是几元/单
|
||||
vipConfig.svipFloatingRate = svipData.price_ratio * 100 // 转换为百分比
|
||||
vipConfig.withdrawRatio = svipData.lower_withdraw_reward_ratio * 100 // 转换为百分比
|
||||
vipConfig.monthlyRewardForTeam = svipData.lower_activity_reward
|
||||
vipConfig.monthlyRewardForNewTeam = svipData.new_activity_reward
|
||||
vipConfig.svipConversionBonus = svipData.lower_convert_svip_reward
|
||||
vipConfig.svipWithdrawalLimit = svipData.exemption_amount
|
||||
}
|
||||
|
||||
console.log('会员配置信息加载成功', configData)
|
||||
} else {
|
||||
console.error('获取会员配置信息失败', data.value?.msg || '未知错误')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载会员配置信息失败', error)
|
||||
}
|
||||
})
|
||||
|
||||
const selectedType = ref('vip') // 默认选择VIP
|
||||
const showPayment = ref(false)
|
||||
const payData = ref({
|
||||
product_name: `${selectedType.value.toUpperCase()}代理`,
|
||||
sell_price: vipConfig.price,
|
||||
})
|
||||
const payID = ref('')
|
||||
|
||||
// 选择代理类型
|
||||
function selectType(type) {
|
||||
selectedType.value = type
|
||||
// 更新payData中的价格和产品名称
|
||||
payData.value = {
|
||||
product_name: `${type === 'vip' ? 'VIP' : 'SVIP'}代理`,
|
||||
sell_price: type === 'vip' ? vipConfig.price : vipConfig.svipPrice,
|
||||
}
|
||||
}
|
||||
|
||||
// 申请VIP或SVIP
|
||||
async function applyVip() {
|
||||
// 如果是VIP想升级到SVIP，提示联系客服
|
||||
if (isVip.value && selectedType.value === 'svip') {
|
||||
contactService()
|
||||
return
|
||||
}
|
||||
|
||||
// 如果是SVIP要降级到VIP，提示不能降级
|
||||
if (isSvip.value && selectedType.value === 'vip') {
|
||||
showToast('SVIP会员不能降级到VIP会员')
|
||||
return
|
||||
}
|
||||
|
||||
const { data, error } = await useApiFetch('/agent/membership/activate')
|
||||
.post({
|
||||
type: selectedType.value.toUpperCase(),
|
||||
})
|
||||
.json()
|
||||
|
||||
if (data.value && !error.value) {
|
||||
if (data.value.code === 200) {
|
||||
if (data.value.data.id) {
|
||||
payID.value = data.value.data.id
|
||||
showPayment.value = true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 联系客服
|
||||
function contactService() {
|
||||
// 跳转到客服页面
|
||||
window.location.href = 'https://work.weixin.qq.com/kfid/kfc5c19b2b93a5e73b9'
|
||||
}
|
||||
|
||||
function formatExpiryTime(expiryTimeStr) {
|
||||
if (!expiryTimeStr) return '未知'
|
||||
// 从格式化字符串中提取日期部分
|
||||
return expiryTimeStr.split(' ')[0] // 假设格式是 "YYYY-MM-DD HH:MM:SS"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.agent-VIP-apply {
|
||||
font-family:
|
||||
system-ui,
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
'Segoe UI',
|
||||
Roboto,
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
transform: translateX(-100%) skewX(-30deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(200%) skewX(-30deg);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-shimmer {
|
||||
animation: shimmer 3s infinite;
|
||||
}
|
||||
|
||||
.active\:scale-98:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
</style>
|
||||
538
src/views/AgentVipConfig.vue
Normal file
538
src/views/AgentVipConfig.vue
Normal file
@@ -0,0 +1,538 @@
|
||||
<template>
|
||||
<div class="p-4 max-w-3xl mx-auto min-h-screen">
|
||||
<!-- 标题部分 -->
|
||||
<div class="card mb-4 p-4 bg-gradient-to-r from-blue-500 to-blue-600 rounded-lg shadow-lg text-white">
|
||||
<h1 class="text-2xl font-extrabold mb-2">专业报告定价配置</h1>
|
||||
<p class="opacity-90">
|
||||
请选择报告类型并设置定价策略，助您实现精准定价
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<van-field readonly clickable name="reportType" v-model="selectedReportText" label="报告类型"
|
||||
placeholder="点击选择报告" @click="showPicker = true" class="card">
|
||||
<template #label>
|
||||
<span class="text-blue-600 font-medium">📝 选择报告</span>
|
||||
</template>
|
||||
<template #right-icon>
|
||||
<van-icon name="arrow-down" class="text-gray-400" />
|
||||
</template>
|
||||
</van-field>
|
||||
<van-popup v-model:show="showPicker" position="bottom">
|
||||
<van-picker :columns="reportOptions" :default-index="0" @confirm="onConfirm"
|
||||
@cancel="showPicker = false" />
|
||||
</van-popup>
|
||||
</div>
|
||||
|
||||
<div v-if="selectedReportText" class="space-y-6">
|
||||
<!-- 配置卡片 -->
|
||||
<div class="card">
|
||||
<!-- 当前报告标题 -->
|
||||
<div class="flex items-center mb-6">
|
||||
<van-icon name="description" class="text-blue-500 text-xl mr-2" />
|
||||
<h2 class="text-xl font-semibold text-gray-800">
|
||||
{{ selectedReportText }}配置
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<!-- 显示当前产品的基础成本信息 -->
|
||||
<div v-if="productConfigData && productConfigData.cost_price"
|
||||
class="px-4 py-2 mb-4 bg-gray-50 border border-gray-200 rounded-lg shadow-sm">
|
||||
<div class="text-lg font-semibold text-gray-700">
|
||||
报告基础配置信息
|
||||
</div>
|
||||
<div class="mt-1 text-sm text-gray-600">
|
||||
<div>
|
||||
基础成本价：<span class="font-medium">{{
|
||||
productConfigData.cost_price
|
||||
}}</span>
|
||||
元
|
||||
</div>
|
||||
<!-- <div>区间起始价：<span class="font-medium">{{ productConfigData.price_range_min }}</span> 元</div> -->
|
||||
<div>
|
||||
最高设定金额上限：<span class="font-medium">{{
|
||||
productConfigData.price_range_max
|
||||
}}</span>
|
||||
元
|
||||
</div>
|
||||
<div>
|
||||
最高设定比例上限：<span class="font-medium">{{
|
||||
priceRatioMax
|
||||
}}</span>
|
||||
%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分隔线 -->
|
||||
<van-divider :style="{ borderColor: '#e5e7eb', padding: '0 16px' }" class="my-6">
|
||||
<van-icon name="exchange" class="text-gray-400 mx-2" />
|
||||
<span class="text-gray-400 text-sm">成本策略配置</span>
|
||||
</van-divider>
|
||||
|
||||
<!-- 加价金额 -->
|
||||
<van-field v-model.number="configData.price_increase_amount" label="加价金额" type="number" placeholder="0"
|
||||
@blur="validateDecimal('price_increase_amount')" class="custom-field"
|
||||
:class="{ 'van-field--error': increaseError }">
|
||||
<template #label>
|
||||
<span class="text-gray-600 font-medium">🚀 加价金额</span>
|
||||
</template>
|
||||
<template #extra>
|
||||
<span class="text-blue-500 font-medium ml-2">元</span>
|
||||
</template>
|
||||
</van-field>
|
||||
<div class="text-xs text-gray-400 mt-1">
|
||||
提示：最大加价金额为{{ priceIncreaseAmountMax }}元<br />
|
||||
说明：加价金额是在基础成本价上增加的额外费用，决定下级报告的最低定价，您将获得所有输入的金额利润。
|
||||
</div>
|
||||
|
||||
<!-- 分隔线 -->
|
||||
<van-divider :style="{ borderColor: '#e5e7eb', padding: '0 16px' }" class="my-6">
|
||||
<van-icon name="exchange" class="text-gray-400 mx-2" />
|
||||
<span class="text-gray-400 text-sm">定价策略配置</span>
|
||||
</van-divider>
|
||||
|
||||
<!-- 定价区间最低 -->
|
||||
<van-field v-model.number="configData.price_range_from" label="定价区间最低" type="number" placeholder="0"
|
||||
@blur="
|
||||
() => {
|
||||
validateDecimal('price_range_from');
|
||||
validateRange();
|
||||
}
|
||||
" class="custom-field" :class="{ 'van-field--error': rangeError }">
|
||||
<template #label>
|
||||
<span class="text-gray-600 font-medium">💰 最低金额</span>
|
||||
</template>
|
||||
<template #extra>
|
||||
<span class="text-blue-500 font-medium ml-2">元</span>
|
||||
</template>
|
||||
</van-field>
|
||||
<div class="text-xs text-gray-400 mt-1">
|
||||
提示：最低金额不能低于（基础最低
|
||||
{{ productConfigData?.price_range_min || 0 }}元 +
|
||||
加价金额）<br />
|
||||
说明：设定的最低金额为定价区间的起始值，若下级设定的报告金额在区间内，则区间内部分将按比例获得收益。
|
||||
</div>
|
||||
|
||||
<!-- 定价区间最高 -->
|
||||
<van-field v-model.number="configData.price_range_to" label="定价区间最高" type="number" placeholder="0"
|
||||
@blur="
|
||||
() => {
|
||||
validateDecimal('price_range_to');
|
||||
validateRange();
|
||||
}
|
||||
" class="custom-field" :class="{ 'van-field--error': rangeError }">
|
||||
<template #label>
|
||||
<span class="text-gray-600 font-medium">💰 最高金额</span>
|
||||
</template>
|
||||
<template #extra>
|
||||
<span class="text-blue-500 font-medium ml-2">元</span>
|
||||
</template>
|
||||
</van-field>
|
||||
<div class="text-xs text-gray-400 mt-1">
|
||||
提示：最高金额不能超过上限（{{
|
||||
productConfigData?.price_range_max || 0
|
||||
}}元）和大于最低金额（{{ priceIncreaseMax }}元）<br />
|
||||
说明：设定的最高金额为定价区间的结束值，若下级设定的报告金额在区间内，则区间内部分将按比例获得收益。
|
||||
</div>
|
||||
|
||||
<!-- 收取比例 -->
|
||||
<van-field v-model.number="configData.price_ratio" label="收取比例" type="digit" placeholder="0" @blur="
|
||||
() => {
|
||||
validateRatio();
|
||||
}
|
||||
" class="custom-field" :class="{ 'van-field--error': ratioError }">
|
||||
<template #label>
|
||||
<span class="text-gray-600 font-medium">📈 收取比例</span>
|
||||
</template>
|
||||
<template #extra>
|
||||
<span class="text-blue-500 font-medium ml-2">%</span>
|
||||
</template>
|
||||
</van-field>
|
||||
<div class="text-xs text-gray-400 mt-1">
|
||||
提示：最大收取比例为{{ priceRatioMax }}%<br />
|
||||
说明：收取比例表示对定价区间内（即报告金额超过最低金额，小于最高金额的部分）的金额，按此比例进行利润分成。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 保存按钮 -->
|
||||
<van-button type="primary" block
|
||||
class="shadow-lg bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white rounded-xl h-12"
|
||||
@click="handleSubmit">
|
||||
<van-icon name="success" class="mr-2" />
|
||||
保存当前报告配置
|
||||
</van-button>
|
||||
</div>
|
||||
<!-- 未选择提示 -->
|
||||
<div v-else class="text-center py-12">
|
||||
<van-icon name="warning" class="text-gray-400 text-4xl mb-4" />
|
||||
<p class="text-gray-500">请先选择需要配置的报告类型</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted } from "vue";
|
||||
import { showToast } from "vant";
|
||||
import { settings } from "nprogress";
|
||||
|
||||
// 报告类型选项
|
||||
const reportOptions = [
|
||||
{ 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 },
|
||||
// { text: "个人风险", value: "riskassessment", id: 7 },
|
||||
];
|
||||
|
||||
// 状态管理
|
||||
const showPicker = ref(false);
|
||||
const selectedReport = ref(reportOptions[0]);
|
||||
const selectedReportText = ref(reportOptions[0].text);
|
||||
const selectedReportId = ref(reportOptions[0].id);
|
||||
|
||||
const configData = ref({});
|
||||
const productConfigData = ref({});
|
||||
const priceIncreaseMax = ref(null);
|
||||
const priceIncreaseAmountMax = ref(null);
|
||||
const priceRatioMax = ref(null);
|
||||
const rangeError = ref(false);
|
||||
const ratioError = ref(false);
|
||||
const increaseError = ref(false);
|
||||
|
||||
// 金额输入格式验证：确保最多两位小数
|
||||
const validateDecimal = (field) => {
|
||||
const value = configData.value[field];
|
||||
if (value === null || value === undefined) return;
|
||||
|
||||
const numValue = Number(value);
|
||||
if (isNaN(numValue)) {
|
||||
configData.value[field] = null;
|
||||
return;
|
||||
}
|
||||
const fixedValue = parseFloat(numValue.toFixed(2));
|
||||
configData.value[field] = fixedValue;
|
||||
|
||||
if (field === "price_increase_amount") {
|
||||
if (fixedValue > priceIncreaseAmountMax.value) {
|
||||
configData.value[field] = priceIncreaseAmountMax.value;
|
||||
showToast(`加价金额最大为${priceIncreaseAmountMax.value}元`);
|
||||
increaseError.value = true;
|
||||
setTimeout(() => {
|
||||
increaseError.value = false;
|
||||
}, 2000);
|
||||
} else {
|
||||
increaseError.value = false;
|
||||
}
|
||||
// 当加价金额改变后，重新验证价格区间
|
||||
validateRange();
|
||||
}
|
||||
};
|
||||
|
||||
// 价格区间验证（在 @blur 中调用）
|
||||
const validateRange = () => {
|
||||
console.log(
|
||||
"configData.value.price_range_from",
|
||||
configData.value.price_range_from
|
||||
);
|
||||
console.log(
|
||||
"configData.value.price_range_to",
|
||||
configData.value.price_range_to
|
||||
);
|
||||
|
||||
if (
|
||||
configData.value.price_range_from === null ||
|
||||
configData.value.price_range_to === null
|
||||
) {
|
||||
rangeError.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
if (
|
||||
isNaN(configData.value.price_range_from) ||
|
||||
isNaN(configData.value.price_range_to)
|
||||
)
|
||||
return;
|
||||
const additional = configData.value.price_increase_amount || 0;
|
||||
const minAllowed = parseFloat(
|
||||
(
|
||||
Number(productConfigData.value.cost_price) + Number(additional)
|
||||
).toFixed(2)
|
||||
); // 使用成本价作为最小值
|
||||
const maxAllowed = productConfigData.value.price_range_max; // 使用产品配置中的最大价格作为最大值
|
||||
if (configData.value.price_range_from < minAllowed) {
|
||||
configData.value.price_range_from = minAllowed;
|
||||
showToast(`最低金额不能低于成本价 ${minAllowed}元`);
|
||||
rangeError.value = true;
|
||||
closeRangeError();
|
||||
|
||||
configData.value.price_range_to = parseFloat(
|
||||
(
|
||||
Number(configData.value.price_range_from) +
|
||||
Number(priceIncreaseMax.value)
|
||||
).toFixed(2)
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
if (configData.value.price_range_to < configData.value.price_range_from) {
|
||||
showToast("最高金额不能低于最低金额");
|
||||
if (
|
||||
configData.value.price_range_from + priceIncreaseMax.value >
|
||||
maxAllowed
|
||||
) {
|
||||
configData.value.price_range_to = maxAllowed;
|
||||
} else {
|
||||
configData.value.price_range_to =
|
||||
configData.value.price_range_from + priceIncreaseMax.value;
|
||||
}
|
||||
rangeError.value = true;
|
||||
closeRangeError();
|
||||
return;
|
||||
}
|
||||
const diff = parseFloat(
|
||||
(
|
||||
configData.value.price_range_to - configData.value.price_range_from
|
||||
).toFixed(2)
|
||||
);
|
||||
if (diff > priceIncreaseMax.value) {
|
||||
showToast(`价格区间最大差值为${priceIncreaseMax.value}元`);
|
||||
configData.value.price_range_to =
|
||||
configData.value.price_range_from + priceIncreaseMax.value;
|
||||
closeRangeError();
|
||||
return;
|
||||
}
|
||||
|
||||
if (configData.value.price_range_to > maxAllowed) {
|
||||
configData.value.price_range_to = maxAllowed;
|
||||
showToast(`最高金额不能超过 ${maxAllowed}元`);
|
||||
closeRangeError();
|
||||
}
|
||||
|
||||
if (!rangeError.value) {
|
||||
rangeError.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 收取比例验证（修改为保留两位小数，不再四舍五入取整）
|
||||
const validateRatio = () => {
|
||||
let value = configData.value.price_ratio;
|
||||
if (value === null || value === undefined) return;
|
||||
|
||||
const numValue = Number(value);
|
||||
if (isNaN(numValue)) {
|
||||
configData.value.price_ratio = null;
|
||||
ratioError.value = true;
|
||||
return;
|
||||
}
|
||||
|
||||
if (numValue > priceRatioMax.value) {
|
||||
configData.value.price_ratio = priceRatioMax.value;
|
||||
showToast(`收取比例最大为${priceRatioMax.value}%`);
|
||||
ratioError.value = true;
|
||||
setTimeout(() => {
|
||||
ratioError.value = false;
|
||||
}, 1000);
|
||||
} else if (numValue < 0) {
|
||||
configData.value.price_ratio = 0;
|
||||
ratioError.value = true;
|
||||
} else {
|
||||
configData.value.price_ratio = parseFloat(numValue.toFixed(2));
|
||||
ratioError.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 获取配置
|
||||
const getConfig = async () => {
|
||||
try {
|
||||
const { data, error } = await useApiFetch(
|
||||
"/agent/membership/user_config?product_id=" + selectedReportId.value
|
||||
)
|
||||
.get()
|
||||
.json();
|
||||
|
||||
if (data.value?.code === 200) {
|
||||
const respConfigData = data.value.data.agent_membership_user_config;
|
||||
configData.value = {
|
||||
id: respConfigData.product_id,
|
||||
price_range_from: respConfigData.price_range_from || null,
|
||||
price_range_to: respConfigData.price_range_to || null,
|
||||
price_ratio: respConfigData.price_ratio * 100 || null, // 转换为百分比
|
||||
price_increase_amount:
|
||||
respConfigData.price_increase_amount || null,
|
||||
};
|
||||
console.log("configData", configData.value);
|
||||
// const respProductConfigData = data.value.data.product_config
|
||||
productConfigData.value = data.value.data.product_config;
|
||||
// 设置动态限制值
|
||||
priceIncreaseMax.value = data.value.data.price_increase_max;
|
||||
priceIncreaseAmountMax.value =
|
||||
data.value.data.price_increase_amount;
|
||||
priceRatioMax.value = data.value.data.price_ratio * 100;
|
||||
}
|
||||
} catch (error) {
|
||||
showToast("配置加载失败");
|
||||
}
|
||||
};
|
||||
|
||||
// 提交处理
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
if (!finalValidation()) {
|
||||
return;
|
||||
}
|
||||
// 前端数据转换
|
||||
const submitData = {
|
||||
product_id: configData.value.id,
|
||||
price_range_from: configData.value.price_range_from || 0,
|
||||
price_range_to: configData.value.price_range_to || 0,
|
||||
price_ratio: (configData.value.price_ratio || 0) / 100, // 转换为小数
|
||||
price_increase_amount: configData.value.price_increase_amount || 0,
|
||||
};
|
||||
console.log("submitData", submitData);
|
||||
const { data, error } = await useApiFetch(
|
||||
"/agent/membership/save_user_config"
|
||||
)
|
||||
.post(submitData)
|
||||
.json();
|
||||
|
||||
if (data.value?.code === 200) {
|
||||
setTimeout(() => {
|
||||
showToast("保存成功");
|
||||
}, 500);
|
||||
getConfig();
|
||||
}
|
||||
} catch (error) {
|
||||
showToast("保存失败，请稍后重试");
|
||||
}
|
||||
};
|
||||
// 最终验证函数
|
||||
const finalValidation = () => {
|
||||
// 校验最低金额：不能为空且大于0
|
||||
if (
|
||||
!configData.value.price_range_from ||
|
||||
configData.value.price_range_from <= 0
|
||||
) {
|
||||
showToast("最低金额不能为空");
|
||||
return false;
|
||||
}
|
||||
// 校验最高金额：不能为空且大于0
|
||||
if (
|
||||
!configData.value.price_range_to ||
|
||||
configData.value.price_range_to <= 0
|
||||
) {
|
||||
showToast("最高金额不能为空");
|
||||
return false;
|
||||
}
|
||||
// 校验收取比例：不能为空且大于0
|
||||
if (!configData.value.price_ratio || configData.value.price_ratio <= 0) {
|
||||
showToast("收取比例不能为空");
|
||||
return false;
|
||||
}
|
||||
// 验证最低金额必须小于最高金额
|
||||
if (configData.value.price_range_from >= configData.value.price_range_to) {
|
||||
showToast("最低金额必须小于最高金额");
|
||||
return false;
|
||||
}
|
||||
// 验证价格区间差值不能超过最大允许差值
|
||||
const finalDiff = parseFloat(
|
||||
(
|
||||
configData.value.price_range_to - configData.value.price_range_from
|
||||
).toFixed(2)
|
||||
);
|
||||
if (finalDiff > priceIncreaseMax.value) {
|
||||
showToast(`价格区间最大差值为${priceIncreaseMax.value}元`);
|
||||
return false;
|
||||
}
|
||||
// 验证最高金额不能超过产品配置中设定的上限
|
||||
if (
|
||||
configData.value.price_range_to >
|
||||
productConfigData.value.price_range_max
|
||||
) {
|
||||
showToast(
|
||||
`最高金额不能超过${productConfigData.value.price_range_max}元`
|
||||
);
|
||||
return false;
|
||||
}
|
||||
// 验证最低金额不能低于成本价+加价金额（加价金额允许为空）
|
||||
const additional = configData.value.price_increase_amount || 0;
|
||||
if (
|
||||
configData.value.price_range_from <
|
||||
productConfigData.value.cost_price + additional
|
||||
) {
|
||||
showToast(
|
||||
`最低金额不能低于成本价${productConfigData.value.cost_price + additional
|
||||
}元`
|
||||
);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
// 选择器确认
|
||||
const onConfirm = ({ selectedOptions }) => {
|
||||
selectedReport.value = selectedOptions[0];
|
||||
selectedReportText.value = selectedOptions[0].text;
|
||||
selectedReportId.value = selectedOptions[0].id;
|
||||
showPicker.value = false;
|
||||
// 重置错误状态
|
||||
rangeError.value = false;
|
||||
ratioError.value = false;
|
||||
increaseError.value = false;
|
||||
|
||||
getConfig();
|
||||
};
|
||||
const closeRangeError = () => {
|
||||
setTimeout(() => {
|
||||
rangeError.value = false;
|
||||
}, 2000);
|
||||
};
|
||||
onMounted(() => {
|
||||
getConfig();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.custom-field {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.custom-field .van-field__body {
|
||||
@apply bg-gray-50 rounded-lg px-3 py-2;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.custom-field:focus-within .van-field__body {
|
||||
@apply ring-2 ring-blue-200;
|
||||
}
|
||||
|
||||
.van-picker__toolbar {
|
||||
@apply bg-gray-50 rounded-t-lg;
|
||||
}
|
||||
|
||||
.van-picker__confirm {
|
||||
@apply text-blue-500 font-medium;
|
||||
}
|
||||
|
||||
.van-divider {
|
||||
@apply before:bg-gray-100 after:bg-gray-100;
|
||||
}
|
||||
|
||||
/* 错误状态样式 */
|
||||
.van-field--error .van-field__control {
|
||||
color: #ee0a24;
|
||||
}
|
||||
|
||||
.van-field--error .van-field__label {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.van-field--error .van-field__body {
|
||||
@apply ring-2 ring-red-200 bg-red-50;
|
||||
}
|
||||
</style>
|
||||
198
src/views/Authorization.vue
Normal file
198
src/views/Authorization.vue
Normal file
@@ -0,0 +1,198 @@
|
||||
<template>
|
||||
<!-- 授权书滚动区域 -->
|
||||
<div class=" card flex-1 overflow-y-auto" ref="agreementBox" @scroll="handleScroll">
|
||||
<p class="my-2">广西福铭网络科技有限公司：</p>
|
||||
<p class="indent-[2em]">
|
||||
<!-- <span class="font-bold"> {{ signature ? userData.name : "____________" }}</span> -->
|
||||
本人________拟向贵司申请大数据分析报告查询业务，贵司需要了解本人相关状况，用于查询大数据分析报告，因此本人同意向贵司提供本人的姓名和手机号等个人信息，并同意贵司向第三方传送上述信息。第三方将使用上述信息核实信息真实情况，查询信用记录，并生成报告。
|
||||
</p>
|
||||
<p class="mt-2 font-bold">授权内容如下：</p>
|
||||
<ol class="list-decimal pl-6">
|
||||
<li>
|
||||
贵司向依法成立的第三方服务商根据本人提交的信息进行核实，并有权通过前述第三方服务机构查询、使用本人的身份信息、设备信息、运营商信息等，查询本人信息（包括但不限于学历、婚姻、资产状况及对信息主体产生负面影响的不良信息），出具相关报告。
|
||||
</li>
|
||||
<li>
|
||||
依法成立的第三方服务商查询或核实、搜集、保存、处理、共享、使用（含合法业务应用）本人相关数据，且不再另行告知本人，但法律、法规、监管政策禁止的除外。
|
||||
</li>
|
||||
<!-- <li>本人授权本业务推广方（ ）可浏览本人大数据报告。</li> -->
|
||||
<li>
|
||||
本人授权有效期为自授权之日起
|
||||
1个月。本授权为不可撤销授权，但法律法规另有规定的除外。
|
||||
</li>
|
||||
</ol>
|
||||
<p class="mt-2 font-bold">用户声明与承诺：</p>
|
||||
<ul class="list-decimal pl-6">
|
||||
<li>
|
||||
本人在授权签署前，已通过实名认证及动态验证码验证（或其他身份验证手段），确认本授权行为为本人真实意思表示，平台已履行身份验证义务。
|
||||
</li>
|
||||
<li>
|
||||
本人在此声明已充分理解上述授权条款含义，知晓并自愿承担因授权数据使用可能带来的后果，包括但不限于影响个人信用评分、生活行为等。本人确认授权范围内的相关信息由本人提供并真实有效。
|
||||
</li>
|
||||
<li>
|
||||
若用户冒名签署或提供虚假信息，由用户自行承担全部法律责任，平台不承担任何后果。
|
||||
</li>
|
||||
</ul>
|
||||
<p class="mt-2 font-bold">特别提示：</p>
|
||||
<ul class="list-decimal pl-6">
|
||||
<li>
|
||||
本产品所有数据均来自第三方。可能部分数据未公开、数据更新延迟或信息受到限制，贵司不对数据的准确性、真实性、完整性做任何承诺。用户需根据实际情况，结合报告内容自行判断与决策。
|
||||
</li>
|
||||
<li>
|
||||
本产品仅供用户本人查询或被授权查询。除非用户取得合法授权，用户不得利用本产品查询他人信息。用户因未获得合法授权而擅自查询他人信息所产生的任何后果，由用户自行承担责任。
|
||||
</li>
|
||||
<li>
|
||||
本授权书涉及对本人敏感信息（包括但不限于婚姻状态、资产状况等）的查询与使用。本人已充分知晓相关信息的敏感性，并明确同意贵司及其合作方依据授权范围使用相关信息。
|
||||
</li>
|
||||
<li>
|
||||
平台声明：本授权书涉及的信息核实及查询结果由第三方服务商提供，平台不对数据的准确性、完整性、实时性承担责任；用户根据报告所作决策的风险由用户自行承担，平台对此不承担法律责任。
|
||||
</li>
|
||||
<li>
|
||||
本授权书中涉及的数据查询和报告生成由依法成立的第三方服务商提供。若因第三方行为导致数据错误或损失，用户应向第三方主张权利，平台不承担相关责任。
|
||||
</li>
|
||||
</ul>
|
||||
<p class="mt-2 font-bold">附加说明：</p>
|
||||
<ul class="list-decimal pl-6">
|
||||
<li>
|
||||
本人在授权的相关数据将依据法律法规及贵司内部数据管理规范妥善存储，存储期限为法律要求的最短必要时间。超过存储期限或在数据使用目的达成后，贵司将对相关数据进行销毁或匿名化处理。
|
||||
</li>
|
||||
<li>
|
||||
本人有权随时撤回本授权书中的授权，但撤回前的授权行为及其法律后果仍具有法律效力。若需撤回授权，本人可通过贵司官方渠道提交书面申请，贵司将在收到申请后依法停止对本人数据的使用。
|
||||
</li>
|
||||
<li>
|
||||
你通过“天远查”，自愿支付相应费用，用于购买广西福铭网络科技有限公司的大数据报告产品。如若对产品内容存在异议，可通过邮箱admin@iieeii.com或APP“联系客服”按钮进行反馈，贵司将在收到异议之日起20日内进行核查和处理，并将结果答复。
|
||||
</li>
|
||||
<li>
|
||||
你向广西福铭网络科技有限公司的支付方式为：广西福铭网络科技有限公司及其经官方授权的相关企业的支付宝账户。
|
||||
</li>
|
||||
</ul>
|
||||
<p class="mt-2 font-bold">争议解决机制：</p>
|
||||
<ul>
|
||||
<li>
|
||||
若因本授权书引发争议，双方应友好协商解决；协商不成的，双方同意将争议提交至授权书签署地（广西壮族自治区）有管辖权的人民法院解决。
|
||||
</li>
|
||||
</ul>
|
||||
<p class="mt-2 font-bold">签署方式的法律效力声明：</p>
|
||||
<ul>
|
||||
<li>
|
||||
本授权书通过用户在线勾选、电子签名或其他网络签署方式完成，与手写签名具有同等法律效力。平台已通过技术手段保存签署过程的完整记录，作为用户真实意思表示的证据。
|
||||
</li>
|
||||
</ul>
|
||||
<p class="mt-2">本授权书于 {{ signTime }}生效。</p>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useFetch } from "@vueuse/core";
|
||||
import { useWebView } from "@/composables/useWebView";
|
||||
const { postMessage } = useWebView();
|
||||
const userData = ref({
|
||||
name: "",
|
||||
idCard: "",
|
||||
phone: "",
|
||||
});
|
||||
const signature = ref(false);
|
||||
const agreed = ref(false);
|
||||
const id = ref(null);
|
||||
const token = ref(null);
|
||||
const formatDate = (date) => {
|
||||
const options = { year: "numeric", month: "long", day: "numeric" };
|
||||
return new Intl.DateTimeFormat("zh-CN", options).format(date);
|
||||
};
|
||||
const signTime = ref(formatDate(new Date()));
|
||||
|
||||
const canAgree = ref(false); // 同意按钮状态
|
||||
const scrollMessage = ref("请滑动并阅读完整授权书以继续");
|
||||
|
||||
// 滚动事件处理
|
||||
let timeout = null;
|
||||
|
||||
const handleScroll = (event) => {
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(() => {
|
||||
const element = event.target;
|
||||
if (
|
||||
Math.abs(
|
||||
element.scrollHeight - element.scrollTop - element.clientHeight
|
||||
) <= 50
|
||||
) {
|
||||
canAgree.value = true;
|
||||
scrollMessage.value = "您已阅读完整授权书，可以继续";
|
||||
}
|
||||
}, 100);
|
||||
};
|
||||
// 接收来自 App 的参数
|
||||
onMounted(() => {
|
||||
// 如果是通过 query 参数传递数据
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
id.value = urlParams.get("id") || "";
|
||||
token.value = urlParams.get("token") || "";
|
||||
if (id.value && token.value) {
|
||||
const { data, isFetching, error, onFetchResponse } = useFetch(
|
||||
"/api/v1/query/provisional_order/" + id.value,
|
||||
{
|
||||
async beforeFetch({ url, options, cancel }) {
|
||||
options.headers = {
|
||||
...options.headers,
|
||||
Authorization: token.value,
|
||||
};
|
||||
|
||||
return {
|
||||
options,
|
||||
};
|
||||
},
|
||||
}
|
||||
)
|
||||
.get()
|
||||
.json();
|
||||
|
||||
onFetchResponse(() => {
|
||||
console.log("data", data.value);
|
||||
if (data.value.code === 200) {
|
||||
userData.value = {
|
||||
name: data.value.data.name,
|
||||
phone: data.value.data.mobile,
|
||||
};
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 用户同意
|
||||
const agree = () => {
|
||||
if (!signature.value) {
|
||||
signature.value = true;
|
||||
return;
|
||||
}
|
||||
postMessage({
|
||||
data: {
|
||||
action: "agreed",
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
// 用户取消
|
||||
const cancel = () => {
|
||||
postMessage({
|
||||
data: {
|
||||
action: "cancelled",
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener("UniAppJSBridgeReady", handleBridgeReady);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener("UniAppJSBridgeReady", handleBridgeReady);
|
||||
});
|
||||
const handleBridgeReady = () => {
|
||||
postMessage({
|
||||
data: {
|
||||
loaded: true,
|
||||
},
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
47
src/views/Complaint.vue
Normal file
47
src/views/Complaint.vue
Normal file
@@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<div class="support-chat">
|
||||
<h1>投诉中心</h1>
|
||||
<p>如果您有任何问题，请联系我们。</p>
|
||||
<p>请点击右下角按钮联系相关人员</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
onMounted(() => {
|
||||
// 插入客服脚本
|
||||
(function (d, t) {
|
||||
var BASE_URL = "https://service.quannengcha.com";
|
||||
var g = d.createElement(t),
|
||||
s = d.getElementsByTagName(t)[0];
|
||||
g.src = BASE_URL + "/packs/js/sdk.js";
|
||||
g.defer = true;
|
||||
g.async = true;
|
||||
s.parentNode.insertBefore(g, s);
|
||||
g.onload = function () {
|
||||
window.chatwootSDK.run({
|
||||
websiteToken: "XJqwnEWKVNte8iJW8DLroEzd",
|
||||
baseUrl: BASE_URL,
|
||||
});
|
||||
};
|
||||
})(document, "script");
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.support-chat {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
padding-top: 100px;
|
||||
}
|
||||
|
||||
.support-chat h1 {
|
||||
font-size: 28px;
|
||||
color: #005a9e;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.support-chat p {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
46
src/views/Example.vue
Normal file
46
src/views/Example.vue
Normal file
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<BaseReport :feature="feature" :reportData="reportData" :reportParams="reportParams" :reportName="reportName"
|
||||
:reportDateTime="reportDateTime" :isEmpty="isEmpty" :isDone="isDone" isExample />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
const feature = ref("");
|
||||
const reportData = ref([]);
|
||||
const reportParams = ref({});
|
||||
const reportName = ref("");
|
||||
const reportDateTime = ref(null);
|
||||
const isEmpty = ref(false);
|
||||
const isDone = ref(false);
|
||||
const active = ref(0);
|
||||
|
||||
|
||||
onBeforeMount(() => {
|
||||
const query = new URLSearchParams(window.location.search);
|
||||
feature.value = query.get("feature");
|
||||
|
||||
if (!feature.value) return;
|
||||
getReport();
|
||||
});
|
||||
|
||||
const getReport = async () => {
|
||||
let queryUrl = `/query/example?feature=${feature.value}`;
|
||||
const { data, error } = await useApiFetch(queryUrl).get().json();
|
||||
|
||||
if (data.value && !error.value) {
|
||||
if (data.value.code === 200) {
|
||||
reportData.value = data.value.data.query_data.sort((a, b) => {
|
||||
return a.feature.sort - b.feature.sort;
|
||||
});
|
||||
reportParams.value = data.value.data.query_params;
|
||||
reportName.value = data.value.data.product_name;
|
||||
reportDateTime.value = data.value.data.create_time;
|
||||
} else if (data.value.code === 200003) {
|
||||
isEmpty.value = true;
|
||||
}
|
||||
isDone.value = true;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
115
src/views/Help.vue
Normal file
115
src/views/Help.vue
Normal file
@@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<div class="help-center">
|
||||
<van-tabs v-model:active="activeTab" sticky :offset-top="46">
|
||||
<van-tab v-for="(category, index) in categories" :key="index" :title="category.title" :name="category.name">
|
||||
<van-cell-group inset class="help-list" size="large">
|
||||
<van-cell v-for="item in category.items" :key="item.id" :title="item.title" is-link
|
||||
@click="goToDetail(item.id, item.type)" class="help-item">
|
||||
<template #label>
|
||||
<van-tag v-if="item.type === 'guide'" type="primary" size="small"
|
||||
class="guide-tag" style="background-color: var(--van-theme-primary); color: white;">引导指南</van-tag>
|
||||
</template>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
const activeTab = ref('report')
|
||||
|
||||
const categories = [
|
||||
{
|
||||
title: '推广报告',
|
||||
name: 'report',
|
||||
items: [
|
||||
{ id: 'report_guide', title: '直推报告页面引导', type: 'guide' },
|
||||
{ id: 'invite_guide', title: '邀请下级页面引导', type: 'guide' },
|
||||
{ id: 'direct_earnings', title: '如何成为天远查代理' },
|
||||
{ id: 'report_push', title: '如何推广报告' },
|
||||
{ id: 'report_calculation', title: '推广报告的收益是如何计算的?' },
|
||||
{ id: 'report_cost', title: '推广报告的成本是如何计算的？' },
|
||||
{ id: 'report_efficiency', title: '报告推广效率飙升指南' },
|
||||
{ id: 'report_secret', title: '报告推广秘籍大公开' },
|
||||
{ id: 'report_types', title: '天远查有哪些大数据报告类型' },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '邀请下级',
|
||||
name: 'invite',
|
||||
items: [
|
||||
{ id: 'invite_earnings', title: '邀请下级赚取收益' }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '其他',
|
||||
name: 'other',
|
||||
items: [
|
||||
{ id: 'vip_guide', title: '如何成为VIP代理和SVIP代理?' }
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
const goToDetail = (id, type) => {
|
||||
if (type === 'guide') {
|
||||
router.push({
|
||||
path: '/help/guide',
|
||||
query: { id }
|
||||
})
|
||||
} else {
|
||||
router.push({
|
||||
path: '/help/detail',
|
||||
query: { id }
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.help-center {
|
||||
min-height: 100vh;
|
||||
background-color: #f7f8fa;
|
||||
|
||||
.help-list {
|
||||
margin-top: 12px;
|
||||
|
||||
.guide-tag {
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.help-item) {
|
||||
.van-cell__title {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.help-detail {
|
||||
padding: 20px;
|
||||
|
||||
&-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
&-content {
|
||||
white-space: pre-line;
|
||||
line-height: 1.6;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
80
src/views/HelpDetail.vue
Normal file
80
src/views/HelpDetail.vue
Normal file
@@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<div class="help-detail">
|
||||
<h2>{{ currentHelp.title }}</h2>
|
||||
<template v-if="Array.isArray(currentHelp.images)">
|
||||
<img v-for="(image, index) in currentHelp.images" :key="index" :src="image" :alt="currentHelp.title"
|
||||
class="help-image">
|
||||
</template>
|
||||
<img v-else-if="currentHelp.image" :src="currentHelp.image" :alt="currentHelp.title" class="help-image">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
|
||||
const route = useRoute()
|
||||
const currentHelp = ref({
|
||||
title: '',
|
||||
image: '',
|
||||
images: null
|
||||
})
|
||||
|
||||
// 图片路径映射
|
||||
const imageMap = {
|
||||
report_calculation: '/image/help/report-calculation.jpg',
|
||||
report_efficiency: '/image/help/report-efficiency.jpg',
|
||||
report_cost: '/image/help/report-cost.jpg',
|
||||
report_types: '/image/help/report-types.jpg',
|
||||
report_push: '/image/help/report-push.jpg',
|
||||
report_secret: ['/image/help/report-secret-1.jpg', '/image/help/report-secret-2.jpg'],
|
||||
invite_earnings: '/image/help/invite-earnings.jpg',
|
||||
direct_earnings: '/image/help/direct-earnings.jpg',
|
||||
vip_guide: '/image/help/vip-guide.jpg'
|
||||
}
|
||||
|
||||
// 标题映射
|
||||
const titleMap = {
|
||||
report_calculation: '推广报告的收益是如何计算的?',
|
||||
report_efficiency: '报告推广效率飙升指南',
|
||||
report_cost: '推广报告的成本是如何计算的？',
|
||||
report_types: '天远查有哪些大数据报告类型',
|
||||
report_push: '如何推广报告',
|
||||
report_secret: '报告推广秘籍大公开',
|
||||
invite_earnings: '如何邀请下级成为代理',
|
||||
direct_earnings: '如何成为天远查代理',
|
||||
vip_guide: '如何成为VIP代理和SVIP代理?'
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const id = route.query.id
|
||||
if (id && titleMap[id]) {
|
||||
currentHelp.value = {
|
||||
title: titleMap[id],
|
||||
image: Array.isArray(imageMap[id]) ? null : imageMap[id],
|
||||
images: Array.isArray(imageMap[id]) ? imageMap[id] : null
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.help-detail {
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
|
||||
h2 {
|
||||
margin: 0 0 20px;
|
||||
font-size: 22px;
|
||||
color: #323233;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.help-image {
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
103
src/views/HelpGuide.vue
Normal file
103
src/views/HelpGuide.vue
Normal file
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<div class="help-guide">
|
||||
<div class="guide-content" @click="handleImageClick">
|
||||
<img :src="currentStep.image" :alt="currentStep.title" class="guide-image">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const currentStepIndex = ref(0)
|
||||
|
||||
// 引导步骤数据
|
||||
const guideSteps = {
|
||||
report_guide: [
|
||||
{
|
||||
title: '第一步：进入直推报告页面',
|
||||
image: '/image/help/report-step1.jpg'
|
||||
},
|
||||
{
|
||||
title: '第二步：选择报告类型',
|
||||
image: '/image/help/report-step2.jpg'
|
||||
},
|
||||
{
|
||||
title: '第三步：填写推广信息',
|
||||
image: '/image/help/report-step3.jpg'
|
||||
},
|
||||
{
|
||||
title: '第四步：完成推广',
|
||||
image: '/image/help/report-step4.jpg'
|
||||
}
|
||||
],
|
||||
invite_guide: [
|
||||
{
|
||||
title: '第一步：进入邀请页面',
|
||||
image: '/image/help/invite-step1.jpg'
|
||||
},
|
||||
{
|
||||
title: '第二步：获取邀请码',
|
||||
image: '/image/help/invite-step2.jpg'
|
||||
},
|
||||
{
|
||||
title: '第三步：分享邀请链接',
|
||||
image: '/image/help/invite-step3.jpg'
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
const currentGuide = computed(() => {
|
||||
const id = route.query.id
|
||||
return guideSteps[id] || []
|
||||
})
|
||||
|
||||
const totalSteps = computed(() => currentGuide.value.length)
|
||||
|
||||
const currentStep = computed(() => currentGuide.value[currentStepIndex.value])
|
||||
|
||||
const handleImageClick = () => {
|
||||
if (currentStepIndex.value < totalSteps.value - 1) {
|
||||
currentStepIndex.value++
|
||||
} else {
|
||||
// 最后一步，返回列表页
|
||||
router.back()
|
||||
}
|
||||
}
|
||||
|
||||
const onClickLeft = () => {
|
||||
router.back()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const id = route.query.id
|
||||
if (!guideSteps[id]) {
|
||||
router.back()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.help-guide {
|
||||
background-color: #666666;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh - 46px);
|
||||
|
||||
.guide-content {
|
||||
flex: 1;
|
||||
height: calc(100vh - 46px);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
.guide-image {
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
128
src/views/HistoryQuery.vue
Normal file
128
src/views/HistoryQuery.vue
Normal file
@@ -0,0 +1,128 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
const router = useRouter()
|
||||
const page = ref(1)
|
||||
const pageSize = ref(10)
|
||||
const total = ref(0)
|
||||
const reportList = ref([])
|
||||
const num = ref(0)
|
||||
const max = ref(60)
|
||||
const loading = ref(false)
|
||||
const finished = ref(false)
|
||||
// 初始加载数据
|
||||
async function fetchData() {
|
||||
loading.value = true
|
||||
const { data, error } = await useApiFetch(`query/list?page=${page.value}&page_size=${pageSize.value}`)
|
||||
.get()
|
||||
.json()
|
||||
if (data.value && !error.value) {
|
||||
if (data.value.code === 200) {
|
||||
total.value = data.value.data.total
|
||||
if (data.value.data.list && data.value.data.list.length > 0) {
|
||||
reportList.value.push(...data.value.data.list)
|
||||
page.value += 1
|
||||
}
|
||||
if (reportList.value.length >= total.value) {
|
||||
finished.value = true
|
||||
}
|
||||
}
|
||||
}
|
||||
loading.value = false
|
||||
|
||||
}
|
||||
|
||||
// 初始加载
|
||||
onMounted(() => {
|
||||
fetchData()
|
||||
})
|
||||
|
||||
// 下拉触底加载更多
|
||||
const onLoad = () => {
|
||||
if (!finished.value) {
|
||||
console.log("finished", finished.value)
|
||||
if (num.value >= max.value) {
|
||||
finished.value = true
|
||||
} else {
|
||||
fetchData()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function toDetail(item) {
|
||||
if (item.query_state != "success") return
|
||||
router.push({ path: '/report', query: { orderId: item.order_id } });
|
||||
}
|
||||
|
||||
// 状态文字映射
|
||||
function stateText(state) {
|
||||
switch (state) {
|
||||
case 'pending':
|
||||
return '查询中'
|
||||
case 'success':
|
||||
return '查询成功'
|
||||
case 'failed':
|
||||
return '查询失败'
|
||||
case 'refunded':
|
||||
return '已退款'
|
||||
default:
|
||||
return '未知状态'
|
||||
}
|
||||
}
|
||||
|
||||
// 状态颜色映射
|
||||
function statusClass(state) {
|
||||
switch (state) {
|
||||
case 'pending':
|
||||
return 'status-pending'
|
||||
case 'success':
|
||||
return 'status-success'
|
||||
case 'failed':
|
||||
return 'status-failed'
|
||||
case 'refunded':
|
||||
return 'status-refunded'
|
||||
default:
|
||||
return ''
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col gap-4 p-4">
|
||||
<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
|
||||
<div v-for="item in reportList" :key="item.id" @click="toDetail(item)"
|
||||
class="bg-white rounded-lg shadow-sm p-4 mb-4 relative cursor-pointer">
|
||||
<div class="flex flex-col">
|
||||
<div class="text-xl text-black mb-1">{{ item.product_name }}</div>
|
||||
<div class="text-sm text-[#999999]">{{ item.create_time }}</div>
|
||||
</div>
|
||||
<div class="absolute top-0 right-0 rounded-bl-lg rounded-tr-lg px-2 py-[1px] text-white text-sm font-medium"
|
||||
:class="[statusClass(item.query_state)]">
|
||||
{{ stateText(item.query_state) }}
|
||||
</div>
|
||||
</div>
|
||||
</van-list>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.status-pending {
|
||||
background-color: #1976d2;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.status-success {
|
||||
background-color: #1FBE5D;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.status-failed {
|
||||
background-color: #EB3C3C;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.status-refunded {
|
||||
background-color: #999999;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
49
src/views/Inquire.vue
Normal file
49
src/views/Inquire.vue
Normal file
@@ -0,0 +1,49 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import InquireForm from "@/components/InquireForm.vue";
|
||||
|
||||
const route = useRoute();
|
||||
const feature = ref(route.params.feature);
|
||||
|
||||
// 获取产品信息
|
||||
const featureData = ref({});
|
||||
|
||||
onMounted(async () => {
|
||||
isFinishPayment();
|
||||
await getProduct();
|
||||
});
|
||||
|
||||
function isFinishPayment() {
|
||||
const query = new URLSearchParams(window.location.search);
|
||||
let orderNo = query.get("out_trade_no");
|
||||
if (orderNo) {
|
||||
router.push({ path: "/report", query: { orderNo } });
|
||||
}
|
||||
}
|
||||
|
||||
async function getProduct() {
|
||||
const { data, error } = await useApiFetch(`/product/en/${feature.value}`)
|
||||
.get()
|
||||
.json();
|
||||
|
||||
if (data.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;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<InquireForm :type="'normal'" :feature="feature" :feature-data="featureData" />
|
||||
</template>
|
||||
44
src/views/Invitation.vue
Normal file
44
src/views/Invitation.vue
Normal file
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<div>
|
||||
<img src="@/assets/images/invitation.png" alt="邀请下级" />
|
||||
<div
|
||||
@click="showQRcode = true"
|
||||
class="bg-gradient-to-t from-orange-500 to-orange-300 fixed bottom-0 h-12 w-full bg-orange-400 shadow-xl text-white rounded-t-xl flex items-center justify-center font-bold"
|
||||
>
|
||||
立即邀请好友
|
||||
</div>
|
||||
</div>
|
||||
<QRcode
|
||||
v-model:show="showQRcode"
|
||||
mode="invitation"
|
||||
:linkIdentifier="linkIdentifier"
|
||||
/>
|
||||
</template>
|
||||
<script setup>
|
||||
import { storeToRefs } from "pinia";
|
||||
import { aesEncrypt } from "@/utils/crypto";
|
||||
import { useAgentStore } from "@/stores/agentStore";
|
||||
const agentStore = useAgentStore();
|
||||
const { mobile, agentID } = storeToRefs(agentStore); // 响应式解构
|
||||
|
||||
const showQRcode = ref(false);
|
||||
const linkIdentifier = ref("");
|
||||
onBeforeMount(() => {
|
||||
encryptIdentifire(agentID.value, mobile.value);
|
||||
});
|
||||
|
||||
const encryptIdentifire = (agentID, mobile) => {
|
||||
const linkIdentifierJSON = {
|
||||
agentID,
|
||||
mobile,
|
||||
};
|
||||
const linkIdentifierStr = JSON.stringify(linkIdentifierJSON);
|
||||
const encodeData = aesEncrypt(
|
||||
linkIdentifierStr,
|
||||
"8e3e7a2f60edb49221e953b9c029ed10"
|
||||
);
|
||||
linkIdentifier.value = encodeURIComponent(encodeData);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
168
src/views/InvitationAgentApply.vue
Normal file
168
src/views/InvitationAgentApply.vue
Normal file
@@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<div class="min-h-screen bg-[#D1D6FF]">
|
||||
<img src="@/assets/images/invitation_agent_apply.png" alt="邀请代理申请" />
|
||||
<!-- 统一状态处理容器 -->
|
||||
<div class="flex flex-col items-center justify-centerx">
|
||||
<!-- 审核中状态 -->
|
||||
<div v-if="displayStatus === 0" class="text-center">
|
||||
<span class="text-xs text-gray-500">您的申请正在审核中</span>
|
||||
<div class="bg-gray-200 p-1 rounded-3xl shadow-xl mt-1">
|
||||
<div
|
||||
class="text-xl font-bold px-8 py-2 bg-gray-400 text-white rounded-3xl shadow-lg cursor-not-allowed">
|
||||
审核进行中
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 审核通过状态 -->
|
||||
<div v-if="displayStatus === 1" class="text-center">
|
||||
<span class="text-xs text-gray-500">您已成为认证代理方</span>
|
||||
<div class="bg-green-100 p-1 rounded-3xl shadow-xl mt-1" @click="goToHome">
|
||||
<div
|
||||
class="text-xl font-bold px-8 py-2 bg-gradient-to-t from-green-500 to-green-300 text-white rounded-3xl shadow-lg cursor-pointer">
|
||||
进入应用首页
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 审核未通过状态 -->
|
||||
<div v-if="displayStatus === 2" class="text-center">
|
||||
<span class="text-xs text-red-500">审核未通过，请重新提交</span>
|
||||
<div class="bg-red-100 p-1 rounded-3xl shadow-xl mt-1" @click="agentApply">
|
||||
<div
|
||||
class="text-xl font-bold px-8 py-2 bg-gradient-to-t from-red-500 to-red-300 text-white rounded-3xl shadow-lg cursor-pointer">
|
||||
重新提交申请
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 未申请状态（包含邀请状态） -->
|
||||
<div v-if="displayStatus === 3" class="text-center">
|
||||
<span class="text-xs text-gray-500">{{
|
||||
isSelf ? "立即申请成为代理人" : "邀您注册代理人"
|
||||
}}</span>
|
||||
<div class="bg-gray-100 p-1 rounded-3xl shadow-xl mt-1" @click="agentApply">
|
||||
<div
|
||||
class="text-xl font-bold px-8 py-2 bg-gradient-to-t from-blue-500 to-blue-300 text-white rounded-3xl shadow-lg cursor-pointer">
|
||||
立即成为代理方
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<AgentApplicationForm v-model:show="showApplyPopup" @submit="submitApplication" @close="showApplyPopup = false"
|
||||
:ancestor="ancestor" :is-self="isSelf" :user-name="userName" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { aesDecrypt } from "@/utils/crypto";
|
||||
const showApplyPopup = ref(false);
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
import { storeToRefs } from "pinia";
|
||||
import { ref } from "vue";
|
||||
const store = useAgentStore();
|
||||
const userStore = useUserStore();
|
||||
const { userName } = storeToRefs(userStore);
|
||||
const { status } = storeToRefs(store); // 响应式解构
|
||||
const ancestor = ref("");
|
||||
const isSelf = ref(false);
|
||||
const agentApply = () => {
|
||||
showApplyPopup.value = true;
|
||||
};
|
||||
// 计算显示状态（当isSelf为false时强制显示为3）
|
||||
const displayStatus = computed(() => {
|
||||
// return isSelf.value ? status.value : 3;
|
||||
return status.value;
|
||||
});
|
||||
|
||||
// 跳转到首页
|
||||
const goToHome = () => {
|
||||
clearInterval(intervalId);
|
||||
router.push("/");
|
||||
};
|
||||
onBeforeMount(() => {
|
||||
if (route.name === "invitationAgentApplySelf") {
|
||||
isSelf.value = true;
|
||||
} else {
|
||||
const linkIdentifier = route.params.linkIdentifier;
|
||||
const decryptDataStr = aesDecrypt(
|
||||
decodeURIComponent(linkIdentifier),
|
||||
"8e3e7a2f60edb49221e953b9c029ed10"
|
||||
);
|
||||
const decryptData = JSON.parse(decryptDataStr);
|
||||
ancestor.value = decryptData.mobile;
|
||||
}
|
||||
const token = localStorage.getItem("token");
|
||||
if (token) {
|
||||
store.fetchAgentStatus();
|
||||
}
|
||||
});
|
||||
const submitApplication = async (formData) => {
|
||||
// 提交代理申请的数据
|
||||
const { region, mobile, wechat_id, code } = formData;
|
||||
let postData = {
|
||||
region,
|
||||
mobile,
|
||||
wechat_id,
|
||||
code,
|
||||
};
|
||||
|
||||
if (!isSelf.value) {
|
||||
postData.ancestor = ancestor.value;
|
||||
}
|
||||
|
||||
const { data, error } = await useApiFetch("/agent/apply")
|
||||
.post(postData)
|
||||
.json();
|
||||
|
||||
if (data.value && !error.value) {
|
||||
if (data.value.code === 200) {
|
||||
showApplyPopup.value = false;
|
||||
showToast({ message: "已提交申请" });
|
||||
// refreshAgentStatus()
|
||||
if (data.value.data.accessToken) {
|
||||
localStorage.setItem("token", data.value.data.accessToken);
|
||||
localStorage.setItem(
|
||||
"refreshAfter",
|
||||
data.value.data.refreshAfter
|
||||
);
|
||||
localStorage.setItem(
|
||||
"accessExpire",
|
||||
data.value.data.accessExpire
|
||||
);
|
||||
refreshAgentStatus();
|
||||
}
|
||||
} else {
|
||||
console.log("申请失败", data.value);
|
||||
}
|
||||
}
|
||||
};
|
||||
let intervalId = null; // 保存定时器 ID
|
||||
|
||||
const refreshAgentStatus = () => {
|
||||
// 当 status.value 变化时（如通过监听或事件）
|
||||
if (status.value === 3) {
|
||||
// 清除已有定时器（避免重复创建）
|
||||
if (intervalId) clearInterval(intervalId);
|
||||
|
||||
intervalId = setInterval(() => {
|
||||
// 每次执行前检查状态是否仍为 3
|
||||
if (status.value !== 3) {
|
||||
clearInterval(intervalId);
|
||||
intervalId = null;
|
||||
return;
|
||||
}
|
||||
store.fetchAgentStatus();
|
||||
}, 2000);
|
||||
} else {
|
||||
// 状态不是 3 时主动清除定时器
|
||||
if (intervalId) {
|
||||
clearInterval(intervalId);
|
||||
intervalId = null;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
332
src/views/Login.vue
Normal file
332
src/views/Login.vue
Normal file
@@ -0,0 +1,332 @@
|
||||
<script setup>
|
||||
import { ref, computed, onUnmounted, nextTick } from 'vue'
|
||||
import { showToast } from 'vant'
|
||||
|
||||
const router = useRouter()
|
||||
const phoneNumber = ref('')
|
||||
const verificationCode = ref('')
|
||||
const password = ref('')
|
||||
const isPasswordLogin = ref(false)
|
||||
const isAgreed = ref(false)
|
||||
const isCountingDown = ref(false)
|
||||
const countdown = ref(60)
|
||||
let timer = null
|
||||
|
||||
// 聚焦状态变量
|
||||
const phoneFocused = ref(false)
|
||||
const codeFocused = ref(false)
|
||||
const passwordFocused = ref(false)
|
||||
|
||||
const isPhoneNumberValid = computed(() => {
|
||||
return /^1[3-9]\d{9}$/.test(phoneNumber.value)
|
||||
})
|
||||
|
||||
const canLogin = computed(() => {
|
||||
if (!isPhoneNumberValid.value) return false
|
||||
if (isPasswordLogin.value) {
|
||||
return password.value.length >= 6
|
||||
} else {
|
||||
return verificationCode.value.length === 6
|
||||
}
|
||||
})
|
||||
|
||||
async function sendVerificationCode() {
|
||||
if (isCountingDown.value || !isPhoneNumberValid.value) return
|
||||
if (!isPhoneNumberValid.value) {
|
||||
showToast({ message: "请输入有效的手机号" });
|
||||
return
|
||||
}
|
||||
const { data, error } = await useApiFetch('auth/sendSms')
|
||||
.post({ mobile: phoneNumber.value, actionType: 'login' })
|
||||
.json()
|
||||
|
||||
if (data.value && !error.value) {
|
||||
if (data.value.code === 200) {
|
||||
showToast({ message: "获取成功" });
|
||||
startCountdown()
|
||||
// 聚焦到验证码输入框
|
||||
nextTick(() => {
|
||||
const verificationCodeInput = document.getElementById('verificationCode');
|
||||
if (verificationCodeInput) {
|
||||
verificationCodeInput.focus();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
showToast(data.value.msg)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function startCountdown() {
|
||||
isCountingDown.value = true
|
||||
countdown.value = 60
|
||||
timer = setInterval(() => {
|
||||
if (countdown.value > 0) {
|
||||
countdown.value--
|
||||
} else {
|
||||
clearInterval(timer)
|
||||
isCountingDown.value = false
|
||||
}
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
async function handleLogin() {
|
||||
if (!isPhoneNumberValid.value) {
|
||||
showToast({ message: "请输入有效的手机号" });
|
||||
return
|
||||
}
|
||||
if (isPasswordLogin.value) {
|
||||
if (password.value.length < 6) {
|
||||
showToast({ message: "密码长度不能小于6位" });
|
||||
return
|
||||
}
|
||||
} else {
|
||||
if (verificationCode.value.length !== 6) {
|
||||
showToast({ message: "请输入有效的验证码" });
|
||||
return
|
||||
}
|
||||
}
|
||||
if (!isAgreed.value) {
|
||||
showToast({ message: "请先同意用户协议" });
|
||||
return
|
||||
}
|
||||
// 直接执行登录逻辑
|
||||
await performLogin()
|
||||
}
|
||||
|
||||
// 执行实际的登录逻辑
|
||||
async function performLogin() {
|
||||
const { data, error } = await useApiFetch('/user/mobileCodeLogin')
|
||||
.post({ mobile: phoneNumber.value, code: verificationCode.value })
|
||||
.json()
|
||||
|
||||
if (data.value && !error.value) {
|
||||
if (data.value.code === 200) {
|
||||
localStorage.setItem('token', data.value.data.accessToken)
|
||||
localStorage.setItem('refreshAfter', data.value.data.refreshAfter)
|
||||
localStorage.setItem('accessExpire', data.value.data.accessExpire)
|
||||
window.location.href = '/'
|
||||
}
|
||||
}
|
||||
}
|
||||
function toUserAgreement() {
|
||||
router.push(`/userAgreement`)
|
||||
}
|
||||
|
||||
function toPrivacyPolicy() {
|
||||
router.push(`/privacyPolicy`)
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
if (timer) {
|
||||
clearInterval(timer)
|
||||
}
|
||||
})
|
||||
const onClickLeft = () => {
|
||||
router.replace('/')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="login-layout ">
|
||||
<van-nav-bar fixed placeholder title="用户登录" left-text="" left-arrow @click-left="onClickLeft" />
|
||||
<div class="login px-4 relative z-10">
|
||||
<div class="mb-8 pt-20 text-left">
|
||||
<div class="flex flex-col items-center">
|
||||
<img class="h-16 w-16 rounded-full shadow" src="/logo.jpg" alt="Logo" />
|
||||
<div class="text-3xl mt-4 text-slate-700 font-bold">天远查</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 登录表单 -->
|
||||
<div class="login-form">
|
||||
<!-- 手机号输入 -->
|
||||
<div class="form-item">
|
||||
<div class="form-label">手机号</div>
|
||||
<input v-model="phoneNumber" class="form-input" type="tel" placeholder="请输入手机号" maxlength="11" />
|
||||
</div>
|
||||
|
||||
<!-- 验证码输入 -->
|
||||
<div class="form-item">
|
||||
<div class="form-label">验证码</div>
|
||||
<div class="verification-input-wrapper">
|
||||
<input v-model="verificationCode" id="verificationCode" class="form-input verification-input"
|
||||
placeholder="请输入验证码" maxlength="6" />
|
||||
<button class="get-code-btn" :class="{ 'disabled': isCountingDown || !isPhoneNumberValid }"
|
||||
@click="sendVerificationCode" :disabled="isCountingDown || !isPhoneNumberValid">
|
||||
{{ isCountingDown ? `${countdown}s` : '获取验证码' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 协议同意框 -->
|
||||
<div class="agreement-wrapper">
|
||||
<input type="checkbox" v-model="isAgreed" class="agreement-checkbox accent-primary"
|
||||
id="agreement" />
|
||||
<label for="agreement" class="agreement-text">
|
||||
我已阅读并同意
|
||||
<a class="agreement-link" @click="toUserAgreement">《用户协议》</a>
|
||||
<a class="agreement-link" @click="toPrivacyPolicy">《隐私政策》</a>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- 提示文字 -->
|
||||
<div class="notice-text">
|
||||
未注册手机号登录后将自动生成账号，并且代表您已阅读并同意
|
||||
</div>
|
||||
|
||||
<!-- 登录按钮 -->
|
||||
<button class="login-btn" :class="{ 'disabled': !canLogin }" @click="handleLogin" :disabled="!canLogin">
|
||||
登 录
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.login-layout {
|
||||
background-image: url('@/assets/images/login_bg.png');
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.login {}
|
||||
|
||||
/* 登录表单 */
|
||||
.login-form {
|
||||
background-color: var(--color-bg-primary);
|
||||
padding: 2rem;
|
||||
margin-top: 0.5rem;
|
||||
box-shadow: 0px 0px 24px 0px #3F3F3F0F;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* 表单项 */
|
||||
.form-item {
|
||||
margin-bottom: 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--color-border-primary);
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-size: 0.9375rem;
|
||||
color: var(--color-text-primary);
|
||||
margin-bottom: 0;
|
||||
margin-right: 1rem;
|
||||
font-weight: 500;
|
||||
min-width: 4rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
padding: 0.875rem 0;
|
||||
|
||||
font-size: 0.9375rem;
|
||||
color: var(--color-text-primary);
|
||||
outline: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.form-input::placeholder {
|
||||
color: var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
border-bottom-color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
/* 验证码输入 */
|
||||
.verification-input-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.verification-input {
|
||||
flex: 1;
|
||||
padding-right: 6rem;
|
||||
}
|
||||
|
||||
.get-code-btn {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--color-primary);
|
||||
font-size: 0.875rem;
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.get-code-btn.disabled {
|
||||
color: var(--color-gray-400);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* 协议同意 */
|
||||
.agreement-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.agreement-checkbox {
|
||||
flex-shrink: 0;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.agreement-text {
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-text-secondary);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.agreement-link {
|
||||
color: var(--color-primary);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* 提示文字 */
|
||||
.notice-text {
|
||||
font-size: 0.6875rem;
|
||||
color: var(--color-text-tertiary);
|
||||
line-height: 1.5;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* 登录按钮 */
|
||||
.login-btn {
|
||||
width: 100%;
|
||||
padding: 0.875rem;
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-text-white);
|
||||
border: none;
|
||||
border-radius: 1.5rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.3s;
|
||||
letter-spacing: 0.25rem;
|
||||
}
|
||||
|
||||
.login-btn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.login-btn.disabled {
|
||||
background-color: var(--color-gray-300);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
82
src/views/Maintenance.vue
Normal file
82
src/views/Maintenance.vue
Normal file
@@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<div class="maintenance-container">
|
||||
<div class="notice-card">
|
||||
<h2 class="notice-title">服务暂停通知</h2>
|
||||
<div class="notice-content">
|
||||
<p>因政策要求，接上级主管部门通知，我司现暂停婚姻报告服务，恢复时间估计在元旦以后，由此给您带来的不便，我们深表歉意。</p>
|
||||
</div>
|
||||
<div class="notice-footer">
|
||||
<p>感谢您的理解与支持！</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Maintenance',
|
||||
data() {
|
||||
return {
|
||||
// 可以在这里添加需要的数据
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 可以在这里添加需要的方法
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.maintenance-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
background-color: #f5f7fa;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.notice-card {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||||
padding: 40px;
|
||||
max-width: 600px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.notice-title {
|
||||
font-size: 24px;
|
||||
color: #303133;
|
||||
margin-bottom: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.notice-content {
|
||||
font-size: 16px;
|
||||
color: #606266;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.notice-footer {
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.notice-card {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.notice-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.notice-content {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
322
src/views/Me.vue
Normal file
322
src/views/Me.vue
Normal file
@@ -0,0 +1,322 @@
|
||||
<template>
|
||||
<div class="box-border min-h-screen">
|
||||
<div class="flex flex-col p-4 space-y-6">
|
||||
<!-- 用户信息卡片 -->
|
||||
<div class="profile-section group relative flex items-center gap-4 rounded-xl bg-white p-6 transition-all hover:shadow-xl"
|
||||
@click="!isLoggedIn ? redirectToLogin() : null">
|
||||
<div class="relative">
|
||||
<!-- 头像容器添加overflow-hidden解决边框问题 -->
|
||||
<div class="overflow-hidden rounded-full p-0.5" :class="levelGradient.border">
|
||||
<img :src="userAvatar || getDefaultAvatar()" alt="User Avatar"
|
||||
class="h-24 w-24 rounded-full border-4 border-white" />
|
||||
</div>
|
||||
|
||||
<!-- 代理标识 -->
|
||||
<div v-if="isAgent" class="absolute -bottom-2 -right-2">
|
||||
<div class="flex items-center justify-center rounded-full px-3 py-1 text-xs font-bold text-white shadow-sm"
|
||||
:class="levelGradient.badge">
|
||||
{{ levelNames[level] }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<h2 class="text-2xl font-bold" style="color: var(--van-text-color);">
|
||||
{{
|
||||
!isLoggedIn
|
||||
? "点击登录"
|
||||
: mobile
|
||||
? maskName(mobile)
|
||||
: isWeChat
|
||||
? "微信用户"
|
||||
: "未绑定手机号"
|
||||
}}
|
||||
</h2>
|
||||
<!-- 手机号绑定提示 -->
|
||||
<template v-if="isLoggedIn && !mobile">
|
||||
<p @click.stop="showBindPhoneDialog" class="text-sm cursor-pointer hover:underline"
|
||||
style="color: var(--van-theme-primary);">
|
||||
点击绑定手机号码
|
||||
</p>
|
||||
</template>
|
||||
<p v-if="isAgent" class="text-sm font-medium" :class="levelGradient.text">
|
||||
🎖️ {{ levelText[level] }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<VipBanner v-if="isAgent && (level === 'normal' || level === '')" />
|
||||
<!-- 功能菜单 -->
|
||||
<div class="">
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
|
||||
<template v-if="isAgent && ['VIP', 'SVIP'].includes(level)">
|
||||
<button
|
||||
class="w-full flex items-center justify-between px-6 py-4 hover:bg-purple-50 transition-colors border-b border-gray-100"
|
||||
@click="toVipConfig">
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="@/assets/images/me/dlbgpz.png" class="w-6 h-6" alt="代理报告配置" />
|
||||
<span class="text-purple-700 font-medium">代理报告配置</span>
|
||||
</div>
|
||||
<img src="@/assets/images/me/right.png" class="w-4 h-4" alt="右箭头" />
|
||||
</button>
|
||||
<button
|
||||
class="w-full flex items-center justify-between px-6 py-4 hover:bg-amber-50 transition-colors border-b border-gray-100"
|
||||
@click="toVipRenewal">
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="@/assets/images/me/xfhy.png" class="w-6 h-6" alt="代理会员" />
|
||||
<div class="flex flex-col items-start">
|
||||
<span class="text-amber-700 font-medium">续费代理会员</span>
|
||||
<span class="text-xs text-gray-500">有效期至 {{ formatExpiryTime(ExpiryTime) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<img src="@/assets/images/me/right.png" class="w-4 h-4" alt="右箭头" />
|
||||
</button>
|
||||
</template>
|
||||
<button
|
||||
class="w-full flex items-center justify-between px-6 py-4 hover:bg-blue-50 transition-colors border-b border-gray-100"
|
||||
@click="toHistory">
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="@/assets/images/me/wdbg.png" class="w-6 h-6" alt="我的报告" />
|
||||
<span class="text-gray-700 font-medium">我的报告</span>
|
||||
</div>
|
||||
<img src="@/assets/images/me/right.png" class="w-4 h-4" alt="右箭头" />
|
||||
</button>
|
||||
<button
|
||||
class="w-full flex items-center justify-between px-6 py-4 hover:bg-blue-50 transition-colors border-b border-gray-100"
|
||||
@click="toApiStore">
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="@/assets/images/me/apisd.png" class="w-6 h-6" alt="API商店" />
|
||||
<span class="text-gray-700 font-medium">API商店</span>
|
||||
</div>
|
||||
<img src="@/assets/images/me/right.png" class="w-4 h-4" alt="右箭头" />
|
||||
</button>
|
||||
<button
|
||||
class="w-full flex items-center justify-between px-6 py-4 hover:bg-blue-50 transition-colors border-b border-gray-100"
|
||||
@click="toCooperation">
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="@/assets/images/me/swhz.png" class="w-6 h-6" alt="商务合作" />
|
||||
<span class="text-gray-700 font-medium">商务合作</span>
|
||||
</div>
|
||||
<img src="@/assets/images/me/right.png" class="w-4 h-4" alt="右箭头" />
|
||||
</button>
|
||||
<button
|
||||
class="w-full flex items-center justify-between px-6 py-4 hover:bg-blue-50 transition-colors border-b border-gray-100"
|
||||
@click="toUserAgreement">
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="@/assets/images/me/yhxy.png" class="w-6 h-6" alt="用户协议" />
|
||||
<span class="text-gray-700 font-medium">用户协议</span>
|
||||
</div>
|
||||
<img src="@/assets/images/me/right.png" class="w-4 h-4" alt="右箭头" />
|
||||
</button>
|
||||
<button
|
||||
class="w-full flex items-center justify-between px-6 py-4 hover:bg-blue-50 transition-colors border-b border-gray-100"
|
||||
@click="toPrivacyPolicy">
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="@/assets/images/me/yszc.png" class="w-6 h-6" alt="隐私政策" />
|
||||
<span class="text-gray-700 font-medium">隐私政策</span>
|
||||
</div>
|
||||
<img src="@/assets/images/me/right.png" class="w-4 h-4" alt="右箭头" />
|
||||
</button>
|
||||
<button
|
||||
class="w-full flex items-center justify-between px-6 py-4 hover:bg-blue-50 transition-colors"
|
||||
@click="toService">
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="@/assets/images/me/lxkf.png" class="w-6 h-6" alt="联系客服" />
|
||||
<span class="text-gray-700 font-medium">联系客服</span>
|
||||
</div>
|
||||
<img src="@/assets/images/me/right.png" class="w-4 h-4" alt="右箭头" />
|
||||
</button>
|
||||
<button v-if="isLoggedIn && !isWeChat"
|
||||
class="w-full flex items-center justify-between px-6 py-4 hover:bg-red-50 transition-colors"
|
||||
@click="handleLogout">
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="@/assets/images/me/tcdl.png" class="w-6 h-6" alt="退出登录" />
|
||||
<span class="text-gray-700 font-medium">退出登录</span>
|
||||
</div>
|
||||
<img src="@/assets/images/me/right.png" class="w-4 h-4" alt="右箭头" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { storeToRefs } from "pinia";
|
||||
import { ref, computed, onBeforeMount } from "vue";
|
||||
const router = useRouter();
|
||||
import headShot from "@/assets/images/head_shot.webp";
|
||||
import { useAgentStore } from "@/stores/agentStore";
|
||||
import { useUserStore } from "@/stores/userStore";
|
||||
import { useEnv } from "@/composables/useEnv";
|
||||
import { useDialogStore } from "@/stores/dialogStore";
|
||||
import useApiFetch from "@/composables/useApiFetch";
|
||||
const agentStore = useAgentStore();
|
||||
const userStore = useUserStore();
|
||||
const dialogStore = useDialogStore();
|
||||
const { isAgent, level, ExpiryTime } = storeToRefs(agentStore);
|
||||
const { userName, userAvatar, isLoggedIn, mobile } = storeToRefs(userStore);
|
||||
const { isWeChat } = useEnv();
|
||||
|
||||
const levelNames = {
|
||||
normal: "普通代理",
|
||||
"": "普通代理",
|
||||
VIP: "VIP代理",
|
||||
SVIP: "SVIP代理",
|
||||
};
|
||||
|
||||
const levelText = {
|
||||
normal: "基础代理特权",
|
||||
"": "基础代理特权",
|
||||
VIP: "高级代理特权",
|
||||
SVIP: "尊享代理特权",
|
||||
};
|
||||
|
||||
const levelGradient = computed(() => ({
|
||||
border: {
|
||||
normal: "bg-gradient-to-r from-gray-300 to-gray-400",
|
||||
"": "bg-gradient-to-r from-gray-300 to-gray-400",
|
||||
VIP: "bg-gradient-to-r from-yellow-400 to-amber-500",
|
||||
SVIP: "bg-gradient-to-r from-purple-400 to-pink-400 shadow-[0_0_15px_rgba(163,51,200,0.2)]",
|
||||
}[level.value],
|
||||
|
||||
badge: {
|
||||
normal: "bg-gradient-to-r from-gray-500 to-gray-600",
|
||||
"": "bg-gradient-to-r from-gray-500 to-gray-600",
|
||||
VIP: "bg-gradient-to-r from-yellow-500 to-amber-600",
|
||||
SVIP: "bg-gradient-to-r from-purple-500 to-pink-500",
|
||||
}[level.value],
|
||||
|
||||
text: {
|
||||
normal: "text-gray-600",
|
||||
"": "text-gray-600",
|
||||
VIP: "text-amber-600",
|
||||
SVIP: "text-purple-600",
|
||||
}[level.value],
|
||||
}));
|
||||
|
||||
const maskName = (name) => {
|
||||
if (!name || name.length < 11) return name;
|
||||
return name.substring(0, 3) + "****" + name.substring(7);
|
||||
};
|
||||
|
||||
function toHistory() {
|
||||
router.push(`/historyQuery`);
|
||||
}
|
||||
function toCooperation() {
|
||||
window.location.href = "https://www.tianyuandata.com";
|
||||
}
|
||||
function toApiStore() {
|
||||
window.location.href = "https://www.tianyuanapi.com/";
|
||||
}
|
||||
function toUserAgreement() {
|
||||
router.push(`/userAgreement`);
|
||||
}
|
||||
|
||||
function toPrivacyPolicy() {
|
||||
router.push(`/privacyPolicy`); // 新增隐私政策路由
|
||||
}
|
||||
|
||||
|
||||
function redirectToLogin() {
|
||||
router.push(`/login`);
|
||||
}
|
||||
|
||||
function handleLogout() {
|
||||
// 改进的存储管理
|
||||
localStorage.removeItem("token");
|
||||
localStorage.removeItem("refreshAfter");
|
||||
localStorage.removeItem("accessExpire");
|
||||
localStorage.removeItem("userInfo");
|
||||
localStorage.removeItem("agentInfo");
|
||||
|
||||
// 重置状态
|
||||
userStore.resetUser();
|
||||
agentStore.resetAgent();
|
||||
|
||||
location.reload();
|
||||
}
|
||||
const toBigData = () => {
|
||||
window.location.href = "https://www.tybigdata.com/";
|
||||
};
|
||||
function handleCancelAccount() {
|
||||
// 账号注销功能
|
||||
if (confirm("注销账号后，您的所有数据将被清除且无法恢复，确定要继续吗？")) {
|
||||
useApiFetch("/user/cancelOut")
|
||||
.post()
|
||||
.json()
|
||||
.then(({ data, error }) => {
|
||||
if (!error && data.value && data.value.code === 200) {
|
||||
alert("账号已注销");
|
||||
handleLogout();
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("注销账号失败:", error);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function toService() {
|
||||
window.location.href =
|
||||
"https://work.weixin.qq.com/kfid/kfc5c19b2b93a5e73b9"; // 跳转到客服页面
|
||||
}
|
||||
|
||||
const toVipConfig = () => {
|
||||
router.push({ name: "agentVipConfig" });
|
||||
};
|
||||
|
||||
const toVipRenewal = () => {
|
||||
router.push(`/agent/vipApply`);
|
||||
};
|
||||
|
||||
function formatExpiryTime(expiryTimeStr) {
|
||||
if (!expiryTimeStr) return "未知";
|
||||
// 假设expiryTimeStr格式是 "YYYY-MM-DD HH:MM:SS"
|
||||
// 只返回日期部分 "YYYY-MM-DD"
|
||||
return expiryTimeStr.split(" ")[0];
|
||||
}
|
||||
|
||||
const getDefaultAvatar = () => {
|
||||
if (!isAgent.value) return headShot;
|
||||
|
||||
switch (level.value) {
|
||||
case "normal":
|
||||
case "":
|
||||
return "/image/shot_nonal.png";
|
||||
case "VIP":
|
||||
return "/image/shot_vip.png";
|
||||
case "SVIP":
|
||||
return "/image/shot_svip.png";
|
||||
default:
|
||||
return headShot;
|
||||
}
|
||||
};
|
||||
|
||||
const showBindPhoneDialog = () => {
|
||||
dialogStore.openBindPhone();
|
||||
};
|
||||
|
||||
onBeforeMount(() => {
|
||||
// 获取存储的用户和代理信息
|
||||
const userInfo = localStorage.getItem("userInfo");
|
||||
if (userInfo) {
|
||||
try {
|
||||
const parsedUserInfo = JSON.parse(userInfo);
|
||||
userStore.updateUserInfo(parsedUserInfo);
|
||||
} catch (e) {
|
||||
console.error("解析用户信息失败", e);
|
||||
}
|
||||
}
|
||||
|
||||
const agentInfo = localStorage.getItem("agentInfo");
|
||||
if (agentInfo) {
|
||||
try {
|
||||
const parsedAgentInfo = JSON.parse(agentInfo);
|
||||
agentStore.updateAgentInfo(parsedAgentInfo);
|
||||
} catch (e) {
|
||||
console.error("解析代理信息失败", e);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
186
src/views/NotFound.vue
Normal file
186
src/views/NotFound.vue
Normal file
@@ -0,0 +1,186 @@
|
||||
<template>
|
||||
<div class="not-found">
|
||||
<div class="not-found-content">
|
||||
<h1>404</h1>
|
||||
<h2>页面未找到</h2>
|
||||
<p>抱歉，您访问的页面不存在或已被移除。</p>
|
||||
<div class="suggestions">
|
||||
<h3>您可以尝试：</h3>
|
||||
<ul>
|
||||
<li><router-link to="/">返回首页</router-link></li>
|
||||
<li><router-link to="/help">查看帮助中心</router-link></li>
|
||||
<li><router-link to="/service">联系客服</router-link></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<router-link to="/" class="home-link">返回首页</router-link>
|
||||
<router-link to="/help" class="help-link">帮助中心</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted } from 'vue'
|
||||
import { useSEO } from '@/composables/useSEO'
|
||||
|
||||
// SEO优化
|
||||
const { updateSEO } = useSEO()
|
||||
|
||||
onMounted(() => {
|
||||
updateSEO({
|
||||
title: '404 - 页面未找到 | 天远查',
|
||||
description: '抱歉，您访问的页面不存在。天远查专业大数据风险管控平台，提供大数据风险报告查询、婚姻状况查询、个人信用评估等服务。',
|
||||
keywords: '404, 页面未找到, 天远查, 大数据风险管控',
|
||||
url: 'https://www.zhinengcha.cn/404'
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.not-found {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.not-found-content {
|
||||
background: white;
|
||||
padding: 60px 40px;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
||||
text-align: center;
|
||||
max-width: 600px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.not-found h1 {
|
||||
font-size: 120px;
|
||||
color: #667eea;
|
||||
margin: 0 0 20px 0;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.not-found h2 {
|
||||
font-size: 32px;
|
||||
color: #333;
|
||||
margin: 0 0 20px 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.not-found p {
|
||||
font-size: 18px;
|
||||
color: #666;
|
||||
margin-bottom: 30px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.suggestions {
|
||||
margin: 30px 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.suggestions h3 {
|
||||
font-size: 20px;
|
||||
color: #333;
|
||||
margin-bottom: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.suggestions ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.suggestions li {
|
||||
margin: 10px 0;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.suggestions li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.suggestions a {
|
||||
color: #667eea;
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.suggestions a:hover {
|
||||
color: #5a6fd8;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.home-link, .help-link {
|
||||
display: inline-block;
|
||||
padding: 15px 30px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
border-radius: 50px;
|
||||
transition: all 0.3s ease;
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
.home-link {
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
|
||||
.home-link:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.help-link {
|
||||
color: #667eea;
|
||||
background: white;
|
||||
border: 2px solid #667eea;
|
||||
}
|
||||
|
||||
.help-link:hover {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.not-found-content {
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.not-found h1 {
|
||||
font-size: 80px;
|
||||
}
|
||||
|
||||
.not-found h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.home-link, .help-link {
|
||||
width: 100%;
|
||||
max-width: 200px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
529
src/views/PaymentResult.vue
Normal file
529
src/views/PaymentResult.vue
Normal file
@@ -0,0 +1,529 @@
|
||||
<template>
|
||||
<div class="payment-result-container flex flex-col items-center p-6">
|
||||
<!-- 加载动画，验证支付结果时显示 -->
|
||||
<div v-if="isLoading" class="w-full">
|
||||
<div class="flex flex-col items-center justify-center py-10">
|
||||
<van-loading size="48px" color="#1989fa" />
|
||||
<p class="mt-4 text-gray-600 text-lg">正在处理支付结果...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 支付结果展示 -->
|
||||
<div v-else class="w-full">
|
||||
<!-- 支付成功 -->
|
||||
<div v-if="paymentStatus === 'paid'" class="success-result">
|
||||
<div class="success-animation mb-6">
|
||||
<van-icon name="checked" size="64" color="#07c160" />
|
||||
<div class="success-ring"></div>
|
||||
</div>
|
||||
|
||||
<h1 class="text-2xl font-bold text-center text-gray-800 mb-4">
|
||||
支付成功
|
||||
</h1>
|
||||
|
||||
<div class="payment-info bg-white rounded-lg shadow-md p-6 mb-6 w-full">
|
||||
<div class="flex justify-between mb-4">
|
||||
<span class="text-gray-600">订单编号</span>
|
||||
<span class="text-gray-800">{{ orderNo }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-600">支付类型</span>
|
||||
<span class="text-gray-800">{{
|
||||
paymentType === "agent_vip"
|
||||
? "代理会员"
|
||||
: "查询服务"
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="paymentType === 'agent_vip'" class="text-center text-gray-600 mb-4">恭喜你成为高级代理会员，享受更多权益</div>
|
||||
|
||||
<div class="action-buttons grid grid-cols-1 gap-4">
|
||||
<van-button block type="primary" class="rounded-lg" @click="handleNavigation">
|
||||
{{
|
||||
paymentType === "agent_vip"
|
||||
? "查看会员权益"
|
||||
: "查看查询结果"
|
||||
}}
|
||||
</van-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 退款状态 -->
|
||||
<div v-else-if="paymentStatus === 'refunded'" class="refund-result">
|
||||
<div v-if="paymentType === 'query'" class="success-animation mb-6">
|
||||
<van-icon name="checked" size="64" color="#07c160" />
|
||||
<div class="success-ring"></div>
|
||||
</div>
|
||||
<div v-else class="info-animation mb-6">
|
||||
<van-icon name="info-o" size="64" color="#1989fa" />
|
||||
<div class="info-ring"></div>
|
||||
</div>
|
||||
|
||||
<h1 class="text-2xl font-bold text-center text-gray-800 mb-4">
|
||||
{{ paymentType === "query" ? "已处理" : "订单已退款" }}
|
||||
</h1>
|
||||
|
||||
<div class="payment-info bg-white rounded-lg shadow-md p-6 mb-6 w-full">
|
||||
<div class="flex justify-between mb-4">
|
||||
<span class="text-gray-600">订单编号</span>
|
||||
<span class="text-gray-800">{{ orderNo }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between mb-4">
|
||||
<span class="text-gray-600">支付类型</span>
|
||||
<span class="text-gray-800">{{
|
||||
paymentType === "agent_vip"
|
||||
? "代理会员"
|
||||
: "查询服务"
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-600">订单状态</span>
|
||||
<span class="text-blue-600">已退款</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="paymentType === 'query'" class="action-buttons grid grid-cols-1 gap-4">
|
||||
<van-button block type="primary" class="rounded-lg" @click="handleNavigation">
|
||||
查看查询结果
|
||||
</van-button>
|
||||
</div>
|
||||
|
||||
<div v-else class="message-box p-4 bg-blue-50 rounded-lg mb-6">
|
||||
<p class="text-center text-blue-800">
|
||||
您的代理会员费用已退款，如有疑问请联系客服。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div v-if="paymentType === 'agent_vip'" class="action-buttons grid grid-cols-1 gap-4">
|
||||
<van-button block type="primary" class="rounded-lg" @click="contactService">
|
||||
联系客服
|
||||
</van-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 其他状态（待支付、失败、关闭） -->
|
||||
<div v-else class="other-result">
|
||||
<div class="info-animation mb-6">
|
||||
<van-icon :name="getStatusIcon" size="64" :color="getStatusColor" />
|
||||
<div class="info-ring" :class="getRingClass"></div>
|
||||
</div>
|
||||
|
||||
<h1 class="text-2xl font-bold text-center text-gray-800 mb-4">
|
||||
{{ statusText }}
|
||||
</h1>
|
||||
|
||||
<!-- 添加轮询状态提示 -->
|
||||
<div v-if="paymentStatus === 'pending'" class="text-center text-gray-500 mb-4">
|
||||
<p>正在等待支付结果，请稍候...</p>
|
||||
<p class="text-sm mt-1">
|
||||
已等待
|
||||
{{
|
||||
Math.floor(
|
||||
(pollingCount * getPollingInterval) / 1000
|
||||
)
|
||||
}}
|
||||
秒
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="payment-info bg-white rounded-lg shadow-md p-6 mb-6 w-full">
|
||||
<div class="flex justify-between mb-4">
|
||||
<span class="text-gray-600">订单编号</span>
|
||||
<span class="text-gray-800">{{ orderNo }}</span>
|
||||
</div>
|
||||
<div v-if="!isApiError" class="flex justify-between mb-4">
|
||||
<span class="text-gray-600">支付类型</span>
|
||||
<span class="text-gray-800">{{
|
||||
paymentType === "agent_vip"
|
||||
? "代理会员"
|
||||
: "查询服务"
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-gray-600">订单状态</span>
|
||||
<span :class="getStatusTextClass">{{
|
||||
statusText
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message-box p-4 bg-blue-50 rounded-lg mb-6">
|
||||
<p class="text-center" :class="getMessageClass">
|
||||
{{ statusMessage }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="action-buttons grid grid-cols-2 gap-4">
|
||||
<van-button block type="default" class="rounded-lg" @click="goHome">
|
||||
返回首页
|
||||
</van-button>
|
||||
<van-button block type="primary" class="rounded-lg" @click="contactService">
|
||||
联系客服
|
||||
</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
computed,
|
||||
onBeforeMount,
|
||||
defineExpose,
|
||||
onBeforeUnmount,
|
||||
} from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { useAgentStore } from "@/stores/agentStore";
|
||||
import { useUserStore } from "@/stores/userStore";
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const orderNo = ref("");
|
||||
const agentStore = useAgentStore();
|
||||
const userStore = useUserStore();
|
||||
|
||||
// 状态变量
|
||||
const isLoading = ref(true);
|
||||
const paymentResult = ref(null);
|
||||
const paymentType = ref("");
|
||||
const paymentStatus = ref("");
|
||||
const isApiError = ref(false);
|
||||
const pollingInterval = ref(null);
|
||||
const pollingCount = ref(0);
|
||||
const maxPollingCount = 30; // 最大轮询次数
|
||||
const baseInterval = 2000; // 基础轮询间隔（2秒）
|
||||
|
||||
// 计算属性
|
||||
const statusText = computed(() => {
|
||||
if (isApiError.value) {
|
||||
return "系统繁忙";
|
||||
}
|
||||
|
||||
switch (paymentStatus.value) {
|
||||
case "pending":
|
||||
return "正在支付";
|
||||
case "failed":
|
||||
return "支付失败";
|
||||
case "closed":
|
||||
return "订单已关闭";
|
||||
default:
|
||||
return "处理中";
|
||||
}
|
||||
});
|
||||
|
||||
const statusMessage = computed(() => {
|
||||
if (isApiError.value) {
|
||||
return "系统正在维护或网络繁忙，请稍后再试，或联系客服确认订单状态。";
|
||||
}
|
||||
|
||||
switch (paymentStatus.value) {
|
||||
case "pending":
|
||||
return "您的订单正在支付，请稍后";
|
||||
case "failed":
|
||||
return "支付未成功，您可以返回重新支付，或联系客服确认详情。";
|
||||
case "closed":
|
||||
return "订单已关闭，如有疑问请联系客服。";
|
||||
default:
|
||||
return "系统正在处理您的订单，如有疑问请联系客服。";
|
||||
}
|
||||
});
|
||||
|
||||
// 状态图标
|
||||
const getStatusIcon = computed(() => {
|
||||
if (isApiError.value) {
|
||||
return "warning-o";
|
||||
}
|
||||
return paymentStatus.value === "pending" ? "clock-o" : "close";
|
||||
});
|
||||
|
||||
// 状态颜色
|
||||
const getStatusColor = computed(() => {
|
||||
if (isApiError.value) {
|
||||
return "#ff9800"; // 橙色警告
|
||||
}
|
||||
return paymentStatus.value === "pending" ? "#ff976a" : "#ee0a24";
|
||||
});
|
||||
|
||||
// 环形样式类
|
||||
const getRingClass = computed(() => {
|
||||
if (isApiError.value) {
|
||||
return "api-error-ring";
|
||||
}
|
||||
return {
|
||||
"pending-ring": paymentStatus.value === "pending",
|
||||
"failed-ring": paymentStatus.value === "failed",
|
||||
"closed-ring": paymentStatus.value === "closed",
|
||||
};
|
||||
});
|
||||
|
||||
// 状态文本样式
|
||||
const getStatusTextClass = computed(() => {
|
||||
if (isApiError.value) {
|
||||
return "text-amber-600";
|
||||
}
|
||||
return {
|
||||
"text-orange-500": paymentStatus.value === "pending",
|
||||
"text-red-500":
|
||||
paymentStatus.value === "failed" ||
|
||||
paymentStatus.value === "closed",
|
||||
};
|
||||
});
|
||||
|
||||
// 消息文本样式
|
||||
const getMessageClass = computed(() => {
|
||||
if (isApiError.value) {
|
||||
return "text-amber-800";
|
||||
}
|
||||
return {
|
||||
"text-orange-700": paymentStatus.value === "pending",
|
||||
"text-red-700":
|
||||
paymentStatus.value === "failed" ||
|
||||
paymentStatus.value === "closed",
|
||||
};
|
||||
});
|
||||
|
||||
// 计算轮询间隔时间（渐进式增加）
|
||||
const getPollingInterval = computed(() => {
|
||||
// 每5次轮询增加1秒，最大间隔10秒
|
||||
const increment = Math.floor(pollingCount.value / 5);
|
||||
return Math.min(baseInterval + increment * 1000, 10000);
|
||||
});
|
||||
|
||||
// 检查支付状态
|
||||
const checkPaymentStatus = async () => {
|
||||
if (pollingCount.value >= maxPollingCount) {
|
||||
// 超过最大轮询次数，停止轮询
|
||||
stopPolling();
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const { data, error } = await useApiFetch(`/pay/check`)
|
||||
.post({
|
||||
order_no: orderNo.value,
|
||||
})
|
||||
.json();
|
||||
|
||||
if (data.value && !error.value) {
|
||||
paymentResult.value = data.value.data;
|
||||
paymentType.value = data.value.data.type || "";
|
||||
const newStatus = data.value.data.status || "";
|
||||
|
||||
// 状态发生变化时更新
|
||||
if (paymentStatus.value !== newStatus) {
|
||||
paymentStatus.value = newStatus;
|
||||
|
||||
// 对于查询类型，如果状态是已支付或已退款，直接跳转
|
||||
if (
|
||||
paymentType.value === "query" &&
|
||||
(newStatus === "paid" || newStatus === "refunded")
|
||||
) {
|
||||
stopPolling();
|
||||
router.replace({
|
||||
path: "/report",
|
||||
query: { orderNo: orderNo.value },
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 如果状态不是 pending，停止轮询
|
||||
if (newStatus !== "pending") {
|
||||
stopPolling();
|
||||
}
|
||||
}
|
||||
} else {
|
||||
console.error("API调用失败:", error.value);
|
||||
// 不要立即停止轮询，继续尝试
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("验证支付状态失败:", err);
|
||||
// 不要立即停止轮询，继续尝试
|
||||
} finally {
|
||||
pollingCount.value++;
|
||||
isLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 开始轮询
|
||||
const startPolling = () => {
|
||||
if (pollingInterval.value) return;
|
||||
|
||||
pollingCount.value = 0;
|
||||
const poll = () => {
|
||||
checkPaymentStatus();
|
||||
if (
|
||||
paymentStatus.value === "pending" &&
|
||||
pollingCount.value < maxPollingCount
|
||||
) {
|
||||
pollingInterval.value = setTimeout(poll, getPollingInterval.value);
|
||||
}
|
||||
};
|
||||
poll();
|
||||
};
|
||||
|
||||
// 停止轮询
|
||||
const stopPolling = () => {
|
||||
if (pollingInterval.value) {
|
||||
clearTimeout(pollingInterval.value);
|
||||
pollingInterval.value = null;
|
||||
}
|
||||
};
|
||||
|
||||
// 在组件挂载前验证支付结果
|
||||
onBeforeMount(async () => {
|
||||
const query = new URLSearchParams(window.location.search);
|
||||
orderNo.value = query.get("out_trade_no");
|
||||
if (!orderNo.value) {
|
||||
orderNo.value = route.query.orderNo;
|
||||
}
|
||||
if (!orderNo.value) {
|
||||
router.push("/");
|
||||
return;
|
||||
}
|
||||
|
||||
// 检测是否为 iOS 浏览器且没有上级页面
|
||||
const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
|
||||
const hasHistory = window.history.length > 1;
|
||||
|
||||
if (isIOS && !hasHistory) {
|
||||
// iOS 浏览器且没有上级页面，关闭当前标签页
|
||||
window.close();
|
||||
return;
|
||||
}
|
||||
// 首次检查支付状态
|
||||
await checkPaymentStatus();
|
||||
|
||||
// 如果状态是 pending，开始轮询
|
||||
if (paymentStatus.value === "pending") {
|
||||
startPolling();
|
||||
}
|
||||
});
|
||||
|
||||
// 组件卸载前清理轮询
|
||||
onBeforeUnmount(() => {
|
||||
stopPolling();
|
||||
});
|
||||
|
||||
// 处理导航逻辑
|
||||
function handleNavigation() {
|
||||
if (paymentType.value === "agent_vip") {
|
||||
// 跳转到代理会员页面
|
||||
router.replace("/agent");
|
||||
agentStore.fetchAgentStatus();
|
||||
userStore.fetchUserInfo();
|
||||
} else {
|
||||
// 跳转到查询结果页面
|
||||
router.replace({
|
||||
path: "/report",
|
||||
query: { orderNo: orderNo.value },
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 返回首页
|
||||
function goHome() {
|
||||
router.replace("/");
|
||||
}
|
||||
|
||||
// 联系客服
|
||||
function contactService() {
|
||||
// 可以替换为实际的客服联系逻辑，如打开聊天窗口或跳转到客服页面
|
||||
window.location.href =
|
||||
"https://work.weixin.qq.com/kfid/kfc5c19b2b93a5e73b9"; // 跳转到客服页面
|
||||
}
|
||||
|
||||
// 暴露方法和数据供父组件或路由调用
|
||||
defineExpose({
|
||||
paymentResult,
|
||||
paymentType,
|
||||
paymentStatus,
|
||||
handleNavigation,
|
||||
stopPolling, // 暴露停止轮询方法
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.payment-result-container {
|
||||
min-height: 80vh;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.success-animation,
|
||||
.info-animation {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 2rem auto;
|
||||
}
|
||||
|
||||
.success-ring,
|
||||
.info-ring,
|
||||
.pending-ring,
|
||||
.failed-ring,
|
||||
.closed-ring,
|
||||
.api-error-ring {
|
||||
position: absolute;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
animation: pulse 1.5s infinite;
|
||||
}
|
||||
|
||||
.success-ring {
|
||||
border: 2px solid #07c160;
|
||||
}
|
||||
|
||||
.info-ring {
|
||||
border: 2px solid #1989fa;
|
||||
}
|
||||
|
||||
.pending-ring {
|
||||
border: 2px solid #ff976a;
|
||||
}
|
||||
|
||||
.failed-ring,
|
||||
.closed-ring {
|
||||
border: 2px solid #ee0a24;
|
||||
}
|
||||
|
||||
.api-error-ring {
|
||||
border: 2px solid #ff9800;
|
||||
/* 橙色警告 */
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
transform: scale(0.95);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: scale(1.1);
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(0.95);
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.success-result,
|
||||
.refund-result,
|
||||
.other-result {
|
||||
animation: fadeIn 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
458
src/views/PrivacyPolicy.vue
Normal file
458
src/views/PrivacyPolicy.vue
Normal file
@@ -0,0 +1,458 @@
|
||||
<script setup></script>
|
||||
|
||||
<template>
|
||||
<div class="p-4">
|
||||
<!-- 页面标题 -->
|
||||
<div class="mb-4 text-center text-lg font-bold">隐私政策</div>
|
||||
|
||||
<!-- 内容主体 -->
|
||||
<div class="indent-[2em]">
|
||||
<div class="mb-4">
|
||||
<!-- 开篇说明 -->
|
||||
<div class="mb-2 font-bold leading-relaxed">
|
||||
您的信任对我们非常重要
|
||||
</div>
|
||||
<div class="leading-relaxed">
|
||||
我们深知个人信息对您的重要性，我们将按法律法规要求，采取相应安全保护措施，尽力保护您的个人信息安全可控。
|
||||
有鉴于此，广西福铭网络科技有限公司（以下简称“我们”或“天远查”）作为天远查产品及服务的提供者制定本《隐私政策》（下称“本政策”）并提醒您：
|
||||
</div>
|
||||
<div class="leading-relaxed">
|
||||
本政策适用于全部天远查产品及服务，如我们关联公司的产品或服务中使用了天远查提供的产品或服务但未设独立的隐私政策的，
|
||||
该部分天远查提供的产品或服务同样适用于本政策。
|
||||
</div>
|
||||
<div class="leading-relaxed">
|
||||
需要特别说明的是，本政策不适用于其他第三方通过网页或天远查客户端直接向您提供的服务（统称“第三方服务”），
|
||||
您向该第三方服务提供者提供的信息不适用于本政策，您在选择使用第三方服务前应充分了解第三方服务的产品功能及隐私保护政策，再选择是否开通功能。
|
||||
</div>
|
||||
<div class="leading-relaxed">
|
||||
在使用天远查产品或服务前，请您务必仔细阅读并透彻理解本政策，在确认充分理解使用相关产品或服务。
|
||||
一旦您开始使用天远查产品或服务，即表示您已充分理解并同意本政策。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-2 font-bold leading-relaxed">第一部分 定义</div>
|
||||
<div class="mb-4">
|
||||
<!-- 第一部分 -->
|
||||
<div class="leading-relaxed">
|
||||
<div>
|
||||
1、天远查服务提供者：是指研发并提供天远查产品和服务法律主体，广西福铭网络科技有限公司（下称“我们”或“天远查”）
|
||||
</div>
|
||||
<div>
|
||||
2、天远查用户：是指注册天远查账户的用户，以下称“您”。
|
||||
</div>
|
||||
<div>
|
||||
3、个人信息：指以电子或者其他方式记录的能够单独或者与其他信息结合识别特定自然人身份或者反映特定自然人活动情况的各种信息。
|
||||
</div>
|
||||
<div>
|
||||
4、个人信息删除：指在实现日常业务功能所涉及的系统中去除个人信息的行为，使其保持不可被检索、访问的状态，具体指产品内的账号注销功能。
|
||||
</div>
|
||||
<div>
|
||||
5、个人信息匿名化：通过对个人信息的加密技术处理，使得个人信息主体无法被识别，且处理后的信息不能被复原的过程。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-2 font-bold leading-relaxed">第二部分 隐私政策</div>
|
||||
<div class="mb-4">
|
||||
<!-- 第一部分 -->
|
||||
<div class="mb-2 font-bold leading-relaxed">
|
||||
一、我们如何收集您的个人信息
|
||||
</div>
|
||||
<div class="leading-relaxed">
|
||||
为了向您及天远查企业用户提供天远查服务，维护天远查服务的正常运行，改进及优化我们的服务体验并保障您的账号安全，
|
||||
我们会出于本政策下述目的及方式收集您在注册、使用天远查服务时主动提供、授权提供或基于您使用天远查服务时产生的信息：
|
||||
</div>
|
||||
|
||||
<!-- 注册天远查用户信息 -->
|
||||
<div class="mb-4">
|
||||
<div class="mb-2 font-bold leading-relaxed">
|
||||
（一）注册天远查用户信息
|
||||
</div>
|
||||
<div class="leading-relaxed">
|
||||
为注册成为天远查用户，以便我们为您提供天远查服务，诸如数据查询、视频查看等功能，
|
||||
您需要提供您的手机号码及短信验证码以注册并创建天远查账号，否则您将不能使用天远查服务。
|
||||
</div>
|
||||
<div class="leading-relaxed">
|
||||
如果您仅需使用浏览、搜索天远查网页展示的产品、功能及服务介绍，您不需要注册成为天远查用户并提供上述信息。
|
||||
</div>
|
||||
<div class="leading-relaxed">
|
||||
如您的账号是注册在企业下的关联账号，当您所在企业用户注销天远查账户时，我们将会匿名化处理或删除您在该组织的相关个人信息，
|
||||
但您作为天远查个人用户的个人信息仍将保留，除非您主动注销天远查账户。
|
||||
</div>
|
||||
<div class="leading-relaxed">
|
||||
在经过用户授权同意的情况下，我司需要获取用户的手机号码以便开展相应业务。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 使用天远查服务过程中收集信息 -->
|
||||
<div class="mb-4">
|
||||
<div class="mb-2 font-bold leading-relaxed">
|
||||
（二）使用天远查服务过程中收集信息
|
||||
</div>
|
||||
<div class="leading-relaxed">
|
||||
当您在使用天远查服务过程中，为向您提供您需求的天远查软件服务、交互展示、搜索结果、识别账号异常状态，维护天远查服务的正常运行，改进及优化您对天远查服务的体验并保障您的账号安全，包括您使用天远查服务以及使用方式的信息，并将这些信息进行关联：
|
||||
</div>
|
||||
<div class="leading-relaxed">
|
||||
<div>1、日志信息：</div>
|
||||
<div>
|
||||
当您使用我们的网站或客户端提供的产品或服务时，我们会自动收集您对我们服务的详细使用情况，作为有关网络日志保存。例如您的搜索查询内容、IP地址、使用的语言、访问日期和时间、您访问的网页记录、日志信息。
|
||||
</div>
|
||||
<div>
|
||||
请注意，单独的设备信息、日志信息是无法识别特定自然人身份的信息。如果我们将这类非个人信息与其他信息结合用于识别特定自然人身份，或者将其与个人信息结合使用，则在结合使用期间，这类非个人信息将有可能被视为个人信息，除取得您授权或法律法规另有规定外，我们会将该类个人信息做匿名化、去标识化处理。
|
||||
</div>
|
||||
</div>
|
||||
<div class="leading-relaxed">
|
||||
<div>2、您向我们提供的信息：</div>
|
||||
<div>
|
||||
在服务使用过程中，特别是在申请提现、实名认证或佣金结算时，您需要提供包括但不限于姓名、身份证号、银行卡号、手机号、税务身份信息等个人资料。
|
||||
您同意我们为履行合同义务、税务申报、身份核验、财务结算等必要目的，收集、使用、存储并在必要范围内共享该等信息。
|
||||
在进行税务代扣代缴、结算服务时，我们有权将必要信息提供给依法合作的第三方税务服务商、结算服务商，前提是该第三方承担同等信息保护义务。
|
||||
</div>
|
||||
<div>
|
||||
您可以对全能查产品及服务的体验问题反馈，帮助我们更好地了解您使用我们产品或服务的体验和需求，改善我们产品或服务,为此我们会记录您的联系信息、反馈的问题或建议，以便我们进一步联系您反馈您我们的处理意见。
|
||||
为向您提供更好的服务，例如在不同的服务端或设备上提供体验一致的服务和您需求的客服接待，了解产品适配性，识别账号异常状态。
|
||||
</div>
|
||||
</div>
|
||||
<div class="leading-relaxed">
|
||||
<div>3、为您提供安全保障收集信息：</div>
|
||||
<div>
|
||||
为预防、发现、调查欺诈、侵权、危害安全、非法或违反与我们或与我们关联公司的协议、政策或规则的行为，我们可能收集或整合您的用户个人信息、服务使用信息、设备信息、日志信息以及我们关联公司、合作伙伴取得您授权或依据法律共享的信息。
|
||||
您理解并同意，我们向您提供的功能和服务场景是不断迭代升级的，如我们未在上述场景中明示您需要收集的个人信息，我们将会通过页面提示、交互设计等方式另行向您明示信息收集的内容、范围和目的并征得您同意。
|
||||
</div>
|
||||
<div>
|
||||
如我们停止运营天远查产品或服务，我们将及时停止继续收集您个人信息的活动，将停止运营的通知以公告或短信的形式通知您，并依照所适用的法律对所持有的您的个人信息进行删除或匿名化处理。
|
||||
</div>
|
||||
</div>
|
||||
<div class="leading-relaxed">
|
||||
<div>4、手机号码收集及其用途：</div>
|
||||
<div>
|
||||
在您使用天远查服务的过程中，我们可能会要求您提供手机号码。我们收集您的手机号码，主要是为了向您发送重要的通知、服务更新、账户安全信息、促销活动、服务相关的短信等。为了确保您能及时获得关于您账号安全、产品更新和优化、系统维护等信息，我们可能会向您发送有关服务变更、功能更新、版本升级等通知，确保您能够持续享受我们的产品和服务。
|
||||
</div>
|
||||
<div>
|
||||
此外，您的手机号码还可能用于为您提供个性化的短信推广内容，帮助您了解我们新推出的服务、产品或活动优惠。我们承诺，不会在未经您明确同意的情况下，将您的手机号码用于任何与服务相关以外的用途，且不会将您的信息出售或租赁给第三方。为了保障您的权益，您可以随时通过设置页面或联系客户服务停止接收短信通知或推广信息。如果您选择取消订阅短信通知或推广，您仍将继续收到与账户安全、系统通知等相关的重要信息。
|
||||
</div>
|
||||
<div>
|
||||
我们会采取严格的措施保护您的手机号码不被滥用，包括采用加密存储、定期审查访问权限等技术和管理手段，以确保您的个人信息安全。同时，我们也会根据适用的法律法规，在您停止使用我们的服务或终止您的账户时，删除或匿名化处理您的手机号码及其他相关信息。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<!-- 第二部分 -->
|
||||
<div class="mb-2 font-bold leading-relaxed">
|
||||
二、我们如何使用信息
|
||||
</div>
|
||||
<div class="leading-relaxed">
|
||||
收集您的信息是为了向您提供服务及提升服务质量，为了实现这一目的，我们会把您的信息用于下列用途：
|
||||
</div>
|
||||
<div class="leading-relaxed">
|
||||
<div>
|
||||
（1）向您提供您使用的天远查产品或服务，并维护、改进、优化这些服务及服务体验；
|
||||
</div>
|
||||
<div>
|
||||
（2）为预防、发现、调查欺诈、侵权、危害安全、非法或违反与我们或与我们关联公司的协议、政策或规则的行为，保护您、其他用户或公众以及我们或我们关联公司的合法权益，我们会使用或整合您的个人信息、服务使用信息、设备信息、日志信息以及我们关联公司、合作伙伴取得您授权或依据法律共享的信息，来综合判断您的操作风险、检测及防范安全事件，并依法采取必要的记录、审计、分析、处置措施；
|
||||
</div>
|
||||
<div>（3）经您许可的其他用途。</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<!-- 第三部分 -->
|
||||
<div class="mb-2 font-bold leading-relaxed">
|
||||
三、我们如何使用Cookie 和同类技术
|
||||
</div>
|
||||
<div class="leading-relaxed">
|
||||
为使您获得更轻松的访问体验，您使用天远查产品或服务时，我们可能会通过采用各种技术收集和存储您访问天远查服务的相关数据，
|
||||
在您访问或再次访问天远查服务时，我们能识别您的身份，并通过分析数据为您提供更好更多的服务。
|
||||
</div>
|
||||
<div class="leading-relaxed">
|
||||
包括使用小型数据文件识别您的身份，这么做是为了解您的使用习惯，帮您省去重复输入账户信息的步骤，或者帮助判断您的账户安全。
|
||||
这些数据文件可能是Cookie、Flash
|
||||
Cookie，或您的浏览器或关联应用程序提供的其他本地存储（统称“Cookie”）。
|
||||
</div>
|
||||
<div class="leading-relaxed">
|
||||
请您理解，我们的某些服务只能通过使用Cookie才可得到实现。如果您的浏览器或浏览器附加服务允许，
|
||||
您可以修改对Cookie的接受程度或者拒绝天远查的Cookie，但拒绝天远查的Cookie在某些情况下您可能无法使用依赖于cookies的天远查服务的部分功能。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<!-- 第四部分 -->
|
||||
<div class="mb-2 font-bold leading-relaxed">
|
||||
四、我们如何共享、转让、公开披露您的信息
|
||||
</div>
|
||||
|
||||
<!-- 共享 -->
|
||||
<div class="mb-2 font-semibold">(一) 共享</div>
|
||||
<div class="leading-relaxed">
|
||||
我们不会和其他公司、组织和个人共享您的个人信息，但以下情况除外：
|
||||
</div>
|
||||
<div class="leading-relaxed">
|
||||
<div>
|
||||
（1）在获取您同意的情况下共享：获得您的明确同意后，我们会与其他方共享您的个人信息。
|
||||
</div>
|
||||
<div>
|
||||
（2）在法定情形下的共享：我们可能会根据法律法规规定、诉讼争议解决需要，或按行政、司法机关依法提出的要求，对外共享您的个人信息。
|
||||
</div>
|
||||
<div>
|
||||
（3）只有透露您的资料，才能提供您所要求的第三方产品和服务，在您通过天远查客户端购买查询服务的，您同意天远查向实际产品提供者提供您的身份信息，包括真实姓名和身份证号等。为了提升实人认证的准确性，您同意第三方公司仅限于个人信息进行验证相关服务，将您提供的个人信息与法律法规允许的机构或政府机关授权的机构的数据进行校验。
|
||||
</div>
|
||||
<div>
|
||||
（4）在您被他人投诉侵犯知识产权或其他合法权利时，需要向投诉人披露您的必要资料，以便进行投诉处理的；
|
||||
</div>
|
||||
<div>
|
||||
（5）天远查服务可能含有其他网站的链接。除法律另有规定外，天远查对其他网站的隐私保护措施不负相应法律责任。我们可能在需要的时候增加商业伙伴，但是提供给他们的将仅是综合信息，我们将不会公开您的个人信息。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 转让 -->
|
||||
<div class="mb-2 font-semibold">(二) 转让</div>
|
||||
<div class="leading-relaxed">
|
||||
我们不会将您的个人信息转让给任何公司、组织和个人，但以下情况除外：
|
||||
</div>
|
||||
<div class="leading-relaxed">
|
||||
<div>
|
||||
（1）在获取明确同意的情况下转让：获得您的明确同意后，我们会向其他方转让您的个人信息。
|
||||
</div>
|
||||
<div>
|
||||
（2）在天远查发生合并、收购或破产清算情形，或其他涉及合并、收购或破产清算情形时，如涉及到个人信息转让，我们会要求新的持有您个人信息的公司、组织继续受本政策的约束，否则我们将要求该公司、组织和个人重新向您征求授权同意。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 公开披露 -->
|
||||
<div class="mb-2 font-semibold">(三) 公开披露</div>
|
||||
<div class="leading-relaxed">
|
||||
我们仅会在以下情况下，公开披露您的个人信息：
|
||||
</div>
|
||||
<div class="leading-relaxed">
|
||||
<div>
|
||||
（1）获得您明确同意或基于您的主动选择，我们可能会公开披露您的个人信息；
|
||||
</div>
|
||||
<div>
|
||||
（2）如果我们确定您出现违反法律法规或严重违反天远查相关协议规则的情况，或为保护天远查及其关联公司用户或公众的人身财产安全免遭侵害，我们可能依据法律法规或天远查相关协议规则征得您同意的情况下披露关于您的个人信息，包括相关违规行为以及天远查已对您采取的措施。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 特殊情况 -->
|
||||
<div class="mb-2 font-semibold">
|
||||
(四)
|
||||
共享、转让、公开披露个人信息时事先征得授权同意的例外
|
||||
</div>
|
||||
<div class="leading-relaxed">
|
||||
以下情形中，共享、转让、公开披露您的个人信息无需事先征得您的授权同意：
|
||||
</div>
|
||||
<div class="leading-relaxed">
|
||||
<div>（1）与国家安全、国防安全有关的；</div>
|
||||
<div>
|
||||
（2）与公共安全、公共卫生、重大公共利益有关的；
|
||||
</div>
|
||||
<div>
|
||||
（3）与犯罪侦查、起诉、审判和判决执行等有关的；
|
||||
</div>
|
||||
<div>
|
||||
（4）出于维护您或其他个人的生命、财产等重大合法权益但又很难得到本人同意的；
|
||||
</div>
|
||||
<div>（5）您自行向社会公众公开的个人信息；</div>
|
||||
<div>
|
||||
（6）从合法公开披露的信息中收集个人信息的，如合法的新闻报道、政府信息公开等渠道。
|
||||
请您注意，根据法律规定，共享、转让经匿名化处理的个人信息，且确保数据接收方无法复原并重新识别个人信息主体的，不属于个人信息的对外共享、转让及公开披露行为，对此类数据的保存及处理将无需另行向您通知并征得您的同意。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<!-- 第五部分 -->
|
||||
<div class="mb-2 font-bold leading-relaxed">
|
||||
五、我们如何保护您的信息
|
||||
</div>
|
||||
<div class="leading-relaxed">
|
||||
我们会采取各种预防措施来保护您的个人信息，以保障您的个人信息免遭丢失、盗用和误用，以及被擅自取阅、披露、更改或销毁。
|
||||
为确保您个人信息的安全，我们有严格的信息安全规定和流程并严格执行上述措施。
|
||||
</div>
|
||||
<div class="leading-relaxed">
|
||||
天远查建立了全方位、多维度的数据安全管理体系，保证整个天远查各个平台的安全性。
|
||||
我们会采取合理可行的措施，尽力避免收集无关的个人信息，
|
||||
并在限于达成本政策所述目的所需的期限以及所适用法律法规所要求的期限内对您的个人信息进行脱敏处理。
|
||||
在您使用查询过程中所涉及的用户姓名、身份证号、手机号/账号密码信息均采用的是AES加密方式，
|
||||
所有二次输出信息均经过脱敏处理，数据库文件不存储用户明文数据。
|
||||
</div>
|
||||
<div class="leading-relaxed">
|
||||
在不幸发生个人信息安全事件后，我们将按照法律法规的要求（最迟不迟于30个自然日内）向您告知：
|
||||
安全事件的基本情况和可能的影响、我们已采取或将要采取的处置措施、您可自主防范和降低风险的建议、对您的补救措施等。
|
||||
事件相关情况我们将以邮件、信函、电话通知等方式告知您，
|
||||
难以逐一告知个人信息主体时，我们会采取合理、有效的方式发布公告。
|
||||
同时，我们还将按照监管部门要求，上报个人信息安全事件的处置情况。
|
||||
</div>
|
||||
<div class="leading-relaxed">
|
||||
互联网环境并非百分之百安全，尽管我们有这些安全措施，但仍然无法完全避免互联网中存在的各种风险，我们将尽力确保您的信息的安全性。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<!-- 第六部分 -->
|
||||
<div class="mb-2 font-bold leading-relaxed">
|
||||
六、未成年人保护
|
||||
</div>
|
||||
<div class="leading-relaxed">
|
||||
我们重视未成年人的信息保护，如您为未成年人的，建议您请您的父母或监护人仔细阅读本隐私权政策，
|
||||
并在征得您的父母或监护人同意的前提下使用我们的服务或向我们提供信息。
|
||||
</div>
|
||||
<div class="leading-relaxed">
|
||||
对于经父母或监护人同意使用我们的产品或服务而收集未成年人个人信息的情况，
|
||||
我们只会在法律法规允许，父母或监护人明确同意或者保护未成年人所必要的情况下使用、共享、转让或披露此信息。
|
||||
</div>
|
||||
<div class="leading-relaxed">
|
||||
我们将根据国家相关法律法规及本政策的规定保护未成年人的个人信息。
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<!-- 第七部分 -->
|
||||
<div class="mb-2 font-bold leading-relaxed">
|
||||
七、您的个人信息存储
|
||||
</div>
|
||||
<!-- 存储地区 -->
|
||||
<div class="mb-2 font-semibold">(一) 存储地区</div>
|
||||
<div class="leading-relaxed">
|
||||
我们将在中华人民共和国境内运营天远查服务中收集和产生的个人信息存储在中华人民共和国境内。
|
||||
目前，我们不会将上述信息传输至境外，如果我们向境外传输，我们将会遵循相关国家规定或者征求您的同意。
|
||||
</div>
|
||||
<!-- 存储期限 -->
|
||||
<div class="mb-2 font-semibold">(二) 存储期限</div>
|
||||
<div class="leading-relaxed">
|
||||
您在使用本平台期间，我们将保存您的个人脱敏加密信息，保存期限将以不超过为您提供服务所必须的期间为原则。
|
||||
在您终止使用本平台后，除法律法规对于特定信息保留期限另有规定外，我们会对您的信息进行删除或做匿名化处理。
|
||||
如我们停止运营本平台服务，我们将在合理期限内依照所适用的法律对所持有的您的个人信息进行删除或匿名化处理。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<!-- 第八部分 -->
|
||||
<div class="mb-2 font-bold leading-relaxed">
|
||||
八、您享有的权利及权利行使路径
|
||||
</div>
|
||||
<!-- 访问查询权 -->
|
||||
<div class="mb-2 font-semibold">(一) 访问查询权</div>
|
||||
<div class="leading-relaxed">
|
||||
您对您的天远查账号内的信息（含个人信息）依法享有访问查询权，包括：
|
||||
</div>
|
||||
<div class="leading-relaxed">
|
||||
<div>
|
||||
<span class="font-semibold">账户信息：</span>
|
||||
您可以登录手机客户端，通过【我的-点击名字或头像】可以访问您的头像信息、姓名、绑定手机号。
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-semibold">使用信息：</span>
|
||||
您可以在天远查手机客户端相关页面访问、查询您的使用信息，包括订单信息，
|
||||
可以通过【报告列表-查看详情】进行访问、查看。
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-semibold">其他信息：</span>
|
||||
如您在此前述过程中遇到操作问题的或如需获取其他前述无法获知的个人信息内容，
|
||||
您可通过在线客服或邮箱联系我们，我们将在核实您的身份后在合理期限内向您提供，
|
||||
但法律法规另有规定的或本政策另有约定的除外。
|
||||
</div>
|
||||
</div>
|
||||
<!-- 同意的撤回与变更 -->
|
||||
<div class="mb-2 font-semibold">(二) 同意的撤回与变更</div>
|
||||
<div class="leading-relaxed">
|
||||
若您需要更改相关权限的授权（例如：相机、相册、麦克风），您可以通过您的硬件设备进行修改。
|
||||
您也可以通过注销天远查账户的方式永久撤回我们继续收集您个人信息的全部授权。
|
||||
如您在此过程中遇到操作问题的，可以通过本政策“帮助中心”方式联系我们。
|
||||
</div>
|
||||
<!-- 帮助反馈权 -->
|
||||
<div class="mb-2 font-semibold">(三) 帮助反馈权</div>
|
||||
<div class="leading-relaxed">
|
||||
我们为您提供了多种反馈渠道，具体请见设置—帮助中心。
|
||||
</div>
|
||||
<!-- 提前获知产品与/或服务停止运营权 -->
|
||||
<div class="mb-2 font-semibold">
|
||||
(四) 提前获知产品与/或服务停止运营权
|
||||
</div>
|
||||
<div class="leading-relaxed">
|
||||
我们将持续为您提供优质服务，若因特殊原因导致我们的部分或全部产品与/或服务被迫停止运营，
|
||||
我们将提前在显著位置或通知您，并将停止对您个人信息的收集，
|
||||
同时在超出法律法规规定的必需且最短期限后，我们将会对所持有的您的个人信息进行删除或匿名化处理。
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<!-- 第九部分 -->
|
||||
<div class="mb-2 font-bold leading-relaxed">
|
||||
九、本政策如何更新
|
||||
</div>
|
||||
<div class="leading-relaxed">
|
||||
我们的隐私政策可能变更。
|
||||
未经您明确同意我们不会限制您按照本隐私政策所应享有的权利。
|
||||
我们会在天远查各个平台，包括客户端、相关网页上以首页弹窗形式发布对本隐私政策所做的任何变更，并以交互设计提醒您阅读并完整理解。
|
||||
对于重大变更，我们还会提供更为显著的通知（可能包括公告通知甚至向您提供弹窗提示）。
|
||||
</div>
|
||||
<div class="leading-relaxed">
|
||||
本政策所指的重大变更包括但不限于：
|
||||
<div>
|
||||
（1）我们的服务模式发生重大变化。如处理用户信息的目的、用户信息的使用方式等；
|
||||
</div>
|
||||
<div>
|
||||
（2）我们在控制权、组织架构等方面发生重大变化。如业务调整、破产并购等引起的所有者变更等；
|
||||
</div>
|
||||
<div>
|
||||
（3）用户信息共享、转让或公开披露的主要对象发生变化；
|
||||
</div>
|
||||
<div>
|
||||
（4）我们负责处理用户信息安全的责任部门、联络方式及投诉渠道发生变化时；
|
||||
</div>
|
||||
<div>
|
||||
（5）用户信息安全影响评估报告表明存在高风险时。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<!-- 第十部分 -->
|
||||
<div class="mb-2 font-bold leading-relaxed">
|
||||
十、如何联系我们
|
||||
</div>
|
||||
<div class="leading-relaxed">
|
||||
如果您对本政策或数据处理有任何疑问、意见或建议，可以通过天远查产品内的“联系客服”或邮箱
|
||||
<text class="text-blue-500"> admin@iieeii.com </text>
|
||||
与我们联系。我们将在收到您发送的响应请求或相关信息之日起十五（15）天内回复您。
|
||||
</div>
|
||||
<div class="leading-relaxed">
|
||||
您理解并同意，当涉及以下任一情形时，我们无法响应您的请求：
|
||||
<div>（1）与国家安全、国防安全有关的；</div>
|
||||
<div>
|
||||
（2）与公共安全、公共卫生、重大公共利益有关的；
|
||||
</div>
|
||||
<div>（3）与犯罪侦查、起诉和审判等有关的；</div>
|
||||
<div>
|
||||
（4）有充分证据表明您存在主观恶意或滥用权利的；
|
||||
</div>
|
||||
<div>
|
||||
（5）响应您的请求将导致您或其他个人、组织的合法权益受到严重损害的；
|
||||
</div>
|
||||
<div>（6）涉及天远查或任何第三方主体商业秘密的；</div>
|
||||
<div>（7）法律法规规定的其他情形。</div>
|
||||
</div>
|
||||
<div class="leading-relaxed">
|
||||
如果您对我们的回复不满意，特别是您认为我们的个人信息处理行为损害了您的合法权益，
|
||||
您还可以通过向有管辖权的法院提起诉讼来寻求解决方案。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<!-- 第十一部分 -->
|
||||
<div class="mb-2 font-bold leading-relaxed">十一、其他</div>
|
||||
<div class="leading-relaxed">
|
||||
（一）本《隐私政策》的解释及争议解决均应适用中华人民共和国大陆地区法律。
|
||||
与本《隐私政策》相关的任何纠纷，双方应协商友好解决；若不能协商解决，
|
||||
应将争议提交至广西福铭网络科技有限公司注册地有管辖权的人民法院解决。
|
||||
</div>
|
||||
<div class="leading-relaxed">
|
||||
（二）本《隐私政策》的标题仅为方便及阅读而设，并不影响正文其中任何规定的含义或解释。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 text-right text-sm text-gray-600">
|
||||
<text>2024年11月19日</text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
271
src/views/Promote.vue
Normal file
271
src/views/Promote.vue
Normal file
@@ -0,0 +1,271 @@
|
||||
<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>
|
||||
66
src/views/PromotionInquire.vue
Normal file
66
src/views/PromotionInquire.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, onBeforeMount } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useUserStore } from '@/stores/userStore';
|
||||
import { useDialogStore } from '@/stores/dialogStore';
|
||||
import InquireForm from "@/components/InquireForm.vue";
|
||||
import LoginDialog from "@/components/LoginDialog.vue";
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const userStore = useUserStore();
|
||||
const dialogStore = useDialogStore();
|
||||
const { mobile: userStoreMobile } = storeToRefs(userStore);
|
||||
|
||||
const linkIdentifier = ref("");
|
||||
const feature = ref("");
|
||||
const featureData = ref({});
|
||||
|
||||
onBeforeMount(async () => {
|
||||
await getProduct();
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
isFinishPayment();
|
||||
});
|
||||
|
||||
function isFinishPayment() {
|
||||
const query = new URLSearchParams(window.location.search);
|
||||
let orderNo = query.get("out_trade_no");
|
||||
if (orderNo) {
|
||||
router.push({ path: "/report", query: { orderNo } });
|
||||
}
|
||||
}
|
||||
|
||||
async function getProduct() {
|
||||
linkIdentifier.value = route.params.linkIdentifier;
|
||||
const { data: agentLinkData, error: agentLinkError } = await useApiFetch(
|
||||
`/agent/link?link_identifier=${linkIdentifier.value}`
|
||||
)
|
||||
.get()
|
||||
.json();
|
||||
if (agentLinkData.value && !agentLinkError.value) {
|
||||
if (agentLinkData.value.code === 200) {
|
||||
feature.value = agentLinkData.value.data.product_en;
|
||||
featureData.value = agentLinkData.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;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<InquireForm :type="'promotion'" :feature="feature" :link-identifier="linkIdentifier" :feature-data="featureData" />
|
||||
<LoginDialog />
|
||||
</template>
|
||||
147
src/views/Report.vue
Normal file
147
src/views/Report.vue
Normal file
@@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<BaseReport v-if="queryState === 'success'" :order-id="orderId" :order-no="orderNo" :feature="feature"
|
||||
:reportData="reportData" :reportParams="reportParams" :reportName="reportName" :reportDateTime="reportDateTime"
|
||||
:isEmpty="isEmpty" :isDone="isDone" />
|
||||
<div v-else-if="queryState === 'pending'" class="loading-container">
|
||||
<div class="loading-spinner"></div>
|
||||
<p>报告生成中，请稍候...</p>
|
||||
</div>
|
||||
<div class="p-4" v-else-if="queryState === 'failed'">
|
||||
<LEmpty />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import LEmpty from "@/components/LEmpty.vue";
|
||||
|
||||
const route = useRoute();
|
||||
const feature = ref("");
|
||||
const reportData = ref([]);
|
||||
const reportParams = ref({});
|
||||
const reportName = ref("");
|
||||
const reportDateTime = ref(null);
|
||||
const isEmpty = ref(false);
|
||||
const isDone = ref(false);
|
||||
const orderId = ref(null);
|
||||
const orderNo = ref("");
|
||||
const queryState = ref("");
|
||||
const pollingInterval = ref(null);
|
||||
|
||||
|
||||
onBeforeMount(() => {
|
||||
const query = new URLSearchParams(window.location.search);
|
||||
orderNo.value = query.get("out_trade_no");
|
||||
orderId.value = query.get("order_id");
|
||||
|
||||
|
||||
if (!orderNo.value && !orderId.value) {
|
||||
orderId.value = route.query.orderId;
|
||||
orderNo.value = route.query.orderNo;
|
||||
}
|
||||
|
||||
if (!orderId.value && !orderNo.value) return;
|
||||
|
||||
getReport();
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (pollingInterval.value) {
|
||||
clearInterval(pollingInterval.value);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
const getReport = async () => {
|
||||
let queryUrl = "";
|
||||
if (orderNo.value) {
|
||||
queryUrl = `/query/orderNo/${orderNo.value}`;
|
||||
} else if (orderId.value) {
|
||||
queryUrl = `/query/orderId/${orderId.value}`;
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
const { data, error } = await useApiFetch(queryUrl).get().json();
|
||||
|
||||
if (data.value && !error.value) {
|
||||
if (data.value.code === 200) {
|
||||
queryState.value = data.value.data.query_state;
|
||||
if (queryState.value === "success") {
|
||||
feature.value = data.value.data.product;
|
||||
|
||||
reportData.value = data.value.data.query_data.sort((a, b) => {
|
||||
return a.feature.sort - b.feature.sort;
|
||||
});
|
||||
// console.log("reportData", reportData.value[1].data.data)
|
||||
|
||||
reportParams.value = data.value.data.query_params;
|
||||
reportName.value = data.value.data.product_name;
|
||||
reportDateTime.value = data.value.data.create_time;
|
||||
isDone.value = true;
|
||||
|
||||
// 如果成功，清除轮询
|
||||
if (pollingInterval.value) {
|
||||
clearInterval(pollingInterval.value);
|
||||
pollingInterval.value = null;
|
||||
}
|
||||
} else if (queryState.value === "pending") {
|
||||
// 如果是pending状态且没有轮询，启动轮询
|
||||
if (!pollingInterval.value) {
|
||||
pollingInterval.value = setInterval(() => {
|
||||
getReport();
|
||||
}, 2000); // 每2秒轮询一次
|
||||
}
|
||||
} else if (queryState.value === "failed") {
|
||||
isEmpty.value = true;
|
||||
isDone.value = true;
|
||||
// 如果失败，清除轮询
|
||||
if (pollingInterval.value) {
|
||||
clearInterval(pollingInterval.value);
|
||||
pollingInterval.value = null;
|
||||
}
|
||||
}
|
||||
} else if (data.value.code === 200003) {
|
||||
isEmpty.value = true;
|
||||
isDone.value = true;
|
||||
} else if (data.value.code === 200002) {
|
||||
isPending.value = true;
|
||||
isDone.value = true;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.loading-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
|
||||
.loading-spinner {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: 4px solid #f3f3f3;
|
||||
border-top: 4px solid #3498db;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #666;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
218
src/views/ReportShare.vue
Normal file
218
src/views/ReportShare.vue
Normal file
@@ -0,0 +1,218 @@
|
||||
<template>
|
||||
<div class="min-h-screen bg-gray-50">
|
||||
<van-nav-bar title="天远查" left-arrow @click-left="goHome" fixed placeholder safe-area-inset-topxc z>
|
||||
<template #right>
|
||||
<van-button type="primary" size="small" class="!bg-blue-500 !border-blue-500" @click="goHome">
|
||||
首页
|
||||
</van-button>
|
||||
</template>
|
||||
</van-nav-bar>
|
||||
|
||||
<BaseReport v-if="queryState === 'success' && !isExpired" :isShare="true" :feature="feature"
|
||||
:reportData="reportData" :reportParams="reportParams" :reportName="reportName"
|
||||
:reportDateTime="reportDateTime" :isEmpty="isEmpty" :isDone="isDone" />
|
||||
<div v-else-if="queryState === 'pending'" class="loading-container">
|
||||
<div class="loading-spinner"></div>
|
||||
<p>报告生成中，请稍候...</p>
|
||||
</div>
|
||||
<div v-else-if="isExpired" class="expired-container">
|
||||
<div class="expired-content">
|
||||
<van-icon name="clock-o" size="48" color="#999" />
|
||||
<h2 class="text-xl font-bold text-gray-700 mt-4">
|
||||
分享链接已过期
|
||||
</h2>
|
||||
<p class="text-gray-500 mt-2">
|
||||
该分享链接已超过7天有效期，请重新获取分享链接
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4" v-else-if="queryState === 'failed'">
|
||||
<LEmpty />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import LEmpty from "@/components/LEmpty.vue";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const feature = ref("");
|
||||
const reportData = ref([]);
|
||||
const reportParams = ref({});
|
||||
const reportName = ref("");
|
||||
const reportDateTime = ref(null);
|
||||
const isEmpty = ref(false);
|
||||
const isDone = ref(false);
|
||||
const isExpired = ref(false);
|
||||
const queryState = ref("");
|
||||
const pollingInterval = ref(null);
|
||||
|
||||
onBeforeMount(() => {
|
||||
// 从动态路由参数中获取 linkIdentifier
|
||||
const linkIdentifier = route.params.linkIdentifier;
|
||||
if (!linkIdentifier) {
|
||||
isEmpty.value = true;
|
||||
isDone.value = true;
|
||||
return;
|
||||
}
|
||||
|
||||
// 解码 linkIdentifier
|
||||
try {
|
||||
const decodedLink = decodeURIComponent(linkIdentifier);
|
||||
getReport(decodedLink);
|
||||
} catch (err) {
|
||||
console.error("分享链接无效");
|
||||
isEmpty.value = true;
|
||||
isDone.value = true;
|
||||
}
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (pollingInterval.value) {
|
||||
clearInterval(pollingInterval.value);
|
||||
}
|
||||
});
|
||||
|
||||
const getReport = async (linkId) => {
|
||||
if (!linkId) return;
|
||||
|
||||
const { data, error } = await useApiFetch(`/query/share/${linkId}`)
|
||||
.get()
|
||||
.json();
|
||||
|
||||
if (data.value && !error.value) {
|
||||
if (data.value.code === 200) {
|
||||
// 检查分享链接状态
|
||||
if (data.value.data.status === "expired") {
|
||||
isExpired.value = true;
|
||||
isDone.value = true;
|
||||
// 如果过期，清除轮询
|
||||
if (pollingInterval.value) {
|
||||
clearInterval(pollingInterval.value);
|
||||
pollingInterval.value = null;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
queryState.value = data.value.data.query_state;
|
||||
if (queryState.value === "success") {
|
||||
reportData.value = data.value.data.query_data.sort((a, b) => {
|
||||
return a.feature.sort - b.feature.sort;
|
||||
});
|
||||
feature.value = data.value.data.product;
|
||||
reportParams.value = data.value.data.query_params;
|
||||
reportName.value = data.value.data.product_name;
|
||||
reportDateTime.value = data.value.data.create_time;
|
||||
isDone.value = true;
|
||||
|
||||
// 如果成功，清除轮询
|
||||
if (pollingInterval.value) {
|
||||
clearInterval(pollingInterval.value);
|
||||
pollingInterval.value = null;
|
||||
}
|
||||
} else if (queryState.value === "pending") {
|
||||
// 如果是pending状态且没有轮询，启动轮询
|
||||
if (!pollingInterval.value) {
|
||||
pollingInterval.value = setInterval(() => {
|
||||
getReport(linkId);
|
||||
}, 2000); // 每2秒轮询一次
|
||||
}
|
||||
} else if (queryState.value === "failed") {
|
||||
isEmpty.value = true;
|
||||
isDone.value = true;
|
||||
// 如果失败，清除轮询
|
||||
if (pollingInterval.value) {
|
||||
clearInterval(pollingInterval.value);
|
||||
pollingInterval.value = null;
|
||||
}
|
||||
}
|
||||
} else if (data.value.code === 200003) {
|
||||
isEmpty.value = true;
|
||||
isDone.value = true;
|
||||
} else if (data.value.code === 200002) {
|
||||
isPending.value = true;
|
||||
isDone.value = true;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const goHome = () => {
|
||||
router.push("/");
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.loading-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
|
||||
.loading-spinner {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: 4px solid #f3f3f3;
|
||||
border-top: 4px solid #3498db;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #666;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.expired-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
background-color: #f8f9fa;
|
||||
padding: 20px;
|
||||
|
||||
.expired-content {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||||
max-width: 400px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.van-nav-bar) {
|
||||
.van-nav-bar__title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.van-nav-bar__left {
|
||||
.van-icon {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.van-button) {
|
||||
height: 32px;
|
||||
padding: 0 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
58
src/views/Service.vue
Normal file
58
src/views/Service.vue
Normal file
@@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<div class="support-chat">
|
||||
<h1>在线客服</h1>
|
||||
<p>如果您有任何问题，请通过在线客服联系我们。</p>
|
||||
<p>请点击右下角按钮联系客服</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
onMounted(() => {
|
||||
(function (d, t) {
|
||||
const BASE_URL = "https://service.quannengcha.com";
|
||||
const g = d.createElement(t),
|
||||
s = d.getElementsByTagName(t)[0];
|
||||
g.src = BASE_URL + "/packs/js/sdk.js";
|
||||
g.defer = true;
|
||||
g.async = true;
|
||||
|
||||
s.parentNode.insertBefore(g, s);
|
||||
g.onload = function () {
|
||||
window.chatwootSDK.run({
|
||||
websiteToken: "XJqwnEWKVNte8iJW8DLroEzd",
|
||||
baseUrl: BASE_URL,
|
||||
type: "expanded_bubble", // 使用自动展开模式
|
||||
});
|
||||
|
||||
console.log("Chatwoot script initialized", g);
|
||||
};
|
||||
})(document, "script");
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.support-chat {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.support-chat h1 {
|
||||
font-size: 28px;
|
||||
color: #005a9e;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.support-chat p {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
iframe {
|
||||
background: #000000;
|
||||
}
|
||||
|
||||
iframe::content .file-uploads.file-uploads-html5.text-black-900 {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
351
src/views/SubordinateDetail.vue
Normal file
351
src/views/SubordinateDetail.vue
Normal file
@@ -0,0 +1,351 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import useApiFetch from '@/composables/useApiFetch'
|
||||
|
||||
const route = useRoute()
|
||||
const loading = ref(false)
|
||||
const refreshing = ref(false)
|
||||
const finished = ref(false)
|
||||
const page = ref(1)
|
||||
const pageSize = 8
|
||||
|
||||
// 获取收益列表
|
||||
const fetchRewardDetails = async () => {
|
||||
if (loading.value || finished.value) return
|
||||
|
||||
loading.value = true
|
||||
const { data, error } = await useApiFetch(
|
||||
`/agent/subordinate/contribution/detail?subordinate_id=${route.params.id}&page=${page.value}&page_size=${pageSize}`
|
||||
)
|
||||
.get()
|
||||
.json()
|
||||
|
||||
if (data.value && !error.value) {
|
||||
if (data.value.code === 200) {
|
||||
if (page.value === 1) {
|
||||
// 更新用户信息
|
||||
userInfo.value = {
|
||||
createTime: data.value.data.create_time,
|
||||
level: data.value.data.level_name || '普通',
|
||||
mobile: data.value.data.mobile,
|
||||
}
|
||||
// 更新汇总数据
|
||||
summary.value = {
|
||||
totalReward: data.value.data.total_earnings,
|
||||
totalContribution: data.value.data.total_contribution,
|
||||
totalOrders: data.value.data.total_orders,
|
||||
}
|
||||
// 设置默认的统计类型
|
||||
statistics.value = [
|
||||
{
|
||||
type: 'descendant_promotion',
|
||||
amount: 0,
|
||||
count: 0,
|
||||
description: '推广奖励',
|
||||
},
|
||||
{
|
||||
type: 'cost',
|
||||
amount: 0,
|
||||
count: 0,
|
||||
description: '成本贡献',
|
||||
},
|
||||
{
|
||||
type: 'pricing',
|
||||
amount: 0,
|
||||
count: 0,
|
||||
description: '定价贡献',
|
||||
},
|
||||
{
|
||||
type: 'descendant_withdraw',
|
||||
amount: 0,
|
||||
count: 0,
|
||||
description: '提现收益',
|
||||
},
|
||||
{
|
||||
type: 'descendant_upgrade_vip',
|
||||
amount: 0,
|
||||
count: 0,
|
||||
description: '转化VIP奖励',
|
||||
},
|
||||
{
|
||||
type: 'descendant_upgrade_svip',
|
||||
amount: 0,
|
||||
count: 0,
|
||||
description: '转化SVIP奖励',
|
||||
},
|
||||
{
|
||||
type: 'descendant_new_active',
|
||||
amount: 0,
|
||||
count: 0,
|
||||
description: '新增活跃奖励',
|
||||
},
|
||||
{
|
||||
type: 'descendant_stay_active',
|
||||
amount: 0,
|
||||
count: 0,
|
||||
description: '月度活跃奖励',
|
||||
},
|
||||
]
|
||||
// 如果有统计数据，更新对应的值
|
||||
if (data.value.data.stats) {
|
||||
const stats = data.value.data.stats
|
||||
// 更新推广奖励
|
||||
const platformStat = statistics.value.find(s => s.type === 'descendant_promotion')
|
||||
if (platformStat) {
|
||||
platformStat.amount = stats.descendant_promotion_amount || 0
|
||||
platformStat.count = stats.descendant_promotion_count || 0
|
||||
}
|
||||
// 更新成本贡献
|
||||
const costStat = statistics.value.find(s => s.type === 'cost')
|
||||
if (costStat) {
|
||||
costStat.amount = stats.cost_amount || 0
|
||||
costStat.count = stats.cost_count || 0
|
||||
}
|
||||
// 更新定价贡献
|
||||
const pricingStat = statistics.value.find(s => s.type === 'pricing')
|
||||
if (pricingStat) {
|
||||
pricingStat.amount = stats.pricing_amount || 0
|
||||
pricingStat.count = stats.pricing_count || 0
|
||||
}
|
||||
// 更新提现收益
|
||||
const withdrawStat = statistics.value.find(s => s.type === 'descendant_withdraw')
|
||||
if (withdrawStat) {
|
||||
withdrawStat.amount = stats.descendant_withdraw_amount || 0
|
||||
withdrawStat.count = stats.descendant_withdraw_count || 0
|
||||
}
|
||||
// 更新转化VIP奖励
|
||||
const conversionVipStat = statistics.value.find(s => s.type === 'descendant_upgrade_vip')
|
||||
if (conversionVipStat) {
|
||||
conversionVipStat.amount = stats.descendant_upgrade_vip_amount || 0
|
||||
conversionVipStat.count = stats.descendant_upgrade_vip_count || 0
|
||||
}
|
||||
// 更新转化SVIP奖励
|
||||
const conversionSvipStat = statistics.value.find(s => s.type === 'descendant_upgrade_svip')
|
||||
if (conversionSvipStat) {
|
||||
conversionSvipStat.amount = stats.descendant_upgrade_svip_amount || 0
|
||||
conversionSvipStat.count = stats.descendant_upgrade_svip_count || 0
|
||||
}
|
||||
// 更新活跃奖励
|
||||
const activeStat = statistics.value.find(s => s.type === 'descendant_new_active')
|
||||
if (activeStat) {
|
||||
activeStat.amount = stats.descendant_new_active_amount || 0
|
||||
activeStat.count = stats.descendant_new_active_count || 0
|
||||
}
|
||||
// 更新月度活跃奖励
|
||||
const monthlyActiveStat = statistics.value.find(s => s.type === 'descendant_stay_active')
|
||||
if (monthlyActiveStat) {
|
||||
monthlyActiveStat.amount = stats.descendant_stay_active_amount || 0
|
||||
monthlyActiveStat.count = stats.descendant_stay_active_count || 0
|
||||
}
|
||||
}
|
||||
rewardDetails.value = []
|
||||
}
|
||||
// 处理列表数据
|
||||
if (data.value.data.list) {
|
||||
if (page.value === 1) {
|
||||
rewardDetails.value = data.value.data.list
|
||||
} else {
|
||||
rewardDetails.value.push(...data.value.data.list)
|
||||
}
|
||||
finished.value = data.value.data.list.length < pageSize
|
||||
} else {
|
||||
finished.value = true
|
||||
}
|
||||
}
|
||||
}
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
// 下拉刷新
|
||||
const onRefresh = () => {
|
||||
finished.value = false
|
||||
page.value = 1
|
||||
fetchRewardDetails().finally(() => {
|
||||
refreshing.value = false
|
||||
})
|
||||
}
|
||||
|
||||
const rewardDetails = ref([])
|
||||
const userInfo = ref({})
|
||||
const summary = ref({})
|
||||
const statistics = ref([])
|
||||
|
||||
onMounted(() => {
|
||||
fetchRewardDetails()
|
||||
})
|
||||
|
||||
// 获取收益类型样式
|
||||
const getRewardTypeClass = type => {
|
||||
const typeMap = {
|
||||
descendant_promotion: 'bg-blue-100 text-blue-600',
|
||||
cost: 'bg-green-100 text-green-600',
|
||||
pricing: 'bg-purple-100 text-purple-600',
|
||||
descendant_withdraw: 'bg-yellow-100 text-yellow-600',
|
||||
descendant_upgrade_vip: 'bg-red-100 text-red-600',
|
||||
descendant_upgrade_svip: 'bg-orange-100 text-orange-600',
|
||||
descendant_new_active: 'bg-indigo-100 text-indigo-600',
|
||||
descendant_stay_active: 'bg-pink-100 text-pink-600',
|
||||
}
|
||||
return typeMap[type] || 'bg-gray-100 text-gray-600'
|
||||
}
|
||||
|
||||
// 获取收益类型图标
|
||||
const getRewardTypeIcon = type => {
|
||||
const iconMap = {
|
||||
descendant_promotion: 'gift',
|
||||
cost: 'gold-coin',
|
||||
pricing: 'balance-pay',
|
||||
descendant_withdraw: 'cash-back-record',
|
||||
descendant_upgrade_vip: 'fire',
|
||||
descendant_upgrade_svip: 'fire',
|
||||
descendant_new_active: 'medal',
|
||||
descendant_stay_active: 'medal',
|
||||
}
|
||||
return iconMap[type] || 'balance-o'
|
||||
}
|
||||
|
||||
// 获取收益类型描述
|
||||
const getRewardTypeDescription = type => {
|
||||
const descriptionMap = {
|
||||
descendant_promotion: '推广奖励',
|
||||
cost: '成本贡献',
|
||||
pricing: '定价贡献',
|
||||
descendant_withdraw: '提现收益',
|
||||
descendant_upgrade_vip: '转化VIP奖励',
|
||||
descendant_upgrade_svip: '转化SVIP奖励',
|
||||
descendant_new_active: '新增活跃奖励',
|
||||
descendant_stay_active: '月度活跃奖励',
|
||||
}
|
||||
return descriptionMap[type] || '未知类型'
|
||||
}
|
||||
|
||||
// 格式化时间
|
||||
const formatTime = timeStr => {
|
||||
if (!timeStr) return '-'
|
||||
const date = new Date(timeStr)
|
||||
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
|
||||
}
|
||||
|
||||
// 格式化金额
|
||||
const formatNumber = num => {
|
||||
if (!num) return '0.00'
|
||||
return Number(num).toFixed(2)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="reward-detail">
|
||||
<!-- 用户信息卡片 -->
|
||||
<div class="p-4">
|
||||
<div class="bg-white rounded-xl shadow-sm p-5 mb-4">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="text-xl font-semibold text-gray-800">{{ userInfo.mobile }}</div>
|
||||
<span class="px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-600">
|
||||
{{ userInfo.level }}代理
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-sm text-gray-500 mb-4">成为下级代理时间：{{ formatTime(userInfo.createTime) }}</div>
|
||||
<div class="grid grid-cols-3 gap-4">
|
||||
<div class="text-center">
|
||||
<div class="text-gray-500 text-sm mb-1">总推广单量</div>
|
||||
<div class="text-xl font-semibold text-blue-600">{{ summary.totalOrders }}</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-gray-500 text-sm mb-1">总收益</div>
|
||||
<div class="text-xl font-semibold text-green-600">¥{{ formatNumber(summary.totalReward) }}</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-gray-500 text-sm mb-1">总贡献</div>
|
||||
<div class="text-xl font-semibold text-purple-600">¥{{ formatNumber(summary.totalContribution) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 贡献统计卡片 -->
|
||||
<div class="bg-white rounded-xl shadow-sm p-4 mb-4">
|
||||
<div class="text-base font-medium text-gray-800 mb-3">贡献统计</div>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<div
|
||||
v-for="item in statistics"
|
||||
:key="item.type"
|
||||
class="flex items-center p-2 rounded-lg"
|
||||
:class="getRewardTypeClass(item.type).split(' ')[0]"
|
||||
>
|
||||
<van-icon
|
||||
:name="getRewardTypeIcon(item.type)"
|
||||
class="text-lg mr-2"
|
||||
:class="getRewardTypeClass(item.type).split(' ')[1]"
|
||||
/>
|
||||
<div class="flex-1">
|
||||
<div class="text-sm font-medium" :class="getRewardTypeClass(item.type).split(' ')[1]">
|
||||
{{ item.description }}
|
||||
</div>
|
||||
<div class="flex justify-between items-center mt-1">
|
||||
<div class="text-xs text-gray-500">{{ item.count }} 次</div>
|
||||
<div class="text-sm font-medium" :class="getRewardTypeClass(item.type).split(' ')[1]">
|
||||
¥{{ formatNumber(item.amount) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl shadow-sm p-4 mb-4">
|
||||
<!-- 贡献记录列表 -->
|
||||
<div class="text-base font-medium text-gray-800">贡献记录</div>
|
||||
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
|
||||
<van-list
|
||||
v-model:loading="loading"
|
||||
:finished="finished"
|
||||
finished-text="没有更多了"
|
||||
@load="fetchRewardDetails"
|
||||
>
|
||||
<div class="p-4">
|
||||
<div v-if="rewardDetails.length === 0" class="text-center text-gray-500 py-8">暂无贡献记录</div>
|
||||
<div v-else v-for="item in rewardDetails" :key="item.id" class="reward-item">
|
||||
<div class="mb-3 border-b border-gray-200 pb-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center space-x-3">
|
||||
<van-icon
|
||||
:name="getRewardTypeIcon(item.type)"
|
||||
class="text-lg"
|
||||
:class="getRewardTypeClass(item.type).split(' ')[1]"
|
||||
/>
|
||||
<div>
|
||||
<div class="font-medium text-gray-800">{{ getRewardTypeDescription(item.type) }}</div>
|
||||
<div class="text-xs text-gray-500">{{ formatTime(item.create_time) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div class="text-base font-semibold" :class="getRewardTypeClass(item.type).split(' ')[1]">
|
||||
¥{{ formatNumber(item.amount) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-list>
|
||||
</van-pull-refresh>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.reward-detail {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.reward-item {
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.reward-item:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
</style>
|
||||
185
src/views/SubordinateList.vue
Normal file
185
src/views/SubordinateList.vue
Normal file
@@ -0,0 +1,185 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useAgentStore } from '@/stores/agentStore'
|
||||
import useApiFetch from '@/composables/useApiFetch'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const agentStore = useAgentStore()
|
||||
const subordinates = ref([])
|
||||
const loading = ref(false)
|
||||
const finished = ref(false)
|
||||
const page = ref(1)
|
||||
const pageSize = 8
|
||||
const refreshing = ref(false)
|
||||
const router = useRouter()
|
||||
|
||||
onBeforeMount(() => {
|
||||
fetchSubordinates()
|
||||
})
|
||||
// 计算统计数据
|
||||
const statistics = ref({
|
||||
totalSubordinates: 0,
|
||||
})
|
||||
|
||||
// 获取下级列表
|
||||
const fetchSubordinates = async () => {
|
||||
if (loading.value || finished.value) return
|
||||
|
||||
loading.value = true
|
||||
const { data, error } = await useApiFetch(`/agent/subordinate/list?page=${page.value}&page_size=${pageSize}`)
|
||||
.get()
|
||||
.json()
|
||||
if (data.value && !error.value) {
|
||||
if (data.value.code === 200) {
|
||||
statistics.value.totalSubordinates = data.value.data.total
|
||||
if (page.value === 1) {
|
||||
subordinates.value = data.value.data.list
|
||||
} else {
|
||||
subordinates.value.push(...data.value.data.list)
|
||||
}
|
||||
}
|
||||
}
|
||||
finished.value = true
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
// 下拉刷新
|
||||
const onRefresh = () => {
|
||||
finished.value = false
|
||||
page.value = 1
|
||||
fetchSubordinates().finally(() => {
|
||||
refreshing.value = false
|
||||
})
|
||||
}
|
||||
|
||||
// 格式化时间
|
||||
const formatTime = timeStr => {
|
||||
if (!timeStr) return '-'
|
||||
return timeStr.split(' ')[0]
|
||||
}
|
||||
|
||||
// 格式化金额
|
||||
const formatNumber = num => {
|
||||
if (!num) return '0.00'
|
||||
return Number(num).toFixed(2)
|
||||
}
|
||||
|
||||
// 获取等级标签样式
|
||||
const getLevelClass = level => {
|
||||
switch (level) {
|
||||
case 'SVIP':
|
||||
return 'bg-purple-100 text-purple-600'
|
||||
case 'VIP':
|
||||
return 'bg-blue-100 text-blue-600'
|
||||
default:
|
||||
return 'bg-gray-100 text-gray-600'
|
||||
}
|
||||
}
|
||||
|
||||
// 查看详情
|
||||
const viewDetail = item => {
|
||||
router.push({
|
||||
name: 'subordinateDetail',
|
||||
params: { id: item.id },
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchSubordinates()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="subordinate-list">
|
||||
<!-- 顶部统计卡片 -->
|
||||
<div class="p-4 pb-0">
|
||||
<div class="bg-white rounded-xl shadow-sm p-4">
|
||||
<div class="flex items-center justify-center">
|
||||
<div class="text-center">
|
||||
<div class="text-gray-500 text-sm mb-1">下级总数</div>
|
||||
<div class="text-2xl font-semibold text-blue-600">{{ statistics.totalSubordinates }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
|
||||
<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="fetchSubordinates">
|
||||
<div class="p-4">
|
||||
<div v-for="(item, index) in subordinates" :key="item.id" class="subordinate-item">
|
||||
<div class="flex flex-col p-5 bg-white rounded-xl shadow-sm mb-4">
|
||||
<!-- 顶部信息 -->
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div
|
||||
class="w-6 h-6 flex items-center justify-center bg-blue-100 text-blue-600 rounded-full text-sm font-medium"
|
||||
>
|
||||
{{ index + 1 }}
|
||||
</div>
|
||||
<div class="text-xl font-semibold text-gray-800">{{ item.mobile }}</div>
|
||||
<span :class="['px-3 py-1 rounded-full text-sm font-medium', getLevelClass(item.level)]">
|
||||
{{ item.level ? item.level : '普通' }}代理
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 加入时间 -->
|
||||
<div class="text-sm text-gray-500 mb-5">成为下级代理时间：{{ item.create_time }}</div>
|
||||
|
||||
<!-- 数据统计 -->
|
||||
<div class="grid grid-cols-3 gap-6 mb-5">
|
||||
<div class="text-center">
|
||||
<div class="text-gray-500 text-sm mb-1">总推广单量</div>
|
||||
<div class="text-xl font-semibold text-blue-600">{{ item.total_orders }}</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-gray-500 text-sm mb-1">总收益</div>
|
||||
<div class="text-xl font-semibold text-green-600">¥{{ formatNumber(item.total_earnings) }}</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-gray-500 text-sm mb-1">总贡献</div>
|
||||
<div class="text-xl font-semibold text-purple-600">¥{{ formatNumber(item.total_contribution) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 查看详情按钮 -->
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
@click="viewDetail(item)"
|
||||
class="inline-flex items-center px-4 py-2 text-sm bg-gradient-to-r from-blue-500 to-blue-400 text-white rounded-full shadow-sm hover:shadow-md transition-all duration-200"
|
||||
>
|
||||
<van-icon name="eye" class="mr-1.5" />
|
||||
查看详情
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-list>
|
||||
</van-pull-refresh>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.subordinate-list {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.subordinate-item {
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.subordinate-item:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
button {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
|
||||
}
|
||||
</style>
|
||||
274
src/views/UserAgreement.vue
Normal file
274
src/views/UserAgreement.vue
Normal file
@@ -0,0 +1,274 @@
|
||||
<script setup></script>
|
||||
|
||||
<template>
|
||||
<div class="p-4">
|
||||
<!-- 页面标题 -->
|
||||
<div class="mb-4 text-center text-lg font-bold">用户协议</div>
|
||||
|
||||
<!-- 内容主体 -->
|
||||
<div class="indent-[2em]">
|
||||
<div class="mb-4 leading-relaxed">
|
||||
本协议是您（以下又称“用户”）在使用本服务时，约定您和广西福铭网络科技有限公司之间权利义务关系的有效协议。
|
||||
</div>
|
||||
|
||||
<div class="mb-4 leading-relaxed">
|
||||
在您使用本服务前，请您务必仔细阅读本协议，特别是隐私权保护及授权条款、免除或者限制广西福铭网络科技有限公司责任的条款、争议解决和法律适用条款。一旦您有对本服务的任何部分或全部的注册、查看、定制、使用等任何使用行为，即视为您已充分阅读、理解并接受本协议的全部内容，并与广西福铭网络科技有限公司达成本协议。如您对本协议有任何疑问，应向广西福铭网络科技有限公司客服咨询。如果您不同意本协议的部分或全部约定，您应立即停止使用本服务。
|
||||
</div>
|
||||
<div class="mb-4 leading-relaxed">
|
||||
您与广西福铭网络科技有限公司达成本协议后，您承诺接受并遵守本协议的约定，并不得以未阅读本协议的内容或者未获得广西福铭网络科技有限公司对您问询的解答等理由，主张本协议无效，或要求撤销本协议。在本协议履行过程中，广西福铭网络科技有限公司可以依其单独判断暂时停止提供、限制或改变本服务，并有权根据自身业务需要修订本协议。一旦本协议的内容发生变动，广西福铭网络科技有限公司将通过平台公布最新的服务协议，不再向您作个别通知。如果您不同意广西福铭网络科技有限公司对本服务协议所做的修改，您应立即停止使用本服务或通过广西福铭网络科技有限公司客服与广西福铭网络科技有限公司联系。如果您继续使用本服务，则视为您接受广西福铭网络科技有限公司对本协议所做的修改，并应遵照修改后的协议执行。
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<div class="mb-2 font-bold leading-relaxed">一、服务内容</div>
|
||||
<div class="leading-relaxed">
|
||||
本服务向您提供多项个人信息整理服务。您知悉并认可，如您需使用该类服务，必须满足如下所述条件；且您承诺，您向广西福铭网络科技有限公司提请服务申请时，已经满足如下所述条件。
|
||||
</div>
|
||||
<div class="leading-relaxed">
|
||||
<div>A.您已注册成为本服务的会员；</div>
|
||||
<div>
|
||||
B.您已在服务页面对应框中填写被查询主体的姓名、身份证号、手机号、银行卡号和被查询主体的手机号收到的动态验证码（以下称“被查询主体信息”）；
|
||||
</div>
|
||||
<div>
|
||||
C.您确保被查询主体信息是您本人的信息或者被查询主体已授权您本人使用被查询主体信息进行查询（授权内容应包括本条D项所述内容），并且被查询主体已知悉该授权的风险。
|
||||
</div>
|
||||
<div>
|
||||
D.被查询主体不可撤销地授权广西福铭网络科技有限公司为查询、评估被查询主体的信息状况：a.可以委托合法存续的第三方机构收集、查询、验证、使用并提供您或被查询主体的个人信息；b.可以向数据源机构采集您或被查询主体的个人信息；c.可以整理、保存、加工、使用您或被查询主体的个人信息，并向您提供数据报告；d.可以向为您提供服务的第三方商户提供脱敏后的个人信息或数据报告。本条所述的个人信息包括但不限于身份信息、联系方式、职业和居住地址等个人基本信息，个人社保、公积金、收入及在商业活动中形成的各类交易记录，个人公共费用缴纳、违法违规信息、财产状况等；
|
||||
</div>
|
||||
<div>
|
||||
E.被查询主体已被明确告知提供被查询主体信息并作出D项授权可能给被查询主体带来的各类损失以及其他可能的不利后果，包括采集上述个人信息对被查询主体信用方面可能产生不良影响以及上述信息被信息使用者依法提供给第三方后被他人不当利用的风险。
|
||||
</div>
|
||||
<div>F.您已全额支付相应的查询服务费用；</div>
|
||||
<div>
|
||||
G.验证码请不要轻易提供给他人，一旦填入手机号对应验证码，视为手机号机主本人操作。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<div class="mb-2 font-bold leading-relaxed">
|
||||
二、服务中断或故障
|
||||
</div>
|
||||
<div class="leading-relaxed">
|
||||
您同意，因下列原因导致广西福铭网络科技有限公司无法正常提供本服务的，广西福铭网络科技有限公司不承担责任：
|
||||
</div>
|
||||
<div class="leading-relaxed">
|
||||
<div>（1）承载本服务的系统停机维护期间；</div>
|
||||
<div>
|
||||
（2）您的电脑、手机软硬件和通信线路、供电线路出现故障的；
|
||||
</div>
|
||||
<div>
|
||||
（3）您操作不当或通过非广西福铭网络科技有限公司授权或认可的方式使用本服务的；
|
||||
</div>
|
||||
<div>
|
||||
（4）因病毒、木马、恶意程序攻击、网络拥堵、系统不稳定、系统或设备故障、通讯故障、电力故障或政府行为等原因；
|
||||
</div>
|
||||
<div>
|
||||
（5）由于黑客攻击、网络供应商技术调整或故障、网站升级、手机运营商系统方面的问题等原因而造成的本服务中断或延迟；
|
||||
</div>
|
||||
<div>
|
||||
（6）因台风、地震、海啸、洪水、停电、战争、恐怖袭击等不可抗力之因素，造成本服务系统障碍不能执行业务的。
|
||||
</div>
|
||||
</div>
|
||||
<div class="leading-relaxed">
|
||||
广西福铭网络科技有限公司不对因使用本服务而对用户造成的间接的、附带的、特殊的、后果性的损失承担任何法律责任；尽管有前款约定广西福铭网络科技有限公司将采取合理行动积极促使本服务恢复正常。
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<div class="mb-2 font-bold leading-relaxed">
|
||||
三、信息的使用和保护
|
||||
</div>
|
||||
<div class="leading-relaxed">
|
||||
广西福铭网络科技有限公司深知您注重个人信息安全和保护，并理解保护被查询主体个人信息的重要性。
|
||||
广西福铭网络科技有限公司会严格遵守中国关于收集、使用、保存用户个人信息的相关法律法规，
|
||||
尽最大努力采用相应安全技术和管理手段保护您或被查询主体的个人信息，
|
||||
防止您或被查询主体个人信息遭受未经授权的访问、适用或泄露、毁损、篡改或者丢失。
|
||||
未经您或被查询主体的授权不会向任何第三方提供。
|
||||
</div>
|
||||
<div class="leading-relaxed">
|
||||
您使用本服务，即表示您已授权广西福铭网络科技有限公司将您相关信息披露给广西福铭网络科技有限公司关联公司
|
||||
（关联公司是指直接或间接控制于本协议一方的任何法律实体，或者与本协议一方共同于另一法律实体的任何法律实体）使用，
|
||||
且广西福铭网络科技有限公司关联公司仅为了向您提供服务而使用您的相关信息。
|
||||
如广西福铭网络科技有限公司关联公司使用您的相关信息，则受本协议约束且会按照与广西福铭网络科技有限公司同等谨慎程度保护您的相关信息。
|
||||
</div>
|
||||
<div class="leading-relaxed">
|
||||
在您使用本服务过程中，特别是在申请提现、实名认证或佣金结算时，您需要提供包括但不限于姓名、身份证号、银行卡号、手机号、税务身份信息等个人资料。
|
||||
您同意我们为履行合同义务、税务申报、身份核验、财务结算等必要目的，收集、使用、存储并在必要范围内共享该等信息。
|
||||
在进行税务代扣代缴、结算服务时，我们有权将必要信息提供给依法合作的第三方税务服务商、结算服务商，前提是该第三方承担同等信息保护义务。
|
||||
</div>
|
||||
<div class="leading-relaxed">
|
||||
您有权查询、更正您的个人信息，也可以根据平台流程申请注销账户或停止使用相关服务，我们将根据法律要求妥善处理相关信息。
|
||||
</div>
|
||||
<div class="leading-relaxed">
|
||||
广西福铭网络科技有限公司就下列原因导致的您或被查询主体个人信息的泄露，不承担任何法律责任：
|
||||
</div>
|
||||
<div class="leading-relaxed">
|
||||
<div>
|
||||
（1）由于您个人原因将本服务的会员账号和密码告知他人或与他人共享广西福铭网络科技有限公司服务账户，由此导致的与您相关的信息的泄露。
|
||||
</div>
|
||||
<div>
|
||||
（2）您使用第三方提供的服务（包括您向第三方提供的任何个人信息），须受第三方自己的服务条款及个人信息保护协议（而非本协议）约束，您需要仔细阅读其条款。本协议仅适用于广西福铭网络科技有限公司所提供的服务，并不适用于任何第三方提供的服务或第三方的信息使用规则，广西福铭网络科技有限公司对任何第三方使用由您提供的信息不承担任何责任。
|
||||
</div>
|
||||
<div>
|
||||
（3）根据相关的法律法规、相关政府主管部门或相关证券交易所的要求提供、公布与您相关的信息。
|
||||
</div>
|
||||
<div>
|
||||
（4）或其他非因广西福铭网络科技有限公司原因导致的与您相关的信息的泄露。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<!-- 第四部分 -->
|
||||
<div class="mb-2 font-bold leading-relaxed">
|
||||
四、用户声明与保证
|
||||
</div>
|
||||
<div class="leading-relaxed">
|
||||
<div>
|
||||
（1）您使用本服务的前提是您依照适用的法律，是具有完全民事权利和民事行为能力，能够独立承担民事责任的自然人。
|
||||
</div>
|
||||
<div>
|
||||
（2）您如违反本协议第一条款中的承诺，您可能会对他人造成侵权。如由此给广西福铭网络科技有限公司或他人造成损失的，您需依照法律法规规定承担相应的法律责任。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<!-- 第五部分 -->
|
||||
<div class="mb-2 font-bold leading-relaxed">
|
||||
五、知识产权保护
|
||||
</div>
|
||||
<div class="leading-relaxed">
|
||||
本服务涉及的文档资料、软件、商标、图案、排版设计等（以下简称“广西福铭网络科技有限公司产品”）的著作权、商标以及其他知识产权或权益均为广西福铭网络科技有限公司享有或广西福铭网络科技有限公司获得授权使用。
|
||||
用户不得出租、出借、拷贝、仿冒、复制或修改广西福铭网络科技有限公司产品任何部分或用于其他任何商业目的，
|
||||
也不得将广西福铭网络科技有限公司产品做反向工程、反编译或反汇编，或以其他方式或工具取得广西福铭网络科技有限公司产品之目标程序或源代码。
|
||||
如果用户违反此约定，造成广西福铭网络科技有限公司及其他任何第三方任何损失的，甲方应予以全额赔偿。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<!-- 第六部分 -->
|
||||
<div class="mb-2 font-bold leading-relaxed">六、隐私保护</div>
|
||||
<div class="leading-relaxed">
|
||||
天远查保证不对外公开或向第三方提供单个用户的注册资料及存储在天远查的非公开内容，但下列情况下除外:
|
||||
</div>
|
||||
<div class="leading-relaxed">
|
||||
<div>1. 事先获得用户的明确授权;</div>
|
||||
<div>2. 根据有关的法律法规要求;</div>
|
||||
<div>3. 按照有关政府部门的要求;</div>
|
||||
<div>4. 为维护社会公众的利益;</div>
|
||||
<div>5. 为维护天远查的合法利益。</div>
|
||||
</div>
|
||||
<div class="leading-relaxed">
|
||||
在不透露单个用户隐私资料的前提下，天远查有权利对整个用户数据库进行分析并对用户数据库进行商业上的利用。
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<!-- 第七部分 -->
|
||||
<div class="mb-2 font-bold leading-relaxed">七、免责条款</div>
|
||||
<div class="leading-relaxed">
|
||||
<div>
|
||||
（一）不管基于任何直接的、间接的、特殊的、惩罚性的、惩戒性的、附带的、或结果性的损害、损失或费用，我们均不对其承担责任。即使有人告知我们或我们的员工存在出现这些损害、损失或费用的可能性。这些损害、损失或费用由以下这些情况引起或与这些情况有关：
|
||||
</div>
|
||||
<div>1. 使用我们网站上或其他链接网站上的信息；</div>
|
||||
<div>2. 无法使用这些信息；</div>
|
||||
<div>
|
||||
3.
|
||||
任何在操作或传输中出现的操作失败、错误、遗漏、中断、缺陷、延迟，计算机病毒，断线或系统运行失败。
|
||||
</div>
|
||||
</div>
|
||||
<div class="leading-relaxed">
|
||||
<div>
|
||||
（二）我们可以在不事先通知的情况下更改信息，并且不承担更新这些信息的义务。不经任何种类的授权，不做任何专门或暗指或法定的不侵犯第三方权利、名称、可出售性、出于某种特殊目的适当措施或不携带计算机病毒的保证。
|
||||
</div>
|
||||
</div>
|
||||
<div class="leading-relaxed">
|
||||
<div>
|
||||
（三）我们不对您查询信息内容的正确性、适当性、完整性、准确性、可靠性或适时性做出任何证明、声明和保证。我们不对任何因个人平台产生的错误、遗漏及失准承担任何责任。
|
||||
</div>
|
||||
</div>
|
||||
<div class="leading-relaxed">
|
||||
<div>
|
||||
（四）对于由于您违反本协议导致任何第三方针对我们及或我们的员工提出的任何申诉、起诉、要求或者诉讼或者其他法律程序，您同意自费作出赔偿并令其免受上述损害。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<!-- 第八部分 -->
|
||||
<div class="mb-2 font-bold leading-relaxed">八、违约</div>
|
||||
<div class="leading-relaxed">
|
||||
用户不得利用本服务进行任何损害广西福铭网络科技有限公司及其他第三方权益的行为，否则广西福铭网络科技有限公司有权立即终止为该用户提供本服务，并要求用户赔偿损失。由此产生的任何后果由用户自行承担，与广西福铭网络科技有限公司无关。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<!-- 第九部分 -->
|
||||
<div class="mb-2 font-bold leading-relaxed">
|
||||
九、数据来源及准确性说明
|
||||
</div>
|
||||
<div class="leading-relaxed">
|
||||
本产品数据来源于第三方，可能因数据未公开、更新延迟或信息受到限制，因此不一定能完全返回。不同数据格式及记录详细程度会有所差异，这是行业正常现象。本报告仅供参考，请结合实际情况做出决策。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<!-- 第十部分 -->
|
||||
<div class="mb-2 font-bold leading-relaxed">十、退款协议</div>
|
||||
<div class="leading-relaxed">
|
||||
除非由于本程序的技术性问题导致用户无法正常使用本产品，否则我们不提供任何退款服务。
|
||||
用户在购买前应仔细阅读本用户协议及相关使用条款，确保对本产品有充分了解。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<!-- 第十一部分 -->
|
||||
<div class="mb-2 font-bold leading-relaxed">
|
||||
十一、协议的变更和终止
|
||||
</div>
|
||||
<div class="leading-relaxed">
|
||||
鉴于网络服务的特殊性，我们变更本协议及其附件的若干条款时，将提前通过我们平台公告有关变更事项。
|
||||
修订后的条款或将来可能发布或更新的各类规则-经在我们平台公布后，立即自动生效。
|
||||
如您不同意相关修订，应当立即停止使用该项服务。
|
||||
如您在发布上述协议变更的有关公告后继续使用互联网查询的，视为您已接受协议的有关变更，并受其约束。
|
||||
本协议中的相关条款根据该变更而自动做相应修改，双方无须另行签订书面协议。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<!-- 第十二部分 -->
|
||||
<div class="mb-2 font-bold leading-relaxed">十二、适用法律</div>
|
||||
<div class="leading-relaxed">
|
||||
本协议条款的解释、效力及纠纷的解决，适用中华人民共和国大陆地区法律法规。
|
||||
如用户和广西福铭网络科技有限公司之间发生任何争议，首先应友好协商解决，协商不成的，应将争议提交至广西福铭网络科技有限公司注册地有管辖权的人民法院解决。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<!-- 第十三部分 -->
|
||||
<div class="mb-2 font-bold leading-relaxed">十三、问题咨询</div>
|
||||
<div class="leading-relaxed">
|
||||
如您对本协议及本服务有任何问题，请通过邮箱
|
||||
<text class="text-blue-500"> admin@iieeii.com </text> 或
|
||||
通过“联系客服”联系广西福铭网络科技有限公司进行咨询。
|
||||
广西福铭网络科技有限公司会尽最大努力解决您的问题。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<!-- 第十四部分 -->
|
||||
<div class="mb-2 font-bold leading-relaxed">十四、附则</div>
|
||||
<div class="leading-relaxed">
|
||||
<div>
|
||||
（一）本协议的某一条款被确认无效，均不影响本协议其他条款的效力。
|
||||
</div>
|
||||
<div>
|
||||
（二）本协议未尽事宜，根据我国相关法律、法规及我们相关业务规定办理。如需制定补充协议，其法律效力同本协议。
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 leading-relaxed">
|
||||
本协议通过点击同意/勾选的方式签署，自签署之日生效。
|
||||
</div>
|
||||
<div class="text-right text-sm">
|
||||
<text>本协议于 2024 年 11 月 17 日生效。</text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
272
src/views/VantThemeTest.vue
Normal file
272
src/views/VantThemeTest.vue
Normal file
@@ -0,0 +1,272 @@
|
||||
<template>
|
||||
<!-- Vant 主题色测试页面 -->
|
||||
<div class="vant-theme-test p-4">
|
||||
<van-nav-bar title="Vant主题色测试" left-arrow @click-left="onClickLeft" />
|
||||
|
||||
<div class="mt-4 space-y-4">
|
||||
<!-- 按钮组件测试 -->
|
||||
<div class="card">
|
||||
<h3 class="text-lg font-bold mb-3">按钮组件</h3>
|
||||
<div class="flex gap-2 flex-wrap">
|
||||
<van-button type="primary">主要按钮</van-button>
|
||||
<van-button type="success">成功按钮</van-button>
|
||||
<van-button type="warning">警告按钮</van-button>
|
||||
<van-button type="danger">危险按钮</van-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 开关组件测试 -->
|
||||
<div class="card">
|
||||
<h3 class="text-lg font-bold mb-3">开关组件</h3>
|
||||
<div class="flex items-center gap-4">
|
||||
<van-switch v-model="switchValue" />
|
||||
<span>开关状态: {{ switchValue ? '开启' : '关闭' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 复选框组件测试 -->
|
||||
<div class="card">
|
||||
<h3 class="text-lg font-bold mb-3">复选框组件</h3>
|
||||
<div class="space-y-2">
|
||||
<van-checkbox v-model="checkboxValue1">选项1</van-checkbox>
|
||||
<van-checkbox v-model="checkboxValue2">选项2</van-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 单选框组件测试 -->
|
||||
<div class="card">
|
||||
<h3 class="text-lg font-bold mb-3">单选框组件</h3>
|
||||
<div class="space-y-2">
|
||||
<van-radio v-model="radioValue" name="1">选项1</van-radio>
|
||||
<van-radio v-model="radioValue" name="2">选项2</van-radio>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 滑动条组件测试 -->
|
||||
<div class="card">
|
||||
<h3 class="text-lg font-bold mb-3">滑动条组件</h3>
|
||||
<van-slider v-model="sliderValue" />
|
||||
<p class="text-sm text-gray-600 mt-2">当前值: {{ sliderValue }}</p>
|
||||
</div>
|
||||
|
||||
<!-- 进度条组件测试 -->
|
||||
<div class="card">
|
||||
<h3 class="text-lg font-bold mb-3">进度条组件</h3>
|
||||
<van-progress :percentage="progressValue" />
|
||||
<p class="text-sm text-gray-600 mt-2">进度: {{ progressValue }}%</p>
|
||||
</div>
|
||||
|
||||
<!-- 评分组件测试 -->
|
||||
<div class="card">
|
||||
<h3 class="text-lg font-bold mb-3">评分组件</h3>
|
||||
<van-rate v-model="rateValue" />
|
||||
<p class="text-sm text-gray-600 mt-2">评分: {{ rateValue }} 星</p>
|
||||
</div>
|
||||
|
||||
<!-- 步进器组件测试 -->
|
||||
<div class="card">
|
||||
<h3 class="text-lg font-bold mb-3">步进器组件</h3>
|
||||
<van-stepper v-model="stepperValue" />
|
||||
<p class="text-sm text-gray-600 mt-2">当前值: {{ stepperValue }}</p>
|
||||
</div>
|
||||
|
||||
<!-- 标签组件测试 -->
|
||||
<div class="card">
|
||||
<h3 class="text-lg font-bold mb-3">标签组件</h3>
|
||||
<div class="flex gap-2 flex-wrap">
|
||||
<van-tag type="primary">主要标签</van-tag>
|
||||
<van-tag type="success">成功标签</van-tag>
|
||||
<van-tag type="warning">警告标签</van-tag>
|
||||
<van-tag type="danger">危险标签</van-tag>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 徽章组件测试 -->
|
||||
<div class="card">
|
||||
<h3 class="text-lg font-bold mb-3">徽章组件</h3>
|
||||
<div class="flex gap-4">
|
||||
<van-badge content="5">
|
||||
<div class="w-8 h-8 bg-gray-200 rounded"></div>
|
||||
</van-badge>
|
||||
<van-badge content="99+">
|
||||
<div class="w-8 h-8 bg-gray-200 rounded"></div>
|
||||
</van-badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 通知栏组件测试 -->
|
||||
<div class="card">
|
||||
<h3 class="text-lg font-bold mb-3">通知栏组件</h3>
|
||||
<van-notice-bar left-icon="volume-o" text="这是一条通知栏消息，用于测试主题色配置效果。" />
|
||||
</div>
|
||||
|
||||
<!-- 轮播图组件测试 -->
|
||||
<div class="card">
|
||||
<h3 class="text-lg font-bold mb-3">轮播图组件</h3>
|
||||
<van-swipe :autoplay="3000" indicator-color="white">
|
||||
<van-swipe-item>
|
||||
<div
|
||||
class="h-32 bg-gradient-to-r from-blue-400 to-purple-500 flex items-center justify-center text-white">
|
||||
轮播图 1
|
||||
</div>
|
||||
</van-swipe-item>
|
||||
<van-swipe-item>
|
||||
<div
|
||||
class="h-32 bg-gradient-to-r from-green-400 to-blue-500 flex items-center justify-center text-white">
|
||||
轮播图 2
|
||||
</div>
|
||||
</van-swipe-item>
|
||||
<van-swipe-item>
|
||||
<div
|
||||
class="h-32 bg-gradient-to-r from-purple-400 to-pink-500 flex items-center justify-center text-white">
|
||||
轮播图 3
|
||||
</div>
|
||||
</van-swipe-item>
|
||||
</van-swipe>
|
||||
</div>
|
||||
|
||||
<!-- 加载组件测试 -->
|
||||
<div class="card">
|
||||
<h3 class="text-lg font-bold mb-3">加载组件</h3>
|
||||
<div class="flex gap-4 items-center">
|
||||
<van-loading type="spinner" />
|
||||
<van-loading type="circular" />
|
||||
<span>加载中...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 步骤条组件测试 -->
|
||||
<div class="card">
|
||||
<h3 class="text-lg font-bold mb-3">步骤条组件</h3>
|
||||
<van-steps :active="2" active-icon="success" inactive-icon="arrow">
|
||||
<van-step>步骤一</van-step>
|
||||
<van-step>步骤二</van-step>
|
||||
<van-step>步骤三</van-step>
|
||||
</van-steps>
|
||||
</div>
|
||||
|
||||
<!-- 弹窗测试 -->
|
||||
<div class="card">
|
||||
<h3 class="text-lg font-bold mb-3">弹窗组件</h3>
|
||||
<van-button type="primary" @click="showDialog = true">显示弹窗</van-button>
|
||||
<van-dialog v-model:show="showDialog" title="主题色测试" message="这是一个测试弹窗，用于验证主题色配置效果。"
|
||||
show-cancel-button />
|
||||
</div>
|
||||
|
||||
<!-- 动作面板测试 -->
|
||||
<div class="card">
|
||||
<h3 class="text-lg font-bold mb-3">动作面板组件</h3>
|
||||
<van-button type="primary" @click="showActionSheet = true">显示动作面板</van-button>
|
||||
<van-action-sheet v-model:show="showActionSheet" :actions="actions" @select="onSelect" />
|
||||
</div>
|
||||
|
||||
<!-- Toast 测试 -->
|
||||
<div class="card">
|
||||
<h3 class="text-lg font-bold mb-3">Toast 提示组件</h3>
|
||||
<div class="flex gap-2 flex-wrap">
|
||||
<van-button type="primary" @click="showSuccessToast">成功提示</van-button>
|
||||
<van-button type="warning" @click="showFailToast">失败提示</van-button>
|
||||
<van-button type="default" @click="showTextToast">文字提示</van-button>
|
||||
<van-button type="success" @click="showLoadingToastHandler">加载提示</van-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 颜色说明 -->
|
||||
<div class="card">
|
||||
<h3 class="text-lg font-bold mb-3">主题色说明</h3>
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-4 h-4 rounded" style="background-color: var(--van-theme-primary);"></div>
|
||||
<span>主色调: <span class="font-mono">var(--van-theme-primary)</span></span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-600">
|
||||
以上所有组件的主色调都已配置为 <span class="font-mono">#5d7eeb</span>，通过 <span
|
||||
class="font-mono">var(--van-theme-primary)</span>
|
||||
CSS变量统一管理。包括按钮、开关、复选框、单选框等组件的激活状态。通过修改CSS变量可以轻松更改整个主题。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 测试数据
|
||||
const switchValue = ref(true)
|
||||
const checkboxValue1 = ref(true)
|
||||
const checkboxValue2 = ref(false)
|
||||
const radioValue = ref('1')
|
||||
const sliderValue = ref(50)
|
||||
const progressValue = ref(75)
|
||||
const rateValue = ref(4)
|
||||
const stepperValue = ref(1)
|
||||
const showDialog = ref(false)
|
||||
const showActionSheet = ref(false)
|
||||
|
||||
// 动作面板选项
|
||||
const actions = [
|
||||
{ name: '选项一', color: 'var(--van-theme-primary)' },
|
||||
{ name: '选项二', color: 'var(--van-theme-primary)' },
|
||||
{ name: '选项三', color: 'var(--van-theme-primary)' },
|
||||
]
|
||||
|
||||
// 选择动作面板选项
|
||||
const onSelect = (action) => {
|
||||
console.log('选择了:', action.name)
|
||||
showActionSheet.value = false
|
||||
}
|
||||
|
||||
// Toast 测试方法
|
||||
const showSuccessToast = () => {
|
||||
showToast({
|
||||
type: 'success',
|
||||
message: '操作成功！',
|
||||
duration: 2000
|
||||
})
|
||||
}
|
||||
|
||||
const showFailToast = () => {
|
||||
showToast({
|
||||
type: 'fail',
|
||||
message: '操作失败，请重试',
|
||||
duration: 2000
|
||||
})
|
||||
}
|
||||
|
||||
const showTextToast = () => {
|
||||
showToast({
|
||||
message: '这是一条普通的文字提示',
|
||||
duration: 2000
|
||||
})
|
||||
}
|
||||
|
||||
const showLoadingToastHandler = () => {
|
||||
const toast = showLoadingToast({
|
||||
message: "加载中...",
|
||||
forbidClick: true,
|
||||
duration: 0, // 设置为 0 表示不会自动关闭
|
||||
loadingType: "spinner",
|
||||
});
|
||||
|
||||
// 3秒后关闭加载提示
|
||||
setTimeout(() => {
|
||||
toast.close()
|
||||
showToast({
|
||||
type: 'success',
|
||||
message: '加载完成！'
|
||||
})
|
||||
}, 3000)
|
||||
}
|
||||
|
||||
// 返回上一页
|
||||
const onClickLeft = () => {
|
||||
window.history.back()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vant-theme-test {
|
||||
min-height: 100vh;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
</style>
|
||||
832
src/views/Withdraw.vue
Normal file
832
src/views/Withdraw.vue
Normal file
@@ -0,0 +1,832 @@
|
||||
<template>
|
||||
<div class="p-4 bg-gradient-to-b from-blue-50/30 to-gray-50 min-h-screen">
|
||||
<!-- 实名认证提示 -->
|
||||
<div v-if="!agentStore.isRealName" class="mb-4">
|
||||
<div class="rounded-xl shadow-lg p-6" style="background-color: var(--van-theme-primary-light);">
|
||||
<div class="flex items-center mb-3">
|
||||
<van-icon name="warning-o" class="text-xl mr-2" style="color: var(--van-theme-primary);" />
|
||||
<h2 class="text-lg font-bold" style="color: var(--van-text-color);">
|
||||
未完成实名认证
|
||||
</h2>
|
||||
</div>
|
||||
<p class="text-sm mb-4" style="color: var(--van-text-color-2);">
|
||||
根据相关规定，提现功能需要完成实名认证后才能使用，提现金额将转入您实名认证的账户中。
|
||||
</p>
|
||||
<van-button type="primary" block class="text-white rounded-xl h-10"
|
||||
style="background-color: var(--van-theme-primary);"
|
||||
@click="openRealNameAuth">
|
||||
立即实名认证
|
||||
</van-button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<!-- 提现方式切换标签 -->
|
||||
<van-tabs v-if="showTabs" v-model:active="activeTab" class="mb-4" @change="onTabChange">
|
||||
<van-tab v-if="showAlipay" title="支付宝提现" name="alipay">
|
||||
<div class="rounded-xl shadow-lg p-6 mb-4 mt-4"
|
||||
style="background: linear-gradient(135deg, var(--van-theme-primary-light), rgba(255,255,255,0.8));">
|
||||
<div class="flex items-center mb-6">
|
||||
<van-icon name="alipay" class="text-xl mr-2" style="color: #1677FF;" />
|
||||
<h1 class="text-xl font-bold" style="color: var(--van-text-color);">支付宝提现</h1>
|
||||
</div>
|
||||
|
||||
<!-- 支付宝账号 -->
|
||||
<div class="mb-6">
|
||||
<label class="text-sm mb-2 block" style="color: var(--van-text-color);">支付宝账号</label>
|
||||
<van-field v-model="alipayAccount" placeholder="请输入支付宝账号"
|
||||
class="flex items-center rounded-lg bg-white/90 backdrop-blur-sm shadow-sm"
|
||||
:rules="[{ required: true, message: ' ' }]">
|
||||
<template #left-icon>
|
||||
<van-icon name="phone-o" style="color: var(--van-text-color-2);" />
|
||||
</template>
|
||||
</van-field>
|
||||
<small class="text-xs mt-1 block"
|
||||
style="color: var(--van-text-color-2);">可填写支付宝账户绑定的手机号</small>
|
||||
</div>
|
||||
<!-- 支付宝实名姓名 -->
|
||||
<div class="mb-6">
|
||||
<label class="text-sm mb-2 block" style="color: var(--van-text-color);">实名姓名</label>
|
||||
<van-field v-model="alipayRealName" placeholder="请输入支付宝认证姓名"
|
||||
class="flex items-center rounded-lg bg-white/90 backdrop-blur-sm shadow-sm" :rules="[
|
||||
{
|
||||
required: true,
|
||||
message: ' ',
|
||||
validator: (val) =>
|
||||
/^[\u4e00-\u9fa5]{2,4}$/.test(val),
|
||||
},
|
||||
]">
|
||||
<template #left-icon>
|
||||
<van-icon name="contact-o" style="color: var(--van-text-color-2);" />
|
||||
</template>
|
||||
</van-field>
|
||||
<small class="text-xs mt-1 block"
|
||||
style="color: var(--van-text-color-2);">请填写支付宝账户认证的真实姓名</small>
|
||||
</div>
|
||||
</div>
|
||||
</van-tab>
|
||||
<van-tab v-if="showBankcard" title="银行卡提现" name="bankcard">
|
||||
<div class="rounded-xl shadow-lg p-6 mb-4 mt-4"
|
||||
style="background: linear-gradient(135deg, var(--van-theme-primary-light), rgba(255,255,255,0.8));">
|
||||
<div class="flex items-center mb-6">
|
||||
<van-icon name="credit-pay" class="text-xl mr-2" style="color: #1677FF;" />
|
||||
<h1 class="text-xl font-bold" style="color: var(--van-text-color);">银行卡提现</h1>
|
||||
</div>
|
||||
|
||||
<!-- 实名信息展示 -->
|
||||
<div v-if="bankCardInfo.payee_name" class="mb-4 p-4 rounded-lg"
|
||||
style="background-color: rgba(22, 119, 255, 0.1);">
|
||||
<div class="text-xs mb-2" style="color: var(--van-text-color-2);">您的实名信息</div>
|
||||
<div class="text-sm" style="color: var(--van-text-color);">
|
||||
<div class="mb-1">姓名：<span class="font-semibold">{{ bankCardInfo.payee_name }}</span>
|
||||
</div>
|
||||
<div>身份证号：<span class="font-semibold">{{ formatIdCard(bankCardInfo.id_card) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-xs mt-2" style="color: #f59e0b;">
|
||||
<van-icon name="warning-o" class="mr-1" />提示：银行卡信息需与实名认证信息一致
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 银行卡号 -->
|
||||
<div class="mb-6">
|
||||
<label class="text-sm mb-2 block" style="color: var(--van-text-color);">银行卡号</label>
|
||||
<van-field v-model="bankCardNo" type="number" placeholder="请输入银行卡号（16-19位）"
|
||||
class="flex items-center rounded-lg bg-white/90 backdrop-blur-sm shadow-sm" :rules="[
|
||||
{ required: true, message: ' ' },
|
||||
{ validator: validateBankCardNo, message: ' ' },
|
||||
]">
|
||||
<template #left-icon>
|
||||
<van-icon name="credit-pay" style="color: var(--van-text-color-2);" />
|
||||
</template>
|
||||
</van-field>
|
||||
<small class="text-xs mt-1 block"
|
||||
style="color: var(--van-text-color-2);">请输入16-19位银行卡号</small>
|
||||
</div>
|
||||
<!-- 开户支行 -->
|
||||
<div class="mb-6">
|
||||
<label class="text-sm mb-2 block" style="color: var(--van-text-color);">开户支行</label>
|
||||
<van-field v-model="bankName" placeholder="请输入开户支行"
|
||||
class="flex items-center rounded-lg bg-white/90 backdrop-blur-sm shadow-sm"
|
||||
:rules="[{ required: true, message: ' ' }]">
|
||||
<template #left-icon>
|
||||
<van-icon name="location-o" style="color: var(--van-text-color-2);" />
|
||||
</template>
|
||||
</van-field>
|
||||
<small class="text-xs mt-1 block"
|
||||
style="color: var(--van-text-color-2);">例如：中国工商银行XX支行</small>
|
||||
</div>
|
||||
</div>
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
|
||||
<!-- 如果只显示一种方式，不显示 tabs，直接显示内容 -->
|
||||
<div v-if="!showTabs">
|
||||
<!-- 只显示支付宝提现 -->
|
||||
<div v-if="showAlipay && !showBankcard" class="rounded-xl shadow-lg p-6 mb-4 mt-4"
|
||||
style="background: linear-gradient(135deg, var(--van-theme-primary-light), rgba(255,255,255,0.8));">
|
||||
<div class="flex items-center mb-6">
|
||||
<van-icon name="alipay" class="text-xl mr-2" style="color: #1677FF;" />
|
||||
<h1 class="text-xl font-bold" style="color: var(--van-text-color);">支付宝提现</h1>
|
||||
</div>
|
||||
|
||||
<!-- 支付宝账号 -->
|
||||
<div class="mb-6">
|
||||
<label class="text-sm mb-2 block" style="color: var(--van-text-color);">支付宝账号</label>
|
||||
<van-field v-model="alipayAccount" placeholder="请输入支付宝账号"
|
||||
class="flex items-center rounded-lg bg-white/90 backdrop-blur-sm shadow-sm"
|
||||
:rules="[{ required: true, message: ' ' }]">
|
||||
<template #left-icon>
|
||||
<van-icon name="phone-o" style="color: var(--van-text-color-2);" />
|
||||
</template>
|
||||
</van-field>
|
||||
<small class="text-xs mt-1 block" style="color: var(--van-text-color-2);">可填写支付宝账户绑定的手机号</small>
|
||||
</div>
|
||||
<!-- 支付宝实名姓名 -->
|
||||
<div class="mb-6">
|
||||
<label class="text-sm mb-2 block" style="color: var(--van-text-color);">实名姓名</label>
|
||||
<van-field v-model="alipayRealName" placeholder="请输入支付宝认证姓名"
|
||||
class="flex items-center rounded-lg bg-white/90 backdrop-blur-sm shadow-sm" :rules="[
|
||||
{
|
||||
required: true,
|
||||
message: ' ',
|
||||
validator: (val) =>
|
||||
/^[\u4e00-\u9fa5]{2,4}$/.test(val),
|
||||
},
|
||||
]">
|
||||
<template #left-icon>
|
||||
<van-icon name="contact-o" style="color: var(--van-text-color-2);" />
|
||||
</template>
|
||||
</van-field>
|
||||
<small class="text-xs mt-1 block"
|
||||
style="color: var(--van-text-color-2);">请填写支付宝账户认证的真实姓名</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 只显示银行卡提现 -->
|
||||
<div v-if="showBankcard && !showAlipay" class="rounded-xl shadow-lg p-6 mb-4 mt-4"
|
||||
style="background: linear-gradient(135deg, var(--van-theme-primary-light), rgba(255,255,255,0.8));">
|
||||
<div class="flex items-center mb-6">
|
||||
<van-icon name="credit-pay" class="text-xl mr-2" style="color: #1677FF;" />
|
||||
<h1 class="text-xl font-bold" style="color: var(--van-text-color);">银行卡提现</h1>
|
||||
</div>
|
||||
|
||||
<!-- 实名信息展示 -->
|
||||
<div v-if="bankCardInfo.payee_name" class="mb-4 p-4 rounded-lg"
|
||||
style="background-color: rgba(22, 119, 255, 0.1);">
|
||||
<div class="text-xs mb-2" style="color: var(--van-text-color-2);">您的实名信息</div>
|
||||
<div class="text-sm" style="color: var(--van-text-color);">
|
||||
<div class="mb-1">姓名：<span class="font-semibold">{{ bankCardInfo.payee_name }}</span>
|
||||
</div>
|
||||
<div>身份证号：<span class="font-semibold">{{ formatIdCard(bankCardInfo.id_card) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-xs mt-2" style="color: #f59e0b;">
|
||||
<van-icon name="warning-o" class="mr-1" />提示：银行卡信息需与实名认证信息一致
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 银行卡号 -->
|
||||
<div class="mb-6">
|
||||
<label class="text-sm mb-2 block" style="color: var(--van-text-color);">银行卡号</label>
|
||||
<van-field v-model="bankCardNo" type="number" placeholder="请输入银行卡号（16-19位）"
|
||||
class="flex items-center rounded-lg bg-white/90 backdrop-blur-sm shadow-sm" :rules="[
|
||||
{ required: true, message: ' ' },
|
||||
{ validator: validateBankCardNo, message: ' ' },
|
||||
]">
|
||||
<template #left-icon>
|
||||
<van-icon name="credit-pay" style="color: var(--van-text-color-2);" />
|
||||
</template>
|
||||
</van-field>
|
||||
<small class="text-xs mt-1 block" style="color: var(--van-text-color-2);">请输入16-19位银行卡号</small>
|
||||
</div>
|
||||
<!-- 开户支行 -->
|
||||
<div class="mb-6">
|
||||
<label class="text-sm mb-2 block" style="color: var(--van-text-color);">开户支行</label>
|
||||
<van-field v-model="bankName" placeholder="请输入开户支行"
|
||||
class="flex items-center rounded-lg bg-white/90 backdrop-blur-sm shadow-sm"
|
||||
:rules="[{ required: true, message: ' ' }]">
|
||||
<template #left-icon>
|
||||
<van-icon name="location-o" style="color: var(--van-text-color-2);" />
|
||||
</template>
|
||||
</van-field>
|
||||
<small class="text-xs mt-1 block" style="color: var(--van-text-color-2);">例如：中国工商银行XX支行</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 提现金额（共用） -->
|
||||
<div class="mb-4">
|
||||
<label class="text-sm mb-2 block" style="color: var(--van-text-color);">提现金额</label>
|
||||
<van-field v-model.number="amount" type="number" placeholder="请输入提现金额"
|
||||
class="flex items-center rounded-lg bg-white/90 backdrop-blur-sm shadow-sm" :rules="[
|
||||
{ required: true, message: ' ' },
|
||||
{ validator: validateAmount, message: ' ' },
|
||||
]">
|
||||
<template #left-icon>
|
||||
<van-icon name="gold-coin-o" style="color: var(--van-text-color-2);" />
|
||||
</template>
|
||||
<template #right-icon> 元 </template>
|
||||
<template #button>
|
||||
<van-button size="small" type="primary" class="rounded-full px-3 shadow-sm"
|
||||
style="background-color: var(--van-theme-primary); color: white;" @click="fillMaxAmount">
|
||||
全部提现
|
||||
</van-button>
|
||||
</template>
|
||||
</van-field>
|
||||
</div>
|
||||
|
||||
<!-- 金额提示 -->
|
||||
<div class="text-sm mb-2" style="color: var(--van-text-color);">
|
||||
可提现金额：<span class="font-semibold" style="color: var(--van-theme-primary);">¥{{ availableAmount }}</span>
|
||||
</div>
|
||||
|
||||
<!-- 提现规则 -->
|
||||
<div class="p-4 rounded-xl backdrop-blur-sm mb-4" style="background-color: var(--van-theme-primary-light);">
|
||||
<div class="flex items-center text-sm mb-2" style="color: var(--van-theme-primary);">
|
||||
<van-icon name="warning" class="mr-1" />提现须知
|
||||
</div>
|
||||
<ul class="text-xs space-y-1" style="color: var(--van-text-color);">
|
||||
<li>· 每日限提现1次，最低50元</li>
|
||||
<li>· 提现收取6%税收</li>
|
||||
<li v-if="activeTab === 'alipay'">· 到账时间：24小时内</li>
|
||||
<li v-else>· 到账时间：管理员审核后手动转账</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 税收说明 -->
|
||||
<div class="p-4 rounded-xl backdrop-blur-sm mb-4" style="background-color: rgba(251, 191, 36, 0.1);">
|
||||
<div class="flex items-center text-sm mb-2" style="color: #f59e0b;">
|
||||
<van-icon name="info-o" class="mr-1" />税收说明
|
||||
</div>
|
||||
<div class="text-xs leading-relaxed" style="color: var(--van-text-color);">
|
||||
<p>根据相关规定，提现时将统一收取6%的税收，该税收用于相关税费支出。</p>
|
||||
<p class="mt-2" style="color: #f59e0b;">• 税率标准：统一按6%收取</p>
|
||||
<p style="color: #f59e0b;">• 适用范围：所有提现金额</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 提交按钮 -->
|
||||
<van-button type="primary" block :loading="isSubmitting"
|
||||
class="text-white rounded-xl shadow-lg h-12 font-bold text-base"
|
||||
style="background: linear-gradient(135deg, var(--van-theme-primary), var(--van-theme-primary-dark));"
|
||||
@click="handleSubmit">
|
||||
立即提现
|
||||
</van-button>
|
||||
</div>
|
||||
|
||||
<!-- 税务确认弹窗 -->
|
||||
<van-popup v-model:show="showTaxConfirmPopup" round position="center"
|
||||
:style="{ width: '85%', borderRadius: '20px' }" :overlay-style="{ backgroundColor: 'rgba(0,0,0,0.4)' }">
|
||||
<div class="p-8 bg-gradient-to-b from-white to-blue-50/30 relative">
|
||||
<div class="text-center space-y-5">
|
||||
<!-- 标题 -->
|
||||
<div>
|
||||
<h2 class="text-xl font-semibold text-gray-800 mb-2">提现确认</h2>
|
||||
<p class="text-sm text-gray-500">请确认以下提现信息</p>
|
||||
</div>
|
||||
|
||||
<!-- 金额详情 -->
|
||||
<div class="rounded-xl p-4 space-y-3" style="background-color: var(--van-background-color-light);">
|
||||
<div class="flex justify-between items-center">
|
||||
<span style="color: var(--van-text-color-2);">提现金额：</span>
|
||||
<span class="font-semibold" style="color: var(--van-text-color);">¥{{ amount }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span style="color: var(--van-text-color-2);">税收：</span>
|
||||
<span class="font-semibold text-red-500">
|
||||
-¥{{ taxAmount.toFixed(2) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="border-t pt-2" style="border-color: var(--van-border-color);">
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="font-medium" style="color: var(--van-text-color);">实际到账：</span>
|
||||
<span class="font-bold text-lg" style="color: var(--van-theme-primary);">¥{{ actualAmount.toFixed(2) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 提示信息 -->
|
||||
<div class="bg-blue-50 rounded-lg p-3 text-xs">
|
||||
<p class="text-blue-600 font-medium mb-2">
|
||||
税收说明
|
||||
</p>
|
||||
<div class="text-gray-600 space-y-1">
|
||||
<p>• 提现金额：¥{{ amount }}</p>
|
||||
<p>• 税率：6%</p>
|
||||
<p class="text-blue-600">• 税收计算：¥{{ amount }} × 6% = ¥{{ taxAmount.toFixed(2) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="flex space-x-3 mt-6">
|
||||
<van-button block round class="flex-1 h-11"
|
||||
style="background-color: var(--van-background-color-light); color: var(--van-text-color-2);"
|
||||
@click="showTaxConfirmPopup = false">
|
||||
取消
|
||||
</van-button>
|
||||
<van-button block round class="flex-1 h-11 font-medium shadow-sm"
|
||||
style="background-color: var(--van-theme-primary); color: white;"
|
||||
:loading="isSubmitting" @click="confirmWithdraw">
|
||||
确认提现
|
||||
</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
|
||||
<!-- 提现结果弹窗 -->
|
||||
<van-popup v-model:show="showStatusPopup" round position="center"
|
||||
:style="{ width: '85%', borderRadius: '20px' }" :overlay-style="{ backgroundColor: 'rgba(0,0,0,0.4)' }">
|
||||
<div class="p-8 bg-gradient-to-b from-white to-blue-50/30 relative">
|
||||
<!-- 状态内容 -->
|
||||
<div class="text-center space-y-5">
|
||||
<!-- 状态图标 -->
|
||||
<div class="relative inline-block">
|
||||
<div class="absolute inset-0 bg-gradient-to-r opacity-20 rounded-full animate-pulse blur-sm"
|
||||
:class="statusBg[status]"></div>
|
||||
<van-icon :name="statusIcon[status]" size="56" class="p-1 rounded-full border-[3px]"
|
||||
:class="statusIconClass[status]" />
|
||||
</div>
|
||||
|
||||
<!-- 状态文案 -->
|
||||
<div>
|
||||
<h2 class="text-xl font-semibold mb-1" :class="statusTextColors[status]">
|
||||
{{ statusMessages[status] }}
|
||||
</h2>
|
||||
<template v-if="status === 2">
|
||||
<p class="text-sm" style="color: var(--van-text-color-2);">
|
||||
<span v-if="activeTab === 'alipay'">
|
||||
已向
|
||||
<span style="color: var(--van-theme-primary);">{{ alipayAccount }}</span>
|
||||
转账
|
||||
</span>
|
||||
<span v-else>
|
||||
提现申请已通过，管理员将手动转账
|
||||
</span>
|
||||
</p>
|
||||
<p class="text-2xl font-bold mt-2" style="color: #10b981;">
|
||||
¥{{ amount }}
|
||||
</p>
|
||||
</template>
|
||||
<template v-if="status === 3">
|
||||
<p class="text-sm px-4" style="color: #ef4444;">
|
||||
{{ failMsg }}
|
||||
</p>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- 进度条（处理中状态） -->
|
||||
<van-progress v-if="status === 1" :percentage="60" stroke-width="8"
|
||||
:color="`linear-gradient(to right, var(--van-theme-primary), var(--van-theme-primary-light))`"
|
||||
:track-color="`var(--van-theme-primary-light)`"
|
||||
class="!rounded-full" />
|
||||
|
||||
<!-- 辅助文案 -->
|
||||
<div class="text-xs space-y-1.5" style="color: var(--van-text-color-2);">
|
||||
<template v-if="status === 2">
|
||||
<p v-if="activeTab === 'alipay'">预计24小时内到账</p>
|
||||
<p v-else>请等待管理员审核并转账</p>
|
||||
</template>
|
||||
<template v-if="status === 1">
|
||||
<p v-if="activeTab === 'alipay'">您的申请已进入处理队列</p>
|
||||
<p v-else>您的申请已提交，等待管理员审核</p>
|
||||
<p>可在提现记录中查看结果</p>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<van-button block round size="small"
|
||||
class="mt-4 h-11 font-medium shadow-sm"
|
||||
:style="{ backgroundColor: statusButtonColor[status], color: status === 1 ? 'var(--van-theme-primary)' : 'white' }"
|
||||
@click="handlePopupAction">
|
||||
{{
|
||||
status === 1
|
||||
? "知道了"
|
||||
: status === 2
|
||||
? "完成"
|
||||
: "重新提现"
|
||||
}}
|
||||
</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
</div>
|
||||
<!-- 引入实名认证对话框 -->
|
||||
<RealNameAuthDialog />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onBeforeMount } from "vue";
|
||||
import { showToast } from "vant";
|
||||
import RealNameAuthDialog from "@/components/RealNameAuthDialog.vue";
|
||||
|
||||
const agentStore = useAgentStore();
|
||||
const dialogStore = useDialogStore();
|
||||
|
||||
// ========== 提现方式配置开关 ==========
|
||||
// 可以通过环境变量或后端接口控制
|
||||
// 配置选项：
|
||||
// - 'alipay': 只显示支付宝提现
|
||||
// - 'bankcard': 只显示银行卡提现
|
||||
// - 'both': 显示两种提现方式（默认）
|
||||
// - 数组形式: ['alipay', 'bankcard'] 或 ['alipay'] 或 ['bankcard']
|
||||
const WITHDRAW_CONFIG = import.meta.env.VITE_WITHDRAW_METHODS || ['alipay', 'bankcard'];
|
||||
// 解析配置：支持字符串和数组格式
|
||||
const getWithdrawMethods = () => {
|
||||
if (Array.isArray(WITHDRAW_CONFIG)) {
|
||||
return WITHDRAW_CONFIG;
|
||||
}
|
||||
if (typeof WITHDRAW_CONFIG === 'string') {
|
||||
if (WITHDRAW_CONFIG === 'alipay') return ['alipay'];
|
||||
if (WITHDRAW_CONFIG === 'bankcard') return ['bankcard'];
|
||||
if (WITHDRAW_CONFIG === 'both') return ['alipay', 'bankcard'];
|
||||
// 支持逗号分隔的字符串: "alipay,bankcard" 或 "alipay" 或 "bankcard"
|
||||
return WITHDRAW_CONFIG.split(',').map(s => s.trim()).filter(Boolean);
|
||||
}
|
||||
return ['alipay', 'bankcard']; // 默认都显示
|
||||
};
|
||||
|
||||
const enabledMethods = getWithdrawMethods();
|
||||
const showAlipay = enabledMethods.includes('alipay');
|
||||
const showBankcard = enabledMethods.includes('bankcard');
|
||||
const showTabs = showAlipay && showBankcard; // 只有两种都显示时才显示 tabs
|
||||
|
||||
// 标签页管理
|
||||
const getInitialTab = () => {
|
||||
// 如果只显示一种方式，直接设置为该方式
|
||||
if (showAlipay && !showBankcard) return 'alipay';
|
||||
if (showBankcard && !showAlipay) return 'bankcard';
|
||||
// 如果两种都显示，默认支付宝
|
||||
return 'alipay';
|
||||
};
|
||||
const activeTab = ref(getInitialTab());
|
||||
|
||||
// 状态管理
|
||||
const status = ref(null);
|
||||
const failMsg = ref("");
|
||||
const isSubmitting = ref(false);
|
||||
const showStatusPopup = ref(false);
|
||||
const showTaxConfirmPopup = ref(false);
|
||||
|
||||
// 税务
|
||||
const taxFreeAmount = ref(0);
|
||||
const usedExemptionAmount = ref(0);
|
||||
const remainingExemptionAmount = ref(0);
|
||||
const taxRate = ref(0);
|
||||
|
||||
// 计算扣税金额和实际到账金额
|
||||
const taxAmount = computed(() => {
|
||||
if (!amount.value) return 0;
|
||||
const withdrawAmount = Number(amount.value);
|
||||
return withdrawAmount * 0.06;
|
||||
});
|
||||
|
||||
const actualAmount = computed(() => {
|
||||
if (!amount.value) return 0;
|
||||
return Number(amount.value) - taxAmount.value;
|
||||
});
|
||||
|
||||
// 样式配置
|
||||
const statusIcon = {
|
||||
1: "clock",
|
||||
2: "checked",
|
||||
3: "close",
|
||||
};
|
||||
|
||||
const statusIconClass = {
|
||||
1: "text-blue-400 border-blue-100 bg-blue-50",
|
||||
2: "text-green-500 border-green-100 bg-green-50",
|
||||
3: "text-red-500 border-red-100 bg-red-50",
|
||||
};
|
||||
|
||||
const statusBg = {
|
||||
1: "from-blue-100 to-blue-50",
|
||||
2: "from-green-100 to-green-50",
|
||||
3: "from-red-100 to-red-50",
|
||||
};
|
||||
|
||||
const statusTextColors = {
|
||||
1: "text-blue-600",
|
||||
2: "text-green-600",
|
||||
3: "text-red-600",
|
||||
};
|
||||
|
||||
const statusButtonColor = {
|
||||
1: "var(--van-theme-primary-light)",
|
||||
2: "#10b981",
|
||||
3: "#ef4444",
|
||||
};
|
||||
|
||||
const statusMessages = {
|
||||
1: activeTab.value === 'alipay' ? "提现申请处理中，请稍后再查询结果" : "提现申请已提交，等待管理员审核",
|
||||
2: "提现成功",
|
||||
3: "提现失败",
|
||||
};
|
||||
|
||||
// 表单数据 - 支付宝
|
||||
const alipayAccount = ref("");
|
||||
const alipayRealName = ref("");
|
||||
|
||||
// 表单数据 - 银行卡
|
||||
const bankCardNo = ref("");
|
||||
const bankName = ref("");
|
||||
const bankCardInfo = ref({
|
||||
bank_card_no: "",
|
||||
bank_name: "",
|
||||
payee_name: "",
|
||||
id_card: "",
|
||||
});
|
||||
|
||||
// 共用数据
|
||||
const amount = ref(0);
|
||||
const availableAmount = ref(null);
|
||||
|
||||
// 标签页切换
|
||||
const onTabChange = (name) => {
|
||||
if (name === 'bankcard') {
|
||||
loadBankCardInfo();
|
||||
}
|
||||
resetForm();
|
||||
};
|
||||
|
||||
// 加载银行卡信息
|
||||
const loadBankCardInfo = async () => {
|
||||
try {
|
||||
const { data, error } = await useApiFetch("/agent/withdrawal/bank-card/info")
|
||||
.get()
|
||||
.json();
|
||||
if (data.value?.code === 200 && !error.value) {
|
||||
bankCardInfo.value = data.value.data;
|
||||
// 自动填充历史银行卡信息
|
||||
if (data.value.data.bank_card_no) {
|
||||
bankCardNo.value = data.value.data.bank_card_no;
|
||||
}
|
||||
if (data.value.data.bank_name) {
|
||||
bankName.value = data.value.data.bank_name;
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("加载银行卡信息失败", err);
|
||||
}
|
||||
};
|
||||
|
||||
// 格式化身份证号（显示前6位和后4位）
|
||||
const formatIdCard = (idCard) => {
|
||||
if (!idCard) return "";
|
||||
if (idCard.length <= 10) return idCard;
|
||||
return idCard.substring(0, 6) + "****" + idCard.substring(idCard.length - 4);
|
||||
};
|
||||
|
||||
// 验证银行卡号
|
||||
const validateBankCardNo = (val) => {
|
||||
if (!val) return false;
|
||||
const cardNo = String(val).replace(/\s/g, "");
|
||||
return /^\d{16,19}$/.test(cardNo);
|
||||
};
|
||||
|
||||
const getData = async () => {
|
||||
const { data: res, error } = await useApiFetch("/agent/revenue")
|
||||
.get()
|
||||
.json();
|
||||
|
||||
if (res.value?.code === 200 && !error.value) {
|
||||
availableAmount.value = res.value.data.balance;
|
||||
}
|
||||
};
|
||||
|
||||
onBeforeMount(() => {
|
||||
getData();
|
||||
getTax();
|
||||
// 根据配置加载对应的数据
|
||||
if (showBankcard && (activeTab.value === 'bankcard' || !showTabs)) {
|
||||
loadBankCardInfo();
|
||||
}
|
||||
});
|
||||
|
||||
// 表单验证
|
||||
const validateAmount = (val) => {
|
||||
const num = Number(val);
|
||||
return num >= 50 && num <= availableAmount.value;
|
||||
};
|
||||
|
||||
const validateForm = () => {
|
||||
if (activeTab.value === 'alipay') {
|
||||
// 支付宝提现验证
|
||||
if (!alipayRealName.value.trim()) {
|
||||
showToast("请输入账户实名姓名");
|
||||
return false;
|
||||
}
|
||||
if (!/^[\u4e00-\u9fa5]{2,4}$/.test(alipayRealName.value)) {
|
||||
showToast("请输入2-4位中文姓名");
|
||||
return false;
|
||||
}
|
||||
if (!alipayAccount.value.trim()) {
|
||||
showToast("请输入支付宝账号");
|
||||
return false;
|
||||
}
|
||||
} else {
|
||||
// 银行卡提现验证
|
||||
if (!bankCardNo.value.trim()) {
|
||||
showToast("请输入银行卡号");
|
||||
return false;
|
||||
}
|
||||
const cardNo = String(bankCardNo.value).replace(/\s/g, "");
|
||||
if (!/^\d{16,19}$/.test(cardNo)) {
|
||||
showToast("银行卡号格式不正确，请输入16-19位数字");
|
||||
return false;
|
||||
}
|
||||
if (!bankName.value.trim()) {
|
||||
showToast("请输入开户支行");
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
const amountNum = Number(amount.value);
|
||||
if (!amount.value || isNaN(amountNum)) {
|
||||
showToast("请输入有效金额");
|
||||
return false;
|
||||
}
|
||||
|
||||
if (amountNum < 50) {
|
||||
showToast("提现金额不能低于50元");
|
||||
return false;
|
||||
}
|
||||
|
||||
if (amountNum > availableAmount.value) {
|
||||
showToast("超过可提现金额");
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
// 打开实名认证对话框
|
||||
const openRealNameAuth = () => {
|
||||
dialogStore.openRealNameAuth();
|
||||
};
|
||||
|
||||
// 获取税务
|
||||
const getTax = async () => {
|
||||
const { data, error } = await useApiFetch("/agent/withdrawal/tax/exemption")
|
||||
.get()
|
||||
.json();
|
||||
if (data.value?.code === 200 && !error.value) {
|
||||
taxFreeAmount.value = data.value.data.total_exemption_amount;
|
||||
usedExemptionAmount.value = data.value.data.used_exemption_amount;
|
||||
remainingExemptionAmount.value = data.value.data.remaining_exemption_amount;
|
||||
taxRate.value = data.value.data.tax_rate;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
// 检查实名认证状态
|
||||
if (!agentStore.isRealName) {
|
||||
showToast("请先完成实名认证");
|
||||
openRealNameAuth();
|
||||
return;
|
||||
}
|
||||
|
||||
// 先进行表单验证
|
||||
if (!validateForm()) return;
|
||||
|
||||
// 显示税务确认弹窗
|
||||
showTaxConfirmPopup.value = true;
|
||||
};
|
||||
|
||||
// 确认提现
|
||||
const confirmWithdraw = async () => {
|
||||
isSubmitting.value = true;
|
||||
try {
|
||||
let apiUrl, requestData;
|
||||
|
||||
if (activeTab.value === 'alipay') {
|
||||
// 支付宝提现
|
||||
apiUrl = "/agent/withdrawal";
|
||||
requestData = {
|
||||
payee_account: alipayAccount.value,
|
||||
amount: amount.value,
|
||||
payee_name: alipayRealName.value,
|
||||
};
|
||||
} else {
|
||||
// 银行卡提现
|
||||
apiUrl = "/agent/withdrawal/bank-card";
|
||||
requestData = {
|
||||
bank_card_no: String(bankCardNo.value).replace(/\s/g, ""),
|
||||
bank_name: bankName.value,
|
||||
amount: amount.value,
|
||||
};
|
||||
}
|
||||
|
||||
const { data, error } = await useApiFetch(apiUrl)
|
||||
.post(requestData)
|
||||
.json();
|
||||
|
||||
if (data.value?.code === 200) {
|
||||
status.value = data.value.data.status;
|
||||
showTaxConfirmPopup.value = false;
|
||||
showStatusPopup.value = true;
|
||||
if (status.value === 3) {
|
||||
failMsg.value = data.value.data.fail_msg || "提现失败";
|
||||
}
|
||||
getData();
|
||||
} else {
|
||||
showToast(data.value?.msg || "提现失败");
|
||||
}
|
||||
} catch (err) {
|
||||
showToast("提现失败，请重试");
|
||||
console.error("提现失败", err);
|
||||
} finally {
|
||||
isSubmitting.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 弹窗操作
|
||||
const handlePopupAction = () => {
|
||||
if (status.value === 3) {
|
||||
showStatusPopup.value = false;
|
||||
resetForm();
|
||||
} else {
|
||||
showStatusPopup.value = false;
|
||||
if (status.value === 2) resetPage();
|
||||
}
|
||||
};
|
||||
|
||||
// 填充最大金额
|
||||
const fillMaxAmount = () => {
|
||||
amount.value = availableAmount.value;
|
||||
};
|
||||
|
||||
// 重置页面
|
||||
const resetForm = () => {
|
||||
status.value = null;
|
||||
if (activeTab.value === 'alipay') {
|
||||
alipayAccount.value = "";
|
||||
alipayRealName.value = "";
|
||||
} else {
|
||||
// 银行卡提现不清空，保留历史信息
|
||||
// bankCardNo.value = "";
|
||||
// bankName.value = "";
|
||||
}
|
||||
amount.value = "";
|
||||
};
|
||||
|
||||
const resetPage = () => {
|
||||
resetForm();
|
||||
// 可以跳转到提现记录页面
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* 自定义表单样式 */
|
||||
.van-field__control {
|
||||
@apply py-1 px-4 text-gray-800;
|
||||
}
|
||||
|
||||
.van-field__error-message {
|
||||
@apply mt-1;
|
||||
}
|
||||
|
||||
.van-button--disabled {
|
||||
@apply opacity-60 cursor-not-allowed;
|
||||
}
|
||||
|
||||
/* 弹窗入场动画 */
|
||||
.van-popup {
|
||||
transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
|
||||
opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.van-popup-enter-active,
|
||||
.van-popup-leave-active {
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.van-popup-enter-from,
|
||||
.van-popup-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.van-popup-enter-active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.van-popup-enter-to {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
/* 状态图标动画 */
|
||||
.animate-pulse {
|
||||
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
/* 实名认证提示样式 */
|
||||
.pointer-events-none {
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
197
src/views/WithdrawDetails.vue
Normal file
197
src/views/WithdrawDetails.vue
Normal file
@@ -0,0 +1,197 @@
|
||||
<template>
|
||||
<div class="min-h-screen bg-gray-50">
|
||||
<!-- 提现记录列表 -->
|
||||
<van-list
|
||||
v-model:loading="loading"
|
||||
:finished="finished"
|
||||
finished-text="没有更多了"
|
||||
@load="onLoad"
|
||||
>
|
||||
<div
|
||||
v-for="(item, index) in data.list"
|
||||
:key="index"
|
||||
class="mx-4 my-2 bg-white rounded-lg p-4 shadow-sm"
|
||||
>
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<span class="text-gray-500 text-sm">{{
|
||||
item.create_time || "-"
|
||||
}}</span>
|
||||
<span class="font-bold" :class="getAmountColor(item.status)"
|
||||
>{{ item.amount.toFixed(2) }}元</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex items-center mb-2">
|
||||
<span
|
||||
class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium"
|
||||
:class="getStatusStyle(item.status)"
|
||||
>
|
||||
<span
|
||||
class="w-2 h-2 rounded-full mr-1"
|
||||
:class="getDotColor(item.status)"
|
||||
></span>
|
||||
{{ statusToChinese(item.status) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-xs text-gray-500">
|
||||
<div v-if="item.withdraw_type === 1 && item.payee_account">
|
||||
收款账户：{{ maskName(item.payee_account) }}
|
||||
</div>
|
||||
<div v-if="item.withdraw_type === 2">
|
||||
<div v-if="item.bank_card_no">银行卡号：{{ maskBankCard(item.bank_card_no) }}</div>
|
||||
<div v-if="item.bank_name">开户支行：{{ item.bank_name }}</div>
|
||||
<div v-if="item.payee_name">收款人：{{ item.payee_name }}</div>
|
||||
</div>
|
||||
<div v-if="item.remark">备注：{{ item.remark }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-list>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// 状态映射配置
|
||||
const statusConfig = {
|
||||
1: {
|
||||
chinese: "处理中",
|
||||
color: {
|
||||
bg: "bg-yellow-100",
|
||||
text: "text-yellow-800",
|
||||
dot: "bg-yellow-500",
|
||||
amount: "text-yellow-500",
|
||||
},
|
||||
},
|
||||
2: {
|
||||
chinese: "提现成功",
|
||||
color: {
|
||||
bg: "bg-green-100",
|
||||
text: "text-green-800",
|
||||
dot: "bg-green-500",
|
||||
amount: "text-green-500",
|
||||
},
|
||||
},
|
||||
3: {
|
||||
chinese: "提现失败",
|
||||
color: {
|
||||
bg: "bg-red-100",
|
||||
text: "text-red-800",
|
||||
dot: "bg-red-500",
|
||||
amount: "text-red-500",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const page = ref(1);
|
||||
const pageSize = ref(10);
|
||||
const data = ref({
|
||||
total: 0,
|
||||
list: [],
|
||||
});
|
||||
const loading = ref(false);
|
||||
const finished = ref(false);
|
||||
|
||||
// 账户脱敏处理
|
||||
const maskName = (name) => {
|
||||
if (!name || typeof name !== "string") return "";
|
||||
if (name.length <= 7) return name;
|
||||
return name.substring(0, 3) + "****" + name.substring(7);
|
||||
};
|
||||
|
||||
// 银行卡号脱敏处理
|
||||
const maskBankCard = (cardNo) => {
|
||||
if (!cardNo || typeof cardNo !== "string") return "";
|
||||
const card = cardNo.replace(/\s/g, "");
|
||||
if (card.length <= 8) return card;
|
||||
return card.substring(0, 4) + " **** **** " + card.substring(card.length - 4);
|
||||
};
|
||||
|
||||
// 状态转中文
|
||||
const statusToChinese = (status) => {
|
||||
return statusConfig[status]?.chinese || "未知状态";
|
||||
};
|
||||
|
||||
// 获取状态样式
|
||||
const getStatusStyle = (status) => {
|
||||
const config = statusConfig[status] || {};
|
||||
return `${config.color?.bg || "bg-gray-100"} ${
|
||||
config.color?.text || "text-gray-800"
|
||||
}`;
|
||||
};
|
||||
|
||||
// 获取小圆点颜色
|
||||
const getDotColor = (status) => {
|
||||
return statusConfig[status]?.color.dot || "bg-gray-500";
|
||||
};
|
||||
|
||||
// 获取金额颜色
|
||||
const getAmountColor = (status) => {
|
||||
return statusConfig[status]?.color.amount || "text-gray-500";
|
||||
};
|
||||
|
||||
// 加载更多数据
|
||||
const onLoad = async () => {
|
||||
if (!finished.value) {
|
||||
await getData();
|
||||
}
|
||||
};
|
||||
|
||||
// 获取数据（修改分页逻辑）
|
||||
const getData = async () => {
|
||||
try {
|
||||
loading.value = true;
|
||||
const { data: res, error } = await useApiFetch(
|
||||
`/agent/withdrawal?page=${page.value}&page_size=${pageSize.value}`
|
||||
)
|
||||
.get()
|
||||
.json();
|
||||
if (res.value?.code === 200 && !error.value) {
|
||||
// 保留首次加载数据
|
||||
if (page.value === 1) {
|
||||
data.value = res.value.data;
|
||||
} else {
|
||||
data.value.list.push(...res.value.data.list);
|
||||
}
|
||||
|
||||
// 更新分页状态
|
||||
page.value++;
|
||||
|
||||
// 判断是否加载完成
|
||||
if (
|
||||
data.value.list.length >= res.value.data.total ||
|
||||
res.value.data.list.length < pageSize.value
|
||||
) {
|
||||
finished.value = true;
|
||||
}
|
||||
}
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 初始化加载
|
||||
onMounted(async () => {
|
||||
// 重置分页状态
|
||||
page.value = 1;
|
||||
finished.value = false;
|
||||
await getData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 保持原有样式不变 */
|
||||
.list-enter-active {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.list-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
:deep(.van-list__finished-text) {
|
||||
@apply py-4 text-gray-400 text-sm;
|
||||
}
|
||||
|
||||
:deep(.van-list__loading) {
|
||||
@apply py-4;
|
||||
}
|
||||
</style>
|
||||
217
src/views/index.vue
Normal file
217
src/views/index.vue
Normal file
@@ -0,0 +1,217 @@
|
||||
<script setup>
|
||||
import { useHead } from '@vueuse/head'
|
||||
import { ref } from 'vue'
|
||||
|
||||
// SEO优化的头部信息
|
||||
useHead({
|
||||
title: '天远查 - 专业司法涉诉查询平台 | 婚恋评估、判决书查询、婚姻状态查询',
|
||||
meta: [
|
||||
{
|
||||
name: 'description',
|
||||
content: '天远查是专业的司法涉诉查询平台，提供婚恋评估、判决书查询、婚姻状态查询、被执行人查询、失信人查询等服务。依托大数据技术，精准查询司法风险，多维防控财产、信用、身份风险。'
|
||||
},
|
||||
{
|
||||
name: 'keywords',
|
||||
content: '天远查,司法涉诉查询,婚恋评估,判决书查询,婚姻状态查询,被执行人查询,失信人查询,限高查询,个人涉诉查询,企业涉诉查询,车辆核验,身份核验,手机核验,银行卡核验,学历核验,风险报告,法律风险,信用风险,在线查询平台'
|
||||
},
|
||||
{
|
||||
property: 'og:title',
|
||||
content: '天远查 - 专业司法涉诉查询平台 | 婚恋评估、判决书查询、婚姻状态查询'
|
||||
},
|
||||
{
|
||||
property: 'og:description',
|
||||
content: '天远查是专业的司法涉诉查询平台，提供婚恋评估、判决书查询、婚姻状态查询、被执行人查询、失信人查询等服务。'
|
||||
},
|
||||
{
|
||||
property: 'og:type',
|
||||
content: 'website'
|
||||
},
|
||||
{
|
||||
property: 'og:url',
|
||||
content: 'https://www.tianyuancha.cn'
|
||||
},
|
||||
{
|
||||
property: 'og:image',
|
||||
content: 'https://www.tianyuancha.cn/og-image.jpg'
|
||||
}
|
||||
],
|
||||
link: [
|
||||
{
|
||||
rel: 'canonical',
|
||||
href: 'https://www.tianyuancha.cn'
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
const router = useRouter();
|
||||
const showServiceNotice = ref(false);
|
||||
|
||||
function toInquire(name) {
|
||||
if (name === "Marriage") {
|
||||
router.push(`/inquire/marriage`);
|
||||
} else if (name === "Api") {
|
||||
window.location.href = "https://www.tianyuanapi.com/";
|
||||
} else if (name === "Lawsuit") {
|
||||
// 司法涉诉跳转到个人司法涉诉查询
|
||||
router.push(`/inquire/toc_PersonalLawsuit`);
|
||||
} else if (name === "MarriageStatus") {
|
||||
// 婚姻状况跳转到婚姻查询
|
||||
router.push(`/inquire/toc_Marriage`);
|
||||
} else if (name === "VehiclesUnderName") {
|
||||
// 名下车辆跳转
|
||||
router.push(`/inquire/toc_VehiclesUnderName`);
|
||||
} else if (name === "Promote") {
|
||||
// 推广报告跳转
|
||||
router.push(`/agent/promote`);
|
||||
} else {
|
||||
router.push(`/list${name}`);
|
||||
}
|
||||
}
|
||||
|
||||
function toHistory() {
|
||||
router.push(`/historyQuery`);
|
||||
}
|
||||
const toBigData = () => {
|
||||
window.location.href = "https://www.tianyuandata.com/";
|
||||
};
|
||||
function toPromote() {
|
||||
window.location.href =
|
||||
"https://www.tianyuancha.cn?_um_campaign=67c15d4f8f232a05f1221b82&_um_channel=67c15d4f8f232a05f1221b83"; // 跳转到客服页面
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative p-4">
|
||||
<img class="h-full w-full overflow-hidden rounded-xl" src="@/assets/images/banner.png" alt="天远查平台横幅" />
|
||||
</div>
|
||||
<div class="relative p-4 pb-4 pt-2">
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<div class="relative flex flex-col cursor-pointer rounded-bl-[35px] rounded-br-lg rounded-tl-[35px] rounded-tr-lg bg-white px-4 py-6 shadow-lg"
|
||||
@click="toInquire('Lawsuit')">
|
||||
<div class="min-h-18 gap-2 bg-white px-1">
|
||||
<div class="mb-2 flex justify-around">
|
||||
<img class="h-12 w-12 flex-shrink-0" src="@/assets/images/icon_2.png" alt="司法涉诉图标" />
|
||||
<div class="mt-1 max-w-max flex-shrink-0 text-left text-lg text-gray-600 font-bold">
|
||||
司法涉诉
|
||||
</div>
|
||||
</div>
|
||||
<div class="max-w-max text-left text-xs text-gray-600">
|
||||
查询个人与企业的民事案件、刑事案件、行政案件、非诉保全审查、执行案件、强制清算与破产、限高、失信等司法涉诉记录
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative flex flex-col cursor-pointer rounded-bl-lg rounded-br-[35px] rounded-tl-lg rounded-tr-[35px] bg-white px-4 py-6 shadow-lg"
|
||||
@click="toInquire('Marriage')">
|
||||
<div class="min-h-18 gap-2 bg-white px-1">
|
||||
<div class="mb-2 flex justify-around">
|
||||
<div class="mt-1 max-w-max flex-shrink-0 text-left text-lg text-gray-600 font-bold">
|
||||
婚恋风险
|
||||
</div>
|
||||
<img class="h-12 w-12 flex-shrink-0" src="@/assets/images/icon_1.png" alt="婚恋风险图标" />
|
||||
</div>
|
||||
<div class="max-w-max text-left text-xs text-gray-600">
|
||||
全面评估婚恋对象潜在风险，包含个人不良、司法涉诉、婚姻状态、借贷行为等多维数据分析，帮您识别隐藏风险，守护情感安全
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative flex flex-col cursor-pointer rounded-bl-[35px] rounded-br-lg rounded-tl-[35px] rounded-tr-lg bg-white px-4 py-6 shadow-lg"
|
||||
@click="toInquire('VehiclesUnderName')">
|
||||
<div class="min-h-18 gap-2 bg-white px-1">
|
||||
<div class="mb-2 flex justify-around">
|
||||
<img class="h-12 w-12 flex-shrink-0" src="@/assets/images/icon_index_chacheliang.svg"
|
||||
alt="名下车辆图标" />
|
||||
<div class="mt-1 max-w-max flex-shrink-0 text-left text-lg text-gray-600 font-bold">
|
||||
名下车辆
|
||||
</div>
|
||||
</div>
|
||||
<div class="max-w-max text-left text-xs text-gray-600">
|
||||
查询个人名下所有车辆信息，包括车辆品牌、型号、车牌号、登记时间等详细信息
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative flex flex-col cursor-pointer rounded-bl-lg rounded-br-[35px] rounded-tl-lg rounded-tr-[35px] bg-white px-4 py-6 shadow-lg"
|
||||
@click="toInquire('MarriageStatus')">
|
||||
<div class="min-h-18 gap-2 bg-white px-1">
|
||||
<div class="mb-2 flex justify-around">
|
||||
<div class="mt-1 max-w-max flex-shrink-0 text-left text-lg text-gray-600 font-bold">
|
||||
婚姻状况
|
||||
</div>
|
||||
<img class="h-12 w-12 flex-shrink-0" src="@/assets/images/icon_4.png" alt="婚姻状况图标" />
|
||||
</div>
|
||||
<div class="max-w-max text-left text-xs text-gray-600">
|
||||
查询个人婚姻登记信息，包括婚姻状态、结婚时间、离婚时间等，帮助您了解对方的真实婚姻状况
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative flex flex-col cursor-pointer rounded-bl-[35px] rounded-br-lg rounded-tl-[35px] rounded-tr-lg bg-white px-4 py-6 shadow-lg"
|
||||
@click="toInquire('Promote')">
|
||||
<div class="min-h-18 gap-2 bg-white px-1">
|
||||
<div class="mb-2 flex justify-around">
|
||||
<img class="h-12 w-12 flex-shrink-0" src="@/assets/images/icon_3.png" alt="推广报告图标" />
|
||||
<div class="mt-1 max-w-max flex-shrink-0 text-left text-lg text-gray-600 font-bold">
|
||||
推广报告
|
||||
</div>
|
||||
</div>
|
||||
<div class="max-w-max text-left text-xs text-gray-600">
|
||||
基于多维度数据整合，准确评估潜在风险的全面报告
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative flex flex-col cursor-pointer rounded-bl-lg rounded-br-[35px] rounded-tl-lg rounded-tr-[35px] bg-white px-4 py-6 shadow-lg"
|
||||
@click="toInquire('Api')">
|
||||
<div class="min-h-18 gap-2 bg-white px-1">
|
||||
<div class="mb-2 flex justify-around">
|
||||
<div class="mt-1 max-w-max flex-shrink-0 text-left text-lg text-gray-600 font-bold">
|
||||
API商店
|
||||
</div>
|
||||
<img class="h-12 w-12 flex-shrink-0" src="@/assets/images/icon_index_apistore.svg"
|
||||
alt="API商店图标" />
|
||||
</div>
|
||||
<div class="max-w-max text-left text-xs text-gray-600">
|
||||
提供婚姻、司法、核验等高效便捷的API服务，帮助企业快速获取数据，提升业务效率。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 font-bold">更多服务</div>
|
||||
<div class="mt-4 box-border h-14 w-full flex items-center rounded-xl bg-white px-4 text-gray-700 shadow-xl"
|
||||
@click="toHistory">
|
||||
<img class="mr-4 h-10 w-10" src="@/assets/images/bg_icon.png" alt="历史记录图标" mode="widthFix" />
|
||||
<div class="">
|
||||
<div class="font-bold">我的历史查询记录</div>
|
||||
<div class="text-xs">查询记录有效期为15天</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 rounded-xl overflow-hidden bg-white shadow-xl" @click="toBigData">
|
||||
<img src="@/assets/images/index_a_banner.png" class="w-full h-full" alt="大数据服务横幅" mode="widthFix" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 服务暂停通知弹窗 -->
|
||||
<van-popup v-model:show="showServiceNotice" round :style="{ width: '85%', padding: '32px 24px' }">
|
||||
<div class="text-center">
|
||||
<div class="text-2xl font-bold text-gray-800 mb-6">服务暂停通知</div>
|
||||
<div class="text-base text-gray-700 leading-relaxed mb-6 px-2">
|
||||
因系统升级，我司现暂停司法涉诉和风险报告服务，由此给您带来的不便，我们深表歉意。
|
||||
</div>
|
||||
<div class="text-sm text-gray-500 mb-6">感谢您的理解与支持！</div>
|
||||
<van-button type="primary" round block @click="showServiceNotice = false">我知道了</van-button>
|
||||
</div>
|
||||
</van-popup>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.clip-left {
|
||||
clip-path: polygon(0 0, 0 100%, 90% 100%, 0 100%);
|
||||
}
|
||||
|
||||
.clip-right {
|
||||
clip-path: polygon(0 0, 0 0, 90% 100%, 0 0);
|
||||
}
|
||||
</style>
|
||||
|
||||
<route type="home" lang="json">{
|
||||
"layout": "home"
|
||||
}</route>
|
||||
Reference in New Issue
Block a user