fuck
40f523595b
修复了微信小程序的appid配置错误，将appid从"wxabe9cc4db1005fcb"更新为"wx3ae63fb09936b379"。同时，将URL从生产环境切换为本地开发环境，修改为"http://127.0.0.1:8080"。此外，优化了http请求的错误处理逻辑，增加了对响应状态码和业务状态码的检查，确保请求失败时能够正确捕获并处理错误。
289 lines
7.4 KiB
Vue
289 lines
7.4 KiB
Vue
<template>
|
||
<view class="order-container">
|
||
<!-- 状态切换 -->
|
||
<view class="tab-bar">
|
||
<view
|
||
v-for="(tab, index) in tabs"
|
||
:key="index"
|
||
class="tab-item"
|
||
:class="{ active: currentTab === index }"
|
||
@click="switchTab(index)"
|
||
>
|
||
{{ tab }}
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 订单列表 -->
|
||
<view class="order-list">
|
||
<view class="order-item" v-for="(order, index) in orderList" :key="index">
|
||
<view class="order-header">
|
||
<text class="order-no">订单号：{{ order.orderNo }}</text>
|
||
<text class="order-status" :class="order.status">{{ order.statusText }}</text>
|
||
</view>
|
||
<view class="order-content">
|
||
<view class="device-info">
|
||
<text class="device-name">共享风扇</text>
|
||
<text class="device-id">设备号：{{ order.deviceId }}</text>
|
||
</view>
|
||
<view class="time-info">
|
||
<view class="time-item">
|
||
<text class="label">开始时间：</text>
|
||
<text class="value">{{ order.startTime }}</text>
|
||
</view>
|
||
<view class="time-item">
|
||
<text class="label">结束时间：</text>
|
||
<text class="value">{{ order.endTime || '-' }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="price-info">
|
||
<text class="amount">￥{{ order.amount }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 无数据提示 -->
|
||
<view class="empty-tip" v-if="orderList.length === 0">
|
||
<view class="empty-icon"></view>
|
||
<text>暂无订单记录</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {getOrderList, queryById} from '../../config/user.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
currentTab: 0,
|
||
tabs: ['全部', '使用中', '已完成'],
|
||
orderList: [
|
||
{
|
||
orderNo: 'ORDER202403200001',
|
||
status: 'using',
|
||
statusText: '使用中',
|
||
deviceId: 'FAN001',
|
||
startTime: '2024-03-20 15:30',
|
||
endTime: '',
|
||
amount: '2.00'
|
||
},
|
||
{
|
||
orderNo: 'ORDER202403190001',
|
||
status: 'finished',
|
||
statusText: '已完成',
|
||
deviceId: 'FAN002',
|
||
startTime: '2024-03-19 13:00',
|
||
endTime: '2024-03-19 15:00',
|
||
amount: '4.00'
|
||
}
|
||
]
|
||
}
|
||
},
|
||
async onLoad(options) {
|
||
// 如果有传入orderId参数，说明是从设备租借页面跳转过来的
|
||
if (options && options.orderId) {
|
||
try {
|
||
// 获取特定订单信息
|
||
const res = await queryById(options.orderId);
|
||
if (res.code === 200 && res.data) {
|
||
// 将获取到的订单添加到列表中
|
||
const orderData = res.data;
|
||
// 格式化订单数据
|
||
const formattedOrder = {
|
||
orderNo: orderData.orderId,
|
||
status: orderData.orderStatus === 2 ? 'using' : 'finished',
|
||
statusText: orderData.orderStatus === 2 ? '使用中' : '已完成',
|
||
deviceId: orderData.deviceNo,
|
||
startTime: this.formatTime(new Date(orderData.createTime)),
|
||
endTime: orderData.endTime ? this.formatTime(new Date(orderData.endTime)) : '',
|
||
amount: orderData.amount || '0.00'
|
||
};
|
||
|
||
// 将订单添加到列表开头
|
||
this.orderList = [formattedOrder, ...this.orderList];
|
||
|
||
// 如果是使用中的订单，切换到使用中标签
|
||
if (orderData.orderStatus === 2) {
|
||
this.switchTab(1); // 切换到"使用中"
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error('获取订单详情失败:', error);
|
||
}
|
||
}
|
||
|
||
// 获取订单列表
|
||
try {
|
||
const res = await getOrderList();
|
||
console.log(res);
|
||
if (res.code === 200 && res.data && res.data.records) {
|
||
// 处理订单列表数据
|
||
this.orderList = res.data.records.map(item => ({
|
||
orderNo: item.orderId,
|
||
status: item.orderStatus === 2 ? 'using' : 'finished',
|
||
statusText: item.orderStatus === 2 ? '使用中' : '已完成',
|
||
deviceId: item.deviceNo,
|
||
startTime: item.startTime,
|
||
endTime: item.endTime ? this.formatTime(new Date(item.endTime)) : '',
|
||
amount: item.amount || '0.00'
|
||
}));
|
||
}
|
||
} catch (error) {
|
||
console.error('获取订单列表失败:', error);
|
||
}
|
||
},
|
||
methods: {
|
||
formatTime(date) {
|
||
const year = date.getFullYear()
|
||
const month = (date.getMonth() + 1).toString().padStart(2, '0')
|
||
const day = date.getDate().toString().padStart(2, '0')
|
||
const hour = date.getHours().toString().padStart(2, '0')
|
||
const minute = date.getMinutes().toString().padStart(2, '0')
|
||
|
||
return `${year}-${month}-${day} ${hour}:${minute}`
|
||
},
|
||
switchTab(index) {
|
||
this.currentTab = index
|
||
// TODO: 根据状态获取订单列表
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.order-container {
|
||
min-height: 100vh;
|
||
background: #f8f8f8;
|
||
|
||
.tab-bar {
|
||
display: flex;
|
||
background: #fff;
|
||
padding: 20rpx 0;
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
|
||
|
||
.tab-item {
|
||
flex: 1;
|
||
text-align: center;
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
position: relative;
|
||
padding: 20rpx 0;
|
||
|
||
&.active {
|
||
color: #1976D2;
|
||
font-weight: 500;
|
||
|
||
&::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 40rpx;
|
||
height: 4rpx;
|
||
background: #1976D2;
|
||
border-radius: 2rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.order-list {
|
||
padding: 20rpx;
|
||
|
||
.order-item {
|
||
background: #fff;
|
||
border-radius: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
padding: 30rpx;
|
||
box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04);
|
||
|
||
.order-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding-bottom: 20rpx;
|
||
border-bottom: 1rpx solid #f5f5f5;
|
||
|
||
.order-no {
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.order-status {
|
||
font-size: 26rpx;
|
||
|
||
&.using {
|
||
color: #1976D2;
|
||
}
|
||
|
||
&.finished {
|
||
color: #4CAF50;
|
||
}
|
||
}
|
||
}
|
||
|
||
.order-content {
|
||
padding-top: 20rpx;
|
||
|
||
.device-info {
|
||
margin-bottom: 20rpx;
|
||
|
||
.device-name {
|
||
font-size: 32rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.device-id {
|
||
font-size: 26rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
|
||
.time-info {
|
||
.time-item {
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
margin-bottom: 10rpx;
|
||
|
||
.label {
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
|
||
.price-info {
|
||
text-align: right;
|
||
margin-top: 20rpx;
|
||
|
||
.amount {
|
||
font-size: 36rpx;
|
||
color: #FF9800;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.empty-tip {
|
||
padding: 100rpx 0;
|
||
text-align: center;
|
||
color: #999;
|
||
font-size: 28rpx;
|
||
|
||
.empty-icon {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
margin: 0 auto 20rpx;
|
||
background: #f0f0f0;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
}
|
||
</style> |