|
|
@@ -1,101 +1,130 @@
|
|
|
<template>
|
|
|
- <view class="balance-change-page">
|
|
|
- <block v-if="list.data && list.data.length">
|
|
|
- <view
|
|
|
- v-for="(item, index) in list.data"
|
|
|
- :key="index"
|
|
|
- class="balance-card"
|
|
|
- @click="goDetail(item)"
|
|
|
- >
|
|
|
- <view class="balance-card__head">
|
|
|
- <text class="balance-card__time">{{ item.timeText }}</text>
|
|
|
- <view class="balance-card__amounts">
|
|
|
- <text class="balance-card__change" :class="item.amountClassName">{{ item.amount }}</text>
|
|
|
- <text class="balance-card__balance">余 {{ item.balanceText }}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="balance-card__event">{{ item.event }}</view>
|
|
|
- <view class="balance-card__meta" v-if="item.staffName">
|
|
|
- <text class="balance-card__staff">{{ item.staffName }}</text>
|
|
|
- </view>
|
|
|
- <view class="balance-card__extras" v-if="item.hasExtra" @click.stop>
|
|
|
- <view
|
|
|
- v-if="item.showSettle"
|
|
|
- class="balance-card__tag balance-card__tag--link"
|
|
|
- @click.stop="goSettle(item)"
|
|
|
- >
|
|
|
- 结账单 {{ item.settleNo || '' }} · {{ item.settleAmountText }}元
|
|
|
- </view>
|
|
|
- <view
|
|
|
- v-if="item.showBecomeBalance"
|
|
|
- class="balance-card__tag balance-card__tag--hint"
|
|
|
- >
|
|
|
- 剩余可用 {{ item.becomeBalanceText }}元
|
|
|
- </view>
|
|
|
+ <view class="bc-page">
|
|
|
+ <view v-if="hasList" class="bc-sheet">
|
|
|
+ <view class="bc-head">
|
|
|
+ <text class="bc-th bc-th--time">时间</text>
|
|
|
+ <text class="bc-th bc-th--event">事项</text>
|
|
|
+ <text class="bc-th bc-th--amt">变动</text>
|
|
|
+ <text class="bc-th bc-th--bal">余额</text>
|
|
|
+ </view>
|
|
|
+ <view class="bc-body">
|
|
|
+ <view
|
|
|
+ v-for="(item, index) in list.data"
|
|
|
+ :key="index"
|
|
|
+ class="bc-item"
|
|
|
+ :class="{ 'bc-item--alt': index % 2 === 1 }"
|
|
|
+ >
|
|
|
<view
|
|
|
- v-if="item.showShOrder"
|
|
|
- class="balance-card__tag balance-card__tag--link"
|
|
|
- @click.stop="goShPayOrder(item)"
|
|
|
+ class="bc-row-main"
|
|
|
+ :class="{ 'bc-row-main--with-extra': item.showExtraRow }"
|
|
|
+ @click="goDetail(item)"
|
|
|
>
|
|
|
- 红冲单 {{ item.shOrderSn }}
|
|
|
+ <view class="bc-td bc-td--time">
|
|
|
+ <text class="bc-time">{{ item.timeText }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="bc-td bc-td--event">
|
|
|
+ <text class="bc-event">{{ item.event }}</text>
|
|
|
+ <text v-if="item.showStaff" class="bc-meta">{{ item.staffName }}</text>
|
|
|
+ <text v-if="item.showRemark" class="bc-meta bc-meta--remark">{{ item.remark }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="bc-td bc-td--amt">
|
|
|
+ <text class="bc-amount" :class="item.amountClassName">{{ item.amount }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="bc-td bc-td--bal">
|
|
|
+ <text class="bc-balance">{{ item.balanceText }}</text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view
|
|
|
- v-if="item.showRefundOrder"
|
|
|
- class="balance-card__tag balance-card__tag--link"
|
|
|
- @click.stop="goRefundOrder(item)"
|
|
|
- >
|
|
|
- 订单 {{ item.refundOrderSn }}
|
|
|
+ <view v-if="item.showExtraRow" class="bc-row-extra" @click.stop>
|
|
|
+ <view class="bc-tags-row">
|
|
|
+ <text
|
|
|
+ v-if="item.showSettleLink"
|
|
|
+ class="bc-tag bc-tag--link"
|
|
|
+ @click.stop="goSettle(item)"
|
|
|
+ >{{ item.settleLinkText }}</text>
|
|
|
+ <text
|
|
|
+ v-if="item.showBecomeBalance"
|
|
|
+ class="bc-tag bc-tag--muted"
|
|
|
+ >{{ item.becomeHintText }}</text>
|
|
|
+ <text
|
|
|
+ v-if="item.showShOrderLink"
|
|
|
+ class="bc-tag bc-tag--link"
|
|
|
+ @click.stop="goShPayOrder(item)"
|
|
|
+ >{{ item.shOrderLinkText }}</text>
|
|
|
+ <text
|
|
|
+ v-if="item.showRefundLink"
|
|
|
+ class="bc-tag bc-tag--link"
|
|
|
+ @click.stop="goRefundOrder(item)"
|
|
|
+ >{{ item.refundLinkText }}</text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="balance-card__remark" v-if="item.showRemark">{{ item.remark }}</view>
|
|
|
</view>
|
|
|
- </block>
|
|
|
- <block v-else>
|
|
|
- <AppWrapperEmpty title="暂无数据" :is-empty="listEmpty" />
|
|
|
- </block>
|
|
|
+ </view>
|
|
|
+ <AppWrapperEmpty v-else title="暂无数据" :is-empty="listEmpty" />
|
|
|
</view>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import AppWrapperEmpty from "@/components/app-wrapper-empty";
|
|
|
+import AppWrapperEmpty from '@/components/app-wrapper-empty'
|
|
|
import { getBalanceChangeList } from '@/api/custom'
|
|
|
import list from '@/mixins/list'
|
|
|
+
|
|
|
export default {
|
|
|
- name: "balanceChange",
|
|
|
+ name: 'balanceChange',
|
|
|
components: {
|
|
|
AppWrapperEmpty
|
|
|
},
|
|
|
mixins: [list],
|
|
|
- data() {
|
|
|
- return {};
|
|
|
- },
|
|
|
computed: {
|
|
|
+ hasList() {
|
|
|
+ return this.list.data && this.list.data.length > 0
|
|
|
+ },
|
|
|
listEmpty() {
|
|
|
- return !this.list.data || !this.list.data.length
|
|
|
+ return !this.hasList
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
formatMoney(val) {
|
|
|
const n = parseFloat(val)
|
|
|
- return isNaN(n) ? '0' : n
|
|
|
+ return isNaN(n) ? '0' : String(n)
|
|
|
},
|
|
|
hasText(val) {
|
|
|
return val !== undefined && val !== null && String(val).trim() !== ''
|
|
|
},
|
|
|
- normalizeListItem(item) {
|
|
|
- const text = String(item.amount || '')
|
|
|
- item.amountClassName = (text.indexOf('+') === 0 || Number(item.io) === 1) ? 'is-income' : 'is-expense'
|
|
|
- const addTime = item.addTime || ''
|
|
|
- item.timeText = addTime.length >= 16 ? addTime.substr(5, 11) : addTime
|
|
|
- item.balanceText = this.formatMoney(item.balance)
|
|
|
- item.settleAmountText = this.formatMoney(item.settleAmount)
|
|
|
- item.becomeBalanceText = this.formatMoney(item.becomeBalance)
|
|
|
- item.showSettle = Number(item.settleId) > 0
|
|
|
- item.showBecomeBalance = Number(item.settleAmount) > 0 && Number(item.becomeBalance) > 0
|
|
|
- item.showShOrder = Number(item.shOrderId) > 0
|
|
|
- item.showRefundOrder = Number(item.refundOrderId) > 0
|
|
|
- item.showRemark = this.hasText(item.remark)
|
|
|
- item.hasExtra = item.showSettle || item.showBecomeBalance || item.showShOrder || item.showRefundOrder
|
|
|
- return item
|
|
|
+ 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 || ''
|
|
|
+ row.timeText = addTime.length >= 16 ? addTime.substr(5, 11) : addTime
|
|
|
+ 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.becomeHintText = '剩余可用 ' + this.formatMoney(row.becomeBalance) + '元'
|
|
|
+ row.showShOrderLink = Number(row.shOrderId) > 0
|
|
|
+ row.shOrderLinkText = '红冲单 ' + (row.shOrderSn || '')
|
|
|
+ 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.showShOrderLink || row.showRefundLink
|
|
|
+ return row
|
|
|
+ },
|
|
|
+ async init() {
|
|
|
+ const id = this.option.id ? this.option.id : 0
|
|
|
+ const res = await getBalanceChangeList({ 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 })
|
|
|
@@ -113,21 +142,6 @@ export default {
|
|
|
if (item.capitalType == 59) {
|
|
|
this.$util.pageTo({ url: '/admin/order/refundDetail?id=' + item.relateId })
|
|
|
}
|
|
|
- },
|
|
|
- async init() {
|
|
|
- const id = this.option.id ? this.option.id : 0
|
|
|
- const res = await getBalanceChangeList({ page: this.list.page, customId: id })
|
|
|
- if (this.$util.isEmpty(res.data.list)) {
|
|
|
- this.completes(res)
|
|
|
- return
|
|
|
- }
|
|
|
- const currentList = res.data.list
|
|
|
- currentList.forEach((item, index, array) => {
|
|
|
- array[index].amount = item.io == 0 ? '-' + parseFloat(item.amount) : '+' + parseFloat(item.amount)
|
|
|
- array[index] = this.normalizeListItem(array[index])
|
|
|
- })
|
|
|
- res.data.list = currentList
|
|
|
- this.completes(res)
|
|
|
}
|
|
|
},
|
|
|
async onPullDownRefresh() {
|
|
|
@@ -138,117 +152,215 @@ export default {
|
|
|
async onReachBottom() {
|
|
|
if (!this.list.finished) {
|
|
|
await this.init()
|
|
|
- uni.stopPullDownRefresh()
|
|
|
- } else {
|
|
|
- uni.stopPullDownRefresh()
|
|
|
}
|
|
|
+ uni.stopPullDownRefresh()
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
-.balance-change-page {
|
|
|
+.bc-page {
|
|
|
min-height: 100vh;
|
|
|
- padding: 24upx;
|
|
|
- background: #f5f6f8;
|
|
|
+ background: #fff;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
-.balance-card {
|
|
|
+.bc-sheet {
|
|
|
+ width: 100%;
|
|
|
background: #fff;
|
|
|
- border-radius: 16upx;
|
|
|
- padding: 28upx 24upx;
|
|
|
- margin-bottom: 20upx;
|
|
|
- box-shadow: 0 2upx 16upx rgba(0, 0, 0, 0.04);
|
|
|
}
|
|
|
|
|
|
-.balance-card__head {
|
|
|
+.bc-head {
|
|
|
display: flex;
|
|
|
- align-items: flex-start;
|
|
|
- justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 22upx 0;
|
|
|
+ background: #f8f9fb;
|
|
|
+ border-bottom: 1upx solid #eceef2;
|
|
|
}
|
|
|
|
|
|
-.balance-card__time {
|
|
|
+.bc-th {
|
|
|
font-size: 24upx;
|
|
|
- color: #999;
|
|
|
- line-height: 1.4;
|
|
|
+ color: #8c8c8c;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 1.2;
|
|
|
+}
|
|
|
+
|
|
|
+.bc-th--time {
|
|
|
+ width: 132upx;
|
|
|
flex-shrink: 0;
|
|
|
+ padding-left: 8upx;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.bc-th--event {
|
|
|
+ flex: 1;
|
|
|
+ min-width: 0;
|
|
|
+ padding-right: 12upx;
|
|
|
+}
|
|
|
+
|
|
|
+.bc-th--amt {
|
|
|
+ width: 108upx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ text-align: right;
|
|
|
+}
|
|
|
+
|
|
|
+.bc-th--bal {
|
|
|
+ width: 96upx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ padding-right: 8upx;
|
|
|
+ text-align: right;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
-.balance-card__amounts {
|
|
|
+.bc-item {
|
|
|
+ border-bottom: 1upx solid #f2f3f5;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.bc-item:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+}
|
|
|
+
|
|
|
+.bc-item--alt {
|
|
|
+ background: #fafbfc;
|
|
|
+}
|
|
|
+
|
|
|
+.bc-row-main {
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: flex-end;
|
|
|
- margin-left: 20upx;
|
|
|
+ align-items: flex-start;
|
|
|
+ padding: 24upx 0;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
-.balance-card__change {
|
|
|
- font-size: 32upx;
|
|
|
- font-weight: 600;
|
|
|
- line-height: 1.3;
|
|
|
+.bc-row-main--with-extra {
|
|
|
+ padding-bottom: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.bc-item:active .bc-row-main,
|
|
|
+.bc-item:active .bc-row-extra {
|
|
|
+ background: #f0f4ff;
|
|
|
}
|
|
|
|
|
|
-.balance-card__change.is-income {
|
|
|
- color: #07c160;
|
|
|
+.bc-row-extra {
|
|
|
+ width: 100%;
|
|
|
+ padding: 12upx 0 20upx;
|
|
|
+ border-top: 1upx solid #f0f2f5;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
-.balance-card__change.is-expense {
|
|
|
- color: #ff2842;
|
|
|
+.bc-tags-row {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ align-items: flex-start;
|
|
|
+ width: 100%;
|
|
|
+ padding-left: 8upx;
|
|
|
+ padding-right: 8upx;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
-.balance-card__balance {
|
|
|
- font-size: 24upx;
|
|
|
- color: #666;
|
|
|
- margin-top: 6upx;
|
|
|
+.bc-td--time {
|
|
|
+ width: 132upx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ padding-left: 8upx;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.bc-td--event {
|
|
|
+ flex: 1;
|
|
|
+ min-width: 0;
|
|
|
+ padding-right: 12upx;
|
|
|
+}
|
|
|
+
|
|
|
+.bc-td--amt {
|
|
|
+ width: 108upx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+}
|
|
|
+
|
|
|
+.bc-td--bal {
|
|
|
+ width: 96upx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ padding-right: 8upx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.bc-time {
|
|
|
+ font-size: 22upx;
|
|
|
+ color: #2c2c2c;
|
|
|
+ line-height: 1.5;
|
|
|
}
|
|
|
|
|
|
-.balance-card__event {
|
|
|
- margin-top: 16upx;
|
|
|
+.bc-event {
|
|
|
+ display: block;
|
|
|
font-size: 28upx;
|
|
|
- color: #333;
|
|
|
+ color: #1a1a1a;
|
|
|
font-weight: 500;
|
|
|
line-height: 1.45;
|
|
|
word-break: break-all;
|
|
|
}
|
|
|
|
|
|
-.balance-card__meta {
|
|
|
- margin-top: 10upx;
|
|
|
-}
|
|
|
-
|
|
|
-.balance-card__staff {
|
|
|
- font-size: 24upx;
|
|
|
+.bc-meta {
|
|
|
+ display: block;
|
|
|
+ margin-top: 8upx;
|
|
|
+ font-size: 22upx;
|
|
|
color: #999;
|
|
|
+ line-height: 1.4;
|
|
|
+ word-break: break-all;
|
|
|
}
|
|
|
|
|
|
-.balance-card__extras {
|
|
|
- margin-top: 16upx;
|
|
|
- padding-top: 16upx;
|
|
|
- border-top: 1upx solid #f0f0f0;
|
|
|
+.bc-meta--remark {
|
|
|
+ color: #b3b3b3;
|
|
|
}
|
|
|
|
|
|
-.balance-card__tag {
|
|
|
- font-size: 24upx;
|
|
|
- line-height: 1.5;
|
|
|
+.bc-tag {
|
|
|
+ display: block;
|
|
|
+ max-width: 100%;
|
|
|
+ padding: 6upx 14upx;
|
|
|
margin-top: 10upx;
|
|
|
+ margin-right: 12upx;
|
|
|
+ font-size: 22upx;
|
|
|
+ line-height: 1.4;
|
|
|
+ border-radius: 8upx;
|
|
|
+ word-break: break-all;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
-.balance-card__tag:first-child {
|
|
|
+.bc-tags-row .bc-tag:first-child {
|
|
|
margin-top: 0;
|
|
|
}
|
|
|
|
|
|
-.balance-card__tag--link {
|
|
|
- color: #3385ff;
|
|
|
- font-weight: 500;
|
|
|
+.bc-tag--link {
|
|
|
+ color: #85888d;
|
|
|
+ background: #eef4ff;
|
|
|
}
|
|
|
|
|
|
-.balance-card__tag--hint {
|
|
|
- color: #999;
|
|
|
+.bc-tag--muted {
|
|
|
+ color: #666;
|
|
|
+ background: #f3f4f6;
|
|
|
}
|
|
|
|
|
|
-.balance-card__remark {
|
|
|
- margin-top: 12upx;
|
|
|
- font-size: 24upx;
|
|
|
- color: #999;
|
|
|
- line-height: 1.4;
|
|
|
- word-break: break-all;
|
|
|
+.bc-amount {
|
|
|
+ font-size: 28upx;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 1.35;
|
|
|
+ font-variant-numeric: tabular-nums;
|
|
|
+}
|
|
|
+
|
|
|
+.bc-amount--in {
|
|
|
+ color: #07a84c;
|
|
|
+}
|
|
|
+
|
|
|
+.bc-amount--out {
|
|
|
+ color: #e62e45;
|
|
|
+}
|
|
|
+
|
|
|
+.bc-balance {
|
|
|
+ font-size: 26upx;
|
|
|
+ color: #131212;
|
|
|
+ line-height: 1.35;
|
|
|
+ font-variant-numeric: tabular-nums;
|
|
|
}
|
|
|
</style>
|
