vue-ptc/src/pages/fill-order/StepOne.vue

<template>
  <div class="step-1 ptc-wrapper">
    <div class="ptc-block">
      <div class="ptc-inner">
        <p class="ptc-label">Choose a version</p>
        <PtcRadioGroup v-model="state.form.product_id" style="display: flex">
          <PtcRadio
            v-for="product of state.productList"
            :key="product.id"
            class="version"
            :value="product.id"
          >
            <i :class="`icon-${1 ? 'lite' : 'pro'}`"></i>
            <span class="mt18">{{ product.name }}</span>
          </PtcRadio>
        </PtcRadioGroup>
        <div
          class="version-desc"
          :class="{ pro: state.form.product_id === 'pro' }"
        >
          {{ selectedProduct.remark }}
        </div>
      </div>
    </div>
    <div class="ptc-block">
      <div class="ptc-inner">
        <p class="ptc-label">Choose a subscription method</p>
        <PtcRadioGroup v-model="state.form.subscribe_type">
          <PtcRadio class="method" value="year">
            <span class="cost">${{ selectedProduct.amount_year }}</span>
            <span class="name">Annual</span>
            <span class="ptc-tag"
              >-{{ selectedProduct.better_than_monthly * 100 }}% OFF</span
            >
          </PtcRadio>
          <PtcRadio class="method" value="month">
            <span class="cost">${{ selectedProduct.amount_month }}</span>
            <span class="name">
              Monthly&nbsp; Activation fee ${{
                selectedProduct.amount_month_open
              }}</span
            >
          </PtcRadio>
        </PtcRadioGroup>
      </div>
    </div>
    <div class="ptc-block">
      <div class="ptc-inner">
        <p class="ptc-label">Do you have a discount code?</p>
        <div v-if="!showCoupon" class="input-wrap pr">
          <input
            v-model="state.form.discount_code"
            class="ptc-input"
            placeholder="Enter promotional code"
          />
          <button class="input-btn" @click="checkDiscount">sbumit</button>
        </div>
        <div v-else class="coupon-wrap">
          <div class="coupon">
            <p class="p1">PTC CARE PLUS</p>
            <p class="p2">NEWCOMER DISCOUNT</p>
            <p class="p3">- $10</p>
          </div>
          <div class="action">
            <span class="code">{{ state.form.discount_code }}</span>
            <span class="primary" @click="reviseDiscount">Revise</span>
          </div>
        </div>
      </div>
    </div>

    <div class="total">
      <div class="ptc-inner">
        <p>
          total<strong>${{ cost }}</strong>
        </p>
        <p class="highlight">($10 discounted)</p>
      </div>
    </div>
    <div class="ptc-button-group">
      <div class="ptc-inner">
        <button class="ptc-button" @click="next">NEXT</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { PtcRadioGroup, PtcRadio } from '@/components/radio'
import { state, getBrandList } from './store'
import * as api from '@/service/order'
import Toast from '@/components/toast'

const emit = defineEmits<{
  (e: 'next'): void
}>()

const showCoupon = ref(false)
const selectedProduct = computed(() =>
  state.productList.find(item => item.id === state.form.product_id)
)
const cost = computed(() => {
  const { amount_year, amount_month, amount_month_open } = selectedProduct.value
  switch (state.form.subscribe_type) {
    case 'year':
      return amount_year
    case 'month':
      return amount_month + amount_month_open
    default:
      return ''
  }
})

async function checkDiscount() {
  if (!state.form.discount_code) return Toast('Please enter promotional code')
  try {
    const { results } = await api.checkDiscount(state.form.discount_code)
    showCoupon.value = true
  } catch {
    state.form.discount_code = ''
  }
}

function reviseDiscount() {
  showCoupon.value = false
  state.form.discount_code = ''
}

async function next() {
  if (!state.brandList.length) await getBrandList()
  emit('next')
}
</script>

<style lang="scss" scoped>
.version {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-right: 64px;
  width: 212px;
  height: 212px;
  font-size: 56px;
  font-weight: bold;

  .mt18 {
    margin-top: 18px;
  }

  &-desc {
    position: relative;
    margin-top: 32px;
    padding: 28px 24px;
    line-height: 40px;
    font-size: 28px;
    color: #193059;
    background: #f2f5fb;
    &::before {
      content: '';
      position: absolute;
      left: 88px;
      top: 0;
      transform: translateY(-100%);
      border-style: solid;
      border-width: 0 12px 14px;
      border-color: #f2f5fb transparent;
    }
    &.pro::before {
      left: 88px + 276px;
    }
  }
}

.method {
  display: flex;
  align-items: center;
  padding: 0 38px;
  height: 130px;
  + .method {
    margin-top: 48px;
  }

  .cost {
    font-size: 56px;
    font-weight: bold;
  }
  .name {
    margin-left: 20px;
    font-size: 32px;
  }
}

.ptc-input {
  padding-right: 154px;
}

.input-btn {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 154px;
  background: #1a3059;
  border-radius: 0px 8px 8px 0px;
  color: #fff;
  font-size: 32px;
  &:active {
    background: $primary-color-lighten;
  }
}

.total {
  padding-left: 36px;
  font-size: 32px;
  color: #333;
  strong {
    margin-left: 8px;
    font-size: 40px;
  }
}

.coupon {
  @include icon('@img/coupon-s.png', 488px, 224px);
  margin-bottom: 48px;
  padding-top: 22px;
  text-align: center;
  font-size: 28px;
  font-weight: bold;

  .p1 {
    color: #9aa8c5;
  }
  .p2 {
    margin: 16px 0 34px;
    color: $primary-color;
  }
  .p3 {
    font-size: 56px;
    color: $primary-color;
  }
}
.action {
  font-size: 32px;
  color: #666;
  .code {
    margin-right: 64px;
  }
}

.highlight {
  margin-top: 4px;
  color: $danger-color;
}
</style>