549 lines
15 KiB
Vue
549 lines
15 KiB
Vue
<template>
|
|
<view class="draw-page">
|
|
<HeaderCom @click="goBack" type="click"></HeaderCom>
|
|
<view class="header">
|
|
<image src="@/static/box/bqjc.png" mode="" class="title-icon"></image>
|
|
<swiper class="swiper" circular autoplay :interval="500" :duration="1800" :display-multiple-items="4" :disable-touch="true">
|
|
<swiper-item v-for="(item,index) in detailData.items" :key="index" class="swiper-item">
|
|
<image v-if="item.coverResource" :src="item.coverResource.url" mode="aspectFit" class="swiper-image"></image>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
<view class="raffle">
|
|
<image src="@/static/box/d-box.png" mode="" class="raffle-box-icon"></image>
|
|
<RaffleCom></RaffleCom>
|
|
</view>
|
|
<view class="open">
|
|
<BtnCom @click="open"></BtnCom>
|
|
</view>
|
|
<view class="headerline">
|
|
<image src="@/static/result/bg-title.png" mode="aspectFit" class="title"></image>
|
|
</view>
|
|
<view class="list">
|
|
<view class="item" v-for="(item,index) in openResultList" :key="index">
|
|
<view class="shop">
|
|
<image src="@/static/grade/pt.png" mode="" v-if="item.grade === 'NORMAL'" class="grade-icon"></image>
|
|
<image src="@/static/grade/xy.png" mode="" v-if="item.grade === 'RARE'" class="grade-icon"></image>
|
|
<image src="@/static/grade/yc.png" mode="" v-if="item.grade === 'HIDDEN'" class="grade-icon"></image>
|
|
<image src="@/static/grade/zz.png" mode="" v-if="item.grade === 'SUPREME'" class="grade-icon"></image>
|
|
<image v-if="item.productCoverResource" :src="item.productCoverResource.url" class="shop-img" mode="aspectFit"></image>
|
|
</view>
|
|
<view class="name">{{item.productAbbreviation}}</view>
|
|
</view>
|
|
</view>
|
|
<!-- @touchmove.stop.prevent -->
|
|
<div v-if="isOpen">
|
|
<template v-if="typeNum === 3">
|
|
<OpenFreeBoxThreeCom @click="again" @close="closeAgain" :visible="isOpen" :row="rowData" :resultList="resultList" :listLength="openResultIndex === typeNum" :isActivity="isActivity" :isNormal="isNormal"></OpenFreeBoxThreeCom>
|
|
</template>
|
|
<template v-else-if="typeNum === 5">
|
|
<OpenFreeBoxFiveCom @click="again" @close="closeAgain" :visible="isOpen" :row="rowData" :resultList="resultList" :listLength="openResultIndex === typeNum" :isActivity="isActivity" :isNormal="isNormal"></OpenFreeBoxFiveCom>
|
|
</template>
|
|
<template v-else>
|
|
<OpenFreeBoxCom @click="again" @close="closeAgain" :visible="isOpen" :row="rowData" :resultList="resultList" :listLength="openResultIndex === typeNum" :isActivity="isActivity" :isNormal="isNormal"></OpenFreeBoxCom>
|
|
</template>
|
|
|
|
</div>
|
|
<!-- 弹窗 -->
|
|
<view class="dlg" v-if="activityShow" @click="activityClose">
|
|
<view class="activity-main" @click.stop="">
|
|
<image src="@/static/new/xsmh.png" mode="" class="dlg-title"></image>
|
|
<image src="" 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>
|
|
|
|
<!-- 所有页面的弹框 -->
|
|
<page-popup page="/pages/index/drawFree"></page-popup>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { myMixins } from "@/mixins/mixins.js";
|
|
import { boxRecordResultApi,boxesDetail,openListApi,noOpenListApi,freeBoxApi } from '@/API/index.js'
|
|
import RaffleCom from './components/raffle.vue'
|
|
import BtnCom from './components/btn'
|
|
import OpenFreeBoxCom from './components/openFreeBox.vue'
|
|
import OpenFreeBoxThreeCom from './components/openFreeBoxThree.vue'
|
|
import OpenFreeBoxFiveCom from './components/openFreeBoxFive.vue'
|
|
import HeaderCom from '@/pages/components/header.vue'
|
|
export default{
|
|
mixins: [myMixins],
|
|
data(){
|
|
return{
|
|
id:"",//盲盒详情id
|
|
detailData:{
|
|
items:[],
|
|
},//商品详情
|
|
|
|
gradeData:{
|
|
NORMAL:'https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/home/bai.png',
|
|
HIDDEN:'https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/home/lan.png',
|
|
RARE: 'https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/home/zi.png',
|
|
SUPREME:'https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/home/huang.png',
|
|
},
|
|
icon:{
|
|
NORMAL:'https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/new-icon-1/lv1.png',//普通款
|
|
HIDDEN:'https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/new-icon-1/lv2.png',//隐藏款
|
|
RARE:'https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/new-icon-1/lv3.png',//稀有款
|
|
SUPREME:'https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/new-icon-1/lv4.png',//至尊款
|
|
},
|
|
bg:{
|
|
NORMAL:'https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/new-icon-1/bg-lv1.png',//普通款
|
|
HIDDEN:'https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/new-icon-1/bg-lv2.png',//隐藏款
|
|
RARE:'https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/new-icon-1/bg-lv3.png',//稀有款
|
|
SUPREME:'https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/new-icon-1/bg-lv4.png',//至尊款
|
|
},
|
|
detailData:{},
|
|
no:"",
|
|
resultList:[],
|
|
resultvisible:false,
|
|
isOpen:false,
|
|
typeNum:0,//几连抽
|
|
openResultList:[],//
|
|
openResultIndex:0,
|
|
rowData:{},
|
|
|
|
gradeList:[
|
|
'static/result/NORMAL.png','static/result/HIDDEN.png','static/result/RARE.png','static/result/SUPREME.png'
|
|
],
|
|
bgList:['static/box/draw.png'],
|
|
list:[],
|
|
noOpen:'',
|
|
activityShow:false,
|
|
isActivity:'',
|
|
isNormal:true,
|
|
|
|
listLengthObj: {
|
|
SINGLE: 1,
|
|
TRIPLE: 3,
|
|
PENTA: 5
|
|
},
|
|
type:''
|
|
}
|
|
},
|
|
components:{HeaderCom,RaffleCom,BtnCom,OpenFreeBoxCom,OpenFreeBoxThreeCom,OpenFreeBoxFiveCom},
|
|
onLoad(opation) {
|
|
this.id = opation.boxId
|
|
this.type = opation.type
|
|
this.typeNum = this.listLengthObj[opation.type]
|
|
this.getDetail()
|
|
},
|
|
mounted() {
|
|
// this.preloadImages('box')
|
|
// this.preloadImages('lihua')
|
|
// this.preloadImages('gx')
|
|
// this.preloadImages('grade')
|
|
|
|
},
|
|
methods:{
|
|
|
|
// 获取盲盒详情
|
|
getDetail(){
|
|
boxesDetail({id:this.id}).then(res => {
|
|
if(res.code === 200){
|
|
this.detailData = res.data
|
|
freeBoxApi({boxId:this.id,type:this.type}).then(result => {
|
|
uni.hideLoading()
|
|
if(result.code === 200){
|
|
this.resultList = result.data
|
|
console.log("resultListresultList:",this.resultList)
|
|
this.rowData = this.resultList[this.openResultIndex]
|
|
this.isOpen = true
|
|
// if(this.typeNum > this.openResultList.length){
|
|
// this.openResultList.push(this.resultList[this.openResultIndex])
|
|
// this.openResultIndex += 1
|
|
// }
|
|
this.openResultList = result.data
|
|
}else{
|
|
this.$api.msg(result.message)
|
|
}
|
|
}).catch(err => {
|
|
uni.hideLoading()
|
|
})
|
|
}
|
|
})
|
|
},
|
|
activityClose() {
|
|
this.activityShow = false
|
|
},
|
|
goActivityPre(){
|
|
|
|
},
|
|
open(){
|
|
this.$api.msg('已开完所有盲盒')
|
|
return
|
|
// if(this.openResultIndex === this.typeNum){
|
|
// this.$api.msg('已开完所有盲盒')
|
|
// return
|
|
// }
|
|
// if(this.noOpen){
|
|
// boxesDetail({id:this.resultList[this.openResultIndex].boxId}).then(res => {
|
|
// if(res.code === 200){
|
|
// this.detailData = res.data
|
|
// }
|
|
// })
|
|
// }
|
|
// this.rowData = this.resultList[this.openResultIndex]
|
|
// this.isOpen = true
|
|
// setTimeout(() => {
|
|
// // this.upDateOpenList(this.resultList[this.openResultIndex].id)
|
|
// if(this.typeNum > this.openResultList.length){
|
|
// this.openResultList.push(this.resultList[this.openResultIndex])
|
|
// this.openResultIndex += 1
|
|
// }
|
|
// },3500)
|
|
},
|
|
again(){
|
|
uni.$emit('updateTabData', {'boxId':this.id,type:'PENTA'});
|
|
uni.switchTab({
|
|
url:`/pages/index/new-index`
|
|
})
|
|
// this.isOpen = false
|
|
// if(this.openResultIndex === this.typeNum){
|
|
// uni.$emit('updateTabData', {'boxId':this.id,type:'SINGLE'});
|
|
// uni.switchTab({
|
|
// url:`/pages/index/new-index`
|
|
// })
|
|
// if(this.isActivity == 'activity'){
|
|
// let appid = ''
|
|
// try{
|
|
// appid = uni.getStorageSync('box-appid')
|
|
// }catch(e){
|
|
// //TODO handle the exception
|
|
// }
|
|
// console.log("appid:",appid)
|
|
// if(appid == '1773996802999717888'){
|
|
// // 皮皮
|
|
// uni.redirectTo({
|
|
// url:`/pages/index/boxDetail?id=1788477417849921538`
|
|
// })
|
|
// }else if(appid == '1780809212570030080'){
|
|
// // 最右
|
|
// uni.redirectTo({
|
|
// url:`/pages/index/boxDetail?id=1788516794714071041`
|
|
// })
|
|
// }else{
|
|
// uni.redirectTo({
|
|
// url:`/pages/index/boxDetail?id=1788516794714071041`
|
|
// })
|
|
// }
|
|
|
|
// }else if(this.isActivity == 'runActivity'){
|
|
// uni.redirectTo({
|
|
// url:`/pages/index/activity`
|
|
// })
|
|
// }
|
|
|
|
|
|
// return
|
|
// }
|
|
// if(this.noOpen){
|
|
// boxesDetail({id:this.resultList[this.openResultIndex].boxId}).then(res => {
|
|
// if(res.code === 200){
|
|
// this.detailData = res.data
|
|
// }
|
|
// })
|
|
// }
|
|
// setTimeout(() => {
|
|
// this.isOpen = true
|
|
// },500)
|
|
// this.rowData = this.resultList[this.openResultIndex]
|
|
// // setTimeout(() => {
|
|
// // this.upDateOpenList(this.resultList[this.openResultIndex].id)
|
|
// if(this.typeNum > this.openResultList.length){
|
|
// this.openResultList.push(this.resultList[this.openResultIndex])
|
|
// this.openResultIndex += 1
|
|
// }
|
|
// },3500)
|
|
},
|
|
closeAgain(){
|
|
this.isOpen = false
|
|
this.activityShow = false
|
|
},
|
|
goBack(){
|
|
// if(this.openResultIndex !== this.typeNum){
|
|
// this.$api.msg('还有未开盲盒')
|
|
// return
|
|
// }
|
|
uni.$emit('updateTabData', {newData:'newData'});
|
|
uni.navigateBack()
|
|
},
|
|
// 获取中奖信息
|
|
getBoxRecordResult(no){
|
|
boxRecordResultApi({no}).then(res => {
|
|
if(res.code === 200){
|
|
this.resultList = res.data
|
|
this.rowData = this.resultList[this.openResultIndex]
|
|
console.log(this.rowData)
|
|
this.isOpen = true
|
|
if(this.typeNum > this.openResultList.length){
|
|
this.openResultList.push(this.resultList[this.openResultIndex])
|
|
this.openResultIndex += 1
|
|
}
|
|
}else{
|
|
this.$api.msg(res.message)
|
|
}
|
|
})
|
|
},
|
|
close(){
|
|
this.resultvisible = false
|
|
},
|
|
},
|
|
onUnload(){
|
|
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page{
|
|
|
|
}
|
|
.draw-page{
|
|
min-height: 100vh;
|
|
background-image: url('@/static/box/draw.png');
|
|
// background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
padding-top: 112rpx;
|
|
.header{
|
|
width: 670rpx;
|
|
height: 192rpx;
|
|
background-image: url('@/static/box/header.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
margin-left: 40rpx;
|
|
padding: 0 16rpx;
|
|
.title-icon{
|
|
width: 168rpx;
|
|
height: 38rpx;
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
.swiper{
|
|
width: 100%;
|
|
height: 120rpx;
|
|
.swiper-item{
|
|
width: 160rpx;
|
|
height: 120rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-image: url('@/static/box/bg-jp.png');
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
.swiper-image{
|
|
width: 88rpx;
|
|
height: 112rpx;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
.raffle{
|
|
padding-top: 308rpx;
|
|
position: relative;
|
|
.raffle-box-icon{
|
|
position: absolute;
|
|
width: 360rpx;
|
|
height: 264rpx;
|
|
top: 112rpx;
|
|
left: 202rpx;
|
|
}
|
|
}
|
|
.open{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-top: -40rpx;
|
|
}
|
|
.headerline{
|
|
width: 100%;
|
|
height: 208rpx;
|
|
background-image: url('@/static/result/title-bg.png');
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
margin-top: 70rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.title{
|
|
width: 356rpx;
|
|
height: 88rpx;
|
|
}
|
|
}
|
|
.list {
|
|
display: grid;
|
|
gap: 22rpx;
|
|
grid-template-rows: 1fr;
|
|
margin: 0px auto;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
padding: 24rpx;
|
|
border-radius: 8rpx;
|
|
|
|
.item {
|
|
width: 340rpx;
|
|
// height: 436rpx;
|
|
padding-bottom: 12rpx;
|
|
background-color: #fff;
|
|
border-radius: 8rpx 8rpx 0 0;
|
|
|
|
.shop {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 340rpx;
|
|
height: 240rpx;
|
|
background-image: url('@/static/new/card-shop.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
// background: linear-gradient(180deg, rgba(98, 126, 153, 0) 0%, #627E99 100%), #E6EBF0;
|
|
border-radius: 8rpx 8rpx 0px 0px;
|
|
position: relative;
|
|
.grade-icon{
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 104rpx;
|
|
height: 72rpx;
|
|
}
|
|
|
|
.shop-img {
|
|
width: 192rpx;
|
|
height: 196rpx;
|
|
}
|
|
}
|
|
|
|
.name {
|
|
width: 304rpx;
|
|
min-height: 50rpx;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
margin: 16rpx 0 0 16rpx;
|
|
}
|
|
|
|
.point {
|
|
margin: 8rpx 0 0 16rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: 800;
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
.point-icon {
|
|
margin-right: 8rpx;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
}
|
|
|
|
.price {
|
|
margin-left: 16rpx;
|
|
height: 44rpx;
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #000000;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 8rpx;
|
|
// text-decoration: line-through;
|
|
.point-icon{
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
margin-right: 8rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// @keyframes flip {
|
|
// 0% {
|
|
// transform: rotateY(0deg) scale(0);
|
|
// }
|
|
// 10% {
|
|
// transform: rotateY(36deg) scale(0.1);
|
|
// }
|
|
// 20% {
|
|
// transform: rotateY(72deg) scale(0.2);
|
|
// }
|
|
// 30% {
|
|
// transform: rotateY(108deg) scale(0.3);
|
|
// }
|
|
// 40% {
|
|
// transform: rotateY(144deg) scale(0.4);
|
|
// }
|
|
// 50% {
|
|
// transform: rotateY(180deg) scale(0.5);
|
|
// }
|
|
// 60% {
|
|
// transform: rotateY(216deg) scale(0.6);
|
|
// }
|
|
// 70% {
|
|
// transform: rotateY(252deg) scale(0.7);
|
|
// }
|
|
// 80% {
|
|
// transform: rotateY(288deg) scale(0.8);
|
|
// }
|
|
// 90% {
|
|
// transform: rotateY(324deg) scale(0.9);
|
|
// }
|
|
// 100% {
|
|
// transform: rotateY(360deg) scale(1);
|
|
// }
|
|
// }
|
|
}
|
|
.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> |