2222

2025-05-22 01:32:29 +08:00 · 2025-05-22 01:32:29 +08:00 · b3bd647daf
commit b3bd647daf
parent 1774490c54
5 changed files with 1472 additions and 109 deletions
--- a/components/detail-lucky/detail-lucky-canvas.vue
+++ b/components/detail-lucky/detail-lucky-canvas.vue
--- a/components/detail-lucky/detail-lucky-web.vue
+++ b/components/detail-lucky/detail-lucky-web.vue
@ -1,107 +1,142 @@
 <template>
-  <view>
-    <web-view 
-      ref="webview"  :src="webUrl"  :webview-styles="webviewStyles"   @message="onMessage"
-    />
-  </view>
+	<view>
+		<web-view v-if="isWebView" ref="webview" :src="webUrl" :webview-styles="webviewStyles" @message="onMessage" />
+	</view>
 </template>

 <script>
 export default {
-  components: {},
-  props: {
-    // 移除prizeList props
-  },
-  data() {
-    const sysinfo = uni.getSystemInfoSync();
-    return {
-      hideviewStyles: {
-        height: "0px",
-        width: "0px",
-      },
-      webviewStyles: {
-        height: sysinfo.windowHeight + "px",
-        width: sysinfo.windowWidth+ "px",
-      },
-      // webUrl: 'https://zfunbox.cn/m/chou-box-luck.html',
-      webUrl:
-        "http://192.168.1.26:5500/%E5%85%AC%E5%8F%B8/%E5%B7%A5%E4%BD%9C/%E5%8F%8B%E8%BE%BE/%E8%90%BD%E5%9C%B0%E9%A1%B5/chou-box-luck.html",
-    };
-  },
-  computed: {
-    // 计算抽奖项尺寸
-    lotteryItemSize() {
-      let height = uni.upx2px(220);
-      let width = uni.upx2px(170);
-      return [width, height];
-    },
-  },
-  methods: {
-    
-    getWebview() {
-      const currentWebview = this.$scope.$getAppWebview();
-      console.log("收到网页消息:",currentWebview.children());
-       
-      const webview = currentWebview.children()[0]; // 获取第一个子 webview
-      return webview;
-    },
-    setWebviewAction(action, data) {
-      const webview = this.getWebview(); // 获取webview
-      //判断data 是否是object对象或者是array对象，如果是的话，将其转换成为数组，然后在转换成为json字符串
-      if (typeof data === "object") {
-        data = JSON.stringify(data);
-      }
-      //判断data 是否是array对象，如果是的话，将其转换成为数组，然后在转换成为json字符串
-      if (Array.isArray(data)) {
-        data = JSON.stringify(data);
-      }
-      console.log(
-        "setWebviewActionsetWebviewActionsetWebviewAction",
-        action,
-        data
-      );
-      webview.evalJS('OnMessage("' + action + '","' + data + '");');
-    },
-    onMessage(event) {
-      console.log("收到网页消息:", event);
-      const data = event.detail.data[0];
-      if (data.action === "skip") {
-        //跳过动画
-        uni.showToast({
-          title: "跳过动画",
-          icon: "none",
-        });
-      } else if (data.action === "load") {
-         //跳过动画
-         uni.showToast({
-          title: "初始化",
-          icon: "none",
-        });
-        //初始化成功
-        this.setWebviewAction("addPrizeImage", [{}]);
-      } else {
-        console.log(data);
+	components: {},
+	props: {
+		// 移除prizeList props
+	},
+	data() {
+		const sysinfo = uni.getSystemInfoSync();
+		return {
+			hideviewStyles: {
+				height: "0px",
+				width: "0px",
+			},
+			webviewStyles: {
+				height: sysinfo.windowHeight + "px",
+				width: sysinfo.windowWidth + "px",
+			},
+			isWebView: false,
+			webviewObj: null,
+			status: "init",
+			lotteryResult: null,
+			page: null,
+			prize: [],
+			// webUrl: 'https://zfunbox.cn/m/chou-box-luck.html',
+			webUrl: "http://192.168.1.26:5501/%E5%85%AC%E5%8F%B8/%E5%B7%A5%E4%BD%9C/%E5%8F%8B%E8%BE%BE/%E8%90%BD%E5%9C%B0%E9%A1%B5/chou-box-luck.html",
+		};
+	},

-        uni.showToast({
-          title: data.msg,
-          icon: "none",
-        });
-      }
-    },
-    evalJs() {
-      const webview = this.getWebview(); // 获取第一个子 webview
-      if (webview) {
-        // webview.
-        // webview.evalJS('start();');
-      } else {
-        console.error("未找到子 WebView");
-      }
-    },
-  },
-  mounted() {
-    // 不再自动初始化
-  },
+	onLoad() {
+		// this.sendToWeb()
+
+	},
+	computed: {
+
+	},
+	watch: {
+
+	},
+
+	methods: {
+		init(Prize, page, _lotteryResult) {
+			if (Prize.length > 0) {
+				Prize = Prize.map(item => {
+					return {
+						title: item.title,
+						imgurl: item.imgurl
+					}
+				})
+			}
+			this.prize = Prize;
+			this.page = page;
+			this.lotteryResult = _lotteryResult;
+			this.isWebView = true;
+		},
+		getWebview() {
+			let currentWebview = this.page.$scope.$getAppWebview();
+			let webview = currentWebview.children()[0]; // 获取第一个子 webview
+			return webview;
+		},
+		setWebviewAction(action, data) {
+			const webview = this.getWebview(); // 获取webview
+			//判断data 是否是object对象或者是array对象，如果是的话，将其转换成为数组，然后在转换成为json字符串
+			if (typeof data === "object") {
+				data = JSON.stringify(data);
+			}
+			//判断data 是否是array对象，如果是的话，将其转换成为数组，然后在转换成为json字符串
+			if (Array.isArray(data)) {
+				data = JSON.stringify(data);
+			}
+			let str = 'OnMessage("' + action + '","' + data + '");';
+			console.log("OnMessage", str);
+			webview.evalJS('OnMessage("' + action + '",\'' + data + '\');');
+		},
+		onMessage(event) {
+			console.log("收到网页消息:", event);
+			const data = event.detail.data[0];
+			if (data.action === "load") {
+				// //跳过动画
+				// uni.showToast({
+				// 	title: "初始化成功",
+				// 	icon: "none",
+				// });
+				this.status = "load";
+				//初始化成功
+				this.setWebviewAction("addPrizeImage", this.prize);
+			} else if (data.action === "InitPrizeSuccess") {
+				// //跳过动画
+				// uni.showToast({
+				// 	title: "奖品加载成功，开始抽奖",
+				// 	icon: "none",
+				// });
+				//初始化奖品成功
+				if (this.lotteryResult != null) {
+					console.log(this.lotteryResult.length, "this.lotteryResult");
+					this.setWebviewAction("addLotteryCount", this.lotteryResult.length);
+				}
+
+			} else if (data.action == "addLotteryCountSuccess") {
+				this.setWebviewAction("startLottery",
+					{
+						stopSleep: 3000,
+						lotteryResult: this.lotteryResult
+					});
+
+			} else if (data.action == "stopLottery") {
+				this.isWebView = false;
+				this.$emit("end", [])
+			} else if (data.action == "luckyStop") {
+				this.$emit("luckyStop", "")
+			} else if (data.action == "luckyPlay") {
+				this.$emit("luckyPlay", "")
+			}
+			else {
+				console.log(data);
+				uni.showToast({
+					title: data.msg,
+					icon: "none",
+				});
+			}
+		},
+		evalJs() {
+			const webview = this.getWebview(); // 获取第一个子 webview
+			if (webview) {
+
+			} else {
+				console.error("未找到子 WebView");
+			}
+		},
+	},
+	mounted() {
+		// 不再自动初始化
+	},
 };
 </script>

