24 changed files with 1775 additions and 456 deletions
@ -0,0 +1,783 @@ |
|||||
|
<!--学员订单详情页面--> |
||||
|
<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 v-if="loading" class="loading_section"> |
||||
|
<view class="loading_text">加载中...</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 订单详情内容 --> |
||||
|
<view v-else-if="orderDetail" class="detail_content"> |
||||
|
<!-- 订单状态 --> |
||||
|
<view class="status_section"> |
||||
|
<view class="status_icon" :class="orderDetail.status"> |
||||
|
<text class="icon_text">{{ getStatusIcon(orderDetail.status) }}</text> |
||||
|
</view> |
||||
|
<view class="status_info"> |
||||
|
<view class="status_text">{{ getStatusText(orderDetail.status) }}</view> |
||||
|
<view class="status_desc">{{ getStatusDesc(orderDetail.status) }}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 订单信息 --> |
||||
|
<view class="order_info_section"> |
||||
|
<view class="section_title">订单信息</view> |
||||
|
<view class="info_list"> |
||||
|
<view class="info_item"> |
||||
|
<text class="label">订单号：</text> |
||||
|
<text class="value">{{ orderDetail.order_no }}</text> |
||||
|
</view> |
||||
|
<view class="info_item"> |
||||
|
<text class="label">下单时间：</text> |
||||
|
<text class="value">{{ formatDateTime(orderDetail.create_time) }}</text> |
||||
|
</view> |
||||
|
<view class="info_item" v-if="orderDetail.payment_time"> |
||||
|
<text class="label">支付时间：</text> |
||||
|
<text class="value">{{ formatDateTime(orderDetail.payment_time) }}</text> |
||||
|
</view> |
||||
|
<view class="info_item"> |
||||
|
<text class="label">订单金额：</text> |
||||
|
<text class="value amount">¥{{ orderDetail.total_amount }}</text> |
||||
|
</view> |
||||
|
<view class="info_item" v-if="orderDetail.payment_method"> |
||||
|
<text class="label">支付方式：</text> |
||||
|
<text class="value">{{ orderDetail.payment_method }}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 课程信息 --> |
||||
|
<view class="course_info_section"> |
||||
|
<view class="section_title">课程信息</view> |
||||
|
<view class="course_card"> |
||||
|
<view class="course_header"> |
||||
|
<view class="course_name">{{ orderDetail.product_name }}</view> |
||||
|
<view class="course_amount">¥{{ orderDetail.total_amount }}</view> |
||||
|
</view> |
||||
|
<view class="course_details"> |
||||
|
<view class="detail_item" v-if="orderDetail.product_specs"> |
||||
|
<text class="detail_label">课程规格：</text> |
||||
|
<text class="detail_value">{{ orderDetail.product_specs }}</text> |
||||
|
</view> |
||||
|
<view class="detail_item"> |
||||
|
<text class="detail_label">购买数量：</text> |
||||
|
<text class="detail_value">{{ orderDetail.quantity }}节</text> |
||||
|
</view> |
||||
|
<view class="detail_item" v-if="orderDetail.course_count"> |
||||
|
<text class="detail_label">总课时：</text> |
||||
|
<text class="detail_value">{{ orderDetail.course_count }}节</text> |
||||
|
</view> |
||||
|
<view class="detail_item" v-if="orderDetail.used_count !== undefined"> |
||||
|
<text class="detail_label">已使用：</text> |
||||
|
<text class="detail_value">{{ orderDetail.used_count }}节</text> |
||||
|
</view> |
||||
|
<view class="detail_item" v-if="orderDetail.remaining_count !== undefined"> |
||||
|
<text class="detail_label">剩余课时：</text> |
||||
|
<text class="detail_value">{{ orderDetail.remaining_count }}节</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 备注信息 --> |
||||
|
<view class="remark_section" v-if="orderDetail.remark"> |
||||
|
<view class="section_title">备注信息</view> |
||||
|
<view class="remark_text">{{ orderDetail.remark }}</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 退款信息 --> |
||||
|
<view class="refund_section" v-if="showRefundInfo"> |
||||
|
<view class="section_title">退款信息</view> |
||||
|
<view class="refund_info"> |
||||
|
<view class="info_item"> |
||||
|
<text class="label">退款金额：</text> |
||||
|
<text class="value amount">¥{{ orderDetail.refund_amount || orderDetail.total_amount }}</text> |
||||
|
</view> |
||||
|
<view class="info_item" v-if="orderDetail.refund_time"> |
||||
|
<text class="label">退款时间：</text> |
||||
|
<text class="value">{{ formatDateTime(orderDetail.refund_time) }}</text> |
||||
|
</view> |
||||
|
<view class="info_item" v-if="orderDetail.cancel_reason"> |
||||
|
<text class="label">退款原因：</text> |
||||
|
<text class="value">{{ orderDetail.cancel_reason }}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 订单不存在 --> |
||||
|
<view v-else class="empty_section"> |
||||
|
<view class="empty_icon">📋</view> |
||||
|
<view class="empty_text">订单不存在</view> |
||||
|
<view class="empty_hint">请检查订单信息或联系客服</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 操作按钮 --> |
||||
|
<view class="action_section" v-if="orderDetail"> |
||||
|
<fui-button |
||||
|
v-if="orderDetail.status === 'pending_payment'" |
||||
|
background="#29d3b4" |
||||
|
@click="payOrder" |
||||
|
> |
||||
|
立即付款 |
||||
|
</fui-button> |
||||
|
|
||||
|
<fui-button |
||||
|
v-if="orderDetail.status === 'pending_payment'" |
||||
|
background="transparent" |
||||
|
color="#999" |
||||
|
@click="cancelOrder" |
||||
|
> |
||||
|
取消订单 |
||||
|
</fui-button> |
||||
|
|
||||
|
<fui-button |
||||
|
v-if="canViewContract" |
||||
|
background="#f39c12" |
||||
|
@click="viewContract" |
||||
|
> |
||||
|
查看合同 |
||||
|
</fui-button> |
||||
|
|
||||
|
<fui-button |
||||
|
v-if="orderDetail.status === 'refunding' || orderDetail.status === 'refunded'" |
||||
|
background="transparent" |
||||
|
color="#f39c12" |
||||
|
@click="viewRefundDetail" |
||||
|
> |
||||
|
查看退款 |
||||
|
</fui-button> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import apiRoute from '@/api/apiRoute.js' |
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
orderId: 0, |
||||
|
studentId: 0, |
||||
|
orderDetail: null, |
||||
|
loading: false, |
||||
|
// 状态文本映射 |
||||
|
STATUS_TEXT_MAP: { |
||||
|
'pending_payment': '待付款', |
||||
|
'paid': '已付款', |
||||
|
'completed': '已完成', |
||||
|
'cancelled': '已取消', |
||||
|
'refunding': '退款中', |
||||
|
'refunded': '已退款' |
||||
|
}, |
||||
|
// 状态描述映射 |
||||
|
STATUS_DESC_MAP: { |
||||
|
'pending_payment': '请在规定时间内完成支付', |
||||
|
'paid': '订单已支付成功', |
||||
|
'completed': '订单已完成，感谢您的使用', |
||||
|
'cancelled': '订单已取消', |
||||
|
'refunding': '退款处理中，请耐心等待', |
||||
|
'refunded': '退款已完成' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
computed: { |
||||
|
showRefundInfo() { |
||||
|
return this.orderDetail && (this.orderDetail.status === 'refunding' || this.orderDetail.status === 'refunded') |
||||
|
}, |
||||
|
|
||||
|
canViewContract() { |
||||
|
// 已支付的订单可以查看合同 |
||||
|
return this.orderDetail && (this.orderDetail.status === 'paid' || this.orderDetail.status === 'completed') |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
onLoad(options) { |
||||
|
this.orderId = parseInt(options.id) || 0 |
||||
|
this.studentId = parseInt(options.student_id) || 0 |
||||
|
|
||||
|
// 如果没有学员ID，从本地存储获取 |
||||
|
if (!this.studentId) { |
||||
|
const userInfo = uni.getStorageSync('userInfo') |
||||
|
if (userInfo && userInfo.id) { |
||||
|
this.studentId = userInfo.id |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
if (this.orderId && this.studentId) { |
||||
|
this.loadOrderDetail() |
||||
|
} else { |
||||
|
uni.showToast({ |
||||
|
title: '参数错误', |
||||
|
icon: 'none' |
||||
|
}) |
||||
|
setTimeout(() => { |
||||
|
uni.navigateBack() |
||||
|
}, 1500) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
goBack() { |
||||
|
uni.navigateBack() |
||||
|
}, |
||||
|
|
||||
|
async loadOrderDetail() { |
||||
|
this.loading = true |
||||
|
try { |
||||
|
console.log('获取订单详情，参数:', { |
||||
|
id: this.orderId, |
||||
|
student_id: this.studentId |
||||
|
}); |
||||
|
|
||||
|
const response = await apiRoute.xy_getStudentOrderDetail({ |
||||
|
id: this.orderId, |
||||
|
student_id: this.studentId |
||||
|
}) |
||||
|
|
||||
|
if (response.code === 1 && response.data) { |
||||
|
this.orderDetail = this.processOrderData(response.data) |
||||
|
} else { |
||||
|
// 如果接口返回失败，尝试从订单列表接口获取数据 |
||||
|
console.warn('订单详情接口失败，尝试从列表接口获取:', response.msg) |
||||
|
await this.loadOrderFromList() |
||||
|
} |
||||
|
} catch (error) { |
||||
|
console.error('获取订单详情失败:', error) |
||||
|
// 接口调用失败，尝试从订单列表接口获取数据 |
||||
|
await this.loadOrderFromList() |
||||
|
} finally { |
||||
|
this.loading = false |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 从订单列表接口获取订单数据作为备用 |
||||
|
async loadOrderFromList() { |
||||
|
try { |
||||
|
const response = await apiRoute.xy_getStudentOrders({ |
||||
|
student_id: this.studentId, |
||||
|
page: 1, |
||||
|
limit: 100 |
||||
|
}) |
||||
|
|
||||
|
if (response.code === 1 && response.data && response.data.data) { |
||||
|
const orders = response.data.data |
||||
|
const targetOrder = orders.find(order => order.id == this.orderId) |
||||
|
|
||||
|
if (targetOrder) { |
||||
|
this.orderDetail = this.processOrderData(targetOrder) |
||||
|
} else { |
||||
|
this.showError('订单不存在') |
||||
|
} |
||||
|
} else { |
||||
|
this.showError('获取订单信息失败') |
||||
|
} |
||||
|
} catch (error) { |
||||
|
console.error('从列表获取订单详情失败:', error) |
||||
|
this.showError('获取订单信息失败') |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 处理订单数据，将后端数据转换为前端需要的格式 |
||||
|
processOrderData(rawData) { |
||||
|
return { |
||||
|
id: rawData.id, |
||||
|
order_no: rawData.order_no || rawData.order_number || rawData.payment_id, |
||||
|
product_name: rawData.course_id_name || rawData.course_name || rawData.product_name || '课程订单', |
||||
|
product_specs: rawData.course_specs || rawData.product_specs || '', |
||||
|
quantity: rawData.quantity || 1, |
||||
|
total_amount: rawData.order_amount || rawData.total_amount || rawData.amount || '0.00', |
||||
|
status: this.mapOrderStatus(rawData.order_status || rawData.status), |
||||
|
create_time: rawData.created_at || rawData.create_time, |
||||
|
payment_method: rawData.payment_type ? this.mapPaymentMethod(rawData.payment_type) : '', |
||||
|
payment_time: rawData.payment_time || rawData.paid_at, |
||||
|
refund_time: rawData.refund_time, |
||||
|
refund_amount: rawData.refund_amount, |
||||
|
// 课程相关字段 |
||||
|
course_count: rawData.course_count || 0, |
||||
|
used_count: rawData.use_total_hours || rawData.used_count || 0, |
||||
|
remaining_count: rawData.remaining_count || 0, |
||||
|
cancel_reason: rawData.after_sales_reason || rawData.cancel_reason || '', |
||||
|
remark: rawData.remark || '' |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 映射订单状态 |
||||
|
mapOrderStatus(status) { |
||||
|
const statusMap = { |
||||
|
'pending': 'pending_payment', |
||||
|
'paid': 'paid', |
||||
|
'signed': 'completed', |
||||
|
'completed': 'completed', |
||||
|
'transfer': 'cancelled', |
||||
|
'cancelled': 'cancelled', |
||||
|
'refunded': 'refunded', |
||||
|
'refunding': 'refunding' |
||||
|
} |
||||
|
return statusMap[status] || 'pending_payment' |
||||
|
}, |
||||
|
|
||||
|
// 映射支付方式 |
||||
|
mapPaymentMethod(method) { |
||||
|
const methodMap = { |
||||
|
'cash': '现金支付', |
||||
|
'scan_code': '扫码支付', |
||||
|
'subscription': '预约支付', |
||||
|
'wxpay_online': '微信支付', |
||||
|
'wxpay': '微信支付', |
||||
|
'alipay': '支付宝', |
||||
|
'bank': '银行转账' |
||||
|
} |
||||
|
return methodMap[method] || method || '' |
||||
|
}, |
||||
|
|
||||
|
getStatusText(status) { |
||||
|
return this.STATUS_TEXT_MAP[status] || status |
||||
|
}, |
||||
|
|
||||
|
getStatusDesc(status) { |
||||
|
return this.STATUS_DESC_MAP[status] || '' |
||||
|
}, |
||||
|
|
||||
|
getStatusIcon(status) { |
||||
|
const iconMap = { |
||||
|
'pending_payment': '💰', |
||||
|
'paid': '✅', |
||||
|
'completed': '🎉', |
||||
|
'cancelled': '❌', |
||||
|
'refunding': '⏳', |
||||
|
'refunded': '↩️' |
||||
|
} |
||||
|
return iconMap[status] || '📋' |
||||
|
}, |
||||
|
|
||||
|
formatDateTime(dateString) { |
||||
|
if (!dateString) return '' |
||||
|
const date = new Date(dateString) |
||||
|
const year = date.getFullYear() |
||||
|
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 `${year}-${month}-${day} ${hours}:${minutes}` |
||||
|
}, |
||||
|
|
||||
|
showError(message) { |
||||
|
uni.showToast({ |
||||
|
title: message, |
||||
|
icon: 'none' |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
// 支付订单 |
||||
|
payOrder() { |
||||
|
// 跳转回订单列表页面进行支付 |
||||
|
uni.navigateBack() |
||||
|
}, |
||||
|
|
||||
|
// 取消订单 |
||||
|
cancelOrder() { |
||||
|
uni.showModal({ |
||||
|
title: '确认取消', |
||||
|
content: '确定要取消此订单吗？', |
||||
|
success: (res) => { |
||||
|
if (res.confirm) { |
||||
|
this.performCancelOrder() |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
async performCancelOrder() { |
||||
|
try { |
||||
|
uni.showLoading({ title: '处理中...' }) |
||||
|
|
||||
|
// 这里应该调用取消订单的API |
||||
|
// 暂时模拟处理 |
||||
|
await new Promise(resolve => setTimeout(resolve, 1000)) |
||||
|
|
||||
|
uni.hideLoading() |
||||
|
uni.showToast({ |
||||
|
title: '取消成功', |
||||
|
icon: 'success' |
||||
|
}) |
||||
|
|
||||
|
// 刷新订单详情 |
||||
|
this.loadOrderDetail() |
||||
|
} catch (error) { |
||||
|
uni.hideLoading() |
||||
|
console.error('取消订单失败:', error) |
||||
|
uni.showToast({ |
||||
|
title: '取消失败', |
||||
|
icon: 'none' |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 查看合同 |
||||
|
async viewContract() { |
||||
|
try { |
||||
|
uni.showLoading({ title: '获取合同信息...' }) |
||||
|
|
||||
|
// 查询合同签署记录 |
||||
|
const contractResponse = await this.getContractInfo() |
||||
|
|
||||
|
uni.hideLoading() |
||||
|
|
||||
|
if (contractResponse && contractResponse.contract_id) { |
||||
|
// 跳转到合同详情页面 |
||||
|
uni.navigateTo({ |
||||
|
url: `/pages-student/contract/detail?contract_id=${contractResponse.contract_id}&student_id=${this.studentId}` |
||||
|
}) |
||||
|
} else { |
||||
|
uni.showModal({ |
||||
|
title: '提示', |
||||
|
content: '该订单暂无关联合同，请联系客服处理', |
||||
|
showCancel: false |
||||
|
}) |
||||
|
} |
||||
|
} catch (error) { |
||||
|
uni.hideLoading() |
||||
|
console.error('获取合同信息失败:', error) |
||||
|
uni.showToast({ |
||||
|
title: '获取合同信息失败', |
||||
|
icon: 'none' |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 获取合同信息 |
||||
|
async getContractInfo() { |
||||
|
try { |
||||
|
// 调用获取学员合同列表接口 |
||||
|
const response = await apiRoute.getStudentContracts({ |
||||
|
student_id: this.studentId, |
||||
|
order_id: this.orderId // 如果接口支持按订单筛选 |
||||
|
}) |
||||
|
|
||||
|
if (response.code === 1 && response.data && response.data.length > 0) { |
||||
|
// 返回第一个合同记录 |
||||
|
return response.data[0] |
||||
|
} |
||||
|
|
||||
|
return null |
||||
|
} catch (error) { |
||||
|
console.error('获取合同信息失败:', error) |
||||
|
return null |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 查看退款详情 |
||||
|
viewRefundDetail() { |
||||
|
const refundInfo = `订单号：${this.orderDetail.order_no}\n退款金额：¥${this.orderDetail.refund_amount || this.orderDetail.total_amount}\n退款时间：${this.orderDetail.refund_time ? this.formatDateTime(this.orderDetail.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; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 加载状态 |
||||
|
.loading_section { |
||||
|
background: #fff; |
||||
|
margin: 20rpx; |
||||
|
border-radius: 16rpx; |
||||
|
padding: 80rpx 32rpx; |
||||
|
text-align: center; |
||||
|
|
||||
|
.loading_text { |
||||
|
font-size: 28rpx; |
||||
|
color: #666; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 订单详情内容 |
||||
|
.detail_content { |
||||
|
padding: 0 20rpx 120rpx; |
||||
|
} |
||||
|
|
||||
|
// 订单状态 |
||||
|
.status_section { |
||||
|
background: #fff; |
||||
|
border-radius: 16rpx; |
||||
|
padding: 40rpx 32rpx; |
||||
|
margin: 20rpx 0; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
.status_icon { |
||||
|
width: 80rpx; |
||||
|
height: 80rpx; |
||||
|
border-radius: 50%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
margin-right: 24rpx; |
||||
|
|
||||
|
.icon_text { |
||||
|
font-size: 32rpx; |
||||
|
} |
||||
|
|
||||
|
&.pending_payment { |
||||
|
background: rgba(243, 156, 18, 0.1); |
||||
|
} |
||||
|
|
||||
|
&.paid { |
||||
|
background: rgba(52, 152, 219, 0.1); |
||||
|
} |
||||
|
|
||||
|
&.completed { |
||||
|
background: rgba(39, 174, 96, 0.1); |
||||
|
} |
||||
|
|
||||
|
&.cancelled { |
||||
|
background: rgba(149, 165, 166, 0.1); |
||||
|
} |
||||
|
|
||||
|
&.refunded, &.refunding { |
||||
|
background: rgba(231, 76, 60, 0.1); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.status_info { |
||||
|
flex: 1; |
||||
|
|
||||
|
.status_text { |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 600; |
||||
|
color: #333; |
||||
|
margin-bottom: 8rpx; |
||||
|
} |
||||
|
|
||||
|
.status_desc { |
||||
|
font-size: 24rpx; |
||||
|
color: #666; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 通用区块样式 |
||||
|
.order_info_section, .course_info_section, .remark_section, .refund_section { |
||||
|
background: #fff; |
||||
|
border-radius: 16rpx; |
||||
|
padding: 32rpx; |
||||
|
margin: 20rpx 0; |
||||
|
|
||||
|
.section_title { |
||||
|
font-size: 30rpx; |
||||
|
font-weight: 600; |
||||
|
color: #333; |
||||
|
margin-bottom: 24rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 信息列表 |
||||
|
.info_list { |
||||
|
.info_item { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-bottom: 20rpx; |
||||
|
|
||||
|
&:last-child { |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
|
||||
|
.label { |
||||
|
font-size: 26rpx; |
||||
|
color: #666; |
||||
|
min-width: 160rpx; |
||||
|
} |
||||
|
|
||||
|
.value { |
||||
|
font-size: 26rpx; |
||||
|
color: #333; |
||||
|
flex: 1; |
||||
|
|
||||
|
&.amount { |
||||
|
color: #e74c3c; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 课程卡片 |
||||
|
.course_card { |
||||
|
.course_header { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: flex-start; |
||||
|
margin-bottom: 20rpx; |
||||
|
|
||||
|
.course_name { |
||||
|
flex: 1; |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 600; |
||||
|
color: #333; |
||||
|
margin-right: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.course_amount { |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 600; |
||||
|
color: #e74c3c; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.course_details { |
||||
|
.detail_item { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-bottom: 12rpx; |
||||
|
|
||||
|
&:last-child { |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
|
||||
|
.detail_label { |
||||
|
font-size: 24rpx; |
||||
|
color: #666; |
||||
|
min-width: 140rpx; |
||||
|
} |
||||
|
|
||||
|
.detail_value { |
||||
|
font-size: 24rpx; |
||||
|
color: #333; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 备注文本 |
||||
|
.remark_text { |
||||
|
font-size: 26rpx; |
||||
|
color: #666; |
||||
|
line-height: 1.6; |
||||
|
} |
||||
|
|
||||
|
// 退款信息 |
||||
|
.refund_info { |
||||
|
.info_item { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-bottom: 16rpx; |
||||
|
|
||||
|
&:last-child { |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
|
||||
|
.label { |
||||
|
font-size: 26rpx; |
||||
|
color: #666; |
||||
|
min-width: 160rpx; |
||||
|
} |
||||
|
|
||||
|
.value { |
||||
|
font-size: 26rpx; |
||||
|
color: #333; |
||||
|
flex: 1; |
||||
|
|
||||
|
&.amount { |
||||
|
color: #e74c3c; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 空状态 |
||||
|
.empty_section { |
||||
|
background: #fff; |
||||
|
border-radius: 16rpx; |
||||
|
padding: 80rpx 32rpx; |
||||
|
text-align: center; |
||||
|
margin: 20rpx; |
||||
|
|
||||
|
.empty_icon { |
||||
|
font-size: 80rpx; |
||||
|
margin-bottom: 24rpx; |
||||
|
} |
||||
|
|
||||
|
.empty_text { |
||||
|
font-size: 28rpx; |
||||
|
color: #666; |
||||
|
margin-bottom: 12rpx; |
||||
|
} |
||||
|
|
||||
|
.empty_hint { |
||||
|
font-size: 24rpx; |
||||
|
color: #999; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 操作按钮 |
||||
|
.action_section { |
||||
|
position: fixed; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
background: #fff; |
||||
|
padding: 20rpx 32rpx; |
||||
|
box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.1); |
||||
|
display: flex; |
||||
|
gap: 16rpx; |
||||
|
|
||||
|
fui-button { |
||||
|
flex: 1; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue