From 9754e2760603c46cc26466fdbd4f8131fee755a3 Mon Sep 17 00:00:00 2001
From: HCode <71808213+hyf-github-user@users.noreply.github.com>
Date: Fri, 13 Sep 2024 17:02:37 +0800
Subject: [PATCH] Fix discount (#140)

---
 ...-9d7272a5-d129-4efb-898f-cd828dd98d2a.json |  7 ++++
 src/pages/console/application/Buy.vue         | 41 +++++++++++++++++++
 2 files changed, 48 insertions(+)
 create mode 100644 change/@acedatacloud-nexior-9d7272a5-d129-4efb-898f-cd828dd98d2a.json

diff --git a/change/@acedatacloud-nexior-9d7272a5-d129-4efb-898f-cd828dd98d2a.json b/change/@acedatacloud-nexior-9d7272a5-d129-4efb-898f-cd828dd98d2a.json
new file mode 100644
index 00000000..84db162a
--- /dev/null
+++ b/change/@acedatacloud-nexior-9d7272a5-d129-4efb-898f-cd828dd98d2a.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fit discount information",
+  "packageName": "@acedatacloud/nexior",
+  "email": "1348977728@qq.com",
+  "dependentChangeType": "patch"
+}
diff --git a/src/pages/console/application/Buy.vue b/src/pages/console/application/Buy.vue
index da9b771d..caa11338 100644
--- a/src/pages/console/application/Buy.vue
+++ b/src/pages/console/application/Buy.vue
@@ -31,6 +31,9 @@
                   <el-form-item :label="$t('application.field.package')" class="mb-0">
                     <el-radio-group v-if="packages" v-model="form.packageId">
                       <el-radio-button v-for="(pkg, pkgIndex) in packages" :key="pkgIndex" :label="pkg.id" class="mb-2">
+                        <span v-show="pkgIndex !== 0" class="corner">
+                          {{ getDiscount(pkg) }}
+                        </span>
                         {{ pkg.amount }} {{ $t(`service.unit.${application?.service?.unit}s`) }}
                       </el-radio-button>
                     </el-radio-group>
@@ -122,6 +125,7 @@ interface IData {
     packageId: string | undefined;
   };
   type: string;
+  lang: string;
   creating: boolean;
 }
 
@@ -143,6 +147,7 @@ export default defineComponent({
   },
   data(): IData {
     return {
+      lang: this.$i18n.locale,
       application: undefined,
       loading: false,
       type: 'Usage',
@@ -183,6 +188,22 @@ export default defineComponent({
     this.onFetchApplication();
   },
   methods: {
+    getDiscount(pkg: any) {
+      if (this.packages && this.packages.length > 0) {
+        if (this.lang?.startsWith('zh')) {
+          return (
+            // @ts-ignore
+            ((10 * pkg?.price) / pkg?.amount / (this.packages[0].price / this.packages[0]?.amount))?.toFixed(1) + '折'
+          );
+        } else {
+          return (
+            Math.round(100 - (100 * pkg?.price) / pkg?.amount / (this.packages[0].price / this.packages[0]?.amount)) +
+            '% OFF'
+          );
+        }
+      }
+      return '';
+    },
     onSubscribe() {
       this.$router.push({
         name: ROUTE_CONSOLE_APPLICATION_SUBSCRIBE,
@@ -255,6 +276,26 @@ export default defineComponent({
   color: var(--el-text-color-primary);
 }
 
+.el-form {
+  .el-radio-group {
+    .el-radio-button {
+      position: relative;
+      .corner {
+        position: absolute;
+        top: -13px;
+        right: 0px;
+        font-size: 12px;
+        border: 1px solid #ff7200;
+        color: #ff7200;
+        background-color: #ffe8d5;
+        border-radius: 3px;
+        padding: 2px 5px;
+        z-index: 1000;
+      }
+    }
+  }
+}
+
 .panel {
   padding: 30px;
   width: calc(100% - 300px);