<template>
	<view id="wrapper">
		<view class="nav-wrap" :class="{ 'is-fixed': isFixed }"
			:style="{ paddingTop: `${menuInfo.top}px`, paddingBottom: `${paddingBtmSize}px` }">
			<view class="content" :style="{ height: `${menuInfo.height}px`, paddingLeft: `${paddingBtmSize}px` }">
				<view class="left-btn">
					<view class="btn" :style="{ width: `${menuInfo.height}px`, height: `${menuInfo.height}px` }"
						@click="navClickHandle(1)">
						<u-icon name="arrow-left" :color="isFixed ? '#333' : '#fff'" size="38"></u-icon>
					</view>
					<view class="left-btntitle"
						:style="{ height: `${menuInfo.height}px`,lineHeight:`${menuInfo.height}px`}">
						积分商城
					</view>
				</view>

			</view>
		</view>
		<view class="shop-cover">
			<image class="img" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/shopindexnav.png" mode="widthFix">
			</image>
			<view class="shop-coverone" :style="{ paddingTop: `${menuInfo.top + menuInfo.height + 25}px`}">
				<view class="shop-coveronebox flex-center">
					<view style="margin-right: 10rpx;">
						当前积分
					</view>
					<u-icon name="error-circle" color="#fff" size="32"></u-icon>
				</view>
				<view class="shop-coveroneboxnuber">
					5830
				</view>
			</view>
		</view>
		<view class="shop_content">
			<view class="shop_contenttitle">积分明细</view>
			<!-- <view class="shop_contenbox flex-start">
				<view class="shop_contenboxitem" :class="index == 0?'shop_contenboxitems':''"
					v-for="(item,index) in shopcontenboxlsit" :key="index">
					{{item.name}}
				</view>
			</view> -->
			<view class="shop_contenlist">
				<view class="shop_contenlistabsolute">
					<view class="flex-start">
						<text class="flex-starttext">收入</text>
						/
						<text>支出</text>
					</view>
				</view>
				<view class="shop_contenlistitem flex-between" v-for="(item,index) in 6" :key="index">
					<view class="shop_contenlistitemone flex-colum-start">
						<view>交易积分-线下收款</view>
						<view>2023-01-11 17:33:09</view>
					</view>
					<view class="shop_contenlistitemtow">+0.02</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import _ from 'lodash';
	import navbar from '@/uni_modules/uview-ui/libs/config/props/navbar';
	import webSocketUtils from '@/common/js/websocket.js'
	export default {
		data() {
			return {
				menuInfo: uni.getMenuButtonBoundingClientRect(),
				paddingBtmSize: 6,
				isFixed: false,
				active: 0,
				titleTopNums: [],
				shopcontenboxlsit: [{
						name: '全部'

					},
					{
						name: '交易积分'

					}, {
						name: '活动积分'

					}, {
						name: '任务积分'

					}
				]
			};
		},
		onPageScroll(e) {
			if (e.scrollTop >= (this.menuInfo.top + this.menuInfo.height + this.paddingBtmSize) / 2) {
				this.isFixed = true;
				uni.setNavigationBarColor({
					frontColor: '#000000',
					backgroundColor: '#ffffff'
				});
			} else {
				this.isFixed = false;
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: '#000000'
				});
			}
			this.countScrollTitle(e.scrollTop);
		},
		onLoad(e) {
			// #ifdef APP-PLUS || H5
			uni.getSystemInfo({
				success: (res) => {
					console.log(res)
					this.menuInfo = res
				}
			})
			// #endif
			// #ifdef MP-WEIXIN
			this.menuInfo = uni.getMenuButtonBoundingClientRect()
			// #endif
		},
		onUnload() {

		},
		methods: {
			// 导航栏点击
			navClickHandle(t) {
				switch (t) {
					case 1:
						// 返回
						uni.switchTab({
							url: '/pages/index/index'
						})
						break;
					default:
						break;
				}
			},
			countScrollTitle: _.throttle(function(top) {
				if (this.titleTopNums.length > 1) {
					for (let i = 0; i <= this.titleTopNums.length - 1; i++) {
						if (top >= this.titleTopNums[i] && top < this.titleTopNums[i + 1]) {
							this.titleTopNumIndex = i;
						}
					}
					if (top >= this.titleTopNums[this.titleTopNums.length - 1]) {
						this.titleTopNumIndex = this.titleTopNums.length - 1;
					}
				}
			}, 100),
		}
	};
