new-88live/pages/account/language.vue

<template>
	<view class="acct-lang-page">
		<view class="acct-lang-nav" :style="{ paddingTop: statusBar + 'px' }">
			<view class="acct-lang-nav-row">
				<view class="acct-lang-back" @tap="goBack">
					<text class="acct-lang-back-icon">←</text>
				</view>
				<text class="acct-lang-nav-title">{{ copy.title }}</text>
				<view class="acct-lang-nav-placeholder" />
			</view>
		</view>

		<scroll-view
			scroll-y
			class="acct-lang-scroll"
			:style="{ height: scrollHeight + 'px' }"
		>
			<view class="acct-lang-body" :style="{ paddingBottom: safeBottom + 'px' }">
				<view class="acct-lang-info-card">
					<view class="acct-lang-info-row">
						<text class="acct-lang-info-label">{{ copy.systemLanguage }}</text>
						<text class="acct-lang-info-value">{{ systemLocale }}</text>
					</view>
					<view class="acct-lang-info-row acct-lang-info-row--last">
						<text class="acct-lang-info-label">{{ copy.applicationLanguage }}</text>
						<text class="acct-lang-info-value">{{ currentLabel }}</text>
					</view>
				</view>

				<text class="acct-lang-section-title">{{ copy.pickLanguage }}</text>

				<view class="acct-lang-card">
					<view
						v-for="(item, index) in localeOptions"
						:key="item.code"
						class="acct-lang-row"
						:class="{ 'acct-lang-row--last': index === localeOptions.length - 1 }"
						hover-class="acct-lang-row--press"
						@tap="onPickLocale(item)"
					>
						<text class="acct-lang-row-label">{{ item.text }}</text>
						<view
							class="acct-lang-radio"
							:class="{ 'acct-lang-radio--on': item.code === selectedCode }"
						>
							<view v-if="item.code === selectedCode" class="acct-lang-radio-dot" />
						</view>
					</view>
				</view>

				<text class="acct-lang-hint">{{ copy.hint }}</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import {
	buildLocaleOptions,
	getStoredLocaleCode,
	localeLabelForCode,
	applyLocaleChange,
	isAndroidPlatform
} from '@/features/account/locale-settings'

export default {
	data() {
		return {
			statusBar: 0,
			scrollHeight: 0,
			safeBottom: 0,
			systemLocale: '',
			selectedCode: 'auto',
			isAndroid: false
		}
	},
	computed: {
		copy() {
			return {
				title: this.$t('user.panelLanguage'),
				systemLanguage: this.$t('index.system-language'),
				applicationLanguage: this.$t('index.application-language'),
				pickLanguage: this.$t('index.language'),
				hint: this.$t('user.languageHint'),
				confirm: this.$t('index.language-change-confirm')
			}
		},
		localeOptions() {
			return buildLocaleOptions((key) => this.$t(key))
		},
		currentLabel() {
			return localeLabelForCode(this.localeOptions, this.selectedCode)
		}
	},
	onLoad() {
		const sys = uni.getSystemInfoSync()
		this.statusBar = sys.statusBarHeight || 0
		this.safeBottom = (sys.safeAreaInsets && sys.safeAreaInsets.bottom) || 0
		const navH = 44
		this.scrollHeight = sys.windowHeight - this.statusBar - navH
		this.systemLocale = sys.language || ''
		this.selectedCode = getStoredLocaleCode()
		this.isAndroid = isAndroidPlatform()
		uni.onLocaleChange((e) => {
			if (this.selectedCode === 'auto') {
				this.systemLocale = e.locale
			}
		})
	},
	methods: {
		goBack() {
			uni.navigateBack({
				fail: () => {
					uni.switchTab({ url: '/pages/mine/index' })
				}
			})
		},
		onPickLocale(item) {
			if (!item || item.code === this.selectedCode) return
			const run = () => {
				applyLocaleChange(item.code, this.$i18n)
				this.selectedCode = item.code
				this.$store.dispatch('shell/fetchAppConfig')
			}
			if (this.isAndroid) {
				uni.showModal({
					content: this.copy.confirm,
					success: (res) => {
						if (res.confirm) run()
					}
				})
				return
			}
			run()
		}
	}
}
</script>

<style scoped>
.acct-lang-page {
	min-height: 100vh;
	background-color: #f4f6fb;
}

.acct-lang-nav {
	background-color: #ffffff;
	border-bottom: 1rpx solid #eef1f6;
}

.acct-lang-nav-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	height: 88rpx;
	padding: 0 24rpx;
	box-sizing: border-box;
}

.acct-lang-back {
	width: 64rpx;
	height: 64rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.acct-lang-back-icon {
	font-size: 40rpx;
	color: #1a1d26;
	line-height: 1;
}

.acct-lang-nav-title {
	flex: 1;
	text-align: center;
	font-size: 32rpx;
	font-weight: 600;
	color: #1a1d26;
}

.acct-lang-nav-placeholder {
	width: 64rpx;
}

.acct-lang-body {
	padding: 24rpx 28rpx 0;
	box-sizing: border-box;
}

.acct-lang-info-card {
	background-color: #ffffff;
	border-radius: 24rpx;
	box-shadow: 0 6rpx 24rpx rgba(74, 140, 255, 0.06);
	overflow: hidden;
	margin-bottom: 28rpx;
}

.acct-lang-info-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	min-height: 96rpx;
	padding: 0 28rpx;
	border-bottom: 1rpx solid #f0f2f7;
	box-sizing: border-box;
}

.acct-lang-info-row--last {
	border-bottom-width: 0;
}

.acct-lang-info-label {
	font-size: 28rpx;
	color: #8a8d9e;
}

.acct-lang-info-value {
	font-size: 28rpx;
	color: #1a1d26;
	font-weight: 500;
	max-width: 360rpx;
	text-align: right;
}

.acct-lang-section-title {
	display: block;
	padding: 0 8rpx 16rpx;
	font-size: 26rpx;
	color: #8a8d9e;
}

.acct-lang-card {
	background-color: #ffffff;
	border-radius: 24rpx;
	box-shadow: 0 6rpx 24rpx rgba(74, 140, 255, 0.06);
	overflow: hidden;
	margin-bottom: 20rpx;
}

.acct-lang-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	min-height: 104rpx;
	padding: 0 28rpx;
	border-bottom: 1rpx solid #f0f2f7;
	box-sizing: border-box;
}

.acct-lang-row--last {
	border-bottom-width: 0;
}

.acct-lang-row--press {
	background-color: #f7f9fc;
}

.acct-lang-row-label {
	font-size: 30rpx;
	color: #1a1d26;
}

.acct-lang-radio {
	width: 40rpx;
	height: 40rpx;
	border-radius: 20rpx;
	border: 2rpx solid #d5dae6;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.acct-lang-radio--on {
	border-color: #4a8cff;
	background-color: #eef4ff;
}

.acct-lang-radio-dot {
	width: 20rpx;
	height: 20rpx;
	border-radius: 10rpx;
	background: linear-gradient(135deg, #4a8cff 0%, #6b5ce7 100%);
}

.acct-lang-hint {
	display: block;
	padding: 0 8rpx;
	font-size: 24rpx;
	line-height: 1.5;
	color: #8a8d9e;
}
</style>