chore(充值搜索页): 新增阿语翻译

src/locales/ar.json

@@ -362,5 +362,18 @@
   "error_wealth_level_insufficient": "يجب أن تصل إلى مستوى الثراء 10 لتقديم طلب للحصول على معرف حصري.",
   "error_invalid_id_format": "يرجى إدخال المعرف بالتنسيق الصحيح.",
   "error_already_applied": "لقد قدمت بالفعل طلبًا للحصول على معرف حصري في مستوى الثراء الحالي.",
-  "error_id_already_used": "تم استخدام المعرف من قبل مستخدم آخر."
+  "error_id_already_used": "تم استخدام المعرف من قبل مستخدم آخر.",
+
+  "recharge_placeholder": "يرجى إدخال معرف Likei الخاص بك",
+  "recharge_button": "شحن",
+  "faq_title": "الأسئلة المتكررة:",
+  "faq_question_1": "1. السؤال:",
+  "faq_how_to_check_recharge": "كيفية التحقق مما إذا كان مبلغ إعادة الشحن في الحساب قد وصل.",
+  "faq_answer_label": "جواب:",
+  "faq_how_to_check_recharge_answer": "أولاً، افتح Likei، وادخل إلى صفحة 'الخاص بي'، وانقر على صفحة 'المحفظة'، وحدد سجل إعادة الشحن في الزاوية اليمنى العليا.",
+  "user_recharge_instructions": "تعليمات إعادة شحن المستخدم:",
+  "recharge_instruction_1": "1. قبل إعادة الشحن، يحتاج المستخدم إلى تقديم معرف Likei الصحيح لإكمال هذه العملية.",
+  "recharge_instruction_2": "2. بعد أن يقوم تاجر العملات بإعادة الشحن، سيتم إرسال العملات المعاد شحنها مباشرة إلى حساب تاجر العملات.",
+  "recharge_instruction_3": "3. كيفية الحصول على معرف الحساب: (1) افتح صفحة 'الخاص بي' في Likei. (2) يمكنك تأكيد معرف الحساب في أعلى الصفحة.",
+  "recharge_instruction_4": "4. إذا كان حساب المعرف الذي تدخله هو حساب تاجر عملات، فسيتم إرسال العملة إلى مركز تاجر العملات لهذا الحساب."
 }

src/locales/en.json

@@ -362,5 +362,18 @@
   "error_wealth_level_insufficient": "You must reach wealth level 10 to apply for an exclusive ID.",
   "error_invalid_id_format": "Please enter an ID in the correct format.",
   "error_already_applied": "You've already applied for an exclusive ID at the current wealth level.",
-  "error_id_already_used": "ID has already been used by another user."
+  "error_id_already_used": "ID has already been used by another user.",
+
+  "recharge_placeholder": "Please enter your Likei's lD",
+  "recharge_button": "Recharge",
+  "faq_title": "Frequently asked question:",
+  "faq_question_1": "1.Question:",
+  "faq_how_to_check_recharge": "How to check whether the account recharge amounthasbeen received.",
+  "faq_answer_label": "Ask:",
+  "faq_how_to_check_recharge_answer": "Firstly, open Likei, enter the 'My' page, click on theWallet' page, and select the recharge record in theupper right corner.",
+  "user_recharge_instructions": "User recharge instructions:",
+  "recharge_instruction_1": "1、Before recharging,the user needs toprovide the correct Likei lD to complete thisrecharge.",
+  "recharge_instruction_2": "2、After the coin seller recharges, therecharged coins will be directly sent to thecoin seller account.",
+  "recharge_instruction_3": "3、How to obtain an lD for an account:(1)In Likei open the 'My' page.(2)You can confrm the account lD at the topof the page.",
+  "recharge_instruction_4": "4、lf the lD account you enter is a coinseller account, the coin will be sent to thecoin seller center of that account."
 }

src/locales/zh.json

@@ -362,5 +362,18 @@
   "error_wealth_level_insufficient": "您必须达到财富等级10才能申请专属ID。",
   "error_invalid_id_format": "请输入正确格式的ID。",
   "error_already_applied": "您已在当前财富等级申请过专属ID。",
-  "error_id_already_used": "该ID已被其他用户使用。"
+  "error_id_already_used": "该ID已被其他用户使用。",
+
+  "recharge_placeholder": "请输入您的Likei ID",
+  "recharge_button": "充值",
+  "faq_title": "常见问题：",
+  "faq_question_1": "1.问题：",
+  "faq_how_to_check_recharge": "如何查看账户充值金额是否已到账。",
+  "faq_answer_label": "答：",
+  "faq_how_to_check_recharge_answer": "首先，打开Likei，进入'我的'页面，点击'钱包'页面，选择右上角的充值记录。",
+  "user_recharge_instructions": "用户充值说明：",
+  "recharge_instruction_1": "1、充值前，用户需要提供正确的Likei ID才能完成此次充值。",
+  "recharge_instruction_2": "2、币商充值后，充值的金币将直接发送到币商账户。",
+  "recharge_instruction_3": "3、如何获取账户的ID：(1)在Likei中打开'我的'页面。(2)您可以在页面顶部确认账户ID。",
+  "recharge_instruction_4": "4、如果您输入的ID账户是币商账户，金币将发送到该账户的币商中心。"
 }

