Gitinn Home Explore Help
Register Sign In
u198228
/
vue-ptc
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

完善

冯诚 3 years ago
parent
7e4f43da0c
commit
606005f157
13 changed files with 179 additions and 57 deletions
Split View Show Diff Stats
  1. 1 1
      index.html
  2. BIN
      public/favicon.ico
  3. BIN
      public/favicon.png
  4. 77 17
      src/components/footer/index.vue
  5. 29 17
      src/components/nav-bar/index.vue
  6. 10 1
      src/pages/fill-order/StepOne.vue
  7. 16 0
      src/pages/fill-order/index.vue
  8. 14 9
      src/pages/invite/index.vue
  9. 7 2
      src/pages/login/index.vue
  10. 13 9
      src/pages/my-order/index.vue
  11. 6 0
      src/service/order.ts
  12. 1 0
      src/service/types/user.d.ts
  13. 5 1
      src/store.ts

+ 1 - 1
index.html
View File 

@@ -2,7 +2,7 @@
 
 <html lang="en" style="font-size: 50px;">
 
   <head>
 
     <meta charset="UTF-8" />
 
-    <link rel="icon" href="/favicon.ico" />
 
+    <link rel="icon" href="/favicon.png" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <title>PTC Care Plus</title>
 
   </head>

BIN
public/favicon.ico
View File


BIN
public/favicon.png
View File


+ 77 - 17
src/components/footer/index.vue
View File 

@@ -4,37 +4,86 @@
 
       <div class="item">
 
         <p class="item-name">Shop</p>
 
         <ul class="item-links">
 
-          <li class="item-link"><a href="#">Phone Accessories</a></li>
 
-          <li class="item-link"><a href="#">Screen Protectors</a></li>
 
-          <li class="item-link"><a href="#">Tablet Accessories</a></li>
 
-          <li class="item-link"><a href="#">Car Accessories</a></li>
 
-          <li class="item-link"><a href="#">Cables and Chargers</a></li>
 
+          <li class="item-link">
 
+            <a href="https://www.ptcshop.com.au/collections/accessories"
 
+              >Phone Accessories</a
 
+            >
 
+          </li>
 
+          <li class="item-link">
 
+            <a
 
+              href="https://www.ptcshop.com.au/collections/iphone-case-screen-protector"
 
+              >Screen Protectors</a
 
+            >
 
+          </li>
 
+          <li class="item-link">
 
+            <a href="https://www.ptcshop.com.au/collections/accessories"
 
+              >Tablet Accessories</a
 
+            >
 
+          </li>
 
+          <li class="item-link">
 
+            <a href="https://www.ptcshop.com.au/collections/car-accessories"
 
+              >Car Accessories</a
 
+            >
 
+          </li>
 
+          <li class="item-link">
 
+            <a href="https://www.ptcshop.com.au/collections/cables"
 
+              >Cables and Chargers</a
 
+            >
 
+          </li>
 
         </ul>
 
       </div>
 
       <div class="item">
 
         <p class="item-name">Company</p>
 
         <ul class="item-links">
 
-          <li class="item-link"><a href="#">About Us</a></li>
 
-          <li class="item-link"><a href="#">Terms and Conditions</a></li>
 
-          <li class="item-link"><a href="#">Careers</a></li>
 
-          <li class="item-link"><a href="#">Franchise</a></li>
 
-          <li class="item-link"><a href="#">Blog</a></li>
 
-          <li class="item-link"><a href="#">Catalogues</a></li>
 
-          <li class="item-link"><a href="#">Privacy Policy</a></li>
 
-          <li class="item-link"><a href="#">Current Competitions</a></li>
 
+          <li class="item-link">
 
+            <a href="https://www.ptc.net.au/about-us/">About Us</a>
 
+          </li>
 
+          <li class="item-link">
 
+            <a href="https://www.ptc.net.au/terms-and-conditions/"
 
+              >Terms and Conditions</a
 
+            >
 
+          </li>
 
+          <li class="item-link">
 
+            <a href="https://www.ptc.net.au/careers/">Careers</a>
 
