style:根据UI设计图跳转页面样式
This commit is contained in:
+30
-97
@@ -11,96 +11,22 @@
|
||||
<!-- 订单列表 -->
|
||||
<view class="order-list">
|
||||
<view class="empty-state" v-if="orderList.length === 0">
|
||||
<view class="empty-icon"></view>
|
||||
<view class="empty-icon">
|
||||
<image src="/static/orderList.png" mode="aspectFill" class="empty-icon"></image>
|
||||
</view>
|
||||
<text class="empty-text">暂无订单记录</text>
|
||||
</view>
|
||||
|
||||
<view class="order-item" v-for="(order, index) in orderList" :key="index">
|
||||
<!-- 订单头部信息 -->
|
||||
<view class="order-header">
|
||||
<view class="order-id">
|
||||
<text>订单号：{{ order.orderNo }}</text>
|
||||
</view>
|
||||
<view class="order-status" :class="orderStatusMap[order.orderStatus]?.class">
|
||||
{{ orderStatusMap[order.orderStatus]?.text }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 订单内容 -->
|
||||
<view class="order-body">
|
||||
<view class="device-info">
|
||||
<view class="device-left">
|
||||
<view class="device-name">共享风扇</view>
|
||||
<view class="device-id">设备号：{{ order.deviceId }}</view>
|
||||
</view>
|
||||
|
||||
<!-- 支付方式标识 -->
|
||||
<view class="device-right">
|
||||
<!-- 微信支付分标识 -->
|
||||
<view class="payment-badge wx-score" v-if="order.payWay == 'wx_score_pay'">
|
||||
<image src="/static/images/wxpayflag.png" mode="aspectFit" class="badge-icon"></image>
|
||||
<view class="badge-text">
|
||||
<text>微信支付分</text>
|
||||
<text class="divider">|</text>
|
||||
<text class="highlight">免押租借</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 会员订单标识 -->
|
||||
<view class="payment-badge member" v-else-if="order.payWay == 'wx_member_pay'">
|
||||
<text class="badge-text">会员订单</text>
|
||||
</view>
|
||||
<!-- 押金租借标识（微信支付订单） -->
|
||||
<view class="payment-badge deposit" v-else-if="order.payWay == 'wx_pay'">
|
||||
<text class="badge-text">押金租借</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 订单时间信息 -->
|
||||
<view class="order-times">
|
||||
<view class="time-row">
|
||||
<text class="time-label">开始时间：</text>
|
||||
<text class="time-value">{{ order.startTime }}</text>
|
||||
</view>
|
||||
<view class="time-row">
|
||||
<text class="time-label">结束时间：</text>
|
||||
<text class="time-value">{{ order.endTime || '-' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 订单底部 -->
|
||||
<view class="order-footer">
|
||||
<view class="price">￥{{ order.amount }}</view>
|
||||
|
||||
<view class="actions">
|
||||
<!-- 待支付状态显示支付和取消按钮 -->
|
||||
<view v-if="order.status === 'waiting_for_payment' || order.orderStatus === 'waiting_for_payment'" class="action-item primary" @click="handlePayment(order)">
|
||||
立即支付
|
||||
</view>
|
||||
<view v-if="order.status === 'waiting_for_payment' || order.orderStatus === 'waiting_for_payment'" class="action-item secondary" @click="handleCancelOrder(order)">
|
||||
取消订单
|
||||
</view>
|
||||
|
||||
<!-- 使用中状态显示归还设备按钮 -->
|
||||
<view v-if="order.status=='in_used' || order.orderStatus=='in_used'" class="action-item primary"
|
||||
@click="navigateToReturn(order.deviceId, order.orderId)">
|
||||
归还设备
|
||||
</view>
|
||||
|
||||
<!-- 查看详情按钮对所有订单都显示 -->
|
||||
<view class="action-item secondary" @click="navigateToDetails(order)">
|
||||
查看详情
|
||||
</view>
|
||||
|
||||
<!-- 同步订单状态按钮 -->
|
||||
<!-- <view v-if="order.status === 'waiting_for_payment' || order.orderStatus === 'waiting_for_payment'" class="action-item secondary"
|
||||
@click="getOrderStatus(order)">
|
||||
同步状态
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<OrderItemCard
|
||||
v-for="(order, index) in orderList"
|
||||
:key="index"
|
||||
:order="order"
|
||||
:orderStatusMap="orderStatusMap"
|
||||
@pay="handlePayment"
|
||||
@cancel="handleCancelOrder"
|
||||
@return-device="onReturnDevice"
|
||||
@details="navigateToDetails"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -111,6 +37,7 @@
|
||||
reactive,
|
||||
onMounted
|
||||
} from 'vue';
|
||||
import OrderItemCard from '../../components/OrderItemCard.vue';
|
||||
import {
|
||||
onLoad
|
||||
} from '@dcloudio/uni-app';
|
||||
@@ -215,7 +142,9 @@
|
||||
payWay: orderData.payWay,
|
||||
startTime: orderStartTime,
|
||||
endTime: orderData.endTime || '',
|
||||
amount: orderData.payAmount || orderData.actualDeviceAmount || '0.00'
|
||||
positionName: orderData.positionName || orderData.positionLocation || '',
|
||||
deviceName: orderData.deviceName || '',
|
||||
amount: orderData.payAmount || orderData.actualDeviceAmount || orderData.currentFee || orderData.residueAmount || '0.00'
|
||||
};
|
||||
|
||||
// 将订单添加到列表开头
|
||||
@@ -270,7 +199,9 @@
|
||||
payWay: item.payWay,
|
||||
startTime: orderStartTime,
|
||||
endTime: item.endTime || '',
|
||||
amount: item.payAmount || item.actualDeviceAmount || '0.00'
|
||||
positionName: item.positionName || item.positionLocation || '',
|
||||
deviceName: item.deviceName || '',
|
||||
amount: item.payAmount || item.actualDeviceAmount || item.currentFee || item.residueAmount || '0.00'
|
||||
};
|
||||
});
|
||||
}
|
||||
@@ -302,19 +233,21 @@
|
||||
}
|
||||
};
|
||||
|
||||
// 跳转到归还设备页面
|
||||
const navigateToReturn = (deviceId, orderId) => {
|
||||
console.log(orderId);
|
||||
// 跳转到订单详情页面（统一入口）
|
||||
const navigateToOrderDetail = (order) => {
|
||||
uni.navigateTo({
|
||||
url: `/pages/return/index?deviceId=${deviceId}&orderId=${orderId}`
|
||||
url: `/pages/order/detail?orderId=${order.orderId || order.orderNo}&deviceId=${order.deviceId}`
|
||||
});
|
||||
};
|
||||
|
||||
// 组件事件：归还设备（实际跳转到订单详情页）
|
||||
const onReturnDevice = (order) => {
|
||||
navigateToOrderDetail(order);
|
||||
};
|
||||
|
||||
// 跳转到订单详情页
|
||||
const navigateToDetails = (order) => {
|
||||
uni.navigateTo({
|
||||
url: `/pages/return/index?orderId=${order.orderId || order.orderNo}&deviceId=${order.deviceId}`
|
||||
});
|
||||
navigateToOrderDetail(order);
|
||||
};
|
||||
|
||||
// 立即支付
|
||||
@@ -676,7 +609,7 @@
|
||||
height: 180rpx;
|
||||
margin: 0 auto 30rpx;
|
||||
background: #f5f5f5;
|
||||
border-radius: 50%;
|
||||
// border-radius: 50%;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
|
||||
Reference in New Issue
Block a user