246 lines
8.2 KiB
Vue
246 lines
8.2 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' }"
|
||
>
|
||
<view class="list-items_1 flex-col" v-for="(item, index) in orderList" :key="index" >
|
||
<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='/static/lanhu_shouye2gai/FigmaDDSSlicePNG530e91ec069b391e8972e9ed0aeebc58.png'
|
||
/>
|
||
<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_3 flex-col">
|
||
<text class="text_7" >{{item.courseType}}</text>
|
||
</view>
|
||
<view class="text-wrapper_4 flex-col">
|
||
<text class="text_8" >{{item.courseType}}</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 {
|
||
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: {},
|
||
statusMap: {
|
||
5: { name: '已完成', background: 'rgba(255,228,228,1)', color: 'rgba(237,58,58,1)' },
|
||
4: { name: '已面签', background: 'rgba(255,228,228,1)', color: 'rgba(237,58,58,1)' },
|
||
3: { name: '待面签', background: 'rgba(255,228,228,1)', color: 'rgba(237,58,58,1)' },
|
||
2: { name: '已付款', background: 'rgba(255,244,228,1)', color: 'rgba(237,162,58,1)' },
|
||
1: { name: '未付款', background: 'rgba(255,228,228,1)', color: 'rgba(237,58,58,1)' },
|
||
0: { name: '待支付', background: 'rgba(255,228,228,1)', color: 'rgba(237,58,58,1)' },
|
||
}
|
||
};
|
||
},
|
||
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);
|
||
console.log('options',options)
|
||
console.log('type', this.type)
|
||
console.log('type', this.type === 2)
|
||
console.log('orderType',this.orderType)
|
||
console.log('orderType',this.orderType === 2)
|
||
this.changeOrderType(this.orderType, this.type)
|
||
|
||
},
|
||
onReady() {
|
||
// 动态计算滚动区域高度
|
||
this.calculateScrollHeight();
|
||
},
|
||
mounted() {
|
||
// this.updateUnderlinePosition(this.orderType);
|
||
},
|
||
|
||
methods: {
|
||
handleBack() {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
});
|
||
},
|
||
getUserOrderDetails(paymentStatus) {
|
||
console.log(paymentStatus)
|
||
console.log(this.userId)
|
||
request({
|
||
url: '/app-api/small/drive/school-course-order/page',
|
||
method: 'GET',
|
||
params: {
|
||
userId: this.userId,
|
||
paymentStatus:paymentStatus
|
||
},
|
||
tenantIdFlag : false
|
||
}).then(res => {
|
||
this.orderList = res.data.records;
|
||
console.log('订单信息',res.data)
|
||
});
|
||
},
|
||
changeOrderType(orderType,type) {
|
||
this.orderType = orderType;
|
||
this.type = type;
|
||
console.log('type',type)
|
||
console.log('orderType',orderType)
|
||
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;
|
||
})
|
||
},
|
||
calculateScrollHeight() {
|
||
// 获取屏幕高度
|
||
const screenHeight = uni.getSystemInfoSync().windowHeight;
|
||
// 获取顶部区域高度
|
||
const topHeight = 160;
|
||
// 计算滚动区域高度
|
||
this.scrollHeight = screenHeight - topHeight;
|
||
},
|
||
/* updateUnderlinePosition(type) {
|
||
const index = parseInt(type) - 1; // 计算选中的索引（从 0 开始）
|
||
const tabWidth = uni.getSystemInfoSync().windowWidth / 4; // 假设有 4 个选项，均分屏幕宽度
|
||
this.underlinePosition = index * tabWidth;
|
||
}, */
|
||
}
|
||
};
|
||
</script>
|
||
<style lang='scss'>
|
||
@import '../common/common.scss';
|
||
@import './assets/style/index.rpx.scss';
|
||
</style>
|