部分接口

.env

@@ -1 +1,2 @@
-VITE_API_BASE=https://mockapi.eolink.com/9A5KfUCbe99f2b17204d98bfebe7a77757ce256af3e4e90
+VITE_API_BASE=https://mockapi.eolink.com/9A5KfUCbe99f2b17204d98bfebe7a77757ce256af3e4e90
+#VITE_API_BASE=http://t.ptcrepair.com.au/care

package.json

@@ -9,6 +9,7 @@
   "dependencies": {
     "axios": "^0.25.0",
     "lodash-es": "^4.17.21",
+    "nprogress": "^0.2.0",
     "vue": "^3.2.25",
     "vue-router": "4"
   },

src/App.vue

@@ -9,13 +9,25 @@
     :class="{ 'white-down-md': state.bgWhite }"
     :style="$route.path === '/' ? 'min-height: auto; padding-bottom: 0;' : ''"
   >
-    <router-view
+    <!-- <router-view
       :key="$route.fullPath"
       :class="[
         'main-wrapper',
         { 'main-wrapper-fluid': $route.path === '/invite' },
       ]"
-    />
+    /> -->
+    <router-view v-slot="{ Component }">
+      <suspense>
+        <component
+          :is="Component"
+          :key="$route.fullPath"
+          :class="[
+            'main-wrapper',
+            { 'main-wrapper-fluid': $route.path === '/invite' },
+          ]"
+        />
+      </suspense>
+    </router-view>
   </div>
   <PageFooter v-if="$route.path !== '/'" />
 
@@ -25,9 +37,9 @@
     <li><router-link to="/password/reset">密码找回</router-link></li>
     <li><router-link to="/order">我的订单</router-link></li>
     <li><router-link to="/gift-card">我的礼品卡</router-link></li>
-    <li><router-link to="/benefits">会员权益</router-link></li>
+    <li><router-link to="/order/1">会员权益</router-link></li>
     <li><router-link to="/renewal">续费管理</router-link></li>
-    <li><router-link to="/mailing/fill">邮寄商品</router-link></li>
+    <li><router-link to="/mailing">邮寄商品</router-link></li>
     <li><router-link to="/fill-order">购买下单</router-link></li>
     <li><router-link to="/pay-result/success">支付成功</router-link></li>
     <li><router-link to="/pay-result/fail">支付失败</router-link></li>

src/components/nav-bar/index.vue

@@ -49,7 +49,7 @@
       <div
         v-show="showMine"
         class="nav-menu nav-dropdown"
-        :class="{ 'is-member': !1 }"
+        :class="{ 'is-member': 1 }"
       >
         <div class="nav-menu-header">
           <i class="logo"></i>
@@ -61,7 +61,7 @@
               <p class="name">Hi, Rebecca</p>
               <p class="intro">Ordinary member</p>
             </div>
-            <div v-if="1" class="p2">
+            <div v-if="0" class="p2">
               <p class="txt">You have not purchased a member</p>
               <button class="btn">BUY</button>
             </div>

src/main.ts

@@ -2,6 +2,7 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 // import './utils/rem'
+import 'nprogress/nprogress.css'
 import './style'
 
 const app = createApp(App)

src/pages/account/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="state === 0" class="p-account">
+  <div v-if="state === 0 && info" class="p-account">
     <h3 class="ptc-title">Account Information</h3>
     <div class="ptc-wrapper">
       <div class="ptc-block">
@@ -8,11 +8,11 @@
           <img class="qrcode" />
         </div>
       </div>
-      <div class="ptc-block">
+      <div v-if="info.from === 1" class="ptc-block">
         <div class="ptc-inner">
           <div class="ptc-cell">
             <p class="ptc-label">Email</p>
-            <p class="ptc-value">Rebecca123@gmail.com</p>
+            <p class="ptc-value">{{ info.email }}</p>
           </div>
           <div class="ptc-cell">
             <p class="ptc-label">Password</p>
@@ -23,14 +23,19 @@
           </div>
         </div>
       </div>
-      <div class="ptc-block">
+      <div v-else class="ptc-block">
         <div class="ptc-inner">
           <div class="ptc-cell">
             <p class="ptc-label">Account</p>
             <p class="ptc-value flex-ac">
-              Rebecca123@gmail.com<i
+              {{ info.email
+              }}<i
                 class="account-icon"
-                :class="1 ? 'a-google' : 2 ? 'a-apple' : 'a-facebook'"
+                :class="{
+                  'a-facebook': info.from === 2,
+                  'a-google': info.from === 3,
+                  'a-apple': info.from === 4,
+                }"
               ></i>
             </p>
           </div>
