Skip to content

D
dexfilter-web-nuxt3
Commit 307db5b4 by lei
Options

1

parent a0bbd5f4
Showing with 141 additions and 224 deletions
constants/UnifiedManagementChain.ts
This source diff could not be displayed because it is too large. You can view the blob instead.
plugins/Tdesign.ts
...@@ -2,14 +2,12 @@ import { defineNuxtPlugin } from "#app"; ...@@ -2,14 +2,12 @@ import { defineNuxtPlugin } from "#app";
import { import {
HeadMenu as THeadMenu, HeadMenu as THeadMenu,
MenuItem as TMenuItem, MenuItem as TMenuItem,
Icon as TIcon,
Button as TButton, Button as TButton,
Header as Theader, Header as Theader,
Footer as TFooter, Footer as TFooter,
Content as TContent, Content as TContent,
Layout as Tlayout, Layout as Tlayout,
Input as TInput, Input as TInput,
Drawer as TDrawer,
Loading as TLoading, Loading as TLoading,
TabPanel as TTabPanel, TabPanel as TTabPanel,
Tabs as TTabs, Tabs as TTabs,
...@@ -22,7 +20,6 @@ import { ...@@ -22,7 +20,6 @@ import {
Option as TOption, Option as TOption,
Switch as TSwitch, Switch as TSwitch,
RadioGroup as TRadioGroup, RadioGroup as TRadioGroup,
Pagination as TPagination,
RadioButton as TRadioButton, RadioButton as TRadioButton,
InputNumber as TInputNumber, InputNumber as TInputNumber,
DatePicker as TDatePicker, DatePicker as TDatePicker,
...@@ -37,14 +34,12 @@ import { ...@@ -37,14 +34,12 @@ import {
const components = [ const components = [
THeadMenu, THeadMenu,
TMenuItem, TMenuItem,
TIcon,
TButton, TButton,
Theader, Theader,
TFooter, TFooter,
TContent, TContent,
Tlayout, Tlayout,
TInput, TInput,
TDrawer,
TLoading, TLoading,
TTabPanel, TTabPanel,
TTabs, TTabs,
...@@ -57,7 +52,6 @@ const components = [ ...@@ -57,7 +52,6 @@ const components = [
TOption, TOption,
TSwitch, TSwitch,
TRadioGroup, TRadioGroup,
TPagination,
TRadioButton, TRadioButton,
TInputNumber, TInputNumber,
TDatePicker, TDatePicker,
...@@ -69,11 +63,8 @@ const components = [ ...@@ -69,11 +63,8 @@ const components = [
TSwiper, TSwiper,
TSwiperItem, TSwiperItem,
]; ];
// 无法循环挂载的组件--单独拎出来
// const oncomponents = [TTable];
export default defineNuxtPlugin((nuxtApp) => { export default defineNuxtPlugin((nuxtApp) => {
components.forEach((item: any) => { components.forEach((item: any) => {
nuxtApp.vueApp.use(item); nuxtApp.vueApp.use(item);
}); });
// nuxtApp.vueApp.component('t-table', oncomponents[0]);
}); });
views/layout/Search.vue
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
<div class="input-icon"> <div class="input-icon">
<SearchSvg class="icon1"></SearchSvg> <SearchSvg class="icon1"></SearchSvg>
</div> </div>
<div class="circular-box">{{ $t('Search.search') }}</div> <div class="circular-box">{{ $t("Search.search") }}</div>
</template> </template>
</t-input> </t-input>
<ClientOnly> <ClientOnly>
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
</template> </template>
<template #suffixIcon> <template #suffixIcon>
<div class="Cancel" @click="selectDialogVisible = false"> <div class="Cancel" @click="selectDialogVisible = false">
{{ $t('user.Cancel') }} {{ $t("user.Cancel") }}
</div> </div>
</template> </template>
</t-input> </t-input>
...@@ -55,7 +55,7 @@ ...@@ -55,7 +55,7 @@
@onChange="onChange" @onChange="onChange"
></SearchRecords> ></SearchRecords>
<div class="TopSearch"> <div class="TopSearch">
{{ $t('tokenInfo.TopSearch') }} {{ $t("tokenInfo.TopSearch") }}
</div> </div>
<SearchList :options="topList"></SearchList> <SearchList :options="topList"></SearchList>
<div v-if="isLoading" class="loading-center2"> <div v-if="isLoading" class="loading-center2">
...@@ -89,22 +89,22 @@ ...@@ -89,22 +89,22 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import request from '@/utils/request'; import request from "@/utils/request";
import { import {
parseCoinAmount, parseCoinAmount,
parsePercent, parsePercent,
RemoveSpaces, RemoveSpaces,
debounce, debounce,
} from '@/utils/tool'; } from "@/utils/tool";
import SearchSvg from '/public/images/svg/header/searchIcon.svg'; import SearchSvg from "/public/images/svg/header/searchIcon.svg";
import SearchSvg2 from '/public/images/svg/search/search.svg'; import SearchSvg2 from "/public/images/svg/search/search.svg";
import { WebS } from '@/utils/TokenTrans'; import { WebS } from "@/utils/TokenTrans";
import SearchRecords from './searchRecords.vue'; import SearchRecords from "./searchRecords.vue";
import SearchList from './searchList.vue'; import SearchList from "./searchList.vue";
import * as Cache from '@/utils/cache'; import * as Cache from "@/utils/cache";
const keyword = ref(''); import { Drawer as TDrawer } from "tdesign-vue-next";
const inputPlaceholder = ref(''); const keyword = ref("");
const visible = ref(false); const inputPlaceholder = ref("");
const selectDialogVisible = ref(false); const selectDialogVisible = ref(false);
const autofocus = ref(false); const autofocus = ref(false);
// 搜索结果是否还有其他页数 // 搜索结果是否还有其他页数
...@@ -116,25 +116,25 @@ const chooseSearchTwo = ref(false); ...@@ -116,25 +116,25 @@ const chooseSearchTwo = ref(false);
// 加载更多样式显示隐藏 // 加载更多样式显示隐藏
const loadingMore = ref(false); const loadingMore = ref(false);
// 成功发起搜索请求的value // 成功发起搜索请求的value
const successValue = ref(''); const successValue = ref("");
// 当前显示的列表状态--search-top // 当前显示的列表状态--search-top
const currentSearchType = ref('top'); const currentSearchType = ref("top");
const showSelect = () => { const showSelect = () => {
selectDialogVisible.value = true; selectDialogVisible.value = true;
// 显示第二个搜索框 // 显示第二个搜索框
chooseSearchTwo.value = true; chooseSearchTwo.value = true;
}; };
const current = ref('all'); const current = ref("all");
const resultList = ref([]); const resultList = ref([]);
const topList = ref([]); const topList = ref([]);
const isLoading = ref(false); const isLoading = ref(false);
const isFirst = ref(true); const isFirst = ref(true);
const darg = () => { const darg = () => {
let dom = document.getElementById('search-token-list'); let dom = document.getElementById("search-token-list");
if (dom !== null) { if (dom !== null) {
dom.addEventListener('scroll', () => { dom.addEventListener("scroll", () => {
let domHeight = dom.scrollHeight; let domHeight = dom.scrollHeight;
let domTop = dom.scrollTop; let domTop = dom.scrollTop;
let cliheight = dom.clientHeight; let cliheight = dom.clientHeight;
...@@ -167,7 +167,7 @@ const onChange = (value: string) => { ...@@ -167,7 +167,7 @@ const onChange = (value: string) => {
getTokenList(); getTokenList();
}; };
const getTokenList = () => { const getTokenList = () => {
if (keyword.value.trim() === '' || keyword.value.length == 1) { if (keyword.value.trim() === "" || keyword.value.length == 1) {
return; return;
} }
if (!loadingMore.value) { if (!loadingMore.value) {
...@@ -176,7 +176,7 @@ const getTokenList = () => { ...@@ -176,7 +176,7 @@ const getTokenList = () => {
defalutPage.value = 1; defalutPage.value = 1;
} }
successValue.value = keyword.value; successValue.value = keyword.value;
currentSearchType.value = 'search'; currentSearchType.value = "search";
// //
let obj = WebS(RemoveSpaces(keyword.value)); let obj = WebS(RemoveSpaces(keyword.value));
request request
...@@ -229,10 +229,10 @@ watch( ...@@ -229,10 +229,10 @@ watch(
() => keyword.value, () => keyword.value,
(v) => { (v) => {
if (!v) { if (!v) {
currentSearchType.value = 'top'; currentSearchType.value = "top";
isLoading.value = false; isLoading.value = false;
} else { } else {
currentSearchType.value = 'search'; currentSearchType.value = "search";
} }
} }
); );
...@@ -241,26 +241,26 @@ const resultFilter = (list) => { ...@@ -241,26 +241,26 @@ const resultFilter = (list) => {
let newList = list; let newList = list;
newList.forEach((item, index) => { newList.forEach((item, index) => {
if (item.name.length >= 20) { if (item.name.length >= 20) {
item.name = item.name.substring(0, 20) + '...'; item.name = item.name.substring(0, 20) + "...";
} }
item.up = '$' + parseCoinAmount(item.up); item.up = "$" + parseCoinAmount(item.up);
item.Newr24h = parsePercent(item.r24h); item.Newr24h = parsePercent(item.r24h);
item.r24h = item.r24h.toFixed(3); item.r24h = item.r24h.toFixed(3);
// 将token转换为常用样式 // 将token转换为常用样式
item.filterToken = item.filterToken =
item.token.substring(0, 6) + item.token.substring(0, 6) +
'...' + "..." +
item.token.substring(item.token.length - 4); item.token.substring(item.token.length - 4);
item.filterPool = item.filterPool =
item.tb_name.substring(0, 6) + item.tb_name.substring(0, 6) +
'...' + "..." +
item.tb_name.substring(item.tb_name.length - 4); item.tb_name.substring(item.tb_name.length - 4);
if (item.Newr24h[0] !== '-') { if (item.Newr24h[0] !== "-") {
item.Newr24h = '+' + item.Newr24h; item.Newr24h = "+" + item.Newr24h;
} }
// 判断当前token是否已收藏 // 判断当前token是否已收藏
let res = localStorage.getItem('COLLECTION_LIST'); let res = localStorage.getItem("COLLECTION_LIST");
if (!res) { if (!res) {
item.isStar = false; item.isStar = false;
} else { } else {
...@@ -278,25 +278,25 @@ const doSeach = debounce(getTokenList, 500); ...@@ -278,25 +278,25 @@ const doSeach = debounce(getTokenList, 500);
const getPopularList = async () => { const getPopularList = async () => {
try { try {
isLoading.value = true; isLoading.value = true;
let res: any = await request.get('/score'); let res: any = await request.get("/score");
if (res.list.length) { if (res.list.length) {
res.list.forEach((item: PopularItem) => { res.list.forEach((item: PopularItem) => {
// 增加一个带省略号的格式 // 增加一个带省略号的格式
item.filterPool = item.filterPool =
item.pool.substring(0, 4) + item.pool.substring(0, 4) +
'...' + "..." +
item.pool.substring(item.pool.length - 4); item.pool.substring(item.pool.length - 4);
// //
item.tb_name = item.pool; item.tb_name = item.pool;
item.pool = item.pSymbol; item.pool = item.pSymbol;
item.filterToken = item.filterToken =
item.token.substring(0, 4) + item.token.substring(0, 4) +
'...' + "..." +
item.token.substring(item.token.length - 4); item.token.substring(item.token.length - 4);
item.up = '$' + parseCoinAmount(item.price); item.up = "$" + parseCoinAmount(item.price);
item.Newr24h = parsePercent(item.radio); item.Newr24h = parsePercent(item.radio);
if (item.Newr24h[0] !== '-') { if (item.Newr24h[0] !== "-") {
item.Newr24h = '+' + item.Newr24h; item.Newr24h = "+" + item.Newr24h;
} }
// 判断当前token是否已收藏 // 判断当前token是否已收藏
let res = Cache.getCollectionList(); let res = Cache.getCollectionList();
...@@ -342,8 +342,8 @@ watch( ...@@ -342,8 +342,8 @@ watch(
); );
</script> </script>
<style lang="less"> <style lang="less">
@import '@/style/variables.less'; @import "@/style/variables.less";
@import '@/style/flex.less'; @import "@/style/flex.less";
.header-menu-search { .header-menu-search {
display: flex; display: flex;
margin-left: 16px; margin-left: 16px;
...@@ -359,7 +359,7 @@ watch( ...@@ -359,7 +359,7 @@ watch(
margin: 0 1rem 0 0.6rem; margin: 0 1rem 0 0.6rem;
color: var(--td-Search-info-color-2); color: var(--td-Search-info-color-2);
font-size: @font-size-s; font-size: @font-size-s;
font-family: 'Regular'; font-family: "Regular";
} }
.header-search { .header-search {
margin-left: 20px; margin-left: 20px;
...@@ -428,7 +428,7 @@ watch( ...@@ -428,7 +428,7 @@ watch(
.Cancel { .Cancel {
width: 60px; width: 60px;
height: 100%; height: 100%;
font-family: 'Medium'; font-family: "Medium";
font-weight: 500; font-weight: 500;
font-size: 14px; font-size: 14px;
border-left: var(--new-border-2); border-left: var(--new-border-2);
......
views/login/Header.vue deleted 100644 → 0
<template>
<header class="login-header">
<logo-full-icon class="logo" />
<div class="operations-container">
<t-button
theme="default"
shape="square"
variant="text"
@click="navToGitHub"
>
<t-icon name="logo-github" class="icon" />
</t-button>
<t-button
theme="default"
shape="square"
variant="text"
@click="navToHelper"
>
<t-icon name="help-circle" class="icon" />
</t-button>
<t-button
theme="default"
shape="square"
variant="text"
@click="toggleSettingPanel"
>
<t-icon name="setting" class="icon" />
</t-button>
</div>
</header>
</template>
<script setup lang="ts">
import LogoFullIcon from '@/assets/assets-logo-full.svg?component';
const toggleSettingPanel = () => {
// store.commit('setting/toggleSettingPanel', true);
};
const navToGitHub = () => {
window.open('https://github.com/tencent/tdesign-vue-next-starter');
};
const navToHelper = () => {
window.open('http://tdesign.tencent.com/starter/docs/get-started');
};
</script>
<style lang="less" scoped>
@import '@/style/variables.less';
@import '@/style/flex.less';
.login-header {
height: 64px;
padding: 0 24px;
.dja(space-between, center);
backdrop-filter: blur(5px);
color: @text-color-primary;
.logo {
width: 138px;
height: 48px;
}
.operations-container {
.da();
.t-button {
margin-left: 16px;
}
.icon {
height: 20px;
width: 20px;
padding: 6px;
box-sizing: content-box;
&:hover {
cursor: pointer;
}
}
}
}
</style>
views/login/Login.vue
<template> <template>
<div class="form-container"> <div class="form-container">
<div class="title-box"> <div class="title-box">
<span class="span1">{{ $t('login.SignIn') }}</span> <span class="span1">{{ $t("login.SignIn") }}</span>
</div> </div>
<div class="Forgot-box" @click="findPwd">{{ $t('login.forgot') }}</div> <div class="Forgot-box" @click="findPwd">{{ $t("login.forgot") }}</div>
<t-form <t-form
class="login-form" class="login-form"
ref="form" ref="form"
...@@ -53,14 +53,14 @@ ...@@ -53,14 +53,14 @@
type="submit" type="submit"
class="custom_button_back_border" class="custom_button_back_border"
> >
{{ $t('login.loginBtn') }} {{ $t("login.loginBtn") }}
</t-button> </t-button>
</t-form-item> </t-form-item>
<div class="go-find"> <div class="go-find">
<div class="register"> <div class="register">
{{ $t('login.noAccount') }} {{ $t("login.noAccount") }}
<span class="link" @click="goRegister">{{ <span class="link" @click="goRegister">{{
$t('login.goRegister') $t("login.goRegister")
}}</span> }}</span>
</div> </div>
</div> </div>
...@@ -69,11 +69,12 @@ ...@@ -69,11 +69,12 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { LoadingPlugin, MessagePlugin } from 'tdesign-vue-next'; import { LoadingPlugin, MessagePlugin } from "tdesign-vue-next";
import md5 from 'md5'; import md5 from "md5";
import request from '@/utils/request'; import request from "@/utils/request";
import { Icon as TIcon } from "tdesign-vue-next";
const emit = defineEmits(['registerSuccess', 'go']); const emit = defineEmits(["registerSuccess", "go"]);
// 用户token // 用户token
const userToken = useUserToken(); const userToken = useUserToken();
interface FormData { interface FormData {
...@@ -81,18 +82,18 @@ interface FormData { ...@@ -81,18 +82,18 @@ interface FormData {
password?: string; password?: string;
} }
const formData = ref<FormData>({ const formData = ref<FormData>({
email: '', email: "",
password: '', password: "",
}); });
const Cookie = useCookie('userCookie'); const Cookie = useCookie("userCookie");
const formRules = computed(() => { const formRules = computed(() => {
let rules = { let rules = {
email: [ email: [
{ required: true, message: 'email required', type: 'error' }, { required: true, message: "email required", type: "error" },
{ email: true, message: 'email error', type: 'error' }, { email: true, message: "email error", type: "error" },
], ],
password: [ password: [
{ required: true, message: 'password required', type: 'error' }, { required: true, message: "password required", type: "error" },
// { min: 6, message: '至少需要6位', type: 'error' }, // { min: 6, message: '至少需要6位', type: 'error' },
], ],
}; };
...@@ -112,30 +113,30 @@ const onSubmit = async ({ validateResult }) => { ...@@ -112,30 +113,30 @@ const onSubmit = async ({ validateResult }) => {
LoadingPlugin(true); LoadingPlugin(true);
let data: any; let data: any;
try { try {
data = await request.post('/api/auth/login', params); data = await request.post("/api/auth/login", params);
userToken.value = data.data.access_token; userToken.value = data.data.access_token;
// 再存到cookie中 // 再存到cookie中
Cookie.value = data.data.access_token; Cookie.value = data.data.access_token;
LoadingPlugin(false); LoadingPlugin(false);
MessagePlugin.success('success'); MessagePlugin.success("success");
router.push({ router.push({
path: '/', path: "/",
}); });
} catch (e) { } catch (e) {
LoadingPlugin(false); LoadingPlugin(false);
MessagePlugin.warning(data.msg ?? '登录失败'); MessagePlugin.warning(data.msg ?? "登录失败");
} }
} }
}; };
const findPwd = () => { const findPwd = () => {
emit('go', 'reset'); emit("go", "reset");
}; };
const goRegister = () => { const goRegister = () => {
emit('go', 'register'); emit("go", "register");
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@import '@/style/flex.less'; @import "@/style/flex.less";
.form-container { .form-container {
.title-box { .title-box {
width: 70%; width: 70%;
......
views/login/Register.vue
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
@submit="onSubmit" @submit="onSubmit"
> >
<div class="title-box"> <div class="title-box">
<span class="span1">{{ $t('login.RegisterAccount') }}</span> <span class="span1">{{ $t("login.RegisterAccount") }}</span>
</div> </div>
<t-form-item name="email"> <t-form-item name="email">
<t-input <t-input
...@@ -71,7 +71,7 @@ ...@@ -71,7 +71,7 @@
:disabled="countDown > 0" :disabled="countDown > 0"
>{{ >{{
countDown == 0 countDown == 0
? $t('login.SendVerificationCode') ? $t("login.SendVerificationCode")
: `${countDown}秒后可重发` : `${countDown}秒后可重发`
}}</t-button }}</t-button
> >
...@@ -98,9 +98,9 @@ ...@@ -98,9 +98,9 @@
<t-form-item class="check-container" name="checked"> <t-form-item class="check-container" name="checked">
<t-checkbox v-model="formData.checked" <t-checkbox v-model="formData.checked"
>{{ $t('login.haveRead') }} >{{ $t("login.haveRead") }}
</t-checkbox> </t-checkbox>
<span class="link">{{ $t('login.UserPrivacy') }}</span> <span class="link">{{ $t("login.UserPrivacy") }}</span>
</t-form-item> </t-form-item>
<t-form-item class="submit"> <t-form-item class="submit">
<t-button <t-button
...@@ -109,22 +109,24 @@ ...@@ -109,22 +109,24 @@
type="submit" type="submit"
class="custom_button_back_border" class="custom_button_back_border"
> >
{{ $t('login.registerBtn') }} {{ $t("login.registerBtn") }}
</t-button> </t-button>
</t-form-item> </t-form-item>
<div class="go-login" @click="goLogin"> <div class="go-login" @click="goLogin">
{{ $t('login.haveAccount') }}, {{ $t("login.haveAccount") }},
<span class="go-login-span">{{ $t('login.goLogin') }}</span> <span class="go-login-span">{{ $t("login.goLogin") }}</span>
</div> </div>
</t-form> </t-form>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { MessagePlugin, LoadingPlugin } from 'tdesign-vue-next'; import { MessagePlugin, LoadingPlugin } from "tdesign-vue-next";
import request from '@/utils/request'; import request from "@/utils/request";
import md5 from 'md5'; import md5 from "md5";
import { useCounter } from '@/hooks'; import { useCounter } from "@/hooks";
import { Icon as TIcon } from "tdesign-vue-next";
const [countDown, handleCounter] = useCounter(); const [countDown, handleCounter] = useCounter();
const props = defineProps({ const props = defineProps({
InvitCode: String, InvitCode: String,
...@@ -135,25 +137,25 @@ onMounted(() => { ...@@ -135,25 +137,25 @@ onMounted(() => {
} }
}); });
const INITIAL_DATA = { const INITIAL_DATA = {
email: '', email: "",
password: '', password: "",
code: '', code: "",
password2: '', password2: "",
checked: false, checked: false,
invite_code: '', invite_code: "",
}; };
const formData = ref({ ...INITIAL_DATA }); const formData = ref({ ...INITIAL_DATA });
const showPsw = ref(false); const showPsw = ref(false);
const showPsw2 = ref(false); const showPsw2 = ref(false);
const form = ref(null); const form = ref(null);
const emit = defineEmits(['go']); const emit = defineEmits(["go"]);
// 数据校验 // 数据校验
const repasswordValidator = (value) => { const repasswordValidator = (value) => {
if (formData.value.password === value) { if (formData.value.password === value) {
return { result: true }; return { result: true };
} else { } else {
return { result: false, message: '两次密码输入不一致', type: 'error' }; return { result: false, message: "两次密码输入不一致", type: "error" };
} }
}; };
// 发送验证码 // 发送验证码
...@@ -170,20 +172,20 @@ const sendCode = () => { ...@@ -170,20 +172,20 @@ const sendCode = () => {
/[a-zA-Z0-9]+([-_.][A-Za-zd]+)*@([a-zA-Z0-9]+[-.])+[A-Za-zd]{2,5}$/; /[a-zA-Z0-9]+([-_.][A-Za-zd]+)*@([a-zA-Z0-9]+[-.])+[A-Za-zd]{2,5}$/;
if (!reg.test(formData.value.email)) { if (!reg.test(formData.value.email)) {
MessagePlugin.closeAll(); MessagePlugin.closeAll();
MessagePlugin.warning('请输入正确的邮箱'); MessagePlugin.warning("请输入正确的邮箱");
return; return;
} }
handleCounter(); handleCounter();
request request
.post('api/send/email', { .post("api/send/email", {
email: formData.value.email, email: formData.value.email,
scenes: 'reg', scenes: "reg",
}) })
.then((res: any) => { .then((res: any) => {
if (res.msg === 'success') { if (res.msg === "success") {
MessagePlugin.success('验证码发送成功,请注意查收'); MessagePlugin.success("验证码发送成功,请注意查收");
} else { } else {
MessagePlugin.warning('发送失败，请稍后再试'); MessagePlugin.warning("发送失败，请稍后再试");
} }
}); });
} catch (e) { } catch (e) {
...@@ -192,35 +194,35 @@ const sendCode = () => { ...@@ -192,35 +194,35 @@ const sendCode = () => {
}; };
const FORM_RULES = { const FORM_RULES = {
email: [ email: [
{ required: true, message: 'email required', type: 'error' }, { required: true, message: "email required", type: "error" },
{ email: true, message: 'email error', type: 'error' }, { email: true, message: "email error", type: "error" },
], ],
password: [ password: [
{ required: true, message: 'password required', type: 'error' }, { required: true, message: "password required", type: "error" },
// { min: 6, message: '至少需要6位', type: 'error' }, // { min: 6, message: '至少需要6位', type: 'error' },
], ],
password2: [ password2: [
{ required: true, message: 'confirm password required', type: 'error' }, { required: true, message: "confirm password required", type: "error" },
{ validator: repasswordValidator }, { validator: repasswordValidator },
], ],
}; };
const onSubmit = async ({ validateResult }) => { const onSubmit = async ({ validateResult }) => {
if (validateResult === true) { if (validateResult === true) {
if (!formData.value.checked) { if (!formData.value.checked) {
MessagePlugin.error('请同意用户隐私政策'); MessagePlugin.error("请同意用户隐私政策");
return; return;
} }
try { try {
LoadingPlugin(true); LoadingPlugin(true);
const data: any = await request.post('/api/auth/register', { const data: any = await request.post("/api/auth/register", {
email: formData.value.email, email: formData.value.email,
code: formData.value.code, code: formData.value.code,
password: md5(formData.value.password), password: md5(formData.value.password),
invite_code: formData.value.invite_code, invite_code: formData.value.invite_code,
}); });
if (data.status) { if (data.status) {
MessagePlugin.success('注册成功'); MessagePlugin.success("注册成功");
emit('go', 'login'); emit("go", "login");
} else { } else {
MessagePlugin.warning(data.msg); MessagePlugin.warning(data.msg);
} }
...@@ -233,7 +235,7 @@ const onSubmit = async ({ validateResult }) => { ...@@ -233,7 +235,7 @@ const onSubmit = async ({ validateResult }) => {
}; };
const goLogin = (val) => { const goLogin = (val) => {
emit('go', 'login'); emit("go", "login");
}; };
</script> </script>
......
views/login/ResetPassword.vue
<template> <template>
<div class="login-box-header"> <div class="login-box-header">
<div class="back" @click="goBack"> <div class="back" @click="goBack">
<arrow-left-icon /><span>{{ $t('login.backBtn') }}</span> <arrow-left-icon /><span>{{ $t("login.backBtn") }}</span>
</div> </div>
<div class="title">{{ $t('login.PasswordReset') }}</div> <div class="title">{{ $t("login.PasswordReset") }}</div>
</div> </div>
<t-form <t-form
ref="form" ref="form"
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
> >
{{ {{
countDown == 0 countDown == 0
? $t('login.SendVerificationCode') ? $t("login.SendVerificationCode")
: `${countDown}秒后可重发` : `${countDown}秒后可重发`
}} }}
</t-button> </t-button>
...@@ -89,33 +89,35 @@ ...@@ -89,33 +89,35 @@
<t-form-item class="check-container" name="checked"> <t-form-item class="check-container" name="checked">
<t-checkbox v-model="formData.checked" <t-checkbox v-model="formData.checked"
>{{ $t('login.readAndAgree') }} >{{ $t("login.readAndAgree") }}
</t-checkbox> </t-checkbox>
<span class="link" @click="goStatement">{{ <span class="link" @click="goStatement">{{
$t('login.UserPrivacy') $t("login.UserPrivacy")
}}</span> }}</span>
</t-form-item> </t-form-item>
<t-form-item class="submit"> <t-form-item class="submit">
<t-button block size="large" type="submit"> <t-button block size="large" type="submit">
{{ $t('login.ConfirmReset') }} {{ $t("login.ConfirmReset") }}
</t-button> </t-button>
</t-form-item> </t-form-item>
</t-form> </t-form>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { MessagePlugin, LoadingPlugin } from 'tdesign-vue-next'; import { MessagePlugin, LoadingPlugin } from "tdesign-vue-next";
import { useCounter } from '@/hooks'; import { useCounter } from "@/hooks";
import { ArrowLeftIcon } from 'tdesign-icons-vue-next'; import { ArrowLeftIcon } from "tdesign-icons-vue-next";
import request from '@/utils/request'; import request from "@/utils/request";
import md5 from 'md5'; import md5 from "md5";
import { useI18n } from 'vue-i18n'; import { useI18n } from "vue-i18n";
import { Icon as TIcon } from "tdesign-vue-next";
const { t } = useI18n(); const { t } = useI18n();
const INITIAL_DATA = { const INITIAL_DATA = {
email: '', email: "",
vcCode: '', vcCode: "",
password: '', password: "",
password2: '', password2: "",
checked: false, checked: false,
}; };
...@@ -129,7 +131,7 @@ const router = useRouter(); ...@@ -129,7 +131,7 @@ const router = useRouter();
const btnLoading = ref(false); const btnLoading = ref(false);
const [countDown, handleCounter] = useCounter(); const [countDown, handleCounter] = useCounter();
const sendVerfiyCode = async () => { const sendVerfiyCode = async () => {
const res = await form.value.validate({ fields: ['email'] }); const res = await form.value.validate({ fields: ["email"] });
if (res !== true) { if (res !== true) {
return; return;
} }
...@@ -139,9 +141,9 @@ const sendVerfiyCode = async () => { ...@@ -139,9 +141,9 @@ const sendVerfiyCode = async () => {
btnLoading.value = true; btnLoading.value = true;
// 重置验证码 // 重置验证码
request request
.post('/api/send/email', { .post("/api/send/email", {
email: formData.value.email, email: formData.value.email,
scenes: 'reset', scenes: "reset",
}) })
.then((data) => { .then((data) => {
handleCounter(); handleCounter();
...@@ -157,43 +159,43 @@ const repasswordValidator = (value) => { ...@@ -157,43 +159,43 @@ const repasswordValidator = (value) => {
if (formData.value.password === value) { if (formData.value.password === value) {
return { result: true }; return { result: true };
} else { } else {
return { result: false, message: t('login.notMatch'), type: 'error' }; return { result: false, message: t("login.notMatch"), type: "error" };
} }
}; };
const FORM_RULES = { const FORM_RULES = {
email: [ email: [
{ required: true, message: t('login.EMailRequired'), type: 'error' }, { required: true, message: t("login.EMailRequired"), type: "error" },
{ email: true, message: t('login.entercorrectemail'), type: 'error' }, { email: true, message: t("login.entercorrectemail"), type: "error" },
], ],
vcCode: [ vcCode: [
{ required: true, message: t('login.Verificatioquired'), type: 'error' }, { required: true, message: t("login.Verificatioquired"), type: "error" },
{ min: 4, message: t('login.Captchaerror'), type: 'error' }, { min: 4, message: t("login.Captchaerror"), type: "error" },
], ],
password: [ password: [
{ required: true, message: t('login.PasswordRequired'), type: 'error' }, { required: true, message: t("login.PasswordRequired"), type: "error" },
{ min: 6, message: t('login.Ateeded'), type: 'error' }, { min: 6, message: t("login.Ateeded"), type: "error" },
], ],
password2: [ password2: [
{ {
required: true, required: true,
message: t('login.ConfirmPasswordRequired'), message: t("login.ConfirmPasswordRequired"),
type: 'error', type: "error",
}, },
{ validator: repasswordValidator }, { validator: repasswordValidator },
], ],
}; };
const emit = defineEmits(['go']); const emit = defineEmits(["go"]);
const onSubmit = async ({ validateResult }) => { const onSubmit = async ({ validateResult }) => {
if (validateResult === true) { if (validateResult === true) {
if (!formData.value.checked) { if (!formData.value.checked) {
MessagePlugin.error('请同意用户隐私政策'); MessagePlugin.error("请同意用户隐私政策");
return; return;
} }
try { try {
LoadingPlugin(true); LoadingPlugin(true);
const data: any = await request.post('/api/password/reset', { const data: any = await request.post("/api/password/reset", {
email: formData.value.email, email: formData.value.email,
code: formData.value.vcCode, code: formData.value.vcCode,
password: md5(formData.value.password), password: md5(formData.value.password),
...@@ -202,7 +204,7 @@ const onSubmit = async ({ validateResult }) => { ...@@ -202,7 +204,7 @@ const onSubmit = async ({ validateResult }) => {
if (data.code == 0) { if (data.code == 0) {
MessagePlugin.success(data.data); MessagePlugin.success(data.data);
} }
emit('go', 'login'); emit("go", "login");
} catch (e) { } catch (e) {
console.log(e); console.log(e);
} finally { } finally {
...@@ -211,15 +213,15 @@ const onSubmit = async ({ validateResult }) => { ...@@ -211,15 +213,15 @@ const onSubmit = async ({ validateResult }) => {
} }
}; };
const goBack = () => { const goBack = () => {
emit('go', 'login'); emit("go", "login");
}; };
const goStatement = () => { const goStatement = () => {
console.log(1); console.log(1);
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@import '@/style/flex.less'; @import "@/style/flex.less";
@import '@/style/variables.less'; @import "@/style/variables.less";
.login-box-header { .login-box-header {
width: 360px; width: 360px;
height: 60px; height: 60px;
......
views/token/CollectionDrawer.vue
...@@ -24,7 +24,9 @@ ...@@ -24,7 +24,9 @@
</div> </div>
</template> </template>
<script setup lang="tsx"> <script setup lang="tsx">
import CollectionTable from './collectionTable.vue'; import CollectionTable from "./collectionTable.vue";
import { Drawer as TDrawer } from "tdesign-vue-next";
const props = defineProps({ const props = defineProps({
visible: Boolean, visible: Boolean,
token: String, token: String,
...@@ -36,9 +38,9 @@ watch( ...@@ -36,9 +38,9 @@ watch(
dialogVisible.value = v; dialogVisible.value = v;
} }
); );
const emit = defineEmits(['update:visible']); const emit = defineEmits(["update:visible"]);
const doClose = () => { const doClose = () => {
emit('update:visible', false); emit("update:visible", false);
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
......
views/user/Billing.vue
...@@ -41,6 +41,7 @@ import request from "@/utils/request"; ...@@ -41,6 +41,7 @@ import request from "@/utils/request";
import { MessagePlugin } from "tdesign-vue-next"; import { MessagePlugin } from "tdesign-vue-next";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { Table as TTable } from "tdesign-vue-next"; import { Table as TTable } from "tdesign-vue-next";
import { Pagination as TPagination } from "tdesign-vue-next";
const { t } = useI18n(); const { t } = useI18n();
const columns = computed(() => [ const columns = computed(() => [
{ {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment