订单、英雄榜

src/router/index.ts

@@ -39,6 +39,8 @@ export const routes: Array<RouteRecordRaw> = [
     children: [
       { path: 'publish', component: () => import('@/views/finance/Publish.vue'), meta: { title: '发布' } },
       { path: 'account', component: () => import('@/views/finance/Account.vue'), meta: { title: '我的账户' } },
+      { path: 'order', component: () => import('@/views/finance/Order.vue'), meta: { title: '我的订单' } },
+      { path: 'armory', component: () => import('@/views/finance/Armory.vue'), meta: { title: '英雄榜' } },
     ],
   },
   // 404 page must be placed at the end !!!

src/settings.ts

@@ -6,5 +6,5 @@ export default {
    * @type {array}
    * @description 不显示左侧菜单的路由
    */
-  hideNavPath: ['/finance/publish', '/finance/account'],
+  hideNavPath: ['/finance/publish', '/finance/account', '/finance/order', '/finance/armory'],
 };

src/views/finance/Armory.vue

@@ -0,0 +1,260 @@
+<template>
+  <div class="flex justify-between mb-5">
+    <div class="inline-flex items-center text-lg text-[#333] font-semibold">
+      <span class="w-[5px] h-[18px] mr-3 bg-[#006BFF]"></span>
+      市场英雄榜
+    </div>
+    <div class="inline-flex items-center">
+      <ul class="types inline-flex items-center mr-5">
+        <li v-for="(item, i) in types"
+            :key="i">{{ item.name }}</li>
+      </ul>
+      <ul class="times inline-flex items-center">
+        <li v-for="(item, i) in times"
+            :key="i">{{ item.name }}</li>
+      </ul>
+    </div>
+  </div>
+
+  <div class="flex">
+    <div class="wrap">
+      <div class="header">
+        <img src="@/assets/images/armory/7.png"
+             alt=""
+             class="mr-2" />
+        收益排行
+      </div>
+      <ul class="c-table table-header">
+        <li>排名</li>
+        <li>商品名称</li>
+        <li>产品经理</li>
+        <li>金额（元）</li>
+      </ul>
+      <ul class="c-table table-body">
+        <div class="line">
+          <li>
+            <img src="@/assets/images/armory/icon1.png"
+                 alt=""
+                 class="mx-auto" />
+          </li>
+          <li>周转易</li>
+          <li>刘物语</li>
+          <li>+59,500,000.00</li>
+        </div>
+      </ul>
+    </div>
+    <div class="wrap">
+      <div class="header">
+        <img src="@/assets/images/armory/8.png"
+             alt=""
+             class="mr-2" />
+        总资产排行
+      </div>
+      <ul class="c-table table-header">
+        <li>排名</li>
+        <li>产品经理</li>
+        <li>账户类型</li>
+        <li>金额（元）</li>
+      </ul>
+      <ul class="c-table table-body">
+        <div class="line">
+          <li>
+            <img src="@/assets/images/armory/icon1.png"
+                 alt=""
+                 class="mx-auto" />
+          </li>
+          <li>周转易</li>
+          <li>刘物语</li>
+          <li>+59,500,000.00</li>
+        </div>
+      </ul>
+    </div>
+    <div class="wrap">
+      <div class="header">
+        <img src="@/assets/images/armory/9.png"
+             alt=""
+             class="mr-2" />
+        交易订单排行
+      </div>
+      <ul class="c-table table-header">
+        <li>排名</li>
+        <li>产品经理</li>
+        <li>订单数</li>
+        <li>详情</li>
+      </ul>
+      <ul class="c-table table-body">
+        <div class="line">
+          <li>
+            <img src="@/assets/images/armory/icon1.png"
+                 alt=""
+                 class="mx-auto" />
+          </li>
+          <li>周转易</li>
+          <li>刘物语</li>
+          <li>+59,500,000.00</li>
+        </div>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { ElMessage } from 'element-plus';
+import { Plus } from '@element-plus/icons-vue';
+import { primaryTypeOfGuarantee, bankingProductsList } from '@/api/bank';
+
+const form = ref<Object>({});
+const types = ref<Array<any>>([
+  {
+    id: '',
+    name: '不限',
+  },
+  {
+    id: 1,
+    name: '银行',
+  },
+  {
+    id: 2,
+    name: '保险',
+  },
+  {
+    id: 3,
+    name: '基金',
+  },
+]);
+const times = ref<Array<any>>([
+  {
+    id: 1,
+    name: '昨日',
+  },
+  {
+    id: 2,
+    name: '近1周',
+  },
+  {
+    id: 3,
+    name: '近1月',
+  },
+]);
+const productVisible = ref<boolean>(false);
+const keyword = ref<string>('');
+const currentPage = ref<number>(1);
+const pageSize = ref<number>(10);
+const total = ref<number>(0);
+const table = ref<any>();
+const list = ref<Array<any>>([]);
+const selection = ref<Array<any>>([]);
+const loading = ref<boolean>(false);
+
+// 选择产品
+const showProduct = async () => {
+  productVisible.value = true;
+};
+// 担保方式
+const getGuarantee = async () => {
+  try {
+    const { data } = await primaryTypeOfGuarantee();
+    guarantees.value = data;
+  } finally {
+  }
+};
+onMounted(() => {
+  // getGuarantee();
+  // fetchData();
+});
+</script>
+
+<style lang="scss" scoped>
+.types {
+  li {
+    @apply px-5 py-3 text-sm text-white cursor-pointer;
+    background: url(../../assets/images/armory/1.png) 0 0/100% 100% no-repeat;
+    &:nth-child(2) {
+      @apply mr-1;
+    }
+    &:nth-child(2),
+    &:nth-child(3) {
+      background-image: url(../../assets/images/armory/2.png);
+    }
+    &:last-child {
+      background-image: url(../../assets/images/armory/3.png);
+    }
+    &.active,
+    &:hover {
+      @apply text-[#333];
+      background: #fff;
+    }
+  }
+}
+.times {
+  li {
+    @apply px-5 py-3 text-sm text-white cursor-pointer;
+    background: url(../../assets/images/armory/4.png) 0 0/100% 100% no-repeat;
+    &:nth-child(2) {
+      @apply mr-1;
+    }
+    &:nth-child(2) {
+      background-image: url(../../assets/images/armory/5.png);
+    }
+    &:last-child {
+      background-image: url(../../assets/images/armory/6.png);
+    }
+    &.active,
+    &:hover {
+      @apply text-[#333];
+    }
+  }
+}
+.wrap {
+  @apply w-[calc((100%-40px)/3)] mr-5 rounded-[10px] bg-white;
+  .header {
+    @apply flex items-center px-5 py-4;
+    background: url(../../assets/images/armory/header1.png) 0 0/100% 100% no-repeat;
+  }
+  &:nth-child(2) {
+    .header {
+      background-image: url(../../assets/images/armory/header2.png);
+    }
+  }
+  &:last-child {
+    @apply mr-0;
+    .header {
+      background-image: url(../../assets/images/armory/header2.png);
+    }
+  }
+}
+.c-table {
+  @apply text-center;
+  li {
+    @apply w-[18%] text-sm leading-10;
+    &:nth-child(2) {
+      @apply w-[20%];
+    }
+    &:nth-child(3) {
+      @apply w-[25%];
+    }
+    &:last-child {
+      @apply w-[37%];
+    }
+  }
+}
+.table-header {
+  @apply flex items-center;
+  border: 1px solid #e7f0fc;
+  box-shadow: 0px 3px 3px 0px rgba(176, 188, 208, 0.26);
+  border-radius: 10px 10px 0px 0px;
+  li {
+    @apply text-[#333];
+  }
+}
+.table-body {
+  .line {
+    @apply flex items-center;
+    border-bottom: 1px solid #e7f0fc;
+    &:hover {
+      box-shadow: 0px 0px 13px 0px rgba(0, 107, 255, 0.26);
+    }
+  }
+}
+</style>

src/views/finance/Order.vue

@@ -0,0 +1,153 @@
+<template>
+  <div>
+    <back name="我的订单"></back>
+    <div class="block mb-5">
+      <h6 class="title mb-5">订单组成</h6>
+    </div>
+    <div class="block mb-5">
+      <h6 class="title mb-5">订单列表</h6>
+      <div class="flex justify-between mb-5">
+        <div class="search">
+          <input type="text"
+                 placeholder="搜索"
+                 maxlength="20" />
+          <img src="@/assets/images/search.png"
+               alt=""
+               class="icon" />
+        </div>
+        <div>
+          <el-select v-model="form.status"
+                     placeholder="订单类型"
+                     size="large">
+            <el-option v-for="item in paces"
+                       :key="item.id"
+                       :label="item.name"
+                       :value="item.id" />
+          </el-select>
+        </div>
+      </div>
+      <el-table ref="table"
+                v-loading="loading"
+                :data="data">
+        <el-table-column type="selection"
+                         :selectable="deletable"
+                         width="50"></el-table-column>
+        <el-table-column prop="parentIds"
+                         label="订单号"></el-table-column>
+        <el-table-column prop="parentIds"
+                         label="产品名称"></el-table-column>
+        <el-table-column prop="parentIds"
+                         label="订单类型"></el-table-column>
+        <el-table-column prop="parentIds"
+                         label="成交情况"></el-table-column>
+        <el-table-column prop="parentIds"
+                         label="成交日期"></el-table-column>
+        <el-table-column prop="parentIds"
+                         label="订单情况  "></el-table-column>
+        <el-table-column prop="parentIds"
+                         label="备注"></el-table-column>
+      </el-table>
+      <el-pagination v-model:currentPage="currentPage"
+                     v-model:pageSize="pageSize"
+                     :total="total"
+                     :page-sizes="pageSizes"
+                     :layout="pageLayout"
+                     @size-change="fetchData()"
+                     @current-change="fetchData()"
+                     small
+                     background
+                     class="px-3 py-2 justify-end"></el-pagination>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { ElMessage } from 'element-plus';
+import { Plus } from '@element-plus/icons-vue';
+import { primaryTypeOfGuarantee, bankingProductsList } from '@/api/bank';
+import Search from '@/components/Search.vue';
+import Back from '@/components/Back.vue';
+import { pageSizes, pageLayout, toParams, resetParams } from '@/utils/common';
+
+const form = ref<Object>({});
+const paces = ref<Array<any>>([
+  {
+    id: 1,
+    name: '配置风控',
+  },
+  {
+    id: 2,
+    name: '待审批',
+  },
+  {
+    id: 3,
+    name: '审批通过',
+  },
+  {
+    id: 4,
+    name: '审批不通过',
+  },
+  {
+    id: 5,
+    name: '审批打回',
+  },
+]);
+const productVisible = ref<boolean>(false);
+const keyword = ref<string>('');
+const currentPage = ref<number>(1);
+const pageSize = ref<number>(10);
+const total = ref<number>(0);
+const table = ref<any>();
+const list = ref<Array<any>>([]);
+const selection = ref<Array<any>>([]);
+const loading = ref<boolean>(false);
+
+// 选择产品
+const showProduct = async () => {
+  productVisible.value = true;
+};
+// 担保方式
+const getGuarantee = async () => {
+  try {
+    const { data } = await primaryTypeOfGuarantee();
+    guarantees.value = data;
+  } finally {
+  }
+};
+onMounted(() => {
+  // getGuarantee();
+  // fetchData();
+});
+</script>
+
+<style lang="scss" scoped>
+.title {
+  @apply text-lg text-[#333] font-semibold leading-[1];
+}
+.search {
+  position: relative;
+  width: 320px;
+  padding: 0 12px;
+  background-color: #f6f8fc;
+  border-radius: 8px;
+  input {
+    width: 90%;
+    height: 36px;
+    font-size: 14px;
+    line-height: 36px;
+    color: #333;
+    border: 0;
+    background-color: transparent;
+    &:focus {
+      outline: none;
+    }
+  }
+  .icon {
+    position: absolute;
+    top: 9px;
+    right: 12px;
+    cursor: pointer;
+  }
+}
+</style>