515 lines
13 KiB
Vue
515 lines
13 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"
|
||
/>
|
||
<up-icon v-if="keyWord" name="close" size="14" @click="clearKeyWord"></up-icon>
|
||
</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>
|
||
<view @click.stop="clearTime">
|
||
<up-icon name="close" size="14"></up-icon>
|
||
</view>
|
||
</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>
|
||
<view @click.stop="clearTime">
|
||
<up-icon name="close" size="14"></up-icon>
|
||
</view>
|
||
</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",
|
||
},
|
||
];
|
||
function clearKeyWord() {
|
||
keyWord.value = "";
|
||
userComponentQuery.user = "";
|
||
}
|
||
function clearTime() {
|
||
userComponentQuery.startTime = "";
|
||
userComponentQuery.endTime = "";
|
||
}
|
||
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(0);
|
||
watch(
|
||
() => active.value,
|
||
(newval) => {
|
||
userComponentQuery.startTime = "";
|
||
userComponentQuery.endTime = "";
|
||
keyWord.value = "";
|
||
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>
|