184 lines
6.8 KiB
Vue
184 lines
6.8 KiB
Vue
<template>
|
||
<div>
|
||
<div class="privacy-container">
|
||
<div class="privacy-content">
|
||
<div class="text-gray-600 leading-relaxed mb-8">
|
||
欢迎使用蜂快到家小程序！为了保障您能安全、顺畅地使用本小程序的服务，特制定本用户协议，请您仔细阅读。在使用本小程序前，请确保您已充分理解并同意本协议的所有条款。如您对本协议有任何疑问，请随时联系我们。
|
||
</div>
|
||
|
||
<div v-for="(section, index) in sections" :key="index" class="mb-10">
|
||
<h2 class="text-base font-semibold text-gray-800 mb-4">{{ section.title }}</h2>
|
||
<div v-for="(content, cIndex) in section.contents" :key="cIndex" class="mb-4">
|
||
<h3 v-if="content.subTitle" class="text-sm font-medium text-gray-700 mb-2">{{ content.subTitle }}</h3>
|
||
<p v-if="content.text" class="text-gray-600 leading-relaxed mb-2">{{ content.text }}</p>
|
||
<ul v-if="content.list" class="list-disc list-inside space-y-2 text-gray-600">
|
||
<li v-for="(item, iIndex) in content.list" :key="iIndex" class="ml-4">{{ item }}</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { onMounted, onBeforeUnmount } from 'vue'
|
||
|
||
const sections = [
|
||
{
|
||
title: '一、定义与解释',
|
||
contents: [
|
||
{
|
||
list: [
|
||
'小程序：即蜂快到家小程序及其提供的各项服务。',
|
||
'用户：指使用本小程序的个人或实体。',
|
||
'服务：包括但不限于代取快递、团购商品等小程序所提供的功能。'
|
||
]
|
||
}
|
||
]
|
||
},
|
||
{
|
||
title: '二、服务使用规范',
|
||
contents: [
|
||
{
|
||
subTitle: '账号注册与使用',
|
||
text: '用户需提供真实、准确、完整的个人信息进行账号注册。若因提供虚假信息导致的一切后果，由用户自行承担。',
|
||
list: [
|
||
'用户应妥善保管账号和密码，不得将账号转让、出租或出借予他人使用。因用户账号管理不善导致的任何损失，由用户自行负责。'
|
||
]
|
||
},
|
||
{
|
||
subTitle: '服务使用限制',
|
||
list: [
|
||
'用户不得利用小程序从事任何违法违规活动，包括但不限于欺诈、侵权、传播有害信息等。',
|
||
'禁止对小程序进行反向工程、反编译、篡改等破坏性行为，不得干扰小程序的正常运行。'
|
||
]
|
||
}
|
||
]
|
||
},
|
||
{
|
||
title: '三、双方权利与义务',
|
||
contents: [
|
||
{
|
||
subTitle: '平台权利与义务',
|
||
list: [
|
||
'权利：有权根据业务发展需要对小程序进行升级、维护、修改或暂停服务，并以适当方式通知用户。对于违反本协议的用户，有权采取警告、限制使用、封禁账号等措施。',
|
||
'义务：努力保障小程序的稳定运行，确保服务的可用性和安全性。及时处理用户的订单和反馈，提供必要的客户服务支持。'
|
||
]
|
||
},
|
||
{
|
||
subTitle: '用户权利与义务',
|
||
list: [
|
||
'权利：有权在遵守本协议的前提下，自由使用小程序提供的各项服务。对平台的服务有提出意见和建议的权利。',
|
||
'义务：遵守本协议及相关法律法规，合法使用小程序。按照平台规定的流程和要求进行下单、支付等操作，如实提供服务所需的信息。'
|
||
]
|
||
}
|
||
]
|
||
},
|
||
{
|
||
title: '四、费用与支付',
|
||
contents: [
|
||
{
|
||
subTitle: '费用说明',
|
||
text: '使用小程序的部分服务可能需要支付相应费用，具体费用标准将在小程序中明示。平台有权根据实际情况调整费用标准，并提前通知用户。'
|
||
},
|
||
{
|
||
subTitle: '支付方式',
|
||
text: '平台提供多种支付方式供用户选择，用户应确保支付信息的准确性和安全性。因用户支付信息错误导致的支付失败或其他损失，由用户自行承担。'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
title: '五、责任限制',
|
||
contents: [
|
||
{
|
||
subTitle: '不可抗力',
|
||
text: '由于不可抗力因素（如自然灾害、政府行为、网络故障等）导致小程序无法正常运行或服务中断，平台不承担责任，但将尽力减少损失并及时通知用户。'
|
||
},
|
||
{
|
||
subTitle: '用户责任',
|
||
text: '因用户违反本协议或相关法律法规，导致平台或第三方遭受损失的，用户应承担赔偿责任。'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
title: '六、协议变更与终止',
|
||
contents: [
|
||
{
|
||
subTitle: '协议变更',
|
||
text: '平台有权根据业务发展、法律法规变化等原因对本协议进行修改。修改后的协议将在小程序上公布，并以适当方式通知用户。若用户在协议变更后继续使用小程序，即视为同意接受变更后的协议。'
|
||
},
|
||
{
|
||
subTitle: '协议终止',
|
||
text: '用户有权随时停止使用小程序，可自行注销账号。若用户违反本协议，平台有权单方面终止本协议，注销用户账号，并保留追究法律责任的权利。'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
title: '七、法律适用与争议解决',
|
||
contents: [
|
||
{
|
||
subTitle: '法律适用',
|
||
text: '本协议的订立、执行和解释均适用中国法律。'
|
||
},
|
||
{
|
||
subTitle: '争议解决方式',
|
||
text: '如双方在本协议履行过程中发生争议，应首先通过友好协商解决；协商不成的，任何一方均有权向有管辖权的人民法院提起诉讼。'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
title: '八、其他条款',
|
||
contents: [
|
||
{
|
||
subTitle: '完整性',
|
||
text: '本协议构成双方关于小程序使用的完整协议，取代之前所有口头或书面的相关约定。'
|
||
},
|
||
{
|
||
subTitle: '可分割性',
|
||
text: '若本协议的任何条款被认定为无效或不可执行，不影响其他条款的有效性和可执行性。'
|
||
},
|
||
{
|
||
subTitle: '联系我们',
|
||
text: '若您对本协议有任何疑问、建议或投诉，欢迎联系我们。我们将在收到您的反馈后的 5 个工作日内与您联系并处理您的问题。'
|
||
}
|
||
]
|
||
}
|
||
]
|
||
|
||
onMounted(() => {
|
||
document.title = '用户服务协议'
|
||
})
|
||
|
||
onBeforeUnmount(() => {
|
||
document.title = '蜂快到家'
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.privacy-container {
|
||
@apply min-h-screen px-4 py-16 max-w-3xl mx-auto;
|
||
}
|
||
|
||
.privacy-content {
|
||
@apply prose prose-gray max-w-none bg-white rounded-lg p-8 shadow-sm;
|
||
}
|
||
|
||
@media (max-width: 640px) {
|
||
.privacy-container {
|
||
@apply px-4 py-6;
|
||
}
|
||
|
||
.privacy-content {
|
||
@apply p-4;
|
||
}
|
||
|
||
h1 {
|
||
@apply text-base;
|
||
}
|
||
|
||
h2 {
|
||
@apply text-sm;
|
||
}
|
||
}
|
||
</style> |