<template>
	<view class="gal-body">
		<view style="margin-top:50rpx;">
			<text class="gal-block-text gal-h4 gal-color-gray">点赞按钮演示</text>
		</view>
		<view class="gal-margin-top-large">
			<view class="praise-button">
				<gal-praise-button 
				ref="praiseButton" 
				@tapme="tapme" 
				:number="number"></gal-praise-button>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			// 点赞数量
			number : 99
		}
	},
	methods: {
		tapme : function(){
			// 判断是否已经赞过
			if(this.$refs.praiseButton.status != 1){
				if(this.$refs.praiseButton.status == 4){
					uni.showToast({
						title:"已经赞过了", icon:"none"
					});
				}
				return ;
			}
			// 图标动画 ( 代表与后端交互加载动画 )
			this.$refs.praiseButton.loading();
			// 与后端交互完成展示结果动画
			setTimeout(()=>{
				this.number = 100;
				this.$refs.praiseButton.stopLoading();
			}, 3000);
		}
	}
}
</script>
<style>
.praise-button{width:200rpx; margin-left:235rpx;}
</style>