<template>
	<page-meta :page-style="themeColor"></page-meta>
	<view class="guafen-box">
		<view v-if="groupInfoList.status!=2">
			<view class="guafen_adv" :style="{ backgroundImage: 'url(' + $util.img('public/uniapp/divideticket/guafen_bg.png') + ')' }">
				<view class="explain">
					<view class="explain-img" @click="toIndex()">
						<image :src="$util.img('public/uniapp/hongbao/index.png')" mode="" class="index-img"></image>
					</view>
					<view class="desc ns-rule-bg" @click="openRulePopup">活动说明</view>
				</view>
				<view class="guafen_content" v-if="groupInfoList == '' && guafenInfo.status == 1" :style="{ 'background-image': 'url(' + $util.img('public/uniapp/divideticket/guafen_success_bg.png') + ')' }">
					<view class="guafen_content_title">点击 [立即领取] 瓜分优惠券</view>
					<view class="guafen_content_num">{{guafenInfo.money}} <text>元</text></view>
					<view class="btn" @click="getLaunch()">立即领取</view>
				</view>
				<view class="guafen_content" v-if="groupInfoList != ''&& guafenInfo.status == 1 &&groupInfoList.status==0||groupInfoList.status==2" :style="{ 'background-image': 'url(' + $util.img('public/uniapp/divideticket/guafen_success_bg.png') + ')' }">
					<view class="guafen_photo" >
						<scroll-view :scroll-y="true" :show-scrollbar="false" v-if="groupInfoList.member_list.length > 0">
							<view class="guafen-lists">
								<view class="guafen_header_img" v-for="(headerItem,headerIndex) in groupInfoList.member_list" :key="headerItem.member_id">
									<image v-if="headerItem.headimg != ''" :src="$util.img(headerItem.headimg)" mode="" @error="headerimageError(headerIndex)"></image>
									<image v-else :src="$util.img('public/uniapp/default_img/head.png')" mode=""></image>
								</view>
								<view class="guafen_header_img" @click="openSharePopup" v-for="(itm,inx) in groupInfoList.num - groupInfoList.member_list.length" :key="inx">
									<text>+</text>
								</view>
							</view>
						</scroll-view>
					</view>
					<view class="guafen_content_title">仅差<text class="guafen_content_color">{{groupInfoList.num - groupInfoList.member_list.length}}</text>人，即可瓜分<text class="guafen_content_color">{{guafenInfo.money}}</text>元优惠券</view>
					<view class="guafen_content_time">
						<image :src="$util.img('public/uniapp/divideticket/bg_left.png')" mode=""></image>
						<text class="seckill-title-name">距离结束</text>
						<uni-count-down class="guafen_content_color" :hour="seckillH" :minute="seckillI" :second="seckillS" borderColor="#fff" color="#FF4544"/>
						<image :src="$util.img('public/uniapp/divideticket/bg_right.png')" mode=""></image>
					</view>
					<view class="btn" @click="openSharePopup">邀请好友一起瓜分</view>
				</view>
				<block v-if="groupInfoList != ''&&groupInfoList.status==1 && g_member_state ==0">
					<view class="guafen_content-one" :style="{ 'background-image': 'url(' + $util.img('public/uniapp/divideticket/guafen_success_bg.png') + ')' }">
						<view class="guafen-success">恭喜你，成功获得优惠券</view>
						<view class="guafen_photo" :class="groupInfoList.member_list.length>4?'guafen-lists':'guafen-lists-two'">
							<scroll-view :scroll-y="true" :show-scrollbar="false" v-if="groupInfoList.member_list.length > 0">
								<view :class="groupInfoList.member_list.length>4?'guafen-lists':'guafen-lists-two'">
									<view class="guafen_header_img" v-for="(headerItem,headerIndex) in groupInfoList.member_list" :key="headerItem.member_id">
										<image v-if="headerItem.headimg != ''" :src="$util.img(headerItem.headimg)" mode="" @error="headerimageError(headerIndex)"></image>
										<image v-else :src="$util.img('public/uniapp/default_img/head.png')" mode=""></image>
									</view>
								</view>
							</scroll-view>
						</view>
						<view class="guafen-coupon">{{money}}<text>元</text></view>
						<view class="guafen-man color-tip font-size-tag" v-if="guafenInfo.is_limit==1">店铺商品满{{guafenInfo.at_least|int}}元可用</view>
						<view class="guafen-time color-tip font-size-tag">有效期：{{$util.timeStampTurnTime(start_time_coupon)|date}} 至 {{$util.timeStampTurnTime(end_time_coupon)|date}}</view>
						<view class="success-btn" @click="toList()">立即使用</view>
						<view class="success-guafen-btn" @click="toGuaFen">瓜分新礼包</view>
					</view>
				</block>
				<block v-if="groupInfoList.status!=1&&guafenInfo.status==-1 || groupInfoList.status!=1&&guafenInfo.status==2">
					{{groupInfoList.status}}
					<view class="guafen_over" :style="{ 'background-image': 'url(' + $util.img('public/uniapp/divideticket/guafen_success_bg.png') + ')' }">
						哎呀，来晚了，活动已结束
					</view>
				</block>
				<block v-if="guafenInfo.status==1 && g_member_state==1">
					<view class="guafen_over" :style="{ 'background-image': 'url(' + $util.img('public/uniapp/divideticket/guafen_success_bg.png') + ')' }">
						来晚了，优惠券已被瓜分完
					</view>
				</block>
				<!-- <block v-if="guafenInfo.status == 2 && groupInfoList.status!=1 && this.memberList.length == guafenInfo.divide_num">
					<view class="guafen-success">恭喜你，成功获得优惠券</view>
					<view class="guafen-coupon">{{money}}<text>元</text></view>
					<view class="guafen-man color-tip font-size-tag" v-if="guafenInfo.is_limit==1">店铺商品满{{guafenInfo.at_least|int}}元可用</view>
					<view class="guafen-time color-tip font-size-tag">有效期：{{$util.timeStampTurnTime(start_time_coupon)|date}} 至 {{$util.timeStampTurnTime(end_time_coupon)|date}}</view>
					<view class="success-btn" @click="toList()">立即使用</view>
				</block> -->
			</view>
			<ns-goods-recommend ref="goodrecommend" route="guafen"></ns-goods-recommend>
		</view>
		<view class="detail-box" v-if="groupInfoList.status==2">
			<view class="status-wrap color-base-bg" :style="{ backgroundImage: 'url(' + $util.img('public/uniapp/order/status-wrap-bg.png') + ')' }">
				<view class="order-status-left">
					<view class="status-name">
						<text class="iconfont icon-wode-tuangou fail"></text>
						<text class="name font-size-toolbar">组队失败</text>
					</view>
				</view>
			</view>
			<view class="guafen_content">
				<view :class="groupInfoList.member_list.length>4?'guafen_photo':'guafen_photo-two'">
					<scroll-view :scroll-y="true" :show-scrollbar="false" v-if="groupInfoList.member_list.length > 0">
						<view :class="groupInfoList.member_list.length>4?'guafen-lists':'guafen-lists-two'">
							<view class="guafen_header_img" v-for="(headerItem,headerIndex) in groupInfoList.member_list" :key="headerItem.member_id">
								<image v-if="headerItem.headimg != ''" :src="$util.img(headerItem.headimg)" mode="" @error="headerimageError(headerIndex)"></image>
								<image v-else :src="$util.img('public/uniapp/default_img/head.png')" mode=""></image>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="guafen_content_title">集齐{{groupInfoList.num}}人可瓜分红包，还差<text class="color-base-text">{{groupInfoList.num - groupInfoList.member_list.length}}</text>人</view>
			</view>
			<view class="footer-guafen">
				<view class="footer-list">
					<text>活动开始时间</text><text>{{ $util.timeStampTurnTime(guafenInfo.start_time) }}</text>
				</view>
				<view class="footer-list">
					<text>活动结束时间</text><text>{{ $util.timeStampTurnTime(guafenInfo.end_time) }}</text>
				</view>
				<view class="footer-list">
					<text>组队时间</text><text>{{ $util.timeStampTurnTime(groupInfoList.start_time) }}</text>
				</view>
			</view>
		</view>
		<!-- 活动规则 -->
		<uni-popup ref="rulePopup" type="center" :maskClick="false">
			<view class="rule-wrap">
				<view class="content-wrap">
					<image :src="$util.img('public/uniapp/divideticket/explain.png')" mode="" class="rule-head"></image>
					<scroll-view scroll-y="true" class="rule">
						<view>
							<view class="tit">活动时间:</view>
							<view class="text">{{ $util.timeStampTurnTime(guafenInfo.start_time) }} - {{ $util.timeStampTurnTime(guafenInfo.end_time) }}</view>
							<view class="tit">活动说明:</view>
							<view class="text">{{ guafenInfo.remark }}</view>
						</view>
					</scroll-view>
					<text class="iconfont icon-round-close" @click="closeRulePopup"></text>
				</view>
			</view>
		</uni-popup>
		<!-- 分享弹窗 -->
		<view @touchmove.prevent.stop>
			<uni-popup ref="sharePopup" type="bottom" class="share-popup">
				<view>
					<view class="share-title">分享</view>
					<view class="share-content">
						<!-- #ifdef MP -->
						<view class="share-box">
							<button class="share-btn" :plain="true" open-type="share">
								<view class="iconfont icon-share-friend"></view>
								<text>分享给好友</text>
							</button>
						</view>
						<!-- #endif -->
						<!-- #ifdef MP-WEIXIN -->
						<view class="share-box" v-if="goodsCircle">
							<button class="share-btn" :plain="true" @click="openBusinessView">
								<view class="iconfont icon-haowuquan"></view>
								<text>分享到好物圈</text>
							</button>
						</view>
						<!-- #endif -->
						<view class="share-box" @click="openPosterPopup">
							<button class="share-btn" :plain="true">
								<view class="iconfont icon-pengyouquan"></view>
								<text>生成分享海报</text>
							</button>
						</view>
						<!-- #ifdef H5 -->
						<view class="share-box" @click="copyUrl">
							<button class="share-btn" :plain="true">
								<view class="iconfont icon-fuzhilianjie"></view>
								<text>复制链接</text>
							</button>
						</view>
						<!-- #endif -->
					</view>
					<view class="share-footer" @click="closeSharePopup"><text>取消分享</text></view>
				</view>
			</uni-popup>
		</view>
		<!-- 海报 -->
		<view @touchmove.prevent.stop>
			<uni-popup ref="posterPopup" type="bottom" class="poster-layer">
				<template v-if="poster != '-1'">
					<view>
						<view class="image-wrap">
							<image :src="$util.img(poster)" :show-menu-by-longpress="true" />
						</view>
						<!-- #ifdef MP || APP-PLUS  -->
						<view class="save" @click="saveGoodsPoster()">保存图片</view>
						<!-- #endif -->
						<!-- #ifdef H5 -->
						<view class="save">长按保存图片</view>
						<!-- #endif -->
					</view>
					<view class="close iconfont icon-close" @click="closePosterPopup()"></view>
				</template>
				<view v-else class="msg">{{ posterMsg }}</view>
			</uni-popup>
		</view>
		<!-- 链接 -->
		<view @touchmove.prevent.stop  class="reward-popup">
			<uni-popup ref="linkPopup" type="center" :maskClick="false">
				<view class="warp-popup" v-if="inviterInfo">
					<view class="reward-wrap" :style="{ backgroundImage: 'url(' + $util.img('public/uniapp/divideticket/guafen_popup.png') + ')' }">
						<image :src="$util.img(inviterInfo.headimg ? $util.img(inviterInfo.headimg) : $util.getDefaultImage().head)" @error="inviterInfo.headimg = $util.getDefaultImage().head" class="img-head"></image>
						<view class="nickname font-size-tag">{{inviterInfo.nickname|guolv}}</view>
						<view class="txt">邀请你加入团队</view>
						<view class="qu-btn" @click="join()">加入队伍</view>
					</view>
					<view class="close-btn" @click="closeLinkPopup()">
						<image :src="$util.img('public/uniapp/hongbao/close.png')" mode=""></image>
					</view>
				</view>
				<view class="warp-popup" v-else>
					<view class="reward-wrap" :style="{ backgroundImage: 'url(' + $util.img('public/uniapp/divideticket/guafen_popup.png') + ')' }">
						<image :src="$util.img(groupInfoList.header_headimg ? $util.img(groupInfoList.header_headimg) : $util.getDefaultImage().head)" @error="groupInfoList.header_headimg = $util.getDefaultImage().head" class="img-head"></image>
						<view class="nickname font-size-tag">{{groupInfoList.header_nickname|guolv}}</view>
						<view class="txt">邀请你加入团队</view>
						<view class="qu-btn" @click="join()">加入队伍</view>
						<view class="close-btn" @click="closeLinkPopup()">
							<image :src="$util.img('public/uniapp/hongbao/close.png')" mode=""></image>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
		<!-- 集齐瓜分 -->
		<view @touchmove.prevent.stop  class="reward-popup-two">
			<uni-popup ref="linkSuccessPopup" type="center" :maskClick="false">
				<view class="reward-wrap-two" :style="{ backgroundImage: 'url(' + $util.img('public/uniapp/divideticket/guafen_success.png') + ')' }">
					<view class="txt-two">{{guafenInfo.money|int}}<text class="element-two">元</text></view>
					<view class="qu-btn-two" @click="closeGetItNow()">立即领取</view>
				</view>
			</uni-popup>
		</view>
		<!-- 喊好友一起瓜分 -->
		<view @touchmove.prevent.stop  class="reward-popup-three">
			<uni-popup ref="friendsPopup" type="center" :maskClick="false">
				<view class="wrap-popup-three">
					<view class="reward-wrap-three" :style="{ backgroundImage: 'url(' + $util.img('public/uniapp/divideticket/guafen_popup.png') + ')' }">
						<view class="join-three">你已加入<text class="nickname-three">{{groupInfoList.header_nickname|guolv}}</text>的瓜分团</view>
						<view class="guafen-three" v-if="groupInfoList.member_list">仅差<text>{{groupInfoList.num - groupInfoList.member_list.length}}</text>人即可瓜分优惠礼包</view>
						<view class="txt-three">{{guafenInfo.money|int}}<text class="element-three">元</text></view>
						<view class="qu-btn-three" @click="goFriend()">喊好友一起瓜分</view>
					</view>
					<view class="close-btn-three" @click="closeFriend()">
						<image :src="$util.img('public/uniapp/hongbao/close.png')" mode=""></image>
					</view>
				</view>
			</uni-popup>
		</view>
		<ns-login ref="login"></ns-login>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import nsGoodsRecommend from '@/components/ns-goods-recommend/ns-goods-recommend.vue';
