703 lines
17 KiB
Vue
703 lines
17 KiB
Vue
|
<template>
|
|||
|
|
<view class="plan-select-page">
|
|||
|
|
<!-- 自定义导航栏 -->
|
|||
|
|
<view class="custom-nav safe-area-top">
|
|||
|
|
<view class="nav-content">
|
|||
|
|
<view class="nav-btn" @click="goBack">
|
|||
|
|
<uni-icons type="left" size="22" color="#1E293B"></uni-icons>
|
|||
|
|
</view>
|
|||
|
|
<text class="nav-title">选择套餐</text>
|
|||
|
|
<view class="nav-btn"></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<scroll-view scroll-y class="page-content">
|
|||
|
|
<!-- 套餐列表 -->
|
|||
|
|
<view class="plan-list">
|
|||
|
|
<view
|
|||
|
|
v-for="(plan, index) in plans"
|
|||
|
|
:key="plan.id"
|
|||
|
|
class="plan-card"
|
|||
|
|
:class="{ active: selectedPlanId === plan.id, recommended: plan.isRecommended }"
|
|||
|
|
@click="selectPlan(plan)"
|
|||
|
|
>
|
|||
|
|
<view v-if="plan.isRecommended" class="recommend-badge">推荐</view>
|
|||
|
|
<view class="plan-header">
|
|||
|
|
<view class="plan-info">
|
|||
|
|
<text class="plan-name">{{plan.name}}</text>
|
|||
|
|
<text class="plan-desc">{{plan.description}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="plan-price">
|
|||
|
|
<text class="price">¥{{plan.monthlyPrice}}</text>
|
|||
|
|
<text class="unit">/月</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="plan-features">
|
|||
|
|
<view class="feature-item">
|
|||
|
|
<uni-icons type="checkmarkempty" size="16" color="#67C23A"></uni-icons>
|
|||
|
|
<text>最多 {{plan.maxApartments}} 栋公寓</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="feature-item">
|
|||
|
|
<uni-icons type="checkmarkempty" size="16" color="#67C23A"></uni-icons>
|
|||
|
|
<text>最多 {{plan.maxRooms}} 个房间</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="feature-item">
|
|||
|
|
<uni-icons type="checkmarkempty" size="16" color="#67C23A"></uni-icons>
|
|||
|
|
<text>最多 {{plan.maxUsers}} 个用户</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="select-indicator" v-if="selectedPlanId === plan.id">
|
|||
|
|
<uni-icons type="checkmarkempty" size="20" color="#FFFFFF"></uni-icons>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 购买时长 -->
|
|||
|
|
<view class="section-card" v-if="selectedPlanId">
|
|||
|
|
<view class="section-title">购买时长</view>
|
|||
|
|
<view class="period-list">
|
|||
|
|
<view
|
|||
|
|
v-for="period in periods"
|
|||
|
|
:key="period.value"
|
|||
|
|
class="period-item"
|
|||
|
|
:class="{ active: selectedMonths === period.value, discount: period.discount }"
|
|||
|
|
@click="selectPeriod(period.value)"
|
|||
|
|
>
|
|||
|
|
<text class="period-label">{{period.label}}</text>
|
|||
|
|
<text v-if="period.discount" class="discount-tag">省{{period.discount}}%</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 费用明细 -->
|
|||
|
|
<view class="section-card price-detail" v-if="selectedPlanId">
|
|||
|
|
<view class="section-title">费用明细</view>
|
|||
|
|
<view class="price-list">
|
|||
|
|
<view class="price-row">
|
|||
|
|
<text class="row-label">套餐单价</text>
|
|||
|
|
<text class="row-value">¥{{selectedPlan?.monthlyPrice || 0}}/月</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="price-row">
|
|||
|
|
<text class="row-label">购买时长</text>
|
|||
|
|
<text class="row-value">{{selectedMonths}} 个月</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="price-row">
|
|||
|
|
<text class="row-label">基础费用</text>
|
|||
|
|
<text class="row-value">¥{{baseAmount}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="price-row" v-if="discountAmount > 0">
|
|||
|
|
<text class="row-label">优惠金额</text>
|
|||
|
|
<text class="row-value discount">-¥{{discountAmount}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="price-row total">
|
|||
|
|
<text class="row-label">合计</text>
|
|||
|
|
<text class="row-value total-price">¥{{totalAmount}}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 支付方式说明 -->
|
|||
|
|
<view class="section-card" v-if="paymentSettings">
|
|||
|
|
<view class="section-title">支付方式</view>
|
|||
|
|
<view class="payment-methods">
|
|||
|
|
<view class="payment-item" v-if="paymentSettings.alipayAccount">
|
|||
|
|
<view class="payment-icon alipay">
|
|||
|
|
<text>支</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="payment-info">
|
|||
|
|
<text class="payment-name">支付宝</text>
|
|||
|
|
<text class="payment-account">{{paymentSettings.alipayAccount}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="copy-btn" @click="copyText(paymentSettings.alipayAccount)">复制</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="payment-item" v-if="paymentSettings.wechatId">
|
|||
|
|
<view class="payment-icon wechat">
|
|||
|
|
<text>微</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="payment-info">
|
|||
|
|
<text class="payment-name">微信支付</text>
|
|||
|
|
<text class="payment-account">{{paymentSettings.wechatId}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="copy-btn" @click="copyText(paymentSettings.wechatId)">复制</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="payment-item" v-if="paymentSettings.bankAccount">
|
|||
|
|
<view class="payment-icon bank">
|
|||
|
|
<text>银</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="payment-info">
|
|||
|
|
<text class="payment-name">银行转账</text>
|
|||
|
|
<text class="payment-account">{{paymentSettings.bankName}} {{paymentSettings.bankAccount}}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="payment-notice">
|
|||
|
|
<text class="notice-title">注意事项：</text>
|
|||
|
|
<text class="notice-item">1. 转账时请备注您的账号信息</text>
|
|||
|
|
<text class="notice-item">2. 转账完成后，请联系客服确认</text>
|
|||
|
|
<text class="notice-item" v-if="paymentSettings.servicePhone">3. 客服电话：{{paymentSettings.servicePhone}}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="safe-area-bottom" style="height: 120rpx;"></view>
|
|||
|
|
</scroll-view>
|
|||
|
|
|
|||
|
|
<!-- 底部操作栏 -->
|
|||
|
|
<view class="bottom-bar safe-area-bottom" v-if="selectedPlanId">
|
|||
|
|
<view class="price-summary">
|
|||
|
|
<text class="summary-label">合计：</text>
|
|||
|
|
<text class="summary-price">¥{{totalAmount}}</text>
|
|||
|
|
</view>
|
|||
|
|
<button class="submit-btn" :loading="submitting" @click="createOrder">创建订单</button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { billingApi } from '@/api/index.js'
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
plans: [],
|
|||
|
|
selectedPlanId: null,
|
|||
|
|
selectedMonths: 1,
|
|||
|
|
periods: [
|
|||
|
|
{ label: '1个月', value: 1, discount: 0 },
|
|||
|
|
{ label: '3个月', value: 3, discount: 5 },
|
|||
|
|
{ label: '6个月', value: 6, discount: 10 },
|
|||
|
|
{ label: '12个月', value: 12, discount: 15 }
|
|||
|
|
],
|
|||
|
|
paymentSettings: null,
|
|||
|
|
submitting: false,
|
|||
|
|
baseAmount: 0,
|
|||
|
|
discountAmount: 0,
|
|||
|
|
totalAmount: 0
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
selectedPlan() {
|
|||
|
|
return this.plans.find(p => p.id === this.selectedPlanId)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
selectedPlanId() {
|
|||
|
|
this.calculatePrice()
|
|||
|
|
},
|
|||
|
|
selectedMonths() {
|
|||
|
|
this.calculatePrice()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad() {
|
|||
|
|
this.loadPlans()
|
|||
|
|
this.loadPaymentSettings()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
async loadPlans() {
|
|||
|
|
try {
|
|||
|
|
const res = await billingApi.getPlans()
|
|||
|
|
if (res.code === 200) {
|
|||
|
|
// 过滤掉免费版（monthlyPrice <= 0）和未启用的套餐
|
|||
|
|
this.plans = (res.data || []).filter(p => p.status === 'active' && p.monthlyPrice > 0)
|
|||
|
|
// 如果有推荐套餐，默认选中
|
|||
|
|
const recommended = this.plans.find(p => p.isRecommended)
|
|||
|
|
if (recommended) {
|
|||
|
|
this.selectedPlanId = recommended.id
|
|||
|
|
} else if (this.plans.length > 0) {
|
|||
|
|
this.selectedPlanId = this.plans[0].id
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('加载套餐失败:', error)
|
|||
|
|
uni.showToast({ title: '加载套餐失败', icon: 'none' })
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
async loadPaymentSettings() {
|
|||
|
|
try {
|
|||
|
|
const res = await billingApi.getPaymentSettings()
|
|||
|
|
if (res.code === 200) {
|
|||
|
|
this.paymentSettings = res.data
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('加载支付设置失败:', error)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
selectPlan(plan) {
|
|||
|
|
this.selectedPlanId = plan.id
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
selectPeriod(months) {
|
|||
|
|
this.selectedMonths = months
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
calculatePrice() {
|
|||
|
|
if (!this.selectedPlan) {
|
|||
|
|
this.baseAmount = 0
|
|||
|
|
this.discountAmount = 0
|
|||
|
|
this.totalAmount = 0
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const monthlyPrice = this.selectedPlan.monthlyPrice
|
|||
|
|
const baseAmount = monthlyPrice * this.selectedMonths
|
|||
|
|
|
|||
|
|
// 计算折扣
|
|||
|
|
const period = this.periods.find(p => p.value === this.selectedMonths)
|
|||
|
|
const discountRate = period ? period.discount / 100 : 0
|
|||
|
|
const discountAmount = Math.round(baseAmount * discountRate)
|
|||
|
|
|
|||
|
|
this.baseAmount = baseAmount
|
|||
|
|
this.discountAmount = discountAmount
|
|||
|
|
this.totalAmount = baseAmount - discountAmount
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
async createOrder() {
|
|||
|
|
if (!this.selectedPlanId) {
|
|||
|
|
uni.showToast({ title: '请选择套餐', icon: 'none' })
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.submitting = true
|
|||
|
|
try {
|
|||
|
|
const res = await billingApi.createOrder({
|
|||
|
|
planId: this.selectedPlanId,
|
|||
|
|
months: this.selectedMonths
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
if (res.code === 200) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '订单创建成功',
|
|||
|
|
icon: 'success'
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 跳转到订单详情页
|
|||
|
|
setTimeout(() => {
|
|||
|
|
uni.redirectTo({
|
|||
|
|
url: `/pages/billing/order-detail?id=${res.data.order.id}`
|
|||
|
|
})
|
|||
|
|
}, 1500)
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: res.message || '创建订单失败',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('创建订单失败:', error)
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '创建订单失败',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
} finally {
|
|||
|
|
this.submitting = false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
copyText(text) {
|
|||
|
|
uni.setClipboardData({
|
|||
|
|
data: text,
|
|||
|
|
success: () => {
|
|||
|
|
uni.showToast({ title: '已复制', icon: 'success' })
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
goBack() {
|
|||
|
|
uni.navigateBack()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.plan-select-page {
|
|||
|
|
min-height: 100vh;
|
|||
|
|
background: #F8FAFC;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 导航栏 */
|
|||
|
|
.custom-nav {
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
border-bottom: 2rpx solid #F1F5F9;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nav-content {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
padding: 20rpx 32rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nav-btn {
|
|||
|
|
width: 72rpx;
|
|||
|
|
height: 72rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nav-title {
|
|||
|
|
font-size: 34rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #1E293B;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 页面内容 */
|
|||
|
|
.page-content {
|
|||
|
|
flex: 1;
|
|||
|
|
padding: 24rpx 32rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 套餐卡片 */
|
|||
|
|
.plan-list {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 24rpx;
|
|||
|
|
margin-bottom: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.plan-card {
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
border-radius: 24rpx;
|
|||
|
|
padding: 32rpx;
|
|||
|
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
|
|||
|
|
border: 4rpx solid transparent;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.plan-card.active {
|
|||
|
|
border-color: #667eea;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.plan-card.recommended {
|
|||
|
|
background: linear-gradient(135deg, #667eea08 0%, #764ba208 100%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.recommend-badge {
|
|||
|
|
position: absolute;
|
|||
|
|
top: -4rpx;
|
|||
|
|
right: 32rpx;
|
|||
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
padding: 8rpx 24rpx;
|
|||
|
|
border-radius: 0 0 12rpx 12rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.plan-header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
margin-bottom: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.plan-info {
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.plan-name {
|
|||
|
|
display: block;
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: #1E293B;
|
|||
|
|
margin-bottom: 8rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.plan-desc {
|
|||
|
|
display: block;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #64748B;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.plan-price {
|
|||
|
|
text-align: right;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.plan-price .price {
|
|||
|
|
font-size: 48rpx;
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: #F56C6C;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.plan-price .unit {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #94A3B8;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.plan-features {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 16rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.feature-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 12rpx;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #64748B;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.select-indicator {
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 32rpx;
|
|||
|
|
right: 32rpx;
|
|||
|
|
width: 48rpx;
|
|||
|
|
height: 48rpx;
|
|||
|
|
background: #667eea;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 区块卡片 */
|
|||
|
|
.section-card {
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
border-radius: 24rpx;
|
|||
|
|
padding: 28rpx;
|
|||
|
|
margin-bottom: 24rpx;
|
|||
|
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-title {
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: #1E293B;
|
|||
|
|
margin-bottom: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 时长选择 */
|
|||
|
|
.period-list {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: 16rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.period-item {
|
|||
|
|
padding: 20rpx 32rpx;
|
|||
|
|
background: #F8FAFC;
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
border: 2rpx solid transparent;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 8rpx;
|
|||
|
|
min-width: 140rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.period-item.active {
|
|||
|
|
background: #667eea;
|
|||
|
|
border-color: #667eea;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.period-item.discount {
|
|||
|
|
border-color: #F56C6C;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.period-item.active.discount {
|
|||
|
|
border-color: #667eea;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.period-label {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #1E293B;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.period-item.active .period-label {
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.discount-tag {
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
color: #F56C6C;
|
|||
|
|
background: #FEE2E2;
|
|||
|
|
padding: 4rpx 12rpx;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.period-item.active .discount-tag {
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
background: rgba(255, 255, 255, 0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 费用明细 */
|
|||
|
|
.price-detail .price-list {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.price-row {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.price-row.total {
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
padding-top: 20rpx;
|
|||
|
|
border-top: 2rpx solid #F1F5F9;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.row-label {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #64748B;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.row-value {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #1E293B;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.row-value.discount {
|
|||
|
|
color: #67C23A;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.row-value.total-price {
|
|||
|
|
font-size: 40rpx;
|
|||
|
|
color: #F56C6C;
|
|||
|
|
font-weight: 700;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 支付方式 */
|
|||
|
|
.payment-methods {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.payment-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 20rpx;
|
|||
|
|
padding: 20rpx;
|
|||
|
|
background: #F8FAFC;
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.payment-icon {
|
|||
|
|
width: 64rpx;
|
|||
|
|
height: 64rpx;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.payment-icon.alipay {
|
|||
|
|
background: #1677FF;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.payment-icon.wechat {
|
|||
|
|
background: #07C160;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.payment-icon.bank {
|
|||
|
|
background: #FF6B6B;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.payment-icon text {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
font-weight: 700;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.payment-info {
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 4rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.payment-name {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #1E293B;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.payment-account {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #64748B;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.copy-btn {
|
|||
|
|
padding: 12rpx 24rpx;
|
|||
|
|
background: #667eea;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.payment-notice {
|
|||
|
|
margin-top: 24rpx;
|
|||
|
|
padding-top: 24rpx;
|
|||
|
|
border-top: 2rpx solid #F1F5F9;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 12rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.notice-title {
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #1E293B;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.notice-item {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #64748B;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 底部操作栏 */
|
|||
|
|
.bottom-bar {
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
border-top: 2rpx solid #F1F5F9;
|
|||
|
|
padding: 24rpx 32rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
gap: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.price-summary {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: baseline;
|
|||
|
|
gap: 8rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.summary-label {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #64748B;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.summary-price {
|
|||
|
|
font-size: 40rpx;
|
|||
|
|
color: #F56C6C;
|
|||
|
|
font-weight: 700;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.submit-btn {
|
|||
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
padding: 28rpx 48rpx;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
border: none;
|
|||
|
|
}
|
|||
|
|
</style>
|