133 lines
3.0 KiB
Vue
133 lines
3.0 KiB
Vue
<template>
|
|
<view class="app-container">
|
|
<HeaderBar title="购买记录" enable-back text-align="center" />
|
|
<view class="order-list">
|
|
<view v-for="(item, index) in orderList" :key="index" class="order-item">
|
|
<view class="order-header">
|
|
<text class="order-no">{{ item.no }}</text>
|
|
<text class="order-time">{{ item.createTime }}</text>
|
|
</view>
|
|
<view class="order-content">
|
|
<view class="order-info">
|
|
<text class="vip-level">{{ VipLevel.getName(item.vipLevel) }}</text>
|
|
<text class="days">{{ item.days }}天</text>
|
|
</view>
|
|
<text class="amount">¥{{ item.amount | fix2 | dv}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<uni-load-more :status="loadStatus(loading, orderList.length, total)" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { mchListVipOrder } from '@/api/mch/vipOrder'
|
|
import HeaderBar from '@/components/HeaderBar.vue'
|
|
import { $loadList } from '@/utils/mixins'
|
|
import { VipOrderStatus, VipLevel } from '@/utils/enums'
|
|
|
|
export default {
|
|
mixins: [$loadList],
|
|
components: {
|
|
HeaderBar
|
|
},
|
|
data() {
|
|
return {
|
|
VipLevel,
|
|
orderList: [],
|
|
queryParams: {
|
|
pageNum: 0,
|
|
pageSize: 20,
|
|
orderByColumn: 'createTime',
|
|
isAsc: 'desc',
|
|
status: VipOrderStatus.SUCCESS
|
|
},
|
|
total: null,
|
|
loading: false,
|
|
}
|
|
},
|
|
onShow() {
|
|
this.getOrderList()
|
|
},
|
|
onReachBottom() {
|
|
this.loadOrderList()
|
|
},
|
|
methods: {
|
|
getOrderList() {
|
|
this.queryParams.pageNum = 0;
|
|
this.total = null;
|
|
this.loading = false;
|
|
this.queryParams.mchId = this.$store.getters.mchId;
|
|
this.loadOrderList();
|
|
},
|
|
loadOrderList() {
|
|
this.loadMore(() => {
|
|
this.loading = true;
|
|
this.queryParams.pageNum++;
|
|
mchListVipOrder(this.queryParams).then(res => {
|
|
this.orderList.push(...res.rows);
|
|
this.total = res.total;
|
|
}).finally(() => {
|
|
this.loading = false;
|
|
})
|
|
}, this.loadStatus(this.loading, this.orderList.length, this.total))
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.order-list {
|
|
padding: 20rpx;
|
|
|
|
.order-item {
|
|
background: #fff;
|
|
border-radius: 12rpx;
|
|
padding: 24rpx;
|
|
margin-bottom: 20rpx;
|
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
|
|
|
.order-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 20rpx;
|
|
|
|
.order-no {
|
|
color: #333;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.order-time {
|
|
color: #999;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
|
|
.order-content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.order-info {
|
|
.vip-level {
|
|
color: #333;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.days {
|
|
color: #666;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
.amount {
|
|
color: #ff6b6b;
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |