gongxiang/pages/user/buyList.vue

<template>
	<view class="content">
		<empty v-if="loaded === true && list.length === 0"></empty>
		<view class="order" v-for="item in list">
			<view class="base-info flex">
				<image :src="item.image" mode=""></image>
				<view class="goods">
					<view class="goods-name clamp">
						{{item.name}}
					</view>
					<view class="goods-num">
						X 1
					</view>
				</view>
			</view>
			<view class="">
				有效期：{{formatTimestamp(item.valid_time*1000)}}
			</view>
			<view class="">
				购买时间：{{formatTimestamp(item.add_time*1000)}}
			</view>
			<view class="status " v-if="ntime > item.valid_time*1000">
					已过期
			</view>
			<view class="status on" v-else>
				生效中
			</view>
			<!-- <view class="hj">
				合计:￥1000
			</view> -->
		</view>
		<uni-load-more :status="loadingType"></uni-load-more>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import empty from '@/components/empty';
	
	import { getBuyList } from '@/api/user.js'
	export default {
		components: {
			uniLoadMore,
			empty
		},
		data() {
			return {
				page: 1,
				limit: 10,
				loadingType: 'more',
				loaded: false,
				list: [],
				ntime: new Date().getTime()
			}
		},
		methods:{
			getBuyList() {
				if(this.loadingType == 'noMore' || this.loadingType == 'loading') {
					return
				}
				 this.loadingType = 'loading'
				getBuyList({
					page: this.page,
					limit: this.limit
				}).then(res => {
					this.list = this.list.concat(res.data.list)
					this.page++
					if(res.data.list.length == this.limit) {
						this.loadingType = 'more'
					}else {
						this.loadingType = 'noMore'
					}
					this.loaded = true
				})
			},
			formatTimestamp(timestamp) {
			  var date = new Date(timestamp);
			  var year = date.getFullYear();
			  var month = ("0" + (date.getMonth() + 1)).slice(-2);
			  var day = ("0" + date.getDate()).slice(-2);
			  var hours = ("0" + date.getHours()).slice(-2);
			  var minutes = ("0" + date.getMinutes()).slice(-2);
			  var seconds = ("0" + date.getSeconds()).slice(-2);
			
			  return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
			}
			
		},
		onLoad() {
			
		},
		onShow() {
			this.getBuyList()
		},
		onReachBottom() {
			this.getBuyList()
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding:1rpx;
	}
	.order {
		width: 700rpx;
		height: 252rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin:20rpx auto;
		padding: 37rpx 18rpx 0;
		// justify-content: ;
		position: relative;
		image {
			width: 178rpx;
			height: 107rpx;
			border-radius: 8rpx;
		}
		.base-info {
			justify-content: flex-start;
			padding-bottom: 20rpx;
			// align-items: ;
			.goods {
				
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: flex-start;
				padding-left: 15rpx;
				.goods-name {
					font-weight: bold;
					font-size: 28rpx;
					color: #363636;
					padding-bottom: 40rpx;
					width: 400rpx;
				}
				.goods-num {
					
				}
			}
			
		}
		font-size: 22rpx;
		color: #999999;
		.hj {
			font-weight: 500;
			font-size: 30rpx;
			color: #000000;
			position: absolute;
			right: 30rpx;
			bottom: 35rpx;
			text-align: right;
		}
		.status {
			font-weight: 500;
			font-size: 26rpx;
			color: #999999;
			position: absolute;
			right: 30rpx;
			top: 35rpx;
		}
		.on {
			color: #FF6F0F;
		}
		
	}
</style>