+          </li>
 
+          <li class="item-link">
 
+            <a href="https://www.ptc.net.au/franchise/">Franchise</a>
 
+          </li>
 
+          <li class="item-link">
 
+            <a href="https://www.ptc.net.au/blog/">Blog</a>
 
+          </li>
 
+          <li class="item-link">
 
+            <a href="https://www.ptc.net.au/category/catalogue/">Catalogues</a>
 
+          </li>
 
+          <li class="item-link">
 
+            <a href="https://www.ptc.net.au/privacy-policy/">Privacy Policy</a>
 
+          </li>
 
+          <li class="item-link">
 
+            <a href="https://www.ptc.net.au/iphone-13-giveaway-competition/"
 
+              >Current Competitions</a
 
+            >
 
+          </li>
 
         </ul>
 
       </div>
 
       <div class="item">
 
         <p class="item-name">PTC Care Plus</p>
 
         <ul class="item-links">
 
-          <li class="item-link"><a href="#">Feature</a></li>
 
-          <li class="item-link"><a href="#">Why PTC Care plus</a></li>
 
-          <li class="item-link"><a href="#">Subcriber Agreement</a></li>
 
+          <li class="item-link">
 
+            <a :href="buildUrl('feature')">Feature</a>
 
+          </li>
 
+          <li class="item-link">
 
+            <a :href="buildUrl('why')">Why PTC Care plus</a>
 
+          </li>
 
+          <li class="item-link">
 
+            <a href="https://www.ptc.net.au/terms-and-conditions/"
 
+              >Subcriber Agreement</a
 
+            >
 
+          </li>
 
         </ul>
 
       </div>
 
     </div>
 
     <div class="f2">
 
-      <i class="ico"></i>
 
+      <a class="ico" href="https://www.ndis.gov.au/" target="_blank"></a>
 
       <div>
 
         <p class="txt">Approved by</p>
 
         <p class="txt">NDIS marketing</p>
 
@@ -44,6 +93,13 @@
 
   </div>
 
 </template>
 
 
+<script setup lang="ts">
 
+function buildUrl(path: string) {
 
+  // return import.meta.env.BASE_URL + path
 
+  return '#'
 
+}
 
+</script>
 
+
 
 <style lang="scss">
 
 .page-footer {
 
   display: none;
 
@@ -70,6 +126,10 @@
 
       &-link {
 
         font-size: 32px;
 
         line-height: 58px;
 
+        transition: color 0.4s;
 
+        &:hover {
 
+          color: #cc271d;
 
+        }
 
       }
 
     }

+ 29 - 17
src/components/nav-bar/index.vue
View File 

@@ -24,20 +24,18 @@
 
                 >
 
               </li> -->
 
               <li class="nav-link">
 
-                <a href="https://www.ptcshop.com.au/" target="_blank"
 
-                  >ONLINE SHOP</a
 
-                >
 
+                <a href="https://www.ptcshop.com.au/">ONLINE SHOP</a>
 
+              </li>
 
+              <li class="nav-link">
 
+                <a href="https://www.ptc.net.au/">PTC Care Plus</a>
 
               </li>
 
-              <li class="nav-link">PTC Care Plus</li>
 
               <li class="nav-link">
 
-                <a href="https://www.ptc.net.au/store-locator/" target="_blank"
 
+                <a href="https://www.ptc.net.au/store-locator/"
 
                   >SOTRE LOCATION</a
 
                 >
 
               </li>
 
               <li class="nav-link">
 
-                <a href="https://www.ptc.net.au/contact-us/" target="_blank"
 
-                  >CONTACT US</a
 
-                >
 
+                <a href="https://www.ptc.net.au/contact-us/">CONTACT US</a>
 
               </li>
 
             </ul>
 
           </div>
 
@@ -82,15 +80,19 @@
 
               </p>
 
             </div>
 
             <div v-if="!state.userInfo.orders.length" class="p2">
 
-              <p class="txt">You have not purchased a member</p>
 
-              <button class="btn" @click="$router.push('/fill-order')">
 
-                BUY
 
-              </button>
 
