mirror of
https://github.com/Tencent/tdesign-vue-next-starter.git
synced 2024-11-10 11:53:14 +08:00
feat: complate pages
This commit is contained in:
pengYYYYY
parent
d9ff532fdb
commit
8c740c14be
|
|
@ -2,7 +2,7 @@
|
|||
<span :class="containerCls">
|
||||
<span :class="iconCls">
|
||||
<svg
|
||||
v-if="type === 'up'"
|
||||
v-if="type === 'down'"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
|
|
|
|||
44
src/pages/dashboard/detail/constants.ts
Normal file
44
src/pages/dashboard/detail/constants.ts
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
export const PANE_LIST_DATA = [
|
||||
{
|
||||
title: '总申请数（次）',
|
||||
count: 1126,
|
||||
percent: 10
|
||||
}, {
|
||||
title: '供应商数量（个）',
|
||||
count: 1126,
|
||||
percent: -13
|
||||
}, {
|
||||
title: '采购商品品类（类）',
|
||||
count: 1126,
|
||||
percent: 10
|
||||
}, {
|
||||
title: '申请人数量（人）',
|
||||
count: 1126,
|
||||
percent: 44
|
||||
}, {
|
||||
title: '申请完成率（%）',
|
||||
count: 1126,
|
||||
percent: 70
|
||||
}, {
|
||||
title: '到货及时率（%）',
|
||||
count: 78,
|
||||
percent: 16
|
||||
}
|
||||
]
|
||||
|
||||
export const PRODUCT_LIST = [
|
||||
{
|
||||
description: 'SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部',
|
||||
index: 1,
|
||||
isSetup: true,
|
||||
name: 'SSL证书',
|
||||
type: 4,
|
||||
},
|
||||
{
|
||||
description: 'SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部',
|
||||
index: 1,
|
||||
isSetup: true,
|
||||
name: 'SSL证书',
|
||||
type: 4,
|
||||
},
|
||||
]
|
||||
|
|
@ -1,14 +1,14 @@
|
|||
<template>
|
||||
<list-common-table />
|
||||
<common-table />
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import ListCommonTable from '@/components/list-common/list-table.vue';
|
||||
import CommonTable from '../components/Table.vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ListBase',
|
||||
components: {
|
||||
ListCommonTable,
|
||||
CommonTable,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
86
src/pages/list/tree/constants.ts
Normal file
86
src/pages/list/tree/constants.ts
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
export const TREE_DATA = [
|
||||
{
|
||||
label: '深圳总部',
|
||||
value: 0,
|
||||
children: [
|
||||
{
|
||||
label: '总办',
|
||||
value: '0-0',
|
||||
},
|
||||
{
|
||||
label: '市场部',
|
||||
value: '0-1',
|
||||
children: [
|
||||
{
|
||||
label: '采购1组',
|
||||
value: '0-1-0',
|
||||
},
|
||||
{
|
||||
label: '采购2组',
|
||||
value: '0-1-1',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '技术部',
|
||||
value: '0-2',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '北京总部',
|
||||
value: 1,
|
||||
children: [
|
||||
{
|
||||
label: '总办',
|
||||
value: '1-0',
|
||||
},
|
||||
{
|
||||
label: '市场部',
|
||||
value: '1-1',
|
||||
children: [
|
||||
{
|
||||
label: '采购1组',
|
||||
value: '1-1-0',
|
||||
},
|
||||
{
|
||||
label: '采购2组',
|
||||
value: '1-1-1',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '上海总部',
|
||||
value: 2,
|
||||
children: [
|
||||
{
|
||||
label: '市场部',
|
||||
value: '2-0',
|
||||
},
|
||||
{
|
||||
label: '财务部',
|
||||
value: '2-1',
|
||||
children: [
|
||||
{
|
||||
label: '财务1组',
|
||||
value: '2-1-0',
|
||||
},
|
||||
{
|
||||
label: '财务2组',
|
||||
value: '2-1-1',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '湖南',
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
label: '湖北',
|
||||
value: 4,
|
||||
},
|
||||
]
|
||||
213
src/pages/login/components/Register.vue
Normal file
213
src/pages/login/components/Register.vue
Normal file
|
|
@ -0,0 +1,213 @@
|
|||
<template>
|
||||
<div v-if="type == 'phone'" class="item-container register-phone">
|
||||
<div class="input-container">
|
||||
<t-select
|
||||
v-model="userInfo.EngName"
|
||||
placeholder="请输入您的邮箱"
|
||||
filterable
|
||||
style="width: 400px"
|
||||
size="large"
|
||||
:empty="''"
|
||||
:options="emailOptions"
|
||||
:on-search="remoteMethod"
|
||||
>
|
||||
<template #t-input>
|
||||
<t-icon name="lock-on" />
|
||||
</template>
|
||||
</t-select>
|
||||
<t-popup placement="right" trigger="focus" show-arrow>
|
||||
<t-input
|
||||
v-model="psw"
|
||||
style="width: 400px"
|
||||
size="large"
|
||||
:type="showPsw ? 'text' : 'password'"
|
||||
clearablec
|
||||
placeholder="请输入登录密码"
|
||||
@keyup="checkPsw"
|
||||
>
|
||||
<template #prefix-icon>
|
||||
<t-icon name="lock-on" />
|
||||
</template>
|
||||
<template #suffix-icon>
|
||||
<t-icon :name="showPsw ? 'browse' : 'browse-off'" @click="showPsw = !showPsw" />
|
||||
</template>
|
||||
</t-input>
|
||||
<template #content>
|
||||
<div>
|
||||
<div :class="['rex-check', { 'format-correct': check1 }]">
|
||||
<t-icon name="check-circle-filled" size="large" />
|
||||
<span>1-20个英文字符</span>
|
||||
</div>
|
||||
<div :class="['rex-check', { 'format-correct': check2 }]">
|
||||
<t-icon name="check-circle-filled" size="large" />
|
||||
<span>需包含下划线</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</t-popup>
|
||||
<div class="check-container">
|
||||
<t-checkbox>我已阅读并同意 </t-checkbox><span>TDesign服务协议</span> 和 <span>TDesign 隐私声明</span>
|
||||
</div>
|
||||
<t-button class="button-container" style="width: 400px" size="large" @click="handleRegister">
|
||||
注册
|
||||
</t-button>
|
||||
</div>
|
||||
<div class="bottom-container">
|
||||
<span class="tip" @click="type = 'eamil'">使用手机号注册</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="item-container register-email">
|
||||
<div class="input-container">
|
||||
<t-input v-model="userInfo.EngName" style="width: 400px" size="large" placeholder="请输入您的手机号">
|
||||
<template #prefix-icon>
|
||||
<t-icon name="user" />
|
||||
</template>
|
||||
</t-input>
|
||||
<t-popup placement="right" trigger="focus" show-arrow>
|
||||
<t-input
|
||||
v-model="psw"
|
||||
style="width: 400px"
|
||||
size="large"
|
||||
:type="showPsw ? 'text' : 'password'"
|
||||
clearablec
|
||||
placeholder="请输入登录密码"
|
||||
@keyup="checkPsw"
|
||||
>
|
||||
<template #prefix-icon>
|
||||
<t-icon name="lock-on" />
|
||||
</template>
|
||||
<template #suffix-icon>
|
||||
<t-icon :name="showPsw ? 'browse' : 'browse-off'" @click="showPsw = !showPsw" />
|
||||
</template>
|
||||
</t-input>
|
||||
<template #content>
|
||||
<div>
|
||||
<div :class="['rex-check', { 'format-correct': check1 }]">
|
||||
<t-icon name="check-circle-filled" size="large" />
|
||||
<span>1-20个英文字符</span>
|
||||
</div>
|
||||
<div :class="['rex-check', { 'format-correct': check2 }]">
|
||||
<t-icon name="check-circle-filled" size="large" />
|
||||
<span>需包含下划线</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</t-popup>
|
||||
<div class="verification-code">
|
||||
<t-input style="width: 282px" size="large" placeholder="请输入验证码" />
|
||||
<t-button variant="outline" :disabled="countDown > 0" @click="handleCounter">
|
||||
{{ countDown == 0 ? '发送验证码' : `${countDown}秒后可重发` }}
|
||||
</t-button>
|
||||
</div>
|
||||
<div class="check-container">
|
||||
<t-checkbox>我已阅读并同意 </t-checkbox> <span>TDesign服务协议</span> 和 <span>TDesign 隐私声明</span>
|
||||
</div>
|
||||
<t-button class="button-container" style="width: 400px" size="large" @click="handleRegister">
|
||||
注册
|
||||
</t-button>
|
||||
</div>
|
||||
<div class="bottom-container">
|
||||
<span class="tip" @click="type = 'phone'">使用邮箱注册</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue';
|
||||
import { useCounter } from '@/utils/hooks';
|
||||
|
||||
const getEmails = (search:string) => [
|
||||
{
|
||||
value: `${search}@qq.com`,
|
||||
label: `${search}@qq.com`,
|
||||
},
|
||||
{
|
||||
value: `${search}@gmail.com`,
|
||||
label: `${search}@gmail.com`,
|
||||
},
|
||||
{
|
||||
value: `${search}@126.com`,
|
||||
label: `${search}@126.com`,
|
||||
},
|
||||
{
|
||||
value: `${search}@163.com`,
|
||||
label: `${search}@163.com`,
|
||||
},
|
||||
{
|
||||
value: `${search}@hotmail.com`,
|
||||
label: `${search}@hotmail.com`,
|
||||
},
|
||||
{
|
||||
value: `${search}@21cn.com`,
|
||||
label: `${search}@21cn.com`,
|
||||
},
|
||||
{
|
||||
value: `${search}@yahoo.com`,
|
||||
label: `${search}@yahoo.com`,
|
||||
},
|
||||
];
|
||||
|
||||
const INITIAL_DATA = {
|
||||
EngName: '',
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
setup(props, ctx) {
|
||||
const type = ref('default');
|
||||
const emailOptions = ref([]);
|
||||
const remoteMethod = (search: string) => {
|
||||
if (search && search.indexOf('@') === -1) {
|
||||
emailOptions.value = getEmails(search);
|
||||
}
|
||||
};
|
||||
|
||||
const psw = ref('');
|
||||
const check1 = ref(false);
|
||||
const check2 = ref(false);
|
||||
const userInfo = ref({ ...INITIAL_DATA });
|
||||
|
||||
const showPsw = ref(false);
|
||||
|
||||
const [countDown, handleCounter] = useCounter();
|
||||
|
||||
const checkPsw = () => {
|
||||
const regExp = /^[a-z0-9_]{1,20}$/;
|
||||
if (regExp.test(psw.value)) {
|
||||
check1.value = true;
|
||||
} else {
|
||||
check1.value = false;
|
||||
}
|
||||
if (psw.value.indexOf('_') !== -1) {
|
||||
check2.value = true;
|
||||
} else {
|
||||
check2.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleRegister = () => {
|
||||
const { emit } = ctx;
|
||||
emit('registerSuccess');
|
||||
};
|
||||
|
||||
return {
|
||||
showPsw,
|
||||
psw,
|
||||
userInfo,
|
||||
checkPsw,
|
||||
check1,
|
||||
check2,
|
||||
type,
|
||||
emailOptions,
|
||||
remoteMethod,
|
||||
countDown,
|
||||
handleCounter,
|
||||
handleRegister,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import url('../index.less');
|
||||
</style>
|
||||
|
|
@ -46,121 +46,156 @@
|
|||
}
|
||||
}
|
||||
|
||||
.login-step1 {
|
||||
.item-container {
|
||||
|
||||
.input-container {
|
||||
margin-top: 72px;
|
||||
margin-top: 64px;
|
||||
|
||||
.t-input {
|
||||
display: block;
|
||||
.tip-container {
|
||||
margin-bottom: 16px;
|
||||
|
||||
.tip1 {
|
||||
font-size: 14px;
|
||||
color: rgba(0,0,0,.60);
|
||||
}
|
||||
|
||||
.tip2 {
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
color: @brand-color-8;
|
||||
|
||||
.t-icon {
|
||||
height: 20px;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.t-popup-reference {
|
||||
margin: 24px 0;
|
||||
.button-container {
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.check-container {
|
||||
.check-container {
|
||||
font-size: 14px;
|
||||
color: rgba(0,0,0,.60);
|
||||
|
||||
.t-checkbox__label {
|
||||
color: @text-color-secondary;
|
||||
|
||||
span {
|
||||
.tip {
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
color: @brand-color-8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-step3 {
|
||||
|
||||
.input-container {
|
||||
margin-top: 34px;
|
||||
.t-input {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.input-container {
|
||||
.check-container {
|
||||
margin-top: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.tip-container {
|
||||
margin-bottom: 16px;
|
||||
|
||||
.tip1 {
|
||||
font-size: 14px;
|
||||
color: rgba(0,0,0,.60);
|
||||
.t-checkbox__label {
|
||||
color: @text-color-secondary;
|
||||
}
|
||||
|
||||
.tip2 {
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
span {
|
||||
color: @brand-color-8;
|
||||
|
||||
.t-icon {
|
||||
height: 20px;
|
||||
vertical-align: text-bottom;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-container {
|
||||
margin-top: 16px;
|
||||
.t-popup-reference {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.check-container {
|
||||
font-size: 14px;
|
||||
color: rgba(0,0,0,.60);
|
||||
.verification-code {
|
||||
margin-top: 24px;
|
||||
|
||||
.t-input {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 102px;
|
||||
height: 40px;
|
||||
margin-left: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-container {
|
||||
margin-top: 66px;
|
||||
|
||||
.tip {
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
color: @brand-color-8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-step1 {
|
||||
|
||||
.bottom-container {
|
||||
margin-top: 72px;
|
||||
}
|
||||
}
|
||||
|
||||
.login-step3 {
|
||||
|
||||
.bottom-container {
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.input-container .tip-container {
|
||||
width: 192px;
|
||||
}
|
||||
}
|
||||
|
||||
.login-step2 {
|
||||
|
||||
.input-container {
|
||||
margin-top: 108.9px;
|
||||
|
||||
.tip1 {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-container {
|
||||
margin-top: 66px;
|
||||
|
||||
.tip {
|
||||
font-size: 14px;
|
||||
color: @brand-color-8;
|
||||
cursor: pointer;
|
||||
i {
|
||||
font-style: normal;
|
||||
color: @gray-color-3;
|
||||
margin: 0 14px;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
font-style: normal;
|
||||
color: @gray-color-3;
|
||||
margin: 0 14px;
|
||||
|
||||
&.login-pwd {
|
||||
|
||||
.input-container {
|
||||
margin-top: 72px;
|
||||
}
|
||||
|
||||
.bottom-container {
|
||||
margin-top: 72px;
|
||||
}
|
||||
}
|
||||
|
||||
&.login-qrcode {
|
||||
|
||||
.input-container {
|
||||
margin-top: 34px;
|
||||
}
|
||||
|
||||
.tip-container {
|
||||
width: 192px;
|
||||
|
||||
.refresh {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-container {
|
||||
margin-top: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
&.login-phone {
|
||||
|
||||
.bottom-container {
|
||||
margin-top: 66px;
|
||||
}
|
||||
}
|
||||
|
||||
&.register-phone {
|
||||
|
||||
.input-container {
|
||||
margin-top: 64px;
|
||||
|
||||
.t-select-popup-reference {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rex-check {
|
||||
|
|
@ -178,124 +213,3 @@
|
|||
}
|
||||
}
|
||||
|
||||
.login-step4 {
|
||||
|
||||
.input-container {
|
||||
margin-top: 64px;
|
||||
|
||||
.t-input {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.t-popup-reference {
|
||||
margin: 24px 0;
|
||||
}
|
||||
|
||||
.verification-code {
|
||||
margin-bottom: 24px;
|
||||
|
||||
.t-input {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 102px;
|
||||
height: 40px;
|
||||
margin-left: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-container {
|
||||
margin-top: 66px;
|
||||
}
|
||||
|
||||
.check-container {
|
||||
|
||||
.t-checkbox__label {
|
||||
color: @text-color-secondary;
|
||||
|
||||
span {
|
||||
color: @brand-color-8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-step5 {
|
||||
|
||||
.input-container {
|
||||
margin-top: 64px;
|
||||
|
||||
.t-input {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.t-popup-reference {
|
||||
margin: 24px 0;
|
||||
}
|
||||
|
||||
.t-select-popup-reference {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-container {
|
||||
margin-top: 66px;
|
||||
}
|
||||
|
||||
.check-container {
|
||||
|
||||
.t-checkbox__label {
|
||||
color: @text-color-secondary;
|
||||
|
||||
span {
|
||||
color: @brand-color-8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-step6 {
|
||||
|
||||
.input-container {
|
||||
margin-top: 64px;
|
||||
|
||||
.t-input {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.t-popup-reference {
|
||||
margin: 24px 0;
|
||||
}
|
||||
|
||||
.verification-code {
|
||||
margin: 24px 0;
|
||||
|
||||
.t-input {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 102px;
|
||||
height: 40px;
|
||||
margin-left: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-container {
|
||||
margin-top: 66px;
|
||||
}
|
||||
|
||||
.check-container {
|
||||
|
||||
.t-checkbox__label {
|
||||
color: @text-color-secondary;
|
||||
|
||||
span {
|
||||
color: @brand-color-8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +1,14 @@
|
|||
import { Ref, onUnmounted, onMounted } from 'vue';
|
||||
import { ref, Ref, onUnmounted, onMounted } from 'vue';
|
||||
import * as echarts from 'echarts/core';
|
||||
|
||||
export const useChart = (domId: string, chart: Ref) => {
|
||||
/**
|
||||
* eChart hook
|
||||
* @param domId
|
||||
* @param chart
|
||||
*/
|
||||
export const useChart = (domId: string) => {
|
||||
let chartContainer: HTMLCanvasElement;
|
||||
const selfChart = chart;
|
||||
const selfChart = ref<echarts.ECharts>();
|
||||
const updateContainer = () => {
|
||||
selfChart.value.resize({
|
||||
width: chartContainer.clientWidth,
|
||||
|
|
@ -24,4 +29,34 @@ export const useChart = (domId: string, chart: Ref) => {
|
|||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', updateContainer);
|
||||
});
|
||||
|
||||
return selfChart
|
||||
};
|
||||
|
||||
/**
|
||||
* counter utils
|
||||
* @param duration
|
||||
* @returns
|
||||
*/
|
||||
export const useCounter = (duration: number = 60): [
|
||||
Ref<number>, () => void
|
||||
] => {
|
||||
let intervalTimer = null;
|
||||
onMounted(() => {
|
||||
clearInterval(intervalTimer)
|
||||
})
|
||||
const countDown = ref(0);
|
||||
|
||||
return [countDown, () => {
|
||||
countDown.value = duration;
|
||||
intervalTimer = setInterval(() => {
|
||||
if (countDown.value > 0) {
|
||||
countDown.value -= 1;
|
||||
} else {
|
||||
clearInterval(intervalTimer);
|
||||
countDown.value = 0;
|
||||
intervalTimer = null;
|
||||
}
|
||||
}, 1000)
|
||||
}];
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user