247 lines
6.8 KiB
Vue
247 lines
6.8 KiB
Vue
<template>
|
||
<view class="agreement-wrapper">
|
||
<checkbox-group @change="onChange">
|
||
<label class="agreement-label">
|
||
<checkbox :checked="checked" style="transform:scale(0.8)" />
|
||
<text class="agreement-text">
|
||
{{ $t('agreement.readAndAgree') }}
|
||
<text class="link" @click.stop="open('service')">
|
||
{{ $t('agreement.service') }}
|
||
</text>
|
||
{{ $t('agreement.and') }}
|
||
<text class="link" @click.stop="open('privacy')">
|
||
{{ $t('agreement.privacy') }}
|
||
</text>
|
||
</text>
|
||
</label>
|
||
</checkbox-group>
|
||
|
||
<!-- 协议弹窗 -->
|
||
<uni-popup ref="popup" type="center">
|
||
<view class="popup-box">
|
||
<scroll-view scroll-y class="popup-content">
|
||
<text class="popup-title">{{ popupTitle }}</text>
|
||
<text class="popup-text">{{ popupContent }}</text>
|
||
</scroll-view>
|
||
<button class="popup-btn" @click="close">
|
||
我已知晓 / Acknowledge
|
||
</button>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, watch, computed } from 'vue'
|
||
import { projectInfo } from '@/config/index.js';
|
||
|
||
const props = defineProps({
|
||
modelValue: {
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
})
|
||
|
||
const emit = defineEmits(['update:modelValue'])
|
||
|
||
const checked = ref(props.modelValue)
|
||
const popup = ref(null)
|
||
const popupType = ref('')
|
||
|
||
watch(
|
||
() => props.modelValue,
|
||
val => (checked.value = val)
|
||
)
|
||
|
||
const onChange = e => {
|
||
checked.value = e.detail.value.length > 0
|
||
emit('update:modelValue', checked.value)
|
||
}
|
||
|
||
const open = type => {
|
||
popupType.value = type
|
||
popup.value.open()
|
||
}
|
||
|
||
const close = () => {
|
||
popup.value.close()
|
||
}
|
||
|
||
const popupTitle = computed(() =>
|
||
popupType.value === 'service'
|
||
? '用户服务协议 / User Service Agreement'
|
||
: '隐私政策 / Privacy Policy'
|
||
)
|
||
|
||
const popupContent = computed(() => {
|
||
if (popupType.value === 'service') {
|
||
return `
|
||
《用户服务协议》
|
||
User Service Agreement
|
||
|
||
一、协议的确认与接受
|
||
欢迎您使用由【${projectInfo.name}】运营的仓库租赁小程序。
|
||
您在注册、登录或使用本小程序服务前，应仔细阅读并充分理解本协议。
|
||
您勾选同意或实际使用服务的行为，即视为您已阅读、理解并同意本协议全部内容。
|
||
|
||
Welcome to the warehouse rental mini program operated by 【Company Name】.
|
||
By registering, logging in, or using the service, you acknowledge that you have read,
|
||
understood, and agreed to this Agreement.
|
||
|
||
二、服务内容
|
||
本小程序向用户提供仓库租赁及相关服务，包括但不限于：
|
||
1. 仓库信息展示与查询
|
||
2. 仓库租赁订单的创建、管理与履行
|
||
3. 用户身份认证（个人/企业）
|
||
4. 合同签署、账单管理及费用结算
|
||
|
||
This mini program provides warehouse rental services, including but not limited to
|
||
warehouse information display, order management, identity verification, and contract execution.
|
||
|
||
三、用户身份/企业认证
|
||
为保障交易安全及符合法律法规要求，用户需根据页面提示提供真实、准确、完整的信息。
|
||
如信息不真实或不完整，我们有权拒绝或终止相关服务。
|
||
|
||
Users are required to provide true, accurate, and complete information for identity verification.
|
||
We reserve the right to refuse or terminate services if false information is provided.
|
||
|
||
四、用户权利与义务
|
||
用户应妥善保管账户信息，不得转让、出租或出借账户。
|
||
用户不得利用本服务从事违法或侵害他人合法权益的行为。
|
||
|
||
Users shall properly safeguard their account information and shall not engage in illegal activities.
|
||
|
||
五、协议变更与终止
|
||
我们有权依法对本协议进行修订，并在小程序内进行公示。
|
||
用户继续使用服务即视为接受修订后的协议。
|
||
|
||
We reserve the right to amend this Agreement with notice provided within the mini program.
|
||
|
||
六、法律适用与争议解决
|
||
本协议适用中华人民共和国法律。
|
||
因本协议产生的争议，应提交本公司所在地有管辖权的人民法院解决。
|
||
|
||
This Agreement shall be governed by the laws of the People’s Republic of China.
|
||
`
|
||
}
|
||
|
||
return `
|
||
《隐私政策》
|
||
Privacy Policy
|
||
|
||
一、个人信息的收集
|
||
在您使用本小程序过程中，我们可能收集以下信息：
|
||
- 姓名
|
||
- 证件类型及证件号码
|
||
- 证件照片（仅用于实名认证核验）
|
||
- 手机号码
|
||
- 紧急联系人信息（如您主动填写）
|
||
- 企业名称
|
||
- 营业执照照片（仅用于企业认证核验）
|
||
- 营业执照号码（仅用于企业认证核验）
|
||
We may collect your name, ID type and number, ID photos, phone number,
|
||
emergency contact information (if provided), and order details.
|
||
|
||
二、信息的使用目的
|
||
上述信息仅用于：
|
||
1. 用户身份认证
|
||
2. 仓库租赁服务的提供与履行
|
||
3. 合同签署与合规审查
|
||
4. 客户服务与风险控制
|
||
|
||
The collected information is used solely for identity verification,
|
||
service fulfillment, contract execution, and customer support.
|
||
|
||
三、信息的存储与保护
|
||
我们将采取加密、权限控制等安全措施保护您的个人信息，
|
||
防止未经授权的访问、披露或滥用。
|
||
|
||
We adopt industry-standard security measures to protect your personal information.
|
||
|
||
四、信息的保存期限
|
||
您的个人信息仅在实现服务目的所必需的期限内保存，
|
||
超过期限后将依法删除或匿名化处理。
|
||
|
||
Personal information is retained only as long as necessary and will be deleted or anonymized thereafter.
|
||
|
||
五、信息的共享与披露
|
||
未经您的明确同意，我们不会向任何第三方共享或披露您的个人信息，
|
||
法律法规另有规定的除外。
|
||
|
||
We do not share or disclose your personal information without your consent,
|
||
except as required by law.
|
||
|
||
六、用户权利
|
||
您有权依法查询、更正或删除您的个人信息。
|
||
如需行使相关权利，请通过【客服】与我们联系。
|
||
|
||
You have the right to access, correct, or delete your personal information.
|
||
Please contact us via 【Customer Support Contact】.
|
||
|
||
七、未成年人保护
|
||
本服务主要面向具备完全民事行为能力的用户。
|
||
|
||
This service is intended for users with full legal capacity.
|
||
`
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.agreement-wrapper {
|
||
margin-top: 24rpx;
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.agreement-label {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.agreement-text {
|
||
margin-left: 12rpx;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.link {
|
||
color: #f7b500;
|
||
}
|
||
|
||
.en-tip {
|
||
display: block;
|
||
font-size: 22rpx;
|
||
color: #999;
|
||
margin-top: 6rpx;
|
||
}
|
||
|
||
.popup-box {
|
||
width: 680rpx;
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
padding: 24rpx;
|
||
}
|
||
|
||
.popup-content {
|
||
max-height: 720rpx;
|
||
}
|
||
|
||
.popup-title {
|
||
display: block;
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.popup-text {
|
||
font-size: 26rpx;
|
||
line-height: 1.6;
|
||
white-space: pre-wrap;
|
||
}
|
||
|
||
.popup-btn {
|
||
margin-top: 20rpx;
|
||
background-color: #f7b500;
|
||
color: #fff;
|
||
}
|
||
</style>
|