优化代码

src/components/chatMessage/miniPKMessage.vue

@@ -15,13 +15,15 @@
             background: ArticleDetailsA.sex == 1 ? '#59D8DB' : '#F3876F',
           }"
         >
-          {{ ArticleDetailsA.sex == 1 ? "男" : "女" }}
+          {{ ArticleDetailsA.sex == 1 ? t("man") : t("woman") }}
+          <!-- gj男/女 -->
         </div>
         <div class="Country">{{ ArticleDetailsA.country }}</div>
       </div>
       <!--  -->
       <div class="time">
-        PK时间(本地时间):{{ TimestamptolocalTime(PkIDInfodata.pkTime * 1000) }}
+        {{ t("PKTime") + TimestamptolocalTime(PkIDInfodata.pkTime * 1000) }}
+        <!-- gjPK时间 -->
       </div>
       <!--  -->
       <div class="PKinformation">
@@ -32,7 +34,8 @@
             alt=""
           />
           <div class="sessions-content">
-            金币：
+            {{t('GoldCoin') }}
+            <!-- gj金币 -->
             <div class="gold-num">{{ ArticleDetailsA.coin }}K</div>
           </div>
         </div>
@@ -43,13 +46,14 @@
             alt=""
           />
           <div class="sessions-content">
-            场次：
-            <div class="gold-num">{{ PkIDInfodata.pkNumber }}场</div>
+            {{ t('session') }}
+            <!-- gj场次 -->
+            <div class="gold-num">{{ PkIDInfodata.pkNumber+t('match') }}</div>
           </div>
         </div>
       </div>
       <!--  -->
-      <div class="Remarks">备注：{{ ArticleDetailsA.remark }}</div>
+      <div class="Remarks">{{ t('Note')+ArticleDetailsA.remark }}</div>
     </div>
     <!-- vs -->
     <div class="messageVS">
@@ -70,13 +74,15 @@
             background: ArticleDetailsB.sex == 1 ? '#59D8DB' : '#F3876F',
           }"
         >
-          {{ ArticleDetailsB.sex == 1 ? "男" : "女" }}
+          {{ ArticleDetailsB.sex == 1 ? t("man") : t("woman")}}
+          <!-- gj男/女 -->
         </div>
         <div class="Country">{{ ArticleDetailsB.country }}</div>
       </div>
       <!--  -->
       <div class="time">
-        PK时间(本地时间):{{ TimestamptolocalTime(PkIDInfodata.pkTime * 1000) }}
+       {{ t("PKTime") + TimestamptolocalTime(PkIDInfodata.pkTime * 1000) }}
+        <!-- gjPK时间 -->
       </div>
       <!--  -->
       <div class="PKinformation">
@@ -87,7 +93,8 @@
             alt=""
           />
           <div class="sessions-content">
-            金币：
+            {{t('GoldCoin') }}
+            <!-- gj金币 -->
             <div class="gold-num">{{ ArticleDetailsB.coin }}K</div>
           </div>
         </div>
@@ -98,55 +105,70 @@
             alt=""
           />
           <div class="sessions-content">
-            场次：
-            <div class="gold-num">{{ PkIDInfodata.pkNumber }}场</div>
+            {{ t('session') }}
+            <!-- gj场次 -->
+            <div class="gold-num">{{ PkIDInfodata.pkNumber+t('match') }}</div>
           </div>
         </div>
       </div>
-      <div class="Remarks">备注：{{ ArticleDetailsB.remark }}</div>
+      <div class="Remarks">{{ t('Note')+ArticleDetailsB.remark }}</div>
+      <!-- gj备注 -->
     </div>
     <!-- btn -->
-    <div class="btn"  v-if="PkIDInfodata.pkStatus === 0 && ArticleDetailsB.senderId != info.id">
-      <div class="messagebtn-left" @click="agree()">同意</div>
-      <div class="messagebtn-right" @click="refuse()">拒绝</div>
+    <div
+      class="btn"
+      v-if="PkIDInfodata.pkStatus === 0 && ArticleDetailsB.senderId != info.id"
+    >
+      <div class="messagebtn-left" @click="agree()">{{ t('agree') }}</div>
+      <!-- gj同意 -->
+      <div class="messagebtn-right" @click="refuse()">{{ t('Refuse') }}</div>
+      <!-- gj拒绝 -->
     </div>
-    <div v-if="PkIDInfodata.pkStatus === 1" class="messageHint">已同意邀请</div>
-
-    <div v-if="PkIDInfodata.pkStatus === 2" class="messageHint">已拒绝邀请</div>
-
+    <div v-if="PkIDInfodata.pkStatus === 1" class="messageHint">{{ t('HaveAgreedToTheInvitation') }}</div>
+    <!-- gj已同意 -->
+    <div v-if="PkIDInfodata.pkStatus === 2" class="messageHint">{{ t('HaveRefusedTheInvitation') }}</div>
+    <!-- gj已拒绝 -->
     <div
       v-if="PkIDInfodata.pkStatus === 0 && ArticleDetailsB.senderId == info.id"
       class="messageHint"
     >
-      等待对方回应（如果已经回应请刷新页面）
+    {{ t('WaitForTheOtherPartyResponse') }}
+    <!-- gj等待对方响应 -->
     </div>
   </div>
 
   <!-- 弹窗 -->
   <!-- 同意邀请提示 -->
-  <el-dialog v-model="agreedialog" center title="提示" width="400" align-center>
+  <el-dialog v-model="agreedialog" center :title="t('Hint')" width="400" align-center>
     <div class="dialog-content">
       <div class="dialog-content-text">
