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' }"
            @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">
            <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_3 flex-col">
                  <text class="text_7">{{item.type}}</text>
                </view>
                <view class="text-wrapper_4 flex-col">
                  <text class="text_8">{{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: {
        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
      });
    },

    /**
     * 上滑加载数据
     */
    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) {
       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)
           });
         }, */

    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;

        console.log('订单信息', res.data);
      }).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;
      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>