Refactor:分包
This commit is contained in:
lifizer
@@ -0,0 +1,361 @@
|
||||
<template>
|
||||
<view class="promoter-list" ref="container">
|
||||
<view class="header">
|
||||
|
||||
<!-- 搜索开始 -->
|
||||
<view class="search acea-row row-between-wrapper" style="background-color: #F5F5F5 !important;margin-top: 22rpx;">
|
||||
<form @submit.prevent="submitForm" style="width: 100% !important;">
|
||||
<view class="input" style="text-align: left !important;background: #fff !important;width: auto !important;">
|
||||
<text class="iconfont icon-sousuo2"
|
||||
style="left: 28rpx !important;right: auto !important;margin-right: 10rpx;font-size: 32rpx !important;color: #9D9D9D !important;"></text>
|
||||
<input style="margin-left: 70rpx !important;text-align: left !important;color: #CCCCCC !important;"
|
||||
placeholder="点击搜索会员名称" placeholder-style="color:#CCCCCC" v-model="screen.keyword"
|
||||
@confirm="submitForm"/>
|
||||
<!-- <text class="iconfont icon-guanbi"></text> -->
|
||||
</view>
|
||||
</form>
|
||||
</view>
|
||||
<!-- 搜索结束 -->
|
||||
|
||||
<view class="promoterHeader" style="height: 160rpx !important;">
|
||||
<view class="headerCon acea-row row-between-wrapper"
|
||||
style="width: auto !important;padding: 0 32rpx !important;">
|
||||
<view class="acea-row row-column">
|
||||
<view class="name"
|
||||
style="color: #000000 !important;font-size: 32rpx !important;font-weight: 500;margin-bottom: 20rpx;">
|
||||
{{ first + second || '0' }}
|
||||
</view>
|
||||
<view style="color: #8C8C8C;font-size: 24rpx;"> 推广人数(人)</view>
|
||||
</view>
|
||||
<view class="acea-row row-middle">
|
||||
<view class="dropDownBtn acea-row row-middle row-center" @click="changeGrade()">
|
||||
<text style="color: #fff;font-size: 24rpx;margin-right: 28rpx;">
|
||||
{{ screen.grade == 0 ? '一级' : '二级' }}
|
||||
</text>
|
||||
<image style="width: 24rpx;height: 12rpx;" :src="webUrl+'/20210819151908963957.png'" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 一二级筛选 -->
|
||||
<!-- <view class="nav acea-row row-around">
|
||||
<view
|
||||
class="item"
|
||||
:class="screen.grade == 0 ? 'on' : ''"
|
||||
@click="checkGrade(0)"
|
||||
>一级({{ first||'0' }})</view>
|
||||
<view
|
||||
class="item"
|
||||
:class="screen.grade == 1 ? 'on' : ''"
|
||||
@click="checkGrade(1)"
|
||||
>二级({{ second||'0' }})</view>
|
||||
</view> -->
|
||||
<!-- 一二级筛选 -->
|
||||
|
||||
</view>
|
||||
<view class="list">
|
||||
<view class="sortNav acea-row row-middle" :class="fixedState === true ? 'on' : ''">
|
||||
<view class="sortItem" :style="(childCount === 1 || childCount === 3) ? 'color:#0DC5C5' : ''"
|
||||
@click="sort('childCount')">
|
||||
团队排序
|
||||
<image :src="webUrl+'/20230304204227252460.png'" v-if="childCount == 1"/>
|
||||
<image :src="webUrl+'/20230304204233362231.png'" v-if="childCount == 2"/>
|
||||
<image :src="webUrl+'/20230304204240497772.png'" v-if="childCount == 3"/>
|
||||
</view>
|
||||
<view class="sortItem" :style="(numberCount === 1 || numberCount === 3) ? 'color:#0DC5C5' : ''"
|
||||
@click="sort('numberCount')">
|
||||
金额排序
|
||||
<image :src="webUrl+'/20230304204227252460.png'" v-if="numberCount == 1"/>
|
||||
<image :src="webUrl+'/20230304204233362231.png'" v-if="numberCount == 2"/>
|
||||
<image :src="webUrl+'/20230304204240497772.png'" v-if="numberCount == 3"/>
|
||||
</view>
|
||||
<view class="sortItem" :style="(orderCount === 1 || orderCount === 3) ? 'color:#0DC5C5' : ''"
|
||||
@click="sort('orderCount')">
|
||||
订单排序
|
||||
<image :src="webUrl+'/20230304204227252460.png'" v-if="orderCount == 1"/>
|
||||
<image :src="webUrl+'/20230304204233362231.png'" v-if="orderCount == 2"/>
|
||||
<image :src="webUrl+'/20230304204240497772.png'" v-if="orderCount == 3"/>
|
||||
</view>
|
||||
<view class="sortItem" :style="(levelCount === 1 || levelCount === 3) ? 'color:#0DC5C5' : ''"
|
||||
@click="sort('levelCount')">
|
||||
等级排序
|
||||
<image :src="webUrl+'/20230304204227252460.png'" v-if="levelCount == 1"/>
|
||||
<image :src="webUrl+'/20230304204233362231.png'" v-if="levelCount == 2"/>
|
||||
<image :src="webUrl+'/20230304204240497772.png'" v-if="levelCount == 3"/>
|
||||
</view>
|
||||
</view>
|
||||
<view :class="fixedState === true ? 'sortList' : ''">
|
||||
<view
|
||||
class="item acea-row row-between-wrapper"
|
||||
v-for="(val, spreadListIndex) in spreadList"
|
||||
:key="spreadListIndex"
|
||||
>
|
||||
<view class="picTxt acea-row row-between-wrapper" style="flex-wrap: nowrap;">
|
||||
<view class="" style="width: 60rpx;word-wrap: break-word;text-align: center;margin-right: 8rpx;">
|
||||
{{ spreadListIndex + 1 }}
|
||||
</view>
|
||||
<view class="pictrue" style="flex-shrink: 0;margin-right: 8rpx;">
|
||||
<image :src="val.avatar"/>
|
||||
</view>
|
||||
<view class="text">
|
||||
<view class="name line1 acea-row row-middle">{{ val.nickname }}
|
||||
<text class="levelBox">{{ val.levelName }}</text>
|
||||
</view>
|
||||
<view style="color: #999999 !important;">加入时间: {{ val.time }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view>
|
||||
<text class="font-color-red">{{ val.childCount }}</text>
|
||||
人
|
||||
</view>
|
||||
<view>{{ val.orderCount }}单</view>
|
||||
<view>
|
||||
<text class="font-color-red">{{ val.numberCount ? val.numberCount : 0 }}</text>
|
||||
元
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="v12-px-6" v-if="spreadList.length === 0">
|
||||
<u-divider :text=" ' · 此级别未找到会员 · ' " textPosition="center"></u-divider>
|
||||
</view>
|
||||
</view>
|
||||
<Loading :loaded="loaded" :loading="loading"></Loading>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import {getSpreadUser} from "@/api/user";
|
||||
import Loading from "@/components/Loading";
|
||||
import { pageListenMixins } from '@/mixins/pageListenMixins'
|
||||
|
||||
export default {
|
||||
name: "PromoterList",
|
||||
components: {
|
||||
Loading
|
||||
},
|
||||
mixins: [pageListenMixins],
|
||||
data: function () {
|
||||
return {
|
||||
fixedState: false,
|
||||
screen: {
|
||||
page: 1,
|
||||
limit: 15,
|
||||
grade: 0,
|
||||
keyword: "",
|
||||
sort: ""
|
||||
},
|
||||
childCount: 2,
|
||||
numberCount: 2,
|
||||
orderCount: 2,
|
||||
levelCount: 2,
|
||||
loaded: false,
|
||||
loading: false,
|
||||
spreadList: [],
|
||||
loadTitle: "",
|
||||
first: "",
|
||||
second: "",
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
pageKeyId: Object.freeze('userSpreadStat')
|
||||
};
|
||||
},
|
||||
mounted: function () {
|
||||
this.getSpreadUsers();
|
||||
},
|
||||
onReachBottom() {
|
||||
!this.loading && this.getSpreadUsers();
|
||||
},
|
||||
watch: {
|
||||
"screen.sort": function () {
|
||||
this.screen.page = 1;
|
||||
this.loaded = false;
|
||||
this.loading = false;
|
||||
this.spreadList = [];
|
||||
this.getSpreadUsers();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeGrade: function () {
|
||||
var that = this;
|
||||
uni.showActionSheet({
|
||||
itemList: ['一级', '二级'],
|
||||
success: function (res) {
|
||||
console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
|
||||
that.checkGrade(res.tapIndex);
|
||||
},
|
||||
fail: function (res) {
|
||||
|
||||
}
|
||||
});
|
||||
},
|
||||
handleScroll: function () {
|
||||
// var scrollTop =
|
||||
// document.documentElement.scrollTop || document.body.scrollTop;
|
||||
// var offsetTop = document.querySelector(".header").clientHeight;
|
||||
// if (scrollTop >= offsetTop) {
|
||||
// this.fixedState = true;
|
||||
// } else {
|
||||
// this.fixedState = false;
|
||||
// }
|
||||
},
|
||||
submitForm: function () {
|
||||
this.screen.page = 1;
|
||||
this.loaded = false;
|
||||
this.loading = false;
|
||||
this.spreadList = [];
|
||||
this.getSpreadUsers();
|
||||
},
|
||||
getSpreadUsers: function () {
|
||||
let that = this,
|
||||
screen = that.screen;
|
||||
if (that.loaded || that.loading) return;
|
||||
that.loading = true;
|
||||
getSpreadUser(screen).then(
|
||||
res => {
|
||||
that.loading = false;
|
||||
that.spreadList.push.apply(that.spreadList, res.data.list);
|
||||
that.loaded = res.data.list.length < that.screen.limit; //判断所有数据是否加载完成；
|
||||
that.loadTitle = that.loaded ? "人家是有底线的" : "上拉加载更多";
|
||||
that.screen.page = that.screen.page + 1;
|
||||
that.first = res.data.total;
|
||||
that.second = res.data.totalLevel;
|
||||
},
|
||||
err => {
|
||||
uni.showToast({
|
||||
title:
|
||||
err.msg || err.response.data.msg || err.response.data.message,
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
});
|
||||
},
|
||||
300
|
||||
);
|
||||
},
|
||||
checkGrade: function (val) {
|
||||
if (val == this.screen.grade) return;
|
||||
else {
|
||||
this.screen.page = 1;
|
||||
this.screen.grade = val;
|
||||
this.loading = false;
|
||||
this.loaded = false;
|
||||
this.spreadList = [];
|
||||
this.getSpreadUsers();
|
||||
}
|
||||
},
|
||||
sort: function (types) {
|
||||
let that = this;
|
||||
switch (types) {
|
||||
case "childCount":
|
||||
if (that.childCount == 2) {
|
||||
that.childCount = 1;
|
||||
that.orderCount = 2;
|
||||
that.numberCount = 2;
|
||||
that.levelCount = 2;
|
||||
that.screen.sort = "childCount DESC";
|
||||
} else if (that.childCount == 1) {
|
||||
that.childCount = 3;
|
||||
that.orderCount = 2;
|
||||
that.numberCount = 2;
|
||||
that.levelCount = 2;
|
||||
that.screen.sort = "childCount ASC";
|
||||
} else if (that.childCount == 3) {
|
||||
that.childCount = 2;
|
||||
that.orderCount = 2;
|
||||
that.numberCount = 2;
|
||||
that.levelCount = 2;
|
||||
that.screen.sort = "";
|
||||
}
|
||||
break;
|
||||
case "numberCount":
|
||||
if (that.numberCount == 2) {
|
||||
that.numberCount = 1;
|
||||
that.orderCount = 2;
|
||||
that.childCount = 2;
|
||||
that.levelCount = 2;
|
||||
that.screen.sort = "numberCount DESC";
|
||||
} else if (that.numberCount == 1) {
|
||||
that.numberCount = 3;
|
||||
that.orderCount = 2;
|
||||
that.childCount = 2;
|
||||
that.levelCount = 2;
|
||||
that.screen.sort = "numberCount ASC";
|
||||
} else if (that.numberCount == 3) {
|
||||
that.numberCount = 2;
|
||||
that.orderCount = 2;
|
||||
that.childCount = 2;
|
||||
that.levelCount = 2;
|
||||
that.screen.sort = "";
|
||||
}
|
||||
break;
|
||||
case "orderCount":
|
||||
if (that.orderCount == 2) {
|
||||
that.orderCount = 1;
|
||||
that.numberCount = 2;
|
||||
that.childCount = 2;
|
||||
that.levelCount = 2;
|
||||
that.screen.sort = "orderCount DESC";
|
||||
} else if (that.orderCount == 1) {
|
||||
that.orderCount = 3;
|
||||
that.numberCount = 2;
|
||||
that.childCount = 2;
|
||||
that.levelCount = 2;
|
||||
that.screen.sort = "orderCount ASC";
|
||||
} else if (that.orderCount == 3) {
|
||||
that.orderCount = 2;
|
||||
that.numberCount = 2;
|
||||
that.childCount = 2;
|
||||
that.levelCount = 2;
|
||||
that.screen.sort = "";
|
||||
}
|
||||
break;
|
||||
case "levelCount":
|
||||
if (that.levelCount == 2) {
|
||||
that.levelCount = 1;
|
||||
that.orderCount = 2;
|
||||
that.numberCount = 2;
|
||||
that.childCount = 2;
|
||||
that.screen.sort = "level desc";
|
||||
} else if (that.levelCount == 1) {
|
||||
that.levelCount = 3;
|
||||
that.orderCount = 2;
|
||||
that.numberCount = 2;
|
||||
that.childCount = 2;
|
||||
that.screen.sort = "level ASC";
|
||||
} else if (that.levelCount == 3) {
|
||||
that.levelCount = 2;
|
||||
that.orderCount = 2;
|
||||
that.numberCount = 2;
|
||||
that.childCount = 2;
|
||||
that.screen.sort = "";
|
||||
}
|
||||
break;
|
||||
default:
|
||||
that.screen.sort = "";
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.dropDownBtn {
|
||||
width: 176rpx;
|
||||
height: 60rpx;
|
||||
background: #0DC5C5;
|
||||
box-shadow: 0px 8rpx 14rpx rgba(179, 188, 191, 0.6);
|
||||
opacity: 1;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.levelBox {
|
||||
padding: 0 10rpx;
|
||||
font-size: 18rpx;
|
||||
line-height: 28rpx;
|
||||
height: 28rpx;
|
||||
background: #FF564A;
|
||||
color: #fff;
|
||||
border-radius: 14rpx;
|
||||
margin-left: 14rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user