<template>
	<view class="youHuiContents">
		<!-- 没有优惠卷的页面 -->
		<view class="no-Youhui" v-if="youHuiCenter.length == 0 && ImgIsShow">
			<view class="no-youhuiBox">
				<view class="no-youhuiImg">
					<image src="/static/myImage/ic_money.png" mode="widthFix"></image>
				</view>
				<view class="no-youhui-text">
					商家暂无优惠券
				</view>
			</view>
		</view>
		<!-- 没有优惠卷的页面end -->
		<!-- 有优惠卷的页面 -->
		<view class="have-yohui" v-else>
			<!-- 优惠卷内容star -->
			<view class="have-yohui-item" v-for="(item,index) in youHuiCenter">
				<view class="have-yohui-item-Bgimg relative">
					<image style="width: 100%;" src="../../../static/myImage/youhuiBg.png" mode="widthFix"></image>
					<view class="have-yohui-item-content absolute">
						<view class="yohui-item-content-left">
							¥{{item.price}}
						</view>
						<view class="yohui-item-content-right">
							<view class="yohui-item-content-right-left">
								<view class="yohui-item-content-right-left-Title" v-if="item.bottom_price != 0">
									满{{item.bottom_price}}可用
								</view>
								<view class="yohui-item-content-right-left-Title" v-else>
									无门槛使用
								</view>
								<view class="yohui-item-content-right-left-Text" v-if="item.category == 1">
									自领取之日{{item.rr}}天内有效
								</view>
								<view class="yohui-item-content-right-left-Text" v-else>
									无期限使用
								</view>
							</view>
							<view class="yohui-item-content-right-right">
								<view class="yohui-item-content-right-right-title">
									{{item.name}}
								</view>
								<view class="yohui-item-content-right-right-btn"
									@click="handle_guanzhuBtn(item.is_receive,item.id,item.category)" v-if="item.category == 1">
									领取
								</view>
								<view class="yohui-item-content-right-right-btn"
									@click="handle_guanzhuBtn(item.is_receive,item.id,item.category)" v-else>
									{{item.category == 2 ? '入会' : '去关注'}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 优惠卷内容end -->
			<!-- 立即入会模拟 -->
			<u-popup v-model="show" mode="center" border-radius="24" width="560rpx" height="340rpx">
				<view class="popup">
					<view class="popupTitle">联系客服立即入会</view>
					<view class="popupText">
						客服微信：
						<text class="textlv">{{info}}</text>
					</view>
					<view class="popupbutton flex justifyA">
						<view class="closeBox" @click="close">取消</view>
						<view class="openBox" @click="open(info)">一键复制</view>
					</view>
				</view>
			</u-popup>
			<!-- 立即入会模拟 -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				star_time: '',
				youHuiState: '',
				youHuiCenter: [], //后台数据最终版
				guanzhu: 0,
				is_xinrenBtn: true, //是不是新人
				no_xinren: true, //不是新人
				show: false, //入会模拟
				info: '', //消息内容
				isYouHuiJuan: false, //是否有优惠卷
				ImgIsShow:false, // 图片显示异常
			}
		},
		onShow() {
			// this.isBorth();//是不是新人
			this.getWechat();
			this.youhuiCenterData();
				
		},
		onLoad() {},
		methods: {
			//获取客服微信
			getWechat() {
				this.$rqs('/api/index/wechat').then(res => {
					this.info = res.data.data;
				});
			},
			youhuiCenterData() {
				let that = this;
				that.$rqs('/api/coupon/index').then(res => {
					let r = res.data.data
					for(let key in r){
						r[key].price = parseInt(r[key].price)
						r[key].bottom_price = parseInt(r[key].bottom_price)
						let s = r[key].start_time;
						let e = r[key].end_time;
						r[key].rr = (e - s) / 60 / 60 / 24;
					}
					that.youHuiCenter = r
					this.ImgIsShow = true;
				})
			},
			close() {
				this.show = false;
			},
			open(info) {
				let that = this
				uni.setClipboardData({
					data: info,
					success() {
						that.show = false
						uni.showToast({
							//提示
							title: '复制成功',
							duration: 1300
						});
					}
				});
			},
			//优惠卷按钮的跳转事件
			handle_guanzhuBtn(e,id,name) {
				//e :是1否0领取， name： 
					// name = 1 领取 name = 2 入会 name = 3 去关注
					if (name == 2 && !uni.getStorageSync('is_members')) {
						let that = this;
						console.log("点击了入会");
						that.show = !that.show;
					}else if(name == 2 && e == 1){
						uni.showToast({
							title: "已经入会，请在我的优惠卷中查看",
							icon: 'none'
						})
					}
					if (name == 3) {
						//未关注情况
						if (!uni.getStorageSync('is_focus')) {
							uni.navigateTo({
								url:'/pages/home/coupon/coupon'
							})
						} else {
							console.log(0);
							uni.showToast({
								title: "已经关注，请在我的优惠卷中查看",
								icon: 'none'
							})
						}
					}
					if (name == 1 && !e) {
						let that = this;
						let data = {
							id: id
						}
						that.$rqs('/api/coupon/receive', data).then(res => {
							if(res.data.code == 1){
							console.log(res);
								uni.showToast({
									position: 'center',
									title: "领取成功",
									icon: "none"
								})
							}else{
								if(res.data.code == 0){
									uni.showToast({
										title:res.data.msg,
										icon:"error"
									})
								}
							}
						})
					}else if(name == 1 && e == 1){
						uni.showToast({
							title:'领取成功，请在我的优惠券中心查看',
							icon:'none'
						})
						
					}
					
			}
		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
		background-color: #EEEEEE;
	}

	.youHuiContents {
		width: 100%;
		height: 100%;
	}

	.no-Youhui {
		height: 100%;
		background-color: #FFFFFF;
		box-sizing: border-box;
		padding-top: 348rpx;
	}

	.no-youhuiBox {
		width: 320rpx;
		height: 388rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin: 0 auto;
	}

	.no-youhuiImg {
		width: 320rpx;
		height: 320rpx;
	}

	.no-youhui-text {
		color: rgba(50, 50, 51, 1);
		font-size: 28rpx;
		font-weight: 500;
		text-align: center;
	}

	.no-youhuiBox-wraper {
		margin: 348rpx auto 0;
	}

	.have-yohui {
		height: 100%;
		box-sizing: border-box;
		background-color: #ebebeb;
		padding: 32rpx 32rpx 0;
	}

	/* 领卷模块 stra*/
	.have-yohui-item {
		width: 686rpx;
		height: 200rpx;
		margin-bottom: 24rpx;
	}

	.have-yohui-item-Bgimg {
		height: 200rpx;
		width: 686rpx;
	}

	.have-yohui-item-content {
		display: flex;
		top: 0;
		left: 0;
	}

	.yohui-item-content-left {
		width: 196rpx;
		height: 200rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: rgba(235, 195, 154, 1);
		font-size: 60rpx;
		font-weight: 600;
	}

	.yohui-item-content-right {
		width: 490rpx;
		height: 200rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 24rpx 32rpx 48rpx 32rpx;
	}

	.yohui-item-content-right-left {
		display: flex;
		flex-direction: column;
	}

	.yohui-item-content-right-left-Title {
		height: 44rpx;
		color: rgba(19, 26, 20, 0.85);
		font-size: 32rpx;
		font-weight: 500;
	}

	.yohui-item-content-right-left-Text {
		margin-top: 20rpx;
		height: 32rpx;
		font-size: 24rpx;
		font-weight: 400;
	}

	.yohui-item-content-right-right {}

	.yohui-item-content-right-right-title {
		display: flex;
		flex-direction: column;
		text-align: right;
		color: #3E554E;

	}

	.yohui-item-content-right-right-btn {
		width: 158rpx;
		height: 48rpx;
		border-radius: 72rpx;
		margin-top: 40rpx;
		border: 0.10rpx solid rgba(0.24313725531101227, 0.3333333432674408, 0.30588236451148987, 1);
		line-height: 48rpx;
		text-align: center;
		color: #3E554E;
	}

	/* 领卷模块 end*/
	.popup {
		padding: 32rpx;
	}

	.popupTitle {
		width: 526rpx;
		height: 48rpx;
		color: rgba(50, 50, 51, 1);
		font-size: 32rpx;
		font-weight: 600;
		font-family: 'PingFang SC';
		text-align: center;
		line-height: 44rpx;
	}

	.popupText {
		margin-top: 32rpx;
		height: 44rpx;
		color: rgba(50, 50, 51, 1);
		font-size: 32rpx;
		font-weight: 400;
		font-family: 'PingFang SC';
		text-align: center;
		line-height: 44rpx;
	}

	.popupbutton {
		margin-top: 60rpx;
	}

	.closeBox {
		width: 200rpx;
		height: 80rpx;
		color: rgba(50, 50, 51, 1);
		font-size: 28rpx;
		font-weight: 400;
		font-family: 'PingFang SC';
		text-align: center;
		line-height: 80rpx;
		border: 1rpx solid #dcdee0;
		background: rgba(255, 255, 255, 1);
	}

	.openBox {
		width: 200rpx;
		height: 80rpx;
		color: #ffffff;
		font-size: 28rpx;
		font-weight: 400;
		font-family: 'PingFang SC';
		text-align: center;
		line-height: 80rpx;
		background: #3e554e;
	}
</style>