feat: complate pages

src/components/trend/index.vue

@@ -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"

src/pages/dashboard/detail/constants.ts

@@ -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,
+  },
+]

src/pages/list/select/index.vue

@@ -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>

src/pages/list/tree/constants.ts

@@ -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,
+  },
+]

src/pages/login/components/Register.vue

@@ -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>

src/pages/login/index.less

@@ -46,40 +46,10 @@
   }
 }
 
-.login-step1 {
+.item-container {
 
   .input-container {
-    margin-top: 72px;
+    margin-top: 64px;
-
-    .t-input {
-      display: block;
-    }
-
-    .t-popup-reference {
-      margin: 24px 0;
-    }
-  }
-
-  .check-container {
-
-    .t-checkbox__label {
-      color: @text-color-secondary;
-
-      span {
-        color: @brand-color-8;
-      }
-    }
-  }
-}
-
-.login-step3 {
-
-  .input-container {
-    margin-top: 34px;
-  }
-}
-
-.input-container {
 
     .tip-container {
       margin-bottom: 16px;
@@ -115,38 +85,49 @@
         color: @brand-color-8;
       }
     }
-}
-
-.login-step1 {
-
-  .bottom-container {
-    margin-top: 72px;
-  }
-}
-
-.login-step3 {
-
-  .bottom-container {
-    margin-top: 32px;
   }
 
-  .input-container .tip-container {
+  .t-input {
-    width: 192px;
+    display: block;
   }
-}
 
-.login-step2 {
+  .check-container {
+    margin-top: 24px;
+    display: flex;
+    align-items: center;
 
-  .input-container {
+    .t-checkbox__label {
-    margin-top: 108.9px;
+      color: @text-color-secondary;
+    }
 
-    .tip1 {
+    span {
+      color: @brand-color-8;
+
+      &:hover {
         cursor: pointer;
       }
     }
-}
+  }
 
-.bottom-container {
+  .t-popup-reference {
+    margin-top: 24px;
+  }
+
+  .verification-code {
+    margin-top: 24px;
+
+    .t-input {
+      display: inline-block;
+    }
+
+    button {
+      width: 102px;
+      height: 40px;
+      margin-left: 11px;
+    }
+  }
+
+  .bottom-container {
     margin-top: 66px;
   
     .tip {
@@ -160,7 +141,61 @@
       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;
-      }
-    }
-  }
-}

src/utils/hooks.ts

@@ -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)
+  }];
+}