new-88live/pages/user/money/pay.vue

<!-- 支付页 -->
<template>
	<view class="pay-page">
		<view class="edgeInsetTop"></view>
		<view class="wanl-pay">
			<view class="price-box">
				<text class="text-df">{{ order_no }}</text>
				<text class="wanl-pip text-price margin-top-sm">{{ price }}</text>
			</view>
			<view class="payment-method-title">
				<text class="payment-method-text">支付方式：</text>
			</view>
			<view class="list-box">
				<view class="item" v-for="(item, index) in payList" :key="index">
					<image v-if="item.type == 'fiuu'" class="fiuu-pay-icon" src="/static/images/payment/fiuu-logo.png"
						mode="aspectFit"></image>
					<image v-else-if="item.type == 'google' || item.type == 'googlepay'" class="fiuu-pay-icon"
						src="/static/images/payment/google-pay-logo.svg" mode="aspectFit"></image>
					<image v-else-if="item.type == 'balance'" class="fiuu-pay-icon"
						src="/static/images/payment/balance-pay-logo.svg" mode="aspectFit"></image>
					<!-- <image v-else-if="item.type == 'payz'" class="fiuu-pay-icon" src="/static/images/payment/payz-pay-mark.svg" mode="aspectFit"></image> -->
					<image v-else-if="item.type == 'stripe'" class="fiuu-pay-icon" src="/static/images/payment/Tripe_800.svg"
						mode="aspectFit"></image>
					<image v-else-if="item.type == 'offline'" class="fiuu-pay-icon"
						src="/static/images/payment/icon-offline-payment.svg" mode="aspectFit"></image>
					<text v-else :class="'wlIcon-' + item.type + '-pay'"></text>
					<view class="action">
						<text class="title wanl-pip">{{ item.name }}</text>
						<view v-if="item.type == 'balance'">
							<text v-if="isbalance">可用餘額 HKD{{ user.money }}</text>
							<text v-else>餘額不足 HKD{{ user.money }}</text>
						</view>
						<view v-else>{{ item.describe }}</view>
					</view>
					<view class="radio text-xxl" v-if="item.state" @tap="onSelect(index)">
						<text v-if="item.select" class="wlIcon-xuanze-danxuan wanl-orange"></text>
						<text v-else class="wlIcon-xuanze wanl-gray-light"></text>
					</view>
					<view class="radio text-xxl" v-else>
						<text class="wlIcon-xuanze-danxuan wanl-gray-light"></text>
					</view>
				</view>
				<!-- 线下支付选中时展开 -->
				<view v-if="isOfflineSelected && offlineSubListVisible" class="offline-sub-list">
					<view v-if="offlinePaymentInfo.reminder" class="offline-reminder">{{ offlinePaymentInfo.reminder }}</view>
					<view v-if="offlineQrFullUrl" class="offline-qrcode-wrap">
						<text class="offline-qrcode-title">收款二維碼</text>
						<image class="offline-qrcode-img" :src="offlineQrFullUrl" mode="aspectFit" @tap="previewOfflineQrCode" />
						<text class="offline-qrcode-tip">點擊二維碼可預覽大圖</text>
					</view>
					<view v-if="offlinePaymentInfo.list && offlinePaymentInfo.list.length" class="offline-list">
						<view v-for="(row, idx) in offlinePaymentInfo.list" :key="idx" class="offline-list-item">
							<text class="offline-list-title">{{ row.title }}：</text>
							<text class="offline-list-name">{{ row.name }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="pay-bottom-placeholder"></view>
		</view>
		<!-- 固定底部按钮栏 -->
		<view class="wanl-pay pay-bottom-fixed">
			<view v-if="disabled" class="pay-bottom-buttons">
				<!-- #ifdef APP-PLUS -->
				<button v-if="isGooglePaySelected" class="google-pay-button-app">
					<view class="google-pay-button-content">
						<text class="wlIcon-jiazai wlIconfont-spin margin-right-xs google-pay-text-white"></text>
						<text class="google-pay-text-white">支付中...</text>
					</view>
				</button>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<view v-if="isGooglePaySelected" class="google-pay-web-container">
					<view class="gpay-web-button-wrapper">
						<text class="web-button-loading">支付中...</text>
					</view>
				</view>
				<!-- #endif -->
				<button v-if="!isGooglePaySelected" class="mix-btn wanl-bg-redorange">
					<text class="wlIcon-jiazai wlIconfont-spin margin-right-xs"></text>支付中...
				</button>
			</view>
			<view v-else class="pay-bottom-buttons">
				<!-- #ifdef APP-PLUS -->
				<button v-if="isGooglePaySelected" class="google-pay-button-app" @tap="confirm()">
					<view class="google-pay-button-content">
						<text class="google-pay-text-white">使用</text>
						<image class="google-pay-g-icon" src="/static/images/payment/google-g-icon.svg" mode="aspectFit"></image>
						<text class="google-pay-text-white"> Pay</text>
					</view>
				</button>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<view v-if="isGooglePaySelected" class="google-pay-web-container">
					<view id="gpay-web-button-container" class="gpay-web-button-wrapper">
						<text v-if="!webPayButtonReady" class="web-button-loading">加載中...</text>
					</view>
				</view>
				<!-- #endif -->
				<button v-if="!isGooglePaySelected && payNum == 1" class="mix-btn wanl-bg-redorange"
					:class="{ 'mix-btn-disabled': isOfflineSelected }" :disabled="isOfflineSelected"
					@tap="confirm()">確認支付</button>
				<button v-if="!isGooglePaySelected && payNum > 1" class="mix-btn wanl-bg-redorange"
					:class="{ 'mix-btn-disabled': isOfflineSelected }" :disabled="isOfflineSelected"
					@tap="confirm()">合併支付</button>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex'
import { decimalAdd, decimalSub } from '@/core/infra/runtime-bridge'
import { getOfflinePaymentConfig, getStripePaymentConfig, getBalance, getPayInfo, postPayment } from '@/features/mall/mall-gateway'

export default {
	data() {
		return {
			token: '',
			disabled: false,
			lastPayWebviewReturnTs: 0,
			price: '0.00',
			isbalance: false,
			order_type: 'goods',
			order_no: '',
			order_pay_no: '',
			payNum: 1,
			payList: [],
			offlinePaymentInfo: null,
			stripePaymentInfo: null,
			lastConfirmTap: 0,
			confirmDebounceMs: 600,
			googlePayProvider: null,
			webPayButtonReady: false,
			webPaymentsClient: null,
			webPayConfig: {
				merchantId: 'BCR2DN5TRDQ3TNZU',
				merchantName: 'ONE RISE LIVESTREAM TECH SDN. BHD.',
				environment: 'TEST'
			},
			order_id: null
		}
	},
	computed: {
		...mapState(['user']),
		isGooglePaySelected() {
			const selected = this.payList.find(item => item.select)
			return selected && (selected.type === 'google' || selected.type === 'googlepay')
		},
		isOfflineSelected() {
			const selected = this.payList.find(item => item.select)
			return selected && selected.type === 'offline'
		},
		offlineSubListVisible() {
			const o = this.offlinePaymentInfo
			if (!o) return false
			const hasList = Array.isArray(o.list) && o.list.length > 0
			const hasQr = !!(o.qrcode && String(o.qrcode).trim())
			return hasList || hasQr
		},
		offlineQrFullUrl() {
			const q = this.offlinePaymentInfo && this.offlinePaymentInfo.qrcode
			if (!q) return ''
			const s = String(q).trim()
			if (/^https?:\/\//i.test(s) || /^data:image\//i.test(s)) return s
			return s.startsWith('/') ? s : '/' + s
		}
	},
	watch: {
		price(val) {
			if (val <= parseFloat(this.$store.state.user.money)) {
				this.isbalance = true
				this.getPayment()
			}
		},
		isGooglePaySelected(newVal, oldVal) {
			// #ifdef H5
			if (newVal && !oldVal) {
				this.$nextTick(() => {
					this.webPayButtonReady = false
					this.renderWebGooglePayButton()
				})
			}
			// #endif
		}
	},
	async onLoad(option) {
		try {
			const { data: balanceData } = await getBalance()
			this.$store.commit('user/apply', { money: balanceData })
		} catch (e) {
			console.error('获取余额失败:', e)
		}
		this.getPayment()
		// #ifdef H5
		this.$nextTick(() => { this.initWebGooglePay() })
		// #endif
		// #ifdef APP-PLUS
		this.checkGooglePaySupport()
		// #endif

		if (option.data) {
			var sum = 0,
				data = JSON.parse(option.data),
				order_ids = []
			if (data.length <= 1) {
				this.price = data[0].price
				this.order_type = data[0].type
				this.order_no = `訂單號：${data[0].order_no}`
				this.order_pay_no = data[0].pay_no
				this.order_id = data[0].order_id
			} else {
				data.forEach(item => {
					sum = decimalAdd(sum, item.price)
					order_ids.push(item.order_id)
				})
				this.price = sum
				this.order_id = order_ids
				this.payNum = data.length
				this.order_no = `合併支付 ${data.length}個訂單`
			}
			this.token = option.token
		} else if (option.order_id) {
			uni.showLoading({ title: '加載中...' })
			try {
				const data = await getPayInfo({ order_id: option.order_id, order_type: option.order_type })
				uni.hideLoading()
				this.token = data.token
				this.price = data.price
				this.order_type = data.order_type
				this.order_no = `訂單號：${data.order_no}`
				this.order_pay_no = data.pay_no
				this.order_id = data.order_id
			} catch (e) {
				uni.hideLoading()
				console.error('[pay] getPayInfo 失败:', JSON.stringify(e))
				uni.showToast({ title: '加載失敗', icon: 'none' })
			}
		}
	},
	onShow() {
		const raw = uni.getStorageSync('pay_webview_return')
		if (!raw) return
		uni.removeStorageSync('pay_webview_return')
		let payload = raw
		if (typeof raw === 'string') {
			try { payload = JSON.parse(raw) } catch (e) { return }
		}
		if (payload && payload.type !== 'pay') return
		const ts = payload && payload.ts ? Number(payload.ts) : Date.now()
		if (ts && ts === this.lastPayWebviewReturnTs) return
		this.lastPayWebviewReturnTs = ts || Date.now()
		uni.showModal({
			title: '支付確認',
			content: '是否已完成支付？',
			cancelText: '繼續支付',
			confirmText: '查看訂單',
			success: (res) => {
				if (!res.confirm) return
				let orderId = this.order_id
				if (Array.isArray(orderId)) orderId = orderId[0]
				if (orderId) {
					uni.redirectTo({ url: `/pages/user/order/details?id=${encodeURIComponent(orderId)}` })
				} else {
					uni.redirectTo({ url: `/pages/user/order/order?state=0` })
				}
			}
		})
	},
	methods: {
		checkStripePaymentSupport() {
			getStripePaymentConfig().then(res => {
				const data = res
				if (!data) {
					return
				}
				this.stripePaymentInfo = data
				if (data.status == 1) {
					this.payList.push({
						name: data.title || 'Stripe',
						describe: '支持信用卡 / Apple Pay / Google Pay',
						type: 'stripe',
						method: 'checkout',
						state: true,
						select: false
					})
				} else {
				}
			}).catch(e => {
				console.error('[StripePay] 获取配置失败:', e)
			})
		},
		checkOfflinePaymentSupport() {
			getOfflinePaymentConfig().then(res => {
				const data = res
				if (!data) return
				this.offlinePaymentInfo = data
				if (data.status == 1) {
					this.payList.push({
						name: data.pay_name || '線下支付',
						describe: '轉賬後請聯繫客服確認',
						type: 'offline',
						method: 'offline',
						state: true,
						select: false
					})
				}
			}).catch(e => {
				console.error('[OfflinePay] 获取配置失败:', e)
			})
		},
		checkGooglePaySupport() {
			// #ifdef APP-PLUS
			uni.getProvider({
				service: 'payment',
				success: (e) => {
					if (e.provider.includes('google')) {
						this.googlePayProvider = 'google'
						this.payList.push({
							name: 'Google Pay',
							describe: '',
							type: 'google',
							method: 'app',
							state: true,
							select: false
						})
					}
				}
			})
			// #endif
		},
		initWebGooglePay() {
			// #ifdef H5
			if (typeof window === 'undefined' || !window.google || !window.google.payments) return
			try {
				this.webPaymentsClient = new window.google.payments.api.PaymentsClient({
					environment: this.webPayConfig.environment
				})
			} catch (e) {
				console.warn('[GooglePay Web] 初始化失败:', e)
			}
			// #endif
		},
		renderWebGooglePayButton() {
			// #ifdef H5
			if (!this.webPaymentsClient) return
			this.$nextTick(() => {
				const container = document.getElementById('gpay-web-button-container')
				if (!container) return
				container.innerHTML = ''
				try {
					const button = this.webPaymentsClient.createButton({
						onClick: () => this.confirm(),
						buttonColor: 'black',
						buttonType: 'pay',
						buttonSizeMode: 'fill'
					})
					container.appendChild(button)
					this.webPayButtonReady = true
				} catch (e) {
					console.warn('[GooglePay Web] 渲染按钮失败:', e)
				}
			})
			// #endif
		},
		showOfflinePaymentInfo() {
			const info = this.offlinePaymentInfo
			if (!info) {
				uni.showModal({ content: '暫無線下支付信息', showCancel: false })
				return
			}
			let content = ''
			if (info.reminder) content += info.reminder + '\n\n'
			if (Array.isArray(info.list)) {
				content += info.list.map(item => `${item.title}：${item.name}`).join('\n')
			}
			uni.showModal({
				title: info.pay_name || '線下支付',
				content: content || '暫無線下支付信息',
				showCancel: false
			})
		},
		previewOfflineQrCode() {
			const url = this.offlineQrFullUrl
			if (!url) return
			uni.previewImage({ urls: [url], current: url })
		},
		openPaymentUrl(paymentUrl) {
			const orderType = this.order_type || 'goods'
			const orderId = this.order_id != null ? this.order_id : ''
			const payWebviewUrl = `/pages/user/money/pay-webview?url=${encodeURIComponent(paymentUrl)}&order_type=${encodeURIComponent(orderType)}&order_id=${encodeURIComponent(orderId)}`
			uni.navigateTo({
				url: payWebviewUrl,
				fail: (err) => {
					console.warn('pay-webview 打开失败，改用外部浏览器', err)
					this.openPaymentUrlInBrowser(paymentUrl)
				},
				success: () => {
					this.disabled = false
				}
			})
		},
		openPaymentUrlInBrowser(paymentUrl) {
			const done = () => { this.disabled = false }
			// #ifdef H5
			window.location.href = paymentUrl
			done()
			// #endif
			// #ifdef APP-PLUS
			plus.runtime.openURL(paymentUrl, (error) => {
				if (error) {
					uni.showModal({ content: '無法打開支付頁面', showCancel: false, success: () => done() })
				} else {
					done()
				}
			})
			// #endif
		},
		getPayment() {
			this.payList = [
				// {
				// 	name: '餘額支付',
				// 	describe: '',
				// 	type: 'balance',
				// 	method: 'balance',
				// 	state: true,
				// 	select: this.isbalance ? false : false
				// }
			]
			this.checkStripePaymentSupport()
			this.checkOfflinePaymentSupport()
		},
		onSelect(key) {
			this.payList.map((value, index) => {
				if (index == key) {
					value.select = !value.select
				} else {
					value.select = false
				}
			})
		},
		confirm() {
			let data = null
			if (this.disabled) return
			const now = Date.now()
			if (now - this.lastConfirmTap < this.confirmDebounceMs) return
			this.lastConfirmTap = now
			this.payList.map(value => {
				if (value.select) data = value
			})
			if (!data) {
				uni.showModal({ content: '請選擇支付方式', showCancel: false })
				return
			}
			if (data.type === 'offline') {
				this.showOfflinePaymentInfo()
				return
			}
			this.disabled = true
			this.wanlPay(data)
		},
		async wanlPay(data) {
			const payData = {
				order_type: this.order_type,
				type: data.type,
				method: data.method,
				code: null,
				order_id: this.order_id,
				token: this.token
			}
			try {
				const resData = await postPayment(payData)
				switch (data.type) {
					case 'fiuu':
						if (resData && resData.payment_url) {
							this.openPaymentUrl(resData.payment_url)
						} else {
							uni.showModal({ content: '獲取支付地址失敗', showCancel: false, success: () => { this.disabled = false } })
						}
						break
					case 'stripe':
						const paymentUrl = resData && (resData.payment_url || resData.redirect_url)
						if (paymentUrl) {
							const openWebview = this.stripePaymentInfo && this.stripePaymentInfo.open_webview === 0
							if (openWebview) {
								this.openPaymentUrl(paymentUrl)
							} else {
								this.openPaymentUrlInBrowser(paymentUrl)
							}
						} else {
							uni.showModal({ content: '獲取支付地址失敗', showCancel: false, success: () => { this.disabled = false } })
						}
						break
					case 'google':
					case 'googlepay':
						// #ifdef H5
						this.handleWebGooglePay(resData)
						// #endif
						// #ifdef APP-PLUS
						this.handleAppGooglePay(resData)
						// #endif
						break
					case 'offline':
						this.showOfflinePaymentInfo()
						this.disabled = false
						break
					case 'balance':
						this.$store.commit('user/apply', {
							money: decimalSub(this.$store.state.user.money, this.price)
						})
						this.paySuccess()
						break
					default:
						this.disabled = false
						uni.showToast({ title: '暫不支持該支付方式', icon: 'none' })
						break
				}
			} catch (e) {
				this.disabled = false
				uni.showModal({ content: e.message || '支付失敗', showCancel: false })
			}
		},
		handleWebGooglePay(paymentData) {
			// #ifdef H5
			if (!this.webPaymentsClient) {
				uni.showModal({ content: 'Google Pay 不可用', showCancel: false, success: () => { this.disabled = false } })
				return
			}
			const priceStr = String(this.price || '0.00')
			try {
				const paymentDataRequest = {
					apiVersion: 2,
					apiVersionMinor: 0,
					allowedPaymentMethods: [{
						type: 'CARD',
						parameters: {
							allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
							allowedCardNetworks: ['AMEX', 'DISCOVER', 'JCB', 'MASTERCARD', 'VISA']
						},
						tokenizationSpecification: {
							type: 'PAYMENT_GATEWAY',
							parameters: paymentData && paymentData.gatewayParameters ? paymentData.gatewayParameters : {
								gateway: 'example',
								gatewayMerchantId: 'exampleGatewayMerchantId'
							}
						}
					}],
					transactionInfo: {
						totalPriceStatus: 'FINAL',
						totalPrice: priceStr,
						currencyCode: 'MYR',
						countryCode: 'MY'
					},
					merchantInfo: {
						merchantId: this.webPayConfig.merchantId,
						merchantName: this.webPayConfig.merchantName
					}
				}
				this.webPaymentsClient.loadPaymentData(paymentDataRequest).then((result) => {
					this.googlePaySuccess('Google Pay', '')
				}).catch((err) => {
					console.error('[GooglePay Web] 支付失败:', err)
					this.disabled = false
					if (err.statusCode !== 'CANCELED') {
						uni.showModal({ content: 'Google Pay 支付失敗', showCancel: false })
					}
				})
			} catch (e) {
				console.error('[GooglePay Web] 异常:', e)
				this.disabled = false
			}
			// #endif
		},
		handleAppGooglePay(paymentData) {
			// #ifdef APP-PLUS
			if (!this.googlePayProvider) {
				uni.showModal({ content: 'Google Pay 不可用', showCancel: false, success: () => { this.disabled = false } })
				return
			}
			let googlePayConfig = paymentData && paymentData.config ? paymentData.config : paymentData
			if (typeof googlePayConfig === 'string') {
				try { googlePayConfig = JSON.parse(googlePayConfig) } catch (e) { googlePayConfig = null }
			}
			if (!googlePayConfig || typeof googlePayConfig !== 'object' || !googlePayConfig.currencyCode) {
				const priceStr = String(this.price || '0.00')
				googlePayConfig = {
					environment: 3,
					paymentMethodType: 'CARD',
					currencyCode: 'MYR',
					countryCode: 'MY',
					totalPriceStatus: 'FINAL',
					totalPrice: priceStr,
					merchantName: '88LIVE',
					allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
					allowedCardNetworks: ['AMEX', 'DISCOVER', 'JCB', 'MASTERCARD', 'VISA'],
					tokenizationSpecificationType: 'PAYMENT_GATEWAY',
					gateway: 'example',
					gatewayMerchantId: 'exampleGatewayMerchantId'
				}
			}
			if (googlePayConfig.totalPrice && typeof googlePayConfig.totalPrice !== 'string') {
				googlePayConfig.totalPrice = String(googlePayConfig.totalPrice)
			}
			try {
				plus.payment.request(this.googlePayProvider, googlePayConfig, (result) => {
					let paymentType = 'Google Pay'
					let accountInfo = ''
					if (result && result.paymentMethodData) {
						const desc = result.paymentMethodData.description || ''
						const cardTypeMatch = desc.match(/(Visa|Mastercard|American Express|Discover|JCB)/i)
						if (cardTypeMatch) paymentType = 'Google Pay (' + cardTypeMatch[1] + ')'
						const cardNumberMatch = desc.match(/(\d{4})/g)
						if (cardNumberMatch && cardNumberMatch.length > 0) accountInfo = '•••• ' + cardNumberMatch[cardNumberMatch.length - 1]
					}
					this.googlePaySuccess(paymentType, accountInfo)
				}, (error) => {
					const errorMsg = error.message || error.msg || JSON.stringify(error)
					let userMessage = '支付失敗'
					if (error.code === 'USER_CANCELLED' || errorMsg.includes('cancel')) {
						userMessage = '支付已取消'
					} else if (errorMsg) {
						userMessage = errorMsg
					}
					uni.showModal({ content: userMessage, showCancel: false, success: () => { this.disabled = false } })
				})
			} catch (e) {
				console.error('[GooglePay APP] 异常:', e)
				this.disabled = false
			}
			// #endif
		},
		googlePaySuccess(paymentType, accountInfo) {
			this.disabled = false
			uni.redirectTo({
				url: `/pages/user/money/google-pay-success?paymentType=${encodeURIComponent(paymentType)}&accountInfo=${encodeURIComponent(accountInfo)}`
			})
		},
		paySuccess() {
			this.disabled = false
			if (this.order_type === 'goods') {
				this.$store.commit('statistics/order', {
					pay: decimalSub(this.$store.state.statistics.order.pay, this.payNum),
					delive: decimalAdd(this.$store.state.statistics.order.delive, this.payNum)
				})
			}
			uni.redirectTo({
				url: `/pages/page/success?type=pay&order_type=${this.order_type || 'goods'}`
			})
		}
	}
}
</script>

<style scoped>
.pay-page {
	min-height: 100vh;
	background: #fff;
}

.wanl-pay .price-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 60rpx 0 40rpx;
}

.wanl-pay .price-box .text-price {
	font-size: 60rpx;
	font-weight: bold;
	color: #ff6b35;
}

.payment-method-title {
	padding: 20rpx 0 20rpx 40rpx;
}

.payment-method-text {
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
}

.list-box {
	padding: 0 30rpx;
}

.list-box .item {
	display: flex;
	align-items: center;
	padding: 30rpx 0;
	border-bottom: 1rpx solid #f5f5f5;
}

.fiuu-pay-icon {
	width: 60rpx;
	height: 60rpx;
	margin-right: 24rpx;
	flex-shrink: 0;
}

.list-box .item .action {
	flex: 1;
}

.list-box .item .action .title {
	font-size: 30rpx;
	display: block;
	margin-bottom: 6rpx;
}

.list-box .item .action view {
	font-size: 24rpx;
	color: #999;
}

.list-box .item .radio {
	padding: 0 20rpx;
}

.pay-bottom-placeholder {
	height: calc(160rpx + env(safe-area-inset-bottom, 0));
}

.pay-bottom-fixed {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background: #fff;
	padding: 30rpx 30rpx 0;
	padding-bottom: calc(30rpx + env(safe-area-inset-bottom, 0));
	border-top: 1rpx solid #eee;
}

.pay-bottom-buttons {
	display: flex;
	justify-content: center;
}

.mix-btn {
	width: 630rpx;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	font-size: 32rpx;
	color: #fff;
	border: none;
	border-radius: 10rpx;
}

.wanl-bg-redorange {
	background: linear-gradient(135deg, #ff6b35, #ff3d2e) !important;
}

/* 线下支付子列表 */
.offline-sub-list {
	margin: 0 30rpx 20rpx;
	padding: 20rpx 24rpx;
	background: #f8f8f8;
	border-radius: 12rpx;
	border: 1rpx solid #eee;
}

.offline-reminder {
	font-size: 26rpx;
	color: #e54d42;
	line-height: 1.5;
	margin-bottom: 20rpx;
}

.offline-qrcode-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 24rpx;
	padding: 24rpx 16rpx;
	background: #fff;
	border-radius: 12rpx;
	border: 1rpx solid #e5e5e5;
}

.offline-qrcode-title {
	font-size: 28rpx;
	color: #333;
	font-weight: 600;
	margin-bottom: 16rpx;
	align-self: flex-start;
}

.offline-qrcode-img {
	width: 360rpx;
	height: 360rpx;
	background: #fafafa;
}

.offline-qrcode-tip {
	margin-top: 12rpx;
	font-size: 24rpx;
	color: #999;
}

.offline-list {
	display: flex;
	flex-direction: column;
	gap: 16rpx;
}

.offline-list-item {
	display: flex;
	align-items: center;
	padding: 16rpx 20rpx;
	background: #fff;
	border-radius: 10rpx;
	border: 1rpx solid #e5e5e5;
}

.offline-list-title {
	font-size: 26rpx;
	color: #666;
	min-width: 180rpx;
}

.offline-list-name {
	font-size: 28rpx;
	color: #333;
	flex: 1;
	word-break: break-all;
}

/* Google Pay 按钮 */
.google-pay-button-app {
	width: 630rpx;
	height: 80rpx;
	background: #000;
	border: none;
	border-radius: 10rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.google-pay-button-content {
	display: flex;
	align-items: center;
	justify-content: center;
}

.google-pay-text-white {
	color: #fff;
	font-size: 28rpx;
}

.google-pay-g-icon {
	width: 32rpx;
	height: 32rpx;
	margin: 0 4rpx;
}

.google-pay-web-container {
	width: 630rpx;
}

.gpay-web-button-wrapper {
	min-height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.web-button-loading {
	font-size: 28rpx;
	color: #666;
}

.mix-btn-disabled {
	opacity: 0.5;
}
</style>