优化

hdApp/src/admin/ghs/balanceChange.vue

@@ -1,53 +1,38 @@
+<!--
+  hdApp 供货商余额变动明细
+  用途：供货商详情进入；账单式左右分栏对齐 ghsApp balanceChange
+-->
 <template>
 	<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
-						class="bc-row-main"
-						:class="{ 'bc-row-main--with-extra': item.showExtraRow }"
-						@click="goDetail(item)"
-					>
-						<view class="bc-td bc-td--time">
-							<text class="bc-date">{{ item.dateText }}</text>
-							<text class="bc-clock">{{ item.timeLine }}</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.showExtraRow" class="bc-row-extra" @click.stop>
-						<view class="bc-tags-row">
-							<text
-								v-if="item.showRefundTag"
-								class="bc-tag bc-tag--refund"
-							>{{ item.refundTagText }}</text>
-							<text
-								v-if="item.showClearLink"
-								class="bc-tag bc-tag--link"
-								@click.stop="goClear(item)"
-							>{{ item.clearLinkText }}</text>
-						</view>
+			<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.showRefundTag"
+						class="bc-tag bc-tag--refund"
+					>{{ item.refundTagText }}</text>
+					<text
+						v-if="item.showClearLink"
+						class="bc-tag"
+						@click.stop="goClear(item)"
+					>{{ item.clearLinkText }}</text>
 				</view>
 			</view>
 		</view>
@@ -55,6 +40,10 @@
 	</view>
 </template>
 <script>
+/**
+ * hdApp 供货商余额变动：读供货商流水；排版对齐 ghs 账单式列表
+ * 保留结账单跳转、充值退款标记、结账类支出行隐藏
+ */
 import AppWrapperEmpty from '@/components/app-wrapper-empty'
 import { balanceChangeList } from '@/api/ghs'
 import list from '@/mixins/list'
@@ -73,9 +62,6 @@ export default {
 			return !this.hasList
 		}
 	},
