<template>
	<!-- 储蓄 -->
	<view class="deposit">
		<!-- 头部 -->
		<view class="depositHeader">
			<view class="HeaderSize">
				<view class="leftSize">
					<p>LUCKY STONE</p>
					<span>当前幸运石</span>
				</view>
				<view class="rightRule" @click="navRule">
					<span>幸运石规则 ></span>
				</view>
			</view>
			<view class="property">
				<!-- 幸运石 -->
				<view class="leftStone">
					<image :src="require('@/static/Bitmap.png')" mode=""></image>
					{{integration||0}}
				</view>
				<!-- 兑换 -->
				<view class="rightConversion">
					去兑换
				</view>
			</view>
		</view>

		<!-- 选项卡 -->
		<u-tabs-swiper height="100" gutter="40" bar-width="70" bar-height="8" inactive-color="gray" font-size="35"
			active-color="black" @change="tabsChange" :current="swiperCurrent" ref="tabs" :list="list"
			:is-scroll="false"></u-tabs-swiper>

		<!-- 收入和支出 -->

		<view class="incOrexp">
			<!-- 收入 -->
			<view class="income" v-if="false">
				<!-- 每一项信息 -->
				<view class="incomeList">
					<!-- 详细 -->
					<view class="detailed">
						<view class="leftSize">
							<p>幸运石商品回收</p>
							<span>2022/07/28 15:19:23</span>
						</view>
						<view class="rightStone">
							+39550
							<image :src="require('@/static/Bitmap.png')" mode=""></image>
						</view>
					</view>
				</view>
				<view class="incomeList">
					<!-- 详细 -->
					<view class="detailed">
						<view class="leftSize">
							<p>幸运石商品回收</p>
							<span>2022/07/28 15:19:23</span>
						</view>
						<view class="rightStone">
							+39550
							<image :src="require('@/static/Bitmap.png')" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			<!-- 支出 -->
			<view class="expenditure"  v-if="false">
				<view class="expenditureList">
					<!-- 详细 -->
					<view class="detailed">
						<view class="leftSize">
							<p>幸运石兑换商品</p>
							<span>2022/07/28 15:19:23</span>
						</view>
						<view class="rightStone">
							-39550
							<image :src="require('@/static/Bitmap.png')" mode=""></image>
						</view>
					</view>
				</view>

			</view>

		</view>
		
		<!-- 弹窗 -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 选项卡
				list: [{
					name: '全部'
				}, {
					name: '收入'
				}, {
					name: '消耗'
				}],
				// 选项卡下标
				swiperCurrent: 0,
			};
		},
		methods: {
			//跳转规则页
			navRule() {
				this.$Router.push("/pages/my/navRule/navRule")
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
		},
		computed:{
			// 幸运石
			integration(){
				return uni.getStorageSync("integration")
				
			}
		},
		onReady(){
			if(uni.getStorageSync("isToken")){
				
			}else{
				this.$refs.uToast.show({
					title: '未登录',
					type: 'error'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 储蓄
	.deposit {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #F7F7F7;

		// 储蓄头
		.depositHeader {
			width: 750rpx;
			height: 420rpx;
			background: linear-gradient(90deg, #3780E9 0%, #0044A7 100%);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.HeaderSize {
				width: 680rpx;
				height: 160rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: white;
				font-size: 15px;

				.leftSize {
					color: white;

					p {
						font-size: 23px;
						font-weight: 600;
					}

					span {
						font-size: 17px;
					}
				}
			}

			.property {
				width: 680rpx;
				height: 160rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				// 幸运石
				.leftStone {
					display: flex;
					align-items: center;
					color: white;
					font-size: 24px;

					image {
						width: 28rpx;
						height: 60rpx;
						margin-right: 20rpx;
					}
				}

				// 兑换
				.rightConversion {
					width: 210rpx;
					height: 92rpx;
					border-radius: 5px;
					color: white;
					text-align: center;
					line-height: 92rpx;
					font-size: 17px;
					background: linear-gradient(360deg, #000000 0%, #343335 100%);
				}
			}
		}

		// 收入和支出
		.incOrexp {
			width: 750rpx;
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			padding-bottom: 30rpx;

			// 收入
			.income {
				width: 750rpx;
				display: flex;
				align-items: center;
				background-color: #F7F7F7;
				flex-direction: column;

				// 每一项信息
				.incomeList {
					width: 750rpx;
					height: 190rpx;
					background-color: white;
					margin-top: 30rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					// 详细
					.detailed {
						width: 680rpx;
						height: 130rpx;
						// background-color: red;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.leftSize {
							p {
								font-size: 16px;
								margin-bottom: 10rpx;
							}

							span {
								font-size: 13px;
								color: darkgray;
							}
						}

						.rightStone {
							display: flex;
							align-items: center;
							font-size: 18px;
							color: #0978CF;

							image {
								width: 28rpx;
								height: 67rpx;
								margin-left: 15rpx;
							}
						}
					}
				}
			}

			//支出
			.expenditure {
				width: 750rpx;
				display: flex;
				align-items: center;
				background-color: #F7F7F7;
				flex-direction: column;

				// 每一项
				.expenditureList {
					width: 750rpx;
					height: 190rpx;
					background-color: white;
					margin-top: 30rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					// 详细
					.detailed {
						width: 680rpx;
						height: 130rpx;
						// background-color: red;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.leftSize {
							p {
								font-size: 16px;
								margin-bottom: 10rpx;
							}

							span {
								font-size: 13px;
								color: darkgray;
							}
						}

						.rightStone {
							display: flex;
							align-items: center;
							font-size: 18px;
							color: red;

							image {
								width: 28rpx;
								height: 67rpx;
								margin-left: 15rpx;
							}
						}
					}
				}
			}
		}

	}
</style>