-<style lang="scss" scoped></style>
+<style lang="scss" scoped></style>
--- a/pages.json
+++ b/pages.json
@ -419,6 +419,12 @@
 			"style": {
 				"navigationStyle": "custom"
 			}
+		},
+		{
+			"path" : "pages/other/web-detail-lucky-1",
+			"style": {
+				"navigationStyle": "custom"
+			}
 		}
 	],
 	"subPackages": [{
--- a/pages/other/web-detail-lucky-1.nvue
+++ b/pages/other/web-detail-lucky-1.nvue
@ -0,0 +1,86 @@
+<template>
+	<view class="content" :style="webviewStyles">
+		<web ref="webview" class="webview" :src="webUrl" @message="onMessage"></web>
+	</view>
+
+</template>
+
+<script>
+	import PageContainer from '@/components/page-container/page-container.vue'
+
+
+	export default {
+		components: {
+			PageContainer
+		},
+		data() {
+			const sysinfo = uni.getSystemInfoSync();
+			return {
+				hideviewStyles: {
+					height: "0px",
+					width: "0px",
+				},
+				webviewStyles: {
+					height: sysinfo.windowHeight + "px",
+					width: sysinfo.windowWidth + "px",
+				},
+				isWebView: false,
+
+				status: "init",
+				prize: [],
+				// webUrl: 'https://zfunbox.cn/m/chou-box-luck.html',
+				webUrl: "http://192.168.1.26:5502/%E5%85%AC%E5%8F%B8/%E5%B7%A5%E4%BD%9C/%E5%8F%8B%E8%BE%BE/%E8%90%BD%E5%9C%B0%E9%A1%B5/chou-box-luck.html",
+			};
+
+		},
+		onLoad(option) {
+			uni.showToast({
+				title: "初始化"
+			})
+			this.load(option);
+			// this.$c.msg('aaa')
+			uni.showToast({
+				title: "初始化"
+			})
+		},
+		methods: {
+			async load(option) {
+				console.log(option);
+				uni.showToast({
+					title: "初始化"
+				})
+				if (option.key != null) {
+					this.prize = uni.getStorageSync("prizes-lucky");
+					console.log(this.prize);
+					this.sendMessageToWeb("prizes-lucky", this.prize)
+				}
+			},
+			onMessage(e) {
+				console.log('收到WebView消息:', e)
+				// this.sendMessageToWeb();
+			},
+			sendMessageToWeb(action, data) {
+				// 获取 webview 引用
+				const webview = this.$refs.webview;
+				console.log(webview);
+				// 向网页发送消息
+				webview.postMessage({
+					action: action,
+					data: data,
+					timestamp: Date.now()
+				});
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.content {
+
+		background-color: #fff;
+	}
+
+	.webview {
+		flex: 1;
+	}
+</style>
--- a/pages/other/web-detail-lucky.vue
+++ b/pages/other/web-detail-lucky.vue
@ -1,10 +1,11 @@
 <template>
 	<page-container title="抽奖动画" :showBack="false">
-		<DetailLuckyWeb ref="lottery" @end="onLuckyEnd"></DetailLuckyWeb>
-		<button @click="Init">初始化</button>
-		<button @click="LoadImage">加载图片</button>
-		<button>设置模式</button>
-		<button @click="SetSize">跳转大小</button>
+		<DetailLuckyWeb ref="lottery" @end="onLuckyEnd" @lucky-stop="luckyStop"></DetailLuckyWeb>
+		<button @click="gotoPage(10)">抽10次</button>
+		<button @click="gotoPage(5)">抽5次</button>
+		<button @click="gotoPage(3)">抽3次</button>
+		<button @click="gotoPage(1)">抽1次</button>
+
 	</page-container>
 </template>

@ -18,8 +19,7 @@ export default {
 		DetailLuckyWeb
 	},
 	data() {
-		return {
-		}
+		return {}
 	},
 	onLoad() {

@ -28,13 +28,135 @@ export default {
 		onLuckyEnd(e) {
 			console.log('抽奖结束');
 		},
-		Init() { },
+		luckyStop() {
+			this.$c.msg("抽奖而技术")
+		},
+		gotoPage(count) {
+			let m = [];
+			for (let index = 0; index < count; index++) {
+				m.push(index);
+			}
+			this.$refs.lottery.init(this.getDefaultPrizes(), this, m);
+			// this.$customRouter.navigateTo("/pages/other/web-detail-lucky-1");
+		},
+		Init() {
+			// this.$refs.lottery.init(this.getDefaultPrizes());
+			// this.$customRouter.navigateTo("/pages/other/web-detail-lucky-1");
+			let key = "prizes-lucky" + Date.now();
+			uni.setStorageSync(key, "prizes-lucky")
+
+			uni.preloadPage({
+				url: "/pages/other/web-detail-lucky-1?key=" + key
+			});
+		},
 		LoadImage() { },
 		SetSize() {
-			console.log(this.$refs.lottery);
-			
-			this.$refs.lottery.setWebViewSize();
+
 		},
+		// 获取默认奖品列表
+		getDefaultPrizes() {
+			return [{
+				id: 1128,
+				title: "兹琪露娜提亚斯",
+				imgurl: "https://image.zfunbox.cn/topic/20250515/2986e27e673ef675e02771cdebd9b822.jpg",
+				price: "350.00",
+				real_pro: "0.02000",
+				goods_type: 1,
+				doubling: 1,
+				is_lingzhu: 0,
+			},
+			{
+				id: 1129,
+				title: "月岗恋钟",
+				imgurl: "https://image.zfunbox.cn/topic/20250515/2c5ed2097716db6bef01da718bc3c091.jpg",
+				price: "132.00",
+				real_pro: "0.02000",
+				goods_type: 1,
+				doubling: 3,
+				is_lingzhu: 0,
+			},
+			{
+				id: 1130,
+				title: "BANDAI万代拼装模型 1/100 MG 机动战士高达 倒A 逆A-15岁以上",
+				imgurl: "https://image.zfunbox.cn/topic/20250515/e35da49b4976f156f2f98dec002274a5.png",
+				price: "305.00",
+				real_pro: "0.03000",
+				goods_type: 1,
+				doubling: 1,
+				is_lingzhu: 0,
+			},
+			{
+				id: 1131,
+				title: "BANDAI 万代拼装模型 MG 主天使-15岁以上",
+				imgurl: "https://image.zfunbox.cn/topic/20250515/77302c6f1ea9ea6a8516cc1208174aee.png",
+				price: "289.00",
+				real_pro: "0.03000",
+				goods_type: 1,
+				doubling: 1,
+				is_lingzhu: 0,
+			},
+			{
+				id: 1132,
+				title: "BANDAI万代 HG00 09 1/144 座天使高达一型-15岁以上",
+				imgurl: "https://image.zfunbox.cn/topic/20250515/55e816c93b5e4103a30682c586816b11.jpg",
+				price: "114.00",
+				real_pro: "0.50000",
+				goods_type: 1,
+				doubling: 3,
+				is_lingzhu: 0,
+			},
+			{
+				id: 1133,
+				title: "BANDAI万代拼装模型 HGUC 130 机动战士高达 杰斯塔-15岁以上",
+				imgurl: "https://image.zfunbox.cn/topic/20250515/aeb6bfb8b4aa8a29796b242e4f5d56d9.png",
+				price: "113.00",
+				real_pro: "1.50000",
+				goods_type: 1,
+				doubling: 1,
+				is_lingzhu: 0,
+			},
+			{
+				id: 1134,
+				title: "BANDAI万代拼装模型HG26 1/144 凯列班高达 异灵高达-15岁以上",
+				imgurl: "https://image.zfunbox.cn/topic/20250515/329e3a7e21772a63cea03d31f948345d.png",
+				price: "112.00",
+				real_pro: "1.00000",
+				goods_type: 1,
+				doubling: 2,
+				is_lingzhu: 0,
+			},
+			{
+				id: 1135,
+				title: "梦幻",
+				imgurl: "https://image.zfunbox.cn/topic/20250515/d2c7e48515d393084000595074209042.jpg",
+				price: "41.00",
+				real_pro: "2.50000",
+				goods_type: 1,
+				doubling: 2,
+				is_lingzhu: 0,
+			},
+			{
+				id: 1136,
+				title: "谜拟丘",
+				imgurl: "https://image.zfunbox.cn/topic/20250515/6031827bc455cbf86ff778d74ddffbd3.jpg",
+				price: "38.00",
+				real_pro: "1.50000",
+				goods_type: 1,
+				doubling: 1,
+				is_lingzhu: 0,
+			},
+			{
+				id: 1137,
+				title: "小提琴模型1个",
+				imgurl: "https://image.zfunbox.cn/topic/20250515/22846dea5a933ab314998afc51abb7bb.jpg",
+				price: "13.80",
+				real_pro: "92.90000",
+				goods_type: 1,
+				doubling: 1,
+				is_lingzhu: 0,
+			},
+			];
+		}
 	}
 }
 </script>