-	onLoad() {
-		this.getMyChange()
-	},
 	methods: {
 		formatMoney(val) {
 			const n = parseFloat(val)
@@ -84,6 +70,7 @@ export default {
 		hasText(val) {
 			return val !== undefined && val !== null && String(val).trim() !== ''
 		},
+		/** 列表行展示字段：金额颜色、时间、结账外链、充值退款标记 */
 		mapListItem(item, amountDisplay) {
 			const row = Object.assign({}, item)
 			row.amount = amountDisplay
@@ -119,11 +106,8 @@ export default {
 		shouldHideRow(item) {
 			return item.io == 0 && item.event && String(item.event).indexOf('结账') === 0
 		},
-		init(){
-
-		},
-		async getMyChange() {
-			let salt = this.option.salt||''
+		async init() {
+			const salt = this.option.salt || ''
 			const res = await balanceChangeList({
 				page: this.list.page,
 				ghsId: this.option.ghsId,
@@ -180,50 +164,9 @@ export default {
 	background: #fff;
 }
 
-.bc-head {
-	display: flex;
-	align-items: center;
-	padding: 22upx 0;
-	background: #f8f9fb;
-	border-bottom: 1upx solid #eceef2;
-}
-
-.bc-th {
-	font-size: 28upx;
-	color: #8c8c8c;
-	font-weight: 500;
-	line-height: 1.2;
-}
-
-.bc-th--time {
-	width: 100upx;
-	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: 118upx;
-	flex-shrink: 0;
-	text-align: right;
-}
-
-.bc-th--bal {
-	width: 140upx;
-	flex-shrink: 0;
-	padding-right: 8upx;
-	text-align: right;
-	box-sizing: border-box;
-}
-
 .bc-item {
-	border-bottom: 1upx solid #f2f3f5;
+	padding: 28upx 28upx 24upx;
+	border-bottom: 1upx solid #f0f1f3;
 	box-sizing: border-box;
 }
 
@@ -231,164 +174,120 @@ export default {
 	border-bottom: none;
 }
 
-.bc-item--alt {
-	background: #fafbfc;
+.bc-item:active {
+	background: #f7f8fa;
 }
 
-.bc-row-main {
+.bc-main {
 	display: flex;
+	flex-direction: row;
 	align-items: flex-start;
-	padding: 24upx 0;
-	box-sizing: border-box;
+	justify-content: space-between;
 }
 
-.bc-row-main--with-extra {
-	padding-bottom: 0;
+.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-item:active .bc-row-main,
-.bc-item:active .bc-row-extra {
-	background: #f0f4ff;
+.bc-amount {
+	flex-shrink: 0;
+	font-size: 32upx;
+	font-weight: 600;
+	line-height: 1.3;
+	font-variant-numeric: tabular-nums;
 }
 
-.bc-row-extra {
-	width: 100%;
-	padding: 12upx 0 20upx;
-	box-sizing: border-box;
+.bc-amount--in {
+	color: #07a84c;
 }
 
-.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;
+.bc-amount--out {
+	color: #e62e45;
 }
 
-.bc-td--time {
-	width: 100upx;
-	flex-shrink: 0;
-	padding-left: 8upx;
+.bc-sub {
 	display: flex;
-	flex-direction: column;
-	align-items: flex-start;
-	justify-content: center;
-	box-sizing: border-box;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+	margin-top: 10upx;
 }
 
-.bc-td--event {
+.bc-sub-left {
 	flex: 1;
 	min-width: 0;
-	padding-right: 12upx;
-}
-
-.bc-td--amt {
-	width: 118upx;
-	flex-shrink: 0;
-	padding-right: 8upx;
 	display: flex;
-	justify-content: flex-end;
-	box-sizing: border-box;
+	flex-direction: row;
+	align-items: center;
+	margin-right: 16upx;
 }
 
-.bc-td--bal {
-	width: 140upx;
+.bc-time {
 	flex-shrink: 0;
-	padding-right: 8upx;
-	display: flex;
-	justify-content: flex-end;
-	box-sizing: border-box;
-}
-
-.bc-date {
 	font-size: 28upx;
-	color: #2c2c2c;
-	line-height: 1.35;
+	color: #999;
+	line-height: 1.4;
 }
 
-.bc-clock {
-	margin-top: 4upx;
+.bc-staff {
+	flex: 1;
+	min-width: 0;
+	margin-left: 12upx;
 	font-size: 28upx;
-	color: #2c2c2c;
-	line-height: 1.35;
+	color: #999;
+	line-height: 1.4;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
 }
 
-.bc-event {
-	display: block;
+.bc-balance {
+	flex-shrink: 0;
 	font-size: 28upx;
-	color: #1a1a1a;
-	font-weight: 500;
-	line-height: 1.45;
-	word-break: break-all;
+	color: #999;
+	line-height: 1.4;
+	font-variant-numeric: tabular-nums;
 }
 
-.bc-meta {
+.bc-remark {
 	display: block;
 	margin-top: 8upx;
 	font-size: 22upx;
-	color: #999;
+	color: #b3b3b3;
 	line-height: 1.4;
 	word-break: break-all;
 }
 
-.bc-meta--remark {
-	color: #b3b3b3;
+.bc-extra {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	margin-top: 16upx;
 }
 
 .bc-tag {
-	display: block;
 	max-width: 100%;
 	padding: 6upx 14upx;
-	margin-top: 10upx;
 	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-tags-row .bc-tag:first-child {
-	margin-top: 0;
-}
-
-.bc-tag--link {
-	color: #969aa0;
-	background: #eef4ff;
-}
-
 .bc-tag--refund {
 	color: #cf1322;
 	background: #fff1f0;
 }
-
-.bc-tag--muted {
-	color: #969aa0;
-	background: #f3f4f6;
-}
-
-.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: 28upx;
-	color: #131212;
-	line-height: 1.35;
-	font-variant-numeric: tabular-nums;
-}
 </style>

mallApp/src/pages/balance/changeList.vue

@@ -26,7 +26,8 @@
 				<view v-if="item.showExtraRow" class="bc-extra" @click.stop>
 					<text
 						v-if="item.showSettleLink"
-						class="bc-tag bc-tag--muted"
+						class="bc-tag"
+						@click.stop="goSettle(item)"
 					>{{ item.settleLinkText }}</text>
 					<text
 						v-if="item.showBecomeBalance"
@@ -147,6 +148,13 @@ export default {
 		goShPayOrder(item) {
 			this.$util.pageTo({ url: this.buildOrderDetailUrl(item.shOrderId, item) })
 		},
+		/** 「结账单」标签：跳转商城结账单详情 */
+		goSettle(item) {
+			if (Number(item.settleId) <= 0) {
+				return
+			}
+			this.$util.pageTo({ url: '/pages/settle/detail?id=' + item.settleId })
+		},
 		/** 「订单 xxx」标签：refundOrderId 是原销售单 id，不是售后申请 id */
 		goRefundOrder(item) {
 			this.$util.pageTo({ url: this.buildOrderDetailUrl(item.refundOrderId, item) })