续费管理

src/App.vue

@@ -114,7 +114,6 @@ onMounted(getLocation)
 }
 
 .contents {
-  margin-top: var(--nav-bar-height);
   padding-top: 50px;
   text-align: center;
   line-height: 74px;

src/components/dialog/Dialog.vue

@@ -92,7 +92,7 @@ function onConfirm() {
   }
 
   &__content {
-    padding-top: 48px;
+    padding: 48px 24px;
     white-space: pre-wrap;
     font-size: 32px;
     line-height: 44px;
@@ -102,7 +102,6 @@ function onConfirm() {
   &__footer {
     display: flex;
     box-sizing: content-box;
-    margin-top: 46px;
     height: 138px;
     border-top: 1px solid #d9d9d9;
   }

src/components/dialog/index.ts

@@ -1,4 +1,4 @@
-import { reactive, h } from 'vue'
+import { reactive, h, App } from 'vue'
 import PtcDialog from './Dialog.vue'
 import { mountComponent } from '../utils/mount-component'
 
@@ -66,5 +66,12 @@ Dialog.alert = (title: string, content: string, options?: DialogOptions) =>
 Dialog.confirm = (title: string, content: string, options?: DialogOptions) =>
   Dialog({ title, content, showCancel: true, ...options })
 
-const win: any = window
-win.Dialog = Dialog
+Dialog.install = (app: App) => {
+  app.config.globalProperties.$dialog = Dialog
+}
+
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    $dialog: typeof Dialog
+  }
+}

src/components/nav-bar/index.vue

@@ -98,10 +98,7 @@
                   </div>
                 </div>
               </div>
-              <div
-                v-if="state.userInfo.orders.length > Infinity"
-                class="pagination"
-              >
+              <div v-if="state.userInfo.orders.length > 1" class="pagination">
                 <i
                   v-for="n of state.userInfo.orders.length"
                   :key="n"
@@ -110,7 +107,7 @@
               </div>
             </div>
           </div>
-          <div class="role" @click="$router.push('/account')">
+          <div class="role">
             {{
               state.userInfo.orders.length
                 ? 'Pro  Member >'

src/components/toast/index.ts

@@ -1,4 +1,4 @@
-import { reactive, h } from 'vue'
+import { reactive, h, App } from 'vue'
 import PtcToast from './Toast.vue'
 import { mountComponent } from '../utils/mount-component'
 
@@ -66,5 +66,12 @@ Toast.hide = () => {
   instance?.close()
 }
 
-const win: any = window
-win.Toast = Toast
+Toast.install = (app: App) => {
+  app.config.globalProperties.$toast = Toast
+}
+
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    $toast: typeof Toast
+  }
+}

src/main.ts

@@ -6,7 +6,11 @@ import { getUserInfo } from './store'
 import 'nprogress/nprogress.css'
 import './style'
 
+import Toast from './components/toast'
+import Dialog from './components/dialog'
+
 getUserInfo(false).finally(() => {
   const app = createApp(App)
   app.use(router).mount('#app')
+  app.use(Toast).use(Dialog)
 })

src/pages/benefits/index.vue

@@ -13,7 +13,9 @@
         <p class="l4">
           <button class="ptc-button ptc-button--stroke">Renewal</button>
         </p>
-        <p class="l5" @click="$router.push('/renewal')">Renewal management ></p>
+        <p class="l5" @click="$router.push(`/renewal?id=${$route.params.id}`)">
+          Renewal management >
+        </p>
       </div>
     </div>
     <div class="ptc-block">

src/pages/renewal/index.vue

@@ -1,29 +1,69 @@
 <template>
-  <div class="p-renewal">
+  <div v-if="info" class="p-renewal">
     <h3 class="ptc-title">Renewal management</h3>
     <div class="ptc-wrapper">
       <div class="ptc-block">
         <div class="ptc-inner">
           <div class="cell">
             <span class="cell__label">Product Name:</span>
-            <span class="cell__value">Lite</span>
+            <span class="cell__value">{{ info.product_name }}</span>
           </div>
           <div class="cell">
             <span class="cell__label">Subscription method:</span>
-            <span class="cell__value">Annual</span>
+            <span class="cell__value">{{
+              info.subscribe_type > 1 ? 'Annual' : 'Monthly'
+            }}</span>
+          </div>
+          <div class="cell">
+            <strong class="cell__label primary" @click="unsubscribe"
+              >Unsubscribe ></strong
+            >
           </div>
-          <div class="primary">Unsubscribe ></div>
         </div>
       </div>
       <div class="ptc-button-group">
         <div class="ptc-inner">
-          <button class="ptc-button ptc-button--stroke">BACK</button>
+          <button class="ptc-button ptc-button--stroke" @click="$router.back()">
+            BACK
+          </button>
         </div>
       </div>
     </div>
   </div>
 </template>
 
+<script>
+import { defineComponent } from 'vue'
+import { getOrderInfo, unsubscribe } from '@/service/order'
+
+export default defineComponent({
+  name: 'Renewal',
+  async beforeRouteEnter(to, from, next) {
+    const { results } = await getOrderInfo(to.query.id)
+    next(vm => (vm.info = results))
+  },
+  data() {
+    return {
+      /** @type {any} */
+      info: null,
+    }
+  },
+  methods: {
+    async unsubscribe() {
+      await this.$dialog({
+        title: 'TIPS',
+        content:
+          'Are you sure you want to close the subscription?\nAfter closing the subscription, if you want to use the membership service, you need to re-subscribe',
+        confirmText: 'CLOSE',
+        showCancel: true,
+      })
+      const { message } = await unsubscribe(this.$route.query.id)
+      this.$toast(message)
+    },
+  },
+})
+</script>
+
 <style lang="scss">
 .p-renewal {
   .cell {
@@ -38,10 +78,5 @@
       color: #333;
     }
   }
-  .primary {
-    margin-top: 8px;
-    font-weight: bold;
-    font-size: 32px;
-  }
 }
 </style>