|
|
@@ -1,5 +1,22 @@
|
|
|
<template>
|
|
|
<view class="pay-container">
|
|
|
+
|
|
|
+ <!-- 商家信息区域 -->
|
|
|
+ <view class="merchant-section">
|
|
|
+ <view class="merchant-card">
|
|
|
+ <view class="merchant-logo">
|
|
|
+ <image
|
|
|
+ :src="shopInfo.smallAvatar"
|
|
|
+ class="logo-image"
|
|
|
+ mode="aspectFill"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ <view class="merchant-details">
|
|
|
+ <text class="merchant-name">{{ shopInfo.showName || '未命名' }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
<!-- 支付金额区域 -->
|
|
|
<view class="amount-section">
|
|
|
<view class="amount-label">支付金额</view>
|
|
|
@@ -101,6 +118,12 @@ export default {
|
|
|
return {
|
|
|
currentAmount: '0',
|
|
|
displayAmount: '0',
|
|
|
+ // 商家信息
|
|
|
+ merchantInfo: {
|
|
|
+ logo: '',
|
|
|
+ name: '',
|
|
|
+ description: ''
|
|
|
+ },
|
|
|
// 优化:使用静态数据,避免重复创建
|
|
|
keyboardKeys: [
|
|
|
[
|
|
|
@@ -131,7 +154,8 @@ export default {
|
|
|
// 弹框状态
|
|
|
showConfirm: false,
|
|
|
account:0,
|
|
|
- payWay:1
|
|
|
+ payWay:1,
|
|
|
+ shopInfo:[]
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -148,8 +172,8 @@ export default {
|
|
|
}
|
|
|
if (this.account) {
|
|
|
orderRelate({account:this.account}).then(res => {
|
|
|
- if (res.data && res.data.ghs){
|
|
|
-
|
|
|
+ if (res.data && res.data.shop){
|
|
|
+ this.shopInfo = res.data.shop?res.data.shop:[]
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
@@ -354,6 +378,53 @@ export default {
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
+.merchant-section {
|
|
|
+ padding: 40upx 30upx 20upx;
|
|
|
+
|
|
|
+ .merchant-card {
|
|
|
+ background: rgba(255, 255, 255, 0.95);
|
|
|
+ backdrop-filter: blur(20px);
|
|
|
+ border-radius: 20upx;
|
|
|
+ padding: 30upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ box-shadow: 0 8upx 30upx rgba(0, 0, 0, 0.1);
|
|
|
+ border: 1upx solid rgba(255, 255, 255, 0.2);
|
|
|
+
|
|
|
+ .merchant-logo {
|
|
|
+ width: 100upx;
|
|
|
+ height: 100upx;
|
|
|
+ border-radius: 20upx;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-right: 25upx;
|
|
|
+ background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ box-shadow: 0 4upx 15upx rgba(0, 0, 0, 0.1);
|
|
|
+
|
|
|
+ .logo-image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 20upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .merchant-details {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .merchant-name {
|
|
|
+ font-size: 36upx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #333;
|
|
|
+ line-height: 1.2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
.nav-bar {
|
|
|
display: flex;
|
|
|
align-items: center;
|