-        <div>邀请成功后的pk不可修改，不可删除，请谨慎操作！</div>
+        <div>{{ t('AfterASuccessfulInvitationThePKCannotBeModifiedOrDeletedPleaseOperateWithCaution') }}</div>
+          <!-- gj邀请成功后，PK不可修改或删除，请谨慎操作 -->
       </div>
       <!--  -->
       <div class="myanchor-dialog-btn">
-        <div class="remindermyAnchorDialogReset" @click="agreedialog = false">取消</div>
-        <div class="remindermyAnchorDialogConfirm" @click="agreedialogConfirm">确认</div>
+        <div class="remindermyAnchorDialogReset" @click="agreedialog = false">{{ t('Cancel') }}</div>
+        <!-- gj取消 -->
+        <div class="remindermyAnchorDialogConfirm" @click="agreedialogConfirm">  {{ t('Confirm') }}
+          <!-- gj确认 --></div>
       </div>
     </div>
   </el-dialog>
   <!-- 拒绝邀请提示 -->
-  <el-dialog v-model="refusedialog" center title="提示" width="400" align-center>
+  <el-dialog v-model="refusedialog" center :title="t('Hint')" width="400" align-center>
+    <!-- gj提示 -->
     <div class="dialog-content">
       <!--  -->
       <div class="dialog-content-text">
-        <div>您确定要拒绝该邀请吗？</div>
+        <div> {{ t('AreYouSureYouWantToDeclineThisInvitation') }}
+          <!-- gj确定拒绝邀请？ --></div>
       </div>
 
       <div class="myanchor-dialog-btn">
-        <div class="remindermyAnchorDialogReset" @click="refusedialog = false">取消</div>
-        <div class="remindermyAnchorDialogConfirm" @click="refusedialogConfirm">确认</div>
+        <div class="remindermyAnchorDialogReset" @click="refusedialog = false">{{ t('Cancel') }}</div>
+        <!-- gj取消 -->
+        <div class="remindermyAnchorDialogConfirm" @click="refusedialogConfirm"> {{ t('Confirm') }}</div>
+        <!-- gj确认 -->
       </div>
     </div>
   </el-dialog>
@@ -169,6 +191,11 @@ import {
 } from "@/utils/storage.js";
 import { TimestamptolocalTime } from "@/utils/timeConversion.js";
 import { ElMessage } from "element-plus";
+//
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
+window["$t"] = t;
+//
 const props = defineProps({
   item: {
     type: Object,
@@ -188,11 +215,14 @@ function agreedialogConfirm() {
   updatePkRecordStatus({
     id: newValitem.value.payload.customData.id,
     pkStatus: 1,
-  }).then(() => {
-    ElMessage.success("同意成功");
-    PkIDInfodata.value.pkStatus = 1;
-    agreedialog.value = false;
-  }).catch((err) => {});
+  })
+    .then(() => {
+      ElMessage.success(t('AgreeToSuccess'));
+      //gj同意成功
+      PkIDInfodata.value.pkStatus = 1;
+      agreedialog.value = false;
+    })
+    .catch((err) => {});
 }
 
 //确认拒绝
@@ -200,11 +230,14 @@ function refusedialogConfirm() {
   updatePkRecordStatus({
     id: newValitem.value.payload.customData.id,
     pkStatus: 2,
-  }).then(() => {
-    ElMessage.success("拒绝成功");
-    PkIDInfodata.value.pkStatus = 2;
-    refusedialog.value = false;
-  }).catch((err) => {});
+  })
+    .then(() => {
+      ElMessage.success(t('RefuseSuccess'));
+      //gj拒绝成功
+      PkIDInfodata.value.pkStatus = 2;
+      refusedialog.value = false;
+    })
+    .catch((err) => {});
 }
 
 //同意邀请
@@ -224,34 +257,42 @@ watch(
     newValitem.value = newVal;
     queryPkRecord({
       id: newVal.payload.customData.id,
-    }).then((res) => {
-      PkIDInfodata.value = res;
-      console.log("PkIDInfodata", res);
-    }).catch((err) => {});
+    })
+      .then((res) => {
+        PkIDInfodata.value = res;
+        console.log("PkIDInfodata", res);
+      })
+      .catch((err) => {});
     pkArticleDetail({
       id: newVal.payload.customData.pkIdA,
       userId: info.value.id,
       from: 2,
-    }).then((res) => {
-      ArticleDetailsA.value = res;
-      console.log("ArticleDetailsA", res);
-    }).catch((err) => {});
+    })
+      .then((res) => {
+        ArticleDetailsA.value = res;
+        console.log("ArticleDetailsA", res);
+      })
+      .catch((err) => {});
     pkArticleDetail({
       id: newVal.payload.customData.pkIdB,
       userId: info.value.id,
       from: 2,
-    }).then((res) => {
-      ArticleDetailsB.value = res;
-      console.log("ArticleDetailsB", res);
-    }).catch((err) => {});
+    })
+      .then((res) => {
+        ArticleDetailsB.value = res;
+        console.log("ArticleDetailsB", res);
+      })
+      .catch((err) => {});
   },
   { immediate: true }
 );
 
 onMounted(() => {
-  getPromiseStorage("user").then((res) => {
-    info.value = res;
-  }).catch((err) => {});
+  getPromiseStorage("user")
+    .then((res) => {
+      info.value = res;
+    })
+    .catch((err) => {});
 });
 onUpdated(() => {
   // 组件更新后执行
@@ -370,10 +411,10 @@ watch(refname, async (newQuestion, oldQuestion) => {
   display: flex;
   align-items: center;
   color: #999;
-  font-size: 16px;
+  font-size: 14px;
 }
 .gold-num {
-  font-size: 16px;
+  font-size: 14px;
   font-weight: bold;
   color: #000000;
   margin-left: 5px;