316 lines
6.1 KiB
Vue
316 lines
6.1 KiB
Vue
<template>
|
|
<view v-show="showPop" class="gift-box">
|
|
<scroll-view style="height: 100%;" scroll-y>
|
|
<view class="top-box">
|
|
<view class="title">选择礼物</view>
|
|
<view class="btn-box" @click="close">
|
|
<u-icon name="close"></u-icon>
|
|
<view class="text">取消</view>
|
|
</view>
|
|
</view>
|
|
<view class="list-box">
|
|
<view v-for="(item,index) in dataList" class="gift" @click="sendGift(item)">
|
|
<view class="img-box">
|
|
<img class="img" :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">{{ fen2yuan(item.money) }} 钻石</view>
|
|
</view>
|
|
</view>
|
|
</scroll-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">
|
|
<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 class="btn active" @click="ok">确定</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import sheep from '@/sheep';
|
|
export default {
|
|
components: {
|
|
|
|
},
|
|
props: {
|
|
modelValue: {
|
|
type: Object,
|
|
default: {}
|
|
},
|
|
showPop: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
dataList: {
|
|
type: Array,
|
|
default: []
|
|
},
|
|
},
|
|
emits: ["close", "update:modelValue"],
|
|
data() {
|
|
return {
|
|
giftFlag: false,
|
|
src: '',
|
|
canvasId: 'myCanvas2',
|
|
|
|
gift: {},
|
|
|
|
}
|
|
},
|
|
methods: {
|
|
close() {
|
|
this.$emit('close');
|
|
},
|
|
sendGift(e) {
|
|
this.gift = e;
|
|
|
|
if(e.giftType == 0){
|
|
// 普通礼物不播放
|
|
this.close();
|
|
this.$emit('update:modelValue', 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.close();
|
|
this.$emit('update:modelValue', this.gift);
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.gift-box {
|
|
background-color: #fff;
|
|
position: absolute;
|
|
top: 200rpx;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 9999;
|
|
padding: 15px;
|
|
border-top-right-radius: 20rpx;
|
|
border-top-left-radius: 20rpx;
|
|
padding-bottom: 0;
|
|
|
|
.top-box {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: #fff;
|
|
top: 200rpx;
|
|
padding: 0 15px;
|
|
border-top-right-radius: 20rpx;
|
|
border-top-left-radius: 20rpx;
|
|
height: 110rpx;
|
|
z-index: 1;
|
|
|
|
.title {
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.btn-box {
|
|
background-color: var(--ui-BG-Main);
|
|
padding: 7px 15px;
|
|
font-size: 24rpx;
|
|
border-radius: 40px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #fff;
|
|
|
|
.text {
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.list-box {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding-top: 60rpx;
|
|
|
|
.gift {
|
|
width: 25%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 20rpx 0px;
|
|
|
|
.img-box {
|
|
position: relative;
|
|
|
|
.img{
|
|
max-width: 160rpx;
|
|
height: 160rpx;
|
|
}
|
|
|
|
.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: 160rpx;
|
|
margin-top: 2px;
|
|
margin-bottom: 7px;
|
|
}
|
|
|
|
.price {
|
|
font-size: 20rpx;
|
|
color: var(--ui-BG-Main);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.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> |