优化

ghsApp/src/admin/custom/balanceChange.vue

@@ -1,35 +1,43 @@
 <template>
-<view class="app-content">
-		<block v-if="!$util.isEmpty(list.data)">
-			<t-table :headerBackgroundColor="'#F0F2F6'">
-				<t-tr header>
-					<t-th>日期</t-th>
-					<t-th><view style="width:180upx;">事项</view></t-th>
-					<t-th>人员</t-th>
-					<t-th>变动</t-th>
-					<t-th>余额</t-th>
-					<t-th>备注</t-th>
-				</t-tr>
-				<view v-for="(item, index) in list.data" :key="index" @click="goDetail(item)">
-					<t-tr>
-						<t-td align="center" color="info"><view >{{ item.addTime.substr(5,11) }}</view></t-td>
-						<t-td align="center" color="info"><view style="width:180upx;">{{ item.event }}</view></t-td>
-						<t-td align="center" color="info"><view >{{ item.staffName }}</view></t-td>
-						<t-td align="center" color="info"><view >{{ item.amount }}</view></t-td>
-						<t-td align="center" color="info"><view >{{ parseFloat(item.balance) }}</view></t-td>
-						<t-td align="center" color="info"><view >{{ item.remark }}</view></t-td>
-					</t-tr>
-					<t-tr v-if="Number(item.clearId)>0 || !$util.isEmpty(item.clearSn)">
-						<t-td align="left" color="info" :colspan="6" class="balance-change-extra">
-							<view @click.stop="goClear(item)">结账单 {{ item.clearSn || '' }} {{ item.clearAmount ? parseFloat(item.clearAmount) : 0 }}元</view>
-							<view v-if="Number(item.becomeBalance)>0">余额 {{ parseFloat(item.becomeBalance) }}元</view>
-						</t-td>
-					</t-tr>
+	<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>
-			</t-table>
+				<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.showClearTag"
+						class="balance-card__tag balance-card__tag--link"
+						@click.stop="goClear(item)"
+					>
+						结账单 {{ item.clearSn || '' }} · 本单销{{ item.clearAmountText }}元
+					</view>
+					<view
+						v-if="item.showBecomeBalance"
+						class="balance-card__tag balance-card__tag--hint"
+					>
+						剩余可用 {{ item.becomeBalanceText }}元
+					</view>
+				</view>
+				<view class="balance-card__remark" v-if="item.showRemark">{{ item.remark }}</view>
+			</view>
 		</block>
 		<block v-else>
-			<AppWrapperEmpty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
+			<AppWrapperEmpty title="暂无数据" :is-empty="listEmpty" />
 		</block>
 	</view>
 </template>
