1099 lines
28 KiB
Vue
1099 lines
28 KiB
Vue
<template>
|
|
<view class="new-index-page" style="background-position: center top -90rpx;">
|
|
<view class="header">
|
|
<view class="header-info">
|
|
<view class="photo">
|
|
<image src="@/static/mine/logo.png" class="phone-icon" mode="aspectFit"></image>
|
|
</view>
|
|
<!-- <view class="coin" @click="rankingCk">
|
|
<view class="coin-num">排行榜</view>
|
|
</view> -->
|
|
<!-- <view class="coin">
|
|
<image src="@/static/zy/index/coin.png" mode="aspectFit" class="coin-icon"></image>
|
|
<view class="coin-num">{{infoDetail.coins | million}}</view>
|
|
<image src="@/static/zy/index/add.png" mode="aspectFit" class="add-icon" @click="topUpCk"></image>
|
|
</view> -->
|
|
</view>
|
|
<image src="@/static/zy/index/rule.png" mode="" class="rule-icon" @click="rule"></image>
|
|
</view>
|
|
<!-- <trumpetCom ref="childComponent"></trumpetCom> -->
|
|
<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="main">
|
|
<view class="title-icon">
|
|
<template v-if="list.length > 0 && list[current]">{{list[current].name}}</template>
|
|
</view>
|
|
<image src="@/static/zy/index/left.png" mode="" class="left-icon" @click="changeSwiper('left')"></image>
|
|
<image src="@/static/zy/index/right.png" mode="" class="right-icon" @click="changeSwiper('right')"></image>
|
|
<view class="box-main">
|
|
<swiper class="swiper" circular :current="current" @change="swiperChange" v-if="list.length > 0">
|
|
<swiper-item class="swiper-items" v-for="(item,index) in list" :key="index" @click="goDetail(item)">
|
|
<template v-if="item.itemFirst">
|
|
<image v-if="item.itemFirst.coverResource" :src="item.itemFirst.coverResource.url" mode="aspectFit" class="swiper-img"></image>
|
|
</template>
|
|
|
|
<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>
|
|
|
|
|
|
<template v-if="list.length > 0 && list[current]">
|
|
<view class="box-name" v-if="list[current].itemFirst">{{list[current].itemFirst.abbreviation}}</view>
|
|
</template>
|
|
</view>
|
|
<view class="open" @click="buy">
|
|
<image src="@/static/zy/index/btn-top.png" mode="" class="top-icon"></image>
|
|
<image src="@/static/zy/index/btn-bottom.png" mode="" class="bottom-icon"></image>
|
|
</view>
|
|
<view class="submit-txt">（就它了，现在抽，抽中概率更大呦）</view>
|
|
<swiper class="footer-swiper" circular autoplay :current="footerCurrent" @change="swiperFooterChange">
|
|
<swiper-item class="footer-swiper-items" v-for="(item,index) in bannerTopList" :key="index" @click="rollingLink(item)">
|
|
<image v-if="item.img" :src="item.img.coverResource.url" mode="" class="footer-swiper-img"></image>
|
|
</swiper-item>
|
|
</swiper>
|
|
<view class="dto">
|
|
<view class="dto-icon" :class="{'dto-active':footerCurrent === index}" v-for="(item,index) in bannerTopList" :key="index" ></view>
|
|
</view>
|
|
<!-- <view @click="goxcx">跳转小程序</view> -->
|
|
<!-- <button @click="openWeapp(100)">Open Weapp with Amount 100</button> -->
|
|
</view>
|
|
<floatWindow v-if="activityDetail" :consumptionTime="activityDetail.expireTime" :source="activityDetail.source" :isConsumption="activityDetail.source === 'PREFERENTIAL_DAY'" :isDiscounts="activityDetail.source === 'ROOKIE'" @click="floatCk"></floatWindow>
|
|
<!-- 活动盲盒弹窗 -->
|
|
<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>
|
|
<!-- 购买弹窗 -->
|
|
<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" :maskCloseAble="false" :closeable="true" @input="coinDeficitComClose">
|
|
<coinDeficitCom @close="closeTop" @sucClose="sucClose" :close='isClose'></coinDeficitCom>
|
|
</popup-view>
|
|
<!-- 是否有未开完的奖品 -->
|
|
<!-- <view v-if="isOpen"> -->
|
|
<NoOpenCom></NoOpenCom>
|
|
<!-- </view> -->
|
|
<view class="custom-toast" v-if="isTip">
|
|
<view class="toast-txt">支付成功</view>
|
|
</view>
|
|
|
|
<!-- 所有页面的弹框 -->
|
|
<page-popup page="/pages/index/new-index" v-if="visible"></page-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import floatWindow from '@/pages/components/floatWindow.vue'
|
|
import BuyBoxCom from './components/buyBox.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 {
|
|
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,
|
|
boxResultApi,
|
|
noOpenListApi,
|
|
boxesChannelPinnedApi,
|
|
popupAdPageApi
|
|
} from '@/API/index.js'
|
|
import {
|
|
mpScheme
|
|
} from '@/API/pay.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:"至尊"
|
|
},
|
|
|
|
|
|
show:false,
|
|
boxType:'',//盲盒类型
|
|
isTopUp:false,
|
|
isTip:false,
|
|
rookieTimer:null,
|
|
boxResultTimer:null,
|
|
boxResultList:[],//开奖结果
|
|
isOpen:false,
|
|
isClose:false,
|
|
visible:false
|
|
}
|
|
},
|
|
components: {
|
|
floatWindow,
|
|
BuyBoxCom,
|
|
coinDeficitCom,
|
|
NoOpenCom,
|
|
trumpetCom
|
|
},
|
|
|
|
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.visible = true
|
|
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)
|
|
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()
|
|
// }
|
|
}
|
|
if (uni.getStorageSync('box-token')) {
|
|
this.getUserInfo()
|
|
this.getCustomer()
|
|
this.getBoxActivity()
|
|
this.getBoxesPinned()
|
|
}else{
|
|
this.getBoxesPinned()
|
|
}
|
|
// this.getNoOpenList()
|
|
this.getBoxResult()
|
|
this.boxResultTimer = setInterval(() => {
|
|
this.getBoxResult()
|
|
}, 6000)
|
|
},
|
|
onShow() {
|
|
uni.$on('updateTabData', (data) => {
|
|
this.visible = false
|
|
setTimeout(() => {
|
|
this.visible = true
|
|
},500)
|
|
});
|
|
// if (uni.getStorageSync('box-token')) {
|
|
// this.getUserInfo()
|
|
// this.getCustomer()
|
|
// this.getBoxActivity()
|
|
// this.getBoxesPinned()
|
|
// }else{
|
|
// this.getBoxesPinned()
|
|
// }
|
|
// // this.getNoOpenList()
|
|
// this.getBoxResult()
|
|
// this.boxResultTimer = setInterval(() => {
|
|
// this.getBoxResult()
|
|
// }, 6000)
|
|
|
|
},
|
|
methods: {
|
|
rankingCk(){
|
|
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(`${nickName}开启${item.boxName}得到了${item.productName}`)
|
|
})
|
|
|
|
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.$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位
|
|
},
|
|
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(){
|
|
boxActivityApi().then(res => {
|
|
if(res.code === 200){
|
|
this.activityDetail = res.data
|
|
if(this.activityDetail){
|
|
|
|
|
|
try{
|
|
if (!uni.getStorageSync('activityShow')) {
|
|
this.activityShow = true
|
|
// 活动页面埋点
|
|
reportClickFn('box_activity_clk');
|
|
// 设置标记，表示已经弹出过
|
|
uni.setStorageSync('activityShow', true)
|
|
}
|
|
}catch(e){
|
|
//TODO handle the exception
|
|
}
|
|
|
|
|
|
|
|
// if (!uni.getStorageSync('activityShow')) {
|
|
// this.activityShow = true
|
|
// // 活动页面埋点
|
|
// reportClickFn('box_activity_clk');
|
|
// // 设置标记，表示已经弹出过
|
|
// uni.setStorageSync('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) {
|
|
// 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)
|
|
}
|
|
})
|
|
},
|
|
// 获取用户信息
|
|
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) {
|
|
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')){
|
|
this.boxType = 'buy'
|
|
this.show = true
|
|
// 盲盒预览埋点
|
|
// reportClickFn('box_buy_review_clk')
|
|
}else{
|
|
uni.navigateTo({
|
|
url:`/pages/login/login`
|
|
})
|
|
}
|
|
|
|
},
|
|
// 关闭购买弹窗组件
|
|
buyClose(){
|
|
this.buyVisible = false
|
|
},
|
|
floatCk(type){
|
|
this.boxType = type
|
|
console.log(this.boxType)
|
|
if(type){
|
|
// 每日优惠
|
|
if(this.activityDetail && this.activityDetail.source){
|
|
// 活动页面埋点
|
|
reportClickFn('box_activity_clk');
|
|
this.activityShow = true
|
|
}
|
|
}
|
|
},
|
|
// 购买组件 购买
|
|
goBuy(type){
|
|
this.buyVisible = false
|
|
}
|
|
},
|
|
onHide() {
|
|
// 在页面离开时清除定时器
|
|
clearInterval(this.rookieTimer)
|
|
clearInterval(this.boxResultTimer)
|
|
},
|
|
onUnload() {
|
|
// 在页面离开时清除定时器
|
|
clearInterval(this.rookieTimer)
|
|
clearInterval(this.boxResultTimer)
|
|
},
|
|
onTabItemTap(){
|
|
// 首页tabbar点击次数
|
|
reportClickFn('index_tabbar');
|
|
console.log("我点击了首页的bar")
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.new-index-page {
|
|
width: 100%;
|
|
// height: calc(100vh - 50px);
|
|
overflow: hidden;
|
|
background-image: url('@/static/zy/index/bg.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
// background-position: center top -90rpx;
|
|
// background-position: 50% 50%;
|
|
.header{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 40rpx 0 0 45rpx;
|
|
.header-info{
|
|
display: flex;
|
|
align-items: center;
|
|
.photo{
|
|
width: 121rpx;
|
|
height: 121rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 50%;
|
|
border: 4rpx solid #F26378;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
.phone-icon{
|
|
width: 122rpx;
|
|
height: 122rpx;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
.coin{
|
|
display: flex;
|
|
align-items: center;
|
|
background: #FFFFFF;
|
|
border-radius: 32rpx;
|
|
border: 4rpx solid #F26378;
|
|
height: 58rpx;
|
|
padding: 0 17rpx 0 13rpx;
|
|
margin-left: 23rpx;
|
|
.coin-icon{
|
|
width: 45rpx;
|
|
height: 45rpx;
|
|
}
|
|
// .coin-num{
|
|
// font-weight: 600;
|
|
// font-size: 40rpx;
|
|
// color: #FFB432;
|
|
// min-width: 120rpx;
|
|
// margin: 0 10rpx;
|
|
// text-align: center;
|
|
// }
|
|
.coin-num{
|
|
// font-weight: 600;
|
|
font-size: 30rpx;
|
|
color: #FFB432;
|
|
min-width: 120rpx;
|
|
margin: 0 10rpx;
|
|
text-align: center;
|
|
}
|
|
.add-icon{
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
}
|
|
}
|
|
}
|
|
.rule-icon{
|
|
width: 133rpx;
|
|
height: 73rpx;
|
|
}
|
|
}
|
|
.trumpet{
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 45rpx;
|
|
margin-left: 67rpx;
|
|
width: 617rpx;
|
|
height: 64rpx;
|
|
background: #F26378;
|
|
border-radius: 32rpx;
|
|
border: 0px solid #AFA08D;
|
|
padding: 0 20rpx;
|
|
.trumpet-icon{
|
|
width: 35rpx;
|
|
height: 35rpx;
|
|
}
|
|
.trumpet-swiper{
|
|
margin-left: 23rpx;
|
|
margin-top: 4rpx;
|
|
width: 503rpx;
|
|
height: 60rpx;
|
|
.trumpet-swiper-item{
|
|
width: 503rpx;
|
|
height: 60rpx;
|
|
|
|
.trumpet-txt{
|
|
width: 503rpx;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #FFFFFF;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.main{
|
|
// width: 514rpx;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
.title-icon{
|
|
display: block;
|
|
margin: 83rpx auto 0 auto;
|
|
width: 313rpx;
|
|
height: 66rpx;
|
|
background-image: url('@/static/zy/index/title.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: Zhxs;
|
|
font-size: 31rpx;
|
|
}
|
|
.left-icon{
|
|
width: 37rpx;
|
|
height: 77rpx;
|
|
position: absolute;
|
|
top: 271rpx;
|
|
left: 47rpx;
|
|
}
|
|
.right-icon{
|
|
width: 37rpx;
|
|
height: 77rpx;
|
|
position: absolute;
|
|
top: 271rpx;
|
|
right: 48rpx;
|
|
}
|
|
.box-main{
|
|
margin: 0 auto;
|
|
width: 514rpx;
|
|
height: 489rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 32rpx;
|
|
border: 4rpx solid #FF9D5C;
|
|
display: flex;
|
|
align-items: center;
|
|
// justify-content: center;
|
|
flex-direction: column;
|
|
padding-top: 67rpx;
|
|
.swiper{
|
|
width: 500rpx;
|
|
height: 380rpx;
|
|
.swiper-items{
|
|
width: 401rpx;
|
|
height: 380rpx;
|
|
position: relative;
|
|
.swiper-img{
|
|
width: 401rpx;
|
|
height: 330rpx;
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
.seal{
|
|
border: 1px solid red;
|
|
border-radius: 50%;
|
|
width: 121rpx;
|
|
height: 121rpx;
|
|
color: #F26378;
|
|
position: absolute;
|
|
bottom: 0rpx;
|
|
right: 15rpx;
|
|
text-align: center;
|
|
background-image: url('@/static/zy/index/yz.png');
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
z-index: 999;
|
|
.seal-txt{
|
|
width: 121rpx;
|
|
height: 121rpx;
|
|
font-family: Zhxs;
|
|
font-size: 31rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
transform: rotate(-30deg);
|
|
.seal-num{
|
|
font-size: 22rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.box-name{
|
|
margin-top: -15rpx;
|
|
text-align: center;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #BCBCBC;
|
|
}
|
|
}
|
|
.open{
|
|
position: relative;
|
|
margin-top: 56rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.top-icon{
|
|
width: 128rpx;
|
|
height: 89rpx;
|
|
z-index: 2;
|
|
}
|
|
.bottom-icon{
|
|
position: absolute;
|
|
width: 191rpx;
|
|
height: 135rpx;
|
|
left: 270rpx;
|
|
top: 6rpx;
|
|
z-index: 1;
|
|
}
|
|
}
|
|
.submit-txt{
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #DD4939;
|
|
margin-top: 55rpx;
|
|
text-align: center;
|
|
}
|
|
.footer-swiper{
|
|
margin-top: 24rpx;
|
|
margin-left: 45rpx;
|
|
width: 660rpx;
|
|
height: 260rpx;
|
|
background: #F26378;
|
|
border-radius: 32rpx;
|
|
border: 0px solid #AFA08D;
|
|
overflow: hidden;
|
|
.footer-swiper-items{
|
|
border-radius: 32rpx;
|
|
width: 660rpx;
|
|
height: 260rpx;
|
|
.footer-swiper-img{
|
|
border-radius: 32rpx;
|
|
width: 660rpx;
|
|
height: 260rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.dto{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 34rpx 0 81rpx 0;
|
|
.dto-icon{
|
|
margin: 0 10rpx;
|
|
width: 14rpx;
|
|
height: 14rpx;
|
|
background-color: #fff;
|
|
border-radius: 50Rpx;
|
|
}
|
|
.dto-active{
|
|
background-color: #F26378;
|
|
}
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
.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;
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
</style> |