373 lines
9.2 KiB
Vue
373 lines
9.2 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/member.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="superVipStore.config.isOpen" size="18" active-value="1" inactive-value="0" :disabled="isMainShop() ? false : true"></up-switch>
|
||
</view>
|
||
</view>
|
||
<my-tabs v-model="active" :list="tabs" textKey="label"></my-tabs>
|
||
<view v-if="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 == 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.totalRow }}</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>
|
||
<vipLvList v-if="active == 1" :list="list" :isEnd="isEnd" @refresh="refresh"></vipLvList>
|
||
|
||
<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>
|
||
|
||
<my-marketing-mask name="超级会员" v-if="isMarketShow(configInfo, 'memberPriceShopIdList', 'isOpen')"></my-marketing-mask>
|
||
</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 memberApi from '@/http/api/market/member.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 vipLvList from './components/vip-lv-list.vue';
|
||
import openListVue from './components/open-list.vue';
|
||
import fenxiaoMingxiVue from './components/fenxiao-mingxi.vue';
|
||
import { isMainShop, isMarketShow } from '@/store/account';
|
||
|
||
import { useSuperVipStore } 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 superVipStore = useSuperVipStore();
|
||
superVipStore.getConfig();
|
||
provide('superVipStore', superVipStore);
|
||
provide('memberApi', memberApi);
|
||
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'
|
||
}
|
||
];
|
||
|
||
const keyWord = ref('');
|
||
function keyWordBlur() {
|
||
userComponentQuery.user = keyWord.value;
|
||
}
|
||
const userComponentQuery = reactive({
|
||
user: '',
|
||
startTime: '',
|
||
endTime: ''
|
||
});
|
||
|
||
const form = ref({
|
||
isOpen: 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 memberApi.levelList();
|
||
if (res) {
|
||
list.value = res || [];
|
||
isEnd.value = true;
|
||
superVipStore.setVipLevelList(res || []);
|
||
}
|
||
return;
|
||
}
|
||
if (active.value == 2) {
|
||
//购买会员订单记录
|
||
res = await memberApi.orderList({
|
||
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 (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 = '';
|
||
refresh();
|
||
}
|
||
);
|
||
watch(
|
||
() => selActions.value,
|
||
() => {
|
||
refresh();
|
||
}
|
||
);
|
||
onReachBottom(() => {
|
||
if (!isEnd.value) {
|
||
pageNum.value++;
|
||
getList();
|
||
}
|
||
});
|
||
watch(
|
||
() => superVipStore.config.isOpen,
|
||
() => {
|
||
superVipStore.editConfig().then((res) => {
|
||
if (res) {
|
||
uni.showToast({
|
||
title: '更新成功',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}
|
||
});
|
||
}
|
||
);
|
||
onShow(() => {
|
||
pageNum.value = 1;
|
||
getList();
|
||
});
|
||
|
||
const configInfo = ref({});
|
||
onLoad(async () => {
|
||
configInfo.value = await memberApi.getConfig();
|
||
});
|
||
</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>
|