141 lines
5.1 KiB
Vue
141 lines
5.1 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view class="tabs">
|
||
<view v-for="(item, index) in categoryList" :key="index"
|
||
:class="['tabItem', selectedTab === index ? 'active2' : '']" @click="selectTab(index, item)">
|
||
{{ item.category_name }}
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 订单列表 -->
|
||
<view class="order-list">
|
||
<view v-for="(order, index) in orders" :key="index" class="order-card">
|
||
<view class="order-header">
|
||
<text class="order-number">订单编号：{{ order.order_sn }}</text>
|
||
<text class="order-status" :class="{
|
||
'pending': order.status == 1,
|
||
'using': order.status == 2,
|
||
'expired': order.status == 3
|
||
}">
|
||
{{ order.status == 1 ? '待支付' : order.status == 2 ? '使用中' : order.status == 3 ? '已过期' : '' }}
|
||
</text>
|
||
</view>
|
||
<view class="order-content">
|
||
<view class="order-item">
|
||
<text class="order-label">车场名称</text>
|
||
<text class="order-value">{{ order.parkingInfo.parking_name }}</text>
|
||
</view>
|
||
<view class="order-item">
|
||
<text class="order-label">车牌号</text>
|
||
<text class="order-value">{{ order.carInfo.car_no }}</text>
|
||
</view>
|
||
<view class="order-item">
|
||
<text class="order-label">包月月数</text>
|
||
<text class="order-value">{{ order.month_num }}个月</text>
|
||
</view>
|
||
<view class="order-item">
|
||
<text class="order-label">开始时间</text>
|
||
<text class="order-value">{{ order.carInfo.enable_time }}</text>
|
||
</view>
|
||
<view class="order-item">
|
||
<text class="order-label">到期时间</text>
|
||
<text class="order-value">{{ order.carInfo.deadline_time }}</text>
|
||
</view>
|
||
<view class="order-item amount">
|
||
<text class="order-label">订单金额</text>
|
||
<text class="order-value amount-value">¥{{ order.amount }}</text>
|
||
</view>
|
||
|
||
<!-- 根据订单状态显示不同内容 -->
|
||
<view v-if="order.status == '2' || order.status === '3'" class="order-item">
|
||
<text class="order-label">付款时间</text>
|
||
<text class="order-value">{{ order.pay_time }}</text>
|
||
</view>
|
||
|
||
<view v-if="order.status == '2'" class="order-item">
|
||
<text class="order-label">支付状态</text>
|
||
<text class="order-value paid">已支付</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 待支付订单显示操作按钮 -->
|
||
<view v-if="order.status === 'pending'" class="order-footer">
|
||
<view class="cancel-button" @tap="cancelOrder(order)">取消订单</view>
|
||
<view class="pay-button" @tap="goToPayment(order)">去支付</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
isPhone,
|
||
picUrl,
|
||
request,
|
||
upload,
|
||
NavgateTo
|
||
} from '../../../utils';
|
||
import { apiArr } from '@/api/park.js'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
categoryList: [
|
||
{
|
||
category_name: '全部',
|
||
category_id: 0
|
||
},
|
||
{
|
||
category_name: '待支付',
|
||
category_id: 1
|
||
},
|
||
{
|
||
category_name: '使用中',
|
||
category_id: 2
|
||
},
|
||
{
|
||
category_name: '已过期',
|
||
category_id: 3
|
||
},
|
||
],
|
||
selectedTab: 0,
|
||
orders: []
|
||
}
|
||
},
|
||
methods: {
|
||
selectTab(index, item) {
|
||
this.selectedTab = index;
|
||
this.getOrderList()
|
||
},
|
||
// 取消订单
|
||
cancelOrder(order) {
|
||
console.log('取消订单:', order);
|
||
},
|
||
// 去支付
|
||
goToPayment(order) {
|
||
NavgateTo('../parkOrderDetail/index');
|
||
},
|
||
// 获取订单列表
|
||
getOrderList() {
|
||
const params = {
|
||
user_id: uni.getStorageSync('userId'),
|
||
order_status: this.selectedTab,
|
||
}
|
||
if (params.order_status == 0) {
|
||
params.order_status = ''
|
||
}
|
||
request(apiArr.monthCardOrderList, "POST", params).then(res => {
|
||
this.orders = res.month_card_order_list;
|
||
})
|
||
},
|
||
onLoad() {
|
||
this.getOrderList()
|
||
}
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
@import url('./index.css');
|
||
</style> |