uniapp【修复】:佣金明细,日期选择bug修复

This commit is contained in:
花城
2024-12-05 10:43:11 +08:00
parent fb2b466f6f
commit a2517f7fcc
2 changed files with 303 additions and 302 deletions

View File

@@ -1,173 +1,174 @@
<template>
<coreshop-page title="佣金明细" mode="left">
<view class="content-box">
<view class="content" :style="{'top':`${statusBarHeight}px`}">
<view class="header">
<view class="total_box">
<view class="earn">
<view>
<view class="label">总收益()</view>
<view class="value">
{{ state.showMoney ? `${state.info.totalSettlementAmount}` || '¥0.00' : '***' }}
</view>
</view>
<view class="toggle" @click="state.showMoney = !state.showMoney">
<uv-icon v-if="state.showMoney" name="eye" color="#ffffff" size="20"></uv-icon>
<uv-icon v-else name="eye-off-outline" color="#ffffff" size="20"></uv-icon>
</view>
</view>
<coreshop-page title="佣金明细" mode="left">
<view class="content-box">
<view class="content" :style="{'top':`${statusBarHeight}px`}">
<view class="header">
<view class="total_box">
<view class="earn">
<view>
<view class="label">总收益()</view>
<view class="value">
{{ state.showMoney ? `${state.info.totalSettlementAmount}` || '¥0.00' : '***' }}
</view>
</view>
<view class="toggle" @click="state.showMoney = !state.showMoney">
<uv-icon v-if="state.showMoney" name="eye" color="#ffffff" size="20"></uv-icon>
<uv-icon v-else name="eye-off-outline" color="#ffffff" size="20"></uv-icon>
</view>
</view>
<view class="withdraw"
@click="handleRouteNavigateTo(`/pages/subpackage/member/balance/withdraw/index`)">提现</view>
</view>
<view class="commission_detail">
<view class="item">
<view class="label">待入账佣金</view>
<view class="value">
{{ state.showMoney ? `${state.info.freezeAmount}` || '¥0.00' : '***' }}
</view>
</view>
<view class="item">
<view class="label">可提现金额</view>
<view class="value">{{ state.showMoney ? `${state.userInfo.balance}` || '¥0.00' : '***' }}
</view>
</view>
</view>
</view>
<view class="filter">
<view class="date" @click="onToggleVisibleCalendars()">
<uv-icon :name="state.arrowUp?'arrow-up':'arrow-down'"></uv-icon>
<view class="selected_date">{{state.selectedDate}}</view>
</view>
<view class="filter_total">收入{{state.totalMoney}}</view>
</view>
</view>
<view class="withdraw"
@click="handleRouteNavigateTo(`/pages/subpackage/member/balance/withdraw/index`)">提现</view>
</view>
<view class="commission_detail">
<view class="item">
<view class="label">待入账佣金</view>
<view class="value">
{{ state.showMoney ? `${state.info.freezeAmount}` || '¥0.00' : '***' }}
</view>
</view>
<view class="item">
<view class="label">可提现金额</view>
<view class="value">{{ state.showMoney ? `${state.userInfo.balance}` || '¥0.00' : '***' }}
</view>
</view>
</view>
</view>
<view class="filter">
<view class="date" @click="onToggleVisibleCalendars()">
<uv-icon :name="state.arrowUp?'arrow-up':'arrow-down'"></uv-icon>
<view class="selected_date">{{state.selectedDate[0]}} {{state.selectedDate[1]}}</view>
</view>
<view class="filter_total">收入{{state.totalMoney}}</view>
</view>
</view>
<view class="list" v-if="state.list.length > 0">
<view class="item" v-for="item in state.list" :key="item.id">
<view class="order-no">
<text class="label">{{ item.typeName }}</text>
<text class="value">订单编号{{item.sourceId}}</text>
</view>
<view class="price">
<text class="label">{{ item.money }}</text>
<text class="value">{{timeFormat(item.createTime, 'yyyy.mm.dd')}}</text>
</view>
</view>
<view class="no-data" v-if="state.page === state.totalPages">没有更多了</view>
</view>
<view v-else class="layout-empty-box">
<coreshop-empty :mode="EmptyEnum.data" text="暂无数据"></coreshop-empty>
</view>
</view>
<view class="list" v-if="state.list.length > 0">
<view class="item" v-for="item in state.list" :key="item.id">
<view class="order-no">
<text class="label">{{ item.typeName }}</text>
<text class="value">订单编号{{item.sourceId}}</text>
</view>
<view class="price">
<text class="label">{{ item.money }}</text>
<text class="value">{{timeFormat(item.createTime, 'yyyy.mm.dd')}}</text>
</view>
</view>
<view class="no-data" v-if="state.page === state.totalPages">没有更多了</view>
</view>
<view v-else class="layout-empty-box">
<coreshop-empty :mode="EmptyEnum.data" text="暂无数据"></coreshop-empty>
</view>
</view>
<uv-calendars ref="calendarsRef" mode="range" confirmColor="#D33123" color="#D33123" @confirm="confirmCalendars"
@close="closeCalendars" />
<uv-calendars ref="calendarsRef" mode="range" :date="state.selectedDate" confirmColor="#D33123" color="#D33123"
@confirm="confirmCalendars" @close="closeCalendars" />
</coreshop-page>
</coreshop-page>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { queryAgentInfo, queryUserBalance, queryUserInfo } from '@/core/api';
import type { Response, UserInfoType } from '@/core/models';
import { EmptyEnum } from '@/core/enum';
import { handleShowToast, handleRouteNavigateTo } from '@/core/utils';
import { timeFormat } from '@/uni_modules/uv-ui-tools/libs/function/index.js';
import { useSystemInfo } from '@/core/hooks';
import { reactive, ref } from 'vue';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { queryAgentInfo, queryUserBalance, queryUserInfo } from '@/core/api';
import type { Response, UserInfoType } from '@/core/models';
import { EmptyEnum } from '@/core/enum';
import { handleShowToast, handleRouteNavigateTo } from '@/core/utils';
import { timeFormat } from '@/uni_modules/uv-ui-tools/libs/function/index.js';
import { useSystemInfo } from '@/core/hooks';
/** 获取自定义导航栏高度 */
const { statusBarHeight } = useSystemInfo();
/** 获取自定义导航栏高度 */
const { statusBarHeight } = useSystemInfo();
const calendarsRef = ref();
const nowTimeStamp = new Date().getTime()
const state = reactive<{
selectedDate : string;
arrowUp : boolean;
showMoney : boolean;
info : any;
page : number;
totalPages : number;
list : Array<any>;
totalMoney : number;
userInfo : UserInfoType,
}>({
selectedDate: timeFormat(nowTimeStamp) + '至' + timeFormat(nowTimeStamp),
arrowUp: false,
showMoney: false,
info: {},
page: 1,
totalPages: 1,
list: [],
totalMoney: 0,
userInfo: {},
});
const calendarsRef = ref();
const nowTimeStamp = new Date().getTime();
onLoad(() => {
getUserInfo();
getAgentInfo();
getUserBalance();
});
const state = reactive<{
selectedDate : Array<string>;
arrowUp : boolean;
showMoney : boolean;
info : any;
page : number;
totalPages : number;
list : Array<any>;
totalMoney : number;
userInfo : UserInfoType,
}>({
selectedDate: [timeFormat(nowTimeStamp), timeFormat(nowTimeStamp)],
arrowUp: false,
showMoney: false,
info: {},
page: 1,
totalPages: 1,
list: [],
totalMoney: 0,
userInfo: {},
});
onReachBottom(() => {
if (state.totalPages > state.page) {
state.page++;
getUserBalance();
}
});
onLoad(() => {
getUserInfo();
getAgentInfo();
getUserBalance();
});
/** 获取用户信息 */
const getUserInfo = async () => {
const userInfo : Response<UserInfoType> = await queryUserInfo();
state.userInfo = userInfo?.data;
}
onReachBottom(() => {
if (state.totalPages > state.page) {
state.page++;
getUserBalance();
}
});
/** 获取分销商进度状态 */
const getAgentInfo = async () => {
const info : Response<any> = await queryAgentInfo();
if (info.status) {
state.info = info.data;
} else {
handleShowToast(info.msg)
}
}
/** 获取用户信息 */
const getUserInfo = async () => {
const userInfo : Response<UserInfoType> = await queryUserInfo();
state.userInfo = userInfo?.data;
}
/** 获取余额明细 */
const getUserBalance = async () => {
const balance : Response<Array<any>> = await queryUserBalance({
id: 9,
page: state.page,
limit: 10,
propsDate: state.selectedDate
})
if (balance.status) {
state.totalMoney = balance.otherData.sunMoney;
state.totalPages = balance.otherData?.totalPages;
state.list = state.list.concat(balance.data);
}
}
/** 获取分销商进度状态 */
const getAgentInfo = async () => {
const info : Response<any> = await queryAgentInfo();
if (info.status) {
state.info = info.data;
} else {
handleShowToast(info.msg)
}
}
/** 打开时间选择弹框 */
const onToggleVisibleCalendars = () => {
state.arrowUp = true;
calendarsRef.value?.open();
}
/** 获取余额明细 */
const getUserBalance = async () => {
const balance : Response<Array<any>> = await queryUserBalance({
id: 9,
page: state.page,
limit: 10,
propsDate: state.selectedDate[0] + '至' + state.selectedDate[1]
})
if (balance.status) {
state.totalMoney = balance.otherData.sunMoney;
state.totalPages = balance.otherData?.totalPages;
state.list = state.list.concat(balance.data);
}
}
/** 选择时间 */
const confirmCalendars = (e : any) => {
state.selectedDate = e.range.data[0] + '至' + e.range.data[1];
state.page = 1;
state.list = [];
getUserBalance();
}
/** 打开时间选择弹框 */
const onToggleVisibleCalendars = () => {
state.arrowUp = true;
calendarsRef.value?.open();
}
/** 关闭时间选择弹框 */
const closeCalendars = () => {
state.arrowUp = false;
}
/** 选择时间 */
const confirmCalendars = (e : any) => {
state.selectedDate = [e.range.before, e.range.after];
state.page = 1;
state.list = [];
getUserBalance();
}
/** 关闭时间选择弹框 */
const closeCalendars = () => {
state.arrowUp = false;
}
</script>
<style scoped lang="scss">
@import './index.scss';
@import './index.scss';
</style>

