mrr.sj.front/pages/syr/shoporders.vue

<template>
  <view class="orders-page">
    <!-- 顶部导航栏 -->
    <custom-navbar 
      title="全部订单" 
      :show-back="true"
      backgroundColor="#fff"
    ></custom-navbar>
    
    <!-- 订单列表 -->
    <!-- <scroll-view 
      scroll-y 
      class="order-list"
      @scrolltolower="loadMore"
      refresher-enabled
      :refresher-triggered="isRefreshing"
      @refresherrefresh="onRefresh"
    > -->
	<view class="order-list">
      <view class="order-item" v-for="(order, index) in orderList" :key="index">
        <!-- 订单日期 -->
        <text class="order-date">{{order.add_time}}</text>
        
        <!-- 订单内容 -->
        <view class="order-content">
          <!-- 服务图片 -->
          <image 
            :src="order.order_photo[0]" 
            mode="aspectFill" 
            class="service-image"
          ></image>
          
          <!-- 订单信息 -->
          <view class="order-info">
            <!-- 服务名称 -->
            <view class="service-name text-overflow-1">{{order.server_title}}</view>
            
            <!-- 评分 -->
            <!-- <view class="rating">
              <image 
                v-for="n in 5" 
                :key="n"
                src="/static/images/star.png"
                mode="aspectFit"
                class="star-icon"
              ></image>
              <text class="rating-score">{{order.rating}}</text>
            </view> -->
            
            <!-- 价格 -->
            <view class="price">
              <text class="currency">¥</text>
              <text class="amount">{{order.pay_money}}</text>
            </view>
            
            <!-- 地址 -->
            <view class="address" v-if="order.order_kind == 1">
              <image 
                src="/static/images/position_icon.png"
                mode="aspectFit"
                class="location-icon"
              ></image>
              <text class="address-text text-overflow-1">{{order.reservation_address}}</text>
            </view>
          </view>
        </view>
		<!-- 订单状态 -->
        <view class="order-status">
          <text class="status-text">{{order.state == 1 ? '待支付' : order.state == 2 ? '待接单' : order.state == 3 ? '待服务' : order.state == 4 ? '待完成' : order.state == 5 ? '已完成' : order.state == 6 ? '待评价' : order.state == 7 ? '已取消' : ''}}</text>
        </view>
      </view>
      
      <!-- 加载更多 -->
      <view class="load-more" @click="loadPreviousMonth">
		<view class="">
			<text class="load-text">点击查看，</text>
			<text class="load-date">{{nextMonthText}}</text>
			<text class="load-text">订单</text>
		</view>
      </view>
    </view>
  </view>
</template>

