feat(支付结果页): 完善页面，使用i18n

src/views/payResult.vue

@@ -1,14 +1,108 @@
 <template>
-  <div></div>
+  <div class="pay-result">
+    <div class="head">
+      <div class="content">
+        <div v-if="appStatus === 0">
+          <div class="icon">
+            <van-icon name="checked" size="2rem" color="#0ad4af" />
+          </div>
+          <div class="ok">{{ getI18n('paySuccess') }}</div>
+          <div class="msg">{{ getI18n('payMsg') }}</div>
+        </div>
+        <div v-if="appStatus === 1">
+          <div class="icon">
+            <van-icon name="clear" size="2rem" color="#FF682E" />
+          </div>
+          <div class="ok">{{ getI18n('payFail') }}</div>
+        </div>
+        <div class="switch-lang">
+          <!-- <select v-model="selectedLange" @change="changeLange">
+            <option v-for="(item, index) in langCountrys" :key="index" :value="item.value">
+              {{ item.name }}
+            </option>
+          </select> -->
+        </div>
+      </div>
+    </div>
+    <div class="bottom">
+      <div class="colse" @click="closePage()">{{ getI18n('close') }}</div>
+    </div>
+  </div>
 </template>
 
 <script setup>
-import { showError, showWarning, showInfo, showSuccess } from "@/utils/toast.js";
-import { onMounted } from "vue";
+import { showError, showWarning, showInfo, showSuccess } from '@/utils/toast.js';
+import { onMounted, ref } from 'vue';
+import { useRoute } from 'vue-router';
+const route = useRoute();
 
-onMounted(() => {
-  showSuccess("");
-});
+const query = route.query || {};
+const appStatus = ref(Number(query.appStatus)); // 0 成功, 1 失败
+const appType = ref(query.appType);
+const appId = ref(query.appId);
+const redirect = ref(query.redirect);
+
+const closePage = () => {
+  location.href = `${location.origin}/#/${redirect.value}/${appId.value}?type=${appType.value}`;
+};
+
+// const changeLange = (event) => {
+//   store.dispatch('app/setLanguage', selectedLange.value)
+//   sysLange.value = selectedLange.value
+// }
+
+const getI18n = (field) => {
+  return $t(`${field}`);
+};
+
+onMounted(() => {});
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.pay-result {
+  background: #ffffff;
+  min-height: 100%;
+  .head {
+    .content {
+      .switch-lang {
+        margin-top: 0.5rem;
+        font-size: 0.32rem;
+        position: relative;
+        text-align: center;
+        .down-icon {
+          position: absolute;
+        }
+      }
+      .icon {
+        text-align: center;
+        padding: 0.5rem 0rem 0rem 0rem;
+      }
+      .ok {
+        text-align: center;
+        font-size: 0.6rem;
+      }
+      .msg {
+        text-align: center;
+        font-size: 0.35rem;
+        padding-top: 0.2rem;
+      }
+    }
+  }
+  .bottom {
+    height: 1.2rem;
+    width: 100%;
+    margin-top: 0.5rem;
+    .colse {
+      margin: auto;
+      color: #ffffff;
+      width: 4.5rem;
+      height: 1rem;
+      font-size: 0.4rem;
+      text-align: center;
+      line-height: 1rem;
+      background: #0ad4af;
+      border-radius: 0.2rem;
+    }
+  }
+}
+</style>