|
@@ -0,0 +1,202 @@
|
|
|
+<template>
|
|
|
+ <div class="header-back">
|
|
|
+ <m-nav-bar :transparent="true" title="提现页面" style="color: #ffffff" />
|
|
|
+ <div class="user-data">
|
|
|
+ <div class="left">
|
|
|
+ <m-user-avatar />
|
|
|
+ <div class="name">
|
|
|
+ <m-user-name />
|
|
|
+ <span
|
|
|
+ >可提现余额<span class="grade">{{ "5341.12" }}</span
|
|
|
+ >元</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <m-button
|
|
|
+ @click="goMockTest"
|
|
|
+ class="continue"
|
|
|
+ width="90px"
|
|
|
+ height="30px"
|
|
|
+ text="我要提现"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="summary content-box">
|
|
|
+ <van-search class="search" shape="round" placeholder="请输入下级代理昵称" />
|
|
|
+ </div>
|
|
|
+ <div class="test-scores content-box">
|
|
|
+ <table class="table">
|
|
|
+ <tr>
|
|
|
+ <th>头像</th>
|
|
|
+ <th>昵称</th>
|
|
|
+ <th>代理等级</th>
|
|
|
+ <th>分成比例</th>
|
|
|
+ <th>分成金额</th>
|
|
|
+ </tr>
|
|
|
+ <tr v-for="(item, index) in testScoresList" :key="index">
|
|
|
+ <td>
|
|
|
+ <van-image
|
|
|
+ round
|
|
|
+ width="50px"
|
|
|
+ height="50px"
|
|
|
+ src="https://img01.yzcdn.cn/vant/cat.jpeg"
|
|
|
+ />
|
|
|
+ </td>
|
|
|
+ <td>{{ "item.type" }}</td>
|
|
|
+ <td>{{ "一级" }}</td>
|
|
|
+ <td>{{ "50%" }}</td>
|
|
|
+ <td>{{ "5000元" }}</td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts">
|
|
|
+import { getTestScoresList, getTestScoresInfo } from "@/api";
|
|
|
+import { ref, onBeforeMount } from "vue";
|
|
|
+import { RouterBus } from "@/hooks";
|
|
|
+/**
|
|
|
+ * 考试成绩数据结构
|
|
|
+ */
|
|
|
+interface TestScores {
|
|
|
+ createTime: string; //考试时间
|
|
|
+ kskm: string; //科目
|
|
|
+ score: number; //分数
|
|
|
+ type: string; //车型
|
|
|
+}
|
|
|
+/**
|
|
|
+ * 模拟考成绩列表
|
|
|
+ */
|
|
|
+const useTestScoresList = () => {
|
|
|
+ const testScoresList = ref<TestScores[]>([]);
|
|
|
+ onBeforeMount(async () => {
|
|
|
+ let res = await getTestScoresList();
|
|
|
+ testScoresList.value = res.rows;
|
|
|
+ });
|
|
|
+ return {
|
|
|
+ testScoresList,
|
|
|
+ };
|
|
|
+};
|
|
|
+/**
|
|
|
+ * 成绩信息数据结构
|
|
|
+ */
|
|
|
+interface TestScoresInfo {
|
|
|
+ avgScore: number; //平均成绩
|
|
|
+ forecastScore: number; //预测成绩
|
|
|
+ maxScore: number; //最大成绩
|
|
|
+}
|
|
|
+/**
|
|
|
+ * 最大成绩,平均成绩,预测成绩
|
|
|
+ */
|
|
|
+const useTestScoresInfo = () => {
|
|
|
+ const testScoresInfo = ref<TestScoresInfo>({
|
|
|
+ avgScore: 0,
|
|
|
+ forecastScore: 0,
|
|
|
+ maxScore: 0,
|
|
|
+ });
|
|
|
+ onBeforeMount(async () => {
|
|
|
+ let res = await getTestScoresInfo();
|
|
|
+ testScoresInfo.value = res.data;
|
|
|
+ });
|
|
|
+ return {
|
|
|
+ testScoresInfo,
|
|
|
+ };
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+const { testScoresList } = useTestScoresList();
|
|
|
+const { testScoresInfo } = useTestScoresInfo();
|
|
|
+const { goMockTest } = new RouterBus();
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.header-back {
|
|
|
+ width: 375px;
|
|
|
+ padding-bottom: 82px;
|
|
|
+ background: linear-gradient(180deg, #498ef5 0%, #4da8e6 100%);
|
|
|
+ border-radius: 0px 0px 82px 82px;
|
|
|
+ .user-data {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 19px 17px 24px;
|
|
|
+ .left {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ .name {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ font-size: 13px;
|
|
|
+ color: #ffffff;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-left: 6px;
|
|
|
+ .grade {
|
|
|
+ font-size: 24px;
|
|
|
+ padding: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .continue {
|
|
|
+ font-size: 13px;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 19px;
|
|
|
+ color: #ffffff;
|
|
|
+ background: #01c18d;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.content-box {
|
|
|
+ width: 345px;
|
|
|
+ background: #ffffff;
|
|
|
+ box-shadow: 0px 0px 8px rgba(124, 129, 136, 0.2);
|
|
|
+ border-radius: 10px;
|
|
|
+ position: relative;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ top: -82px;
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+.summary {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow: hidden;
|
|
|
+ .search {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+.test-scores {
|
|
|
+ font-size: 13px;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 19px;
|
|
|
+ color: #0a1a33;
|
|
|
+ padding: 15px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .table {
|
|
|
+ width: 100%;
|
|
|
+ border-collapse: collapse;
|
|
|
+ font-size: 13px;
|
|
|
+ th {
|
|
|
+ padding: 5px;
|
|
|
+ color: #0a1a33;
|
|
|
+ }
|
|
|
+ td {
|
|
|
+ text-align: center;
|
|
|
+ padding: 5px;
|
|
|
+ color: #8a9099;
|
|
|
+ }
|
|
|
+ tr {
|
|
|
+ &:nth-of-type(n) {
|
|
|
+ background: #ffffff;
|
|
|
+ }
|
|
|
+ &:nth-of-type(2n) {
|
|
|
+ background: rgba(73, 142, 245, 0.15);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|