<script>
import request from '../../utils/request'
export default {
  data() {
    const now = new Date()
    return {
	  userInfo: {},
      isRefreshing: false,
      currentYear: now.getFullYear(),
      currentMonth: now.getMonth() + 1, // JavaScript月份从0开始，需要+1
      orderList: [],
	  artisanType: getApp().globalData.artisanType
    }
  },
  computed: {
    nextMonthText() {
      let year = this.currentYear
      let month = this.currentMonth - 1
      
      if (month === 0) {
        year--
        month = 12
      }
      
      return `${year}年${month}月`
    }
  },
  async onLoad() {
	const {data} = await request.post('/user/getuser',{type: 2});
	this.userInfo = data;
  	this.loadOrders();
  },
  onPullDownRefresh() {
	this.onRefresh();
  },
  methods: {
    // 格式化日期
    formatDate(date) {
      return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}号`
    },
    
    // 下拉刷新
    async onRefresh() {
      this.isRefreshing = true
      // 重置为当前月份
      const now = new Date()
      this.currentYear = now.getFullYear()
      this.currentMonth = now.getMonth() + 1
      await this.loadOrders()
	  uni.stopPullDownRefresh()
	  // console.log('this.isRefreshing',this.isRefreshing)
      this.isRefreshing = false;
    },
    
    // 加载更多
    async loadMore() {
      await this.loadOrders()
    },
    
    // 加载上一个月订单
    async loadPreviousMonth() {
      uni.showLoading({
        title: '加载中...'
      })
      
      try {
        // 更新月份
        if (this.currentMonth === 1) {
          this.currentYear--
          this.currentMonth = 12
        } else {
          this.currentMonth--
        }
        let currentMonth;
        if(this.currentMonth<10) {
        		currentMonth = '0' + this.currentMonth
        }else {
        		currentMonth = this.currentMonth
        }
		console.log(this.currentYear+'-'+currentMonth)
        // 加载上一个月数据
        request.post('/syr/syrgetsjorder',{syrid: this.userInfo.id,add_time: this.currentYear+'-'+currentMonth}).then(res=>{
			// 追加数据到列表
			this.orderList = [...this.orderList, ...res.data];
			console.log(this.orderList,res.data)
        })
      } catch (error) {
        uni.showToast({
          title: '加载失败，请重试',
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
      }
    },
    
    // 加载订单数据
    async loadOrders() {
      // TODO: 调用获取订单列表接口
	  let currentMonth;
	  if(this.currentMonth<10) {
		currentMonth = '0' + this.currentMonth
	  }else {
		currentMonth = this.currentMonth
	  }
      return new Promise(resolve => {
        request.post('/syr/syrgetsjorder',{syrid: this.userInfo.id,add_time: this.currentYear+'-'+currentMonth}).then(res=>{
			this.orderList = res.data;
			resolve(res.data)
        })
      })
    }
  }
}
</script>

<style>
.order-item {
  margin: 32rpx 24rpx;
  border-radius: 16rpx;
  padding: 24rpx;
  background-color: #FFFFFF;
  position: relative;
}

.order-date {
  font-size: 24rpx;
  color: #666666;
  font-weight: 400;
}

.order-content {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  margin-top: 16rpx;
}

.service-image {
  width: 162rpx;
  height: 162rpx;
  border-radius: 24rpx;
  margin-right: 16rpx;
  background-color: #333333;
}

.order-info {
  width: 350rpx;
  height: 162rpx;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: flex-start;
}

.service-name {
  flex: 1;
  font-size: 28rpx;
  color: #000000;
  font-weight: 400;
  margin-bottom: 6rpx;
}

.rating {
  display: flex;
  align-items: center;
  margin-bottom: 6rpx;
}

.star-icon {
  width: 20rpx;
  height: 20rpx;
  margin-right: 6rpx;
  background-color: #000000;
}

.rating-score {
  font-size: 16rpx;
  color: #FF4767;
  margin-left: 68rpx;
}

.currency {
  font-size: 24rpx;
  color: #FF4767;
}

.amount {
  font-size: 32rpx;
  color: #FF4767;
  font-weight: 500;
}

.address {
  display: flex;
  align-items: center;
}

.location-icon {
  width: 24rpx;
  height: 24rpx;
  margin-right: 4rpx;
}

.address-text {
  font-size: 24rpx;
  color: #999999;
  flex: 1;
}

.order-status {
  position: absolute;
  top: 0;
  right: 0;
}

.status-text {
  font-size: 24rpx;
  font-weight: 400;
  padding: 6rpx 16rpx;
  color: #28D189;
  background-color: rgba(40, 209, 137, 0.20);
  border-radius: 0 16rpx 0 16rpx;
}

.load-more {
  text-align: center;
  padding: 0 0 32rpx;
}
.load-date {
  font-size: 24rpx;
  color: #FF4767;
}

.load-text {
  font-size: 24rpx;
  color: #999999;
}

.nothings-box {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	padding: 280rpx 0 0;
}
.nothings-text {
	font-size: 32rpx;
	font-weight: 500;
	color: #999999;
	text-align: center;
	font-style: italic;
}
/* 下拉刷新样式 */
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}
</style>