chore: initial import
This commit is contained in:
liangjian
500
pkgBooking/pay/pay.vue
Normal file
500
pkgBooking/pay/pay.vue
Normal file
@@ -0,0 +1,500 @@
|
||||
<template>
|
||||
<view class="pay-page tn-safe-area-inset-bottom">
|
||||
<tn-nav-bar :isBack="true" :bottomShadow="false" backgroundColor="#F8F9FA">
|
||||
<view class="tn-text-bold tn-text-xl tn-color-black">{{ t('title') }}</view>
|
||||
</tn-nav-bar>
|
||||
|
||||
<view class="pay-content tn-padding" :style="{paddingTop: vuex_custom_bar_height + 'px', paddingBottom: '200rpx'}">
|
||||
|
||||
<!-- 支付金额区 -->
|
||||
<view class="amount-area tn-flex tn-flex-direction-column tn-flex-col-center tn-margin-top-xl tn-margin-bottom-xl">
|
||||
<view class="tn-color-gray tn-text-md">{{ t('paymentAmount') }}</view>
|
||||
<view class="tn-text-bold tn-color-black tn-margin-top-sm amount-text">
|
||||
<text class="tn-text-xl tn-margin-right-xs">$</text>500.00
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 账单详情卡片 -->
|
||||
<view class="bill-card tn-padding-lg tn-margin-bottom-xl">
|
||||
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom">
|
||||
<view class="tn-flex tn-flex-col-center">
|
||||
<view class="icon-bg-box tn-flex tn-flex-col-center tn-flex-row-center tn-margin-right-sm">
|
||||
<text class="tn-icon-building bill-head-icon"></text>
|
||||
</view>
|
||||
<view class="tn-color-gray tn-text-md">{{ t('billTo') }}</view>
|
||||
</view>
|
||||
<view class="tn-text-bold tn-text-md tn-color-black">{{ t('company') }}</view>
|
||||
</view>
|
||||
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom">
|
||||
<view class="tn-color-gray tn-text-md">{{ t('roomType') }}</view>
|
||||
<view class="tn-text-bold tn-text-md tn-color-black clamp-text-1" style="max-width: 400rpx; text-align: right;">
|
||||
{{ displayStyleName }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom" v-if="roomData && (roomData.roomTypeName || roomData.roomTypeNameEn)">
|
||||
<view class="tn-color-gray tn-text-md">{{ t('roomTypeNameLabel') }}</view>
|
||||
<view class="tn-text-bold tn-text-md tn-color-black clamp-text-1" style="max-width: 400rpx; text-align: right;">
|
||||
{{ displayRoomTypeName }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom">
|
||||
<view class="tn-color-gray tn-text-md">{{ t('location') }}</view>
|
||||
<view class="tn-text-bold tn-text-md tn-color-black clamp-text-1" style="max-width: 400rpx; text-align: right;">{{ displayLocationText }}</view>
|
||||
</view>
|
||||
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom" v-if="roomData && roomData.startDate">
|
||||
<view class="tn-color-gray tn-text-md">{{ t('bookingPeriod') }}</view>
|
||||
<view class="tn-text-bold tn-text-md tn-color-black clamp-text-1" style="max-width: 400rpx; text-align: right;">
|
||||
{{ roomData.startDate }} {{ t('toLabel') }} {{ roomData.endDate }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom" v-if="roomData && roomData.stayNights">
|
||||
<view class="tn-color-gray tn-text-md">{{ t('stayNights') }}</view>
|
||||
<view class="tn-text-bold tn-text-md tn-color-black">{{ roomData.stayNights }} {{ t('nightUnit') }}</view>
|
||||
</view>
|
||||
|
||||
<view class="bill-divider tn-margin-top-md tn-margin-bottom"></view>
|
||||
|
||||
<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-md">
|
||||
<view class="tn-color-black tn-text-bold tn-text-lg">{{ t('total') }}</view>
|
||||
<view class="tn-text-bold" style="color: $brand-primary; font-size: 40rpx;">$500.00</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 支付方式选择 -->
|
||||
<view class="payment-methods">
|
||||
<view class="tn-text-bold tn-text-xl tn-color-black tn-margin-bottom-lg">{{ t('paymentMethod') }}</view>
|
||||
|
||||
<view class="method-item tn-flex tn-flex-row-between tn-flex-col-center tn-padding tn-margin-bottom"
|
||||
:class="payMethod === 'Wechat' ? 'method-active' : ''" @click="payMethod = 'Wechat'">
|
||||
<view class="tn-flex tn-flex-col-center">
|
||||
<view class="method-icon-box tn-flex tn-flex-row-center tn-flex-col-center tn-margin-right-md" style="background-color: rgba(9, 184, 62, 0.1);">
|
||||
<text class="tn-icon-wechat-fill method-brand-icon method-brand-icon--wechat"></text>
|
||||
</view>
|
||||
<text class="tn-text-bold tn-text-md tn-color-black">Wechat Pay</text>
|
||||
</view>
|
||||
<view class="radio-box tn-flex tn-flex-col-center tn-flex-row-center" :class="payMethod === 'Wechat' ? 'radio-active' : ''">
|
||||
<text v-if="payMethod === 'Wechat'" class="tn-icon-success-circle-fill method-check-icon"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="method-item tn-flex tn-flex-row-between tn-flex-col-center tn-padding tn-margin-bottom"
|
||||
:class="payMethod === 'alipay' ? 'method-active' : ''" @click="payMethod = 'alipay'">
|
||||
<view class="tn-flex tn-flex-col-center">
|
||||
<view class="method-icon-box tn-flex tn-flex-row-center tn-flex-col-center tn-margin-right-md" style="background-color: rgba(22, 119, 255, 0.1);">
|
||||
<text class="tn-icon-alipay method-brand-icon method-brand-icon--alipay"></text>
|
||||
</view>
|
||||
<text class="tn-text-bold tn-text-md tn-color-black">AliPay</text>
|
||||
</view>
|
||||
<view class="radio-box tn-flex tn-flex-col-center tn-flex-row-center" :class="payMethod === 'alipay' ? 'radio-active' : ''">
|
||||
<text v-if="payMethod === 'alipay'" class="tn-icon-success-circle-fill method-check-icon"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="method-item tn-flex tn-flex-row-between tn-flex-col-center tn-padding tn-margin-bottom"
|
||||
:class="payMethod === 'card' ? 'method-active' : ''" @click="payMethod = 'card'">
|
||||
<view class="tn-flex tn-flex-col-center">
|
||||
<view class="method-icon-box tn-flex tn-flex-row-center tn-flex-col-center tn-margin-right-md" style="background-color: rgba(34, 34, 34, 0.1);">
|
||||
<text class="tn-icon-bankcard-fill method-brand-icon method-brand-icon--card"></text>
|
||||
</view>
|
||||
<text class="tn-text-bold tn-text-md tn-color-black">Credit Card</text>
|
||||
</view>
|
||||
<view class="radio-box tn-flex tn-flex-col-center tn-flex-row-center" :class="payMethod === 'card' ? 'radio-active' : ''">
|
||||
<text v-if="payMethod === 'card'" class="tn-icon-success-circle-fill method-check-icon"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tip-panel tn-padding-lg">
|
||||
<view class="tn-text-bold tn-text-lg tn-color-black">{{ t('fallbackTitle') }}</view>
|
||||
<view class="tn-color-gray tn-text-sm tn-margin-top-sm">{{ t('fallbackDesc') }}</view>
|
||||
<view class="tip-action tn-margin-top-lg" @click="fallbackToApplication">
|
||||
<text class="tn-text-bold">{{ t('fallbackAction') }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 底部固定支付按钮 -->
|
||||
<view class="fixed-bottom-btn-area tn-flex tn-flex-row-between tn-flex-col-center">
|
||||
<view class="tn-flex tn-flex-direction-column">
|
||||
<view class="tn-text-sm tn-color-gray">{{ t('total') }}</view>
|
||||
<view class="tn-text-bold tn-text-xl tn-color-black">$500.00</view>
|
||||
</view>
|
||||
<view class="custom-btn btn-primary" style="width: 60%; height: 100rpx;" @click="handlePay" :class="{ 'btn-disabled': isSubmitting }">
|
||||
<text class="tn-text-bold tn-text-lg">{{ isSubmitting ? (language === 'zh' ? '支付中...' : 'Processing...') : t('payNow') }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { compactEnglishText } from '../../utils/select-room-normalizers'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isSubmitting: false,
|
||||
payMethod: 'Wechat',
|
||||
roomData: null,
|
||||
i18n: {
|
||||
zh: {
|
||||
title: '支付定金',
|
||||
paymentAmount: '应付定金',
|
||||
billTo: '收款方',
|
||||
company: '绿居物业管理有限公司',
|
||||
roomType: '房源风格',
|
||||
roomTypeNameLabel: '房型',
|
||||
location: '楼栋位置',
|
||||
bookingPeriod: '预订时间',
|
||||
toLabel: '至',
|
||||
stayNights: '入住晚数',
|
||||
nightUnit: '晚',
|
||||
total: '合计',
|
||||
paymentMethod: '选择支付方式',
|
||||
payNow: '确认支付并提交预订',
|
||||
fallbackTitle: '支付接口暂未接入',
|
||||
fallbackDesc: '当前版本还未接通真实定金支付。你可以先改走已接好的入住申请提交流程，后续由工作人员跟进。',
|
||||
fallbackAction: '改为提交入住申请',
|
||||
fallbackNavigateTitle: '入住申请',
|
||||
fallbackNavigateDesc: '支付接口暂未接入，先提交入住申请，由工作人员继续跟进。',
|
||||
paying: '支付中...',
|
||||
pendingTitle: '支付接口待接入',
|
||||
paymentNoticeTitle: '用户须知',
|
||||
paymentNoticeMethodLabel: '支付方式',
|
||||
paymentNoticeAmountLabel: '支付金额',
|
||||
paymentNoticeItemLabel: '支付项目',
|
||||
paymentNoticeItemValue: '房源定金',
|
||||
paymentNoticeLine1: '请确认支付方式和金额无误后再继续操作。',
|
||||
paymentNoticeLine2: '当前页面为预支付引导页，真实支付接口暂未接入。',
|
||||
paymentNoticeLine3: '确认后将进入后续提交流程，由工作人员继续跟进。',
|
||||
paymentNoticeConfirm: '继续',
|
||||
paymentNoticeCancel: '取消',
|
||||
laterAction: '我知道了'
|
||||
},
|
||||
en: {
|
||||
title: 'Deposit Payment',
|
||||
paymentAmount: 'Deposit Amount',
|
||||
billTo: 'Bill To',
|
||||
company: 'Lüju Property Management',
|
||||
roomType: 'Style',
|
||||
roomTypeNameLabel: 'Room Type',
|
||||
location: 'Location',
|
||||
bookingPeriod: 'Booking Period',
|
||||
toLabel: 'to',
|
||||
stayNights: 'Stay Nights',
|
||||
nightUnit: 'nights',
|
||||
total: 'Total',
|
||||
paymentMethod: 'Payment Method',
|
||||
payNow: 'Pay and Submit',
|
||||
fallbackTitle: 'Payment API Pending',
|
||||
fallbackDesc: 'The real deposit payment flow is not ready yet. You can submit an application first and let staff follow up.',
|
||||
fallbackAction: 'Submit Application Instead',
|
||||
fallbackNavigateTitle: 'Stay Application',
|
||||
fallbackNavigateDesc: 'The payment API is not ready yet. Submit a stay application first and let staff follow up.',
|
||||
paying: 'Processing...',
|
||||
pendingTitle: 'Payment API Pending',
|
||||
paymentNoticeTitle: 'Payment Notice',
|
||||
paymentNoticeMethodLabel: 'Payment Method',
|
||||
paymentNoticeAmountLabel: 'Amount',
|
||||
paymentNoticeItemLabel: 'Charge Item',
|
||||
paymentNoticeItemValue: 'Deposit',
|
||||
paymentNoticeLine1: 'Please confirm the payment method and amount before continuing.',
|
||||
paymentNoticeLine2: 'This page is a pre-payment guide and the real payment API is not connected yet.',
|
||||
paymentNoticeLine3: 'After confirmation, the process continues to the follow-up submission flow for staff handling.',
|
||||
paymentNoticeConfirm: 'Continue',
|
||||
paymentNoticeCancel: 'Cancel',
|
||||
laterAction: 'Later'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
language() {
|
||||
return this.$getLanguage()
|
||||
},
|
||||
displayStyleName() {
|
||||
if (!this.roomData) {
|
||||
return 'Premium Suite'
|
||||
}
|
||||
return this.language === 'en'
|
||||
? (this.roomData.styleNameEnDisplay || compactEnglishText(this.roomData.styleNameEn || this.roomData.styleNameZh || '', 24) || 'Premium Suite')
|
||||
: (this.roomData.styleNameZh || this.roomData.styleNameEn || 'Premium Suite')
|
||||
},
|
||||
displayRoomTypeName() {
|
||||
if (!this.roomData) {
|
||||
return ''
|
||||
}
|
||||
return this.language === 'en'
|
||||
? (this.roomData.roomTypeNameEnDisplay || compactEnglishText(this.roomData.roomTypeNameEn || this.roomData.roomTypeName || '', 22))
|
||||
: (this.roomData.roomTypeName || this.roomData.roomTypeNameEn || '')
|
||||
},
|
||||
displayLocationText() {
|
||||
if (!this.roomData) {
|
||||
return '-'
|
||||
}
|
||||
const buildingText = this.language === 'en'
|
||||
? (this.roomData.buildingEnDisplay || compactEnglishText(this.roomData.buildingEn || this.roomData.building || '', 18))
|
||||
: (this.roomData.building || this.roomData.buildingEn || '')
|
||||
const floorText = this.language === 'en'
|
||||
? (this.roomData.floorEnDisplay || compactEnglishText(this.roomData.floorEn || this.roomData.floor || '', 12))
|
||||
: (this.roomData.floor || this.roomData.floorEn || '')
|
||||
return [buildingText, floorText].filter(Boolean).join(' - ') || '-'
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
if (options.roomData) {
|
||||
Promise.resolve(options.roomData)
|
||||
.then(decodeURIComponent)
|
||||
.then(JSON.parse)
|
||||
.then((data) => {
|
||||
this.roomData = data && typeof data === 'object' ? data : {}
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error('Failed to parse room data in pay page', e);
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
t(key) {
|
||||
return this.$tm('pkgBooking.pay.pay', key)
|
||||
},
|
||||
confirmPaymentNotice() {
|
||||
const content = [
|
||||
`${this.t('paymentNoticeItemLabel')}: ${this.t('paymentNoticeItemValue')}`,
|
||||
`${this.t('paymentNoticeMethodLabel')}: ${this.payMethod}`,
|
||||
`${this.t('paymentNoticeAmountLabel')}: $500.00`,
|
||||
'',
|
||||
`1. ${this.t('paymentNoticeLine1')}`,
|
||||
`2. ${this.t('paymentNoticeLine2')}`,
|
||||
`3. ${this.t('paymentNoticeLine3')}`
|
||||
].join('\n')
|
||||
|
||||
return new Promise((resolve) => {
|
||||
uni.showModal({
|
||||
title: this.t('paymentNoticeTitle'),
|
||||
content,
|
||||
confirmText: this.t('paymentNoticeConfirm'),
|
||||
cancelText: this.t('paymentNoticeCancel'),
|
||||
success: (res) => resolve(!!(res && res.confirm)),
|
||||
fail: () => resolve(false)
|
||||
})
|
||||
})
|
||||
},
|
||||
buildApplicationPayload() {
|
||||
return {
|
||||
sourceType: 'booking-payment-fallback',
|
||||
areaCode: this.roomData && this.roomData.areaCode ? this.roomData.areaCode : '',
|
||||
areaName: this.roomData && this.roomData.building ? this.roomData.building : '',
|
||||
areaNameEn: this.roomData && (this.roomData.areaNameEn || this.roomData.buildingEn) ? (this.roomData.areaNameEn || this.roomData.buildingEn) : '',
|
||||
areaNameEnDisplay: this.roomData && (this.roomData.areaNameEnDisplay || this.roomData.buildingEnDisplay || this.roomData.areaNameEn || this.roomData.buildingEn)
|
||||
? (this.roomData.areaNameEnDisplay || this.roomData.buildingEnDisplay || this.roomData.areaNameEn || this.roomData.buildingEn)
|
||||
: '',
|
||||
roomTypeCode: this.roomData && this.roomData.roomTypeCode ? this.roomData.roomTypeCode : '',
|
||||
roomTypeName: this.roomData && this.roomData.roomTypeName ? this.roomData.roomTypeName : '',
|
||||
roomTypeNameEn: this.roomData && (this.roomData.roomTypeNameEn || this.roomData.styleNameEn) ? (this.roomData.roomTypeNameEn || this.roomData.styleNameEn) : '',
|
||||
roomTypeNameEnDisplay: this.roomData && (this.roomData.roomTypeNameEnDisplay || this.roomData.styleNameEnDisplay || this.roomData.roomTypeNameEn || this.roomData.styleNameEn)
|
||||
? (this.roomData.roomTypeNameEnDisplay || this.roomData.styleNameEnDisplay || this.roomData.roomTypeNameEn || this.roomData.styleNameEn)
|
||||
: '',
|
||||
roomName: this.roomData && this.roomData.styleNameZh ? this.roomData.styleNameZh : '',
|
||||
roomNameEn: this.roomData && this.roomData.styleNameEn ? this.roomData.styleNameEn : '',
|
||||
roomNameEnDisplay: this.roomData && (this.roomData.styleNameEnDisplay || this.roomData.styleNameEn)
|
||||
? (this.roomData.styleNameEnDisplay || this.roomData.styleNameEn)
|
||||
: '',
|
||||
payMethod: this.payMethod,
|
||||
price: '$500.00',
|
||||
start: this.roomData && this.roomData.startDate ? this.roomData.startDate : '',
|
||||
end: this.roomData && this.roomData.endDate ? this.roomData.endDate : ''
|
||||
}
|
||||
},
|
||||
fallbackToApplication() {
|
||||
const payload = this.buildApplicationPayload()
|
||||
const titleZh = '入住申请'
|
||||
const titleEn = 'Stay Application'
|
||||
const descZh = '支付接口暂未接入，先提交入住申请，由工作人员继续跟进。'
|
||||
const descEn = 'The payment API is not ready yet. Submit a stay application first and let staff follow up.'
|
||||
uni.navigateTo({
|
||||
url: `/pkgService/submit_request/submit_request?title=${encodeURIComponent(this.t('fallbackNavigateTitle'))}&titleZh=${encodeURIComponent(titleZh)}&titleEn=${encodeURIComponent(titleEn)}&desc=${encodeURIComponent(this.t('fallbackNavigateDesc'))}&descZh=${encodeURIComponent(descZh)}&descEn=${encodeURIComponent(descEn)}&payload=${encodeURIComponent(JSON.stringify(payload))}`
|
||||
})
|
||||
},
|
||||
handlePay() {
|
||||
if (this.isSubmitting) return
|
||||
this.confirmPaymentNotice().then((confirmed) => {
|
||||
if (!confirmed) return
|
||||
this.isSubmitting = true
|
||||
uni.showLoading({ title: this.t('paying') })
|
||||
|
||||
setTimeout(() => {
|
||||
uni.hideLoading()
|
||||
this.isSubmitting = false
|
||||
uni.showModal({
|
||||
title: this.t('pendingTitle'),
|
||||
content: this.t('fallbackDesc'),
|
||||
confirmText: this.t('fallbackAction'),
|
||||
cancelText: this.t('laterAction'),
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
this.fallbackToApplication()
|
||||
}
|
||||
}
|
||||
})
|
||||
}, 1500)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.pay-page {
|
||||
background-color: #F8F9FA;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.amount-area {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.amount-text {
|
||||
font-size: 88rpx;
|
||||
text-shadow: 0 10rpx 30rpx rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.bill-card {
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 32rpx;
|
||||
box-shadow: 0 12rpx 40rpx rgba(0,0,0,0.03);
|
||||
}
|
||||
.icon-bg-box {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
border-radius: 16rpx;
|
||||
background-color: #F8F9FA;
|
||||
}
|
||||
|
||||
.bill-head-icon {
|
||||
color: #222222;
|
||||
font-size: 28rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
.bill-divider {
|
||||
height: 2rpx;
|
||||
background-color: transparent;
|
||||
border-bottom: 2rpx dashed #E6E6E6;
|
||||
margin-left: -10rpx;
|
||||
margin-right: -10rpx;
|
||||
}
|
||||
|
||||
.payment-methods {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.method-item {
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 24rpx;
|
||||
border: 4rpx solid transparent;
|
||||
box-shadow: 0 8rpx 20rpx rgba(0,0,0,0.02);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.method-active {
|
||||
border-color: $brand-primary;
|
||||
background-color: #FAFFEB;
|
||||
box-shadow: 0 12rpx 30rpx rgba($brand-primary-rgb, 0.1);
|
||||
transform: translateY(-2rpx);
|
||||
}
|
||||
.method-icon-box {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.method-brand-icon {
|
||||
font-size: 38rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.method-brand-icon--wechat {
|
||||
color: #09b83e;
|
||||
}
|
||||
|
||||
.method-brand-icon--alipay {
|
||||
color: #1677ff;
|
||||
}
|
||||
|
||||
.method-brand-icon--card {
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.radio-box {
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
border-radius: 22rpx;
|
||||
border: 4rpx solid #E6E6E6;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.method-check-icon {
|
||||
color: #222222;
|
||||
font-size: 28rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
.radio-active {
|
||||
border-color: $brand-primary;
|
||||
background-color: $brand-primary;
|
||||
}
|
||||
|
||||
/* 底部固定按钮区 */
|
||||
.fixed-bottom-btn-area {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: #FFFFFF;
|
||||
box-shadow: 0 -10rpx 40rpx rgba(0,0,0,0.04);
|
||||
padding: 30rpx 40rpx calc(30rpx + env(safe-area-inset-bottom));
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
/* 自定义按钮样式 */
|
||||
.custom-btn {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 100rpx;
|
||||
transition: all 0.2s;
|
||||
box-shadow: 0 10rpx 30rpx rgba($brand-primary-rgb, 0.3);
|
||||
}
|
||||
.custom-btn:active {
|
||||
transform: scale(0.95);
|
||||
box-shadow: 0 5rpx 15rpx rgba($brand-primary-rgb, 0.2);
|
||||
}
|
||||
.btn-primary {
|
||||
background-color: $brand-primary;
|
||||
color: #000000;
|
||||
}
|
||||
.btn-disabled {
|
||||
opacity: 0.6;
|
||||
pointer-events: none;
|
||||
}
|
||||
.clamp-text-1 {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.tip-panel {
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 32rpx;
|
||||
box-shadow: 0 12rpx 40rpx rgba(0,0,0,0.03);
|
||||
}
|
||||
|
||||
.tip-action {
|
||||
height: 88rpx;
|
||||
border-radius: 999rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #000000;
|
||||
background-color: rgba($brand-primary-rgb, 0.18);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user