baozhida-figure-platter/pages/school/reader/reader-settings.vue

<template>
	<view class="settings-panel" v-if="show">
		<view class="settings-header">
			<text>设置</text>
			<text class="close-btn" @tap="onClose">×</text>
		</view>
		<view class="settings-section">
			<text class="section-title">页面颜色</text>
			<view class="color-options">
				<view v-for="(color, index) in bgColors" :key="index" class="color-option"
					:class="{ active: themeIndex === index }" :style="{ backgroundColor: color.bg }"
					@tap="onThemeChange(index)"></view>
			</view>
		</view>
		<view class="settings-section">
			<text class="section-title">文字</text>
			<view class="slider-container">
				<slider class="custom-slider" :value="fontSize" activeColor="#cbbfa7" block-color="#988153"
					background-color="#f8f8f8" :min="12" :max="30" :step="1" show-value @change="onFontSizeChange"
					@changing="onFontSizeChanging" />
			</view>
		</view>
		<view class="settings-section">
			<text class="section-title">边距</text>
			<view class="slider-container">
				<slider class="custom-slider" :value="margin" activeColor="#cbbfa7" block-color="#988153"
					background-color="#f8f8f8" :min="10" :max="50" :step="5" show-value @change="onMarginChange"
					@changing="onMarginChanging" />
			</view>
		</view>
		<view class="settings-section">
			<text class="section-title">行距</text>
			<view class="slider-container">
				<slider class="custom-slider" :value="lineHeight" activeColor="#cbbfa7" block-color="#988153"
					background-color="#f8f8f8" :min="1" :max="3" :step="0.1" show-value @change="onLineHeightChange"
					@changing="onLineHeightChanging" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'ReaderSettings',
		props: {
			show: {
				type: Boolean,
				default: false
			},
			themeIndex: {
				type: Number,
				default: 0
			},
			fontSize: {
				type: Number,
				default: 18
			},
			margin: {
				type: Number,
				default: 20
			},
			lineHeight: {
				type: Number,
				default: 1.8
			},
			bgColors: {
				type: Array,
				default: () => [{
						bg: '#f8f4e9',
						text: '#3e3d3b'
					}, // 米黄色
					{
						bg: '#ffffff',
						text: '#333333'
					}, // 白色
					{
						bg: '#e9e9e9',
						text: '#333333'
					}, // 浅灰色
					{
						bg: '#cce8cf',
						text: '#333333'
					}, // 浅绿色
					{
						bg: '#333333',
						text: '#c4c4c4'
					}, // 夜间模式
				]
			}
		},
		methods: {
			onClose() {
				this.$emit('close')
			},
			onThemeChange(index) {
				// 添加触感反馈
				uni.vibrateShort({
					success: () => {
						this.$emit('theme-change', index)
					}
				});
			},
			onFontSizeChange(e) {
				this.$emit('font-size-change', e.detail.value)
			},
			onMarginChange(e) {
				this.$emit('margin-change', e.detail.value)
			},
			onLineHeightChange(e) {
				this.$emit('line-height-change', e.detail.value)
			},
			onFontSizeChanging(e) {
				this.$emit('font-size-change', Number(e.detail.value))
			},
			onMarginChanging(e) {
				this.$emit('margin-change', Number(e.detail.value))
			},
			onLineHeightChanging(e) {
				this.$emit('line-height-change', Number(e.detail.value))
			}
		}
	}
</script>

<style scoped>
	.settings-panel {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		padding: 30rpx;
		z-index: 200;
		/* box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); */
	}

	.settings-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
		font-size: 32rpx;
		font-weight: bold;
	}

	.close-btn {
		font-size: 40rpx;
		padding: 0 20rpx;
	}

	.settings-section {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.section-title {
		width: 120rpx;
		flex: none;
		font-size: 28rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		color: #666;
	}

	.color-options {
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.color-option {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		border: 2rpx solid #ddd;
		transition: all 0.3s ease;
		cursor: pointer;
	}

	.color-option.active {
		border: 4rpx solid #988153;
		transform: scale(1.1);
	}

	.slider-container {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.slider-label {
		width: 60rpx;
		text-align: center;
		font-size: 28rpx;
		color: #666;
	}

	::v-deep uni-slider {
		margin: 0px;
	}

	.custom-slider {
		width: 100%;
	}

	::v-deep uni-slider .uni-slider-handle-wrapper {
		height: 30rpx;
		border-radius: 40rpx;
	}

	::v-deep uni-slider .uni-slider-track {
		border-radius: 40rpx;
	}
</style>