<template>
	<view class="points-store u-relative">
		<view class="bg-default bg u-text-center text-fff">
			<view class="u-p-t-42">
				<view class="sm">可用积分</view>
				<view class="fraction bold-600 u-m-t-14">0.00</view>
			</view>
		</view>
		
		<view class="u-absolute left-0 right-0 bg-white u-p-t-34 list">
			<view>
				<u-tabs :list="list" :is-scroll="true" :current="current" @change="change" inactive-color="#636363" :active-color="themeColor"></u-tabs>
			</view>
			<view class="u-m-l-24 u-m-r-24">
				<u-line color="#EEE" />
			</view>
			<view class="u-m-t-32 u-m-l-24 u-m-r-24">
				<view class="row-start u-col-top u-m-b-42" v-for="(itme, index) in 10">
					<view>
						<u-image :src="cloudPath + 'img/banner.png'" width="180" height="180" border-radius="20"></u-image>
					</view>
					
					<view class="u-m-l-18  w-full">
						<view>小熊早餐必备煮蛋器</view>
						<view class="u-m-t-4 text-7c">兑换66人</view>
						<view class="u-m-t-42 row-between">
							<view>
								<text class="primary">100.00</text>
								<text class="text-7c">积分+</text>
								<text class="primary">100.00</text>
								<text class="text-7c">元</text>
							</view>
							<view>
								<u-button @click="mpLogin" hover-class="none" :customStyle="{width: '145rpx', height: '61rpx', backgroundColor: themeColor, color: '#fff', border: 'none', borderRadius: '31rpx'}" :hair-line="false">兑换</u-button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					{
						name: '全部'
					}, 
					{
						name: '热门推荐'
					}
				],
				current: 0
			}
		},
		methods: {
			change(index) {
				this.current = index;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}
	
	.points-store {
		.bg {
			height: 420rpx
		}
		
		.fraction {
			font-size: 64rpx;
		}
		
		.list {
			top: 186rpx;
			border-top-left-radius: 24rpx;
			border-top-right-radius: 24rpx;
		}
		
		.text-46 {
			color: #464646;
		}
		
		.text-7c {
			color: #7C7C7C;
		}
	}
</style> 