148 lines
3.3 KiB
Vue
148 lines
3.3 KiB
Vue
<template>
|
|
<view>
|
|
<!-- 悬浮球 -->
|
|
<template v-if="floatBall">
|
|
<view v-for="(item, index) in floatBall" :style="[getBallStyle(item)]" :key="index" class="group-fixed1"
|
|
@click="BallClick(item)">
|
|
<image :src="item.image"></image>
|
|
</view>
|
|
</template>
|
|
|
|
<!-- 悬浮球弹窗 -->
|
|
<uni-popup ref="floatBall_popup" type="center" maskBackgroundColor="rgba(0,0,0,0.8)">
|
|
<view class="pop-ball" v-if="ballItem"
|
|
:style="{ backgroundImage: 'url(' + ballItem.image_bj + ')', backgroundSize: '100% 99.5%', backgroundRepeat: 'no-repeat' }">
|
|
<image show-menu-by-longpress v-if="ballItem != null" :src="ballItem.image_details" mode="aspectFit"
|
|
:style="[getPopupStyle(ballItem)]">
|
|
</image>
|
|
</view>
|
|
<view class="pop-ball-close flex" @click="$refs.floatBall_popup.close()">
|
|
<view style="width: 48rpx;height: 48rpx;border-radius: 50%;opacity: 0.5;">
|
|
<image show-menu-by-longpress :src="$img1('common/close.png')" class="img100" />
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'FloatBall',
|
|
data() {
|
|
return {
|
|
floatBall: [],
|
|
ballItem: null
|
|
}
|
|
},
|
|
computed: {
|
|
getBallStyle() {
|
|
return (item) => {
|
|
let s = {
|
|
width: item.width,
|
|
height: item.height,
|
|
top: item.position_y,
|
|
};
|
|
if (item.position_x.indexOf('-') > -1) {
|
|
let position_x = item.position_x.split('-')[1];
|
|
s.right = position_x;
|
|
} else {
|
|
s.left = item.position_x;
|
|
}
|
|
if (item.effect == 1) {
|
|
s.animation = "m-zoom 1.2s ease-in-out infinite";
|
|
}
|
|
return s;
|
|
}
|
|
},
|
|
getPopupStyle() {
|
|
return (item) => {
|
|
if (item == null) {
|
|
return {};
|
|
}
|
|
let s = {
|
|
width: item.image_details_w,
|
|
height: item.image_details_h,
|
|
position: 'relative',
|
|
};
|
|
if (item.image_details_x != "0") {
|
|
s.left = item.image_details_x;
|
|
}
|
|
if (item.image_details_y != "0") {
|
|
s.top = item.image_details_y;
|
|
}
|
|
return s;
|
|
};
|
|
}
|
|
},
|
|
methods: {
|
|
BallClick(item) {
|
|
if (item.type == 2) {
|
|
this.$common.nav(item.link_url);
|
|
return;
|
|
}
|
|
if (item.type == 1) {
|
|
this.ballItem = item;
|
|
this.$refs.floatBall_popup.open();
|
|
}
|
|
},
|
|
async getFloatBall() {
|
|
const { status, data, msg } = await this.$request.get("getFloatBall");
|
|
if (status == 1) {
|
|
this.floatBall = data;
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getFloatBall();
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.group-fixed1 {
|
|
width: 52rpx;
|
|
height: 120rpx;
|
|
position: fixed;
|
|
z-index: 10;
|
|
right: 0;
|
|
top: 21vh;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.pop-ball {
|
|
width: 85vw;
|
|
// height: 400px;
|
|
position: relative;
|
|
border-radius: 25rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.pop-ball-close {
|
|
margin-top: 20rpx;
|
|
width: 100%;
|
|
height: 50rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
@keyframes m-zoom {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
|
|
50% {
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
</style> |