sz-kjsxy-wx-new/components/difference-modal/index.vue

<template>
	<u-popup v-model="show" mode="center" border-radius="14" :mask-close-able="false">
		<view class="difference-modal">
			<view class="difference-modal__header">
				<text class="difference-modal__title">信息差异提示</text>
			</view>
			<scroll-view 
				class="difference-modal__content" 
				scroll-y="true"
				:style="{ height: contentHeight + 'px' }"
			>
				<text class="difference-modal__tip">您本次提交的信息与过往信息不同，是否更新本次信息？</text>
				<view class="difference-modal__list">
					<view 
						class="difference-modal__item" 
						v-for="(item, index) in differenceList" 
						:key="index"
					>
						<view class="difference-modal__item-header">
							<text class="difference-modal__item-name">{{ item.name }}</text>
						</view>
						<view class="difference-modal__item-content">
							<view class="difference-modal__value-row">
								<text class="difference-modal__label">原信息：</text>
								<view class="difference-modal__value difference-modal__value--old">{{ item.oldValue }}</view>
							</view>
							<view class="difference-modal__value-row">
								<text class="difference-modal__label">新信息：</text>
								<view class="difference-modal__value difference-modal__value--new">{{ item.newValue }}</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="difference-modal__footer">
				<view class="difference-modal__footer-row">
					<u-button 
						type="default" 
						@click="handleChoice(false)"
						:custom-style="{ flex: 1 }"
					>
						维持原信息
					</u-button>
					<u-button 
						type="primary" 
						@click="handleChoice(true)"
						:custom-style="{ flex: 1 }"
					>
						按本次信息更新
					</u-button>
				</view>
				<view class="difference-modal__footer-row difference-modal__footer-row--center">
					<u-button 
						type="default" 
						@click="handleChoice('cancel')"
					>
						返回修改
					</u-button>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		name: 'DifferenceModal',
		props: {
			show: {
				type: Boolean,
				default: false
			},
			differenceList: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				contentHeight: 400 // 默认高度，单位px
			}
		},
		mounted() {
			this.calculateHeight()
		},
		watch: {
			show(newVal) {
				if (newVal) {
					this.$nextTick(() => {
						this.calculateHeight()
					})
				}
			}
		},
		methods: {
			handleChoice(update) {
				this.$emit('choice', update)
			},
			calculateHeight() {
				// 使用系统信息计算合适的高度
				// 弹框最大高度 80vh，减去 header 和 footer 的高度
				uni.getSystemInfo({
					success: (res) => {
						// 屏幕高度的 70%（减小了 10%）
						const maxHeight = res.windowHeight * 0.7
						// header 大约 120rpx，footer 大约 200rpx，转换为 px
						const headerHeight = 120 * (res.windowWidth / 750)
						const footerHeight = 200 * (res.windowWidth / 750)
						// content 高度 = 总高度 - header - footer - 额外减少 50px
						this.contentHeight = maxHeight - headerHeight - footerHeight - 50
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.difference-modal {
		width: 640rpx;
		max-width: 640rpx;
		max-height: 70vh;
		background-color: #fff;
		border-radius: 14rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		
		// 确保所有子元素都使用 border-box
		* {
			box-sizing: border-box;
		}
		
		&__header {
			padding: 40rpx 30rpx 20rpx;
			text-align: center;
			border-bottom: 1rpx solid #f0f0f0;
		}
		
		&__title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
		}
		
		&__content {
			padding: 30rpx;
			box-sizing: border-box;
			width: 100%;
		}
		
		&__tip {
			font-size: 28rpx;
			color: #666;
			line-height: 1.6;
			margin-bottom: 30rpx;
			word-wrap: break-word;
			word-break: break-all;
			box-sizing: border-box;
		}
		
		&__list {
			width: 100%;
			box-sizing: border-box;
			
			.difference-modal__item {
				margin-bottom: 30rpx;
				padding: 20rpx;
				background-color: #f8f8f8;
				border-radius: 8rpx;
				box-sizing: border-box;
				width: 100%;
				max-width: 100%;
				overflow: hidden;
				
				&:last-child {
					margin-bottom: 0;
				}
			}
		}
		
		&__item-header {
			margin-bottom: 15rpx;
			width: 100%;
			box-sizing: border-box;
		}
		
		&__item-name {
			font-size: 30rpx;
			font-weight: bold;
			color: #333;
			word-wrap: break-word;
			word-break: break-all;
		}
		
		&__item-content {
			width: 100%;
			max-width: 100%;
			box-sizing: border-box;
			
			.difference-modal__value-row {
				display: flex;
				align-items: flex-start;
				margin-bottom: 10rpx;
				width: 100%;
				max-width: 100%;
				box-sizing: border-box;
				
				&:last-child {
					margin-bottom: 0;
				}
			}
		}
		
		&__label {
			font-size: 26rpx;
			color: #666;
			width: 100rpx;
			flex-shrink: 0;
			box-sizing: border-box;
		}
		
		&__value {
			font-size: 26rpx;
			flex: 1;
			min-width: 0; // 允许 flex 子元素缩小
			max-width: 100%;
			word-wrap: break-word;
			word-break: break-all;
			white-space: normal;
			line-height: 1.5;
			overflow-wrap: break-word;
			box-sizing: border-box;
			
			&--old {
				color: #999;
			}
			
			&--new {
				color: #2979ff;
				font-weight: 500;
			}
		}
		
		&__footer {
			padding: 30rpx;
            padding-bottom:50rpx;
			border-top: 1rpx solid #f0f0f0;
			display: flex;
			flex-direction: column;
			gap: 20rpx;
		}
		
		&__footer-row {
			display: flex;
			justify-content: space-between;
			gap: 20rpx;
			
			&--center {
				justify-content: center;
			}
		}
	}
</style>