<template>
	<div class="yslDrawBg">
		<div class="h100vh">
			<div class="drawBtn" @click="jumpDraw()"></div>
			<div class="yslRules" @click="rulesClick()"></div>
			<div class="yslPrizeName">
				<div v-if="prizeNameList.length > 0" class="yslPrizeNameText1">恭喜以下尊贵的YSL会员</div>
				<!-- <div class="yslPrizeWord" v-for="(item,i) in prizeNameList" :key="i">{{item.nickName}}</div> -->
				<vue-seamless-scroll class="yslPrizeNameInner seamless-warp" :class-option="defaultOption"  :data="prizeNameList" v-if="prizeNameList.length > 0">
					<div class="yslPrizeWord" v-for="(item,i) in prizeNameList" :key="i">{{item.nickName}}</div>
				</vue-seamless-scroll>
				<div v-else class="yslPrizeNameText">暂时还没有人中奖哦~</div>
			</div>
		</div>
		<div class=" por p-top-7 p-bottom-5">
			<div class="yslName1"></div>
			<div class="yslMyprize" @click="MyprizeClick()"></div>
			<div class="yslPrizeBox">
				
				<div >
					<div class="yslPrizeOne">
						<div class="yslPrizeOneInner">
							<img src="//img10.360buyimg.com/imgzone/jfs/t1/169994/36/33839/78259/63c4a723F30a42a4a/89f3123c0616220e.png" alt="">
							<!-- <div class="yslPrizeOneInnerText">
								<div class="yslPrizeOneText">一等奖</div>
                             <div class="yslPrizeOneName">{{prizeList[0].prizeName}}</div> -->
							<!-- </div> -->
							
							
						</div>
					</div>
					<div class="yslPrizeListBox"  @scroll="scrollRuleEvent">
						<div class="yslPrizeListInner">
								<div class="yslPrizeList">
									<!-- <div class="yslPrizeListShow"> -->
                                        <img  src="//img10.360buyimg.com/imgzone/jfs/t1/186543/4/31473/128183/63be7012F2da255d4/dbbc3d4f8202776b.png" alt="">
									<!-- </div> -->
									<!-- <div class="yslPrizeListLevel">{{item.level}}</div>
									<img class="yslPrizeListImg" :src="item.showImg" alt="">
									<div class="yslPrizeListName">{{item.prizeName}}</div> -->
								</div>
						</div>
					</div>
					<div class="p-top-43">
					<div  class="__rule_pops_scroll_line cc_abs"><div class="cc_abs" :style="{ marginLeft: `${ruleScrollTransform}%` }"></div></div>

					</div>
				</div>
			</div>
		</div>
		<div class="por p-top-5 p-bottom-5" id="industry">
			<div class="yslName2"></div>
			<div class="yslNameChance">当前抽奖机会:{{chance}}次</div>
			<div class="drawBox" >
			<div v-for="(item,index) in prizeListData" :key="index">
				<div class="drawBoxInner" :class="[
                  'drawBoxInner' + item.position,
              { active: index == current },drawStart
            ]"></div>
			 <div :class="index == current ?'': [
                  'drawInner' + item.position]" ></div>
			</div>
			<div class="drawStart" @click="drawStart"></div>
		</div>
		</div>
		<div class="por p-top-5" id='toTask'>
			<div class="yslName3"></div>
			<div class="yslTaskBox">
				<div class="yslTaskInner" v-for="(item,i) in taskData" :key="i">
					<div class="yslTaskLeft">
						<div v-for="(j,g) in iconImgList" :key="g">
                         <div class="yslTaskIcon" v-if="item.taskId == j.taskId">
							<img :class="item.taskId == 'followshop'?'yslTaskIcon1':''"  :src="j.iconImg" alt="">
							</div>
						</div>
						
						
					    <div class="yslTaskText">
							<div v-for="(j,g) in iconImgList" :key="g">
								<div class="yslTaskTextImg" v-if="item.taskId == j.taskId">
								<div class="yslTaskTitleFlex">
									<img class="taskTitleImg" :src="j.taskTitleImg" alt="">
									<div class="yslTaskTextNum" v-if="item.taskId == 'share2help' || item.taskId =='followshop' || item.taskId =='order2'">({{ item.curNum }}/{{ item.maxNeed }})</div>
								</div>
								<div>
									<img class="taskTextImg" :src="j.taskTextImg" alt="">
								</div>
								</div>
							</div>
							
							<!-- <div class="yslTaskName">{{i + 1}}/{{item.taskname}}<span v-if="item.taskId == 'share2help' || item.taskId =='followshop' || item.taskId =='order2'">({{ item.curNum }}/{{ item.maxNeed }})</span></div> -->
							<!-- <div class="yslTaskWord" v-for="(j,g) in iconImgList" :key="g">
								<div v-if="item.taskId == j.taskId">{{j.taskPrompt}}</div>
							</div> -->
							<div v-if="item.taskId =='share2help'">
								<img class="yslTaskHeadImg" :src=" item.headImageList && item.headImageList[0]?item.headImageList[0]:'//img10.360buyimg.com/imgzone/jfs/t1/71651/2/20881/625/63b39990Fd4a67c23/f8123ab6ad33eb70.png'" alt="">
								<img class="yslTaskHeadImg" :src=" item.headImageList && item.headImageList[1]?item.headImageList[1]:'//img10.360buyimg.com/imgzone/jfs/t1/71651/2/20881/625/63b39990Fd4a67c23/f8123ab6ad33eb70.png'" alt="">
								<img class="yslTaskHeadImg" :src=" item.headImageList && item.headImageList[2]?item.headImageList[2]:'//img10.360buyimg.com/imgzone/jfs/t1/71651/2/20881/625/63b39990Fd4a67c23/f8123ab6ad33eb70.png'" alt="">
								<img class="yslTaskHeadImg" :src=" item.headImageList && item.headImageList[3]?item.headImageList[3]:'//img10.360buyimg.com/imgzone/jfs/t1/71651/2/20881/625/63b39990Fd4a67c23/f8123ab6ad33eb70.png'" alt="">
								<img class="yslTaskHeadImg" :src=" item.headImageList && item.headImageList[4]?item.headImageList[4]:'//img10.360buyimg.com/imgzone/jfs/t1/71651/2/20881/625/63b39990Fd4a67c23/f8123ab6ad33eb70.png'" alt="">

							</div>
					    </div>
					</div>
					<div v-if="item.curNum != item.maxNeed">
 					<div class="yslTaskBtn" v-if="item.taskId == 'sign'" @click="taskClick(item.taskId,item)"></div>
					<div class="yslTaskBtn1" v-if="item.taskId == 'followshop'" @click="taskClick(item.taskId,item)"></div>
					<div class="yslTaskBtn2" v-if="item.taskId == 'share2help'" @click="taskClick(item.taskId,item)"></div>
					<div class="yslTaskBtn3" v-if="item.taskId == 'browseShop' ||item.taskId == 'scanlive'||item.taskId == 'browseProduct' " @click="taskClick(item.taskId,item)"></div>
					<div class="yslTaskBtn4" v-if="item.taskId == 'firstBuy'" @click="taskClick(item.taskId,item)"></div>
                    <div class="yslTaskBtn5" v-if="item.taskId == 'order2'" @click="taskClick(item.taskId,item)"></div>
					<div class="yslTaskBtn6" v-if="item.taskId == 'evaluate'" @click="taskClick(item.taskId,item)"></div>
					</div>
					<div v-else class="yslTaskAccomplishBtn">
						<img src="//img10.360buyimg.com/imgzone/jfs/t1/217918/40/22459/1113/63b4e8d8Fcd2afe00/1d207ecdbbb7a160.png" alt="">
					</div>
					
				</div>
			</div>
			<div class="por yslChance ">
				<img src="//img10.360buyimg.com/imgzone/jfs/t1/107243/20/34472/25114/63ae9c46F381f0ebf/8a251e30e17c06ef.png" alt="">
				<div class="yslChanceBtn" @click="toHome(2)"></div>
			</div>
			<div class="por p-top-10">
				<div class="yslName4"></div>
				<div class="yslProductBox">
					<div class="yslProduct"  v-for="(p,i) in productData" :key="i">
						<img class="yslProductImg" :src="p.img" alt="" @click="jump(p)">
						<!-- <div class="yslProductText">
							<div class="yslProductName">{{p.name}}</div>
							<div class="yslProductWord">{{p.des}}</div>
							<div class="yslProductBtn" @click="jump(p)"></div>
						</div> -->
					</div>
				</div>
			</div>
			<div>
				<div class="yslToHome" @click="toHome(1)"></div>
				<div class="yslRemark">
					<img src="//img10.360buyimg.com/imgzone/jfs/t1/90195/33/32180/37649/63be700dF7dfac053/680715ecccc87c00.png" alt="">
				</div>
				<div class="yalBottomLogo">
					<img src="//img10.360buyimg.com/imgzone/jfs/t1/6474/22/9933/9833/63be7318Ff83173cb/bca08c8c55bca3b5.png" alt="">
				</div>
			</div>
		</div>

	<rulePop v-if="isShowRulePop" @closePop="backClick"></rulePop>
	<popUp v-if="isShowPop" :popUpData="popUpData" @closePop="backClick"></popUp>
	<myPrize v-if="isShowPrizePop" @closePop="backClick"></myPrize>
	
	</div>
