1292 lines
34 KiB
Vue
1292 lines
34 KiB
Vue
<template>
|
|
<view class="new-index-page">
|
|
<view class="header">
|
|
<view class="point">
|
|
<image src="@/static/an/point.gif" mode="" class="point-icon"></image>
|
|
<view class="point-value">{{infoDetail.coins | million}}</view>
|
|
</view>
|
|
<view class="top-up" @click="topUpCk">充值</view>
|
|
<view class="header-item" @click="handleCustomer">
|
|
<image src="@/static/new/kf.png" mode="" class="item-img"></image>
|
|
客服
|
|
</view>
|
|
<view class="header-item" @click="notice">
|
|
<image src="@/static/new/gg.png" mode="" class="item-img"></image>
|
|
公告
|
|
</view>
|
|
<view class="header-item" @click="rule">
|
|
<image src="@/static/new/gz.png" mode="" class="item-img"></image>
|
|
规则
|
|
</view>
|
|
<image src="@/static/new/header.png" mode="" class="header-bg"></image>
|
|
<!-- <view class="tops">
|
|
<TopCom></TopCom>
|
|
</view> -->
|
|
<!--
|
|
-->
|
|
</view>
|
|
<view class="main">
|
|
<floatWindow v-if="activityDetail" :consumptionTime="activityDetail.expireTime" :source="activityDetail.source" :isConsumption="activityDetail.source === 'PREFERENTIAL_DAY'" :isDiscounts="activityDetail.source === 'ROOKIE'" @click="floatCk"></floatWindow>
|
|
<!-- <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> -->
|
|
<!-- 气泡 -->
|
|
<!-- <QpCom @click="goDetail(list[current])"></QpCom> -->
|
|
<!-- 背景线 -->
|
|
<!-- <view class="line">
|
|
<LineCom></LineCom>
|
|
</view> -->
|
|
<!-- <view class="raffle-main">
|
|
<RaffleCom></RaffleCom>
|
|
</view> -->
|
|
<view class="raffle-main">
|
|
<image src="@/static/an/raffle/9.png" mode="aspectFit" style="margin-top: -60rpx;width: 750rpx;"></image>
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<image src="@/static/new/zjt.png" mode="aspectFit" class="arrows-left" @click="changeSwiper('left')"></image>
|
|
<image src="@/static/new/yjt.png" mode="aspectFit" class="arrows-right" @click="changeSwiper('right')"></image>
|
|
|
|
<swiper class="swiper" circular :current="current" @change="swiperChange">
|
|
<swiper-item class="swiper-items" v-for="(item,index) in list" :key="index" @click="goDetail(item)">
|
|
|
|
<image :src="item.coverResource.url" mode="aspectFit" class="swiper-img" v-if="item.coverResource"></image>
|
|
<!-- <view class="swiper-img" v-if="item.coverResource"
|
|
:style="{'background-image': `url(${item.coverResource.url})`}"></view> -->
|
|
<!-- <view class="swiper-img" style="background-image: url('../../static/new/shop.png');"></view> -->
|
|
</swiper-item>
|
|
</swiper>
|
|
<view class="box-price" v-if="list.length > 0 && list[current]">
|
|
<template v-for="(item,index) in list[current].price">
|
|
<text class="price" v-if="item.type === 'SINGLE'" :key="index">{{item.settlement || '/'}}</text>
|
|
</template>
|
|
<text class="num">个/元</text>
|
|
</view>
|
|
<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">
|
|
<image src="@/static/new/box.png" mode="aspectFit"
|
|
:class="{'box-icon-active':current === index,'box-icon':current !== index}"></image>
|
|
<image src="@/static/new/select.png" mode="aspectFit" class="tai-icon-select" v-if="current === index">
|
|
</image>
|
|
<image src="@/static/new/no-select.png" mode="aspectFit" class="tai-icon" v-else></image>
|
|
<view :class="{'tai-txt-active':current === index,'tai-txt':current !== index,}">
|
|
{{item.name}}
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
|
|
</swiper>
|
|
|
|
<view class="footer">
|
|
<view class="more" @click="more">
|
|
<image src="@/static/an/more.gif" mode="aspectFit" class="game-icon"></image>
|
|
<view class="more-txt">更多活动</view>
|
|
</view>
|
|
<BtnCom @click="buy" ref="childComponent"></BtnCom>
|
|
<!-- <view class="btn-animation"></view> -->
|
|
</view>
|
|
</view>
|
|
<!-- 弹框 -->
|
|
<!-- <view class="dlg" v-if="adVisible && adStoreVisible == 'frist'" @click="close">
|
|
<view class="dlg-main">
|
|
<swiper class="dlg-swiper" autoplay :indicator-dots="true" circular previous-margin="120rpx"
|
|
next-margin='120rpx'>
|
|
<swiper-item v-for="(item,index) in popupList" :key="index" class="dlg-swiper-item"
|
|
@click.stop="rollingLink(item)">
|
|
<view class="dlg-swiper-img" v-if="item.coverResource" :style="{'backgroundImage':`url(${item.coverResource.url})`}">
|
|
</view>
|
|
</swiper-item>
|
|
|
|
</swiper>
|
|
<image src="@/static/order/close.png" mode="" class="dlg-close-img" @click="close"></image>
|
|
</view>
|
|
</view> -->
|
|
|
|
<popup-view v-model="adVisible" mode="bottom" border-radius="15">
|
|
<scroll-view scroll-y="true" class="ad-scroll">
|
|
<template v-for="(item,index) in popupList">
|
|
<image :key="index" v-if="item.coverResource" :src="item.coverResource.url" mode="aspectFit" class="ad-img"></image>
|
|
</template>
|
|
</scroll-view>
|
|
</popup-view>
|
|
<!-- 活动盲盒弹窗 -->
|
|
<view class="dlg" v-if="activityShow" @click="activityClose">
|
|
<view class="activity-main" @click.stop="">
|
|
<image src="@/static/new/mryh.png" mode="" class="dlg-title" v-if="activityDetail.source === 'PREFERENTIAL_DAY'"></image>
|
|
<image src="@/static/new/xsmh.png" mode="" class="dlg-title" v-if="activityDetail.source === 'ROOKIE'"></image>
|
|
<image v-if="activityDetail.coverResource" :src="activityDetail.coverResource.url" mode="aspectFit" class="activity-img" @click="goActivityDetail"></image>
|
|
<image src="@/static/new/box/hdgm.png" mode="aspectFit" class="now-buy" @click="goActivityPre"></image>
|
|
<image src="@/static/order/close.png" mode="" class="dlg-close-img" @click="activityClose"></image>
|
|
</view>
|
|
</view>
|
|
<!-- 购买弹窗 -->
|
|
<BuyCom :visible="buyVisible" :item="list[current]" @close="buyClose" @click="goBuy"></BuyCom>
|
|
|
|
<!-- 提示卡弹窗 -->
|
|
<!-- <view class="dlg" v-if="tipVisible" @click="tipVisible = false">
|
|
<view class="tip-dlg" @click.stop="">
|
|
<view class="tip-main">
|
|
<image src="@/static/new/tip/title.png" mode="" class="tip-icon"></image>
|
|
<view class="tip-txt">商品提示语</view>
|
|
<view class="tip-sub">使用提示卡后可提前获得该盲盒的商品提示语</view>
|
|
</view>
|
|
<view class="tip-btn">
|
|
<image src="@/static/new/tip/bsy.png" mode="aspectFit" class="btn-icon" @click="nonuse"></image>
|
|
<view class="btn-icon now" @click="immediate">
|
|
立即使用
|
|
</view>
|
|
</view>
|
|
<image src="@/static/order/close.png" mode="" class="close-tip" @click="tipVisible = false"></image>
|
|
</view>
|
|
</view> -->
|
|
|
|
|
|
<!-- 购买弹窗 -->
|
|
<popup-view v-model="show" mode="bottom" border-radius="15" z-index="1000">
|
|
<BuyBoxCom :detailData="list[current]" @isOk="buySuccess" :boxType="boxType" @coinDeficit="coinDeficit" @payPaid="payPaid"></BuyBoxCom>
|
|
</popup-view>
|
|
|
|
<!-- 去充值 -->
|
|
<popup-view v-model="isTopUp" mode="bottom" border-radius="15" z-index="1000">
|
|
<coinDeficitCom @close="closeTop" @sucClose="sucClose"></coinDeficitCom>
|
|
</popup-view>
|
|
<!-- 是否有未开完的奖品 -->
|
|
<NoOpenCom></NoOpenCom>
|
|
<view class="custom-toast" v-if="isTip">
|
|
<view class="toast-txt">支付成功</view>
|
|
</view>
|
|
<!-- 预加载图片 -->
|
|
<img v-for="(imgSrc, index) in boxList" :key="imgSrc" :src="imgSrc" style="display: none;" />
|
|
<img v-for="(imgSrc, index) in liHuaList" :key="imgSrc" :src="imgSrc" style="display: none;" />
|
|
<img v-for="(imgSrc, index) in gxList" :key="imgSrc" :src="imgSrc" style="display: none;" />
|
|
<img v-for="(imgSrc, index) in gradeList" :key="imgSrc" :src="imgSrc" style="display: none;" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import QpCom from './components/qp.vue'
|
|
import BtnCom from './components/btn.vue'
|
|
import RaffleCom from './components/raffle.vue'
|
|
import LineCom from './components/line.vue'
|
|
import TopCom from './components/top.vue'
|
|
import floatWindow from '@/pages/components/floatWindow.vue'
|
|
import BuyCom from './components/buy.vue'
|
|
import TipCom from './components/tip.vue'
|
|
import BuyBoxCom from './components/buyBox.vue'
|
|
import coinDeficitCom from './components/coinDeficit.vue'
|
|
import NoOpenCom from './components/noOpen.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,
|
|
promptCountApi
|
|
} from '@/API/index.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:[],
|
|
optionTxt:'',
|
|
optionSign:'',
|
|
|
|
|
|
|
|
|
|
// 预加载图片
|
|
boxList: ['static/an/box/1.png', 'static/an/box/2.png', 'static/an/box/3.png', 'static/an/box/4.png',
|
|
'static/an/box/5.png', 'static/an/box/6.png', 'static/an/box/7.png', 'static/an/box/8.png',
|
|
'static/an/box/9.png', 'static/an/box/10.png', 'static/an/box/11.png', 'static/an/box/12.png',
|
|
'static/an/box/13.png', 'static/an/box/14.png', 'static/an/box/15.png', 'static/an/box/16.png',
|
|
'static/an/box/17.png', 'static/an/box/18.png', 'static/an/box/19.png', 'static/an/box/20.png',
|
|
'static/an/box/21.png', 'static/an/box/22.png', 'static/an/box/23.png', 'static/an/box/24.png',
|
|
'static/an/box/25.png', 'static/an/box/26.png', 'static/an/box/27.png', 'static/an/box/28.png',
|
|
'static/an/box/29.png', 'static/an/box/30.png', 'static/an/box/31.png', 'static/an/box/32.png',
|
|
'static/an/box/33.png', 'static/an/box/34.png', 'static/an/box/35.png', 'static/an/box/36.png',
|
|
'static/an/box/37.png', 'static/an/box/38.png', 'static/an/box/39.png', 'static/an/box/40.png',
|
|
'static/an/box/41.png', 'static/an/box/42.png', 'static/an/box/43.png', 'static/an/box/44.png',
|
|
'static/an/box/45.png', 'static/an/box/46.png', 'static/an/box/47.png', 'static/an/box/48.png',
|
|
'static/an/box/49.png', 'static/an/box/50.png', 'static/an/box/51.png', 'static/an/box/52.png',
|
|
'static/an/box/53.png', 'static/an/box/54.png', 'static/an/box/55.png', 'static/an/box/56.png',
|
|
'static/an/box/57.png', 'static/an/box/58.png', 'static/an/box/59.png', 'static/an/box/60.png',
|
|
'static/an/box/61.png', 'static/an/box/62.png', 'static/an/box/63.png', 'static/an/box/64.png',
|
|
'static/an/box/65.png', 'static/an/box/66.png', 'static/an/box/67.png', 'static/an/box/68.png',
|
|
'static/an/box/69.png', 'static/an/box/70.png', 'static/an/box/71.png', 'static/an/box/72.png'
|
|
],
|
|
liHuaList: ['static/an/lihua/1.png', 'static/an/lihua/2.png', 'static/an/lihua/3.png',
|
|
'static/an/lihua/4.png', 'static/an/lihua/5.png', 'static/an/lihua/6.png', 'static/an/lihua/7.png',
|
|
'static/an/lihua/8.png', 'static/an/lihua/9.png', 'static/an/lihua/10.png',
|
|
'static/an/lihua/11.png', 'static/an/lihua/12.png', 'static/an/lihua/13.png',
|
|
'static/an/lihua/14.png', 'static/an/lihua/15.png', 'static/an/lihua/16.png',
|
|
'static/an/lihua/17.png', 'static/an/lihua/18.png', 'static/an/lihua/19.png',
|
|
'static/an/lihua/20.png', 'static/an/lihua/21.png', 'static/an/lihua/22.png',
|
|
'static/an/lihua/23.png', 'static/an/lihua/24.png', 'static/an/lihua/25.png',
|
|
'static/an/lihua/26.png', 'static/an/lihua/27.png', 'static/an/lihua/28.png',
|
|
'static/an/lihua/29.png', 'static/an/lihua/30.png', 'static/an/lihua/31.png',
|
|
'static/an/lihua/32.png', 'static/an/lihua/33.png', 'static/an/lihua/34.png',
|
|
'static/an/lihua/35.png', 'static/an/lihua/36.png', 'static/an/lihua/37.png',
|
|
'static/an/lihua/38.png', 'static/an/lihua/39.png', 'static/an/lihua/40.png',
|
|
'static/an/lihua/41.png', 'static/an/lihua/42.png', 'static/an/lihua/43.png'
|
|
],
|
|
gxList: ['static/an/g/1.png', 'static/an/g/2.png', 'static/an/g/3.png', 'static/an/g/4.png',
|
|
'static/an/g/5.png', 'static/an/g/6.png', 'static/an/g/7.png', 'static/an/g/8.png',
|
|
'static/an/g/9.png', 'static/an/g/10.png', 'static/an/g/11.png', 'static/an/g/12.png',
|
|
'static/an/g/13.png', 'static/an/g/14.png', 'static/an/g/15.png', 'static/an/g/16.png',
|
|
'static/an/g/17.png', 'static/an/g/18.png', 'static/an/g/19.png', 'static/an/g/20.png',
|
|
'static/an/g/21.png', 'static/an/g/22.png', 'static/an/g/23.png', 'static/an/g/24.png',
|
|
'static/an/g/25.png'
|
|
],
|
|
gradeList:[
|
|
'static/result/NORMAL.png','static/result/HIDDEN.png','static/result/RARE.png','static/result/SUPREME.png','static/box/d-box.png'
|
|
],
|
|
|
|
|
|
|
|
show:false,
|
|
boxType:'',//盲盒类型
|
|
isTopUp:false,
|
|
isTip:false,
|
|
rookieTimer:null
|
|
}
|
|
},
|
|
components: {
|
|
QpCom,
|
|
BtnCom,
|
|
RaffleCom,
|
|
LineCom,
|
|
floatWindow,
|
|
TopCom,
|
|
BuyCom,
|
|
TipCom,
|
|
BuyBoxCom,
|
|
coinDeficitCom,
|
|
NoOpenCom
|
|
},
|
|
|
|
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
|
|
}
|
|
}
|
|
|
|
},
|
|
onLoad(option) {
|
|
this.loginParams = option
|
|
// url里有appid和userid的时候需要登录
|
|
if (option.sign) {
|
|
this.login(option)
|
|
} else if (!option.sign && option.appid && option.user_id) {
|
|
this.loginParams.userid = option.user_id
|
|
// 获取当前时间的秒级时间戳
|
|
const currentTimeInSeconds = Math.floor(Date.now() / 1000);
|
|
this.appid = option.appid
|
|
this.userid = option.user_id
|
|
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.getBoxesPinned()
|
|
// if(this.categoriesIndex === 0){
|
|
// this.getBoxesPinned()
|
|
// }else{
|
|
// this.getBoxes()
|
|
// }
|
|
}
|
|
},
|
|
onShow() {
|
|
if (uni.getStorageSync('box-token')) {
|
|
this.getUserInfo()
|
|
this.getCustomer()
|
|
this.getBoxActivity()
|
|
this.getBoxesPinned()
|
|
}else{
|
|
this.getBoxesPinned()
|
|
}
|
|
// console.log(this.$childComponent)
|
|
// this.$refs.childComponent.startAnimation();
|
|
},
|
|
methods: {
|
|
// 新手盲盒订单支付轮训
|
|
payPaid(val){
|
|
// {boxOrderNo:res.data.boxOrderNo,no:res.data.no,boxId:this.previewData.boxId,type:1}
|
|
|
|
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.$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.show = 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位
|
|
},
|
|
more(){
|
|
if(this.popupList.length === 0){
|
|
this.$api.msg('暂无活动')
|
|
return
|
|
}
|
|
this.adVisible = true
|
|
|
|
},
|
|
rollingLink(item) {
|
|
this.adVisible = false
|
|
if (item.link) {
|
|
if (item.link.type === 'INSIDE') {
|
|
uni.navigateTo({
|
|
url: `${item.link.url}`
|
|
})
|
|
} else {
|
|
window.open(item.link.url)
|
|
// uni.navigateTo({
|
|
// url: `/pages/webView/index?url=${item.link}`
|
|
// })
|
|
}
|
|
|
|
}
|
|
},
|
|
// 获取活动盲盒详情
|
|
getBoxActivity(){
|
|
boxActivityApi().then(res => {
|
|
if(res.code === 200){
|
|
this.activityDetail = res.data
|
|
if(this.activityDetail){
|
|
if (!uni.getStorageSync('activityShow')) {
|
|
this.activityShow = true
|
|
// 设置标记，表示已经弹出过
|
|
localStorage.setItem('activityShow', 'true');
|
|
}
|
|
}
|
|
}else{
|
|
this.$api.msg(res.message)
|
|
}
|
|
})
|
|
},
|
|
goDetail(item){
|
|
uni.navigateTo({
|
|
url: `/pages/index/boxDetail?id=${item.id}`
|
|
})
|
|
},
|
|
goActivityDetail(){
|
|
uni.navigateTo({
|
|
url: `/pages/index/boxDetail?type=${this.activityDetail.source}`
|
|
})
|
|
},
|
|
// 活动盲盒订单预览
|
|
goActivityPre(){
|
|
this.boxType = this.activityDetail.source
|
|
// console.log(this.activityDetail)
|
|
this.show = true
|
|
this.activityClose()
|
|
},
|
|
activityClose() {
|
|
uni.setStorageSync('ad','behind')
|
|
this.activityShow = false
|
|
},
|
|
close() {
|
|
uni.setStorageSync('ad', 'behind')
|
|
this.adVisible = false
|
|
},
|
|
login(data) {
|
|
loginXc(data).then(res => {
|
|
if (res.code === 200) {
|
|
try {
|
|
this.adStoreVisible = uni.getStorageSync('ad') ? uni.getStorageSync('ad') : 'frist'
|
|
} catch (e) {
|
|
//TODO handle the exception
|
|
this.adStoreVisible = 'frist'
|
|
}
|
|
// this.getBoxesTags()
|
|
// this.getNoticeTop()
|
|
this.getPopupAd('HOMEPAGE_CAROUSEL')
|
|
this.getPopupAd('HOMEPAGE_POPUP')
|
|
this.getBoxesPinned()
|
|
} else {
|
|
this.$api.msg(res.message)
|
|
}
|
|
})
|
|
},
|
|
// 获取用户信息
|
|
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() {
|
|
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) {
|
|
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
|
|
}
|
|
boxesPinnedApi(data).then(res => {
|
|
if (res.code === 200) {
|
|
this.list = res.data
|
|
} else {
|
|
this.$api.msg(res.message)
|
|
}
|
|
})
|
|
},
|
|
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(){
|
|
this.boxType = 'buy'
|
|
this.show = true
|
|
},
|
|
// 关闭购买弹窗组件
|
|
buyClose(){
|
|
this.buyVisible = false
|
|
},
|
|
floatCk(type){
|
|
this.boxType = type
|
|
console.log(this.boxType)
|
|
if(type){
|
|
// 每日优惠
|
|
if(this.activityDetail && this.activityDetail.source){
|
|
this.activityShow = true
|
|
}
|
|
}
|
|
},
|
|
// 购买组件 购买
|
|
goBuy(type){
|
|
this.buyVisible = false
|
|
}
|
|
// goBuy(type){
|
|
// this.buyType = type
|
|
// // 用提示卡时打开提示卡组件
|
|
// promptCountApi().then(res => {
|
|
// if(res.data === '0'){
|
|
// uni.navigateTo({
|
|
// url:`/pages/index/boxOrderConfirm?boxId=${this.list[this.current].id}&type=${type}`
|
|
// })
|
|
// }else{
|
|
// this.tipVisible = true
|
|
// }
|
|
// })
|
|
|
|
// },
|
|
|
|
},
|
|
onHide() {
|
|
// console.log("aaa")
|
|
// 在页面离开时销毁子组件中的定时器
|
|
this.btnTimer = Math.floor(Math.random() * (1 - 100000 + 1)) + 100000
|
|
clearInterval(this.btnTimer)
|
|
// this.$refs.childComponent && this.$refs.childComponent.$destroy();
|
|
},
|
|
onUnload() {
|
|
// 在页面离开时清除定时器
|
|
clearInterval(this.rookieTimer)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page {}
|
|
|
|
.new-index-page {
|
|
width: 100%;
|
|
height: calc(100vh - 50px);
|
|
// height: calc(100vh - 82px);
|
|
overflow: hidden;
|
|
// height: 1282rpx;
|
|
// height: 1300rpx;
|
|
background-image: url('@/static/new/bg.png');
|
|
background-repeat: no-repeat;
|
|
// border: 1px solid #000;
|
|
background-size: 100%;
|
|
|
|
// border: 1px solid red;
|
|
|
|
.header {
|
|
height: 200rpx;
|
|
// background-image: url('@/static/new/header.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
display: flex;
|
|
padding-top: 12rpx;
|
|
z-index: 2;
|
|
position: relative;
|
|
|
|
.point {
|
|
width: 202rpx;
|
|
height: 96rpx;
|
|
font-size: 36rpx;
|
|
color: #3E688D;
|
|
background-image: url('@/static/new/point-bg.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
font-family: YouSheBiaoTiHei;
|
|
margin-left: 24rpx;
|
|
display: flex;
|
|
padding-top: 12rpx;
|
|
// align-items: center;
|
|
padding-left: 16rpx;
|
|
z-index: 3;
|
|
|
|
.point-icon {
|
|
width: 56rpx;
|
|
height: 56rpx;
|
|
}
|
|
|
|
.point-value {
|
|
padding-top: 6rpx;
|
|
}
|
|
}
|
|
|
|
.top-up {
|
|
width: 116rpx;
|
|
height: 96rpx;
|
|
font-size: 36rpx;
|
|
background-image: url('@/static/new/topup-bg.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
font-family: YouSheBiaoTiHei;
|
|
color: #3E688D;
|
|
padding-top: 18rpx;
|
|
text-align: center;
|
|
margin-right: 40rpx;
|
|
z-index: 3;
|
|
}
|
|
|
|
.header-item {
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: bold;
|
|
font-size: 24rpx;
|
|
color: #385E80;
|
|
height: 35rpx;
|
|
margin-top: 16rpx;
|
|
margin-right: 24rpx;
|
|
z-index: 3;
|
|
|
|
.item-img {
|
|
margin-right: 8rpx;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
}
|
|
|
|
|
|
.tops{
|
|
position: absolute;
|
|
top: -80rpx;
|
|
left: 0;
|
|
z-index: 1;
|
|
}
|
|
.header-bg{
|
|
width: 100%;
|
|
height: 200rpx;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 2;
|
|
}
|
|
}
|
|
.main {
|
|
position: relative;
|
|
z-index: 5;
|
|
padding-top: 160rpx;
|
|
.prize {
|
|
position: absolute;
|
|
top: -40rpx;
|
|
left: 32rpx;
|
|
|
|
.prize-item {
|
|
width: 480rpx;
|
|
height: 56rpx;
|
|
background: linear-gradient(90deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
|
|
border-radius: 28rpx 0px 0px 28rpx;
|
|
opacity: 0.5;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0rpx 6rpx;
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.img {
|
|
position: absolute;
|
|
top: -40rpx;
|
|
width: 750rpx;
|
|
height: 520rpx;
|
|
}
|
|
|
|
.line {
|
|
width: 100%;
|
|
height: 500rpx;
|
|
position: absolute;
|
|
top: -60rpx;
|
|
left: 0;
|
|
}
|
|
|
|
.raffle-main {
|
|
position: absolute;
|
|
top: 400rpx;
|
|
}
|
|
|
|
.arrows-left {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
position: absolute;
|
|
top: 360rpx;
|
|
left: 24rpx;
|
|
z-index: 6;
|
|
}
|
|
|
|
.arrows-right {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
position: absolute;
|
|
top: 360rpx;
|
|
right: 24rpx;
|
|
z-index: 6;
|
|
}
|
|
|
|
.swiper {
|
|
z-index: 3;
|
|
height: 360rpx;
|
|
.swiper-items {
|
|
width: 462rpx;
|
|
height: 460rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
|
|
.swiper-img {
|
|
width: 462rpx;
|
|
height: 360rpx;
|
|
// background-size: 100%;
|
|
// background-position: 50% 50%;
|
|
// background-repeat: no-repeat;
|
|
}
|
|
}
|
|
}
|
|
|
|
.box-price{
|
|
background-image: url('@/static/new/box/price.png');
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
width: 320rpx;
|
|
height: 112rpx;
|
|
z-index: 41;
|
|
position: absolute;
|
|
// bottom: 0;
|
|
left: 216rpx;
|
|
top:540rpx;
|
|
text-align: center;
|
|
color: #1F6099;
|
|
font-family: YouSheBiaoTiHei;
|
|
padding-top: 50rpx;
|
|
.price{
|
|
font-size: 40rpx;
|
|
}
|
|
.num{
|
|
font-size: 32rpx;
|
|
}
|
|
}
|
|
|
|
.footer-swiper {
|
|
z-index: 4;
|
|
margin-top: 140rpx;
|
|
height: 240rpx;
|
|
|
|
.footer-swiper-item {
|
|
font-size: 28rpx;
|
|
color: #335C80;
|
|
font-family: YouSheBiaoTiHei;
|
|
|
|
.swiper-tai {
|
|
// padding-top: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
|
|
.box-icon {
|
|
width: 152rpx;
|
|
height: 120rpx;
|
|
z-index: 4;
|
|
}
|
|
|
|
.box-icon-active {
|
|
width: 176rpx;
|
|
height: 140rpx;
|
|
z-index: 4;
|
|
}
|
|
|
|
.tai-icon-select {
|
|
width: 240rpx;
|
|
height: 226rpx;
|
|
margin-top: -140rpx;
|
|
z-index: 3;
|
|
}
|
|
|
|
.tai-icon {
|
|
width: 208rpx;
|
|
height: 220rpx;
|
|
margin-top: -133rpx;
|
|
z-index: 3;
|
|
}
|
|
|
|
.tai-txt {
|
|
width: 208rpx;
|
|
height: 120rpx;
|
|
font-size: 28rpx;
|
|
color: #335C80;
|
|
background-image: url('@/static/new/no.png');
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
margin-top: -126rpx;
|
|
z-index: 3;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.tai-txt-active {
|
|
width: 240rpx;
|
|
height: 144rpx;
|
|
font-size: 28rpx;
|
|
color: #335C80;
|
|
background-image: url('@/static/new/y.png');
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
margin-top: -143rpx;
|
|
z-index: 3;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
.footer-swiper-img {
|
|
width: 150rpx;
|
|
height: 116rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.footer {
|
|
padding: 0rpx 0rpx 0 40rpx;
|
|
margin-top: -70rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.more {
|
|
// display: inline-block;
|
|
font-size: 28rpx;
|
|
color: #FFFFFF;
|
|
position: relative;
|
|
|
|
.game-icon {
|
|
width: 122rpx;
|
|
height: 170rpx;
|
|
}
|
|
|
|
.more-txt {
|
|
width: 132rpx;
|
|
text-align: center;
|
|
margin-top: -20rpx;
|
|
// position: absolute;
|
|
// bottom: 10rpx;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.dlg {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100vh;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
z-index: 9999;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.dlg-main {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
|
|
.dlg-swiper {
|
|
// width: 402rpx;
|
|
width: 750rpx;
|
|
height: 580rpx;
|
|
border-radius: 20rpx;
|
|
|
|
.dlg-swiper-item {
|
|
width: 468rpx;
|
|
height: 580rpx;
|
|
border-radius: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.dlg-swiper-img {
|
|
width: 468rpx;
|
|
height: 580rpx;
|
|
border-radius: 20rpx;
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
background-position: center;
|
|
transform: scale(1);
|
|
transition: transform 0.3s ease-in-out 0s;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.dlg-close-img {
|
|
margin-top: 23rpx;
|
|
width: 64rpx;
|
|
height: 64rpx;
|
|
z-index: 9999;
|
|
}
|
|
}
|
|
.activity-main{
|
|
flex-direction: column;
|
|
width: 480rpx;
|
|
height: 608rpx;
|
|
background-image: url('@/static/new/box/hdtc.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
.dlg-title{
|
|
display: block;
|
|
margin: 0 auto;
|
|
width: 148rpx;
|
|
height: 52rpx;
|
|
}
|
|
.activity-img{
|
|
width: 448rpx;
|
|
height: 440rpx;
|
|
border-radius: 20rpx;
|
|
display: block;
|
|
margin: 20rpx auto;
|
|
z-index: 2;
|
|
}
|
|
.now-buy{
|
|
width: 348rpx;
|
|
// height: 120rpx;
|
|
display: block;
|
|
margin: -120rpx auto 0 auto;
|
|
z-index: 1;
|
|
}
|
|
.dlg-close-img {
|
|
display: block;
|
|
width: 64rpx;
|
|
height: 64rpx;
|
|
z-index: 9999;
|
|
margin: -120rpx auto 0 auto;
|
|
}
|
|
}
|
|
.buy-main{
|
|
width: 480rpx;
|
|
height: 640rpx;
|
|
background-image: url('@/static/new/index/bg.png');
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
.buy-header{
|
|
padding-top: 40rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.header-icon{
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
}
|
|
.header-txt{
|
|
font-weight: 800;
|
|
font-size: 32rpx;
|
|
color: #143D66;
|
|
margin: 0 16rpx;
|
|
}
|
|
}
|
|
.dlg-tip{
|
|
text-align: center;
|
|
margin-top: 8rpx;
|
|
font-size: 24rpx;
|
|
color: #528FCC;
|
|
}
|
|
.btn-main{
|
|
height: 480rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
.btn-buy{
|
|
width: 400rpx;
|
|
height: 188rpx;
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
// display: flex;
|
|
// justify-content: center;
|
|
padding-left: 96rpx;
|
|
padding-top: 52rpx;
|
|
.buy-title{
|
|
width: 208rpx;
|
|
height: 72rpx;
|
|
}
|
|
}
|
|
.one{
|
|
background-image: url('@/static/new/index/1.png');
|
|
}
|
|
.three{
|
|
background-image: url('@/static/new/index/3.png');
|
|
}
|
|
.five{
|
|
background-image: url('@/static/new/index/5.png');
|
|
}
|
|
}
|
|
|
|
}
|
|
.close-buy{
|
|
width: 64rpx;
|
|
height: 64rpx;
|
|
display: block;
|
|
margin: 129rpx auto 0 auto;
|
|
}
|
|
.tip-dlg{
|
|
.tip-main{
|
|
width: 480rpx;
|
|
height: 648rpx;
|
|
background-image: url('@/static/new/tip/card.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
.tip-icon{
|
|
width: 112rpx;
|
|
height: 52rpx;
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
.tip-txt{
|
|
padding-top: 364rpx;
|
|
font-weight: 800;
|
|
font-size: 40rpx;
|
|
color: #143D66;
|
|
text-align: center;
|
|
}
|
|
.tip-sub{
|
|
margin: 0 auto;
|
|
margin-top: 24rpx;
|
|
width: 352rpx;
|
|
font-size: 24rpx;
|
|
color: #528FCC;
|
|
}
|
|
}
|
|
.tip-btn{
|
|
margin-top: 64rpx;
|
|
width: 480rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.btn-icon{
|
|
width: 228rpx;
|
|
height: 96rpx;
|
|
font-size: 44rpx;
|
|
color: rgba(255,255,255,0.9);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: YouSheBiaoTiHei;
|
|
}
|
|
.now{
|
|
background-image: url('@/static/new/tip/btn.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
}
|
|
}
|
|
.close-tip{
|
|
width: 64rpx;
|
|
height: 64rpx;
|
|
display: block;
|
|
margin: 84rpx auto 0 auto;
|
|
}
|
|
}
|
|
}
|
|
.ad-scroll{
|
|
height: 752rpx;
|
|
padding: 44rpx 32rpx 0 32rpx;
|
|
.ad-img{
|
|
width: 686rpx;
|
|
height: 202rpx;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
}
|
|
|
|
.custom-toast{
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100vh;
|
|
top: 0;
|
|
left: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 999999;
|
|
.toast-txt{
|
|
z-index: 999999;
|
|
border-radius: 6rpx;
|
|
padding: 6rpx 26rpx;
|
|
background-color: rgba(0,0,0,0.8);
|
|
color: #fff;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
}
|
|
</style> |