<template>
	<view>
		<image src="../../static/beijing.png" class="background" mode=""></image>
		<view class="">
			<!-- 客户明细 -->
			<view class="customerDetails" style="font-size: 13px;">
				<view class="customerDetails-1" style="border-right: 1px solid #eeca90;">
					<text>用户ID</text>
				</view>
				<!-- <text class="name"></text> -->
				<view class="customerDetails-1" style="border-right: 1px solid #eeca90;">
					<text>数量</text>
				</view>
				<view class="customerDetails-1" style="border-right: 1px solid #eeca90;">
					<text>描述</text>
				</view>
				<view class="customerDetails-1">
					<text>时间</text>
				</view>
			</view>
			<!-- 详细资料 -->
			<view class="button">
				<view class="details" v-for="(item,index) in list">
					<view class="">
						{{item.getUser}}
					</view>
					<view class="">
						{{item.getNum}}
					</view>
					<view class="">
						{{item.remark}}
					</view>
					<view class="telephoneNumber">
						<view class="greaterThanSign">
							{{item.add_time}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" style="position: fixed;bottom: 10px;color:white;padding: 5px;">
			<text style="text-align: center;color:#eeca90;">累计：{{totalnum}}</text>
		</view>
	</view>
</template>

<script>
	import utils from '../../service/utils.js'
	export default {
		data() {
			return {
				model: {
					"KeyWord": "",
					"TotalCount": 0,
					"PageIndex": 1,
					"PageSize": 20,
					"Sort": [{
						"Field": "",
						"Type": 0
					}]
				},
				totalnum:0,
				list: []
			}
		},
		onLoad() {
			this.ShowRecord()
		},
		methods: {
			// 	// 查询领取记录
			ShowRecord() {
				this.totalnum=0
				let jsonstorage = uni.getStorageSync('userinfo').data
				this.model.KeyWord = jsonstorage.id
				this.API.GetRecordList(this.model).then(res => {
					console.log('数据', res)
					res.data.data.rows.forEach((item, index) => {
						this.totalnum+=item.getNum
						item.add_time = utils.formatTime(item.add_time, "yyyy-MM-dd HH:mm:ss")
					})
					this.list = res.data.data.rows
					if (this.list.length == 0) {
						uni.showToast({
							title: '暂无数据',
							icon: 'none'
						})
						return
					}
				})
			}
		}
	}
</script>

<style>
	/* 背景图片 */
	.background {
		width: 100%;
		height: 100%;
		position: fixed;
		/* border-radius:50% 50% 0 0 ; */
		background-size: 100% 100%;
		z-index: -1;
	}


	/* 客户明细 */


	.customerDetails {
		width: 100%;
		height: 76rpx;
		/* font-size: 25rpx; */
		background-color: #292929;
		display: flex;
		justify-content: space-around;
		align-items: center;
		color: #FFFFFF;
		/* background-color: #008000; */
	}

	.customerDetails-1 {
		/* background-color: #007AFF; */
		width: 50%;
		height: 40rpx;
		line-height: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		/* text-align: center; */
	}

	.customerDetails-1 text {
		font-size: 30rpx;
	}

	.name {
		/* border: #007AFF solid 2rpx; */
		height: 50rpx;
	}

	/* 详细资 */
	.button {
		width: 100%;
		height: 100%;
		margin: 22rpx auto;
	}

	.details {
		width: 680rpx;
		height: 70rpx;
		border-radius: 35rpx;
		font-size: 25rpx;
		background-color: #181818;
		color: #e4e4e4;
		line-height: 70rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin: 16rpx auto;
	}

	/* 电话号码 */
	.telephoneNumber {
		display: flex;
		justify-content: flex-end;
		/* background-color: #007AFF; */
	}

	/* 箭头 */
	.greaterThanSign::after {
		content: "";
		display: inline-block;
		width: 18rpx;
		height: 28rpx;
		/* background-color: #007AFF; */
		background: url(../../static/dayu.png);
		background-size: 100%;
		position: relative;
		left: 50rpx;
		top: 3rpx;
	}
</style>
