310 lines
6.2 KiB
Vue
310 lines
6.2 KiB
Vue
<template>
|
||
<view>
|
||
<view v-if="isGift" class="star-box">
|
||
<view class="title-box">
|
||
<view class="title">礼物墙</view>
|
||
<view class="num">(已点亮：{{starNum}}/{{total}})</view>
|
||
</view>
|
||
|
||
<view class="list-box">
|
||
<view @click="sendGift(item)" v-for="(item,index) in virtualList" :key="item.id" class="gift">
|
||
<view class="img-box">
|
||
<img class="img" :class="item.playStatus == 0 ? 'hui' : ''" :src="item.img"></img>
|
||
<view class="tag" v-if="item.giftType == 1">
|
||
<text>特效</text>
|
||
<text v-if="item.tag">·{{item.tag}}</text>
|
||
</view>
|
||
<view class="tag" v-if="item.giftType == 0 && item.tag">
|
||
<text>{{item.tag}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="name">{{item.name}}</view>
|
||
<view class="price">x {{item.playNum}}</view>
|
||
<view class="btn" @tap.stop="openGift(item)" v-if="item.playStatus == 0">点亮</view>
|
||
<view class="btn" @tap.stop="openGift(item)" v-if="item.playStatus == 1">赠送</view>
|
||
<view class="btn" v-if="item.playStatus == 2">已下架</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
|
||
<view class="svga-box" :class="giftFlag ? 'svga-show': 'svga-hide'">
|
||
<c-svga ref="cSvgaRef" :canvasId='canvasId' :src="src" :loops='0' :auto-play="false" @frame='onFrame' @finished='onFinished' @percentage='onPercentage' @loaded='onLoaded'></c-svga>
|
||
<view class="close-btn" @click="closeSvga">
|
||
<view class="bottom-box">
|
||
<view class="title">{{gift.name}}</view>
|
||
<view class="price">{{ fen2yuan(gift.money) }} 钻石</view>
|
||
<view class="btn-box">
|
||
<view class="btn" @click="cannel">取消</view>
|
||
<view v-if="gift.playStatus == 0" class="btn active" @click="ok">点亮</view>
|
||
<view v-if="gift.playStatus == 1" class="btn active" @click="ok">赠送</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import sheep from '@/sheep';
|
||
export default {
|
||
components: {
|
||
|
||
},
|
||
props: {
|
||
virtualList: {
|
||
type: Array,
|
||
default: [],
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
giftFlag: false,
|
||
src: '',
|
||
canvasId: 'myCanvas',
|
||
|
||
gift: {},
|
||
}
|
||
},
|
||
computed: {
|
||
starNum() {
|
||
var count = 0;
|
||
this.virtualList.forEach(e => {
|
||
if(e.playStatus > 0){
|
||
count ++;
|
||
}
|
||
});
|
||
return count;
|
||
},
|
||
total() {
|
||
return this.virtualList.length;
|
||
},
|
||
isGift() {
|
||
return sheep.$store('user').tradeConfig.giftEnabled;
|
||
},
|
||
},
|
||
methods: {
|
||
sendGift(e) {
|
||
this.gift = e;
|
||
|
||
if(e.giftType == 0){
|
||
// 普通礼物不播放
|
||
this.$emit('openGift', this.gift);
|
||
return;
|
||
}
|
||
|
||
this.src = e.pic;
|
||
this.giftFlag = true;
|
||
},
|
||
onFinished() {
|
||
this.giftFlag = false;
|
||
console.log('动画停止播放时回调');
|
||
},
|
||
onFrame(frame) {//动画播放至某帧后回调
|
||
// console.log(frame);
|
||
},
|
||
onPercentage(percentage) { //动画播放至某进度后回调
|
||
// console.log(percentage);
|
||
},
|
||
onLoaded() {
|
||
this.$refs.cSvgaRef.call('setContentMode', 'AspectFill');
|
||
console.log('加载完成');
|
||
this.$refs.cSvgaRef.call('startAnimation');
|
||
},
|
||
closeSvga() {
|
||
this.src = "";
|
||
this.$refs.cSvgaRef.call('stopAnimation');
|
||
this.giftFlag = false;
|
||
},
|
||
fen2yuan(price) {
|
||
var f = 0;
|
||
var p = (price / 100.0).toFixed(0);
|
||
var p1 = (price / 100.0).toFixed(1);
|
||
var p2 = (price / 100.0).toFixed(2);
|
||
if(p*100 == price){
|
||
f = 0;
|
||
}else if(p1*100 == price){
|
||
f = 1;
|
||
}else if(p2*100 == price){
|
||
f = 2;
|
||
}
|
||
return (price / 100.0).toFixed(f)
|
||
},
|
||
cannel() {
|
||
this.closeSvga();
|
||
},
|
||
ok() {
|
||
this.closeSvga();
|
||
this.$emit('openGift', this.gift);
|
||
},
|
||
openGift(e) {
|
||
this.$emit('openGift', e);
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.star-box {
|
||
padding: 30rpx 20rpx;
|
||
|
||
.title-box {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.title {
|
||
font-size: 28rpx;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.num {
|
||
font-size: 24rpx;
|
||
color: var(--ui-BG-Main);
|
||
}
|
||
}
|
||
|
||
.list-box {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
padding-top: 30rpx;
|
||
|
||
.gift {
|
||
width: 25%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 20rpx 0px;
|
||
|
||
.img-box {
|
||
position: relative;
|
||
|
||
.img{
|
||
max-width: 150rpx;
|
||
height: 150rpx;
|
||
}
|
||
|
||
.hui {
|
||
filter: grayscale(100%);
|
||
}
|
||
|
||
.tag {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
font-size: 16rpx;
|
||
color: #fff;
|
||
background-color: var(--ui-BG-Main);
|
||
border-radius: 40px;
|
||
padding: 2rpx 8rpx;
|
||
}
|
||
}
|
||
|
||
.name {
|
||
font-size: 24rpx;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
max-width: 150rpx;
|
||
margin-top: 2px;
|
||
margin-bottom: 7px;
|
||
}
|
||
|
||
.price {
|
||
font-size: 20rpx;
|
||
color: var(--ui-BG-Main);
|
||
margin-bottom: 7px;
|
||
}
|
||
|
||
.btn {
|
||
border: 1px solid var(--ui-BG-Main);
|
||
border-radius: 40px;
|
||
color: var(--ui-BG-Main);
|
||
padding: 8rpx 20rpx;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
}
|
||
|
||
.svga-box {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 999999999;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: black;
|
||
|
||
.close-btn {
|
||
color: #fff;
|
||
position: absolute;
|
||
z-index: 999999999;
|
||
padding: 5px 10px;
|
||
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 100rpx;
|
||
|
||
.bottom-box {
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.title {
|
||
font-size: 28rpx;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.price {
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.btn-box {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 10px;
|
||
|
||
.btn {
|
||
border: 1px solid #fff;
|
||
font-size: 28rpx;
|
||
padding: 20rpx 110rpx;
|
||
border-radius: 40px;
|
||
margin: 15px;
|
||
color: #fff;
|
||
}
|
||
|
||
.active {
|
||
border: 1px solid var(--ui-BG-Main);
|
||
background-color: var(--ui-BG-Main);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.svga-hide {
|
||
/* #ifdef MP */
|
||
transform: translate(-100%, 0);
|
||
/* #endif */
|
||
|
||
/* #ifndef MP */
|
||
display: none;
|
||
/* #endif */
|
||
}
|
||
|
||
.svga-show {
|
||
/* #ifdef MP */
|
||
transform: translate(0, 0);
|
||
/* #endif */
|
||
|
||
/* #ifndef MP */
|
||
display: block;
|
||
/* #endif */
|
||
}
|
||
</style> |