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">
        <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" v-html="item.lanhutext0"></text>
            <view
              class="text-wrapper_1 flex-col"
              :style="{ background: item.lanhuBg2 }"
            >
              <text
                class="text_3"
                :style="{ color: item.lanhufontColor1 }"
                v-html="item.lanhutext1"
              ></text>
            </view>
          </view>
          <view class="box_7 flex-row">
            <view class="image-text_1 flex-row">
              <image
                class="image_3"
                referrerpolicy="no-referrer"
                :src="item.lanhuimage0"
              />
              <view class="text-group_1 flex-col justify-between">
                <text class="text_4" v-html="item.lanhutext2"></text>
                <view class="text-wrapper_2 flex-row justify-between">
                  <text class="text_5" v-html="item.lanhutext3"></text>
                  <text class="text_6" v-html="item.lanhutext4"></text>
                </view>
              </view>
              <view class="text-wrapper_3 flex-col">
                <text class="text_7" v-html="item.lanhutext5"></text>
              </view>
              <view class="text-wrapper_4 flex-col">
                <text class="text_8" v-html="item.lanhutext6"></text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="group_2 flex-col justify-end">
        <view class="text-wrapper_5 flex-row">
          <text
			  class="text_9"
			  :class="{ active: orderType === 1 }"
			  @click="changeOrderType()"
			>
			  全部订单
			</text>
			<text
			  class="text_10"
			  :class="{ active: orderType === 2 }"
			  @click="changeOrderType(2)"
			>
			  已付款
			</text>
			<text
			  class="text_11"
			  :class="{ active: orderType === 3 }"
			  @click="changeOrderType(4)"
			>
			  已面签
			</text>
			<text
			  class="text_12"
			  :style="{ color: orderType === 4 ? 'rgba(44, 120, 245, 1)' : '' }"
			  @click="changeOrderType(2)"
			>
			  已报名
			</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: '自动挡'
        }
      ],
	  orderType: '1', // 默认选中“全部订单”
	  underlinePosition: 0, // 下划线的 X 轴位置
	  userId:null,
	  orderList:[],
      constants: {}
    };
  },
  onLoad(options){
	      this.orderType = options.orderType; // 读取上个页面传入的 orderType
		  this.userId = options.userId;
	      // this.getUserOrderDetails(this.orderType); // 页面加载时请求数据
		  console.log(options)
  },
  mounted() {
      this.updateUnderlinePosition(this.orderType);
    },
	
  methods: {
	  handleBack() {
	    uni.navigateBack({
	    	delta: 1 
	    });
	  },
	  getUserOrderDetails(paymentStatus) {
		  console.log(paymentStatus)
	        request({
	          url: '/app-api/small/drive/school-course-order/page',
	          method: 'GET',
	          params: {
	            userId: '1',
				paymentStatus:paymentStatus
	          },
	  		tenantIdFlag : false
	        }).then(res => {
	          this.orderList = res.data;
	        });
	      },
		  changeOrderType(type) {
		        this.orderType = type;
				console.log(type)
		        this.getUserOrderDetails(type); // 切换 Tab 时重新请求数据
				this.updateUnderlinePosition(type);
		      },
			  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>