提交
This commit is contained in:
zpc
parent
2f871e3717
commit
5681396b0d
146
components/float-ball/FloatBall.vue
Normal file
146
components/float-ball/FloatBall.vue
Normal file
|
|
@ -0,0 +1,146 @@
|
|||
<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"
|
||||
: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.$c.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: 506rpx;
|
||||
height: 380px;
|
||||
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>
|
||||
|
|
@ -1,13 +1,12 @@
|
|||
<template>
|
||||
<page-container title="商城好物">
|
||||
<banner :type-id="3" :height="326"></banner>
|
||||
<banner :type-id="10" :height="326"></banner>
|
||||
<view style="padding-bottom: 300rpx; background-color: white;">
|
||||
<view class="" style="display: flex; flex-direction: column;">
|
||||
<view class="grid-container">
|
||||
<view v-for="(item, index) in datas" :key="index" class="grid-item" @click="order_money(item)">
|
||||
|
||||
<view class=""
|
||||
style="background-color: #D8D8D8; height: 324rpx; border-radius: 16rpx 16rpx 0rpx 0rpx;">
|
||||
<view class="" style="background-color: #D8D8D8; height: 324rpx; border-radius: 16rpx 16rpx 0rpx 0rpx;">
|
||||
<image :src="item.imgurl"
|
||||
style=" width: 326.39rpx; height: 324rpx; position: absolute; left: 2rpx; border-radius: 16rpx"
|
||||
mode="">
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
@up="loadData">
|
||||
<view style="width: 100%;" :style="{ height: $sys().statusBarHeight + 'px' }"></view>
|
||||
<view style="width: 100%;height: 70rpx;"></view>
|
||||
<banner :type-id="1" :height="300" :img-width="94"></banner>
|
||||
<banner :type-id="9" :height="300" :img-width="94"></banner>
|
||||
<!-- 指示器 -->
|
||||
<!-- <view class="sw-dot relative">
|
||||
<view class="sw-dot-item" v-for="(item, i) in advert" :key="i" :class="{act: swCur == i}"></view>
|
||||
|
|
@ -133,34 +133,12 @@
|
|||
|
||||
</uni-popup>
|
||||
<!-- <tab-bar :index="0"></tab-bar> -->
|
||||
|
||||
<!-- 悬浮球 -->
|
||||
<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"
|
||||
: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>
|
||||
|
||||
<rule-pop ref="rulePop"></rule-pop>
|
||||
|
||||
<rule-pop ref="appNotice" notice-check></rule-pop>
|
||||
|
||||
<float-ball></float-ball>
|
||||
|
||||
<!-- #ifdef MP -->
|
||||
<!-- 隐私政策弹窗 -->
|
||||
<priv-pop></priv-pop>
|
||||
|
|
@ -170,9 +148,12 @@
|
|||
|
||||
<script>
|
||||
import lffBarrage from "@/components/lff-barrage/lff-barrage.vue";
|
||||
import FloatBall from "@/components/float-ball/FloatBall.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
lffBarrage,
|
||||
FloatBall
|
||||
},
|
||||
data() {
|
||||
let tabList = this.$config.getGoodType();
|
||||
|
|
@ -203,9 +184,7 @@ export default {
|
|||
gonggao: "",
|
||||
couponData: "",
|
||||
canGetCoupon: false,
|
||||
swCur: 0,
|
||||
floatBall: [],
|
||||
ballItem: null
|
||||
swCur: 0
|
||||
};
|
||||
},
|
||||
|
||||
|
|
@ -255,7 +234,6 @@ export default {
|
|||
selected: 0,
|
||||
});
|
||||
}
|
||||
this.getFloatBall();
|
||||
},
|
||||
|
||||
onReady() {
|
||||
|
|
@ -275,62 +253,10 @@ export default {
|
|||
};
|
||||
},
|
||||
computed: {
|
||||
getBallStyle() {
|
||||
return (item) => {
|
||||
//判断item.position_x 第一位是否是-号
|
||||
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;
|
||||
};
|
||||
}
|
||||
// 删除getBallStyle和getPopupStyle方法
|
||||
},
|
||||
methods: {
|
||||
BallClick(item) {
|
||||
console.log(item);
|
||||
if (item.type == 2) {
|
||||
this.$c.nav(item.link_url);
|
||||
return;
|
||||
}
|
||||
if (item.type == 1) {
|
||||
// this.$c.nav(item.link_url);
|
||||
this.ballItem = item;
|
||||
this.$refs.floatBall_popup.open();
|
||||
}
|
||||
},
|
||||
// 删除BallClick和getFloatBall方法
|
||||
/**
|
||||
* @description: 是否弹公告
|
||||
* @return {*}
|
||||
|
|
@ -346,14 +272,6 @@ export default {
|
|||
this.$refs.appNotice.getRule(19, "公告");
|
||||
uni.setStorageSync("_is_this_show", true);
|
||||
}
|
||||
},
|
||||
async getFloatBall() {
|
||||
const { status, data, msg } = await this.$request.get("getFloatBall");
|
||||
if (status == 1) {
|
||||
this.floatBall = data;
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
swChange(e) {
|
||||
this.swCur = e.detail.current;
|
||||
|
|
@ -517,7 +435,7 @@ export default {
|
|||
url: "/pages/shouye/ranking",
|
||||
});
|
||||
},
|
||||
toyaoqingRanking() {
|
||||
toyaqingRanking() {
|
||||
uni.navigateTo({
|
||||
url: "/pages/shouye/yaoqing_ranking",
|
||||
});
|
||||
|
|
@ -1229,73 +1147,15 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
.group-fixed {
|
||||
width: 187rpx;
|
||||
height: 100rpx;
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
right: 0;
|
||||
bottom: 20vh;
|
||||
|
||||
animation: zoom 1.2s ease-in-out infinite;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.group-fixed2 {
|
||||
width: 187rpx;
|
||||
height: 100rpx;
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
right: 0;
|
||||
bottom: 28vh;
|
||||
|
||||
animation: zoom 1.2s ease-in-out infinite;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.group-fixed1 {
|
||||
width: 52rpx;
|
||||
height: 120rpx;
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
right: 0;
|
||||
top: 21vh;
|
||||
|
||||
// animation: zoom 1.2s ease-in-out infinite;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
// 删除此样式
|
||||
}
|
||||
|
||||
.pop-ball {
|
||||
width: 506rpx;
|
||||
height: 380px;
|
||||
position: relative;
|
||||
// background: #b198e2;
|
||||
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;
|
||||
// 删除此样式
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user