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

View File

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