gdxz/uniapp-app
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

精品课

Browse Source
This commit is contained in:
haomingming
2025-08-25 14:17:06 +08:00
parent 979c332454
commit 0de0b6732b
22 changed files with 3392 additions and 716 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages_course/order_record/order_record.vue
+92 -61
View File
@@ -4,7 +4,7 @@
<view class="navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
<view class="nav-content">
<view class="nav-left" @click="goBack">
<uni-icons type="arrowleft" size="24" color="#333"></uni-icons>
<uni-icons type="left" size="24" color="#333"></uni-icons>
</view>
<view class="nav-title">订单记录</view>
<view class="nav-right"></view>
@@ -90,6 +90,17 @@
</view>
</view>
</view>
<!-- 悬浮发票按钮 -->
<view class="floating-invoice-btn" @click="goToInvoice">
<view class="btn-content">
<view class="icon-wrapper">
<uni-icons type="receipt" size="20" color="#fff"></uni-icons>
</view>
<text class="btn-text">开具发票1</text>
</view>
<view class="btn-shadow"></view>
</view>
</view>
</template>
@@ -102,65 +113,7 @@ const statusBarHeight = ref(0)
const navBarHeight = ref(88)
const activeTab = ref('paid') // 默认激活"已支付"标签
// 订单数据
const orderList = ref({
paid: [
{
id: 1,
orderNumber: 'XXXXXXXXXXXXXXXXXXXXXXXXXXX',
courseName: '找到已购买课程即可学习找到学习找到到到已到已购买',
orderTime: '2020.30.21 12:23:00',
courseAmount: '62.00',
balancePayment: '50.00',
actualPayment: '12.00',
status: 'paid'
},
{
id: 2,
orderNumber: 'XXXXXXXXXXXXXXXXXXXXXXXXXXX',
courseName: '找到已购买课程即可学习找到学习找到到到已到已购买',
orderTime: '2020.30.21 12:23:00',
courseAmount: '62.00',
balancePayment: '50.00',
actualPayment: '12.00',
status: 'paid'
}
],
unpaid: [
{
id: 3,
orderNumber: 'XXXXXXXXXXXXXXXXXXXXXXXXXXX',
courseName: '找到已购买课程即可学习找到学习找到到到已到已购买',
orderTime: '2020.30.21 12:23:00',
courseAmount: '62.00',
balancePayment: '50.00',
actualPayment: '12.00',
remainingTime: '12:23:00',
status: 'pending'
},
{
id: 4,
orderNumber: 'XXXXXXXXXXXXXXXXXXXXXXXXXXX',
courseName: '找到已购买课程即可学习找到学习找到到到已到已购买',
orderTime: '2020.30.21 12:23:00',
courseAmount: '62.00',
balancePayment: '50.00',
actualPayment: '12.00',
remainingTime: '12:23:00',
status: 'timeout'
},
{
id: 5,
orderNumber: 'XXXXXXXXXXXXXXXXXXXXXXXXXXX',
courseName: '找到已购买课程即可学习找到学习找到到到已到已购买',
orderTime: '2020.30.21 12:23:00',
courseAmount: '62.00',
pointsPayment: '200',
balancePayment: '42.00',
actualPayment: '0.00',
status: 'failed'
}
]
})
const orderList = ref([])
// 计算属性
const currentOrderList = computed(() => {
@@ -292,6 +245,13 @@ const enterLearning = (order) => {
})
}
// 跳转到开具发票页面
const goToInvoice = () => {
uni.navigateTo({
url: '/pages_course/invoice/invoice'
})
}
const viewOrder = (order) => {
console.log('查看订单详情:', order.id)
uni.showToast({
@@ -323,7 +283,7 @@ const getOrderList = () => {
return {
id: item.id,
orderNumber: item.order_id || item.uuid || '-',
orderNumber: item.uuid || '-',
courseName: item.excellencourse_title || '-',
orderTime: formatTs(item.create_date),
courseAmount: toYuan(item.account),
@@ -577,4 +537,75 @@ onMounted(() => {
}
}
}
// 悬浮发票按钮
.floating-invoice-btn {
position: fixed;
right: 40rpx;
bottom: 140rpx;
width: 140rpx;
height: 140rpx;
z-index: 999;
cursor: pointer;
.btn-content {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: 3rpx solid rgba(255, 255, 255, 0.2);
&:active {
transform: scale(0.92);
background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
}
.icon-wrapper {
width: 48rpx;
height: 48rpx;
background: rgba(255, 255, 255, 0.15);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 8rpx;
backdrop-filter: blur(10rpx);
}
.btn-text {
color: #ffffff;
font-size: 22rpx;
font-weight: 600;
text-align: center;
line-height: 1.2;
text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
letter-spacing: 1rpx;
}
}
.btn-shadow {
position: absolute;
top: 8rpx;
left: 8rpx;
right: -8rpx;
bottom: -8rpx;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.3), rgba(118, 75, 162, 0.3));
border-radius: 50%;
z-index: -1;
filter: blur(8rpx);
opacity: 0.8;
transition: all 0.3s ease;
}
&:hover .btn-shadow {
opacity: 1;
transform: scale(1.05);
}
}
</style>