From ef52095f5e9f0a9fe2da779bb1573947d77d75b6 Mon Sep 17 00:00:00 2001
From: jhzh <1628036192@qq.com>
Date: Fri, 22 May 2026 10:53:01 +0800
Subject: [PATCH] 1
---
src/views/safety/index.vue | 302 ++++++++++++++++++-------------------------------
1 files changed, 112 insertions(+), 190 deletions(-)
diff --git a/src/views/safety/index.vue b/src/views/safety/index.vue
index f1a9e08..3fcd00f 100644
--- a/src/views/safety/index.vue
+++ b/src/views/safety/index.vue
@@ -1,222 +1,144 @@
<template>
<div class="safety">
- <fx-header>
- </fx-header>
- <div class="content">
- <div class="title textColor">{{ $t('safe') }}</div>
- <div class="tit1 textColor">{{ $t('twoFactorAuthentication') }}</div>
- <div class="tit2">{{ $t('twoAuthenticationTips') }}</div>
- </div>
- <van-grid :column-num="2" :gutter="12" class="verify">
- <!-- <van-grid-item v-for="(item, index) in verifyList" :key="index"
- @click="gotoVerify(item.url, item.isVerify, item.type)">
- <div class="verifyBox">
- <div class="left">
- <div class="imgBox">
- <img v-if="item.isVerify" :src="item.icon.verify" alt="">
- <img v-else :src="item.icon.verifyno" alt="">
- </div>
- </div>
- <div class="right icon">
- <img src="@/assets/image/userCenter/more.png" alt="">
- </div>
+ <assets-head :title="''" :show-left="true" />
+ <div class="safety-content">
+ <!-- 第一组：修改登录密码、修改资金密码 -->
+ <div class="safety-list safety-list--white">
+ <div
+ v-for="(item, index) in list"
+ :key="index"
+ class="safety-item"
+ @click="$router.push(item.url)"
+ >
+ <span class="safety-item-name" v-text="item.name"></span>
+ <van-icon name="arrow" class="safety-item-arrow" />
</div>
- <div class="name textColor">{{ item.title }}</div>
- </van-grid-item> -->
- </van-grid>
- <div class="content">
- <div v-for="(obj, index) in list" :key="index" @click="$router.push(obj.url)"
- class="flex justify-between items-center h-50">
- <div class="textColor">{{ obj.name }}</div>
- <div class="icon"><img src="@/assets/image/userCenter/more.png" alt=""></div>
+ </div>
+ <!-- 第二组：语言 -->
+ <div class="safety-list safety-list--gray">
+ <div class="safety-item" @click="$router.push('/language')">
+ <span class="safety-item-name">{{ $t('language') }}</span>
+ <span class="safety-item-extra">{{ localeLabel }}</span>
+ <van-icon name="arrow" class="safety-item-arrow" />
+ </div>
</div>
</div>
+ <!-- 退出登录按钮 -->
+ <button class="safety-logout" @click="loginOut">{{ $t('loginOut') }}</button>
</div>
</template>
<script setup>
-import { Grid, GridItem, showToast } from 'vant'
-import { _getVerifTarget } from '@/service/user.api.js'
-import { ref, onMounted } from "vue";
+import { computed } from "vue";
import { useI18n } from "vue-i18n";
import { useRouter } from "vue-router";
-const router = useRouter()
-const { t } = useI18n()
+import { _logOut } from "@/service/user.api.js";
+import { useUserStore } from "@/store/user";
+import { localeLabels } from "./locale-labels.js";
+import AssetsHead from "@/components/Transform/assets-head/index.vue";
-const verifyList = ref([
- {
- title: t('googleAuthenticator'),
- name: "google",
- icon: {
- verifyno: new URL('@/assets/image/userCenter/gooleVerifyno.png', import.meta.url),
- verify: new URL('@/assets/image/userCenter/gooleVerify.png', import.meta.url)
- },
- isVerify: false,
- url: '/bindVerify?type=3',
- type: 3
- },
- {
- title: t('phoneVerify'),
- name: "phone",
- icon: {
- verifyno: new URL('@/assets/image/userCenter/phoneVerifyno.png', import.meta.url),
- verify: new URL('@/assets/image/userCenter/phoneVerify.png', import.meta.url)
- },
- isVerify: false,
- url: '/bindVerify?type=1',
- type: 1
- },
- {
- title: t('emailVerify'),
- name: "email",
- icon: {
- verifyno: new URL('@/assets/image/userCenter/emialVerifyno.png', import.meta.url),
- verify: new URL('@/assets/image/userCenter/emialVerify.png', import.meta.url)
- },
- isVerify: false,
- url: '/bindVerify?type=2',
- type: 2
+const router = useRouter();
+const { t, locale } = useI18n();
+const userStore = useUserStore();
+
+const localeLabel = computed(() => {
+ const loc = locale && typeof locale === "object" && "value" in locale ? locale.value : locale;
+ return localeLabels[loc] || loc || "English";
+});
+
+const list = computed(() => [
+ { name: t("changeLoginPassword"), url: "/changePassword" },
+ { name: t("changeFunsPassword"), url: "/changeFundsPassword" },
+]);
+
+const loginOut = () => {
+ const token = userStore.userInfo?.token;
+ if (token) {
+ _logOut({ token }).catch(() => {});
}
-])
-
-const list = ref([
- {
- name: t('changeLoginPassword'),
- url: "/changePassword"
- },
- {
- name: t('changeFunsPassword'),
- url: "/changeFundsPassword"
- },
- {
- name: t('manualReset'),
- url: "/resetVerify?type=0"
- },
- {
- name: `${t('更换绑定')}`,
- url: "/resetPhoneEmail"
- },
-])
-
-onMounted(() => {
- getVerifTarget()
-})
-
-const getVerifTarget = () => {
- _getVerifTarget({
- }).then((res) => {
- dataRest(res)
- })
-}
-const dataRest = (data) => {
- verifyList.value.forEach(item => {
- if (item.name == 'google') {
- item.isVerify = data.google_auth_bind;
- } else if (item.name == 'phone') {
- item.isVerify = data.phone_authority;
- } else if (item.name == 'email') {
- item.isVerify = data.email_authority;
- }
- })
-}
-const gotoVerify = (url, isVerify, type) => {
- if (isVerify) {
- router.push(`/changeVerify?type=${type}`);
- } else {
- router.push(url)
- }
-}
+ userStore.$patch({ userInfo: { token: "" } });
+ router.replace("/login");
+};
</script>
<style lang="scss" scoped>
-:deep(.van-nav-bar) {
- // background-color: $mainBgColor;
-}
-
-:deep(.van-grid-item__content) {
- // background: $main2_background !important;
- color: $text_color;
-}
+@import "@/assets/init.scss";
.safety {
- font-size: 12px;
- width: 100%;
+ min-height: 100vh;
+ background: #fff;
box-sizing: border-box;
-
- :deep(.van-grid-item__content) {
- background: $cont_background;
- }
+ padding-bottom: 40px;
}
-.title {
- font-weight: 700;
- font-size: 26px;
- margin-top: 12px;
- margin-bottom: 12px;
-}
-
-.content {
+.safety-content {
padding: 0 16px;
}
-.tit1 {
- font-size: 15px;
+.safety-list {
+ border-radius: 12px;
+ overflow: hidden;
+ margin-top: 20px;
+
+ &:first-of-type {
+ margin-top: 16px;
+ }
+}
+
+.safety-list--white {
+ background: #fff;
+ box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.06);
+}
+
+.safety-list--gray {
+ background: #f5f5f5;
+}
+
+.safety-item {
+ display: flex;
+ align-items: center;
+ height: 50px;
+ padding: 0 4px 0 0;
+ font-size: 16px;
+ color: #333;
+ background: transparent;
+
+ &:not(:last-child) {
+ border-bottom: 1px solid #eee;
+ }
+}
+
+.safety-list--gray .safety-item:not(:last-child) {
+ border-bottom-color: #ebebeb;
+}
+
+.safety-item-name {
+ flex: 1;
font-weight: 400;
}
-.tit2 {
- color: $text_color1;
- font-size: 12px;
- margin-top: 5px;
+.safety-item-extra {
+ margin-right: 8px;
+ font-size: 14px;
+ color: #999;
}
-.verify {
- font-size: 12px;
- color: #222832;
- margin-top: 21px;
- font-weight: 700;
-
- .verifyBox {
- display: flex;
- justify-content: space-between;
- padding-left: 14px;
- padding-right: 27px;
- box-sizing: border-box;
- align-items: center;
- width: 100%;
-
- .left {
- .imgBox {
- width: 45px;
- height: 34px;
-
- img {
- width: 100%;
- height: 100%;
- }
- }
- }
- }
-
- .name {
- width: 100%;
- padding-left: 14px;
- margin-top: 10px;
- }
+.safety-item-arrow {
+ font-size: 14px;
+ color: #c8c9cc;
}
-.icon {
- width: 14px;
- height: 14px;
-
- img {
- width: 100%;
- height: 100%;
- }
+.safety-logout {
+ display: block;
+ width: calc(100% - 32px);
+ margin: 32px 16px 0;
+ padding: 16px 0;
+ border: none;
+ border-radius: 12px;
+ background: linear-gradient(90deg, #a443cf, #5e2bc8);
+ color: #fff;
+ font-size: 16px;
+ font-weight: 600;
+ cursor: pointer;
}
-
-.h-50 {
- height: 50px;
- ;
-}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3