</script>

<style scoped lang="scss">
	$bg: #fafafa;
	$tabLeft: 200upx;
	$itemH: 100upx;
	$cartH: 90upx;

	.nav-wrap {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 97;

		&.is-fixed {
			background-color: #fff;
		}

		.content {
			position: relative;

			.left-btn {
				display: flex;

				.btn {
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: $paddingSize;
				}
			}

			.left-btntitle {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;

				text-align: center;
				font-family: SourceHanSansCN-Bold, SourceHanSansCN-Bold;
				font-weight: normal;
				font-size: 36rpx;
				color: #FFFFFF;
			}
		}
	}

	.shop-cover {
		position: relative;
		z-index: 1;
		// &::after {
		// 	content: '';
		// 	width: 100%;
		// 	height: 100%;
		// 	position: absolute;
		// 	top: 0;
		// 	left: 0;
		// 	z-index: 2;
		// 	background-color: rgba(0, 0, 0, 0.3);
		// }

		.img {
			width: 100%;
			height: 100%;
			position: relative;
			z-index: 1;
		}

		.shop-coverone {
			position: absolute;
			top: 0;
			left: 0;
			padding: 0rpx 32rpx;
			z-index: 2;

			.shop-coveronebox {
				padding: 6rpx 10rpx;
				background: rgba(255, 255, 255, 0.2);
				border-radius: 58rpx 58rpx 58rpx 58rpx;
				font-family: PingFangSC-Semibold, PingFangSC-Semibold;
				font-weight: normal;
				font-size: 28rpx;
				color: #FFFFFF;
			}

			.shop-coveroneboxnuber {
				margin-top: 32rpx;
				font-family: Roboto, Roboto;
				font-weight: 400;
				font-size: 74rpx;
				color: #FFFFFF;

			}
		}
	}

	.shop_content {
		background: #FFFFFF;
		border-radius: 26rpx 26rpx 0rpx 0rpx;
		position: relative;
		z-index: 5;
		top: -92rpx;

		.shop_contenttitle {
			padding: 16rpx 0;
			width: 100%;
			text-align: center;
			font-family: SourceHanSansCN-Medium, SourceHanSansCN-Medium;
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
		}

		.shop_contenbox {
			padding: 0 60rpx;

			.shop_contenboxitem:nth-child(1) {
				margin-left: 0;
			}

			.shop_contenboxitem {
				margin-left: 24rpx;
				padding: 6rpx 10rpx;
				background: #F9F9F9;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
				font-weight: normal;
				font-size: 28rpx;
				color: #666666;
			}

			.shop_contenboxitems {
				background: #F1CB66;
				color: #FFFFFF;
			}
		}

		.shop_contenlist {
			position: relative;
			margin-top: 32rpx;
			background: #fff;

			.shop_contenlistabsolute {
				position: absolute;
				top: -32rpx;
				right: 32rpx;

				.flex-start {
					font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
					font-weight: normal;
					font-size: 24rpx;
					color: #999999;

					.flex-starttext {
						color: #FF981E;
					}
				}
			}

			.shop_contenlistitem {
				padding: 32rpx 44rpx;
				border-bottom: 2rpx solid #E5E5E5;

				.shop_contenlistitemone {
					view:nth-child(1) {
						font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
						font-weight: normal;
						font-size: 28rpx;
						color: #666666;
					}

					view:nth-child(2) {
						margin-top: 16rpx;
						font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
						font-weight: normal;
						font-size: 28rpx;
						color: #999999;
					}
				}

				.shop_contenlistitemtow {
					font-family: SourceHanSansCN-Medium, SourceHanSansCN-Medium;
					font-weight: normal;
					font-size: 32rpx;
					color: #FF981E;
				}
			}
		}
	}
</style>