+              <p class="txt">
 
+                You have not purchased a member{{
 
+                  state.userInfo.num_order_expired > 0
 
+                    ? `, $${state.rebuyDiscount} off for additional services`
 
+                    : ''
 
+                }}
 
+              </p>
 
+              <button class="btn" @click="handleBuy">BUY</button>
 
             </div>
 
             <div v-else class="p3">
 
               <div class="txt">
 
-                $10 off for additional services |
 
-                <strong class="primary">Buy now ></strong>
 
+                ${{ state.rebuyDiscount }} off for additional services |
 
+                <strong class="primary" @click="handleBuy">Buy now ></strong>
 
               </div>
 
               <div class="swiper">
 
                 <div class="swiper-wrapper">
 
@@ -147,7 +149,7 @@
 
             </router-link>
 
           </div>
 
           <ul class="dropdown-list">
 
-            <template v-if="state.userInfo.orders.length">
 
+            <template v-if="state.userInfo.num_order > 0">
 
               <li class="dropdown-item i1">
 
                 <router-link to="/repair/history"
 
                   >MY REPAIR REQUEST</router-link
 
@@ -164,7 +166,10 @@
 
               <router-link to="/invite"
 
                 >INVITE FRIENDS
 
                 <span v-if="state.coupon.coupon_amount" class="ptc-tag"
 
-                  >Get a ${{ state.coupon.coupon_amount }} coupon</span
 
+                  >Get ${{
 
+                    state.coupon.coupon_amount * state.coupon.coupon_num
 
+                  }}
 
+                  coupon</span
 
                 ></router-link
 
               >
 
             </li>
 
@@ -240,6 +245,10 @@ function onClickMine() {
 
   }
 
 }
 
 
+function handleBuy() {
 
+  router.push('/fill-order')
 
+}
 
