优化

hdApp/src/admin/ghs/pay.vue

@@ -1,53 +1,81 @@
 <template>
-	<view class="app-content pay-wrap">
-		<view class="delivery-wrap">
-			<view class="shop-logo-wrap">
-				<view class="logo-img">
-					<image class="logo" :src="`${constant.imgUrl}/logo4.png`" mode="widthFix" />
-					<view class="title">{{ ghsName }}</view>
+	<view class="pay-page">
+		<!-- 供货商信息 -->
+		<view class="pay-card pay-card--header">
+			<view class="pay-header-main">
+				<image class="pay-header-logo" :src="`${constant.imgUrl}/logo4.png`" mode="aspectFill" />
+				<view class="pay-header-text">
+					<view class="pay-header-name">{{ ghsName || '供货商' }}</view>
+					<view class="pay-header-sub">向供货商付款结账</view>
 				</view>
-				<button
-					v-if="id"
-					class="admin-button-com middle"
-					:disabled="ghsDataLoading"
-					@click="goGathering">
-					待结明细
-				</button>
 			</view>
+			<button
+				v-if="id"
+				class="admin-button-com middle pay-header-btn"
+				:disabled="ghsDataLoading"
+				@click="goGathering">
+				待结明细
+			</button>
+		</view>
 
-			<view v-if="ghsDataLoading" class="pay-tip pay-tip--loading">加载中...</view>
-			<view v-else-if="loadError" class="pay-tip pay-tip--error">{{ loadError }}</view>
-			<view v-else class="pay-tip">
-				{{ customName }}，
-				<text v-if="hasOutstanding">
-					您待结款<text class="pay-tip__amount">{{ outstandingAmount }}元</text>，这里付款结账
-				</text>
-				<text v-else>您好，输入金额充值</text>
-			</view>
+		<!-- 问候与待结提示 -->
+		<view class="pay-card pay-card--welcome">
+			<view v-if="ghsDataLoading" class="pay-status pay-status--loading">加载中...</view>
+			<view v-else-if="loadError" class="pay-status pay-status--error">{{ loadError }}</view>
+			<template v-else>
+				<view class="pay-welcome-text">
+					<text class="pay-welcome-name">{{ customName }}</text>
+					<text v-if="hasOutstanding">，请确认金额后付款结账</text>
+					<text v-else>，您好，请输入金额充值</text>
+				</view>
+				<view v-if="hasOutstanding" class="pay-debt-box">
+					<view class="pay-debt-label">待结金额（元）</view>
+					<view class="pay-debt-value">{{ outstandingAmount }}</view>
+				</view>
+			</template>
+		</view>
 
-			<view class="module-com pay-input-wrap">
-				<pay-input-module
-					:focus="inpFocus"
-					:num="amount"
-					@focusFn="focusFn"
-					@blurFn="blurFn"
-					@clickKey="clickKeyFn" />
-			</view>
+		<!-- 金额输入 -->
+		<view class="pay-card pay-card--input">
+			<pay-input-module
+				:focus="inpFocus"
+				:num="amount"
+				@focusFn="focusFn"
+				@blurFn="blurFn"
+				@clickKey="clickKeyFn" />
+		</view>
 
-			<view class="btn-wrap">
-				<!-- #ifdef MP-WEIXIN -->
-				<button class="button-com green" :disabled="ghsDataLoading || !!loadError" @click="wexinPayFn">微信支付</button>
-				<view class="ali-qrcode-wrap" v-if="imgUrl">
-					<image class="ali-qrcode-img" :src="imgUrl" mode="widthFix" />
-					<view class="ali-qrcode-tip">支付宝扫此二维码付款</view>
-					<button @click="downloadImg" class="button-com blue ali-qrcode-save">保存二维码</button>
-					<view class="ali-qrcode-teach" @click="teachPayFn">不会用支付宝付款？点这里教您</view>
+		<!-- 支付操作 -->
+		<view class="pay-actions">
+			<!-- #ifdef MP-WEIXIN -->
+			<button
+				class="button-com green pay-action-btn"
+				:disabled="ghsDataLoading || !!loadError"
+				@click="wexinPayFn">
+				微信支付
+			</button>
+			<view v-if="imgUrl" class="pay-ali-section">
+				<view class="pay-divider">
+					<view class="pay-divider__line"></view>
+					<text class="pay-divider__text">或支付宝扫码付款</text>
+					<view class="pay-divider__line"></view>
 				</view>