@@ -44,15 +49,15 @@
       <div class="ptc-inner">
         <div class="ptc-cell">
           <p class="ptc-label">Name</p>
-          <p class="ptc-value">Rebecca123@gmail.com</p>
+          <p class="ptc-value">{{ info.name }}</p>
         </div>
         <div class="ptc-cell">
           <p class="ptc-label">Pone number</p>
-          <p class="ptc-value">Rebecca123@gmail.com</p>
+          <p class="ptc-value">{{ info.mobile }}</p>
         </div>
         <div class="ptc-cell">
           <p class="ptc-label">Address</p>
-          <p class="ptc-value">449WATERDALEROAD,HEIDELBERGWEST, VIC,3081</p>
+          <p class="ptc-value">{{ info.address }}</p>
         </div>
       </div>
     </div>
@@ -86,7 +91,7 @@
     </div>
   </div>
 
-  <div v-else class="p-account">
+  <div v-else-if="state === 2" class="p-account">
     <h3 class="ptc-title">Modify My profile</h3>
     <div class="ptc-wrapper">
       <div class="ptc-block">
@@ -131,12 +136,29 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import { ref, watch } from 'vue'
-
-const state = ref(0)
+<script>
+import { defineComponent } from 'vue'
+import { getUserInfo } from '@/service/user'
 
-watch(state, () => window.scrollTo(0, 0))
+export default defineComponent({
+  name: 'Account',
+  async beforeRouteEnter(to, from, next) {
+    const { results } = await getUserInfo()
+    next(vm => (vm.info = results))
+  },
+  data() {
+    return {
+      /** @type {ApiUser.Info.Response} */
+      info: null,
+      state: 0,
+    }
+  },
+  watch: {
+    state() {
+      window.scrollTo(0, 0)
+    },
+  },
+})
 </script>
 
 <style lang="scss">

src/pages/benefits/index.vue

@@ -1,14 +1,15 @@
 <template>
-  <div class="p-benefits bg-gray">
+  <div v-if="info" class="p-benefits bg-gray">
     <h3 class="ptc-title">Member benefits</h3>
     <div class="ptc-block">
       <div class="ptc-inner">
         <div class="l1">
           <i class="icon-lite"></i
-          ><strong class="primary">Lite</strong>2021/09/01 to 2022/08/31
+          ><strong class="primary">{{ info.product_name }}</strong
+          >{{ info.start_time }} to {{ info.end_time }}
         </div>
-        <p class="l2">iPhone 12</p>
-        <p class="l3">QWERTYUIO12345678</p>
+        <p class="l2">{{ info.phone_info }}</p>
+        <p class="l3">{{ info.phone_imei }}</p>
         <p class="l4">
           <button class="ptc-button ptc-button--stroke">Renewal</button>
         </p>
@@ -17,14 +18,21 @@
     </div>
     <div class="ptc-block">
       <div class="ptc-inner">
-        <div class="benefit benefit-a">
-          <p class="benefit-name">Unlimited</p>
+        <!-- <div
+          v-for="(item, index) of info.rights"
+          :key="index"
+          class="benefit"
+          :style="{ backgroundImage: `url(${item.icon})` }"
+        >
+          <p class="benefit-name">{{ info.title }}</p>
           <p class="benefit-desc">Avaliable 1</p>
           <p class="benefit-sup">
             Member price：<span class="highlight">$35</span>
           </p>
-          <button class="ptc-button">Apply</button>
-        </div>
+          <button v-if="info.button_type" class="ptc-button">
+            {{ info.button_name }}
+          </button>
+        </div> -->
         <div class="benefit benefit-b">
           <p class="benefit-name">Phone Health Inspection Service</p>
           <p class="benefit-desc">Avaliable 1</p>
@@ -46,13 +54,42 @@
         <div class="benefit benefit-e">
           <p class="benefit-name">Cleaning Kit</p>
           <p class="benefit-desc">Give a gift of XX</p>
-          <button class="ptc-button">Send to me</button>
+          <button
+            class="ptc-button"
+            @click="
+              $router.push({
+                path: '/mailing',
+                query: { right_id: 6, right_name: 'Cleaning Kit' },
+              })
+            "
+          >
+            Send to me
+          </button>
         </div>
       </div>
     </div>
   </div>
 </template>
 
