更新

ghsApp/src/admin/custom/balanceChange.vue

@@ -1,48 +1,31 @@
 <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--money">变动/余额</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--money">
-							<text class="bc-amount" :class="item.amountClassName">{{ item.amount }}</text>
-							<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.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.showClearLink"
+						class="bc-tag"
+						@click.stop="goClear(item)"
+					>{{ item.clearLinkText }}</text>
 				</view>
 			</view>
 		</view>
@@ -50,6 +33,10 @@
 	</view>
 </template>
 <script>
+/**
+ * ghsApp 客户余额变动明细：按时间列出变动金额与结余。
+ * 客户详情进入；用账单式左右分栏，避免三列表格挤在一起难看。
+ */
 import AppWrapperEmpty from '@/components/app-wrapper-empty'
 import { getCustomBalanceChange } from '@/api/custom'
 import list from '@/mixins/list'
@@ -161,44 +148,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--money {
-	width: 200upx;
-	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;
 }
 
@@ -206,152 +158,113 @@ 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--money {
-	width: 200upx;
-	flex-shrink: 0;
-	padding-right: 8upx;
 	display: flex;
-	flex-direction: column;
-	align-items: flex-end;
-	box-sizing: border-box;
+	flex-direction: row;
+	align-items: center;
+	margin-right: 16upx;
 }
 
-.bc-date {
+.bc-time {
+	flex-shrink: 0;
 	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;
-	font-size: 28upx;
+	font-size: 34upx;
 	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--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 {
-	margin-top: 4upx;
-	font-size: 26upx;
-	color: #464545;
-	line-height: 1.35;
-	font-variant-numeric: tabular-nums;
-}
 </style>

ghsApp/src/pagesGys/details.vue

@@ -383,9 +383,11 @@ export default {
 		color: #d48806;
 		line-height: 46upx;
 	}
+	/* 底部结账栏盖住列表里的「查看明细」，避免最后几单按钮浮在结账按钮上 */
 	.bar-view {
 		position: fixed;
 		bottom: 0;
+		z-index: 99;
 		display: flex;
 		justify-content: space-between;
 		align-items: center;

ghsApp/src/pagesGys/detailsItem.vue

@@ -124,7 +124,8 @@ export default {
 		position: absolute;
 		top: 0;
 		right: 0;
-		z-index: 2;
+		/* 只盖住本行标题，不能高于底部结账栏（bar-view z-index:99） */
+		z-index: 1;
 		width: 180upx;
 		height: 80upx;
 		border: 1upx solid #67a0f7;