门店端优化

Store_vue/components/UpdateModal.vue

@@ -0,0 +1,131 @@
+<template>
+	<view class="update-modal" v-if="show" @tap.stop="handleMaskClick">
+		<view class="modal-content" @tap.stop>
+			<!-- 版本号标题 -->
+			<view class="version-title">发现新版本 {{ version }}</view>
+			
+			<!-- 更新内容 -->
+			<view class="update-content">
+				<text class="content-text">{{ updateContent }}</text>
+			</view>
+			
+			<!-- 按钮区域 -->
+			<view class="button-area">
+				<view class="cancel-btn" v-if="!forceUpdate" @tap="handleCancel">稍后再说</view>
+				<view class="confirm-btn" @tap="handleConfirm">立即更新</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'UpdateModal',
+	props: {
+		show: {
+			type: Boolean,
+			default: false
+		},
+		version: {
+			type: String,
+			default: ''
+		},
+		updateContent: {
+			type: String,
+			default: ''
+		},
+		downloadUrl: {
+			type: String,
+			default: ''
+		},
+		forceUpdate: {
+			type: Boolean,
+			default: false
+		}
+	},
+	methods: {
+		handleMaskClick() {
+			// 强制更新时，点击遮罩不关闭
+			if (!this.forceUpdate) {
+				this.handleCancel();
+			}
+		},
+		handleCancel() {
+			this.$emit('cancel');
+		},
+		handleConfirm() {
+			this.$emit('confirm', this.downloadUrl);
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.update-modal {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background-color: rgba(0, 0, 0, 0.6);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	z-index: 9999;
+	
+	.modal-content {
+		width: 600rpx;
+		background-color: #ffffff;
+		border-radius: 24rpx;
+		overflow: hidden;
+		
+		.version-title {
+			text-align: center;
+			font-size: 36rpx;
+			font-weight: 600;
+			color: #333333;
+			padding: 60rpx 40rpx 40rpx;
+		}
+		
+		.update-content {
+			max-height: 600rpx;
+			padding: 0 40rpx 40rpx;
+			overflow-y: auto;
+			
+			.content-text {
+				font-size: 28rpx;
+				line-height: 44rpx;
+				color: #666666;
+				white-space: pre-wrap;
+				word-break: break-all;
+			}
+		}
+		
+		.button-area {
+			display: flex;
+			border-top: 1px solid #eeeeee;
+			
+			.cancel-btn,
+			.confirm-btn {
+				flex: 1;
+				height: 100rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				font-size: 32rpx;
+				font-weight: 500;
+			}
+			
+			.cancel-btn {
+				color: #999999;
+				border-right: 1px solid #eeeeee;
+			}
+			
+			.confirm-btn {
+				color: #007aff;
+			}
+		}
+	}
+}
+</style>
+