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" @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>