feat: 初始化

pages/components/languageSelector/index.scss

@@ -0,0 +1,42 @@
+.selectorWrapper {
+	position: relative;
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+	column-gap: 2px;
+	.optionsWrapper {
+		position: absolute;
+		z-index: 999;
+		right: 0;
+		top: 120%;
+		flex-shrink: 0;
+		height: 0px;
+		opacity: 0;
+		border-radius: 6px;
+		overflow: hidden;
+		transition: all 0.3s ease-out;
+		&.visible {
+			display: flex;
+			flex-direction: column;
+			height: 320px;
+			opacity: 1;
+			box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.1);
+		}
+		.option {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			min-width: 100px;
+			height: 24px;
+			padding: 4px 10px;
+			border-bottom: 1px solid #e5e5e5;
+			background-color: white;
+			text-align: center;
+			white-space: nowrap;
+			&.active {
+				color: #fff;
+				background-color: #29bbe4;
+			}
+		}
+	}
+}

pages/components/languageSelector/index.vue

@@ -0,0 +1,73 @@
+<template>
+	<view class="selectorWrapper" @click="toggleOptionsVisible">
+		<image src="/static/globalGrey.png" style="width: 19px; height: 19px" />
+		<text style="font-size: 14px">{{ $t('setting.settingLanguage') }}</text>
+		<uni-icons type="down" :size="16"></uni-icons>
+		<view ref="languageSelector" :class="['optionsWrapper', { visible: optionsVisible }]">
+			<view
+				:class="['option', locale === language.value ? 'active' : '']"
+				v-for="(language, index) in languageOptions"
+				:key="language.value"
+				@click="changeLanguage(language)"
+			>
+				{{ language.label }}
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+import { setLocale } from '@/utils/const.ts';
+import { setLoveLanguage } from '@/services/user.ts';
+import { languages } from '@/utils/const.ts';
+export default {
+	name: 'LanguageSelector',
+	data() {
+		return {
+			local: undefined,
+			optionsVisible: false,
+			languageOptions: [
+				{ label: 'العربية', value: 'ar-SA' },
+				{ label: 'English', value: 'en-US' },
+				{ label: 'Spanish', value: 'es-ES' },
+				{ label: 'हिंदी', value: 'hi-IN' },
+				{ label: '한국어', value: 'ko-KR' },
+				{ label: 'ภาษาไทย', value: 'th-TH' },
+				{ label: 'Tiếng Việt', value: 'vi-VN' },
+				{ label: '简体中文', value: 'zh-CN' },
+				{ label: '繁體中文', value: 'zh-TW' },
+				{ label: 'Indonesia', value: 'in-ID' }
+			]
+		};
+	},
+	methods: {
+		toggleOptionsVisible() {
+			this.optionsVisible = !this.optionsVisible;
+		},
+		async changeLanguage(language) {
+			// #ifndef H5
+			uni.showModal({
+				content: this.$t('locale.languageChangeConfirm'),
+				confirmColor: '#4DC0E5',
+				success: async (res) => {
+					if (res.confirm) {
+						setLocale(language.value);
+					}
+				}
+			});
+			// #endif
+
+			// #ifdef H5
+			setLocale(language.value);
+			// #endif
+		}
+	},
+	created() {
+		this.locale = uni.getLocale();
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>