feat(支付代理页): 使用旧头部组件的插槽，引入语言切换功能

src/views/RechargeFreightAgent.vue

@@ -11,15 +11,15 @@
               position: relative;
               color: rgba(187, 146, 255, 1) !important;
             "
-            @click="listBt"
+            @click="showLang"
           >
-            <div style="font-weight: bold">{{ selectedLanguage.type }}</div>
+            <div style="font-weight: bold">{{ selectedLanguage.value }}</div>
-            <div
+            <!-- <div
               style="margin-left: 5px; transition: transform 0.5s"
               :class="{ rotated: visibleList }"
             >
               >
-            </div>
+            </div> -->
             <transition name="slide-fade">
               <div
                 style="
@@ -42,8 +42,9 @@
                   style="padding: 8px; color: white !important; font-weight: 590"
                   v-for="(item, index) in languageList"
                   :key="index"
+                  @click="selectLang(item)"
                 >
-                  {{ item.type }}
+                  {{ item.value }}
                 </div>
               </div>
             </transition>
@@ -155,6 +156,7 @@
 
 <script setup>
 import { onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 import MobileHeader from '../components/MobileHeader.vue'
 import { searchUser, searchPayRechargeUser } from '@/api/userInfo'
 // import { getUserIdentity } from "@/api/wallet";
@@ -166,23 +168,42 @@ import { useRoute } from 'vue-router'
 import router from '@/router'
 import { useCountryStore } from '@/stores/country'
 import { storeToRefs } from 'pinia'
+const { t, locale } = useI18n()
 
 const countryStore = useCountryStore()
 const route = useRoute()
 
 const languageList = ref([
   {
-    type: 'English',
+    type: 'en',
+    value: 'English',
+  },
+  {
+    type: 'ar',
+    value: 'اللغة العربية',
   },
 ])
 const selectedLanguage = ref({
-  type: 'English',
+  type: 'en',
+  value: 'English',
 })
-const visibleList = ref(false)
+
-const listBt = () => {
+const visibleList = ref(false) //语言列表显示
+//语言列表显示
+const showLang = () => {
   visibleList.value = !visibleList.value
 }
 
+const selectLang = (item) => {
+  selectedLanguage.value = item
+  localStorage.setItem('lang', item)
+}
+
+// 监听语言变化并设置文档方向
+watch(locale, (newLocale) => {
+  setDocumentDirection(newLocale)
+})
+
 const applicationId = ref('1963531459019739137')
 const userProfile = ref({}) //用户信息
 const type = ref('') //用户身份