yudao
/
mall-uniapp
mirror of https://gitee.com/yudaocode/yudao-mall-uniapp.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

📖 code review：【分销】我的团队

pull/36/MERGE
YunaiV 2024-01-04 13:46:47 +08:00
parent 9e25f8e944
commit 2317d14ef5
3 changed files with 473 additions and 436 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

287
pages/commission/team.vue
View File

@ -1,92 +1,158 @@
<!-- 页面 TODO 芋艿：检查未开发 --> <!-- 页面 TODO 芋艿：该页面的实现代码需要优化，包括 js 和 css，以及相关的样式设计 -->
<template> <template>
<s-layout title="我的团队" :class="state.scrollTop ? 'team-wrap' : ''" navbar="inner"> <s-layout title="我的团队" :class="state.scrollTop ? 'team-wrap' : ''" navbar="inner">
<view class="promoter-list"> <view class="promoter-list">
<view class='promoterHeader bg-color' style='backgroundColor:#e93323!important;height:218rpx;color:#fff'> <view
<view class='headerCon acea-row row-between' style='padding: 28px 29px 0 29px;'> class="promoterHeader bg-color"
style="backgroundcolor: #e93323 !important; height: 218rpx; color: #fff"
>
<view class="headerCon acea-row row-between" style="padding: 28px 29px 0 29px">
<view> <view>
<view class='name' style="color:#fff">推广人数</view> <view class="name" style="color: #fff">推广人数</view>
<view><text class='num' <view>
style="color:#fff">{{(state.getSummary.firstBrokerageUserCount+ state.getSummary.secondBrokerageUserCount)|| 0 }}</text>人 <text class="num" style="color: #fff">
{{
state.summary.firstBrokerageUserCount + state.summary.secondBrokerageUserCount ||
0
}}
</text>
人
</view> </view>
</view> </view>
<view class='iconfont icon-tuandui'></view> <view class="iconfont icon-tuandui" />
</view> </view>
</view> </view>
<view style='padding: 0 30rpx;'> <view style="padding: 0 30rpx">
<view class='nav acea-row row-around l1'> <view class="nav acea-row row-around l1">
<view :class="state.level == 1 ? 'item on' : 'item'" @click='setType(1)'> <view :class="state.level == 1 ? 'item on' : 'item'" @click="setType(1)">
一级({{state.getSummary.firstBrokerageUserCount || 0 }})</view> 一级({{ state.summary.firstBrokerageUserCount || 0 }})
<view :class="state.level == 2 ? 'item on' : 'item'" @click='setType(2)'> </view>
二级({{state.getSummary.secondBrokerageUserCount || 0 }}) <view :class="state.level == 2 ? 'item on' : 'item'" @click="setType(2)">
二级({{ state.summary.secondBrokerageUserCount || 0 }})
</view> </view>
</view> </view>
<view class='search acea-row row-between-wrapper' <view
style="display: flex;height: 100rpx;align-items: center;"> class="search acea-row row-between-wrapper"
<view class='input'> style="display: flex; height: 100rpx; align-items: center"
<input placeholder='点击搜索会员名称' v-model="state.nickname" confirm-type='search' name="search" >
@confirm="submitForm" /> <view class="input">
<input
placeholder="点击搜索会员名称"
v-model="state.nickname"
confirm-type="search"
name="search"
@confirm="submitForm"
/>
</view> </view>
<image src="/static/images/search.png" mode="" style='width: 60rpx;height: 64rpx;' @click="submitForm"></image> <image
src="/static/images/search.png"
mode=""
style="width: 60rpx; height: 64rpx"
@click="submitForm"
/>
</view> </view>
<view class='list'> <view class="list">
<view class="sortNav acea-row row-middle" style="display: flex;align-items: center;"> <view class="sortNav acea-row row-middle" style="display: flex; align-items: center">
<view class="sortItem" @click='setSort("userCount","asc")' v-if="sort === 'userCountDESC'"> <view
class="sortItem"
@click="setSort('userCount', 'asc')"
v-if="sort === 'userCountDESC'"
>
团队排序 团队排序
<image src='/static/images/sort1.png'></image> <!-- TODO 芋艿：看看怎么从项目里拿出去 -->
<image src="/static/images/sort1.png" />
</view> </view>
<view class="sortItem" @click='setSort("userCount", "desc")' <view
v-else-if="sort === 'userCountASC'">团队排序 class="sortItem"
<image src='/static/images/sort3.png'></image> @click="setSort('userCount', 'desc')"
v-else-if="sort === 'userCountASC'"
>
团队排序
<image src="/static/images/sort3.png" />
</view> </view>
<view class="sortItem" @click='setSort("userCount","desc")' v-else>团队排序 <view class="sortItem" @click="setSort('userCount', 'desc')" v-else>
<image src='/static/images/sort2.png'></image> 团队排序
<image src="/static/images/sort2.png" />
</view> </view>
<view class="sortItem" @click='setSort("price","asc")' v-if="sort === 'priceDESC'"> <view class="sortItem" @click="setSort('price', 'asc')" v-if="sort === 'priceDESC'">
金额排序 金额排序
<image src='/static/images/sort1.png'></image> <image src="/static/images/sort1.png" />
</view> </view>
<view class="sortItem" @click='setSort("price", "desc")' v-else-if="sort === 'priceASC'"> <view
class="sortItem"
@click="setSort('price', 'desc')"
v-else-if="sort === 'priceASC'"
>
金额排序 金额排序
<image src='/static/images/sort3.png'></image> <image src="/static/images/sort3.png" />
</view> </view>
<view class="sortItem" @click='setSort("price","desc")' v-else>金额排序 <view class="sortItem" @click="setSort('price', 'desc')" v-else>
<image src='/static/images/sort2.png'></image> 金额排序
<image src="/static/images/sort2.png" />
</view> </view>
<view class="sortItem" @click='setSort("orderCount","asc")' v-if="sort === 'orderCountDESC'"> <view
class="sortItem"
@click="setSort('orderCount', 'asc')"
v-if="sort === 'orderCountDESC'"
>
订单排序 订单排序
<image src='/static/images/sort1.png'></image> <image src="/static/images/sort1.png" />
</view> </view>
<view class="sortItem" @click='setSort("orderCount", "desc")' <view
v-else-if="sort === 'orderCountASC'">订单排序 class="sortItem"
<image src='/static/images/sort3.png'></image> @click="setSort('orderCount', 'desc')"
v-else-if="sort === 'orderCountASC'"
>
订单排序
<image src="/static/images/sort3.png" />
</view> </view>
<view class="sortItem" @click='setSort("orderCount","desc")' v-else>订单排序 <view class="sortItem" @click="setSort('orderCount', 'desc')" v-else>
<image src='/static/images/sort2.png'></image> 订单排序
<image src="/static/images/sort2.png" />
</view> </view>
</view> </view>
<block v-for="(item,index) in state.pagination.data" :key="index"> <block v-for="(item, index) in state.pagination.list" :key="index">
<view class='item acea-row row-between-wrapper' style="display: flex;"> <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
<view class='pictrue'> class="picTxt acea-row row-between-wrapper"
<image :src='item.avatar'></image> style="display: flex; align-items: center"
>
<view class="pictrue">
<image :src="item.avatar" />
</view> </view>
<view class='text'> <view class="text">
<view class='name line1'>{{item.nickname}}</view> <view class="name line1">{{ item.nickname }}</view>
<view>加入时间: {{ sheep.$helper.timeFormat(item.brokerageTime, 'yyyy-mm-dd hh:MM:ss') }}</view> <view>
加入时间:
{{ sheep.$helper.timeFormat(item.brokerageTime, 'yyyy-mm-dd hh:MM:ss') }}
</view> </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>
<view><text class="num">{{ item.orderCount|| 0}}</text>单</view> <view
<view><text class="num">{{ item.brokeragePrice || 0 }}</text>元</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 || 0 }}</text
>元
</view>
</view> </view>
</view> </view>
</block> </block>
<block v-if="state.pagination.data.length == 0"> <block v-if="state.pagination.list.length === 0">
<view style='text-align: center;'>暂无推广人数</view> <view style="text-align: center">暂无推广人数</view>
</block> </block>
</view> </view>
</view> </view>
@ -111,17 +177,17 @@
<view class="total-item"> <view class="total-item">
<view class="item-title">团队总人数（人）</view> <view class="item-title">团队总人数（人）</view>
<view class="total-num"> <view class="total-num">
{{ (state.getSummary.firstBrokerageUserCount+ state.getSummary.secondBrokerageUserCount)|| 0 }} {{ (state.summary.firstBrokerageUserCount+ state.summary.secondBrokerageUserCount)|| 0 }}
</view> </view>
</view> </view>
<view class="category-item ss-flex"> <view class="category-item ss-flex">
<view class="ss-flex-1"> <view class="ss-flex-1">
<view class="item-title">一级成员</view> <view class="item-title">一级成员</view>
<view class="category-num">{{ state.getSummary.firstBrokerageUserCount || 0 }}</view> <view class="category-num">{{ state.summary.firstBrokerageUserCount || 0 }}</view>
</view> </view>
<view class="ss-flex-1"> <view class="ss-flex-1">
<view class="item-title">二级成员</view> <view class="item-title">二级成员</view>
<view class="category-num">{{ state.getSummary.secondBrokerageUserCount || 0 }}</view> <view class="category-num">{{ state.summary.secondBrokerageUserCount || 0 }}</view>
</view> </view>
</view> </view>
</view> </view>
@ -167,54 +233,38 @@
<script setup> <script setup>
import sheep from '@/sheep'; import sheep from '@/sheep';
import { import { onLoad, onReachBottom } from '@dcloudio/uni-app';
onLoad, import { computed, reactive, ref } from 'vue';
onReachBottom
} from '@dcloudio/uni-app';
import {
computed,
reactive,
ref
} from 'vue';
import _ from 'lodash'; import _ from 'lodash';
import { import { onPageScroll } from '@dcloudio/uni-app';
onPageScroll import BrokerageApi from '@/sheep/api/trade/brokerage';
} from '@dcloudio/uni-app';
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2; const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
const agentInfo = computed(() => sheep.$store('user').agentInfo); // const agentInfo = computed(() => sheep.$store('user').agentInfo);
const userInfo = computed(() => sheep.$store('user').userInfo); const userInfo = computed(() => sheep.$store('user').userInfo);
const headerBg = sheep.$url.css('/static/img/shop/user/withdraw_bg.png'); const headerBg = sheep.$url.css('/static/img/shop/user/withdraw_bg.png');
onPageScroll((e) => { onPageScroll((e) => {
if (e.scrollTop > 100) { state.scrollTop = e.scrollTop <= 100;
state.scrollTop = false;
} else {
state.scrollTop = true;
}
}); });
let sort = ref(); let sort = ref();
const state = reactive({ const state = reactive({
getSummary: {}, summary: {},
pagination: { pagination: {
data: [], pageNo: 1,
current_page: 1, pageSize: 8,
total: 1, list: [],
last_page: 1, total: 0,
}, },
loadStatus: '', loadStatus: '',
// ↓ 新 ui 逻辑 // ↓ 新 ui 逻辑
level: 1, level: 1,
nickname: ref(''), nickname: ref(''),
sortKey: '', sortKey: '',
isAsc:'' isAsc: '',
}); });
function filterUserNum(num) { function filterUserNum(num) {
if (_.isNil(num)) { if (_.isNil(num)) {
return ''; return '';
@ -223,66 +273,61 @@
} }
function submitForm() { function submitForm() {
state.pagination.data = [] state.pagination.list = [];
getTeamList(); getTeamList();
} }
async function getTeamList(page = 1, list_rows = 8) {
async function getTeamList() {
state.loadStatus = 'loading'; state.loadStatus = 'loading';
// nickname: this.nickname, let { code, data } = await BrokerageApi.getBrokerageUserChildSummaryPage({
pageNo: state.pagination.pageNo,
pageSize: state.pagination.pageSize,
let res = await sheep.$api.commission.team({
pageSize: list_rows,
pageNo: page,
level: state.level, level: state.level,
'sortingField.order': 'desc', 'sortingField.order': state.isAsc,
'sortingField.field': 'userCount', 'sortingField.field': state.sortKey,
nickname: state.nickname nickname: state.nickname,
}); });
console.log(res, '分销团队列表'); if (code !== 0) {
if (res.code === 0) { return;
let orderList = _.concat(state.pagination.data, res.data.list);
state.pagination = {
...res.data,
data: orderList,
};
if (state.pagination.data.length < state.pagination.total) {
state.loadStatus = 'more';
} else {
state.loadStatus = 'noMore';
}
} }
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) { function setType(e) {
state.pagination.data = [] state.pagination.list = [];
state.level = e + ''; state.level = e + '';
getTeamList( ) getTeamList();
} }
function setSort(sortKey, isAsc) { function setSort(sortKey, isAsc) {
state.pagination.data = [] state.pagination.list = [];
sort = sortKey + isAsc.toUpperCase(); sort = sortKey + isAsc.toUpperCase();
state.isAsc = isAsc; state.isAsc = isAsc;
state.sortKey = sortKey; state.sortKey = sortKey;
getTeamList(); getTeamList();
} }
onLoad(async () => { onLoad(async () => {
getTeamList(); await getTeamList();
let res = await sheep.$api.commission.getSummary(); // 概要数据
state.getSummary = res.data; let { data } = await BrokerageApi.getBrokerageUserSummary();
state.summary = data;
}); });
// 加载更多 // 加载更多
function loadmore() { function loadMore() {
if (state.loadStatus !== 'noMore') { if (state.loadStatus === 'noMore') {
getTeamList(state.pagination.current_page + 1); return;
} }
state.pagination.pageNo++;
getTeamList();
} }
// 上拉加载更多 // 上拉加载更多
onReachBottom(() => { onReachBottom(() => {
loadmore(); loadMore();
}); });
</script> </script>

16
sheep/api/commission.js
View File

@ -1,16 +0,0 @@
import request from '@/sheep/request';
export default {
// 我的团队
team: (params) =>
request({
url: '/app-api/trade/brokerage-user/child-summary-page',
method: 'GET',
params,
}),
getSummary: (data) =>
request({
url: '/app-api/trade/brokerage-user/get-summary',
method: 'GET',
})
};

8
sheep/api/trade/brokerage.js
View File

@ -74,6 +74,14 @@ const BrokerageApi = {
method: 'GET', method: 'GET',
}); });
}, },
// 获得下级分销统计分页
getBrokerageUserChildSummaryPage: (params) => {
return request({
url: '/app-api/trade/brokerage-user/child-summary-page',
method: 'GET',
params,
})
}
} }
export default BrokerageApi export default BrokerageApi