From f70caf06e2aa214d9d717163be15786a22367d5c Mon Sep 17 00:00:00 2001
From: whitechiina <1293616053@qq.com>
Date: Tue, 25 Nov 2025 11:57:07 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=9F=BA=E6=9C=AC=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/index/index.vue | 280 ++++++++++++++++++++++++------------------
 1 file changed, 162 insertions(+), 118 deletions(-)

diff --git a/pages/index/index.vue b/pages/index/index.vue
index 4d5c19a..4d12ade 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,5 +1,5 @@
 <template>
-	<view>
+	<view>
 		<!-- 店铺扫码支付页 -->
 		<view class="content">
 			<view class="main">
@@ -35,19 +35,19 @@
 						<text class="payment-amount">¥{{actualPayment}}</text>
 					</view>
 				</view>
-			</view>
-			
-			<view class="pay-btn" @click="keyConfirm">
-				去支付
 			</view>
 			
-			<!-- <monokeyboard 
-				ref="mono" 
-				:value="money" 
-				:show="keyshow"
-				@confirm="keyConfirm"
+			<view class="pay-btn" @click="keyConfirm">
+				去支付
+			</view>
+			
+			<!-- <monokeyboard 
+				ref="mono" 
+				:value="money" 
+				:show="keyshow"
+				@confirm="keyConfirm"
 				@change="keyChange"
-				:isPay="a">
+				:isPay="a">
 			</monokeyboard> -->
 
 			<!-- <view class="shadow" v-if="loading"></view> -->
@@ -61,7 +61,7 @@
 	} from '@/config/app';
 	import monokeyboard from '@/components/mono-keyboard/mono-keyboard.vue';
 	import OnlineShop from '@/components/OnlineShop.vue';
-	
+	
 	import UrlUtils from '@/utils/urlUtils.js';
 	import getUrlParam from '@/utils/utils.js';
 	import {
@@ -86,7 +86,7 @@
 				bindPhone: '',
 				keyshow: true,
 				token: '',
-
+
 				qrcode: '',
 				merchant_id: '', //下单店铺id
 				ID: '',
@@ -105,9 +105,9 @@
 				dikou: 0,
 			
 
-				order_id: '',  // 查询订单号
-				dat: '',  // 直接支付的参数
-				tabIndex: '', // 支付结束的tab选项
+				order_id: '',  // 查询订单号
+				dat: '',  // 直接支付的参数
+				tabIndex: '', // 支付结束的tab选项
 				orderData: {}  // 显示的价格  { price: '100' }
 			}
 		},