src/views/Recharge/index.vue

@@ -7,26 +7,19 @@
         :isHomePage="true"
         :title="$t('recharge')"
         :backImg="imgUrl"
+        :showHelp="true"
+        :helpImg="helpImg"
+        @help="popupHelp"
         color="black"
         style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999"
-      >
+      />
-        <template v-slot:extraFunction>
-          <img
-            v-smart-img
-            src="../../assets/icon/help.png"
-            alt=""
-            style="display: block; width: 7vw; object-fit: contain"
-            @click="popupHelp"
-          />
-        </template>
-      </GeneralHeader>
 
       <!-- 主要内容 -->
       <div style="padding: 4%">
         <!-- 搜索栏 -->
         <div style="display: flex; gap: 20px; width: 100%">
           <!-- 输入框 -->
-          <div style="flex: 1">
+          <div style="flex: 1; min-width: 0; align-self: stretch">
             <input
               style="
                 width: 100%;
@@ -36,7 +29,7 @@
                 padding: 10px 8px;
               "
               type="text"
-              placeholder="Please enter your Likei's lD"
+              :placeholder="$t('recharge_placeholder')"
               v-model="targetUserId"
             />
           </div>
@@ -44,6 +37,9 @@
           <!-- 跳转按钮 -->
           <button
             style="
+              min-width: 0;
+              align-self: stretch;
+
               border: 0;
               border-radius: 8px;
               font-weight: 590;
@@ -55,21 +51,18 @@
             "
             @click="checkUserId"
           >
-            Recharge
+            {{ $t('recharge_button') }}
           </button>
         </div>
 
         <!-- 功能介绍 -->
         <div style="margin-top: 16px">
-          <p style="font-weight: bold">Frequently asked question:</p>
+          <p style="font-weight: bold">{{ $t('faq_title') }}</p>
           <div class="textContent">
-            <p>1.Question:</p>
+            <p>{{ $t('faq_question_1') }}</p>
-            <p>How to check whether the account recharge amounthasbeen received.</p>
+            <p>{{ $t('faq_how_to_check_recharge') }}</p>
-            <p>Ask:</p>
+            <p>{{ $t('faq_answer_label') }}</p>
-            <p>
+            <p>{{ $t('faq_how_to_check_recharge_answer') }}</p>
-              Firstly, open Likei, enter the 'My' page, click on theWallet' page, and select the
-              recharge record in theupper right corner.
-            </p>
           </div>
         </div>
       </div>
@@ -109,41 +102,18 @@
                 padding: 5px 0;
               "
             >
-              Help
+              {{ $t('help') }}
-              <div
+              <div class="close" @click="closedPopup">x</div>
-                style="
-                  position: absolute;
-                  top: 50%;
-                  right: 0;
-                  transform: translateY(-50%);
-                  font-weight: bold;
-                "
-                @click="closedPopup"
-              >
-                x
-              </div>
             </div>
 
             <!-- 内容 -->
             <div>
-              <p style="font-weight: bold">User recharge instructions:</p>
+              <p style="font-weight: bold">{{ $t('user_recharge_instructions') }}</p>
               <div class="textContent">
-                <p>
+                <p>{{ $t('recharge_instruction_1') }}</p>
-                  1、Before recharging,the user needs toprovide the correct Likei lD to complete
+                <p>{{ $t('recharge_instruction_2') }}</p>
-                  thisrecharge.
+                <p>{{ $t('recharge_instruction_3') }}</p>
-                </p>
+                <p>{{ $t('recharge_instruction_4') }}</p>
-                <p>
-                  2、After the coin seller recharges, therecharged coins will be directly sent to
-                  thecoin seller account.
-                </p>
-                <p>
-                  3、How to obtain an lD for an account:(1)In Likei open the 'My' page.(2)You can
-                  confrm the account lD at the topof the page.
-                </p>
-                <p>
-                  4、lf the lD account you enter is a coinseller account, the coin will be sent to
-                  thecoin seller center of that account.
-                </p>
               </div>
             </div>
           </div>
@@ -165,6 +135,7 @@ import GeneralHeader from '@/components/GeneralHeader.vue'
 import maskLayer from '@/components/MaskLayer.vue'
 
 const imgUrl = new URL('/src/assets/icon/arrowBackBlack.png', import.meta.url).href
+const helpImg = new URL('/src/assets/icon/help.png', import.meta.url).href
 const targetUserStore = useTargetUser()
 const router = useRouter()
 
@@ -235,6 +206,14 @@ input::placeholder {
   color: rgba(0, 0, 0, 0.4);
 }
 
+.close {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+  font-weight: bold;
+}
+
 @media screen and (max-width: 360px) {
   * {
     font-size: 10px;
@@ -258,4 +237,9 @@ input::placeholder {
     font-size: 32px;
   }
 }
+
+[dir='rtl'] .close {
+  left: 0;
+  right: auto;
+}
 </style>