|
|
@@ -1,181 +1,287 @@
|
|
|
+<!--
|
|
|
+ 客户充值本金余额变动明细
|
|
|
+ 用途：客户详情进入；读 xhBalancePayChange；排版对齐 ghsApp 账单式列表
|
|
|
+-->
|
|
|
<template>
|
|
|
- <view class="app-content">
|
|
|
- <block v-if="!$util.isEmpty(list.data)">
|
|
|
- <view class="balance-table">
|
|
|
- <view class="table-header table-row">
|
|
|
- <view class="table-cell cell-date">日期</view>
|
|
|
- <view class="table-cell cell-event">事项</view>
|
|
|
- <view class="table-cell cell-staff">操作</view>
|
|
|
- <view class="table-cell cell-amount">变动</view>
|
|
|
- <view class="table-cell cell-balance">余额</view>
|
|
|
- </view>
|
|
|
- <view v-for="(item, index) in list.data" :key="index" class="table-body">
|
|
|
- <view class="table-row table-row-data" @click="goDetail(item)">
|
|
|
- <view class="table-cell cell-date">{{ item.addTime.substr(5,11) }}</view>
|
|
|
- <view class="table-cell cell-event">{{ item.event }}</view>
|
|
|
- <view class="table-cell cell-staff">{{ item.staffName }}</view>
|
|
|
- <view class="table-cell cell-amount">{{ item.amount }}</view>
|
|
|
- <view class="table-cell cell-balance">{{ parseFloat(item.balance) }}</view>
|
|
|
- </view>
|
|
|
- <view class="table-row table-row-extra" v-if="Number(item.settleId)>0 || !$util.isEmpty(item.remark) || Number(item.refundOrderId)>0">
|
|
|
- <view class="table-cell cell-extra" :colspan="5">
|
|
|
- <view v-if="Number(item.settleId)>0" @click.stop="goSettle(item)">结账单 {{item.settleNo}} {{item.settleAmount?parseFloat(item.settleAmount):0}}元</view>
|
|
|
-
|
|
|
- <view v-if="Number(item.settleAmount)>0 && Number(item.becomeBalance)>0">余额 {{item.becomeBalance}}元</view>
|
|
|
-
|
|
|
- <view v-if="Number(item.refundOrderId)>0" @click.stop="goRefundOrder(item)">订单 {{ item.refundOrderSn }}</view>
|
|
|
-
|
|
|
- <view v-if="!$util.isEmpty(item.remark)">{{ item.remark }}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </block>
|
|
|
- <block v-else>
|
|
|
- <AppWrapperEmpty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
|
|
|
- </block>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- <script>
|
|
|
- import AppWrapperEmpty from "@/components/app-wrapper-empty";
|
|
|
- import { getBalancePayChangeList } from '@/api/custom'
|
|
|
- import list from '@/mixins/list'
|
|
|
- export default {
|
|
|
- name: "balanceChange",
|
|
|
- components: {
|
|
|
- AppWrapperEmpty
|
|
|
- },
|
|
|
- mixins:[list],
|
|
|
- data() {
|
|
|
- return {
|
|
|
- };
|
|
|
- },
|
|
|
- methods: {
|
|
|
- goRefundOrder(item){
|
|
|
- this.$util.pageTo({ url: '/admin/order/detail?id='+item.refundOrderId})
|
|
|
- },
|
|
|
- goSettle(item){
|
|
|
- this.$util.pageTo({url:'/admin/settle/detail?id='+item.settleId})
|
|
|
- },
|
|
|
- goDetail(item){
|
|
|
- if(item.capitalType == 0){
|
|
|
- //订单详情
|
|
|
- this.$util.pageTo({url: '/admin/order/detail?id='+item.relateId})
|
|
|
- }
|
|
|
- if(item.capitalType == 59){
|
|
|
- //售后单
|
|
|
- this.$util.pageTo({url: '/admin/order/refundDetail?id='+item.relateId})
|
|
|
- }
|
|
|
- },
|
|
|
- async init(){
|
|
|
- let id = this.option.id ? this.option.id : 0
|
|
|
- const res = await getBalancePayChangeList({ page:this.list.page,customId:id })
|
|
|
- if (this.$util.isEmpty(res.data.list)){
|
|
|
- this.completes(res)
|
|
|
- return
|
|
|
- }
|
|
|
- let currentList = res.data.list
|
|
|
-
|
|
|
- currentList.forEach(function(item,index,array){
|
|
|
- array[index].amount = item.io == 0 ? '-'+parseFloat(item.amount) : '+'+parseFloat(item.amount)
|
|
|
- });
|
|
|
-
|
|
|
- res.data.list = currentList
|
|
|
- this.completes(res)
|
|
|
- }
|
|
|
- },
|
|
|
- async onPullDownRefresh() {
|
|
|
- this.resetList();
|
|
|
- await this.init()
|
|
|
- uni.stopPullDownRefresh();
|
|
|
- },
|
|
|
- async onReachBottom() {
|
|
|
- if (!this.list.finished) {
|
|
|
- await this.init()
|
|
|
- uni.stopPullDownRefresh();;
|
|
|
- } else {
|
|
|
- uni.stopPullDownRefresh();
|
|
|
- }
|
|
|
- }
|
|
|
- };
|
|
|
- </script>
|
|
|
- <style lang="scss" scoped>
|
|
|
- .balance-table {
|
|
|
- width: 100%;
|
|
|
- border-radius: 16upx;
|
|
|
- overflow: hidden;
|
|
|
- background: #fff;
|
|
|
- box-shadow: 0 4upx 24upx rgba(0,0,0,0.06);
|
|
|
- margin: 20upx 0;
|
|
|
- .table-row {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- min-height: 72upx;
|
|
|
- border-bottom: 1px solid #f0f0f0;
|
|
|
- &.table-header {
|
|
|
- background: #f5f7fa;
|
|
|
- font-weight: bold;
|
|
|
- font-size: 30upx;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
- &.table-row-data {
|
|
|
- font-size: 26upx;
|
|
|
- color: #222;
|
|
|
- transition: background 0.2s;
|
|
|
- cursor: pointer;
|
|
|
- &:hover {
|
|
|
- background: #f0f9ff;
|
|
|
- }
|
|
|
- }
|
|
|
- &.table-row-remark {
|
|
|
- background: #fafbfc;
|
|
|
- color: #989494;
|
|
|
- font-size: 24upx;
|
|
|
- .cell-remark {
|
|
|
- padding: 16upx 20upx;
|
|
|
- }
|
|
|
- }
|
|
|
- &.table-row-extra {
|
|
|
- background: #f8f8f8;
|
|
|
- color: #989494;
|
|
|
- font-size: 24upx;
|
|
|
- .cell-extra {
|
|
|
- padding: 16upx 20upx;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 2upx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .table-cell {
|
|
|
- flex: 1;
|
|
|
- padding: 18upx 8upx 18upx 8upx;
|
|
|
- &.cell-date {
|
|
|
- text-align: center;
|
|
|
- min-width: 100upx;
|
|
|
- flex: 1.2;
|
|
|
- }
|
|
|
- &.cell-staff {
|
|
|
- text-align: center;
|
|
|
- min-width: 60upx;
|
|
|
- flex: 0.8;
|
|
|
- }
|
|
|
- &.cell-event {
|
|
|
- text-align: left;
|
|
|
- min-width: 200upx;
|
|
|
- flex: 2.2;
|
|
|
- }
|
|
|
- &.cell-amount {
|
|
|
- text-align: right;
|
|
|
- min-width: 100upx;
|
|
|
- flex: 1;
|
|
|
- }
|
|
|
- &.cell-balance {
|
|
|
- text-align: right;
|
|
|
- min-width: 100upx;
|
|
|
- padding-right: 32upx;
|
|
|
- flex: 1;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- </style>
|
|
|
+ <view class="bc-page">
|
|
|
+ <view v-if="hasList" class="bc-sheet">
|
|
|
+ <view
|
|
|
+ v-for="(item, index) in list.data"
|
|
|
+ :key="index"
|
|
|
+ class="bc-item"
|
|
|
+ @click="goDetail(item)"
|
|
|
+ >
|
|
|
+ <view class="bc-main">
|
|
|
+ <text class="bc-event">{{ item.event }}</text>
|
|
|
+ <text class="bc-amount" :class="item.amountClassName">{{ item.amount }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="bc-sub">
|
|
|
+ <view class="bc-sub-left">
|
|
|
+ <text class="bc-time">{{ item.dateText }} {{ item.timeLine }}</text>
|
|
|
+ <text v-if="item.showStaff" class="bc-staff">{{ item.staffName }}</text>
|
|
|
+ </view>
|
|
|
+ <text class="bc-balance">余额 {{ item.balanceText }}</text>
|
|
|
+ </view>
|
|
|
+ <text v-if="item.showRemark" class="bc-remark">{{ item.remark }}</text>
|
|
|
+ <view v-if="item.showExtraRow" class="bc-extra" @click.stop>
|
|
|
+ <text
|
|
|
+ v-if="item.showSettleLink"
|
|
|
+ class="bc-tag"
|
|
|
+ @click.stop="goSettle(item)"
|
|
|
+ >{{ item.settleLinkText }}</text>
|
|
|
+ <text
|
|
|
+ v-if="item.showBecomeBalance"
|
|
|
+ class="bc-tag bc-tag--muted"
|
|
|
+ >{{ item.becomeBalanceText }}</text>
|
|
|
+ <text
|
|
|
+ v-if="item.showRefundLink"
|
|
|
+ class="bc-tag"
|
|
|
+ @click.stop="goRefundOrder(item)"
|
|
|
+ >{{ item.refundLinkText }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <AppWrapperEmpty v-else title="暂无数据" :is-empty="listEmpty" />
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+/**
|
|
|
+ * hdApp 充值余额变动：读 xhBalancePayChange；账单式排版对齐 ghs balanceChange
|
|
|
+ */
|
|
|
+import AppWrapperEmpty from '@/components/app-wrapper-empty'
|
|
|
+import { getBalancePayChangeList } from '@/api/custom'
|
|
|
+import list from '@/mixins/list'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'balancePayChange',
|
|
|
+ components: {
|
|
|
+ AppWrapperEmpty
|
|
|
+ },
|
|
|
+ mixins: [list],
|
|
|
+ computed: {
|
|
|
+ hasList() {
|
|
|
+ return this.list.data && this.list.data.length > 0
|
|
|
+ },
|
|
|
+ listEmpty() {
|
|
|
+ return !this.hasList
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ formatMoney(val) {
|
|
|
+ const n = parseFloat(val)
|
|
|
+ return isNaN(n) ? '0' : String(n)
|
|
|
+ },
|
|
|
+ hasText(val) {
|
|
|
+ return val !== undefined && val !== null && String(val).trim() !== ''
|
|
|
+ },
|
|
|
+ /** 列表行展示字段：金额颜色、时间、结账/售后外链 */
|
|
|
+ mapListItem(item, amountDisplay) {
|
|
|
+ const row = Object.assign({}, item)
|
|
|
+ row.amount = amountDisplay
|
|
|
+ const text = String(amountDisplay || '')
|
|
|
+ row.amountClassName = (text.indexOf('+') === 0 || Number(row.io) === 1) ? 'bc-amount--in' : 'bc-amount--out'
|
|
|
+ const addTime = row.addTime || ''
|
|
|
+ if (addTime.length >= 16) {
|
|
|
+ row.dateText = addTime.substr(5, 5)
|
|
|
+ row.timeLine = addTime.substr(11, 5)
|
|
|
+ } else if (addTime.length >= 11) {
|
|
|
+ row.dateText = addTime.substr(0, 10)
|
|
|
+ row.timeLine = addTime.substr(11)
|
|
|
+ } else {
|
|
|
+ row.dateText = addTime
|
|
|
+ row.timeLine = ''
|
|
|
+ }
|
|
|
+ row.balanceText = this.formatMoney(row.balance)
|
|
|
+ row.showSettleLink = Number(row.settleId) > 0
|
|
|
+ row.settleLinkText = '结账单 ' + (row.settleNo || '') + ' · ' + this.formatMoney(row.settleAmount) + '元'
|
|
|
+ row.showBecomeBalance = Number(row.settleAmount) > 0 && Number(row.becomeBalance) > 0
|
|
|
+ row.becomeBalanceText = '余额 ' + this.formatMoney(row.becomeBalance) + '元'
|
|
|
+ row.showRefundLink = Number(row.refundOrderId) > 0
|
|
|
+ row.refundLinkText = '订单 ' + (row.refundOrderSn || '')
|
|
|
+ row.showStaff = this.hasText(row.staffName)
|
|
|
+ row.showRemark = this.hasText(row.remark)
|
|
|
+ row.showExtraRow = row.showSettleLink || row.showBecomeBalance || row.showRefundLink
|
|
|
+ return row
|
|
|
+ },
|
|
|
+ async init() {
|
|
|
+ const id = this.option.id ? this.option.id : 0
|
|
|
+ const res = await getBalancePayChangeList({ page: this.list.page, customId: id })
|
|
|
+ if (this.$util.isEmpty(res.data.list)) {
|
|
|
+ this.completes(res)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const rows = []
|
|
|
+ res.data.list.forEach((item) => {
|
|
|
+ const amountDisplay = item.io == 0 ? '-' + parseFloat(item.amount) : '+' + parseFloat(item.amount)
|
|
|
+ rows.push(this.mapListItem(item, amountDisplay))
|
|
|
+ })
|
|
|
+ res.data.list = rows
|
|
|
+ this.completes(res)
|
|
|
+ },
|
|
|
+ goRefundOrder(item) {
|
|
|
+ this.$util.pageTo({ url: '/admin/order/detail?id=' + item.refundOrderId })
|
|
|
+ },
|
|
|
+ goSettle(item) {
|
|
|
+ this.$util.pageTo({ url: '/admin/settle/detail?id=' + item.settleId })
|
|
|
+ },
|
|
|
+ goDetail(item) {
|
|
|
+ if (item.capitalType == 0) {
|
|
|
+ this.$util.pageTo({ url: '/admin/order/detail?id=' + item.relateId })
|
|
|
+ }
|
|
|
+ if (item.capitalType == 59) {
|
|
|
+ this.$util.pageTo({ url: '/admin/order/refundDetail?id=' + item.relateId })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async onPullDownRefresh() {
|
|
|
+ this.resetList()
|
|
|
+ await this.init()
|
|
|
+ uni.stopPullDownRefresh()
|
|
|
+ },
|
|
|
+ async onReachBottom() {
|
|
|
+ if (!this.list.finished) {
|
|
|
+ await this.init()
|
|
|
+ }
|
|
|
+ uni.stopPullDownRefresh()
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.bc-page {
|
|
|
+ min-height: 100vh;
|
|
|
+ background: #fff;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.bc-sheet {
|
|
|
+ width: 100%;
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.bc-item {
|
|
|
+ padding: 28upx 28upx 24upx;
|
|
|
+ border-bottom: 1upx solid #f0f1f3;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.bc-item:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+}
|
|
|
+
|
|
|
+.bc-item:active {
|
|
|
+ background: #f7f8fa;
|
|
|
+}
|
|
|
+
|
|
|
+.bc-main {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: flex-start;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+.bc-event {
|
|
|
+ flex: 1;
|
|
|
+ min-width: 0;
|
|
|
+ margin-right: 24upx;
|
|
|
+ font-size: 30upx;
|
|
|
+ color: #1a1a1a;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 1.4;
|
|
|
+ word-break: break-all;
|
|
|
+}
|
|
|
+
|
|
|
+.bc-amount {
|
|
|
+ flex-shrink: 0;
|
|
|
+ font-size: 32upx;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 1.3;
|
|
|
+ font-variant-numeric: tabular-nums;
|
|
|
+}
|
|
|
+
|
|
|
+.bc-amount--in {
|
|
|
+ color: #07a84c;
|
|
|
+}
|
|
|
+
|
|
|
+.bc-amount--out {
|
|
|
+ color: #e62e45;
|
|
|
+}
|
|
|
+
|
|
|
+.bc-sub {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 10upx;
|
|
|
+}
|
|
|
+
|
|
|
+.bc-sub-left {
|
|
|
+ flex: 1;
|
|
|
+ min-width: 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ margin-right: 16upx;
|
|
|
+}
|
|
|
+
|
|
|
+.bc-time {
|
|
|
+ flex-shrink: 0;
|
|
|
+ font-size: 28upx;
|
|
|
+ color: #999;
|
|
|
+ line-height: 1.4;
|
|
|
+}
|
|
|
+
|
|
|
+.bc-staff {
|
|
|
+ flex: 1;
|
|
|
+ min-width: 0;
|
|
|
+ margin-left: 12upx;
|
|
|
+ font-size: 28upx;
|
|
|
+ color: #999;
|
|
|
+ line-height: 1.4;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+}
|
|
|
+
|
|
|
+.bc-balance {
|
|
|
+ flex-shrink: 0;
|
|
|
+ font-size: 28upx;
|
|
|
+ color: #999;
|
|
|
+ line-height: 1.4;
|
|
|
+ font-variant-numeric: tabular-nums;
|
|
|
+}
|
|
|
+
|
|
|
+.bc-remark {
|
|
|
+ display: block;
|
|
|
+ margin-top: 8upx;
|
|
|
+ font-size: 22upx;
|
|
|
+ color: #b3b3b3;
|
|
|
+ line-height: 1.4;
|
|
|
+ word-break: break-all;
|
|
|
+}
|
|
|
+
|
|
|
+.bc-extra {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ margin-top: 16upx;
|
|
|
+}
|
|
|
+
|
|
|
+.bc-tag {
|
|
|
+ max-width: 100%;
|
|
|
+ padding: 6upx 14upx;
|
|
|
+ margin-right: 12upx;
|
|
|
+ margin-bottom: 8upx;
|
|
|
+ font-size: 28upx;
|
|
|
+ line-height: 1.4;
|
|
|
+ color: #5b8def;
|
|
|
+ background: #eef4ff;
|
|
|
+ border-radius: 8upx;
|
|
|
+ word-break: break-all;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.bc-tag--muted {
|
|
|
+ color: #969aa0;
|
|
|
+ background: #f3f4f6;
|
|
|
+}
|
|
|
+</style>
|
