<template>
	<view>
		<mescroll-body top="0" :up="upOption" :down="downOption" @init="mescrollInit" @down="downCallback"
			@up="upCallback"> 
			<view class="" style="font-size: 28rpx;"> 
				  <view class="card t-center" v-for="v in list" @click="nav('/active_bm/index/detail?id='+v.id)"> 
						<image mode="aspectFit" :src="v.image_http" style="width: 100%;"></image>
						<view>{{v.title}}</view>
				  </view>
			</view>
		</mescroll-body> 

		<cl-toast ref="toast"></cl-toast>
		<cl-message ref="message"></cl-message>
		<t-login-phone @logined="logined" :visible='show_login_phone'></t-login-phone>
	</view>
</template>

<script>
	var _this
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin 
		data() {
			return { 
				where: {
					page: 1,
					per_page: 10
				},
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					},
					textNoMore: '-- 到底了 --'
				},
				downOption: {
					auto: false, //是否在初始化后,自动执行downCallback; 默认true 
				},
				list: [],
				is_load: false,
				vip_card: {},
				row: {},
				visible: false,
			}
		},
		onLoad() {
			_this = this
		},
		onShow() { 
		},
		methods: {
			view_detail(v) {
				this.nav('/active_bm/index/detail?id='+v.id)
			}, 
			swiper_change() {
				let index = this.active_swiper
				this.yue = this.vip_card[index].amount
			},
			logined() {
				this.reload()
			},

			/*下拉刷新的回调 */
			downCallback() {
				this.where.page = 1
				this.load() 
				this.mescroll.resetUpScroll();
			},
			upCallback(page) {
				this.where.page = page.num
				this.load()
			},
			reload() {
				this.where.page = 1
				this.load() 
			},
			load() { 
				_this.ajax(_this.config.active_bm.index, _this.where).then(res => {
					_this.is_load = true
					if(res.code != 0){
						_this.mescroll.endBySize(0, 0);
						return;
					} 
					if (res.current_page == 1) {
						_this.list = []
					}
					for (let i in res.data) {
						_this.list.push(res.data[i])
					}
					_this.mescroll.endBySize(res.total_cur, res.total);
				})
			}
		}
	};
</script>

<style lang="scss">
	.fuwu {

		.space-between {
			margin-bottom: 10rpx;
		}
	}

	page {
		background-color: #F5F7FA;
	}

	.page-community {
		/deep/.cl-tabs__bar-item {
			color: #848484;
		}

		.tabBar {
			/deep/.cl-tabs__bar {
				background-color: rgba(0, 0, 0, 0) !important;

				.cl-tabs__bar-item.is-active {
					font-size: 34rpx;
				}

				.cl-tabs__line {
					height: 6rpx;
					border-radius: 4rpx;
				}
			}
		}

		.list {
			.item {
				/deep/.cl-button.cl-button--primary {
					background-color: #F5F7FA;
					width: 136rpx;
					height: 58rpx;

					.cl-button__text {
						color: #28B5B5;
					}
				}
			}
		}
	}
</style>