JP-ChargeTeam51/pages/discountCard/myOrder.vue

<template>
	<view>
		<ujp-navbar title="订单列表"></ujp-navbar>
		<view class="tabs" v-if="false">
			<u-tabs active-color="#00B962" :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>
		<view class="card" v-for="(item,i) in list[current].list"   :key="i" >
			<view class="state">
				<view class="time">
					订单生成时间：{{item.createTime}}
				</view>
				<view class="payment-state">
					{{item.status=='1'?'已付款':''}}
					{{item.status=='0'?'未付款':''}}
				</view>
			</view>
			<view class="card-infos">
				<view class="picture">
					<img :src="item.monthlyRentCard.image" alt="">
				</view>
				<view class="infos">
					<view class="name">
						{{item.monthlyRentName}}
					</view>
					<view class="usable" v-if="item.monthlyRentCard.classify==2">
						可用{{item.monthlyRentCard.chargeDegreeLimit}}度（有效期{{item.monthlyRentCard.periodOfValidity}}天）
					</view>
					<view class="price">
						{{item.monthlyRentCard.price}}元
					</view>
				</view>
				<view class="amount">
					x1
				</view>
			</view>
			
			<view class="order-amount">
				<view class="title">
					订单金额
				</view>
				<view class="value">
					{{item.monthlyRentCard.price}}元
				</view>
			</view>
			
		</view>
		<u-divider  bg-color="#F2F4F4" v-if="list[current].list.length&&list[current].list.length == list[current].recordsTotal" >已经到底了</u-divider>
		
		<view class="carNone" v-if="list[current].list.length == 0">
				<img src="static/img/暂无数据-缺省页.png" alt="">
				<p class="oldTextjp2" oldstyle="font-size: 18px;">暂无记录</p>
			</view>
			
	</view>
</template>

<script>
	import * as API from '@/apis/order.js'
	
	export default {
		data() {
			return {
				list: [{
					name: '全部',
					pageIndex: 1,
					pageSize: 20,
					recordsTotal: 1,
					status: "",
					list: []
				}, {
					name: '未付款',
					pageIndex: 1,
					pageSize: 20,
					recordsTotal: 1,
					status: "0",
					list: []
				}, {
					name: '已付款',
					pageIndex: 1,
					pageSize: 20,
					recordsTotal: 1,
					status: "1",
					list: []
					
				}],
				current: 2
			}
		},
		onLoad(op) {
			if (op.c) {
				this.current = op.c
			}
			this.getList();
		},
		onReachBottom() {
			var obj = this.list[this.current]
			if (obj.list.length < obj.recordsTotal) {
				this.myLoadmore();
			}
		},
		methods: {
			
			getList() {
			
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				var list = this.list[this.current].list
				var obj = this.list[this.current]
				var listForm = {
					...obj
				}
				delete listForm.list
			
				API.buyCardList(listForm).then((res) => {
			
					if (listForm.pageIndex == 1) {
						list = res.data.data;
					} else {
						list = [
							...list,
							...res.data.data
						];
					}
			
					this.list[this.current].list = list
			
					this.list[this.current].recordsTotal = res.data.recordsTotal;
					uni.hideLoading();
				}).catch(error => {
					uni.showToast({
						icon: 'none',
						title: error,
						icon: "none"
					})
				})
			
			},
			myLoadmore() {
				this.list[this.current].pageIndex += 1;
				this.getList();
			},
			change(index) {
				this.current = index;
				var list = this.list[this.current].list
				this.list[this.current].pageIndex = 1;
				this.list[this.current].list = [];
				this.getList();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.carNone{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		img{
			width: 100%;
			height: 100%;
		}
		p{
			margin-top: -60px;
		}
	}
	.tabs{
		padding: 0 80rpx;
		background-color: #fff;
	}
	.card{
		margin: 24rpx;
		padding: 24rpx;
		background-color: #fff;
		border-radius: 16rpx;
		.state{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.time{
				color: rgba(119, 119, 119, 1);
			}
			.payment-state{
				color: rgba(51, 51, 51, 1);
			}
		}
		.card-infos{
			margin: 32rpx 0 40rpx ;
			display: flex;
			align-items: center;
			.picture{
				width: 152rpx;
				height: 152rpx;
				border-radius: 4px;
				img{
					width: 100%;
				}
			}
			.infos{
				margin-left: 26rpx;
				.name{
					color: rgba(51, 51, 51, 1);
					font-size: 32rpx;
					font-weight: bold;
				}
				.usable{
					color: rgba(119, 119, 119, 1);
					font-size: 24rpx;
					margin-top: 8rpx;
				}
				.price{
					color: rgba(16, 16, 16, 1);
					font-size: 32rpx;
					margin-top: 24rpx;
				}
			}
			.amount{
				margin-left: auto;
				color: rgba(51, 51, 51, 1);
				font-size: 32rpx;
			}
		}
		.order-amount{
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: rgba(51, 51, 51, 1);
			.value{
				font-size: 32rpx;
			}
		}
	}

</style>