342 lines
7.9 KiB
Vue
342 lines
7.9 KiB
Vue
<template>
|
|
<view>
|
|
<uni-popup ref="resPop" type="center" mask-background-color="rgba(0,0,0,0.8)">
|
|
<view class="res-pop common_bg column center" @click="close">
|
|
<view class="res-pop-hd"></view>
|
|
<scroll-view class="res-pop-bd" scroll-y>
|
|
<view class="res-list">
|
|
<view class="res-item" v-for="(item, i) in prizeList" :key="i" @click.stop="onPrizeClick(item)">
|
|
<view class="pic center">
|
|
<image :src="item.goodslist_imgurl" lazy-load></image>
|
|
<view class="type-tag center"
|
|
:style="{ backgroundColor: getBgColor(item.shang_title), color: getTextColor(item.shang_title) }">
|
|
{{ item.shang_title }}
|
|
</view>
|
|
<view class="num center">{{ item.prize_num || '1' }}</view>
|
|
<view v-if="item.doubling > 1" class="yu-tag-text ziti log-multiple-tag" style="">
|
|
x{{ item.doubling }}</view>
|
|
<view v-if="item.is_lingzhu > 0" class="yu-tag-text ziti log-lingzhu-tag" style="">
|
|
</view>
|
|
<view v-if="item.goodslist_type == 4||item.parent_goods_list_id != 0" class="yu-tag-text ziti baoxiang-tag" style="">
|
|
</view>
|
|
</view>
|
|
<view class="title hang1" style="text-align: center;">
|
|
<text> {{ item.goodslist_title }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<view class="res-pop-ft">
|
|
<view class="btn-list">
|
|
<view class="ft-btn common_bg justify-center center" :style="{
|
|
backgroundImage: `url(${$img1('common/quhegui.png')})`
|
|
}" @click="toBag">
|
|
<text>去发货</text>
|
|
</view>
|
|
|
|
<view class="ft-btn common_bg justify-center center" :style="{
|
|
backgroundImage: `url(${$img1('common/jixuchou.png')})`
|
|
}" @click="continueDraw">
|
|
<text>继续抽</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
<DetailBaoXiang ref="baoXiangPop" @end="onBaoXiangEnd"></DetailBaoXiang>
|
|
<uni-popup ref="resPop1" type="center" mask-background-color="rgba(0,0,0,0.8)">
|
|
<view class="res-pop common_bg column center" @click="close1">
|
|
<view class="res-pop-hd"></view>
|
|
<scroll-view class="res-pop-bd" scroll-y>
|
|
<view class="res-list">
|
|
<view class="res-item" v-for="(item, i) in baoXiangList" :key="i">
|
|
<view class="pic center">
|
|
<image :src="item.goodslist_imgurl" lazy-load></image>
|
|
<view class="type-tag center"
|
|
:style="{ backgroundColor: getBgColor(item.shang_title), color: getTextColor(item.shang_title) }">
|
|
{{ item.shang_title }}
|
|
</view>
|
|
<view class="num center">{{ item.prize_num || '1' }}</view>
|
|
<view v-if="item.doubling > 1" class="yu-tag-text ziti log-multiple-tag" style="">
|
|
x{{ item.doubling }}</view>
|
|
<view v-if="item.is_lingzhu > 0" class="yu-tag-text ziti log-lingzhu-tag" style="">
|
|
</view>
|
|
<view v-if="item.goodslist_type == 4" class="yu-tag-text ziti baoxiang-tag" style="">
|
|
</view>
|
|
</view>
|
|
<view class="title hang1" style="text-align: center;">
|
|
<text> {{ item.goodslist_title }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import DetailBaoXiang from '@/components/detail-lucky/detail-bao-xiang.vue'
|
|
import { sleep } from '../../common/util'
|
|
export default {
|
|
name: 'DetailResults',
|
|
components: {
|
|
DetailBaoXiang
|
|
},
|
|
data() {
|
|
return {
|
|
prizeData: [],
|
|
isSkip: false
|
|
}
|
|
},
|
|
computed: {
|
|
prizeList() {
|
|
if (this.isSkip) {
|
|
let t = this.prizeData.filter(item => item.goodslist_type != 4);
|
|
return t;
|
|
}
|
|
return this.prizeData.filter(item => item.parent_goods_list_id == 0)
|
|
},
|
|
baoXiangList() {
|
|
return this.prizeData.filter(item => item.parent_goods_list_id != 0)
|
|
}
|
|
},
|
|
methods: {
|
|
onBaoXiangEnd() {
|
|
console.log('宝箱特效结束');
|
|
this.$refs.resPop1.open();
|
|
},
|
|
async open(data, is_skip = false) {
|
|
this.prizeData = data;
|
|
this.isSkip = is_skip;
|
|
this.audioManager.playOpenBgm();
|
|
this.$refs.resPop.open();
|
|
if (this.baoXiangList.length > 0 && !this.isSkip) {
|
|
await sleep(800);
|
|
console.log('展示宝箱特效');
|
|
this.$refs.baoXiangPop.init();
|
|
this.$refs.baoXiangPop.show();
|
|
}
|
|
},
|
|
close() {
|
|
this.$refs.resPop.close()
|
|
this.$emit('close')
|
|
},
|
|
close1() {
|
|
this.$refs.resPop1.close()
|
|
},
|
|
onPrizeClick(item) {
|
|
if (item.goodslist_type == 4) {
|
|
this.$refs.resPop1.open();
|
|
}
|
|
},
|
|
toBag() {
|
|
this.$emit('to-bag')
|
|
},
|
|
continueDraw() {
|
|
this.$emit('continue-draw')
|
|
},
|
|
// 设置背景颜色
|
|
getBgColor(text) {
|
|
switch (text) {
|
|
case "普通":
|
|
return "#DAFF27";
|
|
case "黄金":
|
|
return "#9A8EF6";
|
|
case "欧皇":
|
|
return "#FFEB8E";
|
|
case "超神":
|
|
return "#FF8E8E";
|
|
default:
|
|
return "#DAFF27";
|
|
}
|
|
},
|
|
// 设置文字颜色
|
|
getTextColor(text) {
|
|
switch (text) {
|
|
case "普通":
|
|
return "#86AD46";
|
|
case "黄金":
|
|
return "#FFFFFF";
|
|
case "欧皇":
|
|
return "#DA8A50";
|
|
case "超神":
|
|
return "#FFEFB4";
|
|
default:
|
|
return "#86AD46";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.res-pop {
|
|
width: 100%;
|
|
height: 100vh;
|
|
position: relative;
|
|
background: url($imgurl+'common/yb.png') no-repeat 0 0 / 100% 100%;
|
|
|
|
.res-pop-hd {
|
|
width: 380rpx;
|
|
height: 104rpx;
|
|
background: url($imgurl+'common/gxhd.png') no-repeat 0 0 / 100% 100%;
|
|
}
|
|
|
|
.res-pop-bd {
|
|
width: 636rpx;
|
|
height: 760rpx;
|
|
background-color: #FFFFFF;
|
|
border-radius: 16rpx;
|
|
margin: 36rpx auto;
|
|
|
|
.res-list {
|
|
padding: 20rpx 10rpx;
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 210rpx);
|
|
gap: 24rpx 10rpx;
|
|
|
|
.res-item {
|
|
width: 180rpx;
|
|
height: 240rpx;
|
|
background-color: #F8F8F8;
|
|
border-radius: 16rpx;
|
|
|
|
.pic {
|
|
width: 180rpx;
|
|
height: 180rpx;
|
|
position: relative;
|
|
background: #D8D8D8;
|
|
border-radius: 16rpx 16rpx 0rpx 0rpx;
|
|
|
|
>image {
|
|
width: 180rpx;
|
|
height: 180rpx;
|
|
border-radius: 16rpx 16rpx 0rpx 0rpx;
|
|
}
|
|
|
|
.type-tag {
|
|
position: absolute;
|
|
left: 12rpx;
|
|
top: 12rpx;
|
|
z-index: 2;
|
|
width: 68rpx;
|
|
height: 32rpx;
|
|
border-radius: 18rpx;
|
|
font-weight: 400;
|
|
font-size: 14rpx;
|
|
}
|
|
|
|
.num {
|
|
position: absolute;
|
|
z-index: 2;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: 10rpx;
|
|
min-width: 42rpx;
|
|
height: 28rpx;
|
|
font-weight: 400;
|
|
font-size: 14rpx;
|
|
color: #ffffff;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
border-radius: 18rpx;
|
|
}
|
|
}
|
|
|
|
.title {
|
|
width: 90%;
|
|
padding: 0rpx 10rpx;
|
|
font-weight: 400;
|
|
font-size: 20rpx;
|
|
color: #333333;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.res-pop-ft {
|
|
padding-top: 40rpx;
|
|
|
|
.btn-list {
|
|
width: 750rpx;
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
|
|
.ft-btn {
|
|
width: 200rpx;
|
|
height: 68rpx;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #333333;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.yu-tag-text {
|
|
position: absolute;
|
|
right: 10rpx;
|
|
bottom: 10rpx;
|
|
z-index: 1;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-weight: 400;
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
.log-multiple-tag {
|
|
position: absolute;
|
|
z-index: 5;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-weight: 400;
|
|
background: url($iconurl + "fanbei.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
color: #000;
|
|
width: 68rpx;
|
|
height: 32rpx;
|
|
top: 12rpx;
|
|
right: 12rpx;
|
|
font-size: 22rpx;
|
|
line-height: 32rpx;
|
|
}
|
|
|
|
.log-lingzhu-tag {
|
|
position: absolute;
|
|
z-index: 5;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-weight: 400;
|
|
background: url($iconurl + "lingzhu.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
color: #000;
|
|
width: 68rpx;
|
|
height: 32rpx;
|
|
top: 12rpx;
|
|
right: 12rpx;
|
|
font-size: 22rpx;
|
|
line-height: 32rpx;
|
|
}
|
|
|
|
.baoxiang-tag {
|
|
position: absolute;
|
|
right: 15rpx;
|
|
top: 15rpx;
|
|
z-index: 5;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #333;
|
|
border-radius: 30rpx;
|
|
background-image: url($iconurl + "baoxiang.png");
|
|
background-size: 100% 100%;
|
|
height: 32rpx;
|
|
width: 68rpx;
|
|
}
|
|
</style>
|