<template>
	<!-- 我的余额模块 -->
	<view :style="colorStyle">
		<view class='my-account'>
			<view class="accountTitle">
				<view :style="{height:getHeight.barTop+'px'}"></view>
				<view class="sysTitle  colorfff" :style="{height:getHeight.barHeight+'px'}" @click="goarrow">
					<text class="iconfont icon-ic_leftarrow"></text>
					<view>取酒记录</view>
				</view>
			</view>
			<view :style="{height:(getHeight.barTop+getHeight.barHeight)+'px'}"></view>



			<view class="page flex-col">
				<view class="group_1 flex-col">

					<view class="block_1 flex-col">

						<view class="list_1 flex-col">
							<view class="list-items_1 flex-col" v-for="(item, index) in list" :key="index"
								v-if="list.length>0">

								<view class="text-wrapper_1 flex-row justify-between">
									<text class="text_2">{{item.product_name}}</text>
									<text class="text_3" style="text-align: right;">台号：{{item.table_number}}</text>
								</view>

								<view class="text-wrapper_2 flex-row justify-between">
									<text class="text_4">到期时间:{{item.out_time}}</text>
									<text class="text_5">x{{item.num}}</text>
								</view>

								<view class="text-wrapper_3 flex-row">
									<text class="text_6">存酒时间:{{item.c_time}}</text>
								</view>
							</view>


							<view v-if="list.length==0">
								<view style="color: white;text-align: center;font-size: 20px;">暂无记录</view>
							</view>

						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getqujiu
	} from '@/api/api.js'
	import {
		HTTP_REQUEST_URL
	} from '@/config/app';
	export default {

		data() {
			return {
				imgHost: HTTP_REQUEST_URL,
				getHeight: this.$util.getWXStatusHeight(),
				list: [],
				constants: {}
			};
		},
		onLoad() {
			this.getData()
		},
		methods: {
			goarrow() {
				uni.navigateBack()
			},
			getData() {
				console.log(4555)
				getqujiu().then(res => {
					this.list = res.data

				}).catch(err => {

				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import '../common/common.css';
	@import './assets/style/index.rpx.css';

	.popupbox1 {
		width: 600rpx;
		height: 500rpx;
		background: #1C1A1F;
		box-shadow: 0rpx 5rpx 16rpx 0rpx rgba(6, 3, 14, 0.39);
		border-radius: 20rpx;
		padding: 20rpx;
		text-align: center;

		.popupboximg {
			width: 171rpx;
			height: 189rpx;
			margin: 0 auto;
		}

		.neir {
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			font-size: 36rpx;
			color: #FFFFFF;
			line-height: 56rpx;
			text-align: center;
		}

		.huiyuanbtn {
			width: 400rpx;
			height: 80rpx;
			background: #F8BF1F;
			border-radius: 40rpx;
			margin: 50rpx auto;
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			font-size: 30rpx;
			text-align: center;
			color: #080313;
			line-height: 80rpx;
		}
	}

	/deep/.recommend {
		padding: 40rpx 20rpx 0 20rpx;
	}

	.my-account {
		.accountTitle {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			z-index: 99;

			.sysTitle {
				width: 100%;
				position: relative;
				font-weight: 500;
				color: #FFFFFF;
				font-size: 30rpx;
				display: flex;
				margin-top: 20rpx;

				.iconfont {
					// position: absolute;
					margin-left: 12rpx;
					font-size: 36rpx;
					// left:11rpx;
					// width: 60rpx;
				}
			}
		}

		.advert {
			width: 710rpx;
			height: 332rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			margin: 20rpx auto 0 auto;
			padding: 0 32rpx;

			.title {
				font-size: 32rpx;
				font-weight: 500;
				color: #333333;
				height: 108rpx;
				line-height: 108rpx;
				border-bottom: 1px solid #eee;
			}

			.list {
				margin-top: 34rpx;

				.line {
					height: 126rpx;
					width: 1rpx;
					background-color: #EEEEEE;
				}

				.item {
					text-align: center;
					font-weight: 400;
					color: #999999;
					font-size: 22rpx;

					.pictrue {
						width: 66rpx;
						height: 66rpx;
						margin: 0 auto;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.name {
						font-weight: 500;
						color: #333333;
						font-size: 28rpx;
						margin: 20rpx 0 8rpx 0;
					}
				}
			}
		}
	}

	.my-account .wrapper {
		padding-top: 32rpx;
		// background: linear-gradient(180deg, var(--view-minorColorT) 0%, #f5f5f5 100%);
	}

	.my-account .wrapper .header {
		width: 710rpx;
		height: 362rpx;
		background: linear-gradient(to right, #EAA931, #FEE38F);
		border-radius: 32rpx;
		margin: 0 auto;
		box-sizing: border-box;
		color: rgba(255, 255, 255, 0.8);
		font-size: 24rpx;
		position: relative;
	}

	.my-account .wrapper .header .headerCon {
		padding-top: 36rpx;
	}

	.my-account .wrapper .header .headerCon .pictrue {
		height: 284rpx;
		width: 290rpx;
		position: absolute;
		right: 0;
		bottom: 0;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.my-account .wrapper .header .headerCon .account {
		padding: 0 32rpx;
	}

	.my-account .wrapper .header .headerCon .account .assets .money {
		font-size: 64rpx;
		color: #080313;
		font-family: 'SemiBold';
		margin-top: 12rpx;
	}

	.my-account .wrapper .header .headerCon .account .recharge {
		font-size: 24rpx;
		width: 112rpx;
		height: 56rpx;
		border-radius: 50rpx;
		background-color: #080313;
		text-align: center;
		line-height: 56rpx;
		color: #F2C158;
		font-weight: 500;
	}

	.my-account .wrapper .header .headerCon .cumulative {
		width: 100%;
		height: 142rpx;
		margin-top: 62rpx;
		padding-left: 32rpx;
		position: absolute;
		left: 0;
		bottom: 0;
	}

	.my-account .wrapper .header .headerCon .cumulative .item {
		// flex: 1;
		width: 225rpx;
		position: static;
		z-index: 9;
		color: #080313;
	}

	.my-account .wrapper .header .headerCon .cumulative .item .money {
		font-size: 40rpx;
		font-family: 'SemiBold';
		color: #080313;
		margin-top: 12rpx;
	}

	.my-account .wrapper .nav {
		margin: 20rpx;
		margin-top: 40rpx;
	}

	.my-account .wrapper .nav .item {
		font-size: 24rpx;
		color: #999;
		width: 348rpx;
		height: 152rpx;
		background: #1B1A1D;
		border-radius: 24rpx;
		// border: 4rpx solid #fff;
		padding: 0 31rpx;
		box-sizing: border-box;

		.name {
			font-size: 28rpx;
			color: #C6C4CA;
			font-weight: 500;
			margin-bottom: 8rpx;
		}
	}

	.my-account .wrapper .nav .item .pictrue {
		width: 96rpx;
		height: 96rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.my-account .wrapper .list {
		padding: 0 30rpx;
	}

	.my-account .wrapper .list .item {
		margin-top: 44rpx;
	}

	.my-account .wrapper .list .item .picTxt .iconfont {
		width: 82rpx;
		height: 82rpx;
		border-radius: 50%;
		background-image: linear-gradient(to right, #ff9389 0%, #f9776b 100%);
		text-align: center;
		line-height: 82rpx;
		color: #fff;
		font-size: 40rpx;
	}

	.my-account .wrapper .list .item .picTxt .iconfont.yellow {
		background-image: linear-gradient(to right, #ffccaa 0%, #fea060 100%);
	}

	.my-account .wrapper .list .item .picTxt .iconfont.green {
		background-image: linear-gradient(to right, #a1d67c 0%, #9dd074 100%);
	}

	.my-account .wrapper .list .item .picTxt {
		width: 428rpx;
		font-size: 30rpx;
		color: #282828;
	}

	.my-account .wrapper .list .item .picTxt .text {
		width: 317rpx;
	}

	.my-account .wrapper .list .item .picTxt .text .infor {
		font-size: 24rpx;
		color: #999;
		margin-top: 5rpx;
	}

	.my-account .wrapper .list .item .bnt {
		font-size: 26rpx;
		color: #282828;
		width: 156rpx;
		height: 52rpx;
		border: 1px solid #ddd;
		border-radius: 26rpx;
		text-align: center;
	}

	.my-account .wrapper .list .item .bnt.end {
		font-size: 26rpx;
		color: #aaa;
		background-color: #f2f2f2;
		border-color: #f2f2f2;
	}
</style>