首页弹窗

App.vue

@@ -222,4 +222,19 @@ button.hide {
 .uni-tabbar__icon {
   height: 50px !important;
 }
+
+@keyframes m-zoom {
+	0% {
+		transform: scale(1);
+	}
+
+	50% {
+		transform: scale(0.9);
+	}
+
+	100% {
+		transform: scale(1);
+	}
+}
+
 </style>

pages/shouye/index.vue

@@ -15,7 +15,7 @@
 		<mescroll-body ref="mescrollRef" class="valbox" @init="mescrollInit" :down="downOption" @down="downCallback"
 			@up="loadData">
 			<view style="width: 100%;" :style="{ height: $sys().statusBarHeight + 'px' }"></view>
-			<view style="width: 100%;height: 70rpx;" ></view>
+			<view style="width: 100%;height: 70rpx;"></view>
 			<banner :type-id="1" :height="300" :img-width="94"></banner>
 			<!-- 指示器 -->
 			<!-- 	<view class="sw-dot relative">
@@ -64,10 +64,7 @@
 
 			<view class="qbt_con">
 				<view v-for="(item, index) in listdata" :key="index" class="qbt_con_item" @click="todetails(item)">
-					<view class="list_1 center" style="
+					<view class="list_1 center" style="background-color: #d8d8d8;border-radius: 16rpx 16rpx 0rpx 0rpx;">
-              background-color: #d8d8d8;
-              border-radius: 16rpx 16rpx 0rpx 0rpx;
-            ">
 						<image :src="item.imgurl" mode="aspectFill"></image>
 					</view>
 					<view class="list_2">
@@ -106,22 +103,7 @@
 				</view>
 			</view>
 		</mescroll-body>
-		<!-- 群聊弹窗 -->
+
-		<uni-popup ref="qunliao_show" type="center" maskBackgroundColor="rgba(0,0,0,0.8)">
-			<view class="pop">
-				<view class="flex">
-					<image class="img100" :src="erweima" :show-menu-by-longpress="true" mode="aspectFit"></image>
-				</view>
-				<view class="pop-view column">
-					<text class="ziti">添加客服领优惠</text>
-					<text>识别图中二维码</text>
-				</view>
-				<image class="pop-liwu" :src="$img1('index/liwu.png')"></image>
-				<view @click="$refs.qunliao_show.close()" class="pop-close flex">
-					<image :src="$img1('common/close.png')" class="img100" />
-				</view>
-			</view>
-		</uni-popup>
 
 		<!-- 优惠券弹窗 -->
 		<uni-popup ref="couponPop" type="center" maskBackgroundColor="rgba(0,0,0,0.8)">
@@ -152,25 +134,29 @@
 		</uni-popup>
 		<!-- <tab-bar :index="0"></tab-bar> -->
 
-		<!-- 进福利群 -->
+		<!-- 悬浮球 -->
-		<!-- <view class="group-fixed" @click="$refs.qunliao_show.open()">
+		<template v-if="floatBall">
-			<image :src="$img1('image/fuliqun.png')"></image>
+			<view v-for="(item, index) in floatBall" :style="[getBallStyle(item)]" :key="index" class="group-fixed1"
-		</view> -->
+				@click="BallClick(item)">
-
+				<image :src="item.image"></image>
-		<!-- 邀请好友 -->
+			</view>
-		<!-- 	<view class="group-fixed2" @tap="$c.to({url:'/pages/user/tui-guang'})">
+		</template>
-			<image :src="$img1('image/yaoqing.png')"></image>
-		</view> -->
-
-		<!-- 		排行榜
-		<view class="group-fixed1" @click="toRanking()">
-			<image :src="$img1('image/paihangbang.png')"></image>
-		</view> -->
-		<!-- 排行榜 -->
-		<view class="group-fixed1" @click="toyaoqingRanking()">
-			<image :src="$img1('image/paihangbang.png')"></image>
-		</view>
 
+		<!-- 悬浮球弹窗 -->
+		<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>
@@ -218,6 +204,8 @@ export default {
 			couponData: "",
 			canGetCoupon: false,
 			swCur: 0,
+			floatBall: [],
+			ballItem: null
 		};
 	},
 
@@ -267,6 +255,7 @@ export default {
 				selected: 0,
 			});
 		}
+		this.getFloatBall();
 	},
 
 	onReady() {
@@ -274,6 +263,7 @@ export default {
 		this.getCoupon();
 		// this.$refs.rulePop.open()
 		this.getnews();
+
 	},
 
 	onShareAppMessage() {
@@ -284,7 +274,63 @@ export default {
 			path: "/pages/shouye/index?pid=" + uni.getStorageSync("userinfo").ID,
 		};
 	},
+	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;
+			};
+		}
+	},
 	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();
+			}
+		},
 		/**
 		 * @description: 是否弹公告
 		 * @return {*}
@@ -301,7 +347,14 @@ export default {
 				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;
 		},
@@ -508,6 +561,7 @@ export default {
 	height: 380px;
 	position: relative;
 	background: #b198e2;
+
 	box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(137, 77, 211, 0.33);
 	border-radius: 44rpx;
 
@@ -1222,4 +1276,26 @@ export default {
 		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>