<template>
|
<view class="popCoupon" :class="isShow?'show':''">
|
<view class="container">
|
<view class="box" v-if="isVideo">
|
<view class="title">
|
<image src="https://ossacmall.bluedeer.com.cn/app/static/images/video_title.png"></image>
|
</view>
|
<view v-show="!controls" class="uploade-img">
|
<video ref="myVideo" id="myVideo" :src='uploadVideo' objectFit="cover" controls style="width:100%;height:100% "
|
show-center-play-btn="true" show-mute-btn="true" muted="true" show-fullscreen-btn="true" auto-pause-if-navigate
|
:custom-cache="false" :enable-progress-gesture="true" show-progress="false" :poster="uploadVideoImg" @pause="videoPause"></video>
|
</view>
|
<view class="poster" v-show="controls">
|
<image class="image" :src="uploadVideoImg" mode="aspectFill"></image>
|
</view>
|
<view class="stop" v-show="controls" @tap="bindPlay">
|
<image class="image" src="https://ossacmall.bluedeer.com.cn/app/static/images/stop.png"></image>
|
</view>
|
</view>
|
<image v-else-if='isImage' :src="uploadImg" class="only-image" mode="widthFix"></image>
|
<view class="popCoupon_hide" style="transform:scale(0.8)">
|
<checkbox-group @change="handleHidePop">
|
<checkbox class="zone-video" value="hide" />后续进入不弹窗
|
</checkbox-group>
|
</view>
|
<view class="popCoupon_close" @click="hide()"></view>
|
</view>
|
</view>
|
|
</template>
|
|
<script>
|
export default {
|
name: "popVideo",
|
data() {
|
return {
|
zoneId:null,
|
isShow: false,
|
controls: true,
|
videoContext: null,
|
isVideo: false,
|
isImage: false,
|
uploadImg: '',
|
uploadVideo: '',
|
uploadVideoImg: '',
|
uploadImg: "https://oss.bluedeer.com.cn/crmeb-sit/crmebimage/crmebimage/public/content/2025/08/14/827eec62346047a78d7018949f4bcb1en6q0nfp0yi.png",
|
uploadVideo: 'https://oss.bluedeer.com.cn/crmeb-sit/crmebimage/crmebimage/public/content/2025/12/09/cfe8c50580a24d7b8873996830c97023fEYwUBKIKt.mp4'
|
};
|
},
|
methods: {
|
handleHidePop(val) {
|
if (val.detail.value.includes('hide')) {
|
uni.setStorageSync(this.zoneId+'hideZoneVideo', 'true')
|
} else {
|
uni.setStorageSync(this.zoneId+'hideZoneVideo', 'false')
|
}
|
},
|
show(info) {
|
let that = this;
|
that.zoneId=info.id
|
const status = uni.getStorageSync(that.zoneId+'hideZoneVideo')
|
if (status == 'true') {
|
that.isShow = false
|
this.hide()
|
return;
|
}
|
if (info.uploadVideo) {
|
that.uploadVideo = info.uploadVideo
|
that.uploadVideoImg = info.uploadVideoImg
|
that.isVideo = true
|
that.isShow = true
|
} else if (info.uploadImg) {
|
that.uploadImg = info.uploadImg
|
that.isImage = true
|
that.isShow = true
|
} else {
|
that.isShow = false
|
this.hide()
|
}
|
|
},
|
hide() {
|
this.isShow = false;
|
this.$emit('close')
|
},
|
videoPause(e) {},
|
bindPlay: function() {
|
if (!this.videoContext) {
|
this.videoContext = uni.createVideoContext('myVideo', this);
|
}
|
this.$set(this, 'controls', false)
|
this.videoContext.play();
|
|
// this.autoplay = false
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.popCoupon {
|
position: fixed;
|
left: 0;
|
top: 0;
|
width: 100%;
|
height: 100%;
|
z-index: 11111;
|
background-color: rgba(0, 0, 0, .7);
|
display: none;
|
|
&.show {
|
display: block;
|
}
|
|
.container {
|
position: absolute;
|
left: 50%;
|
top: 50%;
|
transform: translate(-50%, -50%);
|
}
|
|
.only-image {
|
position: relative;
|
width: 651rpx;
|
border-radius: 14rpx;
|
|
image {
|
width: 100%;
|
}
|
}
|
|
.box {
|
padding: 90rpx 0 70rpx 0;
|
background: url("https://ossacmall.bluedeer.com.cn/app/static/images/confirm_bg.png") center 320rpx/100% auto no-repeat;
|
background-color: #f5f5f5;
|
position: relative;
|
border-radius: 14rpx;
|
width: 651rpx;
|
height: 1050rpx;
|
|
&::before {
|
content: '';
|
position: absolute;
|
width: 100%;
|
height: 320rpx;
|
background-color: #FFE20E;
|
top: 0;
|
border-radius: 14rpx;
|
}
|
|
.poster {
|
position: absolute;
|
left: 46rpx;
|
bottom: 46rpx;
|
width: 559rpx;
|
height: 932rpx;
|
z-index: 9;
|
|
.image {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
|
.stop {
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
width: 136rpx;
|
height: 136rpx;
|
margin-top: -68rpx;
|
margin-left: -68rpx;
|
z-index: 9;
|
|
.image {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
|
.popCoupon_close {
|
position: relative;
|
left: 50%;
|
margin-top: 40rpx;
|
margin-left: -45rpx;
|
bottom: 0;
|
width: 90rpx;
|
height: 90rpx;
|
background: url("https://ossacmall.bluedeer.com.cn/app/static/images/pop_close2.png") center center/78rpx auto no-repeat;
|
}
|
|
.popCoupon_hide {
|
position: relative;
|
left: 0;
|
bottom: 0rpx;
|
margin-top: 30rpx;
|
font-size: 38rpx;
|
color: #fff;
|
|
checkbox {
|
margin-right: 15rpx;
|
}
|
}
|
|
.title {
|
text-align: center;
|
position: absolute;
|
top: -40rpx;
|
width: 100%;
|
z-index: 2;
|
|
image {
|
width: 260rpx;
|
height: 82.6rpx;
|
}
|
}
|
|
.uploade-img {
|
width: 559rpx;
|
height: 932rpx;
|
position: absolute;
|
left: 46rpx;
|
bottom: 46rpx;
|
}
|
|
}
|
</style>
|
