123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192 |
- <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">{{ info.phone_imei }}</p>
- <p class="l4">
- <button class="ptc-button ptc-button--stroke">Renewal</button>
- </p>
- <p class="l5" @click="$router.push('/renewal')">Renewal management ></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">{{ info.title }}</p>
- <p class="benefit-desc">Avaliable 1</p>
- <p class="benefit-sup">
- Member price:<span class="highlight">$35</span>
- </p>
- <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>
- <p class="benefit-sup">Available after 2021/06/01</p>
- <button class="ptc-button">Nearby shops</button>
- </div>
- <div class="benefit benefit-c">
- <p class="benefit-name">Technical Support</p>
- <p class="benefit-desc">Available throughout the year</p>
- <button class="ptc-button">Contact us</button>
- </div>
- <div class="benefit benefit-d">
- <p class="benefit-name">Birthday Gift</p>
- <p class="benefit-desc">
- Pick up at the store in the month of your birthday, you can only
- enjoy it once
- </p>
- </div>
- <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"
- @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 {
- 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 {
- 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;
- width: 248px;
- height: 68px;
- font-size: 32px;
- }
- }
- }
- </style>
|