From 5681396b0dcc4fffa7ce74417bb5af8540e4819e Mon Sep 17 00:00:00 2001
From: zpc <zpc1131@gamil.com>
Date: Fri, 18 Apr 2025 00:56:03 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/float-ball/FloatBall.vue | 146 ++++++++++++++++++++++++
 pages/mall/index.vue                |   5 +-
 pages/shouye/index.vue              | 166 +++-------------------------
 3 files changed, 161 insertions(+), 156 deletions(-)
 create mode 100644 components/float-ball/FloatBall.vue

diff --git a/components/float-ball/FloatBall.vue b/components/float-ball/FloatBall.vue
new file mode 100644
index 0000000..a2ef2c3
--- /dev/null
+++ b/components/float-ball/FloatBall.vue
@@ -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> 
\ No newline at end of file
diff --git a/pages/mall/index.vue b/pages/mall/index.vue
index f3191bc..85aebc8 100644
--- a/pages/mall/index.vue
+++ b/pages/mall/index.vue
@@ -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="">
diff --git a/pages/shouye/index.vue b/pages/shouye/index.vue
index bb1ee44..7a57c26 100644
--- a/pages/shouye/index.vue
+++ b/pages/shouye/index.vue
@@ -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>
\ No newline at end of file