|
|
@@ -1,14 +1,24 @@
|
|
|
<template>
|
|
|
<view class="app-main app-content">
|
|
|
<view class="input-wrap_box">
|
|
|
- <view>
|
|
|
+ <view class="search-wrap">
|
|
|
<AppSearchModule placeholder="名称 / 手机尾号" @input="searchFn"/>
|
|
|
</view>
|
|
|
- <view style="padding:0 0 0 20upx;" >
|
|
|
- <button class="admin-button-com middle blue" style="margin-right:10upx;" @click="getSet()">设置</button>
|
|
|
- <button class="admin-button-com middle blue" style="margin-right:10upx;" @click="showAllShop()">拉取</button>
|
|
|
- <button class="admin-button-com middle blue" @click="pageTo({ url: '/pagesClient/member/addCustomer' })">添加客户</button>
|
|
|
- </view>
|
|
|
+ <view class="toolbar-actions">
|
|
|
+ <view class="toolbar-icon-btn" @click="openFilterPanel">
|
|
|
+ <image class="toolbar-action-icon" :src="iconSrc('custom-select')" mode="aspectFit" />
|
|
|
+ <view v-if="hasActiveFilters" class="filter-dot"></view>
|
|
|
+ </view>
|
|
|
+ <view class="toolbar-icon-btn" @click="getSet()">
|
|
|
+ <image class="toolbar-action-icon" :src="iconSrc('custom-setting')" mode="aspectFit" />
|
|
|
+ </view>
|
|
|
+ <view class="toolbar-icon-btn" @click="showAllShop()">
|
|
|
+ <image class="toolbar-action-icon" :src="iconSrc('pull-custom')" mode="aspectFit" />
|
|
|
+ </view>
|
|
|
+ <view class="toolbar-icon-btn" @click="pageTo({ url: '/pagesClient/member/addCustomer' })">
|
|
|
+ <image class="toolbar-action-icon" :src="iconSrc('add-custom')" mode="aspectFit" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
<view class="app-tabs">
|
|
|
<scrollable-tabs :tabs="tabs" :isFixed="true" :top="100" :currentTab="tabIndex" :height="104" @change="change" />
|
|
|
@@ -74,6 +84,101 @@
|
|
|
</div>
|
|
|
<NotLogin></NotLogin>
|
|
|
<ShopSelect ref="shopSelectComponent" class="bar" :isShowTit="false" top="0upx" @selectShopFn="selectShopFn" />
|
|
|
+
|
|
|
+ <view v-if="showFilterPanel" class="filter-overlay" @click="closeFilterPanel">
|
|
|
+ <view class="filter-panel" @click.stop>
|
|
|
+ <view class="filter-header">筛选客户</view>
|
|
|
+ <view class="filter-section">
|
|
|
+ <view class="filter-title">片区</view>
|
|
|
+ <view class="filter-options">
|
|
|
+ <view class="filter-option" :class="{ active: filterDistId === 0 }" @click="onSelectDist(0)">全部</view>
|
|
|
+ <view
|
|
|
+ v-for="(item, index) in distList"
|
|
|
+ :key="index"
|
|
|
+ class="filter-option"
|
|
|
+ :class="{ active: filterDistId === item.id }"
|
|
|
+ @click="onSelectDist(item.id)"
|
|
|
+ >
|
|
|
+ {{ item.name }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="filter-section">
|
|
|
+ <view class="filter-title">自助挂账</view>
|
|
|
+ <view class="filter-options">
|
|
|
+ <view
|
|
|
+ v-for="(item, index) in selfDebtOptions"
|
|
|
+ :key="index"
|
|
|
+ class="filter-option"
|
|
|
+ :class="{ active: filterSelfDebt === item.value }"
|
|
|
+ @click="onSelectSelfDebt(index)"
|
|
|
+ >
|
|
|
+ {{ item.label }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="filter-section">
|
|
|
+ <view class="filter-title">下单价格</view>
|
|
|
+ <view class="filter-options">
|
|
|
+ <view
|
|
|
+ v-for="(item, index) in levelOptions"
|
|
|
+ :key="index"
|
|
|
+ class="filter-option"
|
|
|
+ :class="{ active: filterLevel === item.value }"
|
|
|
+ @click="onSelectLevel(index)"
|
|
|
+ >
|
|
|
+ {{ item.label }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="filter-section">
|
|
|
+ <view class="filter-title">未下单时长</view>
|
|
|
+ <view class="filter-options">
|
|
|
+ <view
|
|
|
+ v-for="(item, index) in overTimeOptions"
|
|
|
+ :key="index"
|
|
|
+ class="filter-option"
|
|
|
+ :class="{ active: filterOverTime === item.value }"
|
|
|
+ @click="onSelectOverTime(index)"
|
|
|
+ >
|
|
|
+ {{ item.label }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="filter-section">
|
|
|
+ <view class="filter-title">黑名单</view>
|
|
|
+ <view class="filter-options">
|
|
|
+ <view
|
|
|
+ v-for="(item, index) in blackOptions"
|
|
|
+ :key="index"
|
|
|
+ class="filter-option"
|
|
|
+ :class="{ active: filterBlack === item.value }"
|
|
|
+ @click="onSelectBlack(index)"
|
|
|
+ >
|
|
|
+ {{ item.label }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="filter-section">
|
|
|
+ <view class="filter-title">删除状态</view>
|
|
|
+ <view class="filter-options">
|
|
|
+ <view
|
|
|
+ v-for="(item, index) in delStatusOptions"
|
|
|
+ :key="index"
|
|
|
+ class="filter-option"
|
|
|
+ :class="{ active: filterDelStatus === item.value }"
|
|
|
+ @click="onSelectDelStatus(index)"
|
|
|
+ >
|
|
|
+ {{ item.label }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="filter-actions">
|
|
|
+ <button class="filter-action-btn clear-btn" @click="clearFilters">重置</button>
|
|
|
+ <button class="filter-action-btn confirm-btn" @click="confirmFilters">确定</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
<script>
|
|
|
@@ -88,6 +193,8 @@ import AppSearchModule from "@/components/module/app-search";
|
|
|
import { copyCumtomer } from '@/api/custom'
|
|
|
import { list } from "@/mixins";
|
|
|
import { getList } from "@/api/member";
|
|
|
+import { getAllDist } from "@/api/dist";
|
|
|
+import { iconSrc } from "@/utils/iconSrc";
|
|
|
import ShopSelect from "@/components/module/shopSelect";
|
|
|
import { mapGetters } from "vuex"
|
|
|
export default {
|
|
|
@@ -104,42 +211,64 @@ export default {
|
|
|
ShopSelect
|
|
|
},
|
|
|
mixins: [list],
|
|
|
+ computed: {
|
|
|
+ ...mapGetters({ myShopInfo: "getMyShopInfo" }),
|
|
|
+ hasActiveFilters() {
|
|
|
+ return (
|
|
|
+ this.filterDistId !== 0 ||
|
|
|
+ this.filterSelfDebt !== -1 ||
|
|
|
+ this.filterLevel !== -1 ||
|
|
|
+ this.filterOverTime !== -1 ||
|
|
|
+ this.filterBlack !== -1 ||
|
|
|
+ this.filterDelStatus !== -1
|
|
|
+ );
|
|
|
+ }
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
tabIndex: 0,
|
|
|
tabs: [
|
|
|
- {
|
|
|
- name: "全部",
|
|
|
- value: 0
|
|
|
- },
|
|
|
- {
|
|
|
- name: "消费",
|
|
|
- value: 0
|
|
|
- },
|
|
|
- {
|
|
|
- name: "挂账",
|
|
|
- value: 0
|
|
|
- },
|
|
|
- {
|
|
|
- name: "大客",
|
|
|
- value: 0
|
|
|
- },
|
|
|
- {
|
|
|
- name: "零售",
|
|
|
- value: 0
|
|
|
- },
|
|
|
- {
|
|
|
- name: "休眠",
|
|
|
- value: 0
|
|
|
- },
|
|
|
- {
|
|
|
- name: "黑名单",
|
|
|
- value: 0
|
|
|
- },
|
|
|
- {
|
|
|
- name: "删除",
|
|
|
- value: 0
|
|
|
- }
|
|
|
+ { name: "全部", value: 0 },
|
|
|
+ { name: "消费", value: 0 },
|
|
|
+ { name: "挂账", value: 0 }
|
|
|
+ ],
|
|
|
+ showFilterPanel: false,
|
|
|
+ distList: [],
|
|
|
+ filterDistId: 0,
|
|
|
+ filterSelfDebt: -1,
|
|
|
+ filterLevel: -1,
|
|
|
+ filterOverTime: -1,
|
|
|
+ filterBlack: -1,
|
|
|
+ filterDelStatus: -1,
|
|
|
+ selfDebtOptions: [
|
|
|
+ { label: "全部", value: -1 },
|
|
|
+ { label: "允许", value: 1 },
|
|
|
+ { label: "禁止", value: 0 }
|
|
|
+ ],
|
|
|
+ levelOptions: [
|
|
|
+ { label: "全部", value: -1 },
|
|
|
+ { label: "零售", value: 0 },
|
|
|
+ { label: "批发", value: 1 },
|
|
|
+ { label: "大客", value: 2 },
|
|
|
+ { label: "成本", value: 9 }
|
|
|
+ ],
|
|
|
+ overTimeOptions: [
|
|
|
+ { label: "全部", value: -1 },
|
|
|
+ { label: "没有下过", value: 10000 },
|
|
|
+ { label: "1周未下", value: 7 },
|
|
|
+ { label: "1月未下", value: 30 },
|
|
|
+ { label: "半年未下", value: 180 },
|
|
|
+ { label: "1年未下", value: 365 }
|
|
|
+ ],
|
|
|
+ blackOptions: [
|
|
|
+ { label: "全部", value: -1 },
|
|
|
+ { label: "是", value: 2 },
|
|
|
+ { label: "否", value: 1 }
|
|
|
+ ],
|
|
|
+ delStatusOptions: [
|
|
|
+ { label: "全部", value: -1 },
|
|
|
+ { label: "正常", value: 0 },
|
|
|
+ { label: "已删除", value: 1 }
|
|
|
],
|
|
|
// 搜索相关
|
|
|
seekVal: "",
|
|
|
@@ -148,13 +277,14 @@ export default {
|
|
|
searchTimer: null
|
|
|
};
|
|
|
},
|
|
|
- computed: {
|
|
|
- ...mapGetters({ myShopInfo: "getMyShopInfo" }),
|
|
|
- },
|
|
|
+ onLoad(option) {
|
|
|
+ this.loadDistList();
|
|
|
+ this.getCustomList();
|
|
|
+ },
|
|
|
onPullDownRefresh() {
|
|
|
this.resetList();
|
|
|
- this.getCustomList()
|
|
|
- uni.stopPullDownRefresh()
|
|
|
+ this.getCustomList();
|
|
|
+ uni.stopPullDownRefresh();
|
|
|
},
|
|
|
onReachBottom() {
|
|
|
if (!this.list.finished) {
|
|
|
@@ -173,9 +303,6 @@ export default {
|
|
|
} else {
|
|
|
uni.stopPullDownRefresh();
|
|
|
}
|
|
|
- },
|
|
|
- onLoad(option) {
|
|
|
- this.getCustomList()
|
|
|
},
|
|
|
onShow(){
|
|
|
uni.removeStorageSync('newClient')
|
|
|
@@ -195,8 +322,71 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ iconSrc,
|
|
|
init(){
|
|
|
|
|
|
+ },
|
|
|
+ loadDistList() {
|
|
|
+ getAllDist().then((res) => {
|
|
|
+ if (res.code == 1) {
|
|
|
+ this.distList = res.data.list || [];
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ openFilterPanel() {
|
|
|
+ this.showFilterPanel = true;
|
|
|
+ },
|
|
|
+ closeFilterPanel() {
|
|
|
+ this.showFilterPanel = false;
|
|
|
+ },
|
|
|
+ onSelectDist(id) {
|
|
|
+ this.filterDistId = id;
|
|
|
+ },
|
|
|
+ onSelectSelfDebt(index) {
|
|
|
+ const item = this.selfDebtOptions[index];
|
|
|
+ if (item) {
|
|
|
+ this.filterSelfDebt = item.value;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onSelectLevel(index) {
|
|
|
+ const item = this.levelOptions[index];
|
|
|
+ if (item) {
|
|
|
+ this.filterLevel = item.value;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onSelectOverTime(index) {
|
|
|
+ const item = this.overTimeOptions[index];
|
|
|
+ if (item) {
|
|
|
+ this.filterOverTime = item.value;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onSelectBlack(index) {
|
|
|
+ const item = this.blackOptions[index];
|
|
|
+ if (item) {
|
|
|
+ this.filterBlack = item.value;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onSelectDelStatus(index) {
|
|
|
+ const item = this.delStatusOptions[index];
|
|
|
+ if (item) {
|
|
|
+ this.filterDelStatus = item.value;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ clearFilters() {
|
|
|
+ this.filterDistId = 0;
|
|
|
+ this.filterSelfDebt = -1;
|
|
|
+ this.filterLevel = -1;
|
|
|
+ this.filterOverTime = -1;
|
|
|
+ this.filterBlack = -1;
|
|
|
+ this.filterDelStatus = -1;
|
|
|
+ this.closeFilterPanel();
|
|
|
+ this.resetList();
|
|
|
+ this.getCustomList();
|
|
|
+ },
|
|
|
+ confirmFilters() {
|
|
|
+ this.closeFilterPanel();
|
|
|
+ this.resetList();
|
|
|
+ this.getCustomList();
|
|
|
},
|
|
|
getSet(){
|
|
|
this.$util.pageTo({url: "/admin/custom/set"})
|
|
|
@@ -251,7 +441,18 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
getCustomList() {
|
|
|
- return getList({ search: "", type:this.tabIndex, page: this.list.page, name: this.seekVal, }).then((res) => {
|
|
|
+ return getList({
|
|
|
+ search: "",
|
|
|
+ type: this.tabIndex,
|
|
|
+ page: this.list.page,
|
|
|
+ name: this.seekVal,
|
|
|
+ distId: this.filterDistId,
|
|
|
+ filterDebt: this.filterSelfDebt,
|
|
|
+ level: this.filterLevel,
|
|
|
+ overTimeUnExpend: this.filterOverTime,
|
|
|
+ filterBlack: this.filterBlack,
|
|
|
+ filterDelStatus: this.filterDelStatus
|
|
|
+ }).then((res) => {
|
|
|
this.completes(res);
|
|
|
if (this.$util.isEmpty(res.data)){
|
|
|
return false;
|
|
|
@@ -305,8 +506,42 @@ export default {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
padding: 0 20upx;
|
|
|
- & > view:nth-child(1) {
|
|
|
+ .search-wrap {
|
|
|
flex: 1;
|
|
|
+ min-width: 0;
|
|
|
+ }
|
|
|
+ .toolbar-actions {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-left: 12upx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+ .toolbar-icon-btn {
|
|
|
+ position: relative;
|
|
|
+ width: 78upx;
|
|
|
+ height: 78upx;
|
|
|
+ border-radius: 12upx;
|
|
|
+ background: #f2f6ff;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ .toolbar-icon-btn + .toolbar-icon-btn {
|
|
|
+ margin-left: 18upx;
|
|
|
+ }
|
|
|
+ .toolbar-action-icon {
|
|
|
+ width: 54upx;
|
|
|
+ height: 54upx;
|
|
|
+ }
|
|
|
+ .filter-dot {
|
|
|
+ position: absolute;
|
|
|
+ top: 8upx;
|
|
|
+ right: 8upx;
|
|
|
+ width: 12upx;
|
|
|
+ height: 12upx;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #ff4d4f;
|
|
|
+ border: 2upx solid #fff;
|
|
|
}
|
|
|
}
|
|
|
.list-wrap {
|
|
|
@@ -468,4 +703,86 @@ export default {
|
|
|
display: inline-block;
|
|
|
font-size: 30upx;
|
|
|
}
|
|
|
+.filter-overlay {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ z-index: 9999999;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ justify-content: center;
|
|
|
+ background-color: rgba(0, 0, 0, 0.5);
|
|
|
+}
|
|
|
+.filter-panel {
|
|
|
+ width: 100%;
|
|
|
+ max-height: 90vh;
|
|
|
+ overflow-y: auto;
|
|
|
+ border-radius: 0 0 24upx 24upx;
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
+.filter-header {
|
|
|
+ padding: 24upx 0;
|
|
|
+ text-align: center;
|
|
|
+ color: #333;
|
|
|
+ font-size: 32upx;
|
|
|
+ font-weight: 700;
|
|
|
+ border-bottom: 1upx solid #f0f0f0;
|
|
|
+}
|
|
|
+.filter-section {
|
|
|
+ padding: 30upx 40upx;
|
|
|
+ border-bottom: 1upx solid #f0f0f0;
|
|
|
+}
|
|
|
+.filter-title {
|
|
|
+ margin-bottom: 20upx;
|
|
|
+ color: #333;
|
|
|
+ font-size: 28upx;
|
|
|
+ font-weight: 700;
|
|
|
+}
|
|
|
+.filter-options {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
+.filter-option {
|
|
|
+ min-width: 120upx;
|
|
|
+ padding: 15upx 28upx;
|
|
|
+ margin-right: 18upx;
|
|
|
+ margin-top: 18upx;
|
|
|
+ border: 1upx solid #dce2e0;
|
|
|
+ border-radius: 28upx;
|
|
|
+ color: #60666d;
|
|
|
+ background: #fff;
|
|
|
+ font-size: 26upx;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.filter-option.active {
|
|
|
+ color: #3385ff;
|
|
|
+ border-color: #3385ff;
|
|
|
+ background: #eef5ff;
|
|
|
+ font-weight: 700;
|
|
|
+}
|
|
|
+.filter-actions {
|
|
|
+ display: flex;
|
|
|
+ padding: 30upx 40upx 40upx;
|
|
|
+}
|
|
|
+.filter-action-btn {
|
|
|
+ flex: 1;
|
|
|
+ height: 80upx;
|
|
|
+ line-height: 80upx;
|
|
|
+ font-size: 28upx;
|
|
|
+ border-radius: 40upx;
|
|
|
+}
|
|
|
+.filter-action-btn::after {
|
|
|
+ border: none;
|
|
|
+}
|
|
|
+.clear-btn {
|
|
|
+ margin-right: 20upx;
|
|
|
+ color: #60666d;
|
|
|
+ background: #f5f5f5;
|
|
|
+}
|
|
|
+.confirm-btn {
|
|
|
+ color: #fff;
|
|
|
+ background: #3385ff;
|
|
|
+}
|
|
|
</style>
|