+
 
 async function signOut() {
 
   await Dialog.confirm('TIPS', 'Are you sure you want to sign out?', {
 
     confirmText: 'YES',
 
@@ -550,7 +559,10 @@ async function signOut() {
 
     }
 
   }
 
   .p2 {
 
-    padding: 48px;
 
+    display: flex;
 
+    flex-direction: column;
 
+    justify-content: center;
 
+    padding: 0 48px;
 
     height: 224px;
 
     border-radius: 0 0 8px 8px;
 
     border: 2px solid #e9ebf0;

+ 10 - 1
src/pages/fill-order/StepOne.vue
View File 

@@ -76,7 +76,7 @@
 
           />
 
           <button class="input-btn" @click="checkDiscount">Submit</button>
 
         </div>
 
-        <div v-else class="coupon-wrap">
 
+        <div v-else-if="state.discount.discount_code" class="coupon-wrap">
 
           <div class="coupon">
 
             <p class="p1">PTC CARE PLUS</p>
 
             <p class="p2">{{ state.discount.name }}</p>
 
@@ -87,6 +87,11 @@
 
             <span class="primary" @click="reviseDiscount">Revise</span>
 
           </div>
 
         </div>
 
+        <div v-else class="input-wrap">
 
+          <div class="ptc-input readonly">
 
+            {{ state.discount.name }} -${{ state.discount.discount_amount }}
 
+          </div>
 
+        </div>
 
       </div>
 
     </div>
 
 
@@ -246,6 +251,10 @@ async function next() {
 
 
 .ptc-input {
 
   padding-right: 154px;
 
+  &.readonly {
 
+    display: flex;
 
+    align-items: center;
 
+  }
 
 }
 
 
 .input-btn {

+ 16 - 0
src/pages/fill-order/index.vue
View File 

@@ -25,6 +25,7 @@ import StepTwo from './StepTwo.vue'
 
 import StepThree from './StepThree.vue'
 
 import { state, resetState, getModelList } from './store'
 
 import { state as rootState, getCurrentOrder } from '@/store'
 
+import { getDiscountInfo } from '@/service/order'
 
 
 const step = ref(0)
 
 const Component = computed(() => [StepOne, StepTwo, StepThree][step.value])
 
@@ -45,6 +46,21 @@ if (renewal) {
 
     getModelList()
 
   })
 
 }
 
+
 
+const { orders = [], num_order_expired = 0 } = rootState.userInfo || {}
 
+const discountType =
 
+  orders.length || num_order_expired > 0
 
+    ? '3'
 
+    : ({ admin: '1', member: '2', renew: '3' } as any)[state.form.from]
 
+if (discountType) {
 
+  getDiscountInfo(discountType).then(
 
+    ({ results }) =>
 
+      (state.discount = {
 
+        name: ['店员折扣', '新人折扣', '多次购买折扣'][discountType - 1],
 
+        discount_amount: results.amount,
 
+      })
 
+  )
 
+}
 
 // 此处不直接传入resetState是有必要的，否则resetState在整个应用生命周期只会执行一次
 
 onUnmounted(() => resetState())

+ 14 - 9
src/pages/invite/index.vue
View File 

@@ -4,7 +4,7 @@
 
       <div class="award">
 
         <p class="award-name">Invite friends to get</p>
 
         <div class="award-worth">
 
-          <span class="num">- ${{ couponAmount }}</span>
 
+          <span class="num">- ${{ couponAmount() }}</span>
 
           <span class="txt">COUPON</span>
 
         </div>
 
         <p class="award-instruction">PTC offline store use</p>
 
@@ -12,11 +12,11 @@
 
       <div class="desc">
 
         <p class="desc-title"><i class="star"></i>Event Description</p>
 
         <p class="desc-content">
 
-          Friends who share your link will get a
 
-          <strong>${{ couponAmount }}</strong> coupon. If a friend buys a
 
-          membership, you will get a
 
-          <strong>${{ couponAmount }}</strong> coupon. after the purchase, which
 
-          can be used for the next membership fee payment and electronic
 
+          Friends who share your link will get
 
+          <strong>${{ couponAmount(true) }}</strong> coupon. If a friend buys a
 
+          membership, you will get
 
+          <strong>${{ couponAmount(true) }}</strong> coupon. after the purchase,
 
+          which can be used for the next membership fee payment and electronic
 
           accessories products.
 
         </p>
 
       </div>
 
@@ -116,11 +116,16 @@ export default defineComponent({
 
         0
 
       )
 
     },
 
-    couponAmount() {
 
-      return state.coupon.coupon_amount || 'N/A'
 
-    },
 
   },
 
   methods: {
 
+    couponAmount(total = false) {
 
+      const { coupon_amount, coupon_num } = state.coupon
 
+      return coupon_amount
 
+        ? total
 
+          ? coupon_amount * coupon_num
 
+          : coupon_amount
 
+        : 'N/A'
 
+    },
 
     async invite() {
 
       if (!this.emails) return Toast('Please enter email addresses')
 
       try {

+ 7 - 2
src/pages/login/index.vue
View File 

@@ -57,8 +57,13 @@
 
       </div>
 
       <div class="policy">
 
         By clicking “Sign in” you agree to PTC’s
 
-        <span class="primary">terms of use</span> and confirm that you’ve read
 
-        and acknowledged PTC’s <span class="primary">privacy policy</span>
 
+        <a class="primary" href="https://www.ptc.net.au/terms-and-conditions/"
 
+          >terms of use</a
 
+        >
 
+        and confirm that you’ve read and acknowledged PTC’s
 
+        <a class="primary" href="https://www.ptc.net.au/privacy-policy/"
 
+          >privacy policy</a
 
+        >
 
       </div>
 
     </div>
 
     <div

+ 13 - 9
src/pages/my-order/index.vue
View File 

@@ -12,8 +12,11 @@
 
       :class="{ pb24: item.status != 1 }"
 
     >
 
       <div
 
-        :class="{ pointer: item.status == 1 }"
 
-        @click="item.status == 1 && $router.push(`/order/${item.id}`)"
 
+        :class="{ pointer: item.status == 1 || item.status == 4 }"
 
+        @click="
 
+          ;(item.status == 1 || item.status == 4) &&
 
+            $router.push(`/order/${item.id}`)
 
+        "
 
       >
 
         <div class="cell-group border-bottom">
 
           <div class="cell">
 
@@ -23,13 +26,13 @@
 
                 class="ptc-tag"
 
                 :class="{
 
                   'not-paid': item.status == 0,
 
-                  paid: item.status == 1,
 
-                  canceled: item.stauts > 1,
 
+                  paid: item.status == 1 || item.status == 4,
 
+                  canceled: item.status == 2 || item.status == 3,
 
                 }"
 
                 >{{
 
                   item.status == 0
 
                     ? 'Not Paid'
 
-                    : item.status == 1
 
+                    : item.status == 1 || item.status == 4
 
                     ? 'Paid'
 
                     : 'Canceled'
 
                 }}</span
 
@@ -51,12 +54,13 @@
 
           <div class="cell">
 
             <span class="cell__label">Version</span>
 
             <span class="cell__value"
 
-              >{{ item.product_name }}({{ item.end_time }} Expires)</span
 
+              >{{ item.product_name
 
+              }}{{ item.end_time ? `(${item.end_time}  Expires)` : '' }}</span
 
             >
 
           </div>
 
         </div>
 
         <div class="cell-group cell-group--compact">
 
-          <template v-if="item.status < 2">
 
+          <template v-if="[0, 1, 4].includes(+item.status)">
 
             <div v-if="item.payment_open" class="cell">
 
               <span class="cell__label">Activation fee</span>
 
               <span class="cell__value">${{ item.payment_open }}</span>
 
@@ -72,13 +76,13 @@
 
               >
 
             </div>
 
           </template>
 
-          <div class="cell" :class="{ mt48: item.stauts < 2 }">
 
+          <div class="cell" :class="{ mt48: [0, 1, 4].includes(+item.status) }">
 
             <span class="cell__label">Cost</span>
 
             <span class="cell__value bold">${{ item.payment_amount }}</span>
 
           </div>
 
         </div>
 
       </div>
 
-      <div v-if="item.status != 1" class="button-group">
 
+      <div v-if="![1, 4].includes(+item.status)" class="button-group">
 
         <template v-if="item.status == 0">
 
           <button class="ptc-button" @click="handlePay(item.stripe_pay_link)">
 
             Pay {{ item.left_pay_time }}

+ 6 - 0
src/service/order.ts
View File 

@@ -75,3 +75,9 @@ export function bindIMEI(data: { id: number; imei: string }) {
 
 export function unsubscribe(id: number) {
 
   return request.post('/order/unSubscribe', { id })
 
 }
 
+
 
+export function getDiscountInfo(type: string) {
 
+  return request.get('/buy/discount', {
 
+    params: { type },
 
+  })
 
+}

+ 1 - 0
src/service/types/user.d.ts
View File 

@@ -53,6 +53,7 @@ declare namespace ApiUser {
 
       need_change: 0 | 1
 
       num_gift_card: number
 
       num_order: number
 
+      num_order_expired: number
 
       num_repair: number
 
       qrcode: string
 
       orders: {

+ 5 - 1
src/store.ts
View File 

@@ -1,6 +1,6 @@
 
 import { reactive } from 'vue'
 
 import * as api from '@/service/user'
 
-import { getOrderInfo } from '@/service/order'
 
+import { getOrderInfo, getDiscountInfo } from '@/service/order'
 
 
 export const state = reactive({
 
   bgWhite: false,
 
@@ -8,6 +8,7 @@ export const state = reactive({
 
   // 拉新优惠券信息
 
   coupon: {} as any,
 
   currentOrder: null as any,
 
+  rebuyDiscount: 0, // 二次购买折扣
 
 })
 
 
 export async function getUserInfo(reportError?: boolean) {
 
@@ -28,6 +29,9 @@ export async function logout() {
 
 
 export function bootstrap() {
 
   api.getInviteCoupon().then(({ results }) => (state.coupon = results))
 
+  getDiscountInfo('3').then(
 
+    ({ results }) => (state.rebuyDiscount = +results.amount)
 
+  )
 
   return getUserInfo(false)
 
 }