@@ -42,63 +50,187 @@ export default {
 	components: {
 		AppWrapperEmpty
 	},
-	mixins:[list],
+	mixins: [list],
 	data() {
-		return {
-		};
+		return {};
+	},
+	computed: {
+		listEmpty() {
+			return !this.list.data || !this.list.data.length
+		}
 	},
 	methods: {
-		async init(){
-			const res = await getCustomBalanceChange({ page:this.list.page,customId:this.option.customId })
-			if (this.$util.isEmpty(res.data.list)){
+		formatMoney(val) {
+			const n = parseFloat(val)
+			return isNaN(n) ? '0' : 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.clearAmountText = this.formatMoney(item.clearAmount)
+			item.becomeBalanceText = this.formatMoney(item.becomeBalance)
+			item.showClearTag = Number(item.clearId) > 0 || this.hasText(item.clearSn)
+			item.showBecomeBalance = Number(item.becomeBalance) > 0
+			item.showRemark = this.hasText(item.remark)
+			item.hasExtra = item.showClearTag || item.showBecomeBalance
+			return item
+		},
+		async init() {
+			const res = await getCustomBalanceChange({ page: this.list.page, customId: this.option.customId })
+			if (this.$util.isEmpty(res.data.list)) {
 				this.completes(res)
 				return
 			}
 			let currentList = res.data.list
-			// 充值销账：结账信息挂在充值行下，隐藏单独的「结账 -X」流水（对照 hd，历史数据兼容）
 			currentList = currentList.filter(function(item) {
 				if (item.io == 0 && item.event && String(item.event).indexOf('结账') === 0) {
 					return false
 				}
 				return true
 			})
-			currentList.forEach(function(item,index,array){
-				array[index].amount = item.io == 0 ? '-'+parseFloat(item.amount) : '+'+parseFloat(item.amount)
-			});
+			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)
 		},
-		goDetail(item){
-			if(item.capitalType == 64){
-				this.$util.pageTo({url: "/admin/clear/customInfo?id="+item.relateId})
+		goDetail(item) {
+			if (item.capitalType == 64) {
+				this.$util.pageTo({ url: "/admin/clear/customInfo?id=" + item.relateId })
 			}
 		},
-		goClear(item){
-			if(Number(item.clearId)>0){
-				this.$util.pageTo({url: "/admin/clear/customInfo?id="+item.clearId})
+		goClear(item) {
+			if (Number(item.clearId) > 0) {
+				this.$util.pageTo({ url: "/admin/clear/customInfo?id=" + item.clearId })
 			}
 		}
 	},
 	async onPullDownRefresh() {
-		this.resetList();
+		this.resetList()
 		await this.init()
-		uni.stopPullDownRefresh();
+		uni.stopPullDownRefresh()
 	},
 	async onReachBottom() {
 		if (!this.list.finished) {
 			await this.init()
-			uni.stopPullDownRefresh();;
+			uni.stopPullDownRefresh()
 		} else {
-			uni.stopPullDownRefresh();
+			uni.stopPullDownRefresh()
 		}
 	}
-};
+}
 </script>
 <style lang="scss" scoped>
-.balance-change-extra {
-	background: #f8f8f8;
-	color: #989494;
+.balance-change-page {
+	min-height: 100vh;
+	padding: 24upx;
+	background: #f5f6f8;
+	box-sizing: border-box;
+}
+
+.balance-card {
+	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 {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+}
+
+.balance-card__time {
+	font-size: 24upx;
+	color: #999;
+	line-height: 1.4;
+	flex-shrink: 0;
+}
+
+.balance-card__amounts {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-end;
+	margin-left: 20upx;
+}
+
+.balance-card__change {
+	font-size: 32upx;
+	font-weight: 600;
+	line-height: 1.3;
+}
+
+.balance-card__change.is-income {
+	color: #07c160;
+}
+
+.balance-card__change.is-expense {
+	color: #ff2842;
+}
+
+.balance-card__balance {
+	font-size: 24upx;
+	color: #666;
+	margin-top: 6upx;
+}
+
+.balance-card__event {
+	margin-top: 16upx;
+	font-size: 28upx;
+	color: #333;
+	font-weight: 500;
+	line-height: 1.45;
+	word-break: break-all;
+}
+
+.balance-card__meta {
+	margin-top: 10upx;
+}
+
+.balance-card__staff {
+	font-size: 24upx;
+	color: #999;
+}
+
+.balance-card__extras {
+	margin-top: 16upx;
+	padding-top: 16upx;
+	border-top: 1upx solid #f0f0f0;
+}
+
+.balance-card__tag {
+	font-size: 24upx;
+	line-height: 1.5;
+	margin-top: 10upx;
+}
+
+.balance-card__tag:first-child {
+	margin-top: 0;
+}
+
+.balance-card__tag--link {
+	color: #3385ff;
+	font-weight: 500;
+}
+
+.balance-card__tag--hint {
+	color: #999;
+}
+
+.balance-card__remark {
+	margin-top: 12upx;
 	font-size: 24upx;
-	padding: 16upx 20upx;
+	color: #999;
+	line-height: 1.4;
+	word-break: break-all;
 }
-</style>
+</style>

hdApp/src/admin/custom/balanceChange.vue

@@ -1,186 +1,254 @@
 <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 || Number(item.shOrderId)>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.shOrderId)>0" @click.stop="goShPayOrder(item)">红冲单{{ item.shOrderSn }}</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 { getBalanceChangeList } 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})
-            },
-            goShPayOrder(item){
-                this.$util.pageTo({ url: '/admin/order/detail?id='+item.shOrderId})
-            },
-            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 getBalanceChangeList({ 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="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
+						v-if="item.showShOrder"
+						class="balance-card__tag balance-card__tag--link"
+						@click.stop="goShPayOrder(item)"
+					>
+						红冲单 {{ item.shOrderSn }}
+					</view>
+					<view
+						v-if="item.showRefundOrder"
+						class="balance-card__tag balance-card__tag--link"
+						@click.stop="goRefundOrder(item)"
+					>
+						订单 {{ item.refundOrderSn }}
+					</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>
+</template>
+<script>
+import AppWrapperEmpty from "@/components/app-wrapper-empty";
+import { getBalanceChangeList } from '@/api/custom'
+import list from '@/mixins/list'
+export default {
+	name: "balanceChange",
+	components: {
+		AppWrapperEmpty
+	},
+	mixins: [list],
+	data() {
+		return {};
+	},
+	computed: {
+		listEmpty() {
+			return !this.list.data || !this.list.data.length
+		}
+	},
+	methods: {
+		formatMoney(val) {
+			const n = parseFloat(val)
+			return isNaN(n) ? '0' : 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
+		},
+		goRefundOrder(item) {
+			this.$util.pageTo({ url: '/admin/order/detail?id=' + item.refundOrderId })
+		},
+		goShPayOrder(item) {
+			this.$util.pageTo({ url: '/admin/order/detail?id=' + item.shOrderId })
+		},
+		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() {
+			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() {
+		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-change-page {
+	min-height: 100vh;
+	padding: 24upx;
+	background: #f5f6f8;
+	box-sizing: border-box;
+}
+
+.balance-card {
+	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 {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+}
+
+.balance-card__time {
+	font-size: 24upx;
+	color: #999;
+	line-height: 1.4;
+	flex-shrink: 0;
+}
+
+.balance-card__amounts {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-end;
+	margin-left: 20upx;
+}
+
+.balance-card__change {
+	font-size: 32upx;
+	font-weight: 600;
+	line-height: 1.3;
+}
+
+.balance-card__change.is-income {
+	color: #07c160;
+}
+
+.balance-card__change.is-expense {
+	color: #ff2842;
+}
+
+.balance-card__balance {
+	font-size: 24upx;
+	color: #666;
+	margin-top: 6upx;
+}
+
+.balance-card__event {
+	margin-top: 16upx;
+	font-size: 28upx;
+	color: #333;
+	font-weight: 500;
+	line-height: 1.45;
+	word-break: break-all;
+}
+
+.balance-card__meta {
+	margin-top: 10upx;
+}
+
+.balance-card__staff {
+	font-size: 24upx;
+	color: #999;
+}
+
+.balance-card__extras {
+	margin-top: 16upx;
+	padding-top: 16upx;
+	border-top: 1upx solid #f0f0f0;
+}
+
+.balance-card__tag {
+	font-size: 24upx;
+	line-height: 1.5;
+	margin-top: 10upx;
+}
+
+.balance-card__tag:first-child {
+	margin-top: 0;
+}
+
+.balance-card__tag--link {
+	color: #3385ff;
+	font-weight: 500;
+}
+
+.balance-card__tag--hint {
+	color: #999;
+}
+
+.balance-card__remark {
+	margin-top: 12upx;
+	font-size: 24upx;
+	color: #999;
+	line-height: 1.4;
+	word-break: break-all;
+}
+</style>