From d28f377bb7dd30aaeb6b0e00afae8b041eea1fca Mon Sep 17 00:00:00 2001
From: dzc <2388224167@qq.com>
Date: Wed, 3 Dec 2025 18:17:54 +0800
Subject: [PATCH] 11

---
 src/pages/wechat/index.vue               |   8 +-
 src/pages/wechat/pages/gift/history.vue  |   6 +-
 src/pages/wechat/pages/gift/index.vue    |   6 +-
 src/pages/wechat/pages/inviter/index.vue | 479 ++++++++++++++++++++++-
 src/static/images/search.png             | Bin 0 -> 5071 bytes
 src/static/images/sort1.png              | Bin 0 -> 1137 bytes
 src/static/images/sort2.png              | Bin 0 -> 1117 bytes
 src/static/images/sort3.png              | Bin 0 -> 1139 bytes
 8 files changed, 485 insertions(+), 14 deletions(-)
 create mode 100644 src/static/images/search.png
 create mode 100644 src/static/images/sort1.png
 create mode 100644 src/static/images/sort2.png
 create mode 100644 src/static/images/sort3.png

diff --git a/src/pages/wechat/index.vue b/src/pages/wechat/index.vue
index 747903a1..3b5a051e 100644
--- a/src/pages/wechat/index.vue
+++ b/src/pages/wechat/index.vue
@@ -2,8 +2,10 @@
     <!-- 顶部导航 -->
     <wd-config-provider theme="dark">
         <wd-navbar title="福利中心" safeAreaInsetTop :bordered="false">
-            <template #right>
-                <navigator hover-class="navigator-hover" />
+            <template #left>
+                <navigator open-type="navigateBack" hover-class="navigator-hover">
+                    <uni-icons type="back" size="30" color="#D29E52"></uni-icons>
+                </navigator>
             </template>
         </wd-navbar>
         <!-- 用户信息 -->
