94 lines
2.2 KiB
Vue
94 lines
2.2 KiB
Vue
<template>
|
|
<view>
|
|
<!-- 1. tab组件 -->
|
|
<u-tabs
|
|
:list="tabs"
|
|
:is-scroll="false"
|
|
:current="tabsCurrent"
|
|
inactive-color="#666"
|
|
active-color="#eb4450"
|
|
@change="onTapsChange"
|
|
></u-tabs>
|
|
|
|
<!-- 2. 菜单 -->
|
|
<view class="list">
|
|
<view class="item" v-for="item in orders" :key="item.order_id">
|
|
<view class="item_row">
|
|
<text class="item_row_left">订单编号</text>
|
|
<text class="item_row_right">{{ item.order_number }}</text>
|
|
</view>
|
|
<view class="item_row">
|
|
<text class="item_row_left">订单金额</text>
|
|
<text class="item_row_right price">{{ item.order_price }}</text>
|
|
</view>
|
|
<view class="item_row">
|
|
<text class="item_row_left">订单日期</text>
|
|
<text class="item_row_right">{{item.update_time_format}}</text>
|
|
</view>
|
|
<view class="item_row">
|
|
<text class="item_row_left">支付状态</text>
|
|
<text class="item_row_right">{{ item.pay_status === "0" ? "未支付" : "已付款" }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data(){
|
|
return{
|
|
tabs: [
|
|
{
|
|
name: "全部",type: 1
|
|
},
|
|
{
|
|
name: "待支付",type: 2
|
|
},
|
|
{
|
|
name: "待发货", type: 3
|
|
},
|
|
],
|
|
tabsCurrent: 0,
|
|
orders: [],
|
|
type: 1
|
|
}
|
|
},
|
|
methods: {
|
|
// 切换子页面
|
|
onTapsChange(index){
|
|
this.tabsCurrent = index
|
|
this.type = this.tabs[index].type
|
|
this.getOrderList()
|
|
},
|
|
// 获取支付信息
|
|
async getOrderList(){
|
|
const {message: { orders }} = await this.$u.api.getOrderList({ type: this.type })
|
|
this.orders = orders.map(item => ({...item, update_time_format: new Date(item.update_time * 1000).toLocaleString()}))
|
|
}
|
|
},
|
|
|
|
onLoad() {
|
|
this.getOrderList()
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.list {
|
|
.item {
|
|
padding: 20rpx;
|
|
border-top: 5px solid #f4f4f4;
|
|
.item_row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 60rpx;
|
|
.item_row_left {
|
|
color: #666;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |