123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273 |
- <template>
- <view class="shop-statistics-container">
- <JHeader title="财务数据" width="50" height="50" style="padding: 24upx 0 0;"></JHeader>
- <view>
- <view style="padding: 0 24upx;background-color: #ffffff;">
- <tui-tabs
- style="width: 702upx;padding: 0 0upx 0 0upx;overflow: hidden;" :slider-width="351" :padding="24"
- item-width="351rpx" selected-color="#000000" bold slider-bg-color="#ff0000"
- :tabs="[{ name: '日汇款' }, { name: '月汇款' }]" :current-tab="currentTab" @change="handleCurrentChange"
- ></tui-tabs>
- </view>
- <view style="margin: 10upx 0;text-align: right;">
- <tui-button
- type="blue" width="220rpx" height="60rpx" margin="0 30upx 0 0"
- style="display: inline-block;border-radius: 30rpx;" @click="$refs.dateTimeFinance.show()"
- >
- 选择日期
- </tui-button>
- <tui-datetime
- ref="dateTimeFinance" :type="3" radius
- :end-year="Number(new Date(Date.now()).toLocaleString().substring(0, 4))"
- @confirm="handleConfirmTime"
- ></tui-datetime>
- </view>
- <view
- style="width: 100%;color: #000;padding: 14upx 24upx 44upx;box-sizing: border-box;margin-top: 2upx;margin-bottom: 20upx;background-color: #ffa637;border-radius: 20upx;font-size: 28upx;"
- >
- <view style="text-align: right;">
- <tui-button
- type="primary" width="140rpx" height="60rpx" margin="0 20upx 0 0"
- style="display: inline-block;border-radius: 30rpx;" @click="isShowRechargeDialog = true"
- >
- 提现
- </tui-button>
- <tui-button
- v-if="type === 'order'" type="primary" width="140rpx" height="60rpx"
- margin="0 20upx 0 0"
- style="display: inline-block;border-radius: 30rpx;"
- @click="(isShowWithdrawalDetailsPopup = true) && $refs.refOrderWithdrawalDetails && $refs.refOrderWithdrawalDetails.getShopWithdrawalDetails()"
- >
- 明细
- </tui-button>
- <tui-button
- v-if="type === 'recharge'" type="primary" width="240rpx" height="60rpx"
- margin="0 20upx 0 0"
- style="display: inline-block;border-radius: 30rpx;"
- @click="(isShowCustomBusinessPopup = true) && $refs.refRechargeCustomBusiness && $refs.refRechargeCustomBusiness.getShopRechargeCustom()"
- >
- 客户充值统计
- </tui-button>
- </view>
- <view style="margin-top: 20upx;">
- <view style="display: flex;justify-content: space-evenly;flex-wrap: wrap;align-items: stretch;">
- <view
- style="display: flex;flex-direction: column;justify-content: space-between;width: 30%;margin-top: 10upx;padding: 18upx 6upx;color: #FFFFFF;text-align: center;border-radius: 24px;background: #ffc377;border: 2px solid #ffcc8d;"
- >
- <view>累计营业额(元)</view>
- <view style="font-size: 40upx;font-weight: bold;margin-top: 4upx;">
- {{ typeof financeStatisticsData.turnover === 'number' ? financeStatisticsData.turnover : '--' }}
- </view>
- </view>
- <view
- style="display: flex;flex-direction: column;justify-content: space-between;width: 30%;margin-top: 10upx;padding: 18upx 6upx;color: #FFFFFF;text-align: center;border-radius: 24px;background: #ffc377;border: 2px solid #ffcc8d;"
- >
- <view>冻结金额(元)</view>
- <view style="font-size: 40upx;font-weight: bold;margin-top: 4upx;">
- {{ typeof financeStatisticsData.frozenMoney === 'number' ? financeStatisticsData.frozenMoney : '--' }}
- </view>
- </view>
- <view
- style="display: flex;flex-direction: column;justify-content: space-between;width: 30%;margin-top: 10upx;padding: 18upx 6upx;color: #FFFFFF;text-align: center;border-radius: 24px;background: #ffc377;border: 2px solid #ffcc8d;"
- >
- <view>可提现金额(元)</view>
- <view style="font-size: 40upx;font-weight: bold;margin-top: 4upx;">
- {{ typeof financeStatisticsData.withdrawableMoney === 'number' ? financeStatisticsData.withdrawableMoney
- : '--' }}
- </view>
- </view>
- <view
- style="display: flex;flex-direction: column;justify-content: space-between;width: 30%;margin-top: 10upx;padding: 18upx 6upx;color: #FFFFFF;text-align: center;border-radius: 24px;background: #ffc377;border: 2px solid #ffcc8d;"
- >
- <view>提现中(元)</view>
- <view style="font-size: 40upx;font-weight: bold;margin-top: 4upx;">
- {{ typeof financeStatisticsData.withdrawableStayMoney === 'number'
- ? financeStatisticsData.withdrawableStayMoney : '--' }}
- </view>
- </view>
- <view
- style="display: flex;flex-direction: column;justify-content: space-between;width: 30%;margin-top: 10upx;padding: 18upx 6upx;color: #FFFFFF;text-align: center;border-radius: 24px;background: #ffc377;border: 2px solid #ffcc8d;"
- >
- <view>赠送代金券</view>
- <view style="font-size: 40upx;font-weight: bold;margin-top: 4upx;">
- {{ typeof financeStatisticsData.presenterVoucher === 'number' ? financeStatisticsData.presenterVoucher
- : '--' }}
- </view>
- </view>
- </view>
- </view>
- </view>
- <view style="padding: 20upx;">
- <view v-if="financeStatisticsData.finances && financeStatisticsData.finances.length">
- <tui-table>
- <tui-tr>
- <tui-td bold :span="8">日期</tui-td>
- <tui-td bold :span="8">收入(元)</tui-td>
- <tui-td bold :span="8">支出(元)</tui-td>
- </tui-tr>
- <tui-tr v-for="(item, index) in financeStatisticsData.finances" :key="index">
- <tui-td :span="8">{{ item.time }}</tui-td>
- <tui-td :span="8">{{ item.income }}</tui-td>
- <tui-td :span="8">{{ item.expenditure }}</tui-td>
- </tui-tr>
- </tui-table>
- </view>
- <view style="padding-bottom: 45upx;">
- <LoadingMore :status="isLoading ? 'loading' : ''"></LoadingMore>
- <view v-if="!isLoading && !financeStatisticsData.finances.length">
- <tui-no-data :fixed="false" style="padding-top: 60upx;">暂无具体数据</tui-no-data>
- </view>
- </view>
- </view>
- </view>
- <view v-if="type === 'order'">
- <tui-bottom-popup :show="isShowWithdrawalDetailsPopup" @close="isShowWithdrawalDetailsPopup = false">
- <view style="height: 100%;padding: 20upx;overflow-y: auto;box-sizing: border-box;">
- <OrderWithdrawalDetails ref="refOrderWithdrawalDetails"></OrderWithdrawalDetails>
- </view>
- </tui-bottom-popup>
- </view>
- <view v-else-if="type === 'recharge'">
- <tui-bottom-popup :show="isShowCustomBusinessPopup" @close="isShowCustomBusinessPopup = false">
- <view style="height: 100%;padding: 20upx;overflow-y: auto;box-sizing: border-box;">
- <RechargeCustomBusiness ref="refRechargeCustomBusiness"></RechargeCustomBusiness>
- </view>
- </tui-bottom-popup>
- </view>
- <!-- 提现相关dialog -->
- <tui-dialog
- style="position: relative;z-index: 888;" :buttons="[{ text: '取消' }, { text: '确认提现', color: '#586c94' }]"
- :show="isShowRechargeDialog" title="订单财务提现" @click="handleRechargeDialog"
- >
- <template #content>
- <view>
- <tui-input v-model="rechargeNum" padding="26upx 0" label="提现金额" type="number" placeholder="请填写提现金额"></tui-input>
- </view>
- </template>
- </tui-dialog>
- </view>
- </template>
- <script>
- import { getShopBankApi, getShopFinanceCountApi, addShopWithdrawalApi, getShopRechargeCountApi, addShopWithdrawalRechargeApi } from '../../../api/anotherTFInterface'
- import OrderWithdrawalDetails from './components/OrderWithdrawalDetails.vue'
- import RechargeCustomBusiness from './components/RechargeCustomBusiness.vue'
- export default {
- name: 'FinanceStatistics',
- components: { OrderWithdrawalDetails, RechargeCustomBusiness },
- data() {
- return {
- type: '',
- currentTab: 1,
- financeStatisticsData: {
- turnover: '',
- frozenMoney: '',
- withdrawableMoney: '',
- withdrawableStayMoney: '',
- presenterVoucher: '',
- finances: []
- },
- queryInfo: {
- condition: 2,
- time: ''
- },
- isLoading: true,
- // 下拉弹框
- isShowWithdrawalDetailsPopup: false,
- isShowCustomBusinessPopup: false,
- // 提现相关
- isShowRechargeDialog: false,
- rechargeNum: ''
- }
- },
- onLoad(options) {
- this.type = options.type || 'order'
- this.getFinanceStatistics()
- },
- methods: {
- handleCurrentChange(e) {
- this.currentTab = e.index
- this.queryInfo.condition = this.currentTab + 1
- this.queryInfo.time = ''
- this.getFinanceStatistics()
- },
- getFinanceStatistics() {
- this.isLoading = true
- let api
- if (this.type === 'order') api = getShopFinanceCountApi
- else if (this.type === 'recharge') api = getShopRechargeCountApi
- api({ ...this.queryInfo })
- .then((res) => {
- this.financeStatisticsData = res.data
- this.isLoading = false
- })
- .catch(() => {
- this.isLoading = false
- })
- },
- handleConfirmTime(e) {
- console.log(e.result)
- this.queryInfo.time = e.result
- this.getFinanceStatistics()
- },
- handleRechargeDialog(e) {
- console.log(e)
- if (e.index === 0) {
- this.rechargeNum = ''
- this.isShowRechargeDialog = false
- } else if (e.index === 1) {
- if (!this.rechargeNum) return this.$showToast('请填写提现金额')
- uni.showLoading()
- getShopBankApi({})
- .then((result) => {
- let api
- if (this.type === 'order') api = addShopWithdrawalApi
- else if (this.type === 'recharge') api = addShopWithdrawalRechargeApi
- api({
- shopName: result.data.shopName,
- shopCode: result.data.shopCode,
- bankName: result.data.bankName,
- bankCard: result.data.bankCard,
- withdrawalMoney: this.rechargeNum
- })
- .then((res) => {
- uni.hideLoading()
- this.rechargeNum = ''
- this.isShowRechargeDialog = false
- this.$showToast('提现成功', 'success')
- })
- .catch(() => {
- uni.hideLoading()
- })
- })
- .catch(() => {
- uni.hideLoading()
- })
- }
- }
- }
- }
- </script>
- <style lang="less" scoped>
- .shop-statistics-container {
- min-height: 100vh;
- width: 100%;
- background: #f6f6f6;
- box-sizing: border-box;
- .tui-tabs-view {
- /deep/ .tui-tabs-slider {
- margin-left: -24upx;
- }
- }
- /deep/ .tui-popup-class.tui-bottom-popup {
- height: 85vh !important;
- }
- }
- </style>
|