export default {
	components: {
		nsGoodsRecommend,
		uniPopup
	},
	data() {
		return {
			guafenInfo : {},
			groupInfoList: [],
			goodsRecommend: [],
			isShow:false,
			isNow: false,
			seckillH: '',
			seckillI: '',
			seckillS: '',
			seckillInterval: null,
			poster: "-1", //海报
			posterMsg: "", //海报错误信息
			posterHeight: 0,
			couponId: '',
			groupId:'',
			memberInfo:{},
			money:'',
			memberList:[],
			inviterId:'',
			inviterInfo:{},
			is_exit:0,
			g_member_state:0,
			start_time_coupon:'',
			end_time_coupon:'',
			token:null,
			memberId: 0,
		};
	},
	onLoad(option) { 
		//小程序分享接收source_member
		if (option.source_member){
			uni.setStorageSync('source_member', option.source_member);
		}
		// 小程序扫码进入
		if (option.scene) {
			var sceneParams = decodeURIComponent(option.scene);
			sceneParams = sceneParams.split('&');
			if (sceneParams.length) {
				sceneParams.forEach(item => {
					if (item.indexOf('cid') != -1) this.couponId = item.split('-')[1];
					if (item.indexOf('id') != -1) this.inviterId = item.split('-')[1];
					if (item.indexOf('gid') != -1) this.groupId = item.split('-')[1]
					if (item.indexOf('m') != -1) uni.setStorageSync('source_member', item.split('-')[1]);
					if (item.indexOf('is_test') != -1) uni.setStorageSync('is_test', 1);
				});
			}
		}else{
			if(option.cid){
				if (option.cid) this.couponId = option.cid;
				if (option.id) this.inviterId = option.id
				if (option.gid) this.groupId = option.gid
			}else{
				if (option.coupon_id) this.couponId = option.coupon_id;
				if (option.inviter_id) this.inviterId = option.inviter_id
				if (option.group_id) this.groupId = option.group_id
			}
		}
	},
	filters:{
		date(date){
			return String(date).slice(0,10);
		},
		guolv(str){
			str = String(str);
		    if(str.length>=6){
				return str.substr(0,1)+'****'+str.substr(str.split('').length-1,str.split('').length);
			}else{
				return str;
			}
		},
		int(val){
			var str = String(val);
			var arr = str.split('.');
			if(parseInt(arr[1])>0){
				return str
			}else{
				return arr[0]
			}
		}
	},
	onShow() {
		this.getInfo();
		this.getMemberInfo()
		this.$util.getMemberId().then(resolve => {
			this.memberId = resolve;
			if (this.guafenInfo.coupon_id) this.setPublicShare();
		});
		
		//记录分享关系
		if(uni.getStorageSync('token') && uni.getStorageSync('source_member')){
			this.$util.onSourceMember(uni.getStorageSync('source_member'));
		}
		
	},
	methods: {
		closeGetItNow(){
			this.$refs.linkSuccessPopup.close();
		},
		// 打开分享弹出层
		openSharePopup() {
			this.$refs.sharePopup.open();
			this.getGoodsPoster();
		},
		// 关闭分享弹出层
		closeSharePopup() {
			this.$refs.sharePopup.close();
		},
		showPrice(data) {
			let price = data.discount_price;
			if (data.member_price && parseFloat(data.member_price) < parseFloat(price)) price = data.member_price;
			return price;
		},
		openRulePopup() {
			this.$refs.rulePopup.open();
		},
		closeRulePopup() {
			this.$refs.rulePopup.close();
		},
		toIndex(){
			this.$util.redirectTo('/pages/index/index');
		},
		toList(){
			var arr = this.guafenInfo.goods_ids.split(',').filter(function(arrs){
				return arrs && arrs.trim()
			})
			this.$util.redirectTo('/pages/goods/list', {goods_id_arr:arr});
		},
		toGuaFen(){
			this.$util.redirectTo('/pages_promotion/divideticket/list');
		},
		//去商品详情
		toDetail(item){
			this.$util.redirectTo('/pages/goods/detail', {goods_id:item.goods_id});
		},
		closeFriend(){
			this.$refs.friendsPopup.close();
		},
		friend(){
			this.$refs.friendsPopup.open();
		},
		goFriend(){
			this.closeFriend();
			this.openSharePopup()
		},
		GetItNowPopup(){
			this.$refs.linkSuccessPopup.open();
		},
		getInfo() {
			this.$api.sendRequest({
				url: '/divideticket/api/divideticket/info',
				data: {
					coupon_id : this.couponId,
					inviter_id:this.inviterId==''?0:this.inviterId,
					group_id:this.groupId==''?0:this.groupId
				},
				success: res => {
					if (res.code >= 0) {
						this.guafenInfo = res.data
						this.groupInfoList = res.data.group_info
						this.memberList = res.data.group_info.member_list;
						this.groupId = res.data.group_info.group_id;
						if(this.guafenInfo.inviter_info){
							this.inviterInfo = res.data.inviter_info
						}
						if(this.memberList){
							this.memberList.forEach(e=>{
								if(this.guafenInfo.member_id == e.member_id){
									this.money = e.money
									this.start_time_coupon = e.coupon_start_time
									this.end_time_coupon = e.coupon_end_time
								}
							})	
						}
						if(res.data.group_info != '') {
							let time = Date.parse(new Date())/1000; //当前时间
							var obj = this.$util.countDown(this.groupInfoList.end_time - time)
							this.seckillH = obj.h;
							this.seckillI = obj.i;
							this.seckillS = obj.s;
							if(res.data.member_id!=res.data.group_info.header_id){
								var is_exit = 0;
								res.data.group_info.member_list.some(function(i){
									if(i.member_id == res.data.member_id){
										is_exit = is_exit + 1;
									}
								})
								if(res.data.group_info.status == 1 && is_exit == 0){
									this.g_member_state = 1;
								}else{
									if(is_exit == 0){
										is_exit = is_exit + 1;
										this.$refs.linkPopup.open();
									}
								}
							}
						}
						this.setPublicShare()
					}
				}
			});
		},
		join(){
			if (!uni.getStorageSync('token')) {
				setTimeout(() => {
					this.$refs.login.open('/pages_tool/hongbao/index?coupon_id=' + this.couponId +'&group_id='+this.groupId);
				});
			}else{
				this.$api.sendRequest({
					url: '/divideticket/api/divideticket/divideticket',
					data: {
						group_id : this.groupId
					},
					success: res => {
						if(res.code>=0){
							this.$util.showToast({
								title: '加入成功'
							});
							this.closeLinkPopup()
							this.getInfo();
							if(this.groupInfoList.num-this.groupInfoList.member_list.length>1){
								this.friend();
							}
							if(this.groupInfoList.num-this.groupInfoList.member_list.length <= 1){
								this.GetItNowPopup()
							}
						}else{
							this.$util.showToast({
								title: res.message
							});
							this.closeLinkPopup()
						}
						
					}
				});
			}
			
		},
		getLaunch() {
			if (!uni.getStorageSync('token')) {
				setTimeout(() => {
					this.$refs.login.open('/pages_promotion/divideticket/index?coupon_id=' + this.couponId +'&group_id='+this.groupId);
				});
			}else{
				this.$api.sendRequest({
					url: '/divideticket/api/divideticket/launch',
					data: {
						coupon_id : this.couponId
					},
					success: res => {
						if (res.code >= 0) {
							this.groupId = res.data
							this.isShow == true
							this.getInfo();
						}else {
							this.$util.showToast({ title:'优惠券已被瓜分完，下次再来吧' });
						}
						this.$forceUpdate();
					}
				});
			}
		},
		// 打开海报弹出层
		openPosterPopup() {
			this.$util.redirectTo('/pages_promotion/divideticket/poster', {coupon_id:this.couponId,group_id:this.groupId,inviter_id:this.guafenInfo.member_id},);
		},
		//生成海报
		getGoodsPoster() {
			//活动海报信息
			this.$api.sendRequest({
				url: "/divideticket/api/divideticket/poster",
				data: {
					coupon_id: this.couponId,
					group_id:this.groupId==''?0:this.groupId
				},
				success: res => {
					if (res.code == 0) {
						this.poster = res.data.path + "?time=" + new Date().getTime();
					} else {
						this.posterMsg = res.message;
					}
				}
			});
		},
		// 关闭海报弹出层
		closePosterPopup() {
			this.$refs.posterPopup.close();
		},
		closeLinkPopup(){
			this.$refs.linkPopup.close();
		},
		copyUrl() {
			let text = this.$config.h5Domain + '/pages_promotion/divideticket/index';
			if (this.couponId) text += '?coupon_id=' + this.couponId +'&group_id='+this.groupInfoList.group_id+'&inviter_id='+this.guafenInfo.member_id;
			this.$util.copy(text, () => {
				this.closeSharePopup();
			});
		},
		imageError(index){
			this.list[index].goods_image = this.$util.getDefaultImage().goods;
			this.$forceUpdate();
		},
		headerimageError(index) {
			this.list[index].headimg = this.$util.getDefaultImage().head;
			this.$forceUpdate();
		},
		onPageHide() {
			clearInterval(this.seckillInterval);
		},
		getMemberInfo() {
			this.$api.sendRequest({
				url: '/api/member/info',
				success: res => {
					if (res.code == 0) {
						this.memberInfo = res.data;
					}
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				},
				fail: res => {
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				}
			});
		},
		/**
		 * 设置公众号分享
		 */
		setPublicShare(){
			let shareUrl = this.$config.h5Domain + '/pages_promotion/divideticket/index?cid=' + this.guafenInfo.coupon_id + '&gid=' + this.groupInfoList.group_id + '&id=' + this.guafenInfo.member_id;
			if (this.memberId) shareUrl += '&source_member=' + this.memberId;
		
			this.$util.setPublicShare({
				title: '邀请好友瓜分优惠券，一起享优惠', 
				desc: '仅差一人即可瓜分'+ this.guafenInfo.money +'元优惠券',
				link: shareUrl,
				imgUrl: this.$store.state.site_info.logo_square
			})
		}
	},
	/**
	 * 自定义分享内容
	 * @param {Object} res
	 */
	onShareAppMessage(res) {
		var path ='/pages_promotion/divideticket/index?cid=' + this.guafenInfo.coupon_id + '&gid=' + this.groupInfoList.group_id + '&id=' + this.guafenInfo.member_id;
		if (this.memberId) path += '&source_member=' + this.memberId;
		return {
			title: '仅差一人即可瓜分'+ this.guafenInfo.money +'元优惠券',
			path: path,
			imageUrl:'',
			success: res => {},
			fail: res => {}
		};
	},
	
	
	// 分享到微信朋友圈
	// #ifdef MP-WEIXIN
	onShareTimeline() {
		var title = '仅差一人即可瓜分'+ this.guafenInfo.money +'元优惠券';
		let query = query ='?cid=' + this.guafenInfo.coupon_id + '&gid=' + this.groupInfoList.group_id + '&id=' + this.guafenInfo.member_id;
		if (this.memberId) query += '&source_member=' + this.memberId;
		return {
			title: title,
			query: query,
			imageUrl: '',
		};
	},
	// #endif
	
};
</script>
<style lang="scss">
@import '@/common/css/goods_detail.scss';
</style>
<style lang="scss">
.detail-box{
	.status-wrap{
		background-size: 100% 100%;
		background-repeat: no-repeat;
		padding: 60rpx 30rpx;
		height: 100rpx;
		.status-name{
			color: #fff;
			.name{
				margin-left: 14rpx;
			}
			.fail{
				font-size: 40rpx;
			}
		}
	}
	.guafen_content {
		border-radius:$border-radius;
		text-align: center;
		padding:48rpx 0 58rpx;
		margin:-70rpx 30rpx 20rpx;
		background: #fff;
		.guafen_content_title {
			font-size: 30rpx;
			font-weight: bold;
			line-height: 1;
		}
		.guafen_content_num {
			color: #FF4544;
			font-weight: bold;
			font-size: 72rpx;
			margin: 52rpx 0 58rpx;
			line-height: 1;
			text {
				font-size: 30rpx;
				font-weight: bold;
				margin-left: 10rpx;
			}
		}
		.guafen_photo {
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			overflow: hidden;
			margin-bottom: 30rpx;
			.guafen_header_img {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				background: #FFE5E5;
				border: 1px dashed #FF4544;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 44rpx;
				line-height: 44rpx;
				color: #FF4544;
				margin-left: 56rpx;
				margin-bottom: 20px;
				image{
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
				}
			}
		}
		.guafen_photo-two {
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			overflow: hidden;
			margin-bottom: 30rpx;
			.guafen_header_img {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				background: #FFE5E5;
				border: 1px dashed #FF4544;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 44rpx;
				line-height: 44rpx;
				color: #FF4544;
				margin-left: 56rpx;
				margin-bottom: 20px;
				&:first-child{
					margin-left: 0;
				}
				image{
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
				}
			}
		}
		.guafen_content_color {
			color: #FF4544;
		}
		.guafen_content_time {
			font-size: 24rpx;
			margin: 30rpx 0 38rpx; 
			display: flex;
			justify-content: center;
			align-items: center;
			.seckill-title-name {
				margin-right: 11rpx;
			}
			image{
				width: 110rpx;
				height: 2rpx;
				margin: 0 16rpx;
			}
		}
	}
	.footer-guafen{
		border-radius: 10rpx;
		text-align: center;
		padding:30rpx;
		margin:0 30rpx 0;
		background:#fff;
		.footer-list{
			display: flex;
			justify-content: space-between;
			line-height: 2;
		}
	}
}
.guafen_adv {
	background-size: 100%;
	background-repeat: no-repeat;
	margin-bottom: 64rpx;
	padding: 20rpx 30rpx;
	image {
		height: 100%;
		width: 100%;
	}
	.explain{
		display: flex;
		justify-content: space-between;
		.explain-img{
			width: 70rpx;
			height: 70rpx;
			.index-img{
				width: 100% !important;
				height: 100% !important;
			}
		}
		.desc {
			text-align: center;
			color: #fff;
			border-radius: 25rpx;
			font-size: $font-size-tag;
			width: 140rpx;
			height: 50rpx;
			line-height:50rpx;
		}
	}
	.guafen_over{
		height: 100rpx;
		background: linear-gradient(0deg, #FFFFFF, #FFF2EF);
		width: 690rpx;
		border-radius: 10rpx;
		text-align: center;
		display: flex;
		align-items: center;
		text-align: center;
		justify-content: center;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		padding:50rpx 0 56rpx;
		margin:220rpx auto 0;
	}
	.guafen_content {
		background: linear-gradient(0deg, #FFFFFF, #FFF2EF);
		width:690rpx;
		border-radius: 10rpx;
		text-align: center;
		padding:50rpx 0 56rpx;
		margin:200rpx auto 0;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		.guafen_content_title {
			font-size: 30rpx;
			font-weight: bold;
			margin:36rpx 0 28rpx;
			line-height: 1;
		}
		.guafen_content_num {
			color: #FF4544;
			font-weight: 500;
			font-size: 72rpx;
			margin: 20rpx 0 30rpx;
			text {
				font-size: 30rpx;
				font-weight: bold;
				margin-left: 10rpx;
			}
		}
		.guafen_photo {
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			overflow: hidden;
			.guafen_header_img {
				width: 106rpx;
				height: 106rpx;
				border-radius: 50%;
				background: #FFE5E5;
				border: 1px dashed #FF4544;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 44rpx;
				line-height: 44rpx;
				color: #FF4544;
				margin-left: 50rpx;
				margin-bottom: 20px;
				image{
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
				}
			}
		}
		.guafen_content_color {
			color: #FF4544;
		}
		.guafen_content_time {
			font-size: 24rpx;
			margin: 28rpx 0 44rpx; 
			display: flex;
			justify-content: center;
			align-items: center;
			.seckill-title-name {
				margin-right: 11rpx;
			}
			image{
				width: 108rpx;
				height: 2rpx;
				margin: 0 16rpx;
			}
		}
	}
	.btn {
		text-align: center;
		width: 540rpx;
		padding:7.42px;
		color: #FFF;
		font-size: 28rpx;
		font-weight: 500;
		background-color: #FF4544;
		margin: 0 auto;
		border-radius: $border-radius;
		box-shadow: 0 10rpx 20rpx rgba(255, 69, 68,1);
	}
}
.rule-wrap {
	border-radius: 10rpx;
	background-color: #ffd697;
	width: 80vw;
	padding: 12rpx;
	box-sizing: border-box;
	.content-wrap {
		background-color: #fff2dd;
		width: 100%;
		border-radius: 8rpx;
		position: relative;
		.rule-head {
			width: 100%;
			height:148rpx;
			position: absolute;
			transform: translateY(-50%);
			left: 0;
			top: 0;
		}

		.rule {
			height: 560rpx;
			padding:80rpx 30rpx 0 30rpx;
			box-sizing: border-box;

			.tit {
				font-weight: bold;
				color: #da2b00;
				margin-top: 10rpx;
			}
			.text {
				font-size: $font-size-sub;
				color: #da2b00;
				word-break: break-word;
			}
		}
		.icon-round-close {
			color: #fff;
			text-align: center;
			position: absolute;
			bottom: -150rpx;
			left: 50%;
			transform: translateX(-50%);
			font-size: 70rpx;
		}
	}
}
.warp-popup{
	width: 530rpx;
	height: 696rpx;
	.close-btn{
		margin-top: 46rpx;
		text-align: center;
		image{
			width: 82rpx;
			height: 82rpx;
		}
	}
	.reward-wrap {
		background-size: 100% 100%;
		background-repeat: no-repeat;
		text-align: center;
		padding:180rpx 0 68rpx;
		.bg-img-head{
			width: 600rpx;
			height: 740rpx;
		}
		.img-head{
			width: 136rpx;
			height: 136rpx;
			border-radius:50%;
		}
		.nickname{
			color: #fff;
			margin: 30rpx 0 40rpx;
			line-height: 1;
		}
		.qu-btn{
			background-color: #FFC444;
			box-shadow: 0 5px 10px #FFC444;
			color: #fff;
			border-radius: 34rpx;
			width:300rpx;
			margin: 68rpx auto 0;
			padding: 21rpx 0;
			line-height: 1;
		}
		.txt{
			font-size:50rpx;
			color: #fff;
			line-height: 1;
		}
	}
}
.reward-wrap-two {
	width: 530rpx;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	text-align: center;
	padding:414rpx 0 48rpx;
	.bg-img-head-two{
		width: 600rpx;
		height: 740rpx;
	}
	.qu-btn-two{
		background-color: #FFC444;
		box-shadow: 0 5px 10px #FFC444;
		color: #fff;
		border-radius: 34rpx;
		width: 300rpx;
		margin: 0 auto;
		line-height: 1;
		padding: 21rpx 0;
	}
	.txt-two{
		font-size:90rpx;
		color: #fff;
	}
	.element-two{
		font-size: 30rpx;
		margin-left: 20rpx;
	}
}
.wrap-popup-three{
	width: 530rpx;
	height: 696rpx;
	.close-btn-three{
		margin-top: 46rpx;
		text-align: center;
		image{
			width: 82rpx;
			height: 82rpx;
		}
	}
	.reward-wrap-three {
		background-size: 100% 100%;
		background-repeat: no-repeat;
		text-align: center;
		padding:326rpx 0 48rpx;
		.bg-img-head-three{
			width: 600rpx;
			height: 740rpx;
		}
		.qu-btn-three{
			background-color: #FFC444;
			box-shadow: 0 5px 10px #FFC444;
			color: #fff;
			border-radius: 34rpx;
			width: 300rpx;
			line-height: 1;
			padding: 21rpx 0;
			margin:0 auto;
		}
		.txt-three{
			font-size:90rpx;
			color: #fff;
			line-height: 1;
			margin-bottom: 52rpx;
		}
		.element-three{
			font-size: 30rpx;
			margin-left: 20rpx;
		}
		.join-three{
			color: #fff;
			line-height: 1;
		}
		.guafen-three{
			font-size: 30rpx;
			color: #fff;
			line-height: 1;
			margin: 34rpx 0 38rpx;
			text{
				color: #FFC444;
				font-size: 36rpx;
				margin: 0 10rpx;
			}
		}
	}
}
.guafen_content-one{
	background-size: 100% 100%;
	background-repeat: no-repeat;
	width: 690rpx;
	border-radius: 10rpx;
	text-align: center;
	padding:50rpx 0 56rpx;
	margin:200rpx auto 0;
	.guafen_photo {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		overflow: hidden;
		.guafen_header_img {
			width: 106rpx;
			height: 106rpx;
			border-radius: 50%;
			background: #FFE5E5;
			border: 1px dashed #FF4544;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 44rpx;
			line-height: 44rpx;
			color: #FF4544;
			margin-left: 50rpx;
			margin-bottom: 20px;
			image{
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
			}
		}
	}
	.guafen_photo-two {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		overflow: hidden;
		margin-bottom: 30rpx;
		.guafen_header_img {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			background: #FFE5E5;
			border: 1px dashed #FF4544;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 44rpx;
			line-height: 44rpx;
			color: #FF4544;
			margin-left: 56rpx;
			margin-bottom: 20px;
			&:first-child{
				margin-left: 0;
			}
			image{
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
			}
		}
	}
	.guafen-success{
		font-size: 30rpx;
		font-weight: bold;
		margin:0 0 30rpx;
		line-height: 1;
	}
	.guafen-coupon{
		font-size: 72rpx;
		line-height: 1;
		margin-bottom: 40rpx;
		color: #FF4544;
		text{
			font-size: 30rpx;
		}
	}
	.guafen-man{
		line-height: 1;
	}
	.guafen-time{
		line-height: 1;
		margin: 30rpx 0 44rpx;
	}
	.success-btn{
		width: 540rpx;
		background-color: #FF4544;
		box-shadow: 0 10rpx 20rpx rgba(255, 69, 68,1);
		color: #fff;
		border-radius: $border-radius;
		height: 80rpx;
		line-height: 80rpx;
		margin:30rpx auto 40rpx;
	}
	.success-guafen-btn{
		width: 540rpx;
		background-color: #FFC444;
		box-shadow: 0 10rpx 20rpx RGBA(255, 211, 115, 1);
		color: #fff;
		border-radius: $border-radius;
		height: 80rpx;
		line-height: 80rpx;
		margin: 0 auto;
	}
}
.image-wrap{
	height:480rpx !important;
	image{
		height:480rpx !important;
	}
}
</style>
<style scoped>
 /deep/.register-box .uni-scroll-view {
	background: unset !important;
}
/deep/ .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box{
	background-color: unset;
}
/deep/ .uni-tip-button.color-base-bg{
	background-color: #007aff !important;
}
/deep/ .uni-countdown__number {
	font-size: 14px;
	padding: 0;
}
/deep/ .uni-countdown__splitor{
	font-size: 14px;
	color: #FF4544 !important;
}
>>>.uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
	background: none !important;
}

>>>.uni-popup__wrapper.uni-custom.center .uni-popup__wrapper-box {
	overflow: unset;
}

/deep/ .guafen-lists{
	max-height: 280rpx;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}
/deep/ .guafen-lists-two{
	max-height:280rpx;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
</style>