@@ -107,7 +109,7 @@ const data = {
         {
             title: '成功邀请',
             value: '300',
-            path: "/pages/wechat/pages/gift/index",
+            path: "/pages/wechat/pages/inviter/index",
         },
     ],
     menuTab: [
diff --git a/src/pages/wechat/pages/gift/history.vue b/src/pages/wechat/pages/gift/history.vue
index 8140ed10..601d40af 100644
--- a/src/pages/wechat/pages/gift/history.vue
+++ b/src/pages/wechat/pages/gift/history.vue
@@ -1,8 +1,10 @@
 <template>
     <wd-config-provider theme="dark">
         <wd-navbar title="礼物账单" safeAreaInsetTop :bordered="false">
-            <template #right>
-                <navigator hover-class="navigator-hover" />
+            <template #left>
+                <navigator open-type="navigateBack" hover-class="navigator-hover">
+                    <uni-icons type="back" size="30" color="#D29E52"></uni-icons>
+                </navigator>
             </template>
         </wd-navbar>
         <wd-tabs v-model="activeTab">
diff --git a/src/pages/wechat/pages/gift/index.vue b/src/pages/wechat/pages/gift/index.vue
index 2cd2deb6..ed3ba78e 100644
--- a/src/pages/wechat/pages/gift/index.vue
+++ b/src/pages/wechat/pages/gift/index.vue
@@ -1,8 +1,10 @@
 <template>
     <wd-config-provider theme="dark">
         <wd-navbar title="邀请福利" safeAreaInsetTop :bordered="false">
-            <template #right>
-                <navigator hover-class="navigator-hover" />
+            <template #left>
+                <navigator open-type="navigateBack" hover-class="navigator-hover">
+                    <uni-icons type="back" size="30" color="#D29E52"></uni-icons>
+                </navigator>
             </template>
         </wd-navbar>
         <view class="mt-30rpx mx-30rpx">
diff --git a/src/pages/wechat/pages/inviter/index.vue b/src/pages/wechat/pages/inviter/index.vue
index 66fbedfc..e93cb345 100644
--- a/src/pages/wechat/pages/inviter/index.vue
+++ b/src/pages/wechat/pages/inviter/index.vue
@@ -1,16 +1,481 @@
+<!-- 页面 TODO 芋艿：该页面的实现代码需要优化，包括 js 和 css，以及相关的样式设计 -->
 <template>
     <wd-config-provider theme="dark">
-        <wd-navbar title="邀请历史" safeAreaInsetTop :bordered="false">
-            <template #right>
-                <navigator hover-class="navigator-hover" />
+        <wd-navbar title="我的团队" safeAreaInsetTop :bordered="false">
+            <template #left>
+                <navigator open-type="navigateBack" hover-class="navigator-hover">
+                    <uni-icons type="back" size="30" color="#D29E52"></uni-icons>
+                </navigator>
             </template>
         </wd-navbar>
+        <view class="header-box" :style="[
+            {
+                marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
+                paddingTop: Number(statusBarHeight + 108) + 'rpx',
+            },
+        ]">
+            <!-- 推广数据总览 -->
+            <view class="team-data-box ss-flex ss-col-center ss-row-between" style="width: 100%">
+                <view class="data-card" style="width: 100%">
+                    <view class="total-item" style="width: 100%">
+                        <view class="item-title" style="text-align: center">推广人数</view>
+                        <view class="total-num" style="text-align: center">
+                            {{ state.summary.firstBrokerageUserCount + state.summary.secondBrokerageUserCount || 0 }}
+                        </view>
+                    </view>
+                </view>
+            </view>
+        </view>
+        <view class="promoter-list">
+            <view style="padding: 0 20rpx">
+                <view class="nav acea-row row-around l1" style="margin-top:20rpx;">
+                    <view :class="state.level == 1 ? 'item on' : 'item'" @click="setType(1)">
+                        一级({{ state.summary.firstBrokerageUserCount || 0 }})
+                    </view>
+                    <view :class="state.level == 2 ? 'item on' : 'item'" @click="setType(2)">
+                        二级({{ state.summary.secondBrokerageUserCount || 0 }})
+                    </view>
+                </view>
+                <view class="search acea-row row-between-wrapper"
+                    style="display: flex; height: 100rpx; align-items: center">
+                    <view class="input">
+                        <input placeholder="点击搜索会员名称" v-model="state.nickname" confirm-type="search" name="search"
+                            @confirm="submitForm" />
+                    </view>
+                    <image src="/static/images/search.png" mode="" style="width: 60rpx; height: 64rpx"
+                        @click="submitForm" />
+                </view>
+                <view class="list">
+                    <view class="sortNav acea-row row-middle" style="display: flex; align-items: center">
+                        <view class="sortItem" @click="setSort('userCount', 'asc')" v-if="sort === 'userCountDESC'">
+                            团队排序
+                            <!-- TODO 芋艿：看看怎么从项目里拿出去 -->
+                            <image src="/static/images/sort1.png" />
+                        </view>
+                        <view class="sortItem" @click="setSort('userCount', 'desc')"
+                            v-else-if="sort === 'userCountASC'">
+                            团队排序
+                            <image src="/static/images/sort3.png" />
+                        </view>
+                        <view class="sortItem" @click="setSort('userCount', 'desc')" v-else>
+                            团队排序
+                            <image src="/static/images/sort2.png" />
+                        </view>
+                        <view class="sortItem" @click="setSort('price', 'asc')" v-if="sort === 'priceDESC'">
+                            金额排序
+                            <image src="/static/images/sort1.png" />
+                        </view>
+                        <view class="sortItem" @click="setSort('price', 'desc')" v-else-if="sort === 'priceASC'">
+                            金额排序
+                            <image src="/static/images/sort3.png" />
+                        </view>
+                        <view class="sortItem" @click="setSort('price', 'desc')" v-else>
+                            金额排序
+                            <image src="/static/images/sort2.png" />
+                        </view>
+                        <view class="sortItem" @click="setSort('orderCount', 'asc')" v-if="sort === 'orderCountDESC'">
+                            订单排序
+                            <image src="/static/images/sort1.png" />
+                        </view>
+                        <view class="sortItem" @click="setSort('orderCount', 'desc')"
+                            v-else-if="sort === 'orderCountASC'">
+                            订单排序
+                            <image src="/static/images/sort3.png" />
+                        </view>
+                        <view class="sortItem" @click="setSort('orderCount', 'desc')" v-else>
+                            订单排序
+                            <image src="/static/images/sort2.png" />
+                        </view>
+                    </view>
+                    <block v-for="(item, index) in state.pagination.list" :key="index">
+                        <view class="item acea-row row-between-wrapper" style="display: flex">
+                            <view class="picTxt acea-row row-between-wrapper"
+                                style="display: flex; align-items: center">
+                                <view class="pictrue">
+                                    <image :src="item.avatar" />
+                                </view>
+                                <view class="text">
+                                    <view class="name line1">{{ item.nickname }}</view>
+                                    <view>
+                                        加入时间:
+                                        {{ sheep.$helper.timeFormat(item.brokerageTime, 'yyyy-mm-dd hh:MM:ss') }}
+                                    </view>
+                                </view>
+                            </view>
+                            <view class="right" style="
+                  justify-content: center;
+                  flex-direction: column;
+                  display: flex;
+                  margin-left: auto;
+                ">
+                                <view>
+                                    <text class="num font-color">{{ item.brokerageUserCount || 0 }} </text>人
+                                </view>
+                                <view>
+                                    <text class="num">{{ item.orderCount || 0 }}</text>单
+                                </view>
+                                <view>
+                                    <text class="num">{{ item.brokeragePrice }}</text>元
+                                </view>
+                            </view>
+                        </view>
+                    </block>
+                    <block v-if="state.pagination.list.length === 0">
+                        <view style="text-align: center;margin-top:30rpx;">暂无推广人数</view>
+                    </block>
+                </view>
+
+
+            </view>
+        </view>
     </wd-config-provider>
 </template>
