优化

ghsApp/src/admin/ghs/balanceChange.vue

@@ -1,49 +1,34 @@
+<!--
+  ghsApp 本店/供货商余额变动明细
+  用途：供货商余额页进入；账单式左右分栏对齐 custom/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.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>
@@ -51,6 +36,9 @@
 	</view>
 </template>
 <script>
+/**
+ * ghsApp 供货商余额变动：账单式排版；结账单外链跳转 clear/info
+ */
 import AppWrapperEmpty from '@/components/app-wrapper-empty'
 import { balanceChangeList } from '@/api/ghs'
 import list from '@/mixins/list'
@@ -77,6 +65,7 @@ export default {
 		hasText(val) {
 			return val !== undefined && val !== null && String(val).trim() !== ''
 		},
+		/** 列表行展示字段：金额颜色、时间、结账外链 */
 		mapListItem(item, amountDisplay) {
 			const row = Object.assign({}, item)
 			row.amount = amountDisplay
@@ -159,50 +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--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;
 }
 
@@ -210,154 +158,115 @@ 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-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>

ghsApp/src/pagesPurchase/suppAdd.vue

@@ -59,7 +59,7 @@
       <!-- 底部内联操作按钮（不固定在底部，随页面滚动） -->
       <view class="inline-btn-group">
         <button class="admin-button-com big default btn-cancel" @click="goBack()">取消</button>
-        <button class="admin-button-com big blue btn-confirm" formType="submit">确认添加</button>
+        <button class="admin-button-com big blue btn-confirm" formType="submit">添加</button>
       </view>
 
     </form>

ghsApp/src/pagesPurchase/supplier.vue

@@ -840,8 +840,8 @@ export default {
             background-color: #e8f1ff;
             border: 1upx solid #c5daf5;
             border-radius: 8upx;
-            // 原 padding 14upx，上下各 +2 共增高 4upx，flex 保证文字垂直居中
-            padding: 16upx 0;
+            // 在 16upx 基础上再上下各 +2，共再增高 4upx，flex 保证文字垂直居中
+            padding: 18upx 0;
             cursor: pointer;
             margin-right: 16upx;
             transition: all 0.2s ease;
@@ -849,12 +849,6 @@ export default {
             &:last-child {
               margin-right: 0;
             }
-
-            &:active {
-              background-color: #d6e8ff;
-              border-color: #9fc0ef;
-              color: #3385FF;
-            }
           }
         }
       }