<template>
	<view class="main">
		<view class="sign_top_card">
			<view class="return_icon" @click="$backup()"><view class="eosfont">&#xe622;</view></view>
			<view class="title" @click="$jump('/pages/integralRecord/integralRecord',2)">我的积分<text class="eosfont">&#xe608;</text></view>
			<view class="integral">{{integral}}</view>
			<view class="sign_tab">
				<text class="title2">花积分：</text>
				<text class="tab" style="margin-left: 0;">兑好礼</text>
				<text class="tab">兑权益</text>
				<text class="tab">支付抵扣</text>
			</view>
		</view>
		<view class="content">
			<view class="sign_content">
				<view class="content_flex">
					<text>签到领积分</text>
					<text class="eosfont" @click="$jump(`/pages/signRecord/signRecord?sign_id=${sign_id}&sign_days_continues=${sign_days_continues}`,2)">我的签到记录&#xe744;</text>
				</view>
				<view class="days">
					<view class="day_item" v-for="(item, index) in sign_list" :key="index">
						<view v-if="item.sign_goods_logo" class="item_bg" style="background-color: transparent;">
							<image :src="item.sign_goods_logo"></image>
						</view>
						<view class="item_bg" v-else :class="{act: item.is_sign === '1'}">+{{item.point}}</view>
						<view class="day" v-if="item.date_diff !== '0'" :class="{seven: index === 6}">第{{index+1}}天</view>
						<view class="day actDay" v-else>今天</view>
					</view>
				</view>
				<view class="sign_btn" @click="signin" v-if="is_sign_today === '0'"></view>
				<view class="sign_btn_ed" v-else>今日已签到</view>
			</view>
			<view class="benefit_title">权益中心</view>
			<view class="benefit_swiper">
				<uni-swiper-dot :current="current" :info="grade_list" mode="round" :dotsStyles="{'bottom': 0,'width':3,'height':3,'backgroundColor':'#d8d8d8','border':'none','selectedBackgroundColor':'#FFCD00','selectedBorder':'none'}">
					<swiper :autoplay="true" style="height:380rpx" @change="changeCurrent">
						<swiper-item v-for="(item, index) in grade_list" :key="index" >
							<view class="swiper_item">
								<view class="benefit_item" v-for="(vo, key) in item" :key="key">{{vo.short_title}}</view>
							</view>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
			</view>
			<view class="tabBar">
				<text class="tab_item act">精品推荐</text>
				<!-- <text class="tab_item">200-400</text> -->
			</view>
			<view class="goods_box">
				<view class="goods_item" v-for="(item, index) in integral_list" :key="index" @click="$jump(`${php}app=my_integral_goods&act=detail&id=${item.goods_id}&integral=${integral}`)">
					<view>
						<image class="goods_img" :src="item.goods_logo || $noGoodsImg"></image>
						<view class="goods_name">{{item.goods_name}}</view>
						<view class="goods_price">{{item.goods_point}}积分</view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="center" :maskClick="true">
			<view class='sign_dialog'>
				<view class="dialog_title">连续签到<text>{{sign_days}}</text>天</view>
				<view class="dialog_tips">以7天为一个周期，中途断签则重新计算</view>
				<view class="dialog_content">
					<view class="day_item day_item2" v-for="(item, index) in sign_list" :key="index">
						<view class="item_bg item_bg2" v-if="item.sign_goods_logo">
							<image :src="item.sign_goods_logo"></image>
						</view>
						<view v-else class="item_bg item_bg2" :class="{act: item.is_sign === '1'}">+{{item.point}}</view>
						<view class="day" v-if="item.date_diff !== '0'">第{{index+1}}天</view>
						<view class="day actDay" v-else>今天</view>
					</view>
					<view class="dialog_btn" @click="signin">立即签到</view>
				</view>
				<text class="dialog_close" @click="close()">×</text>
			</view>
		</uni-popup>
		<uni-popup ref="gift" type="center" :maskClick="false">
			<view class="gift_dialog">
				<view class="gift_title">获得奖励</view>
				<view class="gift_days">成功连续签到<text>{{gift.continue_days}}</text>天</view>
				<view class="gift_content">
					<image  class="gift_img" :src="gift.sign_goods_logo"></image>
					<view class="gift_name">{{gift.sign_goods_name}}</view>
					<view class="get_gift" @click="getGift">立即领取</view>
				</view>
				<text class="dialog_close" @click="closeGift()">×</text>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniSwiperDot from "@/components/uni-swiper-dot/uni-swiper-dot.vue";
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import { php } from '@/common/host.js';
	export default {
		data() {
			return {
				current: 0,
				integral: 0,
				grade_list: [],
				integral_list: [],
				sign_list: [],
				is_sign_today: '0',
				sign_days_continues: '0',
				sign_days: '',
				sign_id: '',
				gift: {
					continue_days: 0,
					sign_goods_logo: '',
					sign_goods_name: ''
				},
				php: php
			}
		},
		onLoad() {
			this.getData();
		},
		methods: {
			changeCurrent(e) {
				this.current = e.detail.current;
			},
			getData() {
				uni.request({
					url: '/uni/api/sign/GetSignIndex',
					method: 'POST',
					dataType: 'json',
					data: {
						max_price: '',
						min_price: ''
					},
					success: (res) => {
						if(res.data.code === 0) {
							if(res.data.data.is_sign_today === '0') {
								this.$refs.popup.open();
							}
							this.integral = res.data.data.integral;
							this.integral_list = res.data.data.integral_list;
							this.sign_list = res.data.data.sign_list;
							this.is_sign_today = res.data.data.is_sign_today;
							this.sign_days_continues = res.data.data.sign_days_continues;
							this.sign_days = res.data.data.sign_days;
							this.sign_id = res.data.data.sign_id;
							let arr = []
							for(let i=0,j=res.data.data.grade_list.length;i<j;i+=8) {
								arr.push(res.data.data.grade_list.slice(i,i+8));
							}
							this.grade_list = arr;
						} else if (res.data.code === -1) {
							// 未登录状态
							this.$jump(`${php}app=member&act=login`)
						}
					}
				});
			},
			signin() {
				uni.request({
					url: '/uni/api/sign/Sign',
					method: 'post',
					data: {
						sign_id: this.sign_id
					},
					dataType: 'json',
					success: (res) => {
						if(res.data.code === 0) {
							uni.showToast({
								title: '签到成功',
								icon: 'none'
							});
							this.getData();
							this.is_sign_today = '1';
							this.$refs.popup.close();
							if(res.data.data !== null) {
								this.gift = res.data.data;
								this.$refs.gift.open();
							}
							
						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'none'
							});
						}
					}
				})
			},
			close() {
				this.$refs.popup.close();
			},
			closeGift() {
				this.$refs.gift.close();
			},
			getGift() {
				uni.request({
					url: '/uni/api/sign/SignGoodsLog',
					method: 'post',
					data: {
						sign_goods_logo: this.gift.sign_goods_logo,
						sign_goods_name: this.gift.sign_goods_name,
						sign_id: this.sign_id
					},
					dataType: 'json',
					success: (res) => {
						if(res.data.code === 0) {
							this.$refs.gift.close();
							uni.showToast({
								title: '礼物已领取',
								icon: 'none'
							})
						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'none'
							})
						}
					}
				})
			}
		},
		components: {
			uniSwiperDot,
			uniPopup
		}
	}