+
 <script setup>
-import { computed, reactive, ref } from 'vue';
-
 import sheep from '@/sheep';
-import { onLoad } from '@dcloudio/uni-app';
+import { onLoad, onReachBottom } from '@dcloudio/uni-app';
+import { computed, reactive, ref } from 'vue';
+import _ from 'lodash-es';
+import { onPageScroll } from '@dcloudio/uni-app';
+import BrokerageApi from '@/sheep/api/trade/brokerage';
 
-</script>
\ No newline at end of file
+const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
+// const agentInfo = computed(() => sheep.$store('user').agentInfo);
+const userInfo = computed(() => sheep.$store('user').userInfo);
+const headerBg = sheep.$url.css('/static/img/shop/user/withdraw_bg.png');
+
+onPageScroll((e) => {
+    state.scrollTop = e.scrollTop <= 100;
+});
+
+let sort = ref();
+const state = reactive({
+    summary: {},
+    pagination: {
+        pageNo: 1,
+        pageSize: 8,
+        list: [],
+        total: 0,
+    },
+    loadStatus: '',
+    // ↓ 新 ui 逻辑
+    level: 1,
+    nickname: ref(''),
+    sortKey: '',
+    isAsc: '',
+});
+
+function filterUserNum(num) {
+    if (_.isNil(num)) {
+        return '';
+    }
+    return `下级团队${num}人`;
+}
+
+function submitForm() {
+    state.pagination.list = [];
+    getTeamList();
+}
+
+async function getTeamList() {
+    state.loadStatus = 'loading';
+    let { code, data } = await BrokerageApi.getBrokerageUserChildSummaryPage({
+        pageNo: state.pagination.pageNo,
+        pageSize: state.pagination.pageSize,
+        level: state.level,
+        'sortingField.order': state.isAsc,
+        'sortingField.field': state.sortKey,
+        nickname: state.nickname,
+    });
+    if (code !== 0) {
+        return;
+    }
+    state.pagination.list = _.concat(state.pagination.list, data.list);
+    state.pagination.total = data.total;
+    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
+}
+
+function setType(e) {
+    state.pagination.list = [];
+    state.level = e + '';
+    getTeamList();
+}
+
+function setSort(sortKey, isAsc) {
+    state.pagination.list = [];
+    sort = sortKey + isAsc.toUpperCase();
+    state.isAsc = isAsc;
+    state.sortKey = sortKey;
+    getTeamList();
+}
+
+onLoad(async () => {
+    await getTeamList();
+    // 概要数据
+    let { data } = await BrokerageApi.getBrokerageUserSummary();
+    state.summary = data;
+});
+
+// 加载更多
+function loadMore() {
+    if (state.loadStatus === 'noMore') {
+        return;
+    }
+    state.pagination.pageNo++;
+    getTeamList();
+}
+
+// 上拉加载更多
+onReachBottom(() => {
+    loadMore();
+});
+</script>
+
+<style lang="scss" scoped>
+.l1 {
+    background-color: #fff;
+    height: 86rpx;
+    line-height: 86rpx;
+    font-size: 28rpx;
+    color: #282828;
+    border-bottom: 1rpx solid #eee;
+    border-top-left-radius: 14rpx;
+    border-top-right-radius: 14rpx;
+    display: flex;
+    justify-content: space-around;
+}
+
+.header-box {
+    box-sizing: border-box;
+    padding: 0 20rpx 20rpx 20rpx;
+    width: 750rpx;
+    z-index: 3;
+    position: relative;
+    background: v-bind(headerBg) no-repeat,
+        linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
+    background-size: 750rpx 100%;
+
+    // 团队信息总览
+    .team-data-box {
+        .data-card {
+            width: 305rpx;
+            background: #ffffff;
+            border-radius: 20rpx;
+            padding: 20rpx;
+
+            .item-title {
+                font-size: 22rpx;
+                font-weight: 500;
+                color: #999999;
+                line-height: 30rpx;
+                margin-bottom: 10rpx;
+            }
+
+            .total-item {
+                margin-bottom: 30rpx;
+            }
+
+            .total-num {
+                font-size: 38rpx;
+                font-weight: 500;
+                color: #333333;
+                font-family: OPPOSANS;
+            }
+
+            .category-num {
+                font-size: 26rpx;
+                font-weight: 500;
+                color: #333333;
+                font-family: OPPOSANS;
+            }
+        }
+    }
+}
+
+.list-box {
+    z-index: 3;
+    position: relative;
+}
+
+.chat-custom-right {
+    .time-text {
+        font-size: 22rpx;
+        font-weight: 400;
+        color: #999999;
+    }
+
+    .tag-box {
+        background: rgba(0, 0, 0, 0.2);
+        border-radius: 21rpx;
+        line-height: 30rpx;
+        padding: 5rpx 10rpx;
+        width: 140rpx;
+
+        .tag-img {
+            width: 34rpx;
+            height: 34rpx;
+            margin-right: 6rpx;
+            border-radius: 50%;
+        }
+
+        .tag-title {
+            font-size: 18rpx;
+            font-weight: 500;
+            color: rgba(255, 255, 255, 1);
+            line-height: 20rpx;
+        }
+    }
+}
+
+// 推荐人
+.referrer-box {
+    font-size: 28rpx;
+    font-weight: 500;
+    color: #ffffff;
+    padding: 20rpx;
+
+    .referrer-avatar {
+        width: 34rpx;
+        height: 34rpx;
+        border-radius: 50%;
+    }
+}
+
+.promoter-list .nav {
+    background-color: #fff;
+    height: 86rpx;
+    line-height: 86rpx;
+    font-size: 28rpx;
+    color: #282828;
+    border-bottom: 1rpx solid #eee;
+    border-top-left-radius: 14rpx;
+    border-top-right-radius: 14rpx;
+    margin-top: -30rpx;
+}
+
+.promoter-list .nav .item.on {
+    border-bottom: 5rpx solid;
+    // $theme-color
+    color: var(--ui-BG-Main);
+    // $theme-color
+}
+
+.promoter-list .search {
+    width: 100%;
+    background-color: #fff;
+    height: 100rpx;
+    padding: 0 24rpx;
+    box-sizing: border-box;
+    border-bottom-left-radius: 14rpx;
+    border-bottom-right-radius: 14rpx;
+}
+
+.promoter-list .search .input {
+    width: 592rpx;
+    height: 60rpx;
+    border-radius: 50rpx;
+    background-color: #f5f5f5;
+    text-align: center;
+    position: relative;
+}
+
+.promoter-list .search .input input {
+    height: 100%;
+    font-size: 26rpx;
+    width: 610rpx;
+    text-align: center;
+}
+
+.promoter-list .search .input .placeholder {
+    color: #bbb;
+}
+
+.promoter-list .search .input .iconfont {
+    position: absolute;
+    right: 28rpx;
+    color: #999;
+    font-size: 28rpx;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.promoter-list .search .iconfont {
+    font-size: 32rpx;
+    color: #515151;
+    height: 60rpx;
+    line-height: 60rpx;
+}
+
+.promoter-list .list {
+    margin-top: 20rpx;
+}
+
+.promoter-list .list .sortNav {
+    background-color: #fff;
+    height: 76rpx;
+    border-bottom: 1rpx solid #eee;
+    color: #333;
+    font-size: 28rpx;
+    border-top-left-radius: 14rpx;
+    border-top-right-radius: 14rpx;
+}
+
+.promoter-list .list .sortNav .sortItem {
+    text-align: center;
+    flex: 1;
+}
+
+.promoter-list .list .sortNav .sortItem image {
+    width: 24rpx;
+    height: 24rpx;
+    margin-left: 6rpx;
+    vertical-align: -3rpx;
+}
+
+.promoter-list .list .item {
+    background-color: #fff;
+    border-bottom: 1rpx solid #eee;
+    height: 152rpx;
+    padding: 0 24rpx;
+    font-size: 24rpx;
+    color: #666;
+}
+
+.promoter-list .list .item .picTxt .pictrue {
+    width: 106rpx;
+    height: 106rpx;
+    border-radius: 50%;
+}
+
+.promoter-list .list .item .picTxt .pictrue image {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    border: 3rpx solid #fff;
+    box-shadow: 0 0 10rpx #aaa;
+    box-sizing: border-box;
+}
+
+.promoter-list .list .item .picTxt .text {
+    // width: 304rpx;
+    font-size: 24rpx;
+    color: #666;
+    margin-left: 14rpx;
+}
+
+.promoter-list .list .item .picTxt .text .name {
+    font-size: 28rpx;
+    color: #333;
+    margin-bottom: 13rpx;
+}
+
+.promoter-list .list .item .right {
+    text-align: right;
+    font-size: 22rpx;
+    color: #333;
+}
+
+.promoter-list .list .item .right .num {
+    margin-right: 7rpx;
+}
+</style>
diff --git a/src/static/images/search.png b/src/static/images/search.png
new file mode 100644
index 0000000000000000000000000000000000000000..157be9dfafed90abdb72490976cf3e7530a54866
GIT binary patch
literal 5071
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
D;IL2#

literal 0
HcmV?d00001

diff --git a/src/static/images/sort1.png b/src/static/images/sort1.png
new file mode 100644
index 0000000000000000000000000000000000000000..2a88241a1408a201652207ca0d7d37fca6b8d119
GIT binary patch
literal 1137
zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`Gjk|nMYCBgY=CFO}lsSJ)O`AMk?
zp1FzXsX?iUDV2pMQ*9U+nAI{vB1$5BeXNr6bM+EIYV;~{3xK*A7;Nk-3KEmEQ%e+*
zQqwc@Y?a>c-mj#PnPRIHZt82`Ti~3Uk?B!Ylp0*+7m{3+ootz+WN)WnQ(*-(AUCxn
zQK2F?C$HG5!d3}vt`(3C64qBz04piUwpD^SD#ABF!8yMuRl!uxOgGuk#8koDQqR!L
z*u>ION5ROz&_dt9Lf_C>*U-$$#K6kPNC66zfVLH-q*(>IxIyg#@@$ndN=gc>^!3Zj
z%k|2Q_413-^$jg8E%gnI^o@*kfhu&1EAvVcD|GXUm0>2hq!uR^WfqiV=I1GZOiWD5
zFD<cE0=g99h1>$Tv3bSNU;+l1ennz|zM-B0$V)JVzP|XC=H|jx7ncO3BHWAB;Np<V
zf>iyW)Z+ZoqGVvir744~DzI`cN=+=uFAB-e&w+(vKt_H^esM;Afr7I$DAX(!G{Q6U
zQu51-HNkp(eXTt6ic1pnl2bihY?Xkf=w)W6SQ$CF7?>Iv85p~|85<h9T3T3In7Eo6
znmSp!S{PY6xx)0i<R_QrrskEv^rj&68sgLoN)EXNK$~4si!#enQ{0O3a}~hew#vlm
z7DHE@=0WwQ;B<?j8&19YK*#780V5YFvSC8N6a-?zlP-`0PyDHQz!YBuOxoA$)$Rea
z#Y0aQ$B>F!Nq_$Tw`bO6<TiRfwUaCE=%e)aO)s08m^O0?tIavIl<($69~PMh3`cka
zVj5NUF=liM8`>!xYpT+4+t$F{v0WgUQ<(MOY0n;2ACY5<j@~m?ObGZ8b;xDum5$3o
zYFcWQYo=`oIQXE|VGl#+|K3|-HVkRIm`^bM{rlI1Q;99g?bCtC208Y$3rP%YA}ewk
z`88HLPL}a)%8(cM&G4~2>KJ3F?m^L$A)8s^wH9@$woKAII!z!r<bY0Olgc&5BQgQs
z7;9!pPSnm|nz~PN!zFvyp4Ai2rYtGl%&KsJVSR|RjFG-*2B;A5boFyt=akR{0N4C;
AlK=n!

literal 0
HcmV?d00001

diff --git a/src/static/images/sort2.png b/src/static/images/sort2.png
new file mode 100644
index 0000000000000000000000000000000000000000..74faf73b1b56d60e30cab53cc5f9e7c41e1c4678
GIT binary patch
literal 1117
zcmaJ=U279d7~WV~Ym4^S3#ne{bbDH=nCwSBnq3mxB)hetCWIJi@Iu_~PMWpdoppC=
z(xSAAf}#gRM0?J;k;737iqsGELeVNx@S-5ptD++Q0QJ%fq0Y8R^`g2kJ2NlO^S;mf
zG3PSry&D_0HBc0_G1(_&$=>3w`a1IeP>Oyf+g2>+@qSdmCB=qROhbbZBn@Q<W}%{u
z9eo8O6jjrq=khq8+9#^W@F_0FS2irdrl?4F*;3SDh`}Hn(#<IS`SCLv=vtH>2&UMS
zm4HRPZ`_9a$J04=d{`AUx_b|ZlttpefLH-#W5jgCa+F^7E0VKoW@xYs!NXB{MN~eO
z0SRP75cGw-Di;WXF2Toz`~gAO4S1FdGi;dQ{9Z0323V2jLFJ=KG+Qf(S*f=Yi`=4g
z5o1eam{O_aEBSrM9%48_5Ezzcc-~78UT4h2O4(~VZB-8vbW~fnu#QaNdQ=9{D2~!Z
z=}HQQl}fETHl0eLNXeM8VlkYLWemg3YZ>j}Ec_v3O|+96vmld&4jQ#p(vL!0l}u{)
z`#>&`s1YTkjvCO!NhwMbi%-)vG3HN%;=x3hU+(pDoGipc@jxsg$E1KH$9lWuDmQ65
zSTR*t<?27Uq2F@Fgbfvp>>NTP)$V1A2qUM6ERaaJ-4a0OfNpB2<m`0ITTu&b{TS4G
zZDfGu`iS}(8u+-x26>*XY6uJAfE?t4aX}9ALY(Md;c9E-Ug2`T<T6AIW0U6o)a<H>
zOptqA9bIx+9e!w%iMPpU-~ZJ1FL@U8Nhy{qFAjcNTI#OxdK&qgGcy<SCkj2s8?I^-
z6WzxeXQ=g^btiZ9y!AjteQW{m_g-qU@|h+$A>Es7Jo|{c+tk`W)meWiJ>8yuaBs4+
ze`@+-=F7ns()BlI7n(bEb&TD<GLw1!;Y`mH>fF*_i(4Yp$C?Khw7P>G3nw2<*7mo~
zoq0KM?O|=?_5X9pTVQd$clPN5ziIl&hC6*X{%QZ3-F#qo>*akrAD*82Z(ZS4^PgO1
te$E4TTzj)_s@+rE@<(lp{%*um&r*13*WdHA+t0fXJ}IZAJMqJ(z5^)?YI6Vp

literal 0
HcmV?d00001

diff --git a/src/static/images/sort3.png b/src/static/images/sort3.png
new file mode 100644
index 0000000000000000000000000000000000000000..c3ce7d42b6fbd494c07b53a0eebaaf75926122a3
GIT binary patch
literal 1139
zcmaJ>TWAzl7@n}LCfNo=qiCu2Fw&5qvvb+aW@pGG+1<%@*JeW4EV!m3&d!|8PLi23
znK|iB^0dT&iUf?M@1cEZA9_KsEm$Z*P*fBV@xd3R(uabW;){Z!o=LKa53U0<=lqBN
z`~KT^=IqGumu;<|wo(+;mdh%6vhEGu=56Hrs4Bl8%RW3<#G|N;tC|a`q=8Bh<ScC*
z=AmZHPG5(;6cy?)3q@R1ha??Y5iRhE_?AP^6xG}BJDNTTF(|=t)0XMg%YW0rG-Uc{
zx5}wb8dl8goC`<ih70=Kq%InCe;?@eB|>09tO4JevOUR{=`~)7?1N*L25T;OQl{6F
zDykzOja&%2BXLIOW8I)fjPUVjOcW0Tf#VY_mtgrQ!^fo<CkX=BcxV#MHOf+6$!x?T
zmP}VLb|jXqR;!U}G=ki5mKQ~l<pfp`7~;Wrvo_Xz#`X@@85HR0uIXSC*&txlN@xbl
zG|6<m1k2f^wY`ltk%qCp=CFK(3reaxs_KVbEo;-;!+E%s?|X^8!mI<?JoM0vtCPW%
z4+fzeDeXcHBe#IiRK1HM6@-yjK@Lc#gRY67^QdVXsOojCVN_Mh*&fzx9p)67CM*%t
zG^D5^q{Ubw6&=h(d45n#aH&itmCp1CVk#An3w5l5^cf4<xQ;cpu<3@_Kn|8eA}i1}
zzkx=^MHW~qTQVExA~xjPz#5HnNjAi?BpKEv!+mGi^&_I7V7n<@Vr+^Z+C=d#k@k}x
zqIb!)c$`y`1^+?m)tfi{A*LxToL*X5>Qvdq?{3xZbsc|J8h?874{CpVdwYWF+TQv6
z+Cs}NY57Upz-OVAm)U1cdnn<r12<kbuW;c%Ykqjg%N-XN&dxvjcVX-w<xuzxF<M(b
z{`HHY!jZ)UqkUhxaBZR`y!(?A%`4&aFCPAAT?v7{ft%U#G8Fdv;o_Ye2ci|83bht4
zQO*8xZt>fW<VS~@=gIJItFd#TiLd9oFZ^V-+%720SO0g6P83tz=iu1<@vF6o-!q+k
t1JjvPV>@f*WT^e|rP|W{TYG9$h+6$mzVh?k>}2p8$PErFzobsizXd?!aE$-}

literal 0
HcmV?d00001