@@ -122,13 +122,15 @@
 		},
 
 		onLoad() {
-			const url = window.location.href;
-			const cleanUrl = this.cleanUrl(url);
+			const url = window.location.href;
+			const cleanUrl = this.cleanUrl(url);
 						
-			const token = getUrlParam('token') || this.$store.state.app.token;
+			const token = getUrlParam('token') || this.$store.state.app.token;
 			if (token) {
-				this.$store.commit('UPDATE_LOGIN', token);
+				this.$store.commit('UPDATE_LOGIN', token);
 				
+				this.money = getUrlParam('price') || 0;
+				
 				// 扫码店铺支付
 				if (getUrlParam('merchant_id') && !getUrlParam('from_type')) {
 					this.getData(getUrlParam('merchant_id'));
@@ -161,10 +163,10 @@
 			},
 
 			// ID获取店铺
-			getData(id) {
+			getData(id) {
 				getMerchantInfo({
 					id: id
-				}).then(res => {
+				}).then(res => {
 					this.form = res.data;
 					this.merchant_id = res.data.merchant_id
 					this.a = true;
@@ -182,17 +184,17 @@
 
 			// CODE获取商户信息
 			getQrData(qrcode) {
-				let that = this;
+				let that = this;
 				this.qrcode = qrcode;
 				getMerchantInfoByCode({
 					code: qrcode
-				}).then(res => {
+				}).then(res => {
 					this.form = res.data.merchantInfo;
 					this.merchant_id = res.data.merchantInfo.merchant_id;
 					this.a = true;
-					this.loading = false;
-					
-					// 获取商户信息后，初始化抵用券信息
+					this.loading = false;
+					
+					// 获取商户信息后，初始化抵用券信息
 					this.calculatePayment();
 				}).catch(error => {
 					// 返回的文字判断，优先显示未绑定码牌
@@ -298,7 +300,14 @@
 					mask: true
 				});
 
-				if (!this.merchant_id) return;
+				if (!this.merchant_id) {
+					uni.hideLoading()
+					uni.showToast({
+						title: '缺少支付信息',
+						icon: 'none'
+					});
+					return
+				};
 
 				try {
 					// 准备支付参数
@@ -306,7 +315,7 @@
 						pay_price: Number(this.money),
 						use_coin: this.couponUsed ? 1 : 0,
 						use_broker: this.commissionUsed ? 1 : 0,
-						merchant_id: this.merchant_id,
+						merchant_id: this.merchant_id,
 						code: this.qrcode,
 						is_middle_pay: 1
 					};
@@ -385,7 +394,7 @@
 					} else {
 						onBridgeReady.call(this);
 					}
-				} catch (err) {
+				} catch (err) {
 					uni.hideLoading();
 					uni.showToast({
 						title: err.msg || err.message || err.data.message || '支付处理失败',
@@ -449,158 +458,193 @@
 
 <style lang="scss" scoped>
 	.content {
-		margin: 0 auto;
-		margin-top: 20rpx;
-		height: 100vh;
-		overflow: hidden;
+		min-height: 100vh;
+		background: linear-gradient(180deg, #f5f5f5 0%, #ffffff 100%);
+		padding: 40rpx 30rpx;
+		box-sizing: border-box;
+		
 		.main {
-			margin: 20rpx;
-			background-color: #fff;
-			border-radius: 30rpx;
-			padding: 30rpx;
+			background-color: #ffffff;
+			border-radius: 24rpx;
+			padding: 0;
+			box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
+			overflow: hidden;
 
 			.title {
 				display: flex;
 				align-items: center;
 				justify-content: center;
-				text-align: center;
-				font-size: 36rpx;
-				font-weight: 600;
-				margin-top: 30rpx;
+				padding: 50rpx 30rpx 40rpx;
+				border-bottom: 1rpx solid #f0f0f0;
 
 				.shop-images {
-					width: 50rpx;
-					height: 50rpx;
-					margin-right: 20rpx;
+					width: 60rpx;
+					height: 60rpx;
+					margin-right: 16rpx;
+					border-radius: 8rpx;
 				}
 
 				.name {
+					font-size: 34rpx;
+					font-weight: 500;
+					color: #333333;
+					display: -webkit-box;
 					-webkit-box-orient: vertical;
 					-webkit-line-clamp: 2;
+					line-clamp: 2;
 					overflow: hidden;
 					text-overflow: ellipsis;
+					max-width: 500rpx;
 				}
 			}
 
 			.money {
-				text-align: left;
-				padding: 30rpx 40rpx;
-				font-size: 42rpx;
-				font-weight: 600;
-				margin-top: 40rpx;
-				background-color: #f8f8f8;
-				border-radius: 20rpx;
+				padding: 50rpx 40rpx;
+				border-bottom: 1rpx solid #f0f0f0;
 
 				.input {
 					display: flex;
 					align-items: center;
 					justify-content: space-between;
-					font-size: 38rpx;
 
 					.txt {
-						width: 300rpx;
+						font-size: 28rpx;
+						color: #999999;
+						font-weight: 400;
 						white-space: nowrap;
-						overflow: hidden;
-						text-overflow: ellipsis;
-						font-weight: 600;
-						margin-right: 30rpx;
+						margin-right: 20rpx;
 					}
 
 					.num {
+						flex: 1;
 						font-weight: 600;
 						text-align: right;
-						font-size: 38rpx;
+						font-size: 56rpx;
+						color: #333333;
+						letter-spacing: 2rpx;
 					}
 
-					// /deep/ .u-input--radius {
-					// 	background-color: transparent !important;
-					// 	border: none !important;
-					// }
 					.wrap {
+						flex: 1;
 						position: relative;
+						display: flex;
+						justify-content: flex-end;
+						align-items: center;
 
 						.line {
 							position: absolute;
-							top: 10rpx;
-							right: 14rpx;
+							right: 0;
 							animation: blink 1s infinite;
-							color: #556dea;
+							color: #07c160;
+							font-size: 56rpx;
+							font-weight: 600;
+							line-height: 1;
 						}
 					}
 				}
 			}
+
+			.container {
+				.list-item {
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					padding: 36rpx 40rpx;
+					border-bottom: 1rpx solid #f0f0f0;
+					transition: background-color 0.2s;
+					
+					&:active {
+						background-color: #fff;
+					}
+
+					.titles {
+						font-size: 32rpx;
+						color: #333333;
+						font-weight: 400;
+					}
+
+					.right-section {
+						display: flex;
+						align-items: center;
+						gap: 16rpx;
+
+						text {
+							font-size: 32rpx;
+							color: #333333;
+							font-weight: 500;
+						}
+
+						image {
+							width: 40rpx;
+							height: 40rpx;
+							margin-top: 0;
+						}
+					}
+				}
+
+				.payment-section {
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					padding: 50rpx 40rpx;
+
+					.titles {
+						font-size: 32rpx;
+						color: #666666;
+						font-weight: 400;
+					}
+
+					.payment-amount {
+						color: #07c160;
+						font-size: 48rpx;
+						font-weight: 600;
+						letter-spacing: 1rpx;
+					}
+				}
+			}
+		}
+
+		.pay-btn {
+			background: linear-gradient(135deg, #07c160 0%, #06ad56 100%);
+			width: 100%;
+			max-width: 690rpx;
+			margin: 60rpx auto 0;
+			text-align: center;
+			padding: 28rpx 0;
+			color: #ffffff;
+			border-radius: 12rpx;
+			font-size: 36rpx;
+			font-weight: 500;
+			box-shadow: 0 8rpx 24rpx rgba(7, 193, 96, 0.3);
+			transition: all 0.3s;
+			letter-spacing: 2rpx;
+			
+			&:active {
+				transform: scale(0.98);
+				box-shadow: 0 4rpx 12rpx rgba(7, 193, 96, 0.25);
+			}
 		}
 	}
 
-
 	/* 光标闪烁动画 */
 	@keyframes blink {
-
-		0%,
-		100% {
+		0%, 100% {
 			opacity: 1;
 		}
-
 		50% {
 			opacity: 0;
 		}
 	}
 
-	.list-item {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		padding: 30rpx 20rpx;
-		border-bottom: 1rpx solid #eee;
-
-		.titles {
-			font-size: 32rpx;
-		}
-	}
-
-	.right-section {
-		display: flex;
-		align-items: center;
-		gap: 20rpx;
-	}
-
-	.payment-section {
-		display: flex;
-		justify-content: space-between;
-		padding: 40rpx 20rpx;
-		font-weight: bold;
-		font-size: 38rpx;
-
-		.titles {}
-	}
-
-	.payment-amount {
-		color: #ff2d55;
-		font-size: 38rpx;
-	}
-
 	.shadow {
 		position: fixed;
 		top: 0;
 		left: 0;
 		right: 0;
 		bottom: 0;
-		background-color: #000;
-		opacity: .5;
+		background-color: rgba(0, 0, 0, 0.5);
 		width: 100%;
 		height: 100vh;
 		z-index: 999999;
-	}
-	.pay-btn {
-		background-color: #07c160;
-		width: 200rpx;
-		margin: 0 auto;
-		text-align: center;
-		padding: 20rpx 10rpx;
-		color: #fff;
-		border-radius: 20rpx;
-		font-size: 38rpx;
-		font-weight: 600;
-		margin-top: 80rpx;
 	}
 </style>
\ No newline at end of file