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"
          class="version-list"
          :class="{ loose: state.productList.length === 2 }"
        >
          <div
            v-for="product of state.productList"
            :key="product.id"
            class="version-wrap"
          >
            <PtcRadio
              class="version"
              :value="product.id"
              :disabled="!!state.form.renewal"
              :style="{ fontSize: calcFZ(product.name) }"
            >
              <i
                class="version-icon"
                :style="{ backgroundImage: `url(${product.image})` }"
              ></i>
              <p class="version-name ellipsis-2">{{ product.name }}</p>
            </PtcRadio>
          </div>
        </PtcRadioGroup>
        <div
          class="version-desc"
          :class="{
            second:
              state.productList[1] &&
              state.form.product_id === state.productList[1].id,
          }"
        >
          {{ getters.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">${{ getters.selectedProduct.amount_year }}</span>
            <span class="name">Annual</span>
            <span class="ptc-tag"
              >-{{ getters.selectedProduct.better_than_monthly }}% OFF</span
            >
          </PtcRadio>
          <PtcRadio class="method" value="month">
            <span class="cost"
              >${{ getters.selectedProduct.amount_month }}</span
            >
            <span class="name">
              Monthly<template v-if="+getters.selectedProduct.amount_month_open"
                >&nbsp; Activation fee ${{
                  getters.selectedProduct.amount_month_open
                }}</template
              ></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="!state.discount" class="input-wrap pr">
          <input
            v-model="state.form.discount_code"
            class="ptc-input"
            placeholder="Enter promotional code"
          />
          <button class="input-btn" @click="checkDiscount">Submit</button>
        </div>
        <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>
            <p class="p3">- ${{ state.discount.discount_amount }}</p>
          </div>
          <div class="action">
            <span class="code">{{ state.form.discount_code }}</span>
            <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>

    <div class="total">
      <div v-if="getters.cost" class="ptc-inner">
        <p>
          total<strong>${{ getters.cost }}</strong>
        </p>
        <p v-if="state.discount" class="highlight">
          (${{ state.discount.discount_amount }} discounted)
        </p>
      </div>
    </div>
    <div class="ptc-button-group">
      <div class="ptc-inner">
        <button
          class="ptc-button"
          :class="{ disabled: !state.form.subscribe_type }"
          @click="next"
        >
          NEXT
        </button>
      </div>
    </div>
  </div>
</template>

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

const emit = defineEmits<{
  (e: 'go', delta?: number): void
}>()

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

function reviseDiscount() {
  state.discount = null
  state.form.discount_code = ''
}

function calcFZ(text: string) {
  const scale = Math.max(Math.min(5 / text.length, 1), 24 / 56)
  return 0.56 * scale + 'rem'
}

async function next() {
  if (!state.form.subscribe_type)
    return Toast('Please choose a subscription method')
  if (!state.brandList.length) await getBrandList()
  emit('go')
  if (!state.discount) state.form.discount_code = ''
}
</script>

<style lang="scss" scoped>
.version-list {
  display: flex;
  flex-wrap: wrap;
}
.version-wrap {
  display: flex;
  margin-bottom: 32px;
  width: 33.33%;
  &:nth-child(3n - 1) {
    justify-content: center;
  }
  &:nth-child(3n) {
    justify-content: flex-end;
  }
  .loose & {
    width: 256px;
  }
}
.version {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 212px;
  height: 212px;
  font-size: 56px;
  font-weight: bold;
  &:nth-child(3n) {
    margin-right: 0;
  }

  &-icon {
    width: 36px;
    height: 36px;
    background-repeat: no-repeat;
    background-size: contain;
  }

  &-name {
    margin-top: 18px;
    padding: 0 8px;
    text-align: center;
  }

  &-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;
    // }
    // &.second::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;
  &.readonly {
    display: flex;
    align-items: center;
  }
}

.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;
  line-height: 1;

  .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>