-				<!-- #endif -->
-				<!-- #ifdef H5 -->
-				<button class="button-com red" :disabled="ghsDataLoading || !!loadError" @click="aliPayFn">支付宝支付</button>
-				<!-- #endif -->
+				<view class="pay-ali-box">
+					<image class="pay-ali-qrcode" :src="imgUrl" mode="aspectFit" />
+					<view class="pay-ali-tip">打开支付宝扫一扫</view>
+					<button class="button-com blue pay-ali-save" @click="downloadImg">保存二维码</button>
+				</view>
+				<view class="pay-ali-teach" @click="teachPayFn">不会用支付宝付款？点这里教您</view>
 			</view>
+			<!-- #endif -->
+			<!-- #ifdef H5 -->
+			<button
+				class="button-com red pay-action-btn"
+				:disabled="ghsDataLoading || !!loadError"
+				@click="aliPayFn">
+				支付宝支付
+			</button>
+			<!-- #endif -->
 		</view>
 	</view>
 </template>
@@ -358,123 +386,197 @@
 </script>
 
 <style lang="scss">
-	.app-content {
-		min-height: calc(100vh - 20upx);
-		padding-top: 20upx;
+	/* hdApp 供货商付款页：卡片分区 + 统一边距 */
+	.pay-page {
+		min-height: 100vh;
+		padding: 24upx 24upx 40upx;
+		background-color: $backColor;
+		box-sizing: border-box;
 	}
 
-	.pay-wrap {
-		.delivery-wrap {
-			.shop-logo-wrap {
-				padding: 10upx 20upx 20upx;
-				display: flex;
-				flex-direction: row;
-				align-items: center;
-				justify-content: space-between;
-
-				.logo-img {
-					flex: 1;
-					min-width: 0;
-					display: flex;
-					flex-direction: row;
-					align-items: center;
-
-					.logo {
-						width: 50upx;
-						height: 50upx;
-						border-radius: 5upx;
-						flex-shrink: 0;
-					}
+	.pay-card {
+		background-color: #fff;
+		border-radius: 16upx;
+		padding: 28upx 30upx;
 
-					.title {
-						margin-left: 20upx;
-						height: 50upx;
-						line-height: 50upx;
-						font-size: 38upx;
-						font-weight: bold;
-						overflow: hidden;
-						text-overflow: ellipsis;
-						white-space: nowrap;
-					}
-				}
+		& + .pay-card,
+		& + .pay-actions {
+			margin-top: 20upx;
+		}
+	}
 
-				.admin-button-com {
-					flex-shrink: 0;
-					margin-left: 20upx;
-				}
-			}
+	.pay-card--header {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-between;
+	}
 
-			.pay-tip {
-				padding: 10upx 0 25upx 10upx;
-				font-size: 30upx;
+	.pay-header-main {
+		flex: 1;
+		min-width: 0;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+	}
 
-				&--loading {
-					color: $fontColor2;
-				}
+	.pay-header-logo {
+		width: 72upx;
+		height: 72upx;
+		border-radius: 12upx;
+		flex-shrink: 0;
+	}
 
-				&--error {
-					color: #e64340;
-				}
+	.pay-header-text {
+		margin-left: 20upx;
+		min-width: 0;
+	}
 
-				&__amount {
-					color: red;
-					font-weight: bold;
-				}
-			}
+	.pay-header-name {
+		font-size: 34upx;
+		font-weight: bold;
+		color: $fontColorMain;
+		line-height: 44upx;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
 
-			.pay-input-wrap {
-				background-color: #fff;
-				border-top-left-radius: 20upx;
-				border-top-right-radius: 20upx;
-				padding: 50upx 36upx 38upx;
-				margin-bottom: 0;
-			}
+	.pay-header-sub {
+		margin-top: 6upx;
+		font-size: 24upx;
+		color: $fontColor3;
+		line-height: 32upx;
+	}
 
-			.btn-wrap {
-				width: calc(100% - 60upx);
-				margin: 64upx auto 0;
-				padding-bottom: 20upx;
+	.pay-header-btn {
+		flex-shrink: 0;
+		margin-left: 20upx;
+	}
 
-				.button-com {
-					display: block;
-					margin-bottom: 20upx;
-					padding-top: 30upx;
-					padding-bottom: 30upx;
+	.pay-welcome-text {
+		font-size: 28upx;
+		color: $fontColor2;
+		line-height: 42upx;
+	}
 
-					&:last-child {
-						margin-bottom: 0;
-					}
-				}
-			}
+	.pay-welcome-name {
+		color: $fontColorMain;
+		font-weight: bold;
+	}
 
-			.ali-qrcode-wrap {
-				text-align: center;
-				margin-top: 10upx;
-			}
+	.pay-status {
+		font-size: 28upx;
+		line-height: 42upx;
+		text-align: center;
 
-			.ali-qrcode-img {
-				width: 230upx;
-				height: 230upx;
-				margin: 0 auto;
-				display: block;
-			}
+		&--loading {
+			color: $fontColor3;
+		}
 
-			.ali-qrcode-tip {
-				margin-top: 10upx;
-				margin-bottom: 10upx;
-				font-size: 32upx;
-			}
+		&--error {
+			color: #e64340;
+		}
+	}
 
-			.ali-qrcode-save {
-				margin: 0 auto;
-				width: 380upx;
-			}
+	.pay-debt-box {
+		margin-top: 24upx;
+		padding: 24upx 28upx;
+		background-color: #fff8f6;
+		border: 1upx solid #ffe0d8;
+		border-radius: 12upx;
+		text-align: center;
+	}
 
-			.ali-qrcode-teach {
-				margin-top: 58upx;
-				font-size: 30upx;
-				text-decoration: underline;
-			}
-		}
+	.pay-debt-label {
+		font-size: 24upx;
+		color: $fontColor3;
+		line-height: 34upx;
+	}
+
+	.pay-debt-value {
+		margin-top: 8upx;
+		font-size: 52upx;
+		font-weight: bold;
+		color: #e64340;
+		line-height: 60upx;
+	}
+
+	.pay-card--input {
+		padding: 40upx 30upx 36upx;
+	}
+
+	.pay-actions {
+		margin-top: 32upx;
+		padding: 0 6upx 20upx;
+	}
+
+	.pay-action-btn {
+		display: block;
+		width: 100%;
+		padding-top: 28upx;
+		padding-bottom: 28upx;
+		font-size: 32upx;
+	}
+
+	.pay-ali-section {
+		margin-top: 40upx;
+	}
+
+	.pay-divider {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+	}
+
+	.pay-divider__line {
+		flex: 1;
+		height: 1upx;
+		background-color: #e8e8e8;
+	}
+
+	.pay-divider__text {
+		margin-left: 20upx;
+		margin-right: 20upx;
+		font-size: 24upx;
+		color: $fontColor3;
+		white-space: nowrap;
+	}
+
+	.pay-ali-box {
+		margin-top: 32upx;
+		padding: 36upx 30upx 32upx;
+		background-color: #fafafa;
+		border-radius: 12upx;
+		text-align: center;
+	}
+
+	.pay-ali-qrcode {
+		width: 280upx;
+		height: 280upx;
+		margin: 0 auto;
+		display: block;
+	}
+
+	.pay-ali-tip {
+		margin-top: 20upx;
+		font-size: 28upx;
+		color: $fontColor2;
+		line-height: 40upx;
+	}
+
+	.pay-ali-save {
+		margin: 24upx auto 0;
+		width: 400upx;
+		padding-top: 22upx;
+		padding-bottom: 22upx;
+	}
+
+	.pay-ali-teach {
+		margin-top: 36upx;
+		text-align: center;
+		font-size: 28upx;
+		color: #3385ff;
+		line-height: 40upx;
 	}
 </style>