291 lines
9.2 KiB
Vue
291 lines
9.2 KiB
Vue
<template>
|
|
<view class="box-pay-success-page">
|
|
<HeaderCom></HeaderCom>
|
|
<view class="status">
|
|
<image src="@/static/pay/success.png" class="status-icon" mode=""></image>
|
|
<view class="status-txt">支付成功</view>
|
|
</view>
|
|
<view class="box">
|
|
<view class="title">我的盲盒</view>
|
|
<scroll-view scroll-x="true" class="scroll-view">
|
|
<view class="mains" v-for="(item,index) in listLength" :key="index">
|
|
<view class="box-shop">
|
|
<image src="@/static/box/box-bg.png" mode="aspectFit" class="box-icon"></image>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="open" @click="open">立即开奖</view>
|
|
</view>
|
|
<view class="info">
|
|
<view class="item">
|
|
<view class="label">用户信息</view>
|
|
<view class="value">{{nickName}}</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="label">盲盒名称</view>
|
|
<view class="value">{{name}}</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="label">盲盒数量</view>
|
|
<view class="value">{{statusObj[type]}}</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="label">实付代币</view>
|
|
<view class="value">{{sale}}</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<!-- 预加载图片 -->
|
|
<img v-for="(imgSrc, index) in boxList" :key="index" :src="imgSrc" style="display: none;" />
|
|
<img v-for="(imgSrc, index) in liHuaList" :key="index" :src="imgSrc" style="display: none;" />
|
|
<img v-for="(imgSrc, index) in gxList" :key="index" :src="imgSrc" style="display: none;" />
|
|
<img v-for="(imgSrc, index) in gradeList" :key="index" :src="imgSrc" style="display: none;" />
|
|
<!-- 所有页面的弹框 -->
|
|
<page-popup page="/pages/index/boxPaySuccess"></page-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import HeaderCom from '@/pages/components/header.vue'
|
|
import { myMixins } from "@/mixins/mixins.js";
|
|
export default{
|
|
mixins: [myMixins],
|
|
data(){
|
|
return{
|
|
id:"",
|
|
no:"",
|
|
price:"",
|
|
point:"",
|
|
payType:"",
|
|
boxId:'',
|
|
name:"",
|
|
type:'',
|
|
sale:'',
|
|
statusObj: {
|
|
SINGLE: "一发入魂",
|
|
TRIPLE: "三连抽",
|
|
PENTA: "五连抽",
|
|
},
|
|
listLength:1,
|
|
nickName:uni.getStorageSync('box-nickname'),
|
|
|
|
|
|
|
|
// 预加载图片
|
|
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'
|
|
],
|
|
}
|
|
},
|
|
components:{HeaderCom},
|
|
onLoad(opation) {
|
|
this.price = opation.price ? opation.price : 0
|
|
this.point = opation.point ? opation.point : 0
|
|
this.payType = opation.payType ? opation.payType : 'NONE'
|
|
this.id = opation.id
|
|
|
|
this.no = opation.no
|
|
this.boxId = opation.boxId
|
|
this.name = opation.name
|
|
this.type = opation.type
|
|
this.sale = opation.sale
|
|
if(this.type === 'SINGLE'){
|
|
this.listLength = 1
|
|
}else if(this.type === 'TRIPLE'){
|
|
this.listLength = 3
|
|
}else{
|
|
this.listLength = 5
|
|
}
|
|
this.preloadImages('box')
|
|
this.preloadImages('lihua')
|
|
this.preloadImages('gx')
|
|
this.preloadImages('grade')
|
|
},
|
|
methods:{
|
|
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;
|
|
});
|
|
}
|
|
|
|
},
|
|
goBack(){
|
|
uni.navigateBack()
|
|
},
|
|
copy(no) {
|
|
uni.setClipboardData({
|
|
data: no,
|
|
})
|
|
},
|
|
open(){
|
|
uni.redirectTo({
|
|
url: `/pages/index/draw?no=${this.no}&boxId=${this.boxId}&type=${this.listLength}`
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page{
|
|
background-color: #F5F5F5;
|
|
}
|
|
.box-pay-success-page{
|
|
padding: 112rpx 32rpx 0 32rpx;
|
|
.status{
|
|
// height: 312rpx;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
// justify-content: center;
|
|
padding-top: 16rpx;
|
|
padding-bottom: 80rpx;
|
|
.status-icon{
|
|
width: 144rpx;
|
|
height: 144rpx;
|
|
}
|
|
.status-txt{
|
|
font-weight: bold;
|
|
font-size: 40rpx;
|
|
color: #333333;
|
|
// margin-top: 16rpx;
|
|
}
|
|
}
|
|
.box{
|
|
width: 688rpx;
|
|
height: 392rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 8rpx;
|
|
padding: 24rpx;
|
|
.title{
|
|
font-weight: 800;
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
}
|
|
.scroll-view{
|
|
margin-top: 24rpx;
|
|
white-space: nowrap;
|
|
.mains{
|
|
margin-right: 16rpx;
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
display: inline-block;
|
|
.box-shop{
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-image: url('@/static/new/box-shop.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
}
|
|
.box-icon{
|
|
width: 142rpx;
|
|
height: 132rpx;
|
|
}
|
|
}
|
|
|
|
}
|
|
.open{
|
|
margin-top: 24rpx;
|
|
width: 640rpx;
|
|
height: 96rpx;
|
|
background: linear-gradient( 90deg, #39B2FF 0%, #3354FF 100%), #D9D9D9;
|
|
border-radius: 8rpx;
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
color: #FFFFFF;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
.info{
|
|
width: 686rpx;
|
|
height: 384rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 8rpx;
|
|
margin-top: 24rpx;
|
|
.item{
|
|
height: 96rpx;
|
|
padding: 24rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.label{
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #666666;
|
|
}
|
|
.value{
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |