FT517-WMS/RuoYi-App-master/pages/setting.vue

<template>
	<view class="container">
		<view class="form-card">
			<uni-forms>
				<uni-forms-item :label="$t('settings.ipLabel')">
					<uni-easyinput v-model="settingformData.ip" :placeholder="$t('settings.ipPlaceholder')" />
				</uni-forms-item>
				<uni-forms-item :label="$t('settings.portLabel')">
					<uni-easyinput v-model="settingformData.port" :placeholder="$t('settings.portPlaceholder')" />
				</uni-forms-item>
			</uni-forms>
			<button class="submit-button" @click="handleSubmit">{{ $t('settings.saveSettings') }}</button>
			
			<view class="divider"></view>
			
			<view class="language-section">
				<text class="section-title">{{ $t('settings.languageSettings') }}</text>
				<language-switcher></language-switcher>
			</view>
		</view>
	</view>
</template>

<script>
	import LanguageSwitcher from '@/components/language-switcher/language-switcher.vue'

	export default {
		components: {
			LanguageSwitcher
		},
		data() {
			return {
				settingformData: {
					ip: '',
					port: ''
				}
			}
		},
		created() {
			// 从本地存储获取已保存的设置
			const savedSettings = uni.getStorageSync('serverSettings')
			if (savedSettings) {
				const settings = JSON.parse(savedSettings)
				this.settingformData.ip = settings.ip
				this.settingformData.port = settings.port
			}
		},
		methods: {
			// 验证IP地址格式
			validateIP(ip) {
				const ipRegex = /^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/
				return ipRegex.test(ip)
			},
			// 验证端口号格式
			validatePort(port) {
				const portNumber = parseInt(port)
				return portNumber > 0 && portNumber <= 65535
			},
			handleSubmit() {
				// 验证IP地址
				if (!this.settingformData.ip) {
					uni.showToast({
						title: this.$t('settings.ipRequired'),
						icon: 'none'
					})
					return
				}
				if (!this.validateIP(this.settingformData.ip)) {
					uni.showToast({
						title: this.$t('settings.invalidIpFormat'),
						icon: 'none'
					})
					return
				}

				// 验证端口号
				if (!this.settingformData.port) {
					uni.showToast({
						title: this.$t('settings.portRequired'),
						icon: 'none'
					})
					return
				}
				if (!this.validatePort(this.settingformData.port)) {
					uni.showToast({
						title: this.$t('settings.invalidPortFormat'),
						icon: 'none'
					})
					return
				}

				// 保存设置到本地存储并更新baseUrl
				try {
					uni.setStorageSync('serverSettings', JSON.stringify(this.settingformData))
					// 更新全局配置中的baseUrl
					// config.baseUrl = `http://${this.settingformData.ip}:${this.settingformData.port}`
					// // 更新App实例中的配置
					// getApp().globalData.config = config
					// console.log("11111",config.baseUrl)
					uni.showToast({
						title: this.$t('settings.settingsSaved'),
						icon: 'success',
						complete: () => {
							// 延迟跳转，确保Toast显示完成
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/login'
								})
							}, 1500)
						}
					})
				} catch (e) {
					console.error('保存设置失败:', e)
					uni.showToast({
						title: this.$t('settings.saveSettingsFailed'),
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.container {
	padding: 30rpx;
	background: linear-gradient(to bottom, #f8f9fa, #e9ecef);
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.form-card {
	background-color: #fff;
	border-radius: 20rpx;
	padding: 40rpx 30rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	transform: translateY(0);
	transition: transform 0.3s ease;
	width: 90%;
	max-width: 600rpx;
	margin: 0 auto;

	&:active {
		transform: translateY(2rpx);
	}
}

:deep(.uni-forms-item) {
	padding-bottom: 40rpx;

	.uni-forms-item__label {
		font-size: 30rpx;
		color: #2c3e50;
		font-weight: 600;
		white-space: nowrap;
	}

	.uni-easyinput__content {
		background-color: #f8f9fa;
		border-radius: 12rpx;
		height: 88rpx;
		padding: 0 30rpx;
		border: 2rpx solid #e9ecef;
		transition: all 0.3s ease;

		&:focus-within {
			border-color: #3B7FFF;
			box-shadow: 0 0 0 2rpx rgba(59, 127, 255, 0.1);
		}
	}
}

.submit-button {
	margin-top: 20rpx;
	width: 100%;
	background: linear-gradient(135deg, #3B7FFF, #2563eb);
	color: #fff;
	height: 88rpx;
	line-height: 88rpx;
	font-size: 32rpx;
	font-weight: 600;
	border-radius: 44rpx;
	box-shadow: 0 4rpx 12rpx rgba(37, 99, 235, 0.2);
	transition: all 0.3s ease;

	&:active {
		transform: translateY(2rpx);
		box-shadow: 0 2rpx 8rpx rgba(37, 99, 235, 0.15);
	}
}

.divider {
	margin: 30rpx 0;
	height: 2rpx;
	background-color: #e9ecef;
	width: 100%;
}

.language-section {
	margin-top: 10rpx;
}

.section-title {
	font-size: 30rpx;
	color: #2c3e50;
	font-weight: 600;
	display: block;
	margin-bottom: 20rpx;
}

:deep(.language-switcher) {
	padding: 0;
}

:deep(.picker-box) {
	background-color: #f8f9fa;
	border-radius: 12rpx;
	border: 2rpx solid #e9ecef;
	transition: all 0.3s ease;
	
	&:focus-within {
		border-color: #3B7FFF;
		box-shadow: 0 0 0 2rpx rgba(59, 127, 255, 0.1);
	}
}
</style>