326 lines
10 KiB
Vue
326 lines
10 KiB
Vue
<template>
|
||
<view class="page flex-col">
|
||
<view class="block_1 flex-row">
|
||
|
||
</view>
|
||
<view class="block_2 flex-col">
|
||
<view class="group_1 flex-row">
|
||
<image
|
||
class="label_1"
|
||
referrerpolicy="no-referrer"
|
||
src="/static/lanhu_quanbudingdan/FigmaDDSSlicePNGacf527a62cbe7351c6472edd8f5b2814.png"
|
||
@click="handleBack()"
|
||
/>
|
||
<text class="text_1">订单</text>
|
||
|
||
</view>
|
||
<view class="list_1 flex-col">
|
||
<scroll-view
|
||
class="scroll-view"
|
||
scroll-y
|
||
:style="{ height: scrollHeight + 'px' }"
|
||
@scrolltolower="loadMoreData"
|
||
:refresher-enabled="true"
|
||
:refresher-triggered="isRefreshing"
|
||
@refresherrefresh="onRefresherrefresh"
|
||
>
|
||
<view class="list-items_1 flex-col" v-for="(item, index) in orderList" :key="index" @click="goOrderDetails(item)">
|
||
<view class="box_6 flex-row justify-between">
|
||
<text class="text_2">订单号: {{item.orderNo}}</text>
|
||
<view class="text-wrapper_1 flex-col" :style="{ background: statusMap[item.paymentStatus].background }">
|
||
<text class="text_3" :style="{ color: statusMap[item.paymentStatus].color }">{{
|
||
statusMap[item.paymentStatus].name}}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<view class="box_7 flex-row">
|
||
<view class="image-text_1 flex-row">
|
||
<image
|
||
class="image_3"
|
||
referrerpolicy="no-referrer"
|
||
:src="imageUrl + '/' + item.photo"
|
||
|
||
/>
|
||
<view class="text-group_1 flex-col justify-between">
|
||
<text class="text_4">{{item.courseName}}</text>
|
||
<view class="text-wrapper_2 flex-row justify-between">
|
||
<text class="text_5">￥{{item.reserveMoney}}</text>
|
||
<!-- <text class="text_6">{{item.reserveMoney}}</text> -->
|
||
</view>
|
||
|
||
</view>
|
||
|
||
<view class="text-wrapper_4 flex-col">
|
||
<text class="text_8">{{item.type}}</text>
|
||
</view>
|
||
<!-- <view class="text-wrapper_3 flex-col">
|
||
<text class="text_7">{{item.type}}</text>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
|
||
|
||
|
||
</view>
|
||
|
||
</scroll-view>
|
||
</view>
|
||
<view class="group_2 flex-col justify-end">
|
||
<view class="text-wrapper_5 flex-row">
|
||
<text
|
||
class="text_9"
|
||
:class="{ 'active-blue': type === 1 }"
|
||
@click="changeOrderType('',1)"
|
||
>
|
||
全部订单
|
||
</text>
|
||
<text
|
||
class="text_10"
|
||
:class="{ 'active-blue': type === 2 }"
|
||
@click="changeOrderType(2,2)"
|
||
>
|
||
已付款
|
||
</text>
|
||
<text
|
||
class="text_11"
|
||
:class="{ 'active-blue': type === 3 }"
|
||
@click="changeOrderType(4,3)"
|
||
>
|
||
已面签
|
||
</text>
|
||
<text
|
||
class="text_12"
|
||
:class="{ 'active-blue': type === 4 }"
|
||
@click="changeOrderType(2,4)"
|
||
>
|
||
已报名
|
||
</text>
|
||
</view>
|
||
<view class="box_8 flex-row">
|
||
<!-- <view class="group_8 flex-col"></view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import request from '@/utils/request.js'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
imageUrl: this.$imagesUrl,
|
||
loopData0: [
|
||
{
|
||
lanhutext0: '订单号：44782938752039585',
|
||
lanhuBg2: 'rgba(255,244,228,1.000000)',
|
||
lanhutext1: '已付款',
|
||
lanhufontColor1: 'rgba(237,162,58,1.000000)',
|
||
/* lanhuimage0:
|
||
'https://lanhu-oss-2537-2.lanhuapp.com/FigmaDDSSlicePNGcdb906a0aec43afcbb43c980454f42f5.png', */
|
||
lanhutext2: 'AI智能+人工教学',
|
||
lanhutext3: '￥3000.00',
|
||
lanhutext4: '￥3000.00',
|
||
lanhutext5: 'C2',
|
||
lanhutext6: '自动挡'
|
||
},
|
||
{
|
||
lanhutext0: '订单号：44782938752039585',
|
||
lanhuBg2: 'rgba(218,255,239,1.000000)',
|
||
lanhutext1: '已面签',
|
||
lanhufontColor1: 'rgba(17,186,113,1.000000)',
|
||
/* lanhuimage0:
|
||
'https://lanhu-oss-2537-2.lanhuapp.com/FigmaDDSSlicePNGcdb906a0aec43afcbb43c980454f42f5.png', */
|
||
lanhutext2: 'AI智能+人工教学',
|
||
lanhutext3: '￥3000.00',
|
||
lanhutext4: '￥3000.00',
|
||
lanhutext5: 'C2',
|
||
lanhutext6: '自动挡'
|
||
},
|
||
{
|
||
lanhutext0: '订单号：44782938752039585',
|
||
lanhuBg2: 'rgba(227,238,255,1.000000)',
|
||
lanhutext1: '已报名',
|
||
lanhufontColor1: 'rgba(44,120,245,1.000000)',
|
||
/* lanhuimage0:
|
||
'https://lanhu-oss-2537-2.lanhuapp.com/FigmaDDSSlicePNGcdb906a0aec43afcbb43c980454f42f5.png', */
|
||
lanhutext2: 'AI智能+人工教学',
|
||
lanhutext3: '￥3000.00',
|
||
lanhutext4: '￥3000.00',
|
||
lanhutext5: 'C2',
|
||
lanhutext6: '自动挡'
|
||
}
|
||
],
|
||
type: null,
|
||
orderType: null,
|
||
scrollHeight: 0,
|
||
userId: null,
|
||
orderList: [],
|
||
constants: {},
|
||
courseDetails: {},
|
||
pageNo: 1,
|
||
pageSize: 10,
|
||
total: 0,
|
||
loading: false,
|
||
isRefreshing: false,
|
||
statusMap: {
|
||
8: { name: '退款成功', background: '#fef0f0', color: '#f56c6c' }, // 红色柔和
|
||
7: { name: '退款中', background: '#fef0f0', color: '#f56c6c' }, // 红色柔和
|
||
6: { name: '申请退款', background: '#fef0f0', color: '#f56c6c' }, // 红色柔和
|
||
|
||
5: { name: '已完成', background: '#f0f9eb', color: '#67c23a' }, // 绿色完成
|
||
4: { name: '已面签', background: '#ecf5ff', color: '#409EFF' }, // 蓝色稳定
|
||
3: { name: '待面签', background: '#fdf6ec', color: '#e6a23c' }, // 橙色提醒
|
||
|
||
2: { name: '已支付', background: '#f0f9eb', color: '#67c23a' }, // 绿色支付成功
|
||
1: { name: '已取消', background: '#f4f4f5', color: '#909399' }, // 灰色中立
|
||
0: { name: '待支付', background: '#fdf6ec', color: '#e6a23c' }, // 橙色提醒
|
||
}
|
||
};
|
||
},
|
||
onLoad(options) {
|
||
// this.orderType = options.orderType; // 读取上个页面传入的 orderType
|
||
this.orderType = options.orderType ? parseInt(options.orderType) : '';
|
||
this.type = options.type ? parseInt(options.type) : 1;
|
||
this.userId = options.userId;
|
||
// this.type = options.type;
|
||
// this.getUserOrderDetails(this.orderType); // 页面加载时请求数据
|
||
// this.getUserOrderDetails(options.orderType);
|
||
this.changeOrderType(this.orderType, this.type)
|
||
|
||
},
|
||
onReady() {
|
||
// 动态计算滚动区域高度
|
||
this.calculateScrollHeight();
|
||
},
|
||
mounted() {
|
||
// this.updateUnderlinePosition(this.orderType);
|
||
},
|
||
|
||
methods: {
|
||
handleBack() {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 上滑加载数据
|
||
*/
|
||
loadMoreData() {
|
||
// 如果正在加载或没有更多数据，则直接返回
|
||
if (this.loading || this.pageNo * this.pageSize >= this.total) {
|
||
return;
|
||
}
|
||
|
||
this.loading = true;
|
||
this.pageNo++;
|
||
|
||
this.getUserOrderDetails(this.orderType, false);
|
||
},
|
||
/**
|
||
* 下拉刷新数据
|
||
*/
|
||
onRefresherrefresh() {
|
||
if (this.isRefreshing) return;
|
||
|
||
this.isRefreshing = true;
|
||
// 重置页码
|
||
this.pageNo = 1;
|
||
|
||
this.getUserOrderDetails(this.orderType, true);
|
||
},
|
||
|
||
// 获取用户订单详情
|
||
getUserOrderDetails(paymentStatus, isRefresh = false) {
|
||
if (!isRefresh && this.loading) return;
|
||
|
||
request({
|
||
url: '/app-api/small/drive/school-course-order/page',
|
||
method: 'GET',
|
||
params: {
|
||
userId: this.userId,
|
||
paymentStatus: paymentStatus,
|
||
pageNo: this.pageNo,
|
||
pageSize: this.pageSize
|
||
},
|
||
tenantIdFlag: false
|
||
}).then(res => {
|
||
if (isRefresh) {
|
||
// 下拉刷新，替换原有数据
|
||
this.orderList = res.data.records;
|
||
this.isRefreshing = false;
|
||
// 停止下拉刷新动画
|
||
uni.stopPullDownRefresh();
|
||
} else if (this.pageNo === 1) {
|
||
// 首次加载或切换tab
|
||
this.orderList = res.data.records;
|
||
} else {
|
||
// 上拉加载更多，追加数据
|
||
this.orderList = [...this.orderList, ...res.data.records];
|
||
}
|
||
|
||
this.total = res.data.total;
|
||
this.loading = false;
|
||
}).catch(err => {
|
||
this.loading = false;
|
||
this.isRefreshing = false;
|
||
if (isRefresh) {
|
||
uni.stopPullDownRefresh();
|
||
}
|
||
console.error('获取订单失败', err);
|
||
});
|
||
},
|
||
|
||
// 判断选择的标签
|
||
changeOrderType(orderType, type) {
|
||
this.orderType = orderType;
|
||
this.type = type;
|
||
this.pageNo = 1;
|
||
this.getUserOrderDetails(orderType); // 切换 Tab 时重新请求数据
|
||
// this.updateUnderlinePosition(type);
|
||
},
|
||
// 支付状态
|
||
getStatusStyle(status) {
|
||
return this.statusMap[status] || {name: '未知状态', background: '', color: ''};
|
||
},
|
||
|
||
// 获取课程详情
|
||
getCourseDetails() {
|
||
request({
|
||
url: '/app-api/dl-drive-school-course-small/get',
|
||
method: 'GET',
|
||
params: {
|
||
id: this.courseId,
|
||
tenantId: this.tenantId,
|
||
},
|
||
tenantIdFlag: false
|
||
}).then(res => {
|
||
this.courseDetails = res.data;
|
||
})
|
||
},
|
||
|
||
// 订单详情
|
||
goOrderDetails(data){
|
||
uni.navigateTo({
|
||
// url: `/newPages/orderDetails/index?data=${data}`
|
||
url: `/newPages/orderDetails/index?data=${encodeURIComponent(JSON.stringify(data))}`
|
||
})
|
||
},
|
||
|
||
calculateScrollHeight() {
|
||
// 获取屏幕高度
|
||
const screenHeight = uni.getSystemInfoSync().windowHeight;
|
||
// 获取顶部区域高度
|
||
const topHeight = 160;
|
||
// 计算滚动区域高度
|
||
this.scrollHeight = screenHeight - topHeight;
|
||
},
|
||
}
|
||
};
|
||
</script>
|
||
<style lang='scss'>
|
||
@import '../common/common.scss';
|
||
@import './assets/style/index.rpx.scss';
|
||
</style>
|