123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241 |
- <template>
- <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">{{ info.product_name }}</strong
- >{{ info.start_time }} to {{ info.end_time }}
- </div>
- <p class="l2">{{ info.phone_info }}</p>
- <p class="l3">
- <span v-if="info.phone_imei">{{ info.phone_imei }}</span>
- <router-link
- v-else
- class="primary bold"
- :to="`/imei/bind?id=${info.id}`"
- >BIND IMEI ></router-link
- >
- </p>
- <p
- v-if="
- info.subscribe_type != 3 && info.status == 1 && info.cancel_sub != 1
- "
- class="l5"
- >
- <router-link :to="`/renewal?id=${$route.params.id}`">
- Renewal management >
- </router-link>
- </p>
- <p
- v-else-if="
- info.subscribe_type == 3 && info.status == 1 && info.can_renewal
- "
- class="l4"
- >
- <button
- class="ptc-button ptc-button--stroke"
- @click="$router.push(`/fill-order?renewal=${info.id}`)"
- >
- Renewal
- </button>
- </p>
- </div>
- </div>
- <div class="ptc-block">
- <div class="ptc-inner">
- <div
- v-for="(item, index) of info.rights"
- :key="index"
- class="benefit"
- :style="{ backgroundImage: `url(${item.icon})` }"
- >
- <p class="benefit-name">{{ item.title }}</p>
- <p class="benefit-desc">
- {{ item.type == 1 ? `Available ${item.left_times}` : item.remark }}
- </p>
- <p v-if="item.type == 1" class="benefit-sup">
- <template v-if="item.available">
- Member price:<span class="highlight">${{ item.price }}</span>
- </template>
- <template v-else-if="item.left_times > 0"
- >Available after {{ item.next_available_at }}</template
- >
- </p>
- <button
- v-if="item.available && getButtonText(item)"
- class="ptc-button"
- @click="onClickButton(item)"
- >
- {{ getButtonText(item) }}
- </button>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script>
- import { defineComponent } from 'vue'
- import { state, getCurrentOrder } from '@/store'
- export default defineComponent({
- name: 'OrderDetail',
- async beforeRouteEnter(to) {
- return await getCurrentOrder(to.params.id)
- },
- async beforeRouteUpdate(to) {
- return await getCurrentOrder(to.params.id)
- },
- computed: {
- info() {
- return state.currentOrder
- },
- },
- methods: {
- getButtonText(item) {
- switch (+item.type) {
- case 1:
- return +item.need_apply ? 'Apply' : 'Find Nearby Store'
- case 2:
- return item.button_type === 'contact_us'
- ? 'Contact us'
- : item.button_type && item.button_name
- case 4:
- return +item.receive_method === 2 ? 'Find Nearby Store' : 'Send to me'
- default:
- return ''
- }
- },
- onClickButton(item) {
- switch (+item.type) {
- case 1:
- return +item.need_apply
- ? this.$router.push(`/repair/appointment?right_id=${item.id}`)
- : window.open('https://www.ptc.net.au/store-locator/')
- case 2:
- return item.button_type === 'contact_us'
- ? window.open('https://www.ptc.net.au/contact-us/')
- : item.button_type && (location.href = item.button_link)
- case 4:
- return +item.receive_method === 2
- ? window.open('https://www.ptc.net.au/store-locator/')
- : this.$router.push({
- path: '/mailing',
- query: {
- right_id: item.id,
- right_name: item.title,
- },
- })
- default:
- return ''
- }
- },
- },
- })
- </script>
- <style lang="scss">
- .p-benefits {
- .l1 {
- display: flex;
- font-size: 28px;
- color: #90a0c0;
- strong {
- margin: 0 20px 0 10px;
- }
- }
- .l2 {
- margin-top: 48px;
- line-height: 56px;
- font-size: 40px;
- font-weight: bold;
- color: #333;
- text-align: center;
- }
- .l3 {
- margin-top: 8px;
- line-height: 40px;
- font-size: 28px;
- color: #999;
- text-align: center;
- }
- .l4 {
- margin: 64px 0 24px;
- font-size: 0;
- text-align: center;
- button {
- margin: auto;
- width: 412px;
- height: 68px;
- font-size: 32px;
- }
- }
- .l5 {
- margin-top: 32px;
- line-height: 44px;
- font-weight: bold;
- font-size: 32px;
- color: $primary-color;
- text-align: center;
- }
- .benefit {
- padding-left: 100px;
- padding-bottom: 46px;
- background-repeat: no-repeat;
- background-position: 0 0;
- background-size: 64px 64px;
- // &-a {
- // background-image: url(@img/benefit0.png);
- // }
- // &-b {
- // background-image: url(@img/benefit1.png);
- // }
- // &-c {
- // background-image: url(@img/benefit2.png);
- // }
- // &-d {
- // background-image: url(@img/benefit3.png);
- // }
- // &-e {
- // background-image: url(@img/benefit4.png);
- // }
- + .benefit {
- padding-top: 48px;
- background-position: 0 48px;
- @include thin-border(top);
- }
- &-name {
- line-height: 56px;
- font-size: 40px;
- font-weight: bold;
- color: #1a1a1a;
- }
- &-desc {
- margin-top: 24px;
- line-height: 44px;
- font-size: 32px;
- color: #1a1a1a;
- }
- &-sup {
- margin-top: 8px;
- line-height: 44px;
- font-size: 32px;
- color: #999;
- }
- .ptc-button {
- margin-top: 24px;
- padding: 0 24px;
- width: auto;
- min-width: 248px;
- height: 68px;
- font-size: 32px;
- }
- }
- }
- </style>
|