104 lines
2.4 KiB
Plaintext
104 lines
2.4 KiB
Plaintext
<template>
|
|
<view class="agreement">
|
|
<checkbox-group @change="handleAgreeChange" class="checkbox-group">
|
|
<label class="checkbox-label">
|
|
<checkbox
|
|
class="checkbox"
|
|
color="#5147ff"
|
|
style="transform: scale(0.7)"
|
|
iconColor="#fff"
|
|
activeBackgroundColor="#5147ff"
|
|
value="agree"
|
|
:checked="modelValue"
|
|
/>
|
|
<view class="agreement-content">
|
|
<text class="agreement-text">
|
|
{{ t("Mobile.Auth.agreementPrefix") }}
|
|
<text class="link" @click.stop="handleServiceAgreement">{{ t("Mobile.Auth.serviceAgreement") }}</text>
|
|
{{ t("Mobile.Auth.agreementSeparator") }}
|
|
<text class="link" @click.stop="handlePrivacyAgreement">{{ t("Mobile.Auth.privacyAgreement") }}</text>
|
|
</text>
|
|
</view>
|
|
</label>
|
|
</checkbox-group>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import { handleExternalLink } from "@/utils/system.uts";
|
|
import { useI18n } from "@/utils/i18n";
|
|
|
|
const { t } = useI18n();
|
|
|
|
// 定义 Props
|
|
interface Props {
|
|
modelValue: boolean;
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
modelValue: false,
|
|
});
|
|
|
|
// 定义 Emits
|
|
const emit = defineEmits<{
|
|
"update:modelValue": [value: boolean];
|
|
}>();
|
|
|
|
// 处理复选框变化
|
|
const handleAgreeChange = (e: any) => {
|
|
const isChecked = e.detail.value.includes("agree");
|
|
emit("update:modelValue", isChecked);
|
|
};
|
|
|
|
// 打开服务协议
|
|
const handleServiceAgreement = () => {
|
|
handleExternalLink(t("Mobile.Auth.userAgreementLink"));
|
|
};
|
|
|
|
// 打开隐私协议
|
|
const handlePrivacyAgreement = () => {
|
|
handleExternalLink(t("Mobile.Auth.privacyAgreementLink"));
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.agreement {
|
|
display: flex;
|
|
flex-direction: row;
|
|
width: 100%;
|
|
|
|
.checkbox-group {
|
|
width: 100%;
|
|
|
|
.checkbox-label {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-start;
|
|
width: 100%;
|
|
|
|
.checkbox {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.agreement-content {
|
|
flex: 1;
|
|
width: 0;
|
|
|
|
.agreement-text {
|
|
font-size: 26rpx;
|
|
line-height: 44rpx;
|
|
color: rgba(21, 23, 31, 0.5);
|
|
|
|
.link {
|
|
font-size: 26rpx;
|
|
font-weight: 500;
|
|
color: rgba(21, 23, 31, 0.5);
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|