You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
961 lines
21 KiB
961 lines
21 KiB
<!--学员订单管理页面-->
|
|
<template>
|
|
<view class="main_box">
|
|
<!-- 自定义导航栏 -->
|
|
<view class="navbar_section">
|
|
<view class="navbar_back" @click="goBack">
|
|
<text class="back_icon">‹</text>
|
|
</view>
|
|
<view class="navbar_title">订单管理</view>
|
|
<view class="navbar_action"></view>
|
|
</view>
|
|
|
|
<!-- 学员信息 -->
|
|
<view class="student_info_section" v-if="studentInfo">
|
|
<view class="student_name">{{ studentInfo.name }}</view>
|
|
<view class="order_stats">
|
|
<text class="stat_item">总订单：{{ orderStats.total_orders || 0 }}个</text>
|
|
<text class="stat_item">待付款：{{ orderStats.pending_payment || 0 }}个</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 订单状态筛选 -->
|
|
<view class="filter_section">
|
|
<view class="filter_tabs">
|
|
<view
|
|
v-for="tab in statusTabs"
|
|
:key="tab.value"
|
|
:class="['filter_tab', activeStatus === tab.value ? 'active' : '']"
|
|
@click="changeStatus(tab.value)"
|
|
>
|
|
{{ tab.text }}
|
|
<view class="tab_badge" v-if="tab.count > 0">{{ tab.count }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 订单列表 -->
|
|
<view class="orders_section">
|
|
<view v-if="loading" class="loading_section">
|
|
<view class="loading_text">加载中...</view>
|
|
</view>
|
|
|
|
<view v-else-if="filteredOrders.length === 0" class="empty_section">
|
|
<view class="empty_icon">📋</view>
|
|
<view class="empty_text">暂无订单</view>
|
|
<view class="empty_hint">完成购买后订单会在这里显示</view>
|
|
</view>
|
|
|
|
<view v-else class="orders_list">
|
|
<view
|
|
v-for="order in filteredOrders"
|
|
:key="order.id"
|
|
class="order_item"
|
|
@click="viewOrderDetail(order)"
|
|
>
|
|
<view class="order_header">
|
|
<view class="order_number">订单号：{{ order.order_no }}</view>
|
|
<view class="order_status" :class="order.status">
|
|
{{ getStatusText(order.status) }}
|
|
</view>
|
|
</view>
|
|
|
|
<view class="order_content">
|
|
<view class="order_info">
|
|
<view class="product_name">{{ order.product_name }}</view>
|
|
<view class="product_specs">{{ order.product_specs }}</view>
|
|
<view class="order_meta">
|
|
<text class="meta_item">数量：{{ order.quantity }}</text>
|
|
<text class="meta_item">{{ formatDate(order.create_time) }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="order_amount">
|
|
<view class="amount_label">订单金额</view>
|
|
<view class="amount_value">¥{{ order.total_amount }}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="order_actions">
|
|
<fui-button
|
|
v-if="order.status === 'pending_payment'"
|
|
background="#29d3b4"
|
|
size="small"
|
|
@click.stop="payOrder(order)"
|
|
>
|
|
立即付款
|
|
</fui-button>
|
|
|
|
<fui-button
|
|
v-if="order.status === 'pending_payment'"
|
|
background="transparent"
|
|
color="#999"
|
|
size="small"
|
|
@click.stop="cancelOrder(order)"
|
|
>
|
|
取消订单
|
|
</fui-button>
|
|
|
|
<fui-button
|
|
v-if="order.status === 'completed'"
|
|
background="transparent"
|
|
color="#666"
|
|
size="small"
|
|
@click.stop="viewOrderDetail(order)"
|
|
>
|
|
查看详情
|
|
</fui-button>
|
|
|
|
<fui-button
|
|
v-if="order.status === 'refunding' || order.status === 'refunded'"
|
|
background="transparent"
|
|
color="#f39c12"
|
|
size="small"
|
|
@click.stop="viewRefundDetail(order)"
|
|
>
|
|
查看退款
|
|
</fui-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 加载更多 -->
|
|
<view class="load_more_section" v-if="!loading && hasMore">
|
|
<fui-button
|
|
background="transparent"
|
|
color="#666"
|
|
@click="loadMoreOrders"
|
|
:loading="loadingMore"
|
|
>
|
|
{{ loadingMore ? '加载中...' : '加载更多' }}
|
|
</fui-button>
|
|
</view>
|
|
|
|
<!-- 支付方式选择弹窗 -->
|
|
<view class="payment_popup" v-if="showPaymentPopup" @click="closePaymentPopup">
|
|
<view class="popup_content" @click.stop>
|
|
<view class="popup_header">
|
|
<view class="popup_title">选择支付方式</view>
|
|
<view class="popup_close" @click="closePaymentPopup">×</view>
|
|
</view>
|
|
|
|
<view class="payment_order_info" v-if="selectedOrder">
|
|
<view class="order_summary">
|
|
<view class="summary_row">
|
|
<text class="summary_label">订单号：</text>
|
|
<text class="summary_value">{{ selectedOrder.order_no }}</text>
|
|
</view>
|
|
<view class="summary_row">
|
|
<text class="summary_label">商品：</text>
|
|
<text class="summary_value">{{ selectedOrder.product_name }}</text>
|
|
</view>
|
|
<view class="summary_row">
|
|
<text class="summary_label">金额：</text>
|
|
<text class="summary_value amount">¥{{ selectedOrder.total_amount }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="payment_methods">
|
|
<view
|
|
v-for="method in paymentMethods"
|
|
:key="method.value"
|
|
:class="['payment_method', selectedPaymentMethod === method.value ? 'selected' : '']"
|
|
@click="selectPaymentMethod(method.value)"
|
|
>
|
|
<view class="method_icon">
|
|
<image :src="method.icon" class="icon_image"></image>
|
|
</view>
|
|
<view class="method_info">
|
|
<view class="method_name">{{ method.name }}</view>
|
|
<view class="method_desc">{{ method.desc }}</view>
|
|
</view>
|
|
<view class="method_radio">
|
|
<view v-if="selectedPaymentMethod === method.value" class="radio_checked">✓</view>
|
|
<view v-else class="radio_unchecked"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="popup_actions">
|
|
<fui-button
|
|
background="#f8f9fa"
|
|
color="#666"
|
|
@click="closePaymentPopup"
|
|
>
|
|
取消
|
|
</fui-button>
|
|
<fui-button
|
|
background="#29d3b4"
|
|
:loading="paying"
|
|
@click="confirmPayment"
|
|
>
|
|
{{ paying ? '支付中...' : '确认支付' }}
|
|
</fui-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import apiRoute from '@/api/apiRoute.js'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
studentId: 0,
|
|
studentInfo: {},
|
|
ordersList: [],
|
|
filteredOrders: [],
|
|
orderStats: {},
|
|
loading: false,
|
|
loadingMore: false,
|
|
hasMore: true,
|
|
currentPage: 1,
|
|
activeStatus: 'all',
|
|
showPaymentPopup: false,
|
|
selectedOrder: null,
|
|
selectedPaymentMethod: 'wxpay',
|
|
paying: false,
|
|
statusTabs: [
|
|
{ value: 'all', text: '全部', count: 0 },
|
|
{ value: 'pending_payment', text: '待付款', count: 0 },
|
|
{ value: 'paid', text: '已付款', count: 0 },
|
|
{ value: 'completed', text: '已完成', count: 0 },
|
|
{ value: 'cancelled', text: '已取消', count: 0 },
|
|
{ value: 'refunded', text: '已退款', count: 0 }
|
|
],
|
|
paymentMethods: [
|
|
{
|
|
value: 'wxpay',
|
|
name: '微信支付',
|
|
desc: '推荐使用',
|
|
icon: '/static/payment/wxpay.png'
|
|
},
|
|
{
|
|
value: 'alipay',
|
|
name: '支付宝',
|
|
desc: '快捷安全',
|
|
icon: '/static/payment/alipay.png'
|
|
}
|
|
]
|
|
}
|
|
},
|
|
|
|
onLoad(options) {
|
|
this.studentId = parseInt(options.student_id) || 0
|
|
if (this.studentId) {
|
|
this.initPage()
|
|
} else {
|
|
uni.showToast({
|
|
title: '参数错误',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
goBack() {
|
|
uni.navigateBack()
|
|
},
|
|
|
|
async initPage() {
|
|
await this.loadStudentInfo()
|
|
await this.loadOrders()
|
|
this.updateStatusCounts()
|
|
},
|
|
|
|
async loadStudentInfo() {
|
|
try {
|
|
// 模拟获取学员信息
|
|
const mockStudentInfo = {
|
|
id: this.studentId,
|
|
name: '小明'
|
|
}
|
|
this.studentInfo = mockStudentInfo
|
|
} catch (error) {
|
|
console.error('获取学员信息失败:', error)
|
|
}
|
|
},
|
|
|
|
async loadOrders() {
|
|
this.loading = true
|
|
try {
|
|
console.log('加载订单列表:', this.studentId)
|
|
|
|
// 模拟API调用
|
|
// const response = await apiRoute.getStudentOrders({
|
|
// student_id: this.studentId,
|
|
// page: this.currentPage,
|
|
// limit: 10
|
|
// })
|
|
|
|
// 使用模拟数据
|
|
const mockResponse = {
|
|
code: 1,
|
|
data: {
|
|
list: [
|
|
{
|
|
id: 1,
|
|
order_no: 'XL202401150001',
|
|
product_name: '少儿体适能课程包',
|
|
product_specs: '12节课/包',
|
|
quantity: 1,
|
|
total_amount: '1200.00',
|
|
status: 'pending_payment',
|
|
create_time: '2024-01-15 10:30:00',
|
|
payment_method: '',
|
|
payment_time: ''
|
|
},
|
|
{
|
|
id: 2,
|
|
order_no: 'XL202401100002',
|
|
product_name: '基础体能训练课程',
|
|
product_specs: '24节课/包',
|
|
quantity: 1,
|
|
total_amount: '2400.00',
|
|
status: 'completed',
|
|
create_time: '2024-01-10 14:20:00',
|
|
payment_method: 'wxpay',
|
|
payment_time: '2024-01-10 14:25:00'
|
|
},
|
|
{
|
|
id: 3,
|
|
order_no: 'XL202401050003',
|
|
product_name: '专项技能训练',
|
|
product_specs: '8节课/包',
|
|
quantity: 1,
|
|
total_amount: '800.00',
|
|
status: 'refunded',
|
|
create_time: '2024-01-05 09:15:00',
|
|
payment_method: 'alipay',
|
|
payment_time: '2024-01-05 09:20:00',
|
|
refund_time: '2024-01-08 16:30:00',
|
|
refund_amount: '800.00'
|
|
}
|
|
],
|
|
total: 3,
|
|
has_more: false,
|
|
stats: {
|
|
total_orders: 3,
|
|
pending_payment: 1,
|
|
paid: 1,
|
|
completed: 1,
|
|
cancelled: 0,
|
|
refunded: 1
|
|
}
|
|
}
|
|
}
|
|
|
|
if (mockResponse.code === 1) {
|
|
const newList = mockResponse.data.list || []
|
|
if (this.currentPage === 1) {
|
|
this.ordersList = newList
|
|
} else {
|
|
this.ordersList = [...this.ordersList, ...newList]
|
|
}
|
|
|
|
this.hasMore = mockResponse.data.has_more || false
|
|
this.orderStats = mockResponse.data.stats || {}
|
|
this.applyStatusFilter()
|
|
console.log('订单数据加载成功:', this.ordersList)
|
|
} else {
|
|
uni.showToast({
|
|
title: mockResponse.msg || '获取订单列表失败',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
} catch (error) {
|
|
console.error('获取订单列表失败:', error)
|
|
uni.showToast({
|
|
title: '获取订单列表失败',
|
|
icon: 'none'
|
|
})
|
|
} finally {
|
|
this.loading = false
|
|
this.loadingMore = false
|
|
}
|
|
},
|
|
|
|
async loadMoreOrders() {
|
|
if (this.loadingMore || !this.hasMore) return
|
|
|
|
this.loadingMore = true
|
|
this.currentPage++
|
|
await this.loadOrders()
|
|
},
|
|
|
|
changeStatus(status) {
|
|
this.activeStatus = status
|
|
this.applyStatusFilter()
|
|
},
|
|
|
|
applyStatusFilter() {
|
|
if (this.activeStatus === 'all') {
|
|
this.filteredOrders = [...this.ordersList]
|
|
} else {
|
|
this.filteredOrders = this.ordersList.filter(order => order.status === this.activeStatus)
|
|
}
|
|
},
|
|
|
|
updateStatusCounts() {
|
|
const counts = {}
|
|
this.ordersList.forEach(order => {
|
|
counts[order.status] = (counts[order.status] || 0) + 1
|
|
})
|
|
|
|
this.statusTabs.forEach(tab => {
|
|
if (tab.value === 'all') {
|
|
tab.count = this.ordersList.length
|
|
} else {
|
|
tab.count = counts[tab.value] || 0
|
|
}
|
|
})
|
|
},
|
|
|
|
getStatusText(status) {
|
|
const statusMap = {
|
|
'pending_payment': '待付款',
|
|
'paid': '已付款',
|
|
'completed': '已完成',
|
|
'cancelled': '已取消',
|
|
'refunding': '退款中',
|
|
'refunded': '已退款'
|
|
}
|
|
return statusMap[status] || status
|
|
},
|
|
|
|
formatDate(dateString) {
|
|
const date = new Date(dateString)
|
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
|
const day = String(date.getDate()).padStart(2, '0')
|
|
const hours = String(date.getHours()).padStart(2, '0')
|
|
const minutes = String(date.getMinutes()).padStart(2, '0')
|
|
return `${month}-${day} ${hours}:${minutes}`
|
|
},
|
|
|
|
viewOrderDetail(order) {
|
|
console.log('查看订单详情:', order)
|
|
uni.showModal({
|
|
title: '订单详情',
|
|
content: `订单号：${order.order_no}\n商品：${order.product_name}\n金额：¥${order.total_amount}\n状态：${this.getStatusText(order.status)}`,
|
|
showCancel: false
|
|
})
|
|
},
|
|
|
|
payOrder(order) {
|
|
this.selectedOrder = order
|
|
this.showPaymentPopup = true
|
|
},
|
|
|
|
closePaymentPopup() {
|
|
this.showPaymentPopup = false
|
|
this.selectedOrder = null
|
|
this.selectedPaymentMethod = 'wxpay'
|
|
},
|
|
|
|
selectPaymentMethod(method) {
|
|
this.selectedPaymentMethod = method
|
|
},
|
|
|
|
async confirmPayment() {
|
|
if (!this.selectedOrder || this.paying) return
|
|
|
|
this.paying = true
|
|
try {
|
|
console.log('确认支付:', {
|
|
order_id: this.selectedOrder.id,
|
|
payment_method: this.selectedPaymentMethod
|
|
})
|
|
|
|
// 模拟支付
|
|
await new Promise(resolve => setTimeout(resolve, 2000))
|
|
const mockResponse = { code: 1, message: '支付成功' }
|
|
|
|
if (mockResponse.code === 1) {
|
|
uni.showToast({
|
|
title: '支付成功',
|
|
icon: 'success'
|
|
})
|
|
|
|
// 更新订单状态
|
|
const orderIndex = this.ordersList.findIndex(o => o.id === this.selectedOrder.id)
|
|
if (orderIndex !== -1) {
|
|
this.ordersList[orderIndex].status = 'paid'
|
|
this.ordersList[orderIndex].payment_method = this.selectedPaymentMethod
|
|
this.ordersList[orderIndex].payment_time = new Date().toISOString().slice(0, 19).replace('T', ' ')
|
|
}
|
|
|
|
this.closePaymentPopup()
|
|
this.applyStatusFilter()
|
|
this.updateStatusCounts()
|
|
} else {
|
|
uni.showToast({
|
|
title: mockResponse.message || '支付失败',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
} catch (error) {
|
|
console.error('支付失败:', error)
|
|
uni.showToast({
|
|
title: '支付失败',
|
|
icon: 'none'
|
|
})
|
|
} finally {
|
|
this.paying = false
|
|
}
|
|
},
|
|
|
|
async cancelOrder(order) {
|
|
uni.showModal({
|
|
title: '确认取消',
|
|
content: '确定要取消此订单吗？',
|
|
success: async (res) => {
|
|
if (res.confirm) {
|
|
try {
|
|
console.log('取消订单:', order.id)
|
|
|
|
// 模拟取消订单
|
|
await new Promise(resolve => setTimeout(resolve, 500))
|
|
const mockResponse = { code: 1, message: '取消成功' }
|
|
|
|
if (mockResponse.code === 1) {
|
|
uni.showToast({
|
|
title: '取消成功',
|
|
icon: 'success'
|
|
})
|
|
|
|
// 更新订单状态
|
|
const orderIndex = this.ordersList.findIndex(o => o.id === order.id)
|
|
if (orderIndex !== -1) {
|
|
this.ordersList[orderIndex].status = 'cancelled'
|
|
}
|
|
|
|
this.applyStatusFilter()
|
|
this.updateStatusCounts()
|
|
} else {
|
|
uni.showToast({
|
|
title: mockResponse.message || '取消失败',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
} catch (error) {
|
|
console.error('取消订单失败:', error)
|
|
uni.showToast({
|
|
title: '取消失败',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
viewRefundDetail(order) {
|
|
console.log('查看退款详情:', order)
|
|
const refundInfo = `订单号：${order.order_no}\n退款金额：¥${order.refund_amount || order.total_amount}\n退款时间：${order.refund_time || '处理中'}`
|
|
uni.showModal({
|
|
title: '退款详情',
|
|
content: refundInfo,
|
|
showCancel: false
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.main_box {
|
|
background: #f8f9fa;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
// 自定义导航栏
|
|
.navbar_section {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background: #29D3B4;
|
|
padding: 40rpx 32rpx 20rpx;
|
|
|
|
// 小程序端适配状态栏
|
|
// #ifdef MP-WEIXIN
|
|
padding-top: 80rpx;
|
|
// #endif
|
|
|
|
.navbar_back {
|
|
width: 60rpx;
|
|
|
|
.back_icon {
|
|
color: #fff;
|
|
font-size: 40rpx;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
.navbar_title {
|
|
color: #fff;
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.navbar_action {
|
|
width: 60rpx;
|
|
}
|
|
}
|
|
|
|
// 学员信息
|
|
.student_info_section {
|
|
background: #fff;
|
|
padding: 24rpx 32rpx;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
|
|
.student_name {
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.order_stats {
|
|
display: flex;
|
|
gap: 24rpx;
|
|
|
|
.stat_item {
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 状态筛选
|
|
.filter_section {
|
|
background: #fff;
|
|
margin: 20rpx;
|
|
border-radius: 16rpx;
|
|
padding: 24rpx 32rpx;
|
|
|
|
.filter_tabs {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 16rpx;
|
|
|
|
.filter_tab {
|
|
position: relative;
|
|
padding: 12rpx 24rpx;
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
background: #f8f9fa;
|
|
border-radius: 20rpx;
|
|
|
|
&.active {
|
|
color: #fff;
|
|
background: #29D3B4;
|
|
}
|
|
|
|
.tab_badge {
|
|
position: absolute;
|
|
top: -8rpx;
|
|
right: -8rpx;
|
|
background: #ff4757;
|
|
color: #fff;
|
|
font-size: 18rpx;
|
|
padding: 2rpx 8rpx;
|
|
border-radius: 12rpx;
|
|
min-width: 16rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 订单列表
|
|
.orders_section {
|
|
margin: 0 20rpx;
|
|
|
|
.loading_section, .empty_section {
|
|
background: #fff;
|
|
border-radius: 16rpx;
|
|
padding: 80rpx 32rpx;
|
|
text-align: center;
|
|
|
|
.loading_text, .empty_text {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.empty_icon {
|
|
font-size: 80rpx;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.empty_hint {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
}
|
|
|
|
.orders_list {
|
|
.order_item {
|
|
background: #fff;
|
|
border-radius: 16rpx;
|
|
padding: 24rpx;
|
|
margin-bottom: 20rpx;
|
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
|
|
|
.order_header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20rpx;
|
|
|
|
.order_number {
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.order_status {
|
|
font-size: 24rpx;
|
|
padding: 6rpx 12rpx;
|
|
border-radius: 12rpx;
|
|
|
|
&.pending_payment {
|
|
color: #f39c12;
|
|
background: rgba(243, 156, 18, 0.1);
|
|
}
|
|
|
|
&.paid {
|
|
color: #3498db;
|
|
background: rgba(52, 152, 219, 0.1);
|
|
}
|
|
|
|
&.completed {
|
|
color: #27ae60;
|
|
background: rgba(39, 174, 96, 0.1);
|
|
}
|
|
|
|
&.cancelled {
|
|
color: #95a5a6;
|
|
background: rgba(149, 165, 166, 0.1);
|
|
}
|
|
|
|
&.refunded {
|
|
color: #e74c3c;
|
|
background: rgba(231, 76, 60, 0.1);
|
|
}
|
|
}
|
|
}
|
|
|
|
.order_content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
margin-bottom: 20rpx;
|
|
|
|
.order_info {
|
|
flex: 1;
|
|
|
|
.product_name {
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.product_specs {
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.order_meta {
|
|
display: flex;
|
|
gap: 16rpx;
|
|
|
|
.meta_item {
|
|
font-size: 22rpx;
|
|
color: #999;
|
|
}
|
|
}
|
|
}
|
|
|
|
.order_amount {
|
|
text-align: right;
|
|
|
|
.amount_label {
|
|
font-size: 22rpx;
|
|
color: #666;
|
|
margin-bottom: 4rpx;
|
|
}
|
|
|
|
.amount_value {
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: #e74c3c;
|
|
}
|
|
}
|
|
}
|
|
|
|
.order_actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 16rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 加载更多
|
|
.load_more_section {
|
|
padding: 40rpx 20rpx 80rpx;
|
|
}
|
|
|
|
// 支付弹窗
|
|
.payment_popup {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 1000;
|
|
|
|
.popup_content {
|
|
background: #fff;
|
|
border-radius: 16rpx;
|
|
width: 85%;
|
|
max-height: 70vh;
|
|
overflow: hidden;
|
|
|
|
.popup_header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 32rpx;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
|
|
.popup_title {
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: #333;
|
|
}
|
|
|
|
.popup_close {
|
|
font-size: 48rpx;
|
|
color: #999;
|
|
font-weight: 300;
|
|
}
|
|
}
|
|
|
|
.payment_order_info {
|
|
padding: 24rpx 32rpx;
|
|
border-bottom: 1px solid #f8f9fa;
|
|
|
|
.order_summary {
|
|
.summary_row {
|
|
display: flex;
|
|
margin-bottom: 12rpx;
|
|
|
|
.summary_label {
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
min-width: 120rpx;
|
|
}
|
|
|
|
.summary_value {
|
|
font-size: 26rpx;
|
|
color: #333;
|
|
|
|
&.amount {
|
|
color: #e74c3c;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.payment_methods {
|
|
padding: 24rpx 32rpx;
|
|
|
|
.payment_method {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 20rpx 0;
|
|
border-bottom: 1px solid #f8f9fa;
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
&.selected {
|
|
background: rgba(41, 211, 180, 0.05);
|
|
}
|
|
|
|
.method_icon {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
margin-right: 20rpx;
|
|
|
|
.icon_image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.method_info {
|
|
flex: 1;
|
|
|
|
.method_name {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
margin-bottom: 4rpx;
|
|
}
|
|
|
|
.method_desc {
|
|
font-size: 22rpx;
|
|
color: #999;
|
|
}
|
|
}
|
|
|
|
.method_radio {
|
|
.radio_checked {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
background: #29d3b4;
|
|
border-radius: 50%;
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 18rpx;
|
|
}
|
|
|
|
.radio_unchecked {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
border: 2rpx solid #ddd;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.popup_actions {
|
|
padding: 24rpx 32rpx;
|
|
display: flex;
|
|
gap: 16rpx;
|
|
|
|
fui-button {
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|