<template>
	<view>
		<view class="nav_area"></view>
		<view class="setPage">
			<uni-list class="center-list">
				<uni-list-item v-for="(item,i) in bonusList" :title="item.title" link :rightText="item.rightText" :key="i"
					:clickable="true" :to="'/pages/about/bonusSet/bonusList?title='+item.title+'&id='+item.id" @click="bonusListClick(item)" :show-extra-icon="true"
					:extraIcon="{type:'compose',color:'#999'}">
					<template v-slot:footer>
						<view class="icon_new">
							<image :src="'../../../static/user/icon_coin.png'" mode=""></image>
						</view>
						<view v-if="item.showBadge" class="item-footer">
							<text class="item-footer-text">{{item.rightText}}</text>
							<view class="item-footer-badge"></view>
						</view>
					</template>
				</uni-list-item>
			</uni-list>
		</view>
	</view>
</template>

<script>
	import API from '@/common/js/api.js'
	export default {
		data() {
			return {
				bonusList: [
						{
							"title": '3元专区'
						},
						{
							"title": '5元专区'
						},
						{
							"title": '10元专区'
						}
					],
				noMore: false,
				page: 1,
			}
		},
		methods: {
			bonusListClick(item) {
				if (!item.to && item.event) {
					this[item.event]();
				}
			},
			getList(){
				API.request('/zone/zoneList', {}, res=>{
					if(res.data.length<10){
						this.noMore = true;
					}
					if(this.page>1){
						this.bonusList = this.bonusList.concat(res.data);
					}else{
						this.bonusList = res.data;
					}
				}, fail=>{})
			}
		},
		onLoad(e) {
			this.getList();
		},
		onReachBottom() {
			if(!this.noMore){
				this.page++;
				this.getList();
			}else{
				uni.showToast({
					title: '没有更多了'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nav_area {
		position: fixed;
		top: 0px;
		left: 0px;
		z-index: 99;
		background-color: #fff;
		box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
		width: 700rpx;
		height: 88rpx;
		padding: 0px 25rpx;
		padding-top: var(--status-bar-height);
		box-sizing: content-box;
		color: #b0b0b0;
		font-size: 14px;
	}
	.setPage{
		padding: 10px 0px;
	}
	.icon_new{
		position: absolute;
		left: 40rpx;
		top: 30rpx;
		width: 48rpx;
		height: 48rpx;
		background-color: #fff;
		image{
			width: 48rpx;
			height: 48rpx;
		}
	}
	.center-list /deep/ .uni-list-item__container{
		padding: 16px 50rpx;
	}
	.center-list /deep/ .uni-icon-wrapper{
		padding: 0px 40rpx 0px 10px;
		font-size: 12px !important;
	}
	.center-list /deep/ .uni-list--border:after{
		content: none;
	}
	.center-list ::v-deep .uni-list--border-top,
	.center-list ::v-deep .uni-list--border-bottom {
		display: none;
	}
	
</style>