View File

@@ -1,174 +1,174 @@
<template>
<coreshop-page title="佣金明细" mode="left">
<view class="content-box">
<view class="content" :style="{'top':`${statusBarHeight}px`}">
<view class="header">
<view class="total_box">
<view class="earn">
<view>
<view class="label">总收益()</view>
<view class="value">
{{ state.showMoney ? `${state.info.totalSettlementAmount}` || '¥0.00' : '***' }}
</view>
</view>
<view class="toggle" @click="state.showMoney = !state.showMoney">
<uv-icon v-if="state.showMoney" name="eye" color="#ffffff" size="20"></uv-icon>
<uv-icon v-else name="eye-off-outline" color="#ffffff" size="20"></uv-icon>
</view>
</view>
<coreshop-page title="佣金明细" mode="left">
<view class="content-box">
<view class="content" :style="{'top':`${statusBarHeight}px`}">
<view class="header">
<view class="total_box">
<view class="earn">
<view>
<view class="label">总收益()</view>
<view class="value">
{{ state.showMoney ? `${state.info.totalSettlementAmount}` || '¥0.00' : '***' }}
</view>
</view>
<view class="toggle" @click="state.showMoney = !state.showMoney">
<uv-icon v-if="state.showMoney" name="eye" color="#ffffff" size="20"></uv-icon>
<uv-icon v-else name="eye-off-outline" color="#ffffff" size="20"></uv-icon>
</view>
</view>
<view class="withdraw"
@click="handleRouteNavigateTo(`/pages/subpackage/member/balance/withdraw/index`)">提现</view>
</view>
<view class="commission_detail">
<view class="item">
<view class="label">待入账佣金</view>
<view class="value">
{{ state.showMoney ? `${state.info.freezeAmount}` || '¥0.00' : '***' }}
</view>
</view>
<view class="item">
<view class="label">可提现金额</view>
<view class="value">{{ state.showMoney ? `${state.userInfo.balance}` || '¥0.00' : '***' }}
</view>
</view>
</view>
</view>
<view class="filter">
<view class="date" @click="onToggleVisibleCalendars()">
<uv-icon :name="state.arrowUp?'arrow-up':'arrow-down'"></uv-icon>
<view class="selected_date">{{state.selectedDate}}</view>
</view>
<view class="filter_total">收入{{state.totalMoney}}</view>
</view>
</view>
<view class="withdraw"
@click="handleRouteNavigateTo(`/pages/subpackage/member/balance/withdraw/index`)">提现</view>
</view>
<view class="commission_detail">
<view class="item">
<view class="label">待入账佣金</view>
<view class="value">
{{ state.showMoney ? `${state.info.freezeAmount}` || '¥0.00' : '***' }}
</view>
</view>
<view class="item">
<view class="label">可提现金额</view>
<view class="value">{{ state.showMoney ? `${state.userInfo.balance}` || '¥0.00' : '***' }}
</view>
</view>
</view>
</view>
<view class="filter">
<view class="date" @click="onToggleVisibleCalendars()">
<uv-icon :name="state.arrowUp?'arrow-up':'arrow-down'"></uv-icon>
<view class="selected_date">{{state.selectedDate[0]}} {{state.selectedDate[1]}}</view>
</view>
<view class="filter_total">收入{{state.totalMoney}}</view>
</view>
</view>
<view class="list" v-if="state.list.length > 0">
<view class="item" v-for="item in state.list" :key="item.id">
<view class="order-no">
<text class="label">{{ item.typeName }}</text>
<text class="value">订单编号{{item.sourceId}}</text>
</view>
<view class="price">
<text class="label">{{ item.money }}</text>
<text class="value">{{timeFormat(item.createTime, 'yyyy.mm.dd')}}</text>
</view>
</view>
<view class="no-data" v-if="state.page === state.totalPages">没有更多了</view>
</view>
<view v-else class="layout-empty-box">
<coreshop-empty :mode="EmptyEnum.data" text="暂无数据"></coreshop-empty>
</view>
</view>
<view class="list" v-if="state.list.length > 0">
<view class="item" v-for="item in state.list" :key="item.id">
<view class="order-no">
<text class="label">{{ item.typeName }}</text>
<text class="value">订单编号{{item.sourceId}}</text>
</view>
<view class="price">
<text class="label">{{ item.money }}</text>
<text class="value">{{timeFormat(item.createTime, 'yyyy.mm.dd')}}</text>
</view>
</view>
<view class="no-data" v-if="state.page === state.totalPages">没有更多了</view>
</view>
<view v-else class="layout-empty-box">
<coreshop-empty :mode="EmptyEnum.data" text="暂无数据"></coreshop-empty>
</view>
</view>
<uv-calendars ref="calendarsRef" mode="range" confirmColor="#D33123" color="#D33123" @confirm="confirmCalendars"
@close="closeCalendars" />
<uv-calendars ref="calendarsRef" mode="range" :date="state.selectedDate" confirmColor="#D33123" color="#D33123"
@confirm="confirmCalendars" @close="closeCalendars" />
</coreshop-page>
</coreshop-page>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { queryDistributionInfo, queryUserBalance, queryUserInfo } from '@/core/api';
import type { Response, UserInfoType } from '@/core/models';
import { EmptyEnum } from '@/core/enum';
import { handleShowToast, handleRouteNavigateTo } from '@/core/utils';
import { timeFormat } from '@/uni_modules/uv-ui-tools/libs/function/index.js';
import { useSystemInfo } from '@/core/hooks';
import { reactive, ref } from 'vue';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { queryDistributionInfo, queryUserBalance, queryUserInfo } from '@/core/api';
import type { Response, UserInfoType } from '@/core/models';
import { EmptyEnum } from '@/core/enum';
import { handleShowToast, handleRouteNavigateTo } from '@/core/utils';
import { timeFormat } from '@/uni_modules/uv-ui-tools/libs/function/index.js';
import { useSystemInfo } from '@/core/hooks';
/** 获取自定义导航栏高度 */
const { statusBarHeight } = useSystemInfo();
/** 获取自定义导航栏高度 */
const { statusBarHeight } = useSystemInfo();
const calendarsRef = ref();
const nowTimeStamp = new Date().getTime()
const calendarsRef = ref();
const nowTimeStamp = new Date().getTime()
const state = reactive<{
selectedDate : string;
arrowUp : boolean;
showMoney : boolean;
info : any;
page : number;
totalPages : number;
list : Array<any>;
totalMoney : number;
userInfo : UserInfoType,
}>({
selectedDate: timeFormat(nowTimeStamp) + '至' + timeFormat(nowTimeStamp),
arrowUp: false,
showMoney: false,
info: {},
page: 1,
totalPages: 1,
list: [],
totalMoney: 0,
userInfo: {},
});
const state = reactive<{
selectedDate : Array<string>;
arrowUp : boolean;
showMoney : boolean;
info : any;
page : number;
totalPages : number;
list : Array<any>;
totalMoney : number;
userInfo : UserInfoType,
}>({
selectedDate: [timeFormat(nowTimeStamp), timeFormat(nowTimeStamp)],
arrowUp: false,
showMoney: false,
info: {},
page: 1,
totalPages: 1,
list: [],
totalMoney: 0,
userInfo: {},
});
onLoad(() => {
getUserInfo();
getDistributionInfo();
getUserBalance();
});
onLoad(() => {
getUserInfo();
getDistributionInfo();
getUserBalance();
});
onReachBottom(() => {
if (state.totalPages > state.page) {
state.page++;
getUserBalance();
}
});
onReachBottom(() => {
if (state.totalPages > state.page) {
state.page++;
getUserBalance();
}
});
/** 获取用户信息 */
const getUserInfo = async () => {
const userInfo : Response<UserInfoType> = await queryUserInfo();
state.userInfo = userInfo?.data;
}
/** 获取用户信息 */
const getUserInfo = async () => {
const userInfo : Response<UserInfoType> = await queryUserInfo();
state.userInfo = userInfo?.data;
}
/** 获取分销商进度状态 */
const getDistributionInfo = async () => {
const info : Response<any> = await queryDistributionInfo();
if (info.status) {
state.info = info.data;
} else {
handleShowToast(info.msg)
}
}
/** 获取分销商进度状态 */
const getDistributionInfo = async () => {
const info : Response<any> = await queryDistributionInfo();
if (info.status) {
state.info = info.data;
} else {
handleShowToast(info.msg)
}
}
/** 获取余额明细 */
const getUserBalance = async () => {
const balance : Response<Array<any>> = await queryUserBalance({
id: 5,
page: state.page,
limit: 10,
propsDate: state.selectedDate
})
if (balance.status) {
state.totalMoney = balance.otherData.sunMoney;
state.totalPages = balance.otherData?.totalPages;
state.list = state.list.concat(balance.data);
}
}
/** 获取余额明细 */
const getUserBalance = async () => {
const balance : Response<Array<any>> = await queryUserBalance({
id: 5,
page: state.page,
limit: 10,
propsDate: state.selectedDate[0] + '至' + state.selectedDate[1]
})
if (balance.status) {
state.totalMoney = balance.otherData.sunMoney;
state.totalPages = balance.otherData?.totalPages;
state.list = state.list.concat(balance.data);
}
}
/** 打开时间选择弹框 */
const onToggleVisibleCalendars = () => {
state.arrowUp = true;
calendarsRef.value?.open();
}
/** 打开时间选择弹框 */
const onToggleVisibleCalendars = () => {
state.arrowUp = true;
calendarsRef.value?.open();
}
/** 选择时间 */
const confirmCalendars = (e : any) => {
state.selectedDate = e.range.data[0] + '至' + e.range.data[1];
state.page = 1;
state.list = [];
getUserBalance();
}
/** 选择时间 */
const confirmCalendars = (e : any) => {
state.selectedDate = [e.range.before, e.range.after];
state.page = 1;
state.list = [];
getUserBalance();
}
/** 关闭时间选择弹框 */
const closeCalendars = () => {
state.arrowUp = false;
}
/** 关闭时间选择弹框 */
const closeCalendars = () => {
state.arrowUp = false;
}
</script>
<style scoped lang="scss">
@import './index.scss';
@import './index.scss';
</style>