<template>
	<view class="user">
		<view class="list" v-for="(item,index) in list" :key='index'>
			<view class="list-item">
				<view class="list-top">
					<view class="left">
						时长：{{item.time}}分钟
					</view>
					<view class="right">
						{{item.category_text}}
					</view>
				</view>
				<view class="time">
					{{item.created_at}}
				</view>
			</view>
		</view>
		<view class="null" v-if="list.length==0">
			<image src="../../static/image/null.png" mode=""></image>
			<view class="null-text">
				暂无记录！
			</view>
		</view>
	</view>
</template>

<script>
	var app = getApp()
	export default {
		data() {
			return {
				list: []
			}
		},
		onLoad(options) {
			uni.showLoading()
			app.request('/shop/me-card-use-log?shop_id=' + options.shop_id, '', 'get').then(res => {
				uni.hideLoading()
				if (res.statusCode == 200) {
					console.log(res, 'list')
					this.list = res.data.data.data
				}
			})
		}
	}
</script>

<style lang="scss">
	.list {
		margin: 0 30rpx;
		.list-item {
			margin-top: 30rpx;
			background-color: #FFFFFF;
			padding: 30rpx;
			border-radius: 12rpx;
			.list-top {
				display: flex;
				font-size: 30rpx;
				.left {
					flex: 1;
				}
				.right {
					flex: 0 0 200rpx;
				}
			}
			.time {
				font-size: 28rpx;
				margin-top: 10rpx;
				color: #757575;
			}
		}
	}
	.null {
		margin: 0 auto;
		width: 350upx;
	
		// padding-top: 30%;
		image {
			width: 350upx;
			height: 300upx;
			margin-top: 55%;
		}
	
		.null-text {
			text-align: center;
			font-size: 37upx;
			font-weight: 400;
			color: #515151;
			margin-top: 85upx;
			padding-left: 35upx;
		}
	}
</style>
