feat(首页): 添加图片弹窗组件及功能

添加ImagePopup组件用于显示版本更新图片，首次打开时自动弹出并记录显示状态

pages/index/components/ImagePopup.vue

@@ -0,0 +1,103 @@
+<template>
+	<view class="popup-mask" v-if="visible" @click="handleClose">
+		<view class="popup-content" @click.stop>
+			<view class="close-btn" @click="handleClose">×</view>
+			<image
+				class="popup-image"
+				:src="imageUrl"
+				mode="widthFix"
+			></image>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'ImagePopup',
+	props: {
+		imageUrl: {
+			type: String,
+			default: ''
+		},
+		storageKey: {
+			type: String,
+			default: 'version_shown'
+		}
+	},
+	data() {
+		return {
+			visible: false
+		}
+	},
+	mounted() {
+		this.checkAndShowPopup()
+	},
+	methods: {
+		checkAndShowPopup() {
+			const hasShown = uni.getStorageSync(this.storageKey)
+			if (!hasShown) {
+				this.visible = true
+			}
+		},
+		handleClose() {
+			this.visible = false
+			uni.setStorage({
+				key: this.storageKey,
+				data: true
+			})
+			this.$emit('close')
+		}
+	}
+}
+</script>
+
+<style lang="less" scoped>
+.popup-mask {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0, 0, 0, 0.7);
+	z-index: 9999;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	.popup-content {
+		position: relative;
+		width: 85%;
+		max-width: 600rpx;
+		background-color: transparent;
+		border-radius: 16rpx;
+		box-sizing: border-box;
+
+		.close-btn {
+			position: absolute;
+			bottom: -60rpx;
+			left: 50%;
+			transform: translateX(-50%);
+			width: 56rpx;
+			height: 56rpx;
+			line-height: 48rpx;
+			text-align: center;
+			font-size: 40rpx;
+			color: #999;
+			background-color: rgba(255, 255, 255, 0.9);
+			border-radius: 50%;
+			border: 2rpx solid #ddd;
+			z-index: 10;
+			cursor: pointer;
+
+			&:active {
+				background-color: #f5f5f5;
+			}
+		}
+
+		.popup-image {
+			width: 100%;
+			border-radius: 8rpx;
+		}
+	}
+}
+</style>

pages/index/index.vue

@@ -128,6 +128,7 @@
 				</view>
 			</view>
 		</view>
+		<ImagePopup :imageUrl="popupImageUrl" @close="handlePopupClose" />
 	</view>
 </template>
 
@@ -135,7 +136,11 @@
 	import {
 		Debounce,
 	} from '../../util/anitthro.js';
+	import ImagePopup from './components/ImagePopup.vue';
 	export default {
+		components: {
+			ImagePopup
+		},
 		// // 分享给朋友
 		// onShareAppMessage() {
 		//   return {
@@ -192,7 +197,8 @@
 				hello: '',
 				show: false,
 				url: '',
-				loadTF: false
+				loadTF: false,
+				popupImageUrl: 'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/version/app-version.png'
 			};
 		},
 		watch: {
@@ -206,6 +212,9 @@
 			},
 		},
 		methods: {
+			handlePopupClose() {
+				console.log('弹窗已关闭')
+			},
 			tabs(){
 				uni.navigateTo({
 					url: '/pages/banner/index'