237 lines
5.3 KiB
Vue
237 lines
5.3 KiB
Vue
<template>
|
|
<view class="container">
|
|
<u-navbar title="会员卡记录列表" :border-bottom="false" :background="bgc" back-icon-color="#333333" title-color='#333333'
|
|
title-size='36' height='36' id="navbar">
|
|
</u-navbar>
|
|
<!-- 订单列表 -->
|
|
<scroll-view
|
|
class="order-list"
|
|
scroll-y
|
|
@scrolltolower="loadMore">
|
|
<view
|
|
v-for="(item, index) in orderList"
|
|
:key="index"
|
|
class="order-item"
|
|
@click="btnxq(item.id)"
|
|
>
|
|
<!-- 订单状态和基本信息 -->
|
|
<view class="order-header">
|
|
<text class="order-no">订单号：{{item.no}}</text>
|
|
<text class="order-status">
|
|
已支付
|
|
</text>
|
|
</view>
|
|
|
|
<!-- 会员卡信息 -->
|
|
<view class="card-info">
|
|
<text class="card-name">{{item.vipName}}</text>
|
|
<text class="card-discount">{{item.vipDiscountValue}}折</text>
|
|
</view>
|
|
|
|
<!-- 订单详情 -->
|
|
<view class="order-detail">
|
|
<view class="detail-item">
|
|
<text>售价：</text>
|
|
<text class="price">¥{{item.vipPrice}}</text>
|
|
</view>
|
|
<view class="detail-item">
|
|
<text>有效期：</text>
|
|
<text>{{item.vipValidDays}}天</text>
|
|
</view>
|
|
<view class="detail-item" v-if="item.vipEnableLimit">
|
|
<text>使用限制：</text>
|
|
<text>{{item.vipLimitRound}}天内{{item.vipLimitCount}}次</text>
|
|
</view>
|
|
<view class="detail-item" v-if="item.vipEnableLimit">
|
|
<text>使用限制：</text>
|
|
<text>无限制</text>
|
|
</view>
|
|
<view class="detail-item">
|
|
<text>下单时间：</text>
|
|
<text>{{item.createTime}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 加载更多提示 -->
|
|
<view class="load-more">
|
|
<text>当前没有更多记录了...</text>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
orderList: [], // 订单列表数据
|
|
page: 1, // 当前页码
|
|
pageSize: 10, // 每页条数
|
|
loading: false, // 是否正在加载
|
|
noMore: false ,// 是否没有更多数据
|
|
bgc: {
|
|
backgroundColor: "#f5f5f5",
|
|
},
|
|
total:0
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.page = 1
|
|
this.getOrderList();
|
|
},
|
|
methods: {
|
|
// 点击跳转到详情
|
|
btnxq(id){
|
|
uni.navigateTo({
|
|
url:'/page_fenbao/huiyuan/goumaixq?id=' + id
|
|
})
|
|
},
|
|
// 获取订单列表
|
|
getOrderList() {
|
|
this.$u.get(`/app/vipOrder/list?pageNum=${this.page}&pageSize=${this.pageSize}&orderByColumn=createTime&isAsc=desc`).then((res) => {
|
|
if (res.code == 200) {
|
|
this.total = res.total
|
|
if(this.page == 1){
|
|
this.orderList = res.rows
|
|
this.page++
|
|
}else{
|
|
this.orderList = this.orderList.concat(res.rows)
|
|
this.page++
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
|
|
// 加载更多
|
|
loadMore() {
|
|
if(this.total > this.orderList.length){
|
|
this.getOrderList()
|
|
}else{
|
|
console.log(11);
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.container {
|
|
padding: 20rpx;
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.order-list {
|
|
height: 86vh;
|
|
.order-item {
|
|
background-color: #fff;
|
|
border-radius: 12rpx;
|
|
padding: 30rpx;
|
|
margin-bottom: 20rpx;
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
|
|
|
.order-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20rpx;
|
|
padding-bottom: 20rpx;
|
|
border-bottom: 1rpx dashed #eee;
|
|
|
|
.order-no {
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.order-status {
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
|
|
&.paid {
|
|
color: #67C23A;
|
|
}
|
|
|
|
&.unpaid {
|
|
color: #E6A23C;
|
|
}
|
|
|
|
&.canceled {
|
|
color: #909399;
|
|
}
|
|
}
|
|
}
|
|
|
|
.card-info {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20rpx;
|
|
|
|
.card-name {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
.card-discount {
|
|
font-size: 28rpx;
|
|
color: #f56c6c;
|
|
background-color: #fff0f0;
|
|
padding: 4rpx 12rpx;
|
|
border-radius: 6rpx;
|
|
}
|
|
}
|
|
|
|
.order-detail {
|
|
.detail-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
margin-bottom: 12rpx;
|
|
|
|
.price {
|
|
color: #f56c6c;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
.order-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-top: 30rpx;
|
|
padding-top: 20rpx;
|
|
border-top: 1rpx dashed #eee;
|
|
|
|
.btn {
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
font-size: 26rpx;
|
|
padding: 0 30rpx;
|
|
margin-left: 20rpx;
|
|
border-radius: 30rpx;
|
|
|
|
&.cancel {
|
|
background-color: #fff;
|
|
color: #666;
|
|
border: 1rpx solid #ddd;
|
|
}
|
|
|
|
&.pay {
|
|
background-color: #4a8cff;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.load-more {
|
|
text-align: center;
|
|
padding: 30rpx 0;
|
|
font-size: 26rpx;
|
|
color: #999;
|
|
}
|
|
}
|
|
</style> |