489 lines
12 KiB
Vue
489 lines
12 KiB
Vue
<template>
|
|
<view class="min-page u-font-28">
|
|
<up-sticky>
|
|
<view class="bg-fff top">
|
|
<view class="bg-fff container u-flex u-m-b-48">
|
|
<image
|
|
style="width: 60rpx; height: 60rpx"
|
|
src="/pageMarket/static/images/distribution.png"
|
|
></image>
|
|
<view class="u-flex-1 u-flex u-p-l-24">
|
|
<view class="u-font-28 u-flex-1 u-p-r-4">
|
|
<view class="color-333 font-bold">分销</view>
|
|
<view class="color-666 u-m-t-4 u-font-24"
|
|
>允许客户充值并使用余额支付
|
|
</view>
|
|
</view>
|
|
<up-switch
|
|
v-model="distributionStore.config.isEnable"
|
|
size="18"
|
|
:active-value="1"
|
|
:inactive-value="0"
|
|
></up-switch>
|
|
</view>
|
|
</view>
|
|
<my-tabs v-model="active" :list="tabs" textKey="label"></my-tabs>
|
|
<view
|
|
v-if="active == 1 || active == 2"
|
|
class="u-flex u-row-between u-m-t-32"
|
|
style="gap: 58rpx"
|
|
>
|
|
<view class="u-flex-1 filter-box" style="border-radius: 100rpx">
|
|
<up-icon name="search" size="18"></up-icon>
|
|
<input
|
|
class="u-m-l-10 u-font-28"
|
|
type="text"
|
|
placeholder-class="color-999 u-font-28"
|
|
placeholder="搜索关键词"
|
|
v-model="keyWord"
|
|
@blur="keyWordBlur"
|
|
/>
|
|
</view>
|
|
<view
|
|
class="u-flex-1 u-font-28 filter-box u-flex u-row-between"
|
|
@click="showTimeArea = true"
|
|
>
|
|
<template
|
|
v-if="userComponentQuery.startTime && userComponentQuery.endTime"
|
|
>
|
|
<text class="u-font-20">
|
|
{{ userComponentQuery.startTime }} -
|
|
{{ userComponentQuery.endTime }}
|
|
</text>
|
|
</template>
|
|
<template v-else>
|
|
<text class="color-999">请选择日期范围</text>
|
|
<up-icon name="arrow-right" size="12"></up-icon>
|
|
</template>
|
|
</view>
|
|
</view>
|
|
<view
|
|
v-if="active == 3"
|
|
class="u-flex u-row-between u-m-t-32"
|
|
style="gap: 30rpx"
|
|
>
|
|
<view
|
|
class="u-font-28 filter-box u-flex u-row-between"
|
|
@click="showActions = true"
|
|
>
|
|
<template v-if="selActions&&selActions.value">
|
|
<text class="u-font-28 u-m-r-10">{{ selActions.name }} </text>
|
|
</template>
|
|
<template v-else>
|
|
<text class="color-999 u-m-r-10">全部</text>
|
|
</template>
|
|
<up-icon name="arrow-down" size="12"></up-icon>
|
|
|
|
</view>
|
|
<view class="u-flex-1 filter-box" style="border-radius: 100rpx">
|
|
<up-icon name="search" size="18"></up-icon>
|
|
<input
|
|
class="u-m-l-10 u-font-28"
|
|
type="text"
|
|
placeholder-class="color-999 u-font-28"
|
|
placeholder="分销员昵称/手机号"
|
|
v-model="keyWord"
|
|
@blur="keyWordBlur"
|
|
/>
|
|
</view>
|
|
<view
|
|
class="u-flex-1 u-font-28 filter-box u-flex u-row-between"
|
|
@click="showTimeArea = true"
|
|
>
|
|
<template
|
|
v-if="userComponentQuery.startTime && userComponentQuery.endTime"
|
|
>
|
|
<text class="u-font-20">
|
|
{{ userComponentQuery.startTime }} -
|
|
{{ userComponentQuery.endTime }}
|
|
</text>
|
|
</template>
|
|
<template v-else>
|
|
<text class="color-999">请选择日期</text>
|
|
<up-icon name="arrow-right" size="12"></up-icon>
|
|
</template>
|
|
</view>
|
|
</view>
|
|
<view v-if="active == 2" class="u-flex u-p-l-32 u-p-r-32 u-m-t-32">
|
|
<view class="u-flex-1 u-text-center">
|
|
<view class="u-font-32 color-main font-bold">{{
|
|
listRes.totalCount
|
|
}}</view>
|
|
<view class="u-font-24 color-666 u-m-t-16">支付开通人数</view>
|
|
</view>
|
|
<view class="u-flex-1 u-text-center">
|
|
<view class="u-font-32 color-main font-bold">{{
|
|
listRes.totalAmount
|
|
}}</view>
|
|
<view class="u-font-24 color-666 u-m-t-16">支付开通人数</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="active == 3" class="u-flex u-m-t-32">
|
|
<view class="u-flex-1 u-text-center">
|
|
<view class="u-font-32 color-main font-bold">{{
|
|
listRes.successAmount
|
|
}}</view>
|
|
<view class="u-font-24 color-666 u-m-t-16">已入账金额（元）</view>
|
|
</view>
|
|
<view class="u-flex-1 u-text-center">
|
|
<view class="u-font-32 color-main font-bold">{{
|
|
listRes.pendingAmount || 0
|
|
}}</view>
|
|
<view class="u-font-24 color-666 u-m-t-16">待入账金额（元）</view>
|
|
</view>
|
|
<view class="u-flex-1 u-text-center">
|
|
<view class="u-font-32 color-main font-bold">{{
|
|
listRes.balanceAmount
|
|
}}</view>
|
|
<view class="u-font-24 color-666 u-m-t-16">
|
|
<text>运营余额（元）</text>
|
|
<text class="color-main" @click="go.to('PAGES_PAY')">充值></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</up-sticky>
|
|
<configVue v-if="active == 0"></configVue>
|
|
<fenxiaoUserListVue
|
|
v-if="active == 1"
|
|
:list="list"
|
|
:isEnd="isEnd"
|
|
@refresh="refresh"
|
|
></fenxiaoUserListVue>
|
|
|
|
<openListVue
|
|
v-if="active == 2"
|
|
:list="list"
|
|
:isEnd="isEnd"
|
|
@refresh="refresh"
|
|
></openListVue>
|
|
<fenxiaoMingxiVue
|
|
v-if="active == 3"
|
|
:list="list"
|
|
:isEnd="isEnd"
|
|
@refresh="refresh"
|
|
></fenxiaoMingxiVue>
|
|
<!-- 选择门店 -->
|
|
<shopSelActionSheetVue
|
|
@choose="chooseShop"
|
|
v-model="showShopSelActionSheet"
|
|
title="选择门店"
|
|
>
|
|
</shopSelActionSheetVue>
|
|
|
|
<dateAreaSel
|
|
:show="showTimeArea"
|
|
:minYear="2022"
|
|
@close="showTimeArea = false"
|
|
@confirm="confirmTimeArea"
|
|
></dateAreaSel>
|
|
|
|
<!-- 分销明细状态 -->
|
|
<up-action-sheet
|
|
:show="showActions"
|
|
:actions="actions"
|
|
@select="handleSelect"
|
|
@close="showActions = false"
|
|
cancel-text="取消"
|
|
></up-action-sheet>
|
|
</view>
|
|
</template>
|
|
<script setup>
|
|
import {
|
|
onLoad,
|
|
onReady,
|
|
onShow,
|
|
onPageScroll,
|
|
onReachBottom,
|
|
onBackPress,
|
|
} from "@dcloudio/uni-app";
|
|
import go from "@/commons/utils/go.js";
|
|
import { ref, onMounted, watch, provide } from "vue";
|
|
import * as consumeCashbackApi from "@/http/api/market/consumeCashback.js";
|
|
import * as distributionApi from "@/http/api/market/distribution.js";
|
|
import configVue from "./components/config.vue";
|
|
import shopSelActionSheetVue from "@/pageMarket/components/shop-sel-action-sheet.vue";
|
|
import dateAreaSel from "@/components/date-range-picker/date-range-picker.vue";
|
|
import fenxiaoUserListVue from "./components/fenxiao-user-list.vue";
|
|
import openListVue from "./components/open-list.vue";
|
|
import fenxiaoMingxiVue from "./components/fenxiao-mingxi.vue";
|
|
|
|
import { useDistributionStore } from "@/store/market.js";
|
|
import { reactive } from "vue";
|
|
|
|
const actions = [
|
|
{
|
|
name: "全部",
|
|
value: "",
|
|
},
|
|
{
|
|
name: "已入账",
|
|
value: "success",
|
|
},
|
|
{
|
|
name: "待入账",
|
|
value: "pending",
|
|
},
|
|
{
|
|
name: "已退款",
|
|
value: "refund",
|
|
},
|
|
];
|
|
const selActions=ref('')
|
|
const showActions = ref(false);
|
|
function handleSelect(e) {
|
|
selActions.value = e;
|
|
}
|
|
|
|
const distributionStore = useDistributionStore();
|
|
distributionStore.getConfig();
|
|
provide("distributionStore", distributionStore);
|
|
provide("distributionApi", distributionApi);
|
|
const showTimeArea = ref(false);
|
|
function confirmTimeArea(e) {
|
|
console.log(e);
|
|
userComponentQuery.startTime = e[0];
|
|
userComponentQuery.endTime = e[1];
|
|
}
|
|
const tabs = [
|
|
{
|
|
label: "基础设置",
|
|
value: "basic",
|
|
},
|
|
{
|
|
label: "分销员",
|
|
value: "user",
|
|
},
|
|
{
|
|
label: "开通记录",
|
|
value: "recoders",
|
|
},
|
|
{
|
|
label: "分销明细",
|
|
value: "details",
|
|
},
|
|
];
|
|
|
|
const keyWord = ref("");
|
|
function keyWordBlur() {
|
|
userComponentQuery.user = keyWord.value;
|
|
}
|
|
const userComponentQuery = reactive({
|
|
user: "",
|
|
startTime: "",
|
|
endTime: "",
|
|
});
|
|
|
|
const form = ref({
|
|
isEnable: 0,
|
|
});
|
|
|
|
const list = ref([]);
|
|
const pageNum = ref(1);
|
|
const isEnd = ref(false);
|
|
const selShop = ref({
|
|
shopId: "",
|
|
shopName: "",
|
|
});
|
|
const searchText = ref("");
|
|
|
|
function search() {
|
|
pageNum.value = 1;
|
|
getList();
|
|
}
|
|
|
|
function chooseShop(e) {
|
|
selShop.value = e;
|
|
}
|
|
|
|
watch(
|
|
() => selShop.value.shopId,
|
|
(newval) => {
|
|
pageNum.value = 1;
|
|
getList();
|
|
}
|
|
);
|
|
|
|
watch(
|
|
() => userComponentQuery,
|
|
(newval) => {
|
|
isEnd.value = false;
|
|
pageNum.value = 1;
|
|
|
|
getList();
|
|
},
|
|
{
|
|
deep: true,
|
|
}
|
|
);
|
|
|
|
function refresh() {
|
|
isEnd.value = false;
|
|
pageNum.value = 1;
|
|
getList();
|
|
}
|
|
|
|
const listRes = ref({});
|
|
async function getList() {
|
|
let res = null;
|
|
if (active.value == 1) {
|
|
//分销员列表
|
|
res = await distributionApi.distributionUser({
|
|
page: pageNum.value,
|
|
size: 10,
|
|
user: userComponentQuery.user,
|
|
startTime: userComponentQuery.startTime
|
|
? userComponentQuery.startTime + " 00:00:00"
|
|
: "",
|
|
endTime: userComponentQuery.endTime
|
|
? userComponentQuery.endTime + " 23:59:59"
|
|
: "",
|
|
});
|
|
}
|
|
if (active.value == 2) {
|
|
//开通记录
|
|
res = await distributionApi.openFlow({
|
|
page: pageNum.value,
|
|
size: 10,
|
|
key: userComponentQuery.user,
|
|
startTime: userComponentQuery.startTime
|
|
? userComponentQuery.startTime + " 00:00:00"
|
|
: "",
|
|
endTime: userComponentQuery.endTime
|
|
? userComponentQuery.endTime + " 23:59:59"
|
|
: "",
|
|
});
|
|
}
|
|
if (active.value == 3) {
|
|
//分销明细
|
|
res = await distributionApi.distributionFlow({
|
|
page: pageNum.value,
|
|
size: 10,
|
|
key: userComponentQuery.user,
|
|
status: selActions.value.value,
|
|
startTime: userComponentQuery.startTime
|
|
? userComponentQuery.startTime + " 00:00:00"
|
|
: "",
|
|
endTime: userComponentQuery.endTime
|
|
? userComponentQuery.endTime + " 23:59:59"
|
|
: "",
|
|
});
|
|
}
|
|
if (res) {
|
|
listRes.value = res;
|
|
if (pageNum.value == 1) {
|
|
list.value = res.records || [];
|
|
} else {
|
|
list.value = [...list.value, ...(res.records || [])];
|
|
}
|
|
isEnd.value = pageNum.value >= res.totalPage * 1 ? true : false;
|
|
console.log(isEnd.value);
|
|
}
|
|
}
|
|
|
|
// 显示选择门店弹窗
|
|
const showShopSelActionSheet = ref(false);
|
|
|
|
function showShopSelActionSheetFun() {
|
|
showShopSelActionSheet.value = true;
|
|
}
|
|
const active = ref(3);
|
|
watch(
|
|
() => active.value,
|
|
(newval) => {
|
|
console.log(newval);
|
|
pageNum.value = 1;
|
|
getList();
|
|
}
|
|
);
|
|
watch(
|
|
() => active.value,
|
|
(newval) => {
|
|
refresh();
|
|
}
|
|
);
|
|
watch(()=>selActions.value,()=>{
|
|
refresh()
|
|
})
|
|
onReachBottom(() => {
|
|
if (!isEnd.value) {
|
|
pageNum.value++;
|
|
getList();
|
|
}
|
|
});
|
|
watch(()=>distributionStore.config.isEnable,()=>{
|
|
distributionStore.editConfig()
|
|
})
|
|
onShow(() => {
|
|
pageNum.value = 1;
|
|
getList();
|
|
});
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.min-page {
|
|
background: #f7f7f7;
|
|
}
|
|
|
|
.box {
|
|
}
|
|
|
|
.top {
|
|
padding: 32rpx 24rpx;
|
|
}
|
|
|
|
.list {
|
|
padding: 0 30rpx;
|
|
|
|
.item {
|
|
padding: 32rpx 24rpx;
|
|
border-radius: 14rpx;
|
|
background-color: #fff;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
.tag {
|
|
border-radius: 12rpx;
|
|
padding: 8rpx 22rpx;
|
|
font-size: 28rpx;
|
|
|
|
&.success {
|
|
background-color: #edfff0;
|
|
color: #5bbc6d;
|
|
}
|
|
|
|
&.end {
|
|
background-color: #f7f7f7;
|
|
color: #999;
|
|
}
|
|
}
|
|
|
|
.my-btn {
|
|
font-size: 28rpx;
|
|
line-height: 36rpx;
|
|
padding: 8rpx 32rpx;
|
|
border-radius: 12rpx;
|
|
margin: 0;
|
|
}
|
|
|
|
.edit-btn {
|
|
background: #e6f0ff;
|
|
color: $my-main-color;
|
|
}
|
|
|
|
.delete-btn {
|
|
background: #ffe7e6;
|
|
color: #ff1c1c;
|
|
}
|
|
.filter-box {
|
|
display: flex;
|
|
padding: 8rpx 24rpx;
|
|
align-items: center;
|
|
border-radius: 8rpx;
|
|
border: 2rpx solid #d9d9d9;
|
|
background: #f7f7f7;
|
|
min-height: 62rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
</style>
|