</script>

<style lang="less" scoped>
	.main {
		background-color: #FBFBFB;
		.sign_top_card {
			height: 484rpx;
			background: url('https://dbc-static.oss-cn-beijing.aliyuncs.com/static/3891593574352_.pic.jpg') no-repeat;
			background-size: 100% 100%;
			overflow: hidden;
			padding: 0 24rpx;
			.return_icon {
				view {
					width: 56rpx;
					height: 56rpx;
					border-radius: 50%;
					background-color: rgba(33,33,33,0.5);
					color: #fff;
					font-size: 32rpx;
					text-align: center;
					line-height: 56rpx;
					margin-top: 24rpx;
				}
			}
			.title {
				color: #21232C;
				font-size: 30rpx;
				line-height: 42rpx;
				margin-top: 24rpx;
				font-family:PingFangSC-Medium,PingFang SC;
				font-weight:500;
				display: flex;
				align-items: center;
				text {
					font-size: 12rpx;
				}
			}
			.integral {
				color: #21232C;
				font-size: 80rpx;
				font-family:Avenir-Heavy,Avenir;
				font-weight:800;
				line-height: 110rpx;
				margin-top: 8rpx;
			}
			.sign_tab {
				display: flex;
				align-items: center;
				margin-top: 24rpx;
				.title2 {
					font-size: 28rpx;
					color: #21232C;
					line-height: 40rpx;
					margin-right: 8rpx;
				}
				.tab {
					height: 48rpx;
					line-height: 48rpx;
					padding: 0 16rpx;
					border-radius: 24rpx;
					background-color: #FFE680;
					box-shadow:0px 4px 40px 0px rgba(0,0,0,0.04);
					color: #4E3F00;
					font-size: 26rpx;
					margin-left: 20rpx;
				}
			}
		}
		.content  {
			position: relative;
			top: -128rpx;
		}
		.sign_content {
			width: 702rpx;
			height: 396rpx;
			background: #fff;
			border-radius: 16rpx;
			margin: 0 auto;
			overflow: hidden;
			box-shadow:0px 4px 16px 0px rgba(0,0,0,0.04);
			padding: 0 26rpx;
			box-sizing: border-box;
			.content_flex {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 24rpx;
				text:nth-of-type(1) {
					color: #000;
					font-size: 40rpx;
					font-family:PingFangSC-Medium,PingFang SC;
					font-weight:500;
					line-height: 56rpx;
				}
				text:nth-of-type(2) {
					color: #21232C;
					font-size: 28rpx;
					line-height: 40rpx;
				}
			}
			.days {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 40rpx auto 30rpx;
			}
			.actDay {
				color: #FF6600 !important;
				font-family:PingFangSC-Medium,PingFang SC;
				font-weight:500;
			}
			.sign_btn {
				width: 536rpx;
				height: 100rpx;
				line-height: 76rpx;
				text-align: center;
				border-radius: 38rpx;
				background: url('https://dbc-static.oss-cn-beijing.aliyuncs.com/static/gifbtn.gif') no-repeat;
				background-size: 100% 100%;
				color: #21232C;
				font-size: 30rpx;
				margin: 0 auto;
			}
			.sign_btn_ed {
				width: 520rpx;
				height: 86rpx;
				line-height: 76rpx;
				text-align: center;
				border-radius: 38rpx;
				color: #FFD522;
				font-size: 30rpx;
				margin: 0 auto;
				border: 2px solid #FFD623;
				box-sizing: border-box;
			}
		}
		.day_item {
			.item_bg {
				background: url('https://dbc-static.oss-cn-beijing.aliyuncs.com/static/3881593574115_.pic.jpg') no-repeat;
				background-size: 100% 100%;
				width: 72rpx;
				height: 72rpx;
				border-radius: 50%;
				color: #BDBDBD;
				font-size: 26rpx;
				padding-top: 6rpx;
				text-align: center;
				font-family:PingFangSC-Medium,PingFang SC;
				font-weight:500;
				box-sizing: border-box;
				margin: 0 auto;
				overflow: hidden;
			}
			.item_bg image {
				width: 100%;
				height: 100%;
			}
			.item_bg2 {
				width: 96rpx;
				height: 96rpx;
			}
			.act {
				background: url('https://dbc-static.oss-cn-beijing.aliyuncs.com/static/3871593574111_.pic.jpg') no-repeat;
				background-size: 100% 100%;
				color: #9E7F00;
			}
			.day {
				margin-top: 12rpx;
				color: #979797;
				font-size: 24rpx;
				line-height: 34rpx;
				text-align: center;
			}
			.seven {
				width: 90rpx;
				height: 38rpx;
				line-height: 38rpx;
				border-radius: 19rpx;
				background:linear-gradient(135deg,rgba(255,236,73,1) 0%,rgba(255,211,30,1) 100%);
				box-shadow:0px 2px 8px 0px rgba(255,230,62,0.5);
				color: #000000;
			}
		}
		.day_item2 {
			margin-right: 36rpx;
		}
		.day_item2:nth-of-type(4), .day_item2:last-child {
			margin-right: 0;
		}
		.benefit_title {
			color: #21232C;
			font-size: 40rpx;
			line-height: 56rpx;
			height: 56rpx;
			text-align: center;
			font-family:PingFangSC-Medium,PingFang SC;
			font-weight:500;
			margin: 40rpx auto 32rpx;
		}
		.benefit_swiper {
			width: 702rpx;
			margin: 0 auto;
			.swiper_item {
				display: flex;
				// justify-content: space-between;
				flex-wrap: wrap;
				.benefit_item {
					width: 160rpx;
					height: 160rpx;
					border-radius: 16rpx;
					background-color: #FFF4C8;
					margin-bottom: 16rpx;
					font-size: 28rpx;
					color: #CBA009;
					line-height: 40rpx;
					font-family:PingFangSC-Medium,PingFang SC;
					font-weight:500;
					padding: 16rpx;
					box-sizing: border-box;
					margin-left: 20rpx;
				}
				.benefit_item:nth-of-type(4n-3) {
					margin-left: 0;
				}
				.benefit_item::-webkit-scrollbar {
					display: none;
				}
			}
		}
		.tabBar {
			overflow-y: scroll;
			width: 702rpx;
			margin: 40rpx auto 24rpx;
			white-space: nowrap;
			.tab_item {
				height: 52rpx;
				line-height: 52rpx;
				padding: 0 16rpx;
				border-radius: 26rpx;
				background-color: #F3F3F3;
				color: #333333;
				font-size: 28rpx;
				margin-right: 30rpx;
			}
			.tab_item:last-child {
				margin-right: 0;
			}
			.act {
				background-color: #FFCD00;
				font-size: 28rpx;
				color: #000;
			}
		}
		.tabBar::-webkit-scrollbar {
			display: none;
		}
		.goods_box {
			display: flex;
			flex-wrap: wrap;
			width: 702rpx;
			margin: 0 auto;
			.goods_item {
				width: 224rpx;
				height: 380rpx;
				border-radius: 16rpx;
				box-shadow:0px 4px 16px 0px rgba(0,0,0,0.04);
				background-color: #fff;
				margin-bottom: 16rpx;
				overflow: hidden;
				.goods_img {
					width: 100%;
					height: 224rpx;
				}
				.goods_name {
					padding: 0 16rpx;
					color: #21232C;
					font-size: 26rpx;
					line-height: 36rpx;
					font-family:PingFangSC-Medium,PingFang SC;
					font-weight:500;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.goods_price {
					color: #FF6600;
					font-size: 24rpx;
					line-height: 34rpx;
					font-family:PingFangSC-Medium,PingFang SC;
					font-weight:500;
					margin-top: 16rpx;
					padding: 0 16rpx;
				}
			}
			.goods_item:nth-of-type(3n-1) {
				margin: 0 14rpx;
			}
		}
		.sign_dialog{
			width: 586rpx;
			height: 860rpx;
			.dialog_title {
				color: #fff;
				font-size: 40rpx;
				line-height: 56rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				text {
					color: #FFE034;
					font-size: 80rpx;
					margin: 0 20rpx;
				}
			}
			.dialog_tips {
				text-align: center;
				font-size: 28rpx;
				height: 40rpx;
				line-height: 40rpx;
				color: #fff;
				opacity: 0.6;
				margin-top: 12rpx;
			}
			.dialog_content {
				width: 100%;
				height: 532rpx;
				border-radius: 40rpx;
				background-color: #fff;
				margin-top: 40rpx;
				display: flex;
				justify-content: center;
				flex-wrap: wrap;
				padding: 48rpx 0 0;
			}
			.dialog_btn {
				width: 480rpx;
				height: 76rpx;
				line-height: 76rpx;
				text-align: center;
				background:linear-gradient(135deg,rgba(255,236,73,1) 0%,rgba(255,211,30,1) 100%);
				border-radius: 38rpx;
				color: #21232C;
				font-size: 30rpx;
			}
		}
		.dialog_close {
			display: block;
			width: 64rpx;
			height: 64rpx;
			border-radius: 50%;
			border: 2px solid rgba(255,255,255,0.6);
			box-sizing: border-box;
			margin: 40rpx auto 0;
			font-size: 44rpx;
			text-align: center;
			line-height: 48rpx;
			color: #fff;
		}
		.gift_dialog {
			.gift_title {
				color: #FFE034;
				font-size: 80rpx;
				font-family:PingFangSC-Semibold,PingFang SC;
				font-weight:600;
				text-align: center;
				line-height: 112rpx;
			}
			.gift_days {
				font-size: 28rpx;
				color: rgba(255,255,255,0.6);
				text-align: center;
				margin-bottom: 30rpx;
			}
			.gift_content {
				width: 586rpx;
				height: 532rpx;
				border-radius: 24rpx;
				background-color: #fff;
				overflow: hidden;
				.gift_img {
					display: block;
					width: 224rpx;
					height: 224rpx;
					margin: 76rpx auto 24rpx;
				}
				.gift_name {
					text-align: center;
					font-size: 30rpx;
					line-height: 42rpx;
					font-family:PingFangSC-Medium,PingFang SC;
					font-weight:500;
					width: 80%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					margin-bottom: 42rpx;
				}
				.get_gift {
					width: 480rpx;
					height: 76rpx;
					line-height: 76rpx;
					text-align: center;
					border-radius: 38rpx;
					background:linear-gradient(135deg,rgba(255,236,73,1) 0%,rgba(255,211,30,1) 100%);
					color: #21232C;
					font-size: 30rpx;
					margin: 0 auto;
				}
			}
		}
	}
</style>