+<script>
+import { defineComponent } from 'vue'
+import { getOrderInfo } from '@/service/order'
+
+export default defineComponent({
+  name: 'OrderDetail',
+  async beforeRouteEnter(to, from, next) {
+    const { results } = await getOrderInfo(to.params.id)
+    next(vm => (vm.info = results))
+  },
+  data() {
+    return {
+      /** @type {any} */
+      info: null,
+    }
+  },
+})
+</script>
+
 <style lang="scss">
 .p-benefits {
   .l1 {
@@ -102,10 +139,9 @@
     padding-left: 100px;
     padding-bottom: 46px;
     background-repeat: no-repeat;
-    background-position: 0 48px;
+    background-position: 0 0;
     background-size: 64px 64px;
     &-a {
-      background-position: 0 0;
       background-image: url(@img/benefit0.png);
     }
     &-b {
@@ -123,6 +159,7 @@
 
     + .benefit {
       padding-top: 48px;
+      background-position: 0 48px;
       @include thin-border(top);
     }
 

src/pages/mailing/index.vue

@@ -1,15 +1,16 @@
 <template>
   <div class="p-mailing">
-    <template v-if="action === 'fill'">
+    <template v-if="step === 0">
       <h3 class="ptc-title">Fill in the mailing address</h3>
       <div class="ptc-wrapper">
         <div class="ptc-block">
           <div class="ptc-inner">
-            <div class="title">Receive merchandise：Cleaning Kit (1)</div>
+            <div class="title">Receive merchandise：{{ right_name }} (1)</div>
             <div class="ptc-cell">
               <p class="ptc-label">Name</p>
               <p class="ptc-value">
                 <input
+                  v-model="form.post_name"
                   class="ptc-input"
                   placeholder="Please enter your real name"
                 />
@@ -19,6 +20,7 @@
               <p class="ptc-label">Phone Number</p>
               <p class="ptc-value">
                 <input
+                  v-model="form.post_phone"
                   class="ptc-input"
                   placeholder="Please enter your phone number"
                 />
@@ -27,9 +29,21 @@
             <div class="ptc-cell">
               <p class="ptc-label">Address</p>
               <p class="ptc-value">
-                <input class="ptc-input mb24" placeholder="Road" />
-                <input class="ptc-input mb24" placeholder="State" />
-                <input class="ptc-input" placeholder="Zip code" />
+                <input
+                  v-model="form.address[0]"
+                  class="ptc-input mb24"
+                  placeholder="Road"
+                />
+                <input
+                  v-model="form.address[1]"
+                  class="ptc-input mb24"
+                  placeholder="State"
+                />
+                <input
+                  v-model="form.address[2]"
+                  class="ptc-input"
+                  placeholder="Zip code"
+                />
               </p>
             </div>
           </div>
@@ -52,29 +66,26 @@
       <div class="ptc-wrapper">
         <div class="ptc-block">
           <div class="ptc-inner">
-            <div class="title">Merchandise：Cleaning Kit (1)</div>
+            <div class="title">Merchandise：{{ right_name }} (1)</div>
             <div class="info">
               <div class="cell">
                 <span class="cell__label">Name:</span>
-                <span class="cell__value">Rebecca</span>
+                <span class="cell__value">{{ form.post_name }}</span>
               </div>
               <div class="cell">
                 <span class="cell__label">Phone Number:</span>
-                <span class="cell__value">6668888</span>
+                <span class="cell__value">{{ form.post_phone }}</span>
               </div>
               <div class="cell">
                 <span class="cell__label">Address:</span>
-                <span class="cell__value">Rebeccalafeoxxx,xxxxx,xxxxx</span>
+                <span class="cell__value">{{ form.address.join(',') }}</span>
               </div>
             </div>
           </div>
         </div>
         <div class="ptc-button-group">
           <div class="ptc-inner">
-            <button
-              class="ptc-button ptc-button--stroke"
-              @click="$router.back()"
-            >
+            <button class="ptc-button ptc-button--stroke" @click="step--">
               BACK
             </button>
           </div>
@@ -85,14 +96,24 @@
 </template>
 
 <script setup lang="ts">
-import { useRouter } from 'vue-router'
+import { reactive, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { applyPost } from '@/service/order'
 
-defineProps<{ action: 'fill' | 'view' }>()
+const { right_id, right_name } = useRoute().query
+const step = ref(0)
+const form: any = reactive({ address: [] })
 
-const router = useRouter()
+watch(step, () => window.scrollTo(0, 0))
 
-function submit() {
-  router.push('/mailing/view')
+async function submit() {
+  await applyPost({
+    member_right_id: right_id,
+    post_name: form.post_name,
+    post_phone: form.post_phone,
+    post_address: form.address.join(','),
+  })
+  step.value++
 }
 </script>
 

src/pages/my-order/index.vue

@@ -1,65 +1,131 @@
 <template>
   <div class="p-my-order">
     <h3 class="ptc-title">My Order</h3>
-    <div class="ptc-block wrapper" :class="{ pb24: 1 }">
-      <div>
+    <div
+      v-for="item of list"
+      :key="item.id"
+      class="ptc-block wrapper"
+      :class="{ pb24: item.status !== 1 }"
+    >
+      <div
+        class="pointer"
+        @click="item.status === 1 && $router.push(`/order/${item.id}`)"
+      >
         <div class="cell-group border-bottom">
           <div class="cell">
             <span class="cell__label">Order Status</span>
             <span class="cell__value">
               <span
                 class="ptc-tag"
-                :class="{ 'not-paid': 1, paid: 0, canceled: 0 }"
-                >Not Paid</span
+                :class="{
+                  'not-paid': item.status === 0,
+                  paid: item.status === 1,
+                  canceled: item.stauts > 1,
+                }"
+                >{{
+                  item.status === 0
+                    ? 'Not Paid'
+                    : item.status === 1
+                    ? 'Paid'
+                    : 'Canceled'
+                }}</span
               >
             </span>
           </div>
           <div class="cell">
             <span class="cell__label">Order Number</span>
-            <span class="cell__value">12345678910</span>
+            <span class="cell__value">{{ item.contract_no }}</span>
           </div>
           <div class="cell">
             <span class="cell__label">Order Time</span>
-            <span class="cell__value">2021/08/20 12:34</span>
+            <span class="cell__value">{{ item.created_at }}</span>
           </div>
           <div class="cell">
             <span class="cell__label">Phone brand</span>
-            <span class="cell__value">Apple iphone 12</span>
+            <span class="cell__value">{{ item.phone_info }}</span>
           </div>
           <div class="cell">
             <span class="cell__label">Version</span>
-            <span class="cell__value">Lite(2022/7/31 Expires)</span>
+            <span class="cell__value"
+              >{{ item.product_name }}({{ item.end_time }} Expires)</span
+            >
           </div>
         </div>
         <div class="cell-group cell-group--compact">
-          <template v-if="1">
+          <template v-if="item.status < 2">
             <div class="cell">
               <span class="cell__label">Activation fee</span>
-              <span class="cell__value">$20.00</span>
+              <span class="cell__value">${{ item.payment_open }}</span>
             </div>
             <div class="cell">
               <span class="cell__label">Membership fee</span>
-              <span class="cell__value">$8.95</span>
+              <span class="cell__value">${{ item.payment_product }}</span>
             </div>
             <div class="cell">
               <span class="cell__label">Discount</span>
-              <span class="cell__value highlight">-$10.00</span>
+              <span class="cell__value highlight"
+                >-${{ item.discount_amount }}</span
+              >
             </div>
           </template>
           <div class="cell" :class="{ mt48: 1 }">
             <span class="cell__label">Cost</span>
-            <span class="cell__value bold">$18.95</span>
+            <span class="cell__value bold">${{ item.payment_amount }}</span>
           </div>
         </div>
       </div>
-      <div class="button-group">
-        <button class="ptc-button">Pay 14:40</button>
-        <button class="ptc-button ptc-button--stroke">Cancel</button>
+      <div v-if="item.status !== 1" class="button-group">
+        <template v-if="item.status === 0">
+          <button class="ptc-button">Pay 14:40</button>
+          <button
+            class="ptc-button ptc-button--stroke"
+            @click="cancelOrder(item)"
+          >
+            Cancel
+          </button>
+        </template>
+        <button
+          v-else
+          class="ptc-button ptc-button--stroke"
+          @click="deleteOrder(item)"
+        >
+          Delete
+        </button>
       </div>
     </div>
   </div>
 </template>
 
+<script>
+import { defineComponent } from 'vue'
+import * as api from '@/service/order'
+
+export default defineComponent({
+  name: 'OrderList',
+  async beforeRouteEnter(to, from, next) {
+    const { results } = await api.getOrderList()
+    next(vm => (vm.list = results))
+  },
+  data() {
+    return {
+      /** @type {any[]} */
+      list: [],
+    }
+  },
+  methods: {
+    async cancelOrder(item) {
+      await api.cancelOrder(item.id)
+      item.status = 2
+    },
+
+    async deleteOrder(item) {
+      await api.deleteOrder(item.id)
+      this.list.splice(this.list.indexOf(item), 1)
+    },
+  },
+})
+</script>
+
 <style lang="scss">
 .p-my-order {
   background: #f7f7f7;

src/pages/password/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="p-password">
-    <div v-if="$route.params.action === 'change'" class="step ptc-inner">
+    <div v-if="action === 'change'" class="step ptc-inner">
       <div class="ptc-form">
         <h3 class="title">Change Password</h3>
         <div class="ptc-form-item">
@@ -30,21 +30,27 @@
       </div>
       <div class="ptc-form">
         <div class="ptc-form-item">
-          <input class="ptc-input" placeholder="email address" />
+          <input
+            v-model="resetForm.email"
+            class="ptc-input"
+            placeholder="email address"
+          />
         </div>
         <div class="ptc-form-item">
-          <button class="ptc-button" @click="next">NEXT</button>
+          <button class="ptc-button" @click="sendEmail">NEXT</button>
         </div>
         <div class="ptc-form-item">
-          <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 v-else-if="step === 1" class="step ptc-inner">
       <h3 class="title">Recover password</h3>
       <div class="desc">
-        We will send you an email（ xxx@126.com ）The password reset email has
-        been sent. Please go to check it
+        We will send you an email（ {{ resetForm.email }} ）The password reset
+        email has been sent. Please go to check it
       </div>
       <div class="ptc-form">
         <div class="ptc-form-item">
@@ -55,8 +61,8 @@
     <div v-if="step === 2" class="step ptc-inner">
       <h3 class="title">Recover password</h3>
       <div class="desc">
-        Please set a new password for helloworld@gmail.com. It is recommended to
-        use a combination of numbers, letters, and characters to improve the
+        Please set a new password for {{ resetForm.email }}. It is recommended
+        to use a combination of numbers, letters, and characters to improve the
         password security level
       </div>
       <div class="ptc-form">
@@ -82,22 +88,31 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { reactive } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { state } from '@/store'
+import { sendPasswordEmail, resetPassword } from '@/service/user'
+
+const props = defineProps<{ action: 'change' | 'reset' }>()
 
 const router = useRouter()
 const { query } = useRoute()
-const step = ref(query.step ? +(query.step as string) : 0)
+const step = query.step ? +(query.step as string) : 0
+const resetForm = reactive({ email: '' })
 
 state.bgWhite = true
 
 function next() {
   router.push({
     path: '',
-    query: { step: ++step.value },
+    query: { step: step + 1 },
   })
 }
+
+async function sendEmail() {
+  await sendPasswordEmail(resetForm.email)
+  next()
+}
 </script>
 
 <style lang="scss">

src/router.ts

@@ -1,6 +1,8 @@
 import { createRouter, createWebHistory } from 'vue-router'
+// @ts-ignore
+import NProgress from 'nprogress'
 
-export default createRouter({
+const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   scrollBehavior() {
     return { top: 0, left: 0 }
@@ -17,6 +19,7 @@ export default createRouter({
     {
       path: '/password/:action',
       component: () => import('./pages/password/index.vue'),
+      props: true,
     },
     {
       path: '/imei/:action',
@@ -45,13 +48,12 @@ export default createRouter({
       component: () => import('./pages/gift-card/index.vue'),
     },
     {
-      path: '/benefits',
+      path: '/order/:id',
       component: () => import('./pages/benefits/index.vue'),
     },
     {
-      path: '/mailing/:action',
+      path: '/mailing',
       component: () => import('./pages/mailing/index.vue'),
-      props: true,
     },
     {
       path: '/renewal',
@@ -73,3 +75,11 @@ export default createRouter({
     },
   ],
 })
+
+router.beforeEach(() => {
+  NProgress.start()
+})
+router.afterEach(() => NProgress.done())
+router.onError(() => NProgress.remove())
+
+export default router

src/style/atom.scss

@@ -42,3 +42,7 @@
 .bg-gray {
   background: #f7f7f7;
 }
+
+.pointer {
+  cursor: pointer;
+}

tsconfig.json

@@ -6,6 +6,7 @@
     "moduleResolution": "node",
     "strict": true,
     "jsx": "preserve",
+    "allowJs": true,
     "sourceMap": true,
     "resolveJsonModule": true,
     "esModuleInterop": true,

yarn.lock

@@ -1336,6 +1336,11 @@ normalize-path@^3.0.0, normalize-path@~3.0.0:
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
   integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
 
+nprogress@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/nprogress/-/nprogress-0.2.0.tgz#cb8f34c53213d895723fcbab907e9422adbcafb1"
+  integrity sha1-y480xTIT2JVyP8urkH6UIq28r7E=
+
 object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"