</template>

<script>

import apis from '../api/api.js';
import {callShare4MiniProgram } from '../../../../util/share.js';
import { yslDzallShare } from '../../../../js/share.js';

import store from '../../../../store/store';
import vueSeamlessScroll from "vue-seamless-scroll";
import rulePop from '../components/rulePop.vue';
import popUp from '../components/popUp.vue';
import myPrize from  '../components/myPrize.vue'
import { goToShopPage,goToOpenCard } from '../../../../util/tools';
import { toastPopComService } from '../../../../util/comCreate.js';

let { activity, prizeRecord, saveLog, draw, drawPrize,taskList,productList,task } = apis;
export default {
	  components: {
    myPrize,
    vueSeamlessScroll,
	rulePop,
	popUp
  },
	data() {
		return {
        current:-1,
		 count: 8, // 总共有多少个位置
      times: 0, // 转动跑格子次数,
      cycle: 10, // 转动基本次数：即至少需要转动多少次再进入抽奖环节
      speed: 100, // 初始转动速度
	   timer: 0, // 转动定时器
      prize: 0, // 中奖位置，接口返回
      restDrawCount: 0,
      rotNum: 0, // 旋转圈数基数
      time: 0, // 旋转时间
    	prizeListData: [
        {
          position: 1,
          showImg:
            "//img10.360buyimg.com/imgzone/jfs/t1/176585/24/10488/6916/60a4cb50E562734ab/f9ab956ec09a4146.png",
          angle: 0,
          prizeName: "1111",
        },
        {
          position: 2,
          showImg: "",
          angle: 0,
          prizeName: "谢谢参与",
        },
        {
          position: 3,
          showImg: "",
          angle: 0,
          prizeName: "谢谢参与",
        },
        {
          position: 4,
          showImg: "",
          angle: 0,
          prizeName: "谢谢参与",
        },
        {
          position: 5,
          showImg: "",
          angle: 0,
          prizeName: "谢谢参与",
        },
        {
          position: 6,
          showImg: "",
          angle: 0,
          prizeName: "谢谢参与",
        },
        {
          position: 7,
          showImg: "",
          angle: 0,
          prizeName: "谢谢参与",
        },
        {
          position: 8,
          showImg: "",
          angle: 0,
          prizeName: "谢谢参与",
        },
      ],
	  prizeList:[{
          position: 1,
          showImg:
            "//img10.360buyimg.com/imgzone/jfs/t1/63408/34/22594/73604/63ad0fb0F3d986ae6/3151f2275892778e.png",
          angle: 0,
          prizeName: "YSL情人节限定唇香礼盒",
        },
		{
          position: 1,
          showImg:
            "//img10.360buyimg.com/imgzone/jfs/t1/91416/20/33494/21721/63ad4911F5ae806ab/514dbbbef0b9b4e9.png",
          angle: 0,
          prizeName: "皮气垫黑金限定",
		  level:'二等奖'
        },
		{
          position: 1,
          showImg:
            "//img10.360buyimg.com/imgzone/jfs/t1/91416/20/33494/21721/63ad4911F5ae806ab/514dbbbef0b9b4e9.png",
          angle: 0,
          prizeName: "皮气垫黑金限定",
		  level:'二等奖'
        },
		{
          position: 1,
          showImg:
            "//img10.360buyimg.com/imgzone/jfs/t1/91416/20/33494/21721/63ad4911F5ae806ab/514dbbbef0b9b4e9.png",
          angle: 0,
          prizeName: "皮气垫黑金限定",
		  level:'二等奖'
        },
		{
          position: 1,
          showImg:
            "//img10.360buyimg.com/imgzone/jfs/t1/91416/20/33494/21721/63ad4911F5ae806ab/514dbbbef0b9b4e9.png",
          angle: 0,
          prizeName: "皮气垫黑金限定",
		  level:'二等奖'
        },
		{
          position: 1,
          showImg:
            "//img10.360buyimg.com/imgzone/jfs/t1/91416/20/33494/21721/63ad4911F5ae806ab/514dbbbef0b9b4e9.png",
          angle: 0,
          prizeName: "皮气垫黑金限定",
		  level:'二等奖'
        },
		{
          position: 1,
          showImg:
            "//img10.360buyimg.com/imgzone/jfs/t1/91416/20/33494/21721/63ad4911F5ae806ab/514dbbbef0b9b4e9.png",
          angle: 0,
          prizeName: "皮气垫黑金限定",
		  level:'二等奖'
        }
		],
		ruleScrollTransform: 0,
		taskData:[
			{
					taskType: '1', //关注店铺 2 光看直播 3 加购商品 4否买商品
					getDoNum: 1,
					iconImg:'//img10.360buyimg.com/imgzone/jfs/t1/134084/14/23911/3486/63ad0c80Fffd90284/7b7a705cb2f3fc88.png',
					taskTypeName: '每日签到',
					taskPrompt: '活动期间，每日签到可获得1次抽奖机会， 每个ID每日至高可参与1次 ',
					status: 0 //0 未完成 1已完成
					// logoUrl:"//img10.360buyimg.com/imgzone/jfs/t1/214951/12/23762/953/637c8902Eab2a0a5e/2f8edb32e347718d.png"
				},
				{
					taskType: '2', //关注店铺 2 光看直播 3 加购商品 4否买商品
					getDoNum: 2,
					iconImg:'//img10.360buyimg.com/imgzone/jfs/t1/120289/22/32723/1717/63ae9c46F351fdc17/7bf62dd7a48d9cf2.png',
					taskTypeName: '关注店铺',
					taskPrompt: '每日观看直播满20s',
					status: 1 //0 未完成 1已完成
					// logoUrl:"//img10.360buyimg.com/imgzone/jfs/t1/129508/18/32787/1003/637c8902Ecda15a8f/0ca8113caa7836d2.png"
				},
				{
					taskType: '3', //关注店铺 2 光看直播 3 加购商品 4否买商品
					getDoNum: 3,
					taskTypeName: '加购商品',
					taskPrompt: '每日加购指定商品满3件',
					status: 1 //0 未完成 1已完成
					// logoUrl:"//img10.360buyimg.com/imgzone/jfs/t1/195396/34/30165/1063/637c8902E5de746b3/418bb60402792de8.png"
				},
				{
					taskType: '4', //关注店铺 2 光看直播 3 加购商品 4购买商品
					getDoNum: 1,
					taskTypeName: '购买商品',
					taskPrompt: '购买店铺内指定正装产品',
					status: 0 //0 未完成 1已完成
					// logoUrl:"//img10.360buyimg.com/imgzone/jfs/t1/134013/1/28742/1153/637c8902E822dc8a5/1f7d1839d6cd0bb8.png"
				}
		],
		chance:0,
		shareStatus:0,// 助力状态 0：正常访问，1：助力成功，2：每人只能助力1次哦～，3：助力已达上限 ，-1只有成为会员才能给好友助力～ ， -2，您已是会员，不能给好友助力～
		openCardStatus:0,// 是否开卡，0是未开卡
		prizeNameList:[],
		iconImgList:[
			{
				taskId:'sign',
				iconImg:'//img10.360buyimg.com/imgzone/jfs/t1/134084/14/23911/3486/63ad0c80Fffd90284/7b7a705cb2f3fc88.png',
				taskPrompt:'活动期间，每日签到可获得1次抽奖机会， 每个ID每日至高可参与1次',
				taskTitleImg:'//img10.360buyimg.com/imgzone/jfs/t1/30014/21/20718/4803/63c0b55aF4d982526/05b14652e30671ca.png',
				taskTextImg:'//img10.360buyimg.com/imgzone/jfs/t1/161713/9/34060/13260/63c0b55aFe86a167c/d4b902ca7fca3bea.png',

			},
			{   taskId:'followshop',
				iconImg:'//img10.360buyimg.com/imgzone/jfs/t1/222094/35/16329/1700/63c0c5beF620ca775/0c04552dc54e3f5d.png',
				taskPrompt:'活动期间，可获得1次抽奖机会， 每个ID至高可参与1次',
				taskTitleImg:'//img10.360buyimg.com/imgzone/jfs/t1/93562/12/34513/5231/63c0b5b1F3c3e7812/1df2e699951ab502.png',
				taskTextImg:'//img10.360buyimg.com/imgzone/jfs/t1/209329/16/29768/10373/63c0b5b1F295bd32c/f413aa09ad19574a.png',

			},
			{ 
				taskId:'share2help',
				iconImg:'//img10.360buyimg.com/imgzone/jfs/t1/218325/5/24741/953/63b39078F045483fc/59a48bf64eafb68c.png',
				taskPrompt:'活动期间内，成功邀请好友首次入会， 可获得2次抽奖机会，每个ID至高可参与5次 ',
				taskTitleImg:'//img10.360buyimg.com/imgzone/jfs/t1/68132/17/21541/6883/63c0b6f6Fcb102302/0178318d7de73460.png',
				taskTextImg:'//img10.360buyimg.com/imgzone/jfs/t1/58133/23/22488/15361/63c0b61eF10b49119/eb628b34271b7b98.png',

			},
			{
				taskId:'browseShop',
				iconImg:'//img10.360buyimg.com/imgzone/jfs/t1/172106/10/32992/4036/63b39bf7F1b15fba2/81b598512c49e990.png',
				taskPrompt:'活动期间，每日浏览店铺首页10秒以上， 可获得1次抽奖机会，每个ID每日至高可参与1次 ',
				taskTitleImg:'//img10.360buyimg.com/imgzone/jfs/t1/33238/17/18814/7323/63c0b8ffF61f9cc70/7de57ae4a562a193.png',
				taskTextImg:'//img10.360buyimg.com/imgzone/jfs/t1/76018/14/18565/15724/63c0b8ffF90cc9e56/42ee8e7ff1896c7a.png',
			},
			{
				taskId:'scanlive',
				iconImg:'//img10.360buyimg.com/imgzone/jfs/t1/123267/32/30032/2171/63b39cb4F101e42f4/5fcf8d43a5ae58aa.png',
				taskPrompt:'活动期间，每日浏览店铺直播间10秒以上， 可获得1次抽奖机会，每个ID每日至高可参与3次 ',
				taskTitleImg:'//img10.360buyimg.com/imgzone/jfs/t1/66664/8/24034/8421/63c0b8ffFe2efef53/ba7c69e9e02fbdbf.png',
				taskTextImg:'//img10.360buyimg.com/imgzone/jfs/t1/91255/39/32789/17079/63c0b8ffF261a18f7/55bcdf3db5c65267.png',
			},
			{
				taskId:'browseProduct',
				iconImg:'//img10.360buyimg.com/imgzone/jfs/t1/172106/10/32992/4036/63b39bf7F1b15fba2/81b598512c49e990.png',
				taskPrompt:'活动期间，每日浏览店铺产品集合页15s以上，可获得2次抽奖机会，每个ID每日至高可参与1次',
				taskTitleImg:'//img10.360buyimg.com/imgzone/jfs/t1/49888/32/22586/5082/63c0b8ffF98226e79/61fca5518b44139a.png',
				taskTextImg:'//img10.360buyimg.com/imgzone/jfs/t1/145482/22/32917/16930/63c0b8ffF63fc1c76/b609c9add26f8d9c.png',
			},
			{
				taskId:'firstBuy',
				iconImg:'//img10.360buyimg.com/imgzone/jfs/t1/33301/36/18152/4195/63b39078F34dadbae/becd322a005feaaf.png',
				taskPrompt:'活动期间，参与YSL首购入会礼， 可获得3次抽奖机会，每个ID至高可参与1次',
				taskTitleImg:'//img10.360buyimg.com/imgzone/jfs/t1/38656/22/20526/7445/63c0b8ffF8d36eae1/474049ce6cfd3cca.png',
				taskTextImg:'//img10.360buyimg.com/imgzone/jfs/t1/98337/23/33310/14381/63c0b8ffFea25bd42/5eda01154a26bb03.png',
			},
				{
				taskId:'order2',
				iconImg:'//img10.360buyimg.com/imgzone/jfs/t1/177780/13/30494/1966/63b39078F6fab7588/b72ba3ac35ba42da.png',
				taskPrompt:'活动期间，下单购买YSL正装产品且单笔实付满￥160，可获得5次抽奖机会，每个ID至高可参与3次 ',
				taskTitleImg:'//img10.360buyimg.com/imgzone/jfs/t1/71187/12/21842/4641/63c0b8ffFe4adfe12/d350f7a195d3cbf8.png',
				taskTextImg:'//img10.360buyimg.com/imgzone/jfs/t1/58489/23/22653/17384/63c0b8ffF8d4162a2/233ea3336e0512e7.png',
			},
			{
				taskId:'evaluate',
				iconImg:'//img10.360buyimg.com/imgzone/jfs/t1/213631/27/24395/925/63b39078Fc8c0c032/20f51e238f0f70d1.png',
				taskPrompt:'活动期间，完成YSL订单评价（3个月内订单）， 可获得5次抽奖机会，每个ID至高可参与1次',
				taskTitleImg:'//img10.360buyimg.com/imgzone/jfs/t1/39775/35/22000/4923/63c0b900F597862f7/f1545e037c1c4bc3.png',
				taskTextImg:'//img10.360buyimg.com/imgzone/jfs/t1/205327/31/27888/15334/63c0b8ffFf644c25b/b109dc3bef2822a3.png',
			}
		],
		productData:[],
		isShowRulePop:false,// 规则
		isShowPop:false, // 通用弹窗
		isShowPrizePop:false,
		popUpData:{},
		uid:'',
		openCardUrl:'',
		drawStartStatus:false, // 抽奖防连点
		crowd:'',
		clickStatus:false,
		startTime:'',
		endTime:''
		};
	},
	mounted() {
		this.queryData()
		document.addEventListener('visibilitychange', this.handleVisiable);
	},
	destroyed() {
		document.removeEventListener('visibilitychange', this.handleVisiable);
	},
	computed:{
		defaultOption () {
                return {
                    step: 0.5, // 数值越大速度滚动越快
                    limitMoveNum:4, // 开始无缝滚动的数据量 this.dataList.length
                    hoverStop: true, // 是否开启鼠标悬停stop
                    direction: 1, // 0向下 1向上 2向左 3向右
                    openWatch: true, // 开启数据实时监控刷新dom
                    singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                    singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                    waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
                }
            }
	},
	created(){
		 console.log(location.href,this.$route.query,'this.$route.query.type')
		if(sessionStorage.getItem('type')){
				console.log(this.$route.query.type,'this.$route.query.type')
               let param1 = {eleId:'shareInto',param:sessionStorage.getItem('type') +''};
			saveLog(param1, callbackData => {});
		}
	},
	methods: {
		queryData(){
			
			let param = {
				activityId: this.$route.query.activityId,
				channel:8019999,
				shareUuid: this.$route.query.shareUserId
			}
			activity(param, data => {
				if(data.resp_code == 0){
					this.chance = data.data.chance
					this.openCardStatus = data.data.openCardStatus
					this.shareStatus = data.data.shareStatus;
					this.crowd = data.data.crowd;
					store.state.shareImage = data.data.shareImage;
					store.state.shareTitle = data.data.shareTitle
					this.uid = data.data.uid;
					this.openCardUrl = data.data.openCardUrl
					sessionStorage.setItem('openCardUrl',data.data.openCardUrl)
					sessionStorage.setItem('ziZhuOpenCardUrl',data.data.ziZhuOpenCardUrl)
					this.startTime = data.data.startTime
					this.endTime = data.data.endTime
					
					if(this.$route.query.shareUserId &&this.openCardStatus == 2){
				     this.isShowPop = true;
					this.popUpData = {
						hint:true,
						title:'为好友助力!',
						text:'参与活动 赢取更多好礼',
						shareOpenCardBtn:true
					}
					}
					if(this.$route.query.shareUserId &&this.openCardStatus != 2){
					this.share(data.data.shareStatus)
					}

					console.log(data,'data')
					
					
					let param2 ={eleId:'pv',param:data.data.crowd +''}
				    saveLog(param2, callbackData => {});
					let initDataAll = data.data;
					var title = initDataAll.shareTitle;
					var content = initDataAll.shareTitle;
					var url = location.href + '&type=1';
					var mpIconUrl = initDataAll.shareImage;
					var logoUrl = initDataAll.shareImage;
					var isHeader = true; //false 头部分享 true 按钮分享
					var shopid = store.state.shopId;
					var userpin = store.state.userPin;
					var jdactivityid = store.state.jdActivityId; //'1356071125718585346' //store.state.activityId
					callShare4MiniProgram(
						title,
						content,
						url,
						logoUrl,
						callBack => {
						console.log('测试分享');
						let param ={eleId:'share',param:'1'}
				        saveLog(param, callbackData => {});
						},
						isHeader,
						mpIconUrl,
						shopid,
						userpin,
						jdactivityid
					);
			       
			
			// 中奖名单
			prizeRecord(res =>{

				if(res.resp_code == 0){
					this.prizeNameList = res.data
				}
				
			})
			// 奖品
			drawPrize(res =>{
				if(res.resp_code == 0){
					this.prizeList =res.data.prizeInfo
					this.prizeList.forEach((item,i) =>{
						switch(i){
							case 0:
								item.level = '一等奖'
								break;
							case 1:
								item.level = '二等奖'
								break;
								case 2:
								item.level = '三等奖'
								break;
								case 3:
								item.level = '四等奖'
								break;
								case 4:
								item.level = '五等奖'
								break;
								case 5:
								item.level = '六等奖'
								break;
								case 6:
								item.level = '七等奖'
								break;
								case 7:
								item.level = '八等奖'
								break;
								case 8:
								item.level = '九等奖'
								break;

						}
					})
					
				}
			})
			let activityId = {
				activityId: this.$route.query.activityId
			}
			// 任务
			taskList(activityId,res =>{
             if(res.resp_code == 0){
				 this.taskData = res.data
				this.checkTask();
			 }
			})
			// 商品
			let p = {
				activityId:this.$route.query.activityId,
				type:1
			}
			productList(p,res =>{
               if(res.resp_code == 0){
				   this.productData = res.data

			   }
			})
			if(new Date().getTime() < this.startTime){
				toastPopComService.create('活动未开始', submit => {
					toastPopComService.close();
			       	});
					return 
					}
					if(new Date().getTime() > this.endTime){
						toastPopComService.create('活动已结束', submit => {
					toastPopComService.close();
			       	});
					return 
					}

				}
			})
			
	
		},
		//  分享
	share(type){
		//助力状态 0：正常访问，1：助力成功，2：每人只能助力1次哦～，3：助力已达上限 ，-1只有成为会员才能给好友助力～ ， -2，您已是会员，不能给好友助力～
		// let html = document.getElementsByTagName('html')[0]
		// html.className = 'htmlBox'
		console.log(type,'shareType--------------')
		switch (type) {
			case 1:
             this.isShowPop = true
			   this.popUpData = {
				hint:true,
				title:'助力成功!',
				text:'参与活动 赢取更多好礼',
				participationBtn:true
			}
				break;
				case -1:
             this.isShowPop = true
			   this.popUpData = {
				hint:true,
				title:'只有成为会员才能给\n好友助力',
				text:'参与活动 赢取更多好礼',
				participationBtn:true
			}
				break;
				case 2:
             this.isShowPop = true
			   this.popUpData = {
				hint:true,
				title:'已助力过好友\n助力失败',
				text:'参与活动 赢取更多好礼',
				participationBtn:true
			}
				break;
				case 3:
             this.isShowPop = true
			   this.popUpData = {
				hint:true,
				title:'好友助力已达上限\n助力失败',
				text:'参与活动 赢取更多好礼',
				participationBtn:true
			}
				break;
			case -2:
				this.isShowPop = true
			   this.popUpData = {
				hint:true,
				title:'您不是首次入会\n助力失败',
				text:'参与活动 赢取更多好礼',
				participationBtn:true
			}
				break;
				case 1000:
				this.isShowPop = true
			   this.popUpData = {
				hint:true,
				title:'助力失败!',
				text:'参与活动 赢取更多好礼',
				participationBtn:true
			}
				break;
		
		}
	},
	// 活动规则
	rulesClick(){
		this.isShowRulePop = true;
		let html = document.getElementsByTagName('html')[0]
		html.className = 'htmlBox'
	},
	//我的奖品
	MyprizeClick(){

		this.isShowPrizePop = true;
		let html = document.getElementsByTagName('html')[0]
		html.className = 'htmlBox'
	},
	//监听直播次数事件
		handleVisiable(e) {
			//如果缓存中存在flag再执行判断visibilityState
			switch (e.target.visibilityState) {
				case 'visible':
					console.log('visible');
					if (window.taskCallback) {
						window.taskCallback();
						window.taskCallback = null;
					}
					// console.log('处于正常打开');
					break;
			}
		},
		//检查观看直播任务是否达到20s
		async checkTask() {
			const task1 = window.localStorage.getItem('doTask');
			console.log(task1, '检查观看直播任务是否达到20s915');
			if (!task1) return;
			window.localStorage.removeItem('doTask');
			// console.log('axzxzxxaaaaaaaaaaaaaaaaa');
			const newItem = JSON.parse(task1);
			const newTime = new Date().getTime();
			let num  = 0
			let toastName = '观看直播'
			if(newItem.taskId === 'scanlive'){
			 num  = 10000
			 toastName = '观看直播'
			} else if(newItem.taskId ==='browseProduct'){
			 num = 15000
			 toastName = '浏览宝贝'	
			} else if(newItem.taskId ==='browseShop'){
			 num  = 10000
			  toastName = '浏览店铺'	
			}
			// const num = newItem.taskId === 'scanlive' ? 20000 : 15000;
			// const toastName = newItem.taskId === 'scanlive' ? '观看直播' : '浏览店铺';
			const downTime = newTime - newItem.time >= num;
			console.log(downTime,'downTimedownTime')
			if (downTime) {
				let param = {
					activityId: sessionStorage.getItem('activityId'),
					taskId: newItem.taskId,
					param: null
				};
				console.log('观看直播超出10秒2')
				task(param, data => {
					if (data.resp_code == 0) {
						this.queryData()
						toastPopComService.create('任务已完成', submit => {
					toastPopComService.close();
			       	});
					} else {
						this.$toast(data.resp_msg);
					}
				});
			} else {
				let toastMessage = toastName + '未到' + parseInt(num / 1000) + 's';
				toastPopComService.create(toastMessage, submit => {
					toastPopComService.close();
				});
			}
		},

	// 关闭弹窗
	backClick(type){
		// 打开地址弹窗
		if(type == 2){
			this.popUpData = {}
			this.isShowPop = true;
		} else if(type == 3){
			// 锚点定位到任务列表
			this.isShowPop = false;
			let html = document.getElementsByTagName('html')[0]
		    html.className = '';
			const div = document.querySelector('#toTask')
		    this.handleHref (div)
		} else if(type == 4){
			// 从我的奖品里打开地址弹窗
			this.popUpData = {
				isShowAddress:true
			}
			this.isShowPrizePop = false;
			this.isShowPop = true;

		}else {
			this.isShowRulePop = false;
		this.isShowPop = false;
		this.isShowPrizePop = false;
		let html = document.getElementsByTagName('html')[0]
		html.className = '';
		}
		
		
		
	},
	//获取滚动条滚动
	scrollRuleEvent(e) {
			this.ruleScrollTransform = (e.srcElement.scrollLeft / ((e.srcElement.scrollWidth - e.srcElement.clientWidth) / (1 - 50 / 262.0))) * 100;
			// console.log(this.ruleScrollTransform,'scrollRuleEvent');
		},
	// 锚点
	jumpDraw(){
		if(this.openCardStatus == 2){
			this.openCar()
			return
		}
		const jump = document.querySelector('#industry')
		this.handleHref (jump)
	},
    handleHref (jump) {
      this.$nextTick(() => {
        
        // 获取需要滚动的距离
        const total = jump.offsetTop
        // 获取网页被卷去的高
        let distance = document.documentElement.scrollTop
        
        // 平滑滚动，时长200ms，每10ms一跳，共50跳
        let step = total / 20
 
        if (total >= distance) {
          smoothDown()
        } else {
          const newTotal = distance - total
          step = newTotal / 20
          smoothUp()
        }
        function smoothDown () {
          if (distance < total) {
            distance += step
            document.body.scrollTop = distance
            document.documentElement.scrollTop = distance
            window.pageYOffset = distance
            setTimeout(smoothDown, 10)
          } else {
            document.body.scrollTop = total
            document.documentElement.scrollTop = total
            window.pageYOffset = total
          }
        }
        function smoothUp () {
          if (distance > total) {
            distance -= step
            document.body.scrollTop = distance
            document.documentElement.scrollTop = distance
            window.pageYOffset = distance
            setTimeout(smoothUp, 10)
          } else {
            document.body.scrollTop = total
            document.documentElement.scrollTop = total
            window.pageYOffset = total
          }
        }
      })
    },
	//未开卡跳转
	openCar(){
		this.isShowPop = true
		this.popUpData = {
			openCard:true,
			title:'加入YSL会员\n即刻参与抽奖',
			img:'//img10.360buyimg.com/imgzone/jfs/t1/180421/28/31072/22238/63b3d76fFb800d843/4d4f07de0bd500a6.png',
			openCardBtn:true
		}	
		// this.popUpData = {
		// 	addressText:true,
		// }	
		let html = document.getElementsByTagName('html')[0]
		html.className = 'htmlBox'
				
		},
    oneRoll() {
      let index = this.current; // 当前转动到哪个位置
      const count = 8; // 总共有多少个位置
      index += 1;
      if (index > count - 1) {
        index = 0;
      }
      this.current = index;
    //   console.log("a" + this.current);
    },
	 // 开始转动
    startRoll(tope, hope) {
      this.times += 1; // 转动次数
      this.time += this.speed;
      this.oneRoll(); // 转动过程调用的每一次转动方法，这里是第一次调用初始化
      // 如果当前转动次数达到要求 && 目前转到的位置是中奖位置
    //    console.log(this.times,'this.times')
		if(this.times > this.cycle + 10&&this.prize === this.current ){
			this.drawStartStatus =false
			this.times = 0;
			 this.current = -1
			 this.speed = 100 
			 let html = document.getElementsByTagName('html')[0]
		    html.className = 'htmlBox'
		if (tope == "未中奖") {
          this.isShowPop = true
				this.popUpData = {
					losingLotteryPop:true,
				}
        } else {
			switch (tope){
              case 1:
				hope.level = '一等奖'
				break;
				 case 2:
				hope.level = '二等奖'
				break;
				 case 3:
				hope.level = '三等奖'
				break;
				 case 4:
				hope.level = '四等奖'
				break;
				 case 5:
				hope.level = '五等奖'
				break;
				 case 6:
				hope.level = '六等奖'
				break;
				 case 7:
				hope.level = '七等奖'
				break;
				 case 8:
				hope.level = '八等奖'
				break;
							
			}
			this.isShowPop = true
				this.popUpData = {
					prizePop:true,
					title:'恭喜您抽中了',
					prizeData:hope,
					pos:tope,
					addressStatus:true,
				}
			return
        }
			
		} else {
			if (this.times < this.cycle - 20) {
          this.speed -= 4; // 加快转动速度
        } else {
          this.speed += 10; // 抽奖即将结束，放慢转动速度
        }
		this.timer = setTimeout(() => {
          this.startRoll(tope, hope);
        }, this.speed); //开始转动
		}
    },
// 抽奖
	drawStart(){
		if(this.openCardStatus == 2){
			this.openCar()
			return
		}
		if(new Date().getTime() < this.startTime){
			return this.$toast('活动未开始')
		}
	   // 2月15日零点活动不能抽奖
		if(new Date().getTime() > 1676390400000){
			return this.$toast('活动已结束')
		}
		if(new Date().getTime() > this.endTime){
			return this.$toast('活动已结束')
		}
		if(this.drawStartStatus){
          return
		}
		this.drawStartStatus =true
		if(this.chance >0){
		// 	this.prize = 6
		// this.startRoll(6,this.prizeListData)
		let crowd = {
			crowd:this.crowd
		}
		draw(crowd,res =>{
			if(res.resp_code == 0){
				let param1 = {eleId:'draw',param:this.crowd +''};
					saveLog(param1, callbackData => {});
					
				this.chance = this.chance -1 
				if( res.data.pos == -1){
                 this.startRoll('未中奖')
				 this.prize = 4
				} else{
					sessionStorage.setItem('addressId',res.data.prize.addressId)
					this.prize = res.data.pos
				this.startRoll(res.data.pos,res.data.prize)

				}
	
				
			} else {
				this.$toast(res.resp_msg)
			}

		})
		} else {
			this.drawStartStatus = false
			this.$toast('当前没有抽奖机会了~')
		}
		
	},
	//做任务
	godoTsaks(taskId, item) {
			let param = {
				activityId: this.$route.query.activityId,
				taskId: taskId,
				param: null
			};
			task(param, responseData => {
					item.clickStatus = false
				if (responseData.resp_code == 0) {
					this.queryData();
				}else{
					this.$toast(responseData.resp_msg);
				}
			});
	},
	// 做任务
	taskClick(taskId,item){
		if(new Date().getTime() < this.startTime){
			return this.$toast('活动未开始')
		}
		if(new Date().getTime() > 1676390400000){
			return this.$toast('活动已结束')
		}
		if(new Date().getTime() > this.endTime){
			return this.$toast('活动已结束')
		}
		if(this.openCardStatus == 2){
			this.openCar()
			return
		}
		
		console.log(taskId,'taskIdtaskId')
		window.taskCallback = null;
		switch (taskId){
			case 'share2help':
				if(item.clickStatus){return}
				item.clickStatus = true
				sessionStorage.setItem('uid',this.uid);
				yslDzallShare(this.uid, callBackData => {
					item.clickStatus = false
			    });
				let param ={eleId:'share',param:'2'}
				    saveLog(param, callbackData => {});
				break;
			case 'sign':
				if(item.clickStatus){return}
				item.clickStatus = true
				this.godoTsaks(item.taskId, item);
				break;
			case 'order2':
				window.location.href ='https://pro.m.jd.com/mall/active/VdEqt1D7vxZiKYFasc5cxv1H1xj/index.html'
				break;
			case 'evaluate':
				window.location.href ='https://trade.m.jd.com/order/orderlist_jdm.shtml'
				// goToOpenCard('https://trade.m.jd.com/order/orderlist_jdm.shtml');
				break;
			case 'browseShop':
				if (item.curNum >= item.maxNeed) return (window.location.href = item.params);
				let time1 = new Date().getTime();
				window.taskCallback = () => {
					const newTime = new Date().getTime();
					const downTime = newTime - time1 > 10000;
					if (downTime) {
						localStorage.setItem('doTask', JSON.stringify({ taskId: item.taskId, time: time1 }));
						this.checkTask();
						// this.godoTsaks(item.taskId, item);
					} else {
						// console.log('观看直播未到10s')
						toastPopComService.create('浏览店铺未到10s', submit => {
					toastPopComService.close();
				   });
						// Toast('观看直播未到20s');
						// localStorage.setItem('doTask', JSON.stringify({ taskId: item.taskId, time: time1 }));
					}
				};
				localStorage.setItem('doTask', JSON.stringify({ taskId: item.taskId, time: time1 }));
				goToShopPage(store.state.shopId);
				
				// window.location.href ='https://shop.m.jd.com/?shopId=1000396688'
				break;
			case 'followshop':
				if(item.clickStatus){return}
				item.clickStatus = true
				this.godoTsaks(item.taskId, item);
				break;
			case 'scanlive':
				if (item.curNum >= item.maxNeed) return (window.location.href = item.params);
				let oldtime = new Date().getTime();
				window.taskCallback = () => {
					const newTime = new Date().getTime();
					const downTime = newTime - oldtime > 10000;
					if (downTime) {
						localStorage.setItem('doTask', JSON.stringify({ taskId: item.taskId, time: oldtime }));
						console.log('观看直播超出10秒1')
						// this.godoTsaks(item.taskId, item);
						this.checkTask();
					} else {
						console.log('观看直播未到10s')
						toastPopComService.create('观看直播未到10s', submit => {
					toastPopComService.close();
				   });

					}
				};
				localStorage.setItem('doTask', JSON.stringify({ taskId: item.taskId, time: oldtime }));
				// window.location.href = item.params;
				window.location.href ='https://lives.jd.com/#/author?authorId=9610945'
				break;
			case 'browseProduct':
				if (item.curNum >= item.maxNeed) return (window.location.href = item.params);
				let otime = new Date().getTime();
				window.taskCallback = () => {
					const newTime = new Date().getTime();
					const downTime = newTime - otime > 15000;
					if (downTime) {
						localStorage.setItem('doTask', JSON.stringify({ taskId: item.taskId, time: otime }));
						this.checkTask();
						// this.godoTsaks(item.taskId, item);
					} else {
						toastPopComService.create('浏览宝贝未到15s', submit => {
					toastPopComService.close();
				   });

					}
				};
				localStorage.setItem('doTask', JSON.stringify({ taskId: item.taskId, time: otime }));
				
				window.location.href ='https://pro.m.jd.com/mall/active/VdEqt1D7vxZiKYFasc5cxv1H1xj/index.html'
				break;
				case 'firstBuy':
					window.location.href ='https://lorealjdcampaign-rc.isvjcloud.com/rights/mobile/index.html#/firstPurchase?activityId=ID-COMMON-2023-01-30-065f7042939a4b86b6b8b71ed52af7ff&type=352&tplId=t230130195308003161'
					// goToShopPage(store.state.shopId);
					this.godoTsaks(item.taskId, item);
				break;
		}
	},
	// 到店铺首页
	toHome(type){
		if(type == 1){
			// window.location.href ='https://shop.m.jd.com/?shopId=1000396688'
         	goToShopPage(store.state.shopId);
		} else {
			let param1 = {
				eleId:'fuli'
			}
			 saveLog(param1, callbackData => {});
			// goToOpenCard(this.openCardUrl);
			window.location.href ='https://prodev.m.jd.com/mall/active/3xUXvTJhu3Gm137ox2DqpBLd6dUB/index.html'
		}
       
	},
	jump(item){
		console.log(item.skuId,'item.skuId')
		let param1 = {
				eleId:'product',
				param:item.skuId + ''
			}
			 saveLog(param1, callbackData => {});
		window.location.href = item.url;
	}
	}
};
</script>
<style lang="scss" >
.htmlBox{
	overflow: hidden;
	height: 100vh;
}
.por{
	position: relative;
}
.yslDrawBg{
	width: 100%;
	background-color: #000;
	background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/180979/23/30879/335085/63ad018fF3f913b73/5ee755034076958a.png);
	background-repeat: no-repeat;
	background-position: 0 0.97rem;
    background-size: 100%;
	padding-bottom: 1rem;

