431 lines
11 KiB
Vue
431 lines
11 KiB
Vue
<template>
|
||
<div
|
||
:class="['about-container', 'container', isH5 && 'container-h5']"
|
||
@click="closeAboutBox"
|
||
@mousedown.stop
|
||
>
|
||
<div
|
||
:class="['about-box', 'box', isH5 && 'box-h5']"
|
||
@click.stop
|
||
>
|
||
<header
|
||
v-if="isH5"
|
||
class="title"
|
||
>
|
||
<div
|
||
class="title-back"
|
||
@click="closeAboutBox"
|
||
>
|
||
<Icon :file="backSVG" />
|
||
</div>
|
||
<div class="title-name">
|
||
{{ TUITranslateService.t("Home.关于腾讯云·通信") }}
|
||
</div>
|
||
</header>
|
||
<main class="main">
|
||
<div class="main-name">
|
||
<img
|
||
class="logo"
|
||
src="../assets/image/logo.svg"
|
||
alt=""
|
||
>
|
||
<div class="name">
|
||
{{ TUITranslateService.t("即时通信") }}
|
||
</div>
|
||
</div>
|
||
<div class="main-version">
|
||
{{ TUITranslateService.t("Home.SDK版本") }}: {{ SDKVersion }}
|
||
</div>
|
||
</main>
|
||
<footer class="footer">
|
||
<ul class="list">
|
||
<li class="line">
|
||
<a
|
||
class="link"
|
||
:href="Link.privacy.url"
|
||
target="_blank"
|
||
>
|
||
{{ TUITranslateService.t(`Login.${Link.privacy.label}`) }}
|
||
</a>
|
||
<a
|
||
class="link"
|
||
:href="Link.agreement.url"
|
||
target="_blank"
|
||
>
|
||
{{ TUITranslateService.t(`Login.${Link.agreement.label}`) }}
|
||
</a>
|
||
<a
|
||
class="link"
|
||
@click="toggleDisclaimer"
|
||
>
|
||
{{ TUITranslateService.t("Home.免责声明") }}
|
||
<div
|
||
v-if="isDisclaimerBoxShow"
|
||
:class="['disclaimer-container', 'container', isH5 && 'container-h5']"
|
||
@click="toggleDisclaimer"
|
||
>
|
||
<div
|
||
:class="['disclaimer-box', 'box', isH5 && 'box-h5']"
|
||
@click.stop
|
||
>
|
||
<header
|
||
v-if="isH5"
|
||
class="title"
|
||
>
|
||
<div
|
||
class="title-back"
|
||
@click="toggleDisclaimer"
|
||
>
|
||
<Icon :file="backSVG" />
|
||
</div>
|
||
<div class="title-name">
|
||
{{ TUITranslateService.t("Home.关于腾讯云·通信") }}
|
||
</div>
|
||
</header>
|
||
<main class="main">
|
||
<header class="main-title">
|
||
{{ TUITranslateService.t(`Home.IM-免责声明`) }}
|
||
</header>
|
||
<p class="main-info">
|
||
{{
|
||
TUITranslateService.t(
|
||
`Home.IM（“本产品”）是由腾讯云提供的一款测试产品，腾讯云享有本产品的著作权和所有权。本产品仅用于功能体验，不得用于任何商业用途。依据相关部门监管要求，严禁在使用中有任何色情、辱骂、暴恐、涉政等违法内容传播。`
|
||
)
|
||
}}
|
||
</p>
|
||
</main>
|
||
<footer class="footer">
|
||
<button
|
||
class="btn btn-default"
|
||
@click.stop="submitDisclaimer"
|
||
>
|
||
{{ TUITranslateService.t("Home.同意") }}
|
||
</button>
|
||
</footer>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<li class="line">
|
||
<a
|
||
class="link"
|
||
:href="Link.contact.url"
|
||
target="_blank"
|
||
>
|
||
{{ TUITranslateService.t(`Home.${Link.contact.label}`) }}
|
||
</a>
|
||
<a
|
||
class="link"
|
||
@click="toggleCancellation"
|
||
>
|
||
{{ TUITranslateService.t("Home.注销账户") }}
|
||
<div
|
||
v-if="isCancellationBoxShow"
|
||
:class="['cancellation-container', 'container', isH5 && 'container-h5']"
|
||
@click="toggleCancellation"
|
||
>
|
||
<div
|
||
:class="['cancellation-box', 'box', isH5 && 'box-h5']"
|
||
@click.stop
|
||
>
|
||
<header
|
||
v-if="isH5"
|
||
class="title"
|
||
>
|
||
<div
|
||
class="title-back"
|
||
@click="toggleCancellation"
|
||
>
|
||
<Icon :file="backSVG" />
|
||
</div>
|
||
<div class="title-name">
|
||
{{ TUITranslateService.t("Home.关于腾讯云·通信") }}
|
||
</div>
|
||
</header>
|
||
<main class="main">
|
||
<img
|
||
src="../assets/image/warn.svg"
|
||
width="60"
|
||
height="60"
|
||
>
|
||
<p class="main-text">
|
||
{{
|
||
TUITranslateService.t(
|
||
"Home.注销后，您将无法使用当前账号，相关数据也将删除无法找回"
|
||
)
|
||
}}
|
||
</p>
|
||
<p>
|
||
<span>{{ TUITranslateService.t("Home.当前账号") + ": " }}</span>
|
||
<span class="main-id">{{ props.userProfile.userID }}</span>
|
||
</p>
|
||
</main>
|
||
<footer class="footer">
|
||
<button
|
||
class="btn btn-error"
|
||
@click.stop="submitCancellation"
|
||
>
|
||
{{ TUITranslateService.t("Home.注销") }}
|
||
</button>
|
||
<button
|
||
class="btn btn-default"
|
||
@click.stop="toggleCancellation"
|
||
>
|
||
{{ TUITranslateService.t("Home.取消") }}
|
||
</button>
|
||
</footer>
|
||
</div>
|
||
</div></a>
|
||
</li>
|
||
<li class="line">
|
||
<p class="copyright">
|
||
Copyright © 2013-2023 Tencent Cloud. All Rights Reserved.
|
||
</p>
|
||
</li>
|
||
</ul>
|
||
</footer>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import { ref, withDefaults, defineProps, defineEmits } from '@/TUIKit/adapter-vue';
|
||
import { TUITranslateService, TUIStore, StoreName } from '@tencentcloud/chat-uikit-engine';
|
||
import { TUILogin } from '@tencentcloud/tui-core';
|
||
import Icon from '../TUIKit/components/common/Icon.vue';
|
||
import backSVG from '../TUIKit/assets/icon/back.svg';
|
||
import { isH5 } from '../TUIKit/utils/env';
|
||
import { Link } from '../utils/link';
|
||
import { cancellation } from '../api';
|
||
import { IUserProfile } from '../TUIKit/interface';
|
||
import router from '../router';
|
||
|
||
const props = withDefaults(
|
||
defineProps<{
|
||
userProfile: IUserProfile;
|
||
}>(),
|
||
{
|
||
userProfile: () => ({} as IUserProfile),
|
||
},
|
||
);
|
||
|
||
const emits = defineEmits(['closeAboutBox']);
|
||
|
||
const isAboutBoxShow = ref<boolean>(false);
|
||
const isDisclaimerBoxShow = ref<boolean>(false);
|
||
const isCancellationBoxShow = ref<boolean>(false);
|
||
const SDKVersion = TUIStore.getData(StoreName.APP, 'SDKVersion');
|
||
|
||
function closeAboutBox() {
|
||
isAboutBoxShow.value = false;
|
||
emits('closeAboutBox');
|
||
}
|
||
// Disclaimer dialog
|
||
function toggleDisclaimer() {
|
||
isDisclaimerBoxShow.value = !isDisclaimerBoxShow.value;
|
||
}
|
||
function submitDisclaimer() {
|
||
isDisclaimerBoxShow.value = false;
|
||
}
|
||
// Cancellation dialog
|
||
function toggleCancellation() {
|
||
isCancellationBoxShow.value = !isCancellationBoxShow.value;
|
||
}
|
||
function submitCancellation() {
|
||
isCancellationBoxShow.value = false;
|
||
const deleteInfo: any = localStorage.getItem('TUIKit-userInfo');
|
||
const deleteInfoList = JSON.parse(deleteInfo);
|
||
const options: any = {
|
||
userId: deleteInfoList.userId,
|
||
token: deleteInfoList.token,
|
||
phone: deleteInfoList.phone,
|
||
};
|
||
TUILogin.logout().then(() => {
|
||
localStorage.removeItem('TUIKit-userInfo');
|
||
cancellation(options);
|
||
router.push({ path: '/' });
|
||
});
|
||
}
|
||
</script>
|
||
<style scoped lang="scss">
|
||
@import "../styles/common";
|
||
|
||
.main {
|
||
flex: 1;
|
||
|
||
@include flex;
|
||
}
|
||
|
||
.btn {
|
||
flex: 1;
|
||
margin-top: 14px;
|
||
margin-right: 10px;
|
||
|
||
&:last-child {
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
|
||
.btn-default {
|
||
@include btn-default;
|
||
}
|
||
|
||
.btn-error {
|
||
@include btn-error;
|
||
}
|
||
|
||
.about-container {
|
||
.about-box {
|
||
padding: 100px 180px;
|
||
padding-bottom: 0;
|
||
|
||
.main {
|
||
padding-bottom: 126px;
|
||
|
||
.main-name {
|
||
@include flex;
|
||
|
||
padding-bottom: 28px;
|
||
|
||
.logo {
|
||
width: 110px;
|
||
}
|
||
|
||
.name {
|
||
font-size: 40px;
|
||
font-family: PingFangSC-Medium;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
.main-version {
|
||
color: #999;
|
||
}
|
||
}
|
||
|
||
.footer {
|
||
.list {
|
||
@include flex;
|
||
|
||
list-style: none;
|
||
|
||
.line {
|
||
@include flex(row, center, center);
|
||
|
||
padding-top: 10px;
|
||
|
||
.link {
|
||
font-size: 16px;
|
||
padding: 0 10px;
|
||
color: #006eff;
|
||
border-right: 1px solid #eee;
|
||
}
|
||
|
||
.link:last-child {
|
||
border-right: 0 solid #000;
|
||
}
|
||
|
||
.copyright {
|
||
font-size: 14px;
|
||
padding: 25px 0;
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.disclaimer-box {
|
||
@include flex(column, center, stretch);
|
||
|
||
padding: 10px 10px 0;
|
||
|
||
.main {
|
||
align-items: flex-start;
|
||
width: 360px;
|
||
font-size: 1rem;
|
||
padding: 3.5rem 4rem;
|
||
color: #000;
|
||
|
||
.main-title {
|
||
font-size: 18px;
|
||
padding-bottom: 5px;
|
||
}
|
||
|
||
.main-info {
|
||
text-wrap: wrap;
|
||
}
|
||
}
|
||
|
||
.footer {
|
||
display: flex;
|
||
padding: 4rem;
|
||
}
|
||
}
|
||
|
||
.cancellation-box {
|
||
@include flex;
|
||
|
||
padding: 55px 42px;
|
||
max-width: 566px;
|
||
|
||
.main {
|
||
@include flex;
|
||
|
||
padding-bottom: 30px;
|
||
|
||
.main-text {
|
||
margin-top: 20px;
|
||
text-wrap: wrap;
|
||
text-align: center;
|
||
}
|
||
|
||
.main-info {
|
||
text-wrap: wrap;
|
||
}
|
||
|
||
.main-id {
|
||
color: #006eff;
|
||
}
|
||
}
|
||
|
||
.footer {
|
||
display: flex;
|
||
flex-direction: row;
|
||
width: 100%;
|
||
|
||
.btn {
|
||
flex: 1;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.about-box.box-h5 {
|
||
padding: 0;
|
||
}
|
||
|
||
.disclaimer-box.box-h5,
|
||
.cancellation-box.box-h5 {
|
||
padding: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
justify-content: flex-start;
|
||
|
||
.main {
|
||
flex: none;
|
||
box-sizing: border-box;
|
||
padding: 30px;
|
||
width: 100%;
|
||
}
|
||
|
||
.footer {
|
||
box-sizing: border-box;
|
||
padding: 10px 30px;
|
||
|
||
.btn {
|
||
height: 50px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|