driverSchool/newPages/orderList/index.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>