.h100vh{
	height: 100vh;
	position: relative;
}
.drawBox{
	width: 6.78rem;
	height: 6.33rem;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	position: relative;
}
.drawBoxInner{
	position: absolute;
	width: 2.26rem;
	height: 2.11rem;
	// background: url(https://img10.360buyimg.com/imgzone/jfs/t1/183016/34/25832/1718/6295d6bbE59a41d8b/83afda276ce6c47d.png) no-repeat;
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.drawInner1{
	position: absolute;
    top: 0;
	left: 0;
	 background: rgba(0,0,0,.4);
	  height: 2.11rem;
	  width: 2.26rem;
}
.drawBoxInner1{
	top: 0;
	left: 0;
	background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/198182/4/30660/21811/63ae7e27Fff97a5c4/e929a44933c27fc1.jpg) ;

}
.drawInner2{
	position: absolute;
    top: 0;
	left: 2.26rem;
	 background: rgba(0,0,0,.4);
	  height: 2.11rem;
	  width: 2.26rem;
}
.drawBoxInner2{
	top: 0;
	left: 2.26rem;
	background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/62031/33/22969/21261/63ae7e27F70167fb8/1ab52668a4966f51.jpg);

}
.drawInner3{
	position: absolute;
   top: 0;
	right: 0;
	 background: rgba(0,0,0,.4);
	  height: 2.11rem;
	  width: 2.26rem;
}
.drawBoxInner3{
	top: 0;
	right: 0;
	background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/4853/13/16887/17632/63ae7e27F89420d55/cde4f924e777ee9f.jpg);
}
.drawInner4{
	position: absolute;
   top: 2.11rem;
	left: 0;
	 background: rgba(0,0,0,.4);
	  height: 2.11rem;
	  width: 2.26rem;
}
.drawBoxInner4{
	top: 2.11rem;
	left: 0;
	background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/175347/33/32924/21094/63ae7e27F0c83c670/069e99339f278522.jpg);

}
.drawInner5{
	position: absolute;
   top: 2.11rem;
	right: 0;
	 background: rgba(0,0,0,.4);
	  height: 2.11rem;
	  width: 2.26rem;
}
.drawBoxInner5{
	top: 2.11rem;
	right: 0;
	background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/97699/36/33649/10894/63ae7e27Fca736156/de08b2c9c772d8d8.jpg);

}
.drawBoxInner6{
	bottom: 0;
	left:  0;
	background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/188999/30/31355/18726/63ae7e27F11a948d6/b551c2a288886aec.jpg);

}
.drawInner6{
	position: absolute;
   bottom: 0;
	left:  0;
	 background: rgba(0,0,0,.4);
	  height: 2.11rem;
	  width: 2.26rem;
}
.drawInner7{
	position: absolute;
   bottom: 0;
	left: 2.26rem;
	 background: rgba(0,0,0,.4);
	  height: 2.11rem;
	  width: 2.26rem;
}
.drawBoxInner7{
	bottom: 0;
	left: 2.26rem;
	background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/156074/39/33920/13205/63ae7e27F6eee4525/6e9989e2552e5eb6.jpg);
}
.drawBoxInner8{
	bottom: 0;
	right: 0;
	background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/184515/12/30862/7196/63ae7e27Fc57a22eb/16d31e7a372d1d42.jpg);

}
.drawInner8{
	position: absolute;
  bottom: 0;
	right: 0;
	 background: rgba(0,0,0,.4);
	  height: 2.11rem;
	  width: 2.26rem;
}
.drawStart{
	position: absolute;
	top: 2.11rem;
	left: 2.26rem;
	width: 2.26rem;
	height: 2.11rem;
	background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/55420/11/22695/10142/63ae7e27Fcaa0c587/df5fec5a1db92b4e.jpg);
    background-repeat: no-repeat;
    background-size: 100%;

}
.mask{
	position: absolute;
      background: rgba(0,0,0,.4);
	  height: 2.11rem;
	  width: 2.26rem;
	  background-repeat: no-repeat;
    background-size: 100% 100%;
}
.drawBtn{
	position: absolute;
	top: 3.08rem;
	left: calc(50% - 4.84rem/2);
	width: 4.84rem;
	height: 0.6rem;
	background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/80208/4/23520/5244/63ad018cF24a54820/adb89774975de11e.png);
	background-repeat: no-repeat;
    background-size: 100%;
}
.yslRules{
	position: absolute;
	right: 0;
	top: 3.37rem;
	width: .33rem;
	height: 1.75rem;
	background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/216940/34/19878/2863/63ad018cF5f0d8b58/c943dcc40cd46609.png);
	 background-repeat: no-repeat;
    background-size: 100%;
}
.yslPrizeName{
	position: absolute;
	bottom: .3rem;
	left:calc(50% - 6.7rem/2);
	width: 6.7rem;
	height: 2.32rem;
	background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/96730/11/36103/58959/63ad018dFc1475a24/f48183a68c0b6279.png);
	background-repeat: no-repeat;
    background-size: 100%;
	padding-top: .6rem;
	padding-bottom: .2rem;
	overflow: hidden;

}
.yslName1{
	margin: 0 auto;
	width: 1.73rem;
	height: .43rem;
    background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/218887/37/25038/2527/63ad0c80F6117e4a2/259725dc2cd6dd9f.png);
	background-repeat: no-repeat;
    background-size: 100%;
}
.yslMyprize{
	position: absolute;
	right: 0;
	top: .73rem;
	width: 1.68rem;
	height: 0.37rem;
	background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/50214/15/21190/3427/63ad0c80Fbded7ca9/1e8bc3c7a4247c65.png);
	background-repeat: no-repeat;
    background-size: 100%;
}
.p-top-7{
	padding-top: 0.7rem;
}
.yslPrizeBox{
	padding: .47rem .4rem;
}
.yslPrizeOne{
	width: 6.7rem;
	height: 5.71rem;
	margin-bottom: 0.44rem;
}
.yslPrizeListBox{
	width: 100%;
	height: 2.32rem;
	background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/161388/25/33651/82886/63ad0c82Fc82fa6fe/8507606427175001.png);
	background-repeat: no-repeat;
    background-size: 100% 100%;
	padding: .18rem .26rem .16rem;
	position: relative;
	overflow-x: scroll;
	overflow-y: hidden;

}
.yslPrizeListBox::-webkit-scrollbar { display: none }
.yslPrizeList{
	// width: 1.50rem;
	height: 100%;
	img{
		width: auto;
    height: 100%;
	max-width:inherit;
	margin-right: 0.4rem;
	}
}
.yslPrizeListInner{
	height: 100%;
    // display: inline-flex;
	// align-items: start;
	// justify-content: start;
}
.yslPrizeOneInner{
	width: 100%;
	position: relative;
	height: 5.71rem;
	overflow: hidden;
	border-radius:.3rem ;
	img{
		width: 100%;
	}
	.yslPrizeOneInnerText{
		position: absolute;
		width: 100%;
		text-align: center;
		left: 0;
		top: .3rem;
		font-weight: 400;
        color: #FFFFFF;

	}
	.yslPrizeOneText{
		font-size: .45rem;
       font-family: HYb1gj;
	   line-height: .61rem;

	}
	.yslPrizeOneName{
		font-size: .27rem;
       font-family: Singulier;
      font-weight: 300;
	  line-height: .39rem;
	}

}
	.yslPrizeListImg{
		height: 1.05rem;
		display: block;
		margin: 0 auto;
		margin-bottom: 0.12rem;
	}
	.yslPrizeListLevel{
		font-size: .33rem;
		margin-bottom: 0.15rem;
		font-family: HYb1gj;
		font-weight: 400;
		color: #FFFFFF;
		text-shadow: .01rem .01rem .02rem rgba(0,0,0,0.3);
	}
	.yslPrizeListName{
		font-size: .16rem;
		font-family: HYg2gj;
		font-weight: 400;
		color: #FFFFFF;
		text-shadow: .01rem .01rem .02rem rgba(0,0,0,0.3);
	}
	.p-top-43{
		padding-top: 0.43rem;
		margin: 0 auto;
        width: 3rem;
	}
		.__rule_pops_scroll_line {
			margin: 0 auto;
			// margin-top: .43rem;
					background-color: #ececec;
					border-radius: 0.03rem;
					width: 3rem;
					height: 0.06rem;

				}
				.__rule_pops_scroll_line > div {
					width:1rem;
					border-radius: 0.03rem;
					height: 100%;
					background-color: #CEA86A;
					// left: 0;
}
.yslName2{
	width: 2.19rem;
	height: .43rem;
	margin: 0 auto;
	margin-bottom: 0.16rem;
    background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/112622/12/31353/2730/63ad0c80F177e173e/90c6c3d6023d0859.png);
	background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p-bottom-5{
	padding-bottom: 0.5rem;
}
.p-top-5{
	padding-top: .5rem;
}
.yslNameChance{
	font-size: .24rem;
font-family: HYg2gj;
font-weight: 400;
color: #FFFFFF;
text-align: center;
margin-bottom: .43rem;
}
.yslName3{
	width: 3.56rem;
	height: .44rem;
	margin: 0 auto;
	margin-bottom: 0.43rem;
    background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/72024/19/23479/5159/63ad0c80Fdfb35484/80856af6044ab017.png);
	background-repeat: no-repeat;
    background-size: 100% ; 
}
.yslTaskBox{
	width: 6.7rem;
	margin: 0 auto;
	margin-bottom: 0.22rem;
	height: auto;
	background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/158941/27/33511/316556/63ae880aF650dfbd3/64397fca6c14bc99.png);
	background-repeat: no-repeat;
    background-size: 100% 100%; 
	padding: .36rem .22rem .2rem 0;
	border-radius: .2rem;
	overflow: hidden;
}
.yslTaskInner{
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	margin-bottom: .4rem;
}
.yslTaskLeft{
	display: flex;
	align-items: center;
	justify-content: left;
}
.yslTaskIcon{
	width: 1.12rem;
	img{
		display: block;
		height: .6rem;
		margin: 0 auto;
	}
}
.yslTaskIcon1{
height: .48rem !important;
}
.yslTaskText{
	text-align: left;
	width: 3.7rem;
	color: #FFFFFF;
	text-shadow: 0.01rem 0.01rem 0.02rem rgba(0,0,0,.3);
}
.yslTaskName{
	font-size: .38rem;
	font-family: Singulier;
    font-weight: 300;
    color: #FFFFFF;
}
.yslTaskWord{
	font-size: .16rem;
font-family: HYg2gj;
font-weight: 300;
 color: #FFFFFF;
}
.yslChance{
	width: 6.7rem;
	margin: 0 auto;
	img{
		width: 100%;
		display: block;
	}
}
.yslChanceBtn{
	position: absolute;
	bottom: .68rem;
	right: .58rem;
	width: 2.58rem;
	height: .42rem;
	background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/170337/35/33610/2978/63ae9c46F8a3a3842/838ba7371a30d51e.png);
	background-repeat: no-repeat;
    background-size: 100% ; 

}
.yslTaskBtn{
	width: 1.52rem;
	height: .4rem;
	background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/38358/26/19962/1621/63ae9c46Fff4da22c/1a1983c94a66327f.png);
	background-repeat: no-repeat;
    background-size: 100% ; 
}
.yslTaskBtn1{
	width: 1.52rem;
	height: .4rem;
	background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/97929/26/17415/1521/63ae9e8aF6469f717/7ae488ad45be7493.png);
	background-repeat: no-repeat;
    background-size: 100% ; 
}
.yslTaskBtn2{
	width: 1.52rem;
	height: .4rem;
	background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/30810/2/20918/1698/63b3919cF03c47988/a3a0cc6f5dc4223c.png);
	background-repeat: no-repeat;
    background-size: 100% ; 
}
.yslTaskBtn3{
	width: 1.52rem;
	height: .4rem;
	background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/146749/27/32861/1671/63ae9c46F95c993ef/519fe84fd4243b1a.png);
	background-repeat: no-repeat;
    background-size: 100% ; 
}
.yslTaskBtn4{
	width: 1.52rem;
	height: .4rem;
	background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/188645/5/31649/1531/63ae9c46F4c08dd5d/a2cfa3c51f889ac3.png);
	background-repeat: no-repeat;
    background-size: 100% ; 
}
.yslTaskBtn5{
	width: 1.52rem;
	height: .4rem;
	background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/191373/39/32329/1422/63ae9c46F3489270e/51fc21793124ba34.png);
	background-repeat: no-repeat;
    background-size: 100% ; 
}
.yslTaskBtn6{
	width: 1.52rem;
	height: .4rem;
	background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/101993/36/35848/1534/63ae9c46Fb7dca119/de9a63132b2d7d9e.png);
	background-repeat: no-repeat;
    background-size: 100% ; 
}
.yslPrizeWord{
	text-align: center;
	font-size: .24rem;
font-family: HYg2gj;
font-weight: 400;
color: #FFFFFF;
line-height: .42rem;
}
.yslPrizeNameInner{
	height: calc(100% - .45rem);
	overflow: hidden;
}
.yslTaskHeadImg{
	width: .34rem;
     height: .34rem;
border-radius: 50%;
margin-top: .1rem;

}
.yslRemark{
	width: 4.97rem;
	// height: 1.61rem;
	margin: 0 auto;
	margin-bottom: .41rem;
	// background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/185010/39/32337/24162/63b39e55Ff161e7a5/0fbd608574bb93d5.png);
	background-repeat: no-repeat;
    background-size: 100% ; 
	img{
		width: 100%;
		display: block;
	}
}
.yslToHome{
	width: 4.95rem;
	height: .6rem;
	margin: 0 auto;
	background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/143710/5/32515/5697/63b39e55F15596b9e/f41e707438dc4412.png);
	background-repeat: no-repeat;
    background-size: 100% ;
	margin-bottom: 0.43rem; 
}
.yalBottomLogo{
	width: 3.92rem;
	margin:0 auto ;
	margin-top: 0.97rem;
	img{
		width: 100%;
		display: block;
	}	
}
.yslName4{
	width: 1.77rem;
	height: .44rem;
	margin:0 auto ;
	margin-bottom: 0.43rem;
    background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/36903/39/19783/2780/63b3a185F36e6a234/92273df01d21bf25.png);
	background-repeat: no-repeat;
    background-size: 100% ; 	
}
.p-top-10{
	padding-top: 1rem;
}
.yslProductBtn{
	width: 1.41rem;
	height: 0.42rem;
	margin:0 auto ;
	background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/141722/16/32502/1542/63b3a40cFf04ce5e6/c6b50cabec0298d3.png);
	background-repeat: no-repeat;
    background-size: 100% ; 	
}
.yslProductBox{
	position: relative;
	width: 6.7rem;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: left;


}
.yslProduct{
	width:calc(50% - .1rem);
	margin-right: .2rem;
	border-radius: .2rem;
	margin-bottom: 0.43rem;
	overflow: hidden;
	position: relative;
	height: 4.9rem;
	
	&:nth-child(2n){
		margin-right: 0;
	}
	.yslProductImg{
		height: 100%;
		width: auto;
	    display: block;
	}
	.yslProductText{
		position: absolute;
		bottom: .13rem;
		left: 0;
		width: 100%;
		text-align: center;
	}
	.yslProductName{
		font-family: Singulier;
		font-weight: 300;
		color: #FFFFFF;
		font-size: .3rem;
	}
	.yslProductWord{
		font-family: HYg2gj;
		font-weight: 400;
		color: #FFFFFF;
		font-size: .23rem	;
	}
}
.yslTaskAccomplishBtn{
	height: 0.4rem;
	img{
		height: 100%;
		display: block;
	}
}
.yslPrizeNameText{
	text-align: center;
	width: 100%;
	height: 100%;
	vertical-align: middle;
	color: #fff;
	text-shadow: 0.01rem 0.01rem 0.02rem rgba(0,0,0,.3);
	font-size: .3rem;
	display: flex;
	justify-content: center;
    align-items: center;
}
.yslPrizeNameText1{
	text-align: center;
	width: 100%;
	vertical-align: middle;
	color: #fff;
	text-shadow: 0.01rem 0.01rem 0.02rem rgba(0,0,0,.3);
	font-size: .3rem;
	display: flex;
	justify-content: center;
    align-items: center;
}
.yslPrizeListShow{
height: 100%;
img{
	height: 100%;
	display: block;
}
}
}
.yslTaskTextImg{
	position: relative;
}
.yslTaskTitleFlex{
	display: flex;
	align-items: center;
	margin-bottom: 0.1rem;
}
.taskTitleImg{
height: 0.38rem;
display: block;
max-width:initial;
width: auto;
}
.yslTaskTextNum{
	margin-left: 0.14rem;
}
.taskTextImg{
	height: 0.44rem;
	display: block;
max-width:initial;
width: auto;
}
</style>
