3120 lines
82 KiB
Vue
3120 lines
82 KiB
Vue
<template>
|
||
<view class="new-index-page">
|
||
|
||
<view class="free-main">
|
||
<view class="free" @click="freeCk">免费试玩</view>
|
||
</view>
|
||
<!-- 背景头部 -->
|
||
<image src="@/static/home/zm.gif" mode="aspectFit" class="top-zm-icon"></image>
|
||
<image src="@/static/home/top.png" mode="aspectFit" class="top-img"></image>
|
||
<view class="home-main">
|
||
<view class="home-header">
|
||
<view class="header-activity">
|
||
<!-- <view class="header-activity-item coupon">
|
||
<view class="activity-dian" v-if="isCouponRed"></view>
|
||
天天领劵
|
||
</view>
|
||
<view class="header-activity-item card">
|
||
<view class="activity-dian" v-if="isCardRed"></view>
|
||
卡包
|
||
</view>
|
||
<view class="header-activity-item wechat">
|
||
<view class="activity-dian" v-if="isWechatRed"></view>
|
||
微信福利
|
||
</view> -->
|
||
<view class="header-activity-item task" @click="signCk">
|
||
<!-- <view class="activity-dian" v-if="isTaskRed"></view> -->
|
||
<image src="@/static/home/7.png" mode="aspectFit" class="activity-dian" v-if="isTaskRed"></image>
|
||
<image src="@/static/home/qd.gif" mode="aspectFit" style="width: 107rpx;height: 109rpx;" class=""></image>
|
||
<!-- <image src="@/static/home/rw.gif" mode="aspectFit" style="width: 107rpx;height: 109rpx;" class=""></image> -->
|
||
</view>
|
||
<!-- <view class="header-activity-item task">
|
||
<view class="activity-dian" v-if="isTaskRed"></view>
|
||
<image src="@/static/activity-icon/yhxy.png" mode="aspectFit" style="width: 109rpx;height: 109rpx;" class=""></image>
|
||
</view> -->
|
||
|
||
<!-- <view class="header-activity-item task" @click="signCk">
|
||
<view class="activity-dian" v-if="isTaskRed"></view>
|
||
任务签到
|
||
</view> -->
|
||
</view>
|
||
<view class="header-rule">
|
||
<view class="rule-item" @click="rule">
|
||
玩法
|
||
</view>
|
||
<!-- <a :href="customer" class="rule-item" target="_blank">客服</a> -->
|
||
<!-- <web-view :src="customer" v-if="isCustomerPath" style="position: fixed;top: -1000rpx;"></web-view> -->
|
||
<view class="rule-item" @click="handleCustomer">客服</view>
|
||
|
||
<view class="rule-item" @click="goAgreement">
|
||
协议
|
||
<image src="@/static/home/7.png" mode="aspectFit" class="dian" v-if="isAgreementRed"></image>
|
||
</view>
|
||
<!-- <image src="@/static/activity-icon/yhxy.png" mode="" style="width: 64rpx;height: 64rpx;margin-left: 11rpx;" @click="goAgreement"></image> -->
|
||
<!-- <view class="rule-item rotate-music">
|
||
<image src="@/static/home/music.png" mode="" class="music"></image>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
<!-- <view class="rank" @click="rankingCk">
|
||
<view class="rank-item">
|
||
积分排行
|
||
<image src="@/static/home/7.png" mode="aspectFit" class="activity-dian" v-if="isRankRed"></image>
|
||
</view>
|
||
</view> -->
|
||
|
||
<image src="@/static/home/z.png" mode="" class="left-icon" @click="changeSwiper('left')"></image>
|
||
<image src="@/static/home/y.png" mode="" class="right-icon" @click="changeSwiper('right')"></image>
|
||
|
||
|
||
|
||
<!-- <view class="prize">
|
||
<view class="prize-item">
|
||
<view class="item-content">
|
||
<view class="shop-icon" style="background-image: url(@/static/mine/g.png);"></view>
|
||
</view>
|
||
<view class="item-txt">金色大狗开出了耳机 | 3分钟前</view>
|
||
</view>
|
||
</view> -->
|
||
<!-- 中奖播报 -->
|
||
<view class="prize" v-if="boxResultList.length > 0">
|
||
<view class="prize-item">
|
||
<swiper vertical="true" class="trumpet-swiper" circular autoplay disable-touch>
|
||
<swiper-item class="trumpet-swiper-item" v-for="(item,index) in boxResultList" :key="index" @click="prizeCk(item)">
|
||
<view class="item-txt">
|
||
{{item.nickName}}开启<text style="color: red;">{{item.boxName}}</text>得到了<text style="color: yellow;">{{item.productName}}</text>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- <view class="trumpet">
|
||
<image src="@/static/zy/index/trumpet.png" mode="aspectFit" class="trumpet-icon"></image>
|
||
<swiper vertical="true" class="trumpet-swiper" circular autoplay disable-touch>
|
||
<swiper-item class="trumpet-swiper-item" v-for="(item,index) in boxResultList" :key="index">
|
||
<view class="trumpet-txt">{{item}}</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view> -->
|
||
|
||
|
||
|
||
|
||
|
||
<view class="box-main">
|
||
<image src="@/static/home/bj.gif" mode="aspectFit" class="jt-icon"></image>
|
||
<swiper class="swiper" circular :current="current" @change="swiperChange" :autoplay="autoplay" :interval="interval">
|
||
<swiper-item class="swiper-items" v-for="(item,index) in list" :key="index" @click="goDetail(item)">
|
||
<!-- 气泡 -->
|
||
<view style="position: absolute;top: 0;width: 100%;height: 100%;top: 10%;z-index: 11;">
|
||
<bubbleCom></bubbleCom>
|
||
</view>
|
||
<view class="swiper-img-view">
|
||
<template v-if="item.coverResource">
|
||
<image v-if="item.coverResource" :src="item.coverResource.url"
|
||
mode="aspectFit" class="swiper-img"></image>
|
||
</template>
|
||
</view>
|
||
|
||
<!-- <view class="seal" v-if="list.length > 0">
|
||
<view class="seal-txt">
|
||
<view v-if="item.itemFirst">{{gradeObj[item.itemFirst.grade]}}</view>
|
||
<template v-if="item.itemFirst">
|
||
<view class="seal-num" v-if="Number(item.itemFirst.curStock) == -1">无限量</view>
|
||
<view class="seal-num" v-else>剩{{Number(item.itemFirst.curStock) || 0}}件</view>
|
||
</template>
|
||
|
||
</view>
|
||
</view> -->
|
||
|
||
|
||
</swiper-item>
|
||
</swiper>
|
||
<view class="look" @click="goDetail(list[current])">
|
||
<image src="@/static/home/shou.png" mode="" class="look-img"></image>
|
||
<view class="look-txt">查看宝贝</view>
|
||
</view>
|
||
<!-- 新手引导 -->
|
||
<!-- <image src="@/static/guidance-index/xsyd.png" mode="aspectFit" class="guidance-icon" @click="guidanceOpen"></image> -->
|
||
<view class="footer-tai">
|
||
<!-- <template v-for="(item,index) in list[current].price">
|
||
<text class="price" v-if="item.type === 'SINGLE'" :key="index">{{item.settlement || '/'}}</text>
|
||
</template> -->
|
||
<template v-if="list.length > 0 && list[current]">
|
||
<template v-for="(item,index) in list[current].price">
|
||
<view class="box-price" v-if="item.type === 'SINGLE'" :key="index">
|
||
<text class="price-last">¥</text>
|
||
{{Number(item.settlement)}}
|
||
<text class="price-last">元/个</text>
|
||
</view>
|
||
</template>
|
||
</template>
|
||
</view>
|
||
|
||
<view class="footer">
|
||
<swiper class="footer-swiper" previous-margin="277rpx" next-margin='277rpx' circular
|
||
:current="current" @change="swiperChange">
|
||
<swiper-item class="footer-swiper-item" v-for="(item,index) in list" :key="index"
|
||
@click="swiperCk(index)">
|
||
<view class="swiper-tai active-box" v-if="current === index">
|
||
<image src="@/static/home/box-s-h.png" mode="" class="box-s-h"></image>
|
||
<image src="@/static/home/box-s-t.png" mode="" class="box-s-t"></image>
|
||
<view class="swiper-name-active">{{item.name}}</view>
|
||
</view>
|
||
<view class="swiper-tai" v-else>
|
||
<image src="@/static/home/box-h.png" mode="" class="box-h"></image>
|
||
<image src="@/static/home/box-t.png" mode="" class="box-t"></image>
|
||
<view class="swiper-name">{{item.name}}</view>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
<view class="footer-btn">
|
||
<!-- <view class="footer-activity"><view>更多</view><view style="margin-top: -16rpx;">活动</view></view> -->
|
||
<!-- <view class="footer-activity"><view>更多</view><view style="margin-top: -16rpx;">活动</view></view> -->
|
||
<image src="@/static/home/gdhd.gif" class="footer-activity-gif" mode="aspectFit" @click="lookMore"></image>
|
||
<image src="@/static/home/7.png" mode="aspectFit" class="dian" v-if="isMoreRed"></image>
|
||
<!-- <view class="footer-open" @click="buy">立即开启</view> -->
|
||
<image src="@/static/home/ljkqq.gif" class="footer-open-gif" mode="aspectFit" @click="buy"></image>
|
||
<!-- <view class="footer-open" @click="buy">立即开启</view> -->
|
||
</view>
|
||
<view class="footer-txt">谢绝未成年人使用或在监护人的监督下使用</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
<!-- v-if="activityDetail" -->
|
||
<!-- 右侧浮窗 -->
|
||
<floatWindow :isClick="guidanceFloatWindow" :zIndex="zIndex" :activityObj="activityObj" :list="boxActivityLeftList" :consumptionTime="activityDetail.expireTime" :source="activityDetail.source" :isConsumption="activityDetail.source === 'PREFERENTIAL_DAY'" :isDiscounts="activityDetail.source === 'ROOKIE'" :icon='lastTopObj.icon.coverResource.url' @handleActivityTopLast='handleActivityTopLastFn' @click="floatCk"></floatWindow>
|
||
|
||
|
||
<!-- 活动盲盒弹窗 && !guidanceVisible -->
|
||
<!-- & !cellVisible -->
|
||
<view class="dlg" v-if="activityShow">
|
||
<template v-for="(item,index) in boxActivityList">
|
||
<template v-if="activityShow && item.visible">
|
||
<view class="activity-main" :key="index">
|
||
<template v-if="item.img">
|
||
<image v-if="item.img.coverResource" :src="item.img.coverResource.url" mode="aspectFit" class="activity-img" @click="goActivityDetail(item)"></image>
|
||
</template>
|
||
<image v-if="item.button.coverResource" :src="item.button.coverResource.url" @click="goActivityPre(item)" class="now-buy" mode=""></image>
|
||
<image src="@/static/order/close.png" mode="" class="dlg-close-img" @click="activityClose(index)"></image>
|
||
</view>
|
||
</template>
|
||
</template>
|
||
</view>
|
||
<!-- 点击打开活动盲盒弹窗 -->
|
||
<view class="dlg" v-if="activityClickShow">
|
||
<template v-for="(item,index) in boxActivityLeftList">
|
||
<template v-if="activityClickShow && item.visible">
|
||
<view class="activity-main" :key="index">
|
||
<template v-if="item.img">
|
||
<image v-if="item.img.coverResource" :src="item.img.coverResource.url" mode="aspectFit" class="activity-img" @click="goActivityDetail(item)"></image>
|
||
</template>
|
||
<image v-if="item.button.coverResource" :src="item.button.coverResource.url" @click="goActivityPre(item)" class="now-buy" mode=""></image>
|
||
<image src="@/static/order/close.png" mode="" class="dlg-close-img" @click="activityClickShow = false"></image>
|
||
</view>
|
||
</template>
|
||
</template>
|
||
</view>
|
||
<!-- 免费试玩 -->
|
||
<popup-view v-model="freeVisible" mode="bottom" border-radius="15" z-index="1000" :maskCloseAble="false" closeable>
|
||
<BuyFreeBoxCom :detailData="freeDetail" @isOk="freeVisible = false" :boxType="boxType" @coinDeficit="coinDeficit" :payNum="payNum"></BuyFreeBoxCom>
|
||
</popup-view>
|
||
<popup-view v-model="show" mode="bottom" border-radius="15" z-index="1000" :maskCloseAble="false" closeable>
|
||
<BuyBoxCom :detailData="detailData" @payStatus="payStatus" @isOk="buySuccess" :boxType="boxType" @coinDeficit="coinDeficit" :isActivityClick="isActivityClick"
|
||
@payPaid="payPaid" :payNum="payNum" :typeNum="typeNum"></BuyBoxCom>
|
||
</popup-view>
|
||
<!-- 活动购买 -->
|
||
<popup-view v-model="showActivity" mode="bottom" border-radius="45" z-index="1000" backgroundColor="transparent !important">
|
||
<BuyActivityBox :detailData="activeDetail" @isOk="buySuccess" @payStatus="payStatus" :boxType="boxType" @coinDeficit="coinDeficit" :isActivityClick="isActivityClick"
|
||
@payPaid="payPaid" :payNum="payNum" @close="showActivity = false"></BuyActivityBox>
|
||
</popup-view>
|
||
<template v-if="isPayDlgVisible">
|
||
<isPayDlgVue @isOk="isPayStatus" @isCancel="isCancelCk" v-if="isPayDlgVisible" @againPay="againPay"></isPayDlgVue>
|
||
</template>
|
||
|
||
<!-- 去充值 -->
|
||
<popup-view v-model="isTopUp" mode="bottom" border-radius="15" z-index="1000" :maskCloseAble="false"
|
||
:closeable="true" @input="coinDeficitComClose">
|
||
<coinDeficitCom @close="closeTop" @sucClose="sucClose" :close='isClose'></coinDeficitCom>
|
||
</popup-view>
|
||
<NoOpenCom></NoOpenCom>
|
||
<view class="custom-toast" v-if="isTip">
|
||
<view class="toast-txt">支付成功</view>
|
||
</view>
|
||
|
||
<popup-view v-model="isPayTip" mode="center" border-radius="15" z-index="1000">
|
||
<view class="log-out">
|
||
<view class="log-out-tip">您今日在本商城的消费已达到1000元。为了确保您的消费安全，请确认是否继续购买。</view>
|
||
<view class="log-out-footer">
|
||
<view class="cancel" @click="closePay">取消支付</view>
|
||
<view class="shu"></view>
|
||
<view class="log-out-submit" @click="submitPay">确定支付</view>
|
||
</view>
|
||
</view>
|
||
</popup-view>
|
||
<!-- 签到 -->
|
||
<view class="dlg" v-if="isSign" @click.stop="closeSign">
|
||
<SignCom @signOk="signOkFn" @close="closeSign"></SignCom>
|
||
</view>
|
||
<!-- 所有页面的弹框 && !guidanceVisible -->
|
||
<!-- v-if="!activityShow" -->
|
||
<page-popup page="/pages/index/new-index" @click="getPopupMore"></page-popup>
|
||
<!-- 更多活动弹窗 && !guidanceVisible -->
|
||
<view class="dlg" v-if="moreVisible" @click.stop="moreVisible = false">
|
||
<view class="more-bg" @click.stop="">
|
||
<view class="more-header">
|
||
<image src="@/static/home/gdhd-title.png" mode="aspectFit" class="more-title"></image>
|
||
<image src="@/static/home/gdhd-close.png" mode="aspectFit" class="more-close" @click="moreVisible = false"></image>
|
||
</view>
|
||
<scroll-view scroll-y="true" class="more-content">
|
||
<view class="more-item" v-for="(item,index) in moreList" :key="index" :style="{backgroundImage:`url(${item.img.coverResource.url})`}" @click="moreCk(item)">
|
||
<!-- <view class="more-item-title">
|
||
<view class="titles">{{item.title}}</view>
|
||
<image src="@/static/new/mine/back.png" class="title-imgs" mode=""></image>
|
||
</view> -->
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
<!-- <customerCom v-if="customerVisible" @isClose="customerVisible = false"></customerCom> -->
|
||
<!-- 查询是否支付 -->
|
||
<!-- <isPayDlgVue @isOk="isPayStatus"></isPayDlgVue> -->
|
||
|
||
|
||
<view class="prize-dlg" v-if="prizeVisible">
|
||
<view class="prize-main">
|
||
<view class="header">{{prizeData.nickName | nameFilter}}</view>
|
||
<view class="header-box">{{prizeData.boxName}}-{{priceTypeObj[prizeData.type]}}</view>
|
||
<view class="card" :class="{'rare-icon':prizeData.grade === 'RARE','supreme-icon':prizeData.grade === 'SUPREME','hidden-icon':prizeData.grade === 'HIDDEN','normal-icon':prizeData.grade === 'NORMAL'}">
|
||
<image :src="prizeData.productCoverResource.url" mode="aspectFit" class="shop-img"></image>
|
||
<view class="shop">
|
||
<view class="name">{{prizeData.productName}}</view>
|
||
<view class="name point">商城积分：{{prizeData.productMall}}</view>
|
||
<!-- -->
|
||
</view>
|
||
</view>
|
||
<view style="display: flex;align-items: center;justify-content: center;">
|
||
<view class="again-icon" @click="buyPrize">来发试试</view>
|
||
</view>
|
||
<image src="@/static/result/close.png" class="close-icon" mode="aspectFit" @click="prizeClose"></image>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 新手引导弹窗 guidanceVisible -->
|
||
<view class="guidance-dlg" v-if="false" @click.stop="guidanceAccomplish" @touchmove.stop.prevent>
|
||
<image src="@/static/guidance-index/close.png" class="guidance-close" mode="" @click.stop="guidanceClose"></image>
|
||
<view class="guidance-main">
|
||
<image src="@/static/guidance-index/active-bg.png" mode="" class="guidance-active-icon" v-show="guidanceIndex === 0"></image>
|
||
<view v-show="guidanceIndex === 1" class="guidance-box">
|
||
<image src="@/static/guidance-index/left.png" mode="" class="guidance-box-arr left-arr"></image>
|
||
<image src="@/static/guidance-index/right.png" mode="" class="guidance-box-arr right-arr"></image>
|
||
<image src="@/static/guidance-index/box-icon.png" mode="" class="guidance-box-icon"></image>
|
||
</view>
|
||
<view v-show="guidanceIndex === 2" class="guidance-box-btn">
|
||
<image src="@/static/home/ljkqq.gif" class="guidance-box-btn-gif" mode="aspectFit"></image>
|
||
<!-- <image src="@/static/guidance-index/sz.png" mode="" class="finger-icon"></image> -->
|
||
</view>
|
||
<image src="@/static/guidance-index/buy-icon.png" mode="" class="guidance-buy-icon" v-show="guidanceIndex === 2"></image>
|
||
<view class="free-gu" v-show="guidanceIndex === 3">
|
||
<view class="free">免费试玩</view>
|
||
<image src="@/static/guidance-index/sz.png" mode="" class="finger-icon"></image>
|
||
</view>
|
||
<image src="@/static/guidance-index/free-icon.png" mode="" class="guidance-free-icon" v-show="guidanceIndex === 3"></image>
|
||
<image src="@/static/guidance-index/next.png" mode="" class="guidance-next" @click.stop="guidanceNext" v-show="guidanceIndex < 3"></image>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<view class="agreement-page" :class="{whitePage:isWhite}" v-if="isAgreement">
|
||
<view class="agreement-dlg" v-if="!isWhite">
|
||
<view class="agreement-tip">请阅读并同意以下条款</view>
|
||
<view class="agreement-center">
|
||
为保障您的合法权益，请您先阅读并同意<text class="red" @click.stop="goPage('agreement')">《用户协议》</text>以及<text class="red" @click.stop="goPage('privacy')">《隐私政策》</text>
|
||
</view>
|
||
<view class="agreement-footer">
|
||
<view class="cancel" @click="disagreeCk">不同意并退出</view>
|
||
<view class="shu"></view>
|
||
<view class="agreement-submit" @click="consentCk">同意</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<popup-view v-model="isModal" mode="center" border-radius="15" z-index="9999" centerBoxBgColor='transparent'>
|
||
<view class="activity-rank-modal">
|
||
<view class="rank">
|
||
<template v-if="lastTopObj.topList">
|
||
<template v-for="(item,index) in lastTopObj.topList">
|
||
<view class="rank-item" :key="index" v-if="index <= 4">
|
||
<view class="rank-item-info">
|
||
<view class="name">{{index+1}}.{{item.nickname}}</view>
|
||
<view class="num"><view>{{Number(item.period) + 1}}轮{{Number(item.periodNum) + 1}}关</view></view>
|
||
</view>
|
||
<view class="award">
|
||
<image src="@/static/activity/lw.png" mode="" class="award-icon"></image>
|
||
<view class="award-txt">排名奖励：
|
||
<template v-if="item.rewardEntityList">
|
||
<span v-for="(childItem,childIndex) in item.rewardEntityList" :key="childIndex+22">
|
||
{{childItem.info.abbreviation}}*{{childItem.num}}、
|
||
</span>
|
||
</template>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</template>
|
||
<view class="rank-footer" v-if="lastTopObj.rewardRule">{{lastTopObj.rewardRule}}</view>
|
||
</view>
|
||
<image src="@/static/order/close.png" mode="" class="activity-rank-close" @click="modalClose"></image>
|
||
</view>
|
||
</popup-view>
|
||
|
||
|
||
<!-- <popup-view v-model="cellVisible" mode="center" border-radius="15" z-index="9999" centerBoxBgColor='transparent'>
|
||
<view class="activity-rank-dlg" @click.stop="">
|
||
<image src="@/static/activity/dlg.png" mode="aspectFit" style="" class="activity-rank-dlg-img" @click="goActivity"></image>
|
||
<image src="@/static/order/close.png" class="activity-rank-dlg-close" mode="aspectFit" @click="cellClose"></image>
|
||
</view>
|
||
</popup-view> -->
|
||
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import floatWindow from '@/pages/components/floatWindow.vue'
|
||
import BuyBoxCom from './components/buyBox.vue'
|
||
import BuyFreeBoxCom from './components/buyFreeBox.vue'
|
||
import BuyActivityBox from './components/buyActivityBox.vue'
|
||
import coinDeficitCom from './components/coinDeficit.vue'
|
||
import NoOpenCom from './components/noOpen.vue'
|
||
import trumpetCom from './components/trumpet.vue'
|
||
import reportClickFn from '@/utils/report.js'
|
||
import bubbleCom from './components/bubble.vue'
|
||
import SignCom from './components/sign.vue'
|
||
import isPayDlgVue from '@/pages/components/isPayDlg.vue'
|
||
|
||
import {
|
||
loginXc
|
||
} from '@/API/login.js'
|
||
import {
|
||
noticeTopApi,
|
||
popupAdApi,
|
||
customerApi,
|
||
userInfo,
|
||
coinPaidApi
|
||
} from '@/API/user.js'
|
||
import md5 from 'crypto-js/md5';
|
||
import Hex from 'crypto-js/enc-hex';
|
||
import {
|
||
myMixins
|
||
} from "@/mixins/mixins.js";
|
||
import {
|
||
boxesPinnedApi,
|
||
boxesTagsApi,
|
||
boxesApi,
|
||
boxActivityApi,
|
||
boxActivityListApi,
|
||
promptCountApi,
|
||
boxResultApi,
|
||
noOpenListApi,
|
||
boxesChannelPinnedApi,
|
||
popupAdPageApi,
|
||
popupAdPageChannelApi,
|
||
boxOrderPaidApi,
|
||
boxesDetail,
|
||
activityIconApi,
|
||
indexGuideApi,
|
||
setIndexGuideApi,
|
||
activityTopLastApi
|
||
} from '@/API/index.js'
|
||
import {
|
||
mpScheme
|
||
} from '@/API/pay.js'
|
||
import { signInInfo,signIn,taskListApi,taskReceive } from '@/API/sign.js'
|
||
import customerCom from '@/pages/components/customer.vue'
|
||
|
||
import {
|
||
showWebview
|
||
} from '@/utils/webViewCom.js'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
list: [],
|
||
current: 0,
|
||
customer: '',
|
||
adStoreVisible: '', //是否第一次进入
|
||
infoDetail: {
|
||
point: 0,
|
||
},
|
||
adVisible: false,
|
||
activityShow: false,
|
||
activityDetail: {
|
||
coverResource: {},
|
||
price: {}
|
||
},
|
||
buyVisible: false,
|
||
tipVisible: false,
|
||
buyType: '', //几连抽
|
||
|
||
popupList: [],
|
||
bannerTopList: [],
|
||
optionTxt: '',
|
||
optionSign: '',
|
||
footerCurrent: 0,
|
||
gradeObj: {
|
||
NORMAL: "普通",
|
||
HIDDEN: "隐藏",
|
||
RARE: "稀有",
|
||
SUPREME: "至尊"
|
||
},
|
||
|
||
priceTypeObj: {
|
||
SINGLE: "一发入魂",
|
||
TRIPLE: "欧气三连",
|
||
PENTA: "霸气五连"
|
||
},
|
||
show: false,
|
||
boxType: '', //盲盒类型
|
||
isTopUp: false,
|
||
isTip: false,
|
||
rookieTimer: null,
|
||
boxResultTimer: null,
|
||
boxResultList: [], //开奖结果
|
||
isOpen: false,
|
||
isClose: false,
|
||
visible: false,
|
||
autoplay:true,//是否自动播放
|
||
interval:10000,
|
||
isRankRed:false,//排行榜小红点是否显示
|
||
isCouponRed:false,//天天领劵小红点
|
||
isCardRed:false,//卡包小红点
|
||
isWechatRed:false,//微信福利小红点
|
||
isTaskRed:false,//任务签到小红点
|
||
isAgreementRed:false,//协议小红点
|
||
isMoreRed:false,//协议小红点
|
||
|
||
|
||
isActivityClick:false,//是否点击打开弹窗
|
||
isPayTip:false,//已经支付超过一千元显示
|
||
boxActivityList:[],
|
||
boxActivityLeftList:[],//用于右侧浮窗按钮
|
||
activityShowIndex:null,
|
||
floatCkVis:false,//true时点击右侧浮窗打开
|
||
isPay:false,//是否支付跳转
|
||
isSign:false,//签到弹窗
|
||
timeCur:'',
|
||
moreVisible:false,
|
||
moreList:[],
|
||
|
||
showActivity:false,//活动购买弹窗
|
||
isPayDlgVisible:false,
|
||
paidData:{},//用于支付轮训参数
|
||
payNum:0,
|
||
customerVisible:false,
|
||
isCustomerPath:false,
|
||
|
||
|
||
detailData:{},
|
||
activityClickShow:false,
|
||
activityObj:{
|
||
endTime: "",
|
||
icon: {
|
||
cover: "",
|
||
coverResource: {path: "",url:''},
|
||
type: "",
|
||
},
|
||
id: ""
|
||
},
|
||
freeVisible:false,//免费试玩
|
||
prizeData:{
|
||
productCoverResource:{}
|
||
},
|
||
prizeVisible:false,
|
||
guidanceVisible:false,//新手引导
|
||
guidanceIndex:0,
|
||
zIndex:10,//右侧浮床层级
|
||
guidanceFloatWindow:false,//右侧浮窗是否显示新手引导背景
|
||
guidanceBtn:false,
|
||
isAgreement:false,
|
||
isWhite:false,
|
||
activeDetail:{},
|
||
freeDetail:{},
|
||
typeNum:'',
|
||
isModal:false,
|
||
lastTopObj:{
|
||
icon:{
|
||
coverResource:{
|
||
url:''
|
||
}
|
||
}
|
||
},
|
||
typeObj:{
|
||
POINTS:'积分',
|
||
COUPON:'优惠券',
|
||
PROMPT:'提示卡',
|
||
FORMULA:'组合奖励',
|
||
PRODUCT:'商品'
|
||
},
|
||
cellVisible:false,//跳格子广告弹窗
|
||
}
|
||
},
|
||
components: {
|
||
floatWindow,
|
||
BuyBoxCom,
|
||
coinDeficitCom,
|
||
NoOpenCom,
|
||
trumpetCom,
|
||
bubbleCom,
|
||
SignCom,
|
||
BuyActivityBox,
|
||
isPayDlgVue,
|
||
customerCom,
|
||
BuyFreeBoxCom
|
||
},
|
||
|
||
filters: {
|
||
million: function(
|
||
num
|
||
) { //过万处理 let num; if(value > 9999){//大于9999显示x.xx万 num=(Math.floor(value/1000)/10) + 'W'; }else if( value < 9999 && value>-9999){ num=value }else if(value<-9999){//小于-9999显示-x.xx万
|
||
var fixedNum = 2
|
||
num = num ? Number(num) : 0
|
||
if (num >= 10000) {
|
||
var digit = num / 10000
|
||
var count = digit.toFixed(6).slice(0, -(6 - fixedNum))
|
||
count = Math.max(count)
|
||
return count + 'w'
|
||
} else {
|
||
return num
|
||
}
|
||
},
|
||
nameFilter: function(
|
||
value
|
||
) { //过万处理 let num; if(value > 9999){//大于9999显示x.xx万 num=(Math.floor(value/1000)/10) + 'W'; }else if( value < 9999 && value>-9999){ num=value }else if(value<-9999){//小于-9999显示-x.xx万
|
||
if (!value) return ''; // 如果value是null、undefined或空字符串，则直接返回空字符串
|
||
const length = value.length;
|
||
if (length >= 3) {
|
||
// 长度超过3个字符，保留头尾，中间用**代替
|
||
return value.charAt(0) + '**' + value.charAt(length - 1);
|
||
} else if (length === 2) {
|
||
// 长度为2个字符，保留头位，后面用*代替
|
||
return value.charAt(0) + '*';
|
||
} else {
|
||
return value;
|
||
}
|
||
}
|
||
|
||
},
|
||
watch:{
|
||
show(){
|
||
console.log("---------show-----------:",this.show)
|
||
if(!this.show){
|
||
this.typeNum = ''
|
||
}
|
||
},
|
||
freeVisible(){
|
||
if(!this.freeVisible){
|
||
this.autoplay = true
|
||
}
|
||
},
|
||
},
|
||
onLoad(option) {
|
||
// if(option.token){
|
||
// uni.setStorageSync('box-token',token)
|
||
// }
|
||
|
||
this.loginParams = option
|
||
let userId = ''
|
||
if (option.user_id) {
|
||
userId = option.user_id
|
||
}
|
||
if (option.userid) {
|
||
userId = option.userid
|
||
}
|
||
// url里有appid和userid的时候需要登录
|
||
if (option.sign) {
|
||
this.login(option)
|
||
} else if (!option.sign && option.appid && userId) {
|
||
uni.setStorageSync('box-appid',option.appid)
|
||
// uni.setStorageSync('box-appid', option.appid)
|
||
this.loginParams.userid = userId
|
||
// 获取当前时间的秒级时间戳
|
||
const currentTimeInSeconds = Math.floor(Date.now() / 1000);
|
||
this.appid = option.appid
|
||
this.userid = userId
|
||
this.gotoPath = option.gotoPath ? option.gotoPath : ""
|
||
this.time = currentTimeInSeconds
|
||
let md5Str = ''
|
||
if (this.gotoPath) {
|
||
md5Str =
|
||
`appid=${this.appid}&gotoPath=${this.gotoPath}&time=${this.time}&userid=${this.userid}&key=${this.appid}`
|
||
} else {
|
||
md5Str = `appid=${this.appid}&time=${this.time}&userid=${this.userid}&key=${this.appid}`
|
||
}
|
||
// md5加密
|
||
let sign = this.generate16BitMD5(md5Str)
|
||
this.optionSign = sign
|
||
this.loginParams.sign = sign
|
||
this.loginParams.time = this.time
|
||
this.login(this.loginParams)
|
||
} else {
|
||
// this.getBoxesTags()
|
||
// this.getNoticeTop()
|
||
this.getPopupAd('HOMEPAGE_CAROUSEL')
|
||
this.getPopupAd('HOMEPAGE_POPUP')
|
||
this.getPopupAdPage()
|
||
this.getBoxesPinned()
|
||
// if(this.categoriesIndex === 0){
|
||
// this.getBoxesPinned()
|
||
// }else{
|
||
// this.getBoxes()
|
||
// }
|
||
}
|
||
|
||
// this.getNoOpenList()
|
||
// this.getBoxResult()
|
||
// this.boxResultTimer = setInterval(() => {
|
||
// this.getBoxResult()
|
||
// }, 6000)
|
||
|
||
|
||
|
||
// 是否第一次打开页面(第一次进入页面排行榜小红点显示)
|
||
if (!uni.getStorageSync('firstTime')) {
|
||
this.isRankRed = true//排行榜小红点
|
||
this.isCouponRed = true//天天领劵小红点
|
||
this.isCardRed = true//卡包小红点
|
||
this.isWechatRed = true//微信福利小红点
|
||
this.isTaskRed = true//任务签到小红点
|
||
this.isAgreementRed = true//协议小红点
|
||
this.isMoreRed = true
|
||
uni.setStorageSync('firstTime', true)
|
||
}
|
||
this.getBoxActivity()
|
||
},
|
||
onShow() {
|
||
|
||
this.getBoxResult()
|
||
this.boxResultTimer = setInterval(() => {
|
||
this.getBoxResult()
|
||
}, 6000)
|
||
if (uni.getStorageSync('box-token')) {
|
||
this.getActivityIcon()
|
||
this.getIndexGuide()
|
||
}
|
||
|
||
// if(this.isCustomerPath){
|
||
// this.isCustomerPath = false
|
||
// uni.switchTab({
|
||
// url:`/pages/index/new-index`
|
||
// })
|
||
// }
|
||
uni.$on('updateTabData', (data) => {
|
||
// console.log("----------data------------:",data)
|
||
this.visible = false
|
||
this.showActivity = false
|
||
if(data.type){
|
||
this.typeNum = data.type
|
||
}
|
||
if(data.boxId){
|
||
this.boxType = 'buy'
|
||
this.visible = false
|
||
this.show = false
|
||
boxesDetail({
|
||
id: data.boxId,type:data.type
|
||
}).then(res => {
|
||
// console.log("----------res------------:",res)
|
||
if (res.code === 200) {
|
||
this.detailData = res.data
|
||
this.show = true
|
||
} else {
|
||
this.$api.msg(res.message)
|
||
}
|
||
})
|
||
}else{
|
||
setTimeout(() => {
|
||
this.activityShow = false
|
||
this.activityClickShow = false
|
||
// this.visible = true
|
||
if (uni.getStorageSync('box-token')) {
|
||
this.getSignInInfo()
|
||
this.getBoxActivity()
|
||
}
|
||
}, 500)
|
||
}
|
||
|
||
|
||
});
|
||
if(!this.isPay){
|
||
if (uni.getStorageSync('box-token')) {
|
||
this.getUserInfo()
|
||
// this.getCustomer()
|
||
// this.getBoxActivity()
|
||
this.getBoxesPinned()
|
||
this.getSignInInfo()
|
||
} else {
|
||
this.getBoxesPinned()
|
||
}
|
||
}
|
||
this.getSignInInfo()
|
||
this.getActivityTopLast()
|
||
},
|
||
methods: {
|
||
// 关闭跳格子弹窗
|
||
cellClose(){
|
||
this.visible = true
|
||
this.cellVisible = false
|
||
},
|
||
goActivity(){
|
||
uni.navigateTo({
|
||
url:'/pages/index/activity'
|
||
})
|
||
},
|
||
handleActivityTopLastFn(){
|
||
this.isModal = true
|
||
},
|
||
getActivityTopLast(){
|
||
uni.showLoading()
|
||
activityTopLastApi().then(res => {
|
||
uni.hideLoading()
|
||
console.log("================",res)
|
||
if(res.code === 200){
|
||
if(res.data){
|
||
this.lastTopObj = res.data
|
||
}else{
|
||
this.lastTopObj = {
|
||
icon:{
|
||
coverResource:{
|
||
url:''
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
}else{
|
||
this.$api.msg(res.message)
|
||
}
|
||
}).catch(err => {
|
||
uni.hideLoading()
|
||
})
|
||
},
|
||
goAgreement(){
|
||
this.isAgreementRed = false
|
||
uni.navigateTo({
|
||
url:`/pages/agreement/total`
|
||
})
|
||
},
|
||
disagreeCk(){
|
||
this.isWhite = true
|
||
// uni.reLaunch({
|
||
// url:`/pages/mine/white`
|
||
// })
|
||
},
|
||
consentCk(){
|
||
this.isAgreement = false
|
||
this.guidanceVisible = true
|
||
},
|
||
goPage(type){
|
||
let path = ''
|
||
if(type === 'agreement'){
|
||
path = '/pages/agreement/index'
|
||
}else{
|
||
path = '/pages/agreement/privacy'
|
||
}
|
||
uni.navigateTo({
|
||
url:path
|
||
})
|
||
},
|
||
closeSign(){
|
||
uni.showLoading()
|
||
signInInfo().then(res => {
|
||
uni.hideLoading()
|
||
if(res.code === 200){
|
||
this.getTime()
|
||
this.isSign = false
|
||
if(res.data.details.length > 0){
|
||
let signObj = {}
|
||
res.data.details.forEach(item => {
|
||
signObj[item.dt] = item.sign
|
||
})
|
||
if(signObj[this.timeCur]){
|
||
this.isTaskRed = false
|
||
}else{
|
||
this.isTaskRed = true
|
||
}
|
||
}
|
||
}else{
|
||
this.$api.msg(res.message)
|
||
}
|
||
}).catch(err => {
|
||
uni.hideLoading()
|
||
})
|
||
},
|
||
getIndexGuide(){
|
||
indexGuideApi().then(res => {
|
||
if(res.code === 200){
|
||
this.guidanceVisible = res.data
|
||
// this.isAgreement = res.data
|
||
}else{
|
||
this.$api.msg(res.message)
|
||
}
|
||
})
|
||
},
|
||
// 免费试玩
|
||
freeCk(){
|
||
console.log(this.list[this.current])
|
||
// 1788480746537656322 固定玩转电竞
|
||
this.list.forEach(item => {
|
||
if(item.id === '1788516794714071041'){
|
||
this.freeDetail = item
|
||
}
|
||
})
|
||
|
||
this.autoplay = false
|
||
this.freeVisible = true
|
||
this.guidanceVisible = false
|
||
},
|
||
getActivityIcon(){
|
||
activityIconApi().then(res => {
|
||
console.log(res)
|
||
if(res.code === 200){
|
||
if(res.data){
|
||
if (!uni.getStorageSync('activityShow')) {
|
||
this.cellVisible = true
|
||
}
|
||
}
|
||
this.activityObj = res.data
|
||
console.log("this.activityObj:",this.activityObj)
|
||
// let endTime = res.data.endTime
|
||
|
||
// setInterval(() => {
|
||
// if(this.activityObj.endTime){
|
||
// const currentTime = Math.floor(Date.now() / 1000);
|
||
// const targetTime = new Date(endTime).getTime() / 1000;
|
||
// const countdown = targetTime - currentTime;
|
||
// if (countdown <= 0) {
|
||
// this.isShow = false
|
||
// this.endTime = 'Expired'
|
||
// // this.$set(this.activityObj,'endTime','Expired')
|
||
// } else {
|
||
// this.isShow = true
|
||
// const hours = Math.floor(countdown / 3600);
|
||
// const minutes = Math.floor((countdown % 3600) / 60);
|
||
// const seconds = countdown % 60;
|
||
// this.endTime = `${this.padZero(hours)}:${this.padZero(minutes)}:${this.padZero(seconds)}`
|
||
// // this.$set(this.activityObj,'endTime',`${this.padZero(hours)}:${this.padZero(minutes)}:${this.padZero(seconds)}`)
|
||
// }
|
||
// }
|
||
// },1000)
|
||
|
||
|
||
}else{
|
||
}
|
||
})
|
||
},
|
||
// getActivityIcon(){
|
||
// activityIconApi().then(res => {
|
||
// console.log(res)
|
||
// })
|
||
// },
|
||
isCancelCk(){
|
||
this.isPayDlgVisible = false
|
||
},
|
||
// 购买弹框回传回来的方法 用于是否打开是否支付弹框
|
||
payStatus(val){
|
||
this.isPayDlgVisible = true
|
||
console.log(val)
|
||
this.paidData = val
|
||
},
|
||
isPayStatus(){
|
||
console.log("this.paidData.no:",this.paidData.no)
|
||
boxOrderPaidApi({
|
||
no:this.paidData.no
|
||
}).then(payResult => {
|
||
console.log("payResult:",payResult)
|
||
if (payResult.data) {
|
||
this.$api.msg('支付成功')
|
||
this.isPayDlgVisible = false
|
||
try{
|
||
console.log(`/pages/index/draw?no=${this.paidData.no}&boxId=${this.paidData.boxId}&type=${this.paidData.type}`)
|
||
}catch(e){
|
||
console.log("我出错了---------------")
|
||
}
|
||
|
||
|
||
|
||
|
||
if(this.paidData && this.paidData.no && this.paidData.boxId && this.paidData.type){
|
||
console.log(`--------------------/pages/index/draw?no=${this.paidData.no}&boxId=${this.paidData.boxId}&type=${this.paidData.type}`)
|
||
uni.navigateTo({
|
||
url: `/pages/index/draw?no=${this.paidData.no}&boxId=${this.paidData.boxId}&type=${this.paidData.type}`
|
||
})
|
||
}else{
|
||
// 直接跳转开奖结果
|
||
noOpenListApi().then(resss => {
|
||
console.log("resss:",resss)
|
||
if(resss.code === 200){
|
||
if(resss.data.length > 0){
|
||
uni.redirectTo({
|
||
url:`/pages/index/draw?noOpen=noOpen`
|
||
})
|
||
}
|
||
}else{
|
||
this.$api.msg(resss.message)
|
||
}
|
||
}).catch(err => {
|
||
|
||
})
|
||
}
|
||
|
||
|
||
// uni.navigateTo({
|
||
// url: `/pages/index/draw?no=${this.paidDatano.no}&boxId=${this.paidData.boxId}&type=${this.paidData.type}`
|
||
// })
|
||
uni.hideLoading()
|
||
}else{
|
||
this.$api.msg('未查询到支付结果')
|
||
uni.hideLoading()
|
||
}
|
||
}).catch(err => {
|
||
uni.hideLoading()
|
||
})
|
||
},
|
||
againPay(){
|
||
this.payNum += 1
|
||
},
|
||
lookMore(){
|
||
this.isMoreRed = false
|
||
// this.$api.msg('暂未开放，敬请期待')
|
||
this.getMore()
|
||
},
|
||
moreCk(item){
|
||
if (item.img.type === 'INSIDE') {
|
||
if (item.img.url === '/pages/index/new-index' || item.img.url === '/pages/shop/index' || item.img
|
||
.url === '/pages/mine/boxRecrd' || item.img.url === '/pages/mine/mine') {
|
||
uni.switchTab({
|
||
url: `${item.img.url}`,
|
||
});
|
||
uni.$emit('updateTabData', {newData:'newData'});
|
||
} else {
|
||
uni.navigateTo({
|
||
url: `${item.img.url}`
|
||
})
|
||
}
|
||
|
||
} else {
|
||
window.location.href = item.img.url
|
||
}
|
||
this.moreVisible = false
|
||
},
|
||
getPopupMore(item,val){
|
||
if(val === 'img'){
|
||
if(item.img.url){
|
||
uni.navigateTo({
|
||
url:item.img.url
|
||
})
|
||
}else{
|
||
this.getMore()
|
||
}
|
||
}else{
|
||
if(item.button.url){
|
||
uni.navigateTo({
|
||
url:item.button.url
|
||
})
|
||
}else{
|
||
this.getMore()
|
||
}
|
||
}
|
||
|
||
},
|
||
getMore(){
|
||
popupAdPageChannelApi({
|
||
page:'/pages/index/new-index',
|
||
type: 'CAROUSEL'
|
||
}).then(res => {
|
||
if (res.code === 200) {
|
||
this.moreList = res.data.reverse()
|
||
this.moreVisible = true
|
||
} else {
|
||
this.$api.msg(res.message)
|
||
}
|
||
})
|
||
},
|
||
getTime(){
|
||
let now = new Date();
|
||
let year = now.getFullYear();
|
||
let month = now.getMonth() + 1; // 月份从0开始，所以要加1
|
||
let day = now.getDate();
|
||
let hour = now.getHours();
|
||
let minute = now.getMinutes();
|
||
let second = now.getSeconds();
|
||
month = month < 10 ? `0${month}` : month
|
||
day = day < 10 ? `0${day}` : day
|
||
this.timeCur = `${year}-${month}-${day}`
|
||
},
|
||
getSignInInfo(){
|
||
uni.showLoading()
|
||
signInInfo().then(res => {
|
||
uni.hideLoading()
|
||
if(res.code === 200){
|
||
this.getTime()
|
||
console.log(res)
|
||
if(res.data.details.length > 0){
|
||
let signObj = {}
|
||
res.data.details.forEach(item => {
|
||
signObj[item.dt] = item.sign
|
||
})
|
||
if(signObj[this.timeCur]){
|
||
this.isTaskRed = false
|
||
}else{
|
||
this.isTaskRed = true
|
||
}
|
||
}
|
||
}else{
|
||
this.$api.msg(res.message)
|
||
}
|
||
}).catch(err => {
|
||
uni.hideLoading()
|
||
})
|
||
},
|
||
signOkFn(){
|
||
// this.isTaskRed = false
|
||
this.getSignInInfo()
|
||
},
|
||
closePay(){
|
||
this.isPayTip = false
|
||
},
|
||
submitPay(){
|
||
this.isPayTip = false
|
||
},
|
||
// 签到
|
||
signCk(){
|
||
// 首页签到点击次数
|
||
reportClickFn('index_sign_clk');
|
||
if (uni.getStorageSync('box-token')) {
|
||
// this.isSign = true
|
||
uni.navigateTo({
|
||
url:`/pages/index/sign`
|
||
})
|
||
}else{
|
||
uni.navigateTo({
|
||
url:`/pages/login/login`
|
||
})
|
||
}
|
||
|
||
},
|
||
rankingCk() {
|
||
this.isRankRed = false
|
||
// 首页排行榜点击次数
|
||
reportClickFn('index_ranging_clk');
|
||
uni.navigateTo({
|
||
url: `/pages/index/ranking`
|
||
})
|
||
},
|
||
getPopupAdPage() {
|
||
popupAdPageApi({
|
||
page: '/pages/index/new-index',
|
||
type: "CAROUSEL"
|
||
}).then(res => {
|
||
if (res.code === 200) {
|
||
this.bannerTopList = res.data
|
||
// if(this.list.length > 0){
|
||
// this.visible = true
|
||
// }
|
||
} else {
|
||
this.$api.msg(res.message)
|
||
}
|
||
})
|
||
},
|
||
// 关闭充值弹窗
|
||
coinDeficitComClose() {
|
||
this.isClose = !this.isClose
|
||
console.log("aasdsds")
|
||
},
|
||
async openWeapp(amount) {
|
||
console.log("uniCloud:", uniCloud)
|
||
try {
|
||
const res = await uniCloud.callFunction({
|
||
name: 'public',
|
||
data: {
|
||
action: 'getUrlScheme',
|
||
options: `amount=${amount}`
|
||
}
|
||
});
|
||
|
||
if (res.result && res.result.openlink) {
|
||
// 跳转到微信小程序
|
||
uni.navigateTo({
|
||
url: res.result.openlink
|
||
});
|
||
} else {
|
||
console.error('未能获取有效的链接：', res);
|
||
}
|
||
} catch (error) {
|
||
console.error('调用云函数失败：', error);
|
||
}
|
||
},
|
||
// // 获取是否有开奖记录
|
||
// getNoOpenList(){
|
||
// noOpenListApi().then(res => {
|
||
// console.log(res)
|
||
// if(res.code === 200){
|
||
// // this.list = res.data
|
||
// this.isOpen = res.data.length > 0 ? true : false
|
||
// }else{
|
||
// this.$api.msg(res.message)
|
||
// }
|
||
// }).catch(err => {
|
||
|
||
// })
|
||
// },
|
||
goxcx() {
|
||
mpScheme().then(res => {
|
||
console.log(res)
|
||
if (res.code === 200) {
|
||
location.href = res.data
|
||
} else {
|
||
this.$api.msg(res.message)
|
||
}
|
||
})
|
||
// document.write('weixin://dl/business/?t=8LzmkyltYAh')
|
||
// location.href = "weixin://dl/business/?t=8LzmkyltYAh"
|
||
},
|
||
// // 获取滚动公告
|
||
getBoxResult() {
|
||
boxResultApi().then(res => {
|
||
if (res.code === 200) {
|
||
let arr = []
|
||
res.data.forEach(item => {
|
||
let time = ''
|
||
const date = new Date(item.time * 1000);
|
||
const now = new Date();
|
||
const diffInSeconds = Math.abs(Math.floor((now - date) / 1000));
|
||
if (diffInSeconds === 0) {
|
||
time = `刚刚`
|
||
} else {
|
||
time = `${diffInSeconds}秒前`
|
||
}
|
||
let nickName = item.nickName.length > 4 ? item.nickName.substring(0, 3) +
|
||
'...' : item.nickName;
|
||
arr.unshift({text:`开启得到了`,boxName:item.boxName,productName:item.productName,data:item,nickName,productMall:item.productMall})
|
||
})
|
||
|
||
arr.forEach(item => {
|
||
const match = this.boxResultList.find(bItem => bItem === item);
|
||
if (!match) {
|
||
this.boxResultList.unshift(item);
|
||
}
|
||
})
|
||
if (this.boxResultList.length > 20) {
|
||
this.boxResultList = this.boxResultList.slice(0, 20);
|
||
}
|
||
} else {
|
||
this.$api.msg(res.message)
|
||
}
|
||
})
|
||
},
|
||
// 新手盲盒订单支付轮训
|
||
payPaid(val) {
|
||
this.getCoinPaid(val.no, val.boxOrderNo, val.boxId)
|
||
this.rookieTimer = setInterval(() => {
|
||
this.getCoinPaid(val.no, val.boxOrderNo, val.boxId)
|
||
}, 3000);
|
||
},
|
||
|
||
// 查询新手盲盒支付订单
|
||
getCoinPaid(no, boxOrderNo, boxId) {
|
||
coinPaidApi({
|
||
no
|
||
}).then(payResult => {
|
||
if (payResult.data) {
|
||
clearInterval(this.rookieTimer); // 清除定时器
|
||
this.rookieTimer = null;
|
||
this.show = false
|
||
this.isPay = false
|
||
this.$api.msg('支付成功')
|
||
uni.navigateTo({
|
||
url: `/pages/index/draw?no=${boxOrderNo}&boxId=${boxId}&type=1`
|
||
})
|
||
// uni.redirectTo({
|
||
// url: `/pages/index/boxPaySuccess?no=${this.boxOrderNo}&boxId=${this.previewData.boxId}&name=${this.previewData.name}&type=${this.previewData.type}&sale=${this.previewData.amount.sale}`
|
||
// })
|
||
uni.hideLoading()
|
||
}
|
||
}).catch(err => {
|
||
clearInterval(this.timer); // 清除定时器
|
||
this.timer = null;
|
||
uni.hideLoading()
|
||
})
|
||
},
|
||
// 代币不足
|
||
coinDeficit() {
|
||
this.isTopUp = true
|
||
},
|
||
closeTop() {
|
||
this.isTopUp = false
|
||
this.getUserInfo()
|
||
},
|
||
sucClose() {
|
||
this.isTopUp = false
|
||
this.isTip = true
|
||
this.getUserInfo()
|
||
setTimeout(() => {
|
||
this.isTip = false
|
||
}, 1500)
|
||
},
|
||
// 购买成功
|
||
buySuccess() {
|
||
this.isPayDlgVisible = false
|
||
this.show = false
|
||
this.showActivity = false
|
||
this.isPay = false
|
||
this.activityClickShow = false
|
||
},
|
||
rule() {
|
||
console.log("aaa")
|
||
uni.navigateTo({
|
||
url: `/pages/agreement/rule`
|
||
})
|
||
},
|
||
preloadImages(type) {
|
||
if (type === 'box') {
|
||
this.boxList.forEach((imgSrc) => {
|
||
const img = new Image();
|
||
img.src = imgSrc;
|
||
});
|
||
} else if (type === 'lihua') {
|
||
this.liHuaList.forEach((imgSrc) => {
|
||
const img = new Image();
|
||
img.src = imgSrc;
|
||
});
|
||
} else if (type === 'gx') {
|
||
this.gxList.forEach((imgSrc) => {
|
||
const img = new Image();
|
||
img.src = imgSrc;
|
||
});
|
||
} else if (type === 'grade') {
|
||
|
||
this.gradeList.forEach((imgSrc) => {
|
||
const img = new Image();
|
||
img.src = imgSrc;
|
||
});
|
||
}
|
||
|
||
},
|
||
generate16BitMD5(data) {
|
||
let md5Digest = md5(data).toString(Hex);
|
||
return md5Digest.substring(8, 24); // 截取前16位
|
||
},
|
||
rollingLink(item) {
|
||
this.adVisible = false
|
||
if (item.img.type === 'INSIDE') {
|
||
if (item.img.url === '/pages/index/new-index' || item.img.url === '/pages/shop/index' || item.img
|
||
.url === '/pages/mine/sign' || item.img.url === '/pages/mine/mine') {
|
||
uni.switchTab({
|
||
url: `${item.img.url}`
|
||
})
|
||
} else {
|
||
uni.navigateTo({
|
||
url: `${item.img.url}`
|
||
})
|
||
}
|
||
|
||
} else {
|
||
window.location.href = item.img.url
|
||
}
|
||
},
|
||
// 获取活动盲盒详情
|
||
getBoxActivity() {
|
||
// /boxes/activity/list
|
||
boxActivityListApi().then(res => {
|
||
if (res.code === 200) {
|
||
this.visible = false
|
||
|
||
// 定义一个排序顺序的映射
|
||
// let sortOrderMap = {
|
||
// 'PREFERENTIAL_DAY': 1,
|
||
// 'ROOKIE': 2,
|
||
// 'SPECIAL_PRICE': 3,
|
||
// 'TRIPLE':4
|
||
// };
|
||
let arr = []
|
||
res.data.forEach(item => {
|
||
// if(item.source === 'SPECIAL_PRICE' || item.source === 'ROOKIE'){
|
||
// arr.push(item)
|
||
// }
|
||
// if(item.source === 'ROOKIE'){
|
||
arr.push(item)
|
||
// }
|
||
})
|
||
let resDataList = JSON.parse(JSON.stringify(arr))
|
||
// let resDataList = JSON.parse(JSON.stringify(res.data))
|
||
|
||
// let sortOrderMap = {
|
||
// 'PERIOD': 1,
|
||
// 'NINE': 2,
|
||
// 'SPECIAL_PRICE': 3,
|
||
// 'ROOKIE':4
|
||
// };
|
||
let sortOrderMap = {
|
||
'ROOKIE':1,
|
||
'PERIOD': 2,
|
||
'NINE': 3,
|
||
'SPECIAL_PRICE': 4,
|
||
};
|
||
|
||
// PERIOD 1
|
||
// NINE 2
|
||
// SPECIAL_PRICE 3
|
||
// ROOKIE 4
|
||
// 使用 sort() 方法进行排序
|
||
res.data.sort((a, b) => {
|
||
// 获取 a 和 b 的 source 在 sortOrderMap 中的值
|
||
let orderA = sortOrderMap[a.source] || Number.MAX_SAFE_INTEGER;
|
||
let orderB = sortOrderMap[b.source] || Number.MAX_SAFE_INTEGER;
|
||
|
||
// 使用这些值进行比较
|
||
return orderA - orderB;
|
||
});
|
||
|
||
console.log("res.data:",res.data)
|
||
|
||
|
||
|
||
|
||
// this.boxActivityLeftList = JSON.parse(JSON.stringify(arr))
|
||
this.boxActivityLeftList = JSON.parse(JSON.stringify(res.data))
|
||
if(this.boxActivityLeftList.length > 0){
|
||
this.boxActivityLeftList.forEach((item,index) => {
|
||
// item.visible = true
|
||
this.$set(this.boxActivityLeftList[index],'visible',false)
|
||
})
|
||
}
|
||
// res.data.forEach((item,index) => {
|
||
// if(item.source === "ROOKIE"){
|
||
// res.data.splice(index,1)
|
||
// }
|
||
// })
|
||
|
||
|
||
resDataList.sort((a, b) => {
|
||
// 获取 a 和 b 的 source 在 sortOrderMap 中的值
|
||
let orderA = sortOrderMap[a.source] || Number.MAX_SAFE_INTEGER;
|
||
let orderB = sortOrderMap[b.source] || Number.MAX_SAFE_INTEGER;
|
||
|
||
// 使用这些值进行比较
|
||
return orderB - orderA;
|
||
});
|
||
|
||
|
||
this.boxActivityList = JSON.parse(JSON.stringify(resDataList))
|
||
console.log("this.boxActivityList:",this.boxActivityList)
|
||
if(this.boxActivityList.length > 0){
|
||
this.boxActivityList.forEach((item,index) => {
|
||
// item.visible = true
|
||
this.$set(this.boxActivityList[index],'visible',false)
|
||
})
|
||
// this.boxActivityList[0].visible = true
|
||
this.boxActivityList[this.boxActivityList.length-1].visible = true
|
||
// this.boxActivityLeftList = JSON.parse(JSON.stringify(res.data))
|
||
// activityShowIndex
|
||
if(this.boxActivityList.length > 0){
|
||
console.log("this.boxActivityList:",this.boxActivityList)
|
||
this.activityShowIndex = this.boxActivityList.length-1
|
||
try {
|
||
if (!uni.getStorageSync('activityShow')) {
|
||
this.activityShow = true
|
||
this.autoplay = false
|
||
// 设置标记，表示已经弹出过
|
||
uni.setStorageSync('activityShow', true)
|
||
}
|
||
} catch (e) {
|
||
//TODO handle the exception
|
||
}
|
||
}
|
||
}else{
|
||
this.visible = true
|
||
}
|
||
console.log(this.boxActivityLeftList)
|
||
} else {
|
||
this.$api.msg(res.message)
|
||
}
|
||
})
|
||
},
|
||
goDetail(item) {
|
||
uni.navigateTo({
|
||
url: `/pages/index/boxDetail?id=${item.id}`
|
||
})
|
||
},
|
||
goActivityDetail(item) {
|
||
// console.log("------------")
|
||
// this.getMore()
|
||
// this.activityShow = false
|
||
// return
|
||
uni.navigateTo({
|
||
url: `/pages/index/boxDetail?type=${item.source}`
|
||
})
|
||
},
|
||
// 活动盲盒订单预览
|
||
goActivityPre(item) {
|
||
console.log("+++++++++++",item)
|
||
// this.getMore()
|
||
// this.activityShow = false
|
||
// // console.log("gggggggggg")
|
||
// return
|
||
if(item.source === "SPECIAL_PRICE"){
|
||
uni.navigateTo({
|
||
url: `/pages/index/boxDetail?type=${item.source}`
|
||
})
|
||
}else{
|
||
this.boxType = item.source
|
||
this.showActivity = true
|
||
this.isPay = true
|
||
this.activeDetail = item
|
||
}
|
||
|
||
|
||
// this.activityShow = false
|
||
},
|
||
activityClose(index) {
|
||
uni.setStorageSync('ad', 'behind')
|
||
if(this.floatCkVis){
|
||
this.activityShow = false
|
||
this.autoplay = true
|
||
}else{
|
||
if (index === 0) {
|
||
this.activityShow = false
|
||
this.autoplay = true
|
||
|
||
console.log("JSON.stringify(this.activityObj:",JSON.stringify(this.activityObj))
|
||
if(JSON.stringify(this.activityObj) !== '{}'){
|
||
// if (!uni.getStorageSync('firstTime')) {
|
||
// this.cellVisible = true
|
||
// }
|
||
}else{
|
||
this.visible = true
|
||
}
|
||
|
||
|
||
|
||
} else {
|
||
this.$set(this.boxActivityList[index],'visible',false)
|
||
this.$set(this.boxActivityList[index-1],'visible',true)
|
||
}
|
||
}
|
||
this.floatCkVis = false
|
||
|
||
},
|
||
close() {
|
||
uni.setStorageSync('ad', 'behind')
|
||
this.adVisible = false
|
||
},
|
||
login(data) {
|
||
loginXc(data).then(res => {
|
||
if (res.code === 200) {
|
||
console.log("box-token:",uni.getStorageSync('box-token'))
|
||
// uni.setStorageSync('box-nickname', res.data.nickname)
|
||
// uni.setStorageSync('box-id', res.data.id)
|
||
try {
|
||
this.adStoreVisible = uni.getStorageSync('ad') ? uni.getStorageSync('ad') : 'frist'
|
||
} catch (e) {
|
||
this.adStoreVisible = 'frist'
|
||
}
|
||
this.getPopupAd('HOMEPAGE_CAROUSEL')
|
||
this.getPopupAd('HOMEPAGE_POPUP')
|
||
this.getPopupAdPage()
|
||
this.getBoxesPinned()
|
||
this.getBoxActivity()
|
||
} else {
|
||
this.$api.msg(res.message)
|
||
reportClickFn('xc_login_error');
|
||
}
|
||
}).catch(err => {
|
||
console.log("aaaaaa")
|
||
reportClickFn('xc_login_error');
|
||
})
|
||
},
|
||
// 获取用户信息
|
||
getUserInfo() {
|
||
userInfo().then(res => {
|
||
if (res.code === 200) {
|
||
this.infoDetail = res.data
|
||
} else if (res.code == 400) {
|
||
uni.removeStorageSync('userInfo')
|
||
uni.removeStorageSync('info')
|
||
this.$api.msg(res.message)
|
||
} else {
|
||
this.$api.msg(res.message)
|
||
}
|
||
})
|
||
},
|
||
getCustomer() {
|
||
customerApi().then(res => {
|
||
if (res.code === 200) {
|
||
this.customer = res.data
|
||
} else {
|
||
this.$api.msg(res.message)
|
||
}
|
||
})
|
||
},
|
||
handleCustomer() {
|
||
// this.isCustomerPath = true
|
||
// window.location.href = 'https://work.weixin.qq.com/kfid/kfcdd500903e17d36af'
|
||
|
||
uni.navigateTo({
|
||
url:`/pages/mine/customer`
|
||
})
|
||
|
||
|
||
|
||
// uni.showLoading()
|
||
// customerApi().then(res => {
|
||
// uni.hideLoading()
|
||
// if (res.code === 200) {
|
||
// this.isCustomerPath = true
|
||
// showWebview(res.data)
|
||
// this.customer = res.data
|
||
// setTimeout(() => {
|
||
// // window.top.location.replace(res.data)
|
||
// // window.location.href = res.data
|
||
// },50)
|
||
// // uni.navigateTo({
|
||
// // url:`/pages/index/webview?customer=${this.customer}`
|
||
// // })
|
||
// // this.customerVisible = true
|
||
// // window.location.href = res.data
|
||
// // uni.navigateBack()
|
||
// // uni.switchTab({
|
||
// // url:`/pages/index/new-index`
|
||
// // })
|
||
|
||
// } else {
|
||
// this.$api.msg(res.message)
|
||
// }
|
||
// }).catch(err => {
|
||
// uni.hideLoading()
|
||
// })
|
||
|
||
// window.open(this.customer)
|
||
},
|
||
topUpCk() {
|
||
uni.navigateTo({
|
||
url: `/pages/mine/topUp`
|
||
})
|
||
},
|
||
notice() {
|
||
uni.navigateTo({
|
||
url: `/pages/mine/notice`
|
||
})
|
||
},
|
||
// 获取广告弹窗/轮播
|
||
getPopupAd(type) {
|
||
// HOMEPAGE_CAROUSEL 轮播
|
||
// HOMEPAGE_POPUP 弹窗
|
||
popupAdApi({
|
||
type
|
||
}).then(res => {
|
||
if (res.code === 200) {
|
||
console.log(type)
|
||
if (type === 'HOMEPAGE_CAROUSEL') {
|
||
this.bannerTopList = res.data
|
||
}
|
||
if (type === 'HOMEPAGE_POPUP') {
|
||
this.popupList = res.data
|
||
if (this.popupList.length > 0) {
|
||
// this.adVisible = true
|
||
}
|
||
}
|
||
} else {
|
||
this.$api.msg(res.message)
|
||
}
|
||
})
|
||
},
|
||
// 获取首页盲盒
|
||
getBoxesPinned() {
|
||
let data = {
|
||
name: this.search
|
||
}
|
||
boxesChannelPinnedApi(data).then(res => {
|
||
if (res.code === 200) {
|
||
this.list = res.data
|
||
} else {
|
||
this.$api.msg(res.message)
|
||
}
|
||
})
|
||
// boxesPinnedApi(data).then(res => {
|
||
// if (res.code === 200) {
|
||
// this.list = res.data
|
||
// } else {
|
||
// this.$api.msg(res.message)
|
||
// }
|
||
// })
|
||
},
|
||
swiperFooterChange(val) {
|
||
this.footerCurrent = val.detail.current
|
||
},
|
||
swiperChange(val) {
|
||
this.current = val.detail.current
|
||
},
|
||
swiperCk(index) {
|
||
this.current = index
|
||
},
|
||
changeSwiper(type) {
|
||
if (type === 'right') {
|
||
if (this.current === this.list.length - 1) {
|
||
this.current = 0
|
||
} else {
|
||
this.current += 1
|
||
}
|
||
} else {
|
||
if (this.current === 0) {
|
||
this.current = this.list.length - 1
|
||
} else {
|
||
this.current -= 1
|
||
}
|
||
}
|
||
},
|
||
|
||
// 不使用提示卡
|
||
nonuse() {
|
||
this.tipVisible = false
|
||
uni.navigateTo({
|
||
url: `/pages/index/boxOrderConfirm?boxId=${this.list[this.current].id}&type=${this.buyType}`
|
||
})
|
||
},
|
||
// 使用提示卡
|
||
immediate() {
|
||
|
||
},
|
||
// 打开购买组件
|
||
buy() {
|
||
if (uni.getStorageSync('box-token')) {
|
||
console.log(this.current)
|
||
this.detailData = this.list[this.current]
|
||
this.boxType = 'buy'
|
||
this.show = true
|
||
this.isPay = true
|
||
this.autoplay = false
|
||
// 盲盒预览埋点
|
||
// reportClickFn('box_buy_review_clk')
|
||
} else {
|
||
uni.navigateTo({
|
||
url: `/pages/login/login`
|
||
})
|
||
}
|
||
|
||
},
|
||
// 关闭购买弹窗组件
|
||
buyClose() {
|
||
this.buyVisible = false
|
||
},
|
||
floatCk(type) {
|
||
this.floatCkVis = true
|
||
this.isActivityClick = true
|
||
this.boxType = type
|
||
console.log(this.boxType)
|
||
|
||
|
||
this.boxActivityLeftList.forEach((item,index) => {
|
||
|
||
this.$set(this.boxActivityLeftList[index],'visible',false)
|
||
})
|
||
this.boxActivityLeftList.forEach((item,index) => {
|
||
if(type === item.source){
|
||
this.activeDetail = this.boxActivityLeftList[index]
|
||
this.$set(this.boxActivityLeftList[index],'visible',true)
|
||
console.log("this.boxActivityLeftList[index]:",this.boxActivityLeftList[index])
|
||
}
|
||
})
|
||
console.log(this.boxActivityLeftList)
|
||
if(type === 'SPECIAL_PRICE'){
|
||
this.activityClickShow = true
|
||
}
|
||
if(type === 'PREFERENTIAL_DAY'){
|
||
this.activityClickShow = true
|
||
}
|
||
if(type === 'ROOKIE'){
|
||
this.activityClickShow = true
|
||
// 点击打开新人福利数
|
||
reportClickFn('box_clk_activity_num')
|
||
}
|
||
if(type === 'PERIOD'){
|
||
this.activityClickShow = true
|
||
}
|
||
if(type === 'SPECIAL_PRICE'){
|
||
// 点击打开薅羊毛数
|
||
reportClickFn('box_special_price_clk_activity_num')
|
||
}
|
||
if(type === 'NINE'){
|
||
// 点击打开九连抽数
|
||
reportClickFn('box_nine_clk_num')
|
||
this.activityClickShow = true
|
||
}
|
||
if(type === 'PERIOD'){
|
||
// 点击打开周期活动
|
||
reportClickFn('box_period_clk_num')
|
||
this.activityClickShow = true
|
||
}
|
||
// this.floatCkVis = true
|
||
// this.isActivityClick = true
|
||
// this.boxType = type
|
||
// console.log(this.boxType)
|
||
|
||
|
||
// // this.boxActivityLeftList
|
||
// // activityClickShow
|
||
|
||
|
||
// this.boxActivityList.forEach((item,index) => {
|
||
// this.$set(this.boxActivityList[index],'visible',false)
|
||
// })
|
||
// this.boxActivityList.forEach((item,index) => {
|
||
// if(type === item.source){
|
||
// this.$set(this.boxActivityList[index],'visible',true)
|
||
// }
|
||
// })
|
||
// console.log(this.boxActivityList)
|
||
// if(type === 'SPECIAL_PRICE'){
|
||
// this.activityShow = true
|
||
// }
|
||
// if(type === 'PREFERENTIAL_DAY'){
|
||
// this.activityShow = true
|
||
// }
|
||
// if(type === 'ROOKIE'){
|
||
// this.activityShow = true
|
||
// // 点击打开新人福利数
|
||
// reportClickFn('box_clk_activity_num')
|
||
// }
|
||
// if(type === 'SPECIAL_PRICE'){
|
||
// // 点击打开薅羊毛数
|
||
// reportClickFn('box_special_price_clk_activity_num')
|
||
// }
|
||
},
|
||
// 购买组件 购买
|
||
goBuy(type) {
|
||
this.buyVisible = false
|
||
},
|
||
// 点击中奖播报
|
||
prizeCk(item){
|
||
console.log(item)
|
||
this.prizeData = item.data
|
||
this.prizeVisible = true
|
||
},
|
||
prizeClose(){
|
||
this.prizeVisible = false
|
||
},
|
||
buyPrize(){
|
||
uni.navigateTo({
|
||
url:`/pages/index/boxDetail?id=${this.prizeData.boxId}&prize=prize&prizeType=${this.prizeData.type}`
|
||
})
|
||
this.prizeVisible = false
|
||
},
|
||
// 新手引导下一步
|
||
guidanceNext(){
|
||
this.zIndex = 10
|
||
this.guidanceFloatWindow = false
|
||
if(this.guidanceIndex < 3){
|
||
this.guidanceIndex += 1
|
||
}else{
|
||
this.guidanceVisible = false
|
||
this.freeCk()
|
||
}
|
||
|
||
},
|
||
guidanceAccomplish(){
|
||
if(this.guidanceIndex === 3){
|
||
setTimeout(() => {
|
||
this.guidanceBtn = false
|
||
},2000)
|
||
if(this.guidanceBtn){
|
||
return
|
||
}
|
||
this.guidanceBtn = true
|
||
setIndexGuideApi({status:false}).then(res => {
|
||
if(res.code !== 200){
|
||
this.$api.msg(res.message)
|
||
}
|
||
this.guidanceVisible = false
|
||
uni.navigateTo({
|
||
url:`/pages/index/drawFree?type=PENTA&boxId=${this.list[this.current].id}`
|
||
})
|
||
}).catch(err => {
|
||
this.guidanceVisible = false
|
||
uni.navigateTo({
|
||
url:`/pages/index/drawFree?type=PENTA&boxId=${this.list[this.current].id}`
|
||
})
|
||
})
|
||
|
||
}
|
||
},
|
||
guidanceClose(){
|
||
this.guidanceVisible = false
|
||
this.guidanceFloatWindow = false
|
||
setIndexGuideApi({status:false}).then(res => {
|
||
if(res.code !== 200){
|
||
this.$api.msg(res.message)
|
||
}
|
||
}).catch(err => {
|
||
|
||
})
|
||
},
|
||
guidanceOpen(){
|
||
this.zIndex = 9999
|
||
this.guidanceIndex = 0
|
||
this.guidanceFloatWindow = true
|
||
this.guidanceVisible = true
|
||
},
|
||
modalClose(){
|
||
this.isModal = false
|
||
}
|
||
},
|
||
onHide() {
|
||
// 在页面离开时清除定时器
|
||
clearInterval(this.rookieTimer)
|
||
clearInterval(this.boxResultTimer)
|
||
this.isCustomerPath = false
|
||
// if(this.isCustomerPath){
|
||
// this.isCustomerPath = false
|
||
// // uni.navigateBack()
|
||
// // uni.switchTab({
|
||
// // url:`/pages/index/new-index`
|
||
// // })
|
||
// console.log("我返回了")
|
||
// }
|
||
|
||
},
|
||
onUnload() {
|
||
// 在页面离开时清除定时器
|
||
clearInterval(this.rookieTimer)
|
||
clearInterval(this.boxResultTimer)
|
||
},
|
||
onTabItemTap() {
|
||
// 首页tabbar点击次数home_ranging_clk
|
||
// reportClickFn('index_tabbar');
|
||
// console.log("我点击了首页的bar")
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.new-index-page {
|
||
width: 100%;
|
||
// height: 100vh;
|
||
overflow: hidden;
|
||
background-image: url('@/static/home/bg.jpg');
|
||
background-repeat: no-repeat;
|
||
background-size: 100%;
|
||
position: relative;
|
||
.free-main{
|
||
width: 126rpx;
|
||
height: 127rpx;
|
||
position: absolute;
|
||
left: 16rpx;
|
||
top: 750rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 10;
|
||
.free{
|
||
width: 91rpx;
|
||
height: 91rpx;
|
||
background-image: url('@/static/home/mfsw.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
font-weight: 500;
|
||
font-size: 15rpx;
|
||
color: #EBF9FE;
|
||
text-align: center;
|
||
padding-top: 70rpx;
|
||
}
|
||
}
|
||
.top-img {
|
||
position: absolute;
|
||
top: 0;
|
||
// top: -160rpx;
|
||
width: 750rpx;
|
||
height: 653rpx;
|
||
z-index: 1;
|
||
}
|
||
.top-zm-icon{
|
||
position: absolute;
|
||
width: 650rpx;
|
||
top: -140rpx;
|
||
left: 50rpx;
|
||
z-index: 2;
|
||
// border: 1px solid red;
|
||
// width: 100%;
|
||
}
|
||
|
||
.home-main {
|
||
z-index: 3;
|
||
position: relative;
|
||
|
||
.home-header {
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 9rpx 23rpx 0 29rpx;
|
||
|
||
.header-activity {
|
||
z-index: 3;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.header-activity-item {
|
||
margin-right: 3rpx;
|
||
width: 147rpx;
|
||
height: 149rpx;
|
||
// width: 107rpx;
|
||
// height: 109rpx;
|
||
position: relative;
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
font-weight: 500;
|
||
font-size: 15rpx;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
// padding-top: 80rpx;
|
||
|
||
.activity-dian {
|
||
position: absolute;
|
||
// top: 11rpx;
|
||
// right: 3rpx;
|
||
bottom: 38rpx;
|
||
right: 14rpx;
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
// background: #FF0000;
|
||
border-radius: 50%;
|
||
z-index: 2;
|
||
}
|
||
}
|
||
|
||
.coupon {
|
||
background-image: url('@/static/home/ttlq.png');
|
||
}
|
||
|
||
.card {
|
||
background-image: url('@/static/home/kb.png');
|
||
}
|
||
|
||
.wechat {
|
||
background-image: url('@/static/home/wxfl.png');
|
||
}
|
||
|
||
.task {
|
||
// background-image: url('@/static/home/rwqd.png');
|
||
}
|
||
}
|
||
|
||
.header-rule {
|
||
display: flex;
|
||
align-items: center;
|
||
z-index: 3;
|
||
|
||
.rule-item {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
background-image: url('@/static/home/wf.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
margin-left: 11rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 500;
|
||
font-size: 15rpx;
|
||
color: #1C4362;
|
||
position: relative;
|
||
.dian{
|
||
position: absolute;
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
bottom: 0;
|
||
right: 0;
|
||
}
|
||
.music{
|
||
width: 21rpx;
|
||
height: 21rpx;
|
||
}
|
||
}
|
||
@keyframes rotateAnimation {
|
||
from {
|
||
transform: rotate(0deg);
|
||
}
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
.rotate-music {
|
||
animation: rotateAnimation 3s linear infinite; /* 2秒旋转一周，线性过渡，无限循环 */
|
||
}
|
||
}
|
||
}
|
||
|
||
.rank {
|
||
|
||
z-index: 11;
|
||
// width: 121rpx;
|
||
// height: 96rpx;
|
||
width: 141rpx;
|
||
height: 116rpx;
|
||
font-weight: 500;
|
||
font-size: 22rpx;
|
||
// font-size: 15rpx;
|
||
color: #FFFFFF;
|
||
display: flex;
|
||
text-align: center;
|
||
|
||
justify-content: center;
|
||
background-image: url('@/static/home/phb.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
position: absolute;
|
||
// top: 127rpx;
|
||
// left: 36rpx;
|
||
top: 14rpx;
|
||
left: 188rpx;
|
||
// left: 29rpx;
|
||
.rank-item{
|
||
position: relative;
|
||
width: 121rpx;
|
||
height: 96rpx;
|
||
// padding-top: 43rpx;
|
||
padding-top: 46rpx;
|
||
.activity-dian {
|
||
position: absolute;
|
||
bottom: -12rpx;
|
||
right: 13rpx;
|
||
// top: 11rpx;
|
||
// right: 13rpx;
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
// background: #FF0000;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.left-icon {
|
||
width: 61rpx;
|
||
height: 61rpx;
|
||
position: absolute;
|
||
left: 41rpx;
|
||
top: 444rpx;
|
||
z-index: 11;
|
||
}
|
||
|
||
.right-icon {
|
||
width: 61rpx;
|
||
height: 61rpx;
|
||
position: absolute;
|
||
right: 41rpx;
|
||
top: 444rpx;
|
||
z-index:11;
|
||
}
|
||
|
||
.box-main {
|
||
// padding-top: 225rpx;
|
||
position: relative;
|
||
.jt-icon{
|
||
position: absolute;
|
||
top: 80rpx;
|
||
left: 0;
|
||
width: 100%;
|
||
z-index: 1;
|
||
}
|
||
.swiper {
|
||
position: relative;
|
||
z-index: 10;
|
||
// height: 295rpx;
|
||
height: 520rpx;
|
||
|
||
|
||
.swiper-items {
|
||
z-index: 10;
|
||
padding-top: 225rpx;
|
||
height: 520rpx;
|
||
position: relative;
|
||
|
||
.swiper-img-view {
|
||
z-index: 10;
|
||
width: 100%;
|
||
height: 295rpx;
|
||
|
||
.swiper-img {
|
||
z-index: 10;
|
||
display: block;
|
||
margin: 0 auto;
|
||
width: 495rpx;
|
||
height: 295rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.look{
|
||
position: absolute;
|
||
z-index: 11;
|
||
top: 400rpx;
|
||
right: 90rpx;
|
||
.look-img{
|
||
width: 104rpx;
|
||
height: 104rpx;
|
||
animation: pressAnimation 2s linear infinite;
|
||
}
|
||
.look-txt{
|
||
width: 104rpx;
|
||
text-align: right;
|
||
font-family: YouSheBiaoTiHei;
|
||
font-size: 23rpx;
|
||
color: #FF4800;
|
||
margin-top: -20rpx;
|
||
}
|
||
@keyframes pressAnimation {
|
||
// 0% {
|
||
// transform: translateX(0) translateY();
|
||
// }
|
||
// 100% {
|
||
// transform: translateX(-10px) translateY(0px); /* 向左上方移动10px */
|
||
// }
|
||
0% {
|
||
transform: translateX(0) translateY() rotate(0deg);
|
||
}
|
||
25% {
|
||
transform: translateX(0px) translateY(-10rpx) rotate(0deg); /* 向左上方移动10px */
|
||
}
|
||
50% {
|
||
transform: translateX(-10rpx) translateY(0rpx) rotate(-10deg);
|
||
}
|
||
100% {
|
||
transform: translateX(0) translateY() rotate(0deg);
|
||
}
|
||
}
|
||
}
|
||
.guidance-icon{
|
||
position: absolute;
|
||
width: 49rpx;
|
||
height: 149rpx;
|
||
left: 0;
|
||
z-index: 20;
|
||
top: 560rpx;
|
||
}
|
||
.footer-tai {
|
||
position: relative;
|
||
width: 661rpx;
|
||
height: 215rpx;
|
||
z-index: 2 !important;
|
||
background-image: url('@/static/home/tai.gif');
|
||
// background-image: url('@/static/home/tai.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
text-align: center;
|
||
margin-top: -50rpx;
|
||
margin-left: 45rpx;
|
||
|
||
.box-price {
|
||
padding-top: 96rpx;
|
||
color: #1C4362;
|
||
font-size: 46rpx;
|
||
font-family: YouSheBiaoTiHei;
|
||
.price-last{
|
||
font-size: 26rpx;
|
||
}
|
||
}
|
||
|
||
.free-gu{
|
||
position: absolute;
|
||
right: -38rpx;
|
||
bottom: -30rpx;
|
||
width: 126rpx;
|
||
height: 127rpx;
|
||
background-image: url('@/static/guidance-index/free-gl.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
z-index: 9999;
|
||
}
|
||
|
||
|
||
}
|
||
|
||
.footer {
|
||
position: relative;
|
||
width: 100%;
|
||
z-index: 1 !important;
|
||
background-image: url('@/static/home/footer.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
padding-top: 175rpx;
|
||
margin-top: -150rpx;
|
||
|
||
.footer-swiper {
|
||
height: 244rpx;
|
||
.footer-swiper-item {
|
||
width: 199rpx;
|
||
height: 244rpx;
|
||
.swiper-tai {
|
||
width: 199rpx;
|
||
height: 244rpx;
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
.box-s-h{
|
||
position: absolute;
|
||
width: 184rpx;
|
||
height: 175rpx;
|
||
left: 7rpx;
|
||
top: 0;
|
||
z-index: 1;
|
||
}
|
||
.box-s-t{
|
||
position: absolute;
|
||
bottom: 0;
|
||
width: 199rpx;
|
||
height: 244rpx;
|
||
}
|
||
.box-h{
|
||
position: absolute;
|
||
width: 148rpx;
|
||
height: 161rpx;
|
||
left: 26rpx;
|
||
top: 7rpx;
|
||
z-index: 1;
|
||
}
|
||
.box-t{
|
||
position: absolute;
|
||
bottom: 0;
|
||
width: 161rpx;
|
||
height: 204rpx;
|
||
}
|
||
.swiper-name{
|
||
font-size: 31rpx;
|
||
color: #7DA9B8;
|
||
font-family: YouSheBiaoTiHei;
|
||
z-index: 2;
|
||
padding-top: 166rpx;
|
||
width: 141rpx;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
margin: 0 auto;
|
||
text-align: center;
|
||
}
|
||
|
||
.swiper-name-active{
|
||
z-index: 2;
|
||
font-size: 38rpx;
|
||
color: #7DA9B8;
|
||
font-family: YouSheBiaoTiHei;
|
||
padding-top: 166rpx;
|
||
width: 179rpx;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.footer-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 9rpx;
|
||
position: relative;
|
||
|
||
.footer-activity {
|
||
margin-left: 33rpx;
|
||
width: 188rpx;
|
||
height: 188rpx;
|
||
background-image: url('@/static/home/gdhd.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
display: flex;
|
||
align-items: center;
|
||
// justify-content: center;
|
||
padding-top: 40rpx;
|
||
flex-direction: column;
|
||
font-family: YouSheBiaoTiHei;
|
||
font-size: 39rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
.dian{
|
||
position: absolute;
|
||
width: 34rpx;
|
||
height: 34rpx;
|
||
bottom: 24rpx;
|
||
left: 180rpx;
|
||
}
|
||
.footer-activity-gif{
|
||
margin-left: 33rpx;
|
||
width: 188rpx;
|
||
height: 188rpx;
|
||
}
|
||
|
||
.footer-open {
|
||
margin-left: 6rpx;
|
||
width: 495rpx;
|
||
height: 188rpx;
|
||
background-image: url('@/static/home/ljkq.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
font-family: YouSheBiaoTiHei;
|
||
font-size: 71rpx;
|
||
color: #FFFFFF;
|
||
display: flex;
|
||
// align-items: center;
|
||
justify-content: center;
|
||
padding-top: 36rpx;
|
||
// padding: 57rpx 0 0 109rpx;
|
||
}
|
||
.footer-open-gif{
|
||
margin-left: 6rpx;
|
||
width: 495rpx;
|
||
height: 188rpx;
|
||
// border: 1px solid red;
|
||
}
|
||
}
|
||
|
||
.footer-txt {
|
||
font-size: 16rpx;
|
||
color: #75B0C4;
|
||
text-align: center;
|
||
padding: 29rpx 0 19rpx 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
}
|
||
|
||
.dlg {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100vh;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
z-index: 999;
|
||
|
||
|
||
.activity-main {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 579rpx;
|
||
.activity-img {
|
||
width: 579rpx;
|
||
height: 549rpx;
|
||
border-radius: 20rpx;
|
||
display: block;
|
||
margin: 20rpx auto;
|
||
z-index: 2;
|
||
}
|
||
|
||
.now-buy {
|
||
width: 296rpx;
|
||
height: 95rpx;
|
||
// background-image: url('@/static/home/dlg-ljgm.png');
|
||
// background-repeat: no-repeat;
|
||
// background-size: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-family: YouSheBiaoTiHei;
|
||
font-size: 45rpx;
|
||
color: #FFFFFF;
|
||
margin: 0 auto;
|
||
// width: 348rpx;
|
||
// // height: 120rpx;
|
||
// display: block;
|
||
// margin: -120rpx auto 0 auto;
|
||
// z-index: 1;
|
||
}
|
||
|
||
.dlg-close-img {
|
||
display: block;
|
||
width: 81rpx;
|
||
height: 81rpx;
|
||
z-index: 9999;
|
||
margin: 55rpx auto 0 auto;
|
||
}
|
||
}
|
||
.more-bg{
|
||
width: 100%;
|
||
height: 1174rpx;
|
||
background-image: url('@/static/home/gdhdbj.png');
|
||
background-repeat: no-repeat;
|
||
background-size: 100%;
|
||
position: absolute;
|
||
bottom: 0;
|
||
.more-header{
|
||
padding-top: 16rpx;
|
||
padding-left:32rpx;
|
||
height: 138rpx;
|
||
position: relative;
|
||
.more-title{
|
||
width: 292rpx;
|
||
height: 88rpx;
|
||
|
||
}
|
||
.more-close{
|
||
position: absolute;
|
||
top:2rpx;
|
||
right: 32rpx;
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
}
|
||
}
|
||
.more-content{
|
||
height: 1036rpx;
|
||
.more-item{
|
||
width: 686rpx;
|
||
height: 280rpx;
|
||
border-radius: 16rpx;
|
||
border: 2rpx solid #FFFFFF;
|
||
margin-left: 32rpx;
|
||
margin-top: 24rpx;
|
||
position: relative;
|
||
background-position: 50%;
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
.more-item-title{
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 72rpx;
|
||
// background: rgba(255,255,255,0.4);
|
||
border-radius: 0px 0px 16rpx 16rpx;
|
||
padding: 0 24rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.titles{
|
||
width: 450rpx;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
color: #000000;
|
||
}
|
||
.title-imgs{
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.log-out{
|
||
width: 590rpx;
|
||
height: 300rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 16rpx;
|
||
.log-out-tip{
|
||
height: 200rpx;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: rgba(0,0,0,0.85);
|
||
text-align: center;
|
||
padding: 64rpx 30rpx;
|
||
}
|
||
.log-out-footer{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
border-top: 2rpx solid rgba(0,0,0,0.06);
|
||
height: 100rpx;
|
||
.cancel{
|
||
width: 294rpx;
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #000000;
|
||
text-align: center;
|
||
border-right: 1px solid rgba(0,0,0,0.06);
|
||
}
|
||
.log-out-submit{
|
||
width: 294rpx;
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #E55353;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
.prize {
|
||
position: absolute;
|
||
top: 140rpx;
|
||
left: 32rpx;
|
||
z-index: 30;
|
||
|
||
.prize-item {
|
||
width: 520rpx;
|
||
height: 66rpx;
|
||
background: linear-gradient(90deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
|
||
border-radius: 28rpx 0px 0px 28rpx;
|
||
opacity: 0.8;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0rpx 6rpx;
|
||
|
||
|
||
.trumpet-swiper{
|
||
width: 520rpx;
|
||
height: 66rpx;
|
||
.trumpet-swiper-item{
|
||
width: 520rpx;
|
||
height: 66rpx;
|
||
line-height: 66rpx;
|
||
.item-txt{
|
||
margin-left: 16rpx;
|
||
width: 520rpx;
|
||
font-size: 28rpx;
|
||
color: #FFFFFF;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
}
|
||
}
|
||
|
||
.item-content {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: #fff;
|
||
|
||
.shop-icon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
background-position: 50% 50%;
|
||
}
|
||
}
|
||
|
||
.item-txt {
|
||
// margin-left: 16rpx;
|
||
// width: 320rpx;
|
||
// font-size: 24rpx;
|
||
// color: #FFFFFF;
|
||
// overflow: hidden;
|
||
// white-space: nowrap;
|
||
// text-overflow: ellipsis;
|
||
}
|
||
}
|
||
}
|
||
.prize-dlg{
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100vh;
|
||
background-color: rgba(0,0,0,0.3);
|
||
z-index: 999;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
.prize-main{
|
||
// border: 1px solid red;
|
||
// position: relative;
|
||
.header{
|
||
width: 100%;
|
||
text-align: center;
|
||
// font-family: YouSheBiaoTiHei;
|
||
font-size: 50rpx;
|
||
color: #fff;
|
||
// position: absolute;
|
||
// top: -150rpx;
|
||
}
|
||
.header-box{
|
||
width: 100%;
|
||
text-align: center;
|
||
font-family: YouSheBiaoTiHei;
|
||
font-size: 58rpx;
|
||
color: #fff;
|
||
// position: absolute;
|
||
// top: -70rpx;
|
||
}
|
||
.card{
|
||
width: 660rpx;
|
||
height: 890rpx;
|
||
background-repeat: no-repeat;
|
||
background-size: 100%;
|
||
z-index: 20;
|
||
padding-top: 220rpx;
|
||
// position: relative;
|
||
// border: 1px solid red;
|
||
.shop-img{
|
||
width: 450rpx;
|
||
height: 450rpx;
|
||
display: block;
|
||
margin: 0 auto;
|
||
// border: 1px solid red;
|
||
|
||
}
|
||
.shop{
|
||
// position: absolute;
|
||
// // top: 548rpx;
|
||
// top: 668rpx;
|
||
// left: 70rpx;
|
||
width: 410rpx;
|
||
margin: 0 auto;
|
||
margin-top: 60rpx;
|
||
// border: 1px solid red;
|
||
.name{
|
||
width: 410rpx;
|
||
text-align: center;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
font-weight: bold;
|
||
font-size: 30rpx;
|
||
// color: #99754D;
|
||
}
|
||
.point{
|
||
width: 410rpx;
|
||
text-align: center;
|
||
margin-top: 12rpx;
|
||
font-size: 30rpx;
|
||
// color: #99754D;
|
||
}
|
||
.price{
|
||
width: 410rpx;
|
||
text-align: center;
|
||
margin-top: 12rpx;
|
||
font-size: 60rpx;
|
||
// color: #99754D;
|
||
}
|
||
}
|
||
}
|
||
.rare-icon{
|
||
background-image:url('@/static/grade/RARE.png');
|
||
color: #5a2fc8 ;
|
||
}
|
||
.supreme-icon{
|
||
background-image:url('@/static/grade/SUPREME.png');
|
||
color: #7d451e;
|
||
}
|
||
.hidden-icon{
|
||
background-image:url('@/static/grade/HIDDEN.png');
|
||
color: #2c4dbb;
|
||
}
|
||
.normal-icon{
|
||
background-image:url('@/static/grade/NORMAL.png');
|
||
color:#203456
|
||
}
|
||
}
|
||
.again-icon{
|
||
width: 228rpx;
|
||
height: 96rpx;
|
||
font-size: 44rpx;
|
||
// display: block;
|
||
// margin-top: -40rpx;
|
||
z-index: 21;
|
||
color: rgba(255,255,255,0.9);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-family: YouSheBiaoTiHei;
|
||
margin: 20rpx;
|
||
background-image: url('@/static/new/tip/btn.png');
|
||
background-repeat: no-repeat;
|
||
background-size: 100%;
|
||
position: relative;
|
||
.no-like{
|
||
position: absolute;
|
||
color: #fff;
|
||
font-size: 20rpx;
|
||
font-family: serif;
|
||
bottom: 0;
|
||
}
|
||
// margin: 8rpx auto 8rpx auto;
|
||
}
|
||
.close-icon{
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
display: block;
|
||
margin: 20rpx auto;
|
||
z-index: 22;
|
||
}
|
||
}
|
||
|
||
.guidance-dlg{
|
||
position: fixed;
|
||
width: 100%;
|
||
height: 100vh;
|
||
z-index: 9990;
|
||
top: 0;
|
||
left: 0;
|
||
background-color: rgba(0,0,0,0.6);
|
||
display: flex;
|
||
// align-items: center;
|
||
justify-content: center;
|
||
.guidance-close{
|
||
width: 65rpx;
|
||
height: 65rpx;
|
||
position: absolute;
|
||
top: 30rpx;
|
||
right: 30rpx;
|
||
}
|
||
.guidance-main{
|
||
.guidance-active-icon{
|
||
margin-top: 410rpx;
|
||
width: 656rpx;
|
||
height: 431rpx;
|
||
margin-left: 87rpx;
|
||
}
|
||
.guidance-box{
|
||
margin-top: 190rpx;
|
||
position: relative;
|
||
width: 569rpx;
|
||
height: 643rpx;
|
||
.guidance-box-arr{
|
||
position: absolute;
|
||
width: 152rpx;
|
||
height: 93rpx;
|
||
top: 320rpx;
|
||
}
|
||
.left-arr{
|
||
left: -60rpx;
|
||
animation: leftAnimation 1s ease-in-out infinite;
|
||
}
|
||
|
||
.right-arr{
|
||
right: -60rpx;
|
||
animation: rightAnimation 1s ease-in-out infinite;
|
||
}
|
||
.guidance-box-icon{
|
||
width: 569rpx;
|
||
height: 643rpx;
|
||
}
|
||
|
||
@keyframes leftAnimation {
|
||
0% {
|
||
transform: translateX(0) translateY() rotate(0deg);
|
||
}
|
||
50% {
|
||
transform: translateX(20rpx) translateY(0rpx) rotate(0deg);
|
||
}
|
||
100% {
|
||
transform: translateX(0) translateY() rotate(0deg);
|
||
}
|
||
}
|
||
@keyframes rightAnimation {
|
||
0% {
|
||
transform: translateX(0) translateY() rotate(0deg);
|
||
}
|
||
50% {
|
||
transform: translateX(-20rpx) translateY(0rpx) rotate(0deg);
|
||
}
|
||
100% {
|
||
transform: translateX(0) translateY() rotate(0deg);
|
||
}
|
||
}
|
||
}
|
||
.guidance-box-btn{
|
||
// background-color: #FEFEFE;
|
||
// border: 8rpx solid #778E93;
|
||
// border-radius: 50px;
|
||
position: absolute;
|
||
top: 1100rpx;
|
||
left: 250rpx;
|
||
width: 431rpx;
|
||
height: 200rpx;
|
||
background-image: url('@/static/guidance-index/open-gl.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
.guidance-box-btn-gif{
|
||
position: absolute;
|
||
width: 495rpx;
|
||
height: 188rpx;
|
||
}
|
||
|
||
.finger-icon {
|
||
width: 79rpx;
|
||
height: 85rpx;
|
||
position: absolute;
|
||
bottom: -30rpx;
|
||
right: 40rpx;
|
||
animation: fingerAnimation 1s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes fingerAnimation {
|
||
0% {
|
||
transform: translateX(0) translateY() rotate(0deg);
|
||
}
|
||
// 25% {
|
||
// transform: translateX(0px) translateY(0rpx) rotate(0deg); /* 向左上方移动10px */
|
||
// }
|
||
50% {
|
||
transform: translateX(0rpx) translateY(-15rpx) rotate(0deg);
|
||
}
|
||
100% {
|
||
transform: translateX(0) translateY() rotate(0deg);
|
||
}
|
||
}
|
||
}
|
||
.guidance-buy-icon{
|
||
margin-top: 130rpx;
|
||
width: 507rpx;
|
||
height: 707rpx;
|
||
}
|
||
.guidance-free-icon{
|
||
margin-top: 410rpx;
|
||
width: 509rpx;
|
||
height: 403rpx;
|
||
}
|
||
.guidance-next{
|
||
width: 216rpx;
|
||
height: 73rpx;
|
||
display: block;
|
||
margin: 0 auto;
|
||
margin-top: 66rpx;
|
||
}
|
||
}
|
||
.free-gu{
|
||
width: 126rpx;
|
||
height: 127rpx;
|
||
position: absolute;
|
||
right: 16rpx;
|
||
top: 750rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 20;
|
||
background-image: url('@/static/guidance-index/free-gl.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
.free{
|
||
width: 91rpx;
|
||
height: 91rpx;
|
||
background-image: url('@/static/home/mfsw.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
font-weight: 500;
|
||
font-size: 15rpx;
|
||
color: #EBF9FE;
|
||
text-align: center;
|
||
padding-top: 70rpx;
|
||
}
|
||
.finger-icon {
|
||
width: 79rpx;
|
||
height: 85rpx;
|
||
position: absolute;
|
||
bottom: -60rpx;
|
||
right: 0rpx;
|
||
animation: fingerAnimation 1s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes fingerAnimation {
|
||
0% {
|
||
transform: translateX(0) translateY() rotate(0deg);
|
||
}
|
||
// 25% {
|
||
// transform: translateX(0px) translateY(0rpx) rotate(0deg); /* 向左上方移动10px */
|
||
// }
|
||
50% {
|
||
transform: translateX(0rpx) translateY(-15rpx) rotate(0deg);
|
||
}
|
||
100% {
|
||
transform: translateX(0) translateY() rotate(0deg);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.agreement-page{
|
||
width: 100%;
|
||
height: 100vh;
|
||
background-color: rgba(0,0,0,0.6);
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 99999;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
.agreement-dlg{
|
||
width: 590rpx;
|
||
// height: 300rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 16rpx;
|
||
.agreement-tip{
|
||
// height: 200rpx;
|
||
font-weight: 500;
|
||
font-size: 42rpx;
|
||
color: rgba(0,0,0,0.85);
|
||
// line-height: 200rpx;
|
||
text-align: center;
|
||
padding-top: 30rpx;
|
||
}
|
||
.agreement-center{
|
||
margin: 20rpx 0;
|
||
font-size: 26rpx;
|
||
color: #000;
|
||
padding: 0 50rpx;
|
||
text-align: center;
|
||
.red{
|
||
color: #409EFF;
|
||
}
|
||
}
|
||
.agreement-footer{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
border-top: 2rpx solid rgba(0,0,0,0.06);
|
||
height: 100rpx;
|
||
.cancel{
|
||
width: 294rpx;
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #000000;
|
||
text-align: center;
|
||
border-right: 1px solid rgba(0,0,0,0.06);
|
||
}
|
||
.agreement-submit{
|
||
width: 294rpx;
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #E55353;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.whitePage{
|
||
background-color: #fff;
|
||
}
|
||
.activity-rank-modal{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
.rank{
|
||
width: 601rpx;
|
||
height: 903rpx;
|
||
background-image: url('@/static/activity/dlg-bg.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
padding-top: 110rpx;
|
||
.rank-item{
|
||
width: 480rpx;
|
||
height: 125rpx;
|
||
margin: 0 auto;
|
||
background-image: url('@/static/activity/11.png');
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
padding: 22rpx;
|
||
.rank-item-info{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
color: #FFFAEB;
|
||
.name{
|
||
font-weight: bold;
|
||
font-size: 24rpx;
|
||
background-color: rgba(0,0,0,0.3);
|
||
border-radius: 50rpx;
|
||
padding: 4rpx 20rpx;
|
||
width: 155rpx;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.num{
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
.award{
|
||
display: flex;
|
||
align-items: center;
|
||
font-weight: bold;
|
||
font-size: 22rpx;
|
||
color: #FFFAEB;
|
||
margin-top: 6rpx;
|
||
.award-icon{
|
||
width: 39rpx;
|
||
height: 33rpx;
|
||
}
|
||
.award-txt{
|
||
width: 369rpx;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
margin-left: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
.rank-item:nth-child(2){
|
||
background-image: url('@/static/activity/22.png');
|
||
}
|
||
.rank-item:nth-child(3){
|
||
background-image: url('@/static/activity/33.png');
|
||
}
|
||
.rank-item:nth-child(4){
|
||
background-image: url('@/static/activity/44.png');
|
||
}
|
||
.rank-item:nth-child(5){
|
||
background-image: url('@/static/activity/55.png');
|
||
}
|
||
.rank-footer{
|
||
margin: 20rpx auto;
|
||
width: 433rpx;
|
||
font-size: 18rpx;
|
||
color: #FFFAEB;
|
||
text-align: center;
|
||
}
|
||
}
|
||
.activity-rank-close{
|
||
width: 81rpx;
|
||
height: 81rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
}
|
||
.activity-rank-dlg{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
.activity-rank-dlg-img{
|
||
width: 700rpx;
|
||
height: 720rpx;
|
||
}
|
||
.activity-rank-dlg-close{
|
||
width: 81rpx;
|
||
height: 81rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
}
|
||
</style> |