359 lines
8.2 KiB
Vue
359 lines
8.2 KiB
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 {
|
||
state: [3,4,5,6,7],
|
||
isRefreshing: false,
|
||
hasMore: true,
|
||
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}月`
|
||
}
|
||
},
|
||
onLoad() {
|
||
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('/user/syrandsjorders',{state: this.state,type: this.artisanType,add_time: this.currentYear+'-'+currentMonth}).then(res=>{
|
||
// 追加数据到列表
|
||
this.orderList = [...this.orderList, ...res.data]
|
||
// this.orderList = this.orderList.concat(res.data);
|
||
console.log(this.orderList,res.data)
|
||
// this.hasMore = true;
|
||
})
|
||
|
||
|
||
|
||
// 判断是否还有更多数据
|
||
// 获取当前日期，用于计算可查看的历史订单范围
|
||
// const now = new Date()
|
||
// const currentMonthTotal = now.getFullYear() * 12 + now.getMonth() + 1
|
||
// const selectedMonthTotal = this.currentYear * 12 + this.currentMonth
|
||
|
||
// 限制只能查看最近3个月的订单
|
||
// this.hasMore = currentMonthTotal - selectedMonthTotal < 3
|
||
|
||
} 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('/user/syrandsjorders',{state: this.state,type: this.artisanType,add_time: this.currentYear+'-'+currentMonth}).then(res=>{
|
||
// console.log(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: #E8101E;
|
||
margin-left: 68rpx;
|
||
}
|
||
|
||
.currency {
|
||
font-size: 24rpx;
|
||
color: #E8101E;
|
||
}
|
||
|
||
.amount {
|
||
font-size: 32rpx;
|
||
color: #E8101E;
|
||
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: #E8101E;
|
||
}
|
||
|
||
.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> |