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

<template>
  <div class="step-one">
    <div class="ptc-block">
      <p class="ptc-label">Choose a version</p>
      <PtcRadioGroup v-model="state.product" style="display: flex">
        <PtcRadio class="version" value="lite">
          <i class="icon-lite"></i>
          <span class="mt18">Lite</span>
        </PtcRadio>
        <PtcRadio class="version" value="pro">
          <i class="icon-pro"></i>
          <span class="mt18">Pro</span>
        </PtcRadio>
      </PtcRadioGroup>
      <div class="version-desc" :class="{ pro: state.product === 'pro' }">
        Introduction of member products，Introduction of member products
      </div>
    </div>
    <div class="ptc-block">
      <p class="ptc-label">Choose a subscription method</p>
      <PtcRadioGroup v-model="state.type">
        <PtcRadio class="method" :value="1">
          <span class="cost">$99</span>
          <span class="name">Annual</span>
          <span class="ptc-tag">-25% OFF</span>
        </PtcRadio>
        <PtcRadio class="method" :value="2">
          <span class="cost">$12.5</span>
          <span class="name"> Monthly&nbsp; Activation fee $20</span>
        </PtcRadio>
      </PtcRadioGroup>
    </div>
    <div class="ptc-block">
      <p class="ptc-label">Do you have a discount code?</p>
      <div v-if="!showCoupon" class="input-wrap pr">
        <input
          v-model="state.couponCode"
          class="ptc-input"
          placeholder="Enter promotional code"
        />
        <button class="input-btn" @click="showCoupon = true">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">87889122</span>
          <span class="ptc-text" @click="showCoupon = false">Revise</span>
        </div>
      </div>
    </div>

    <div class="total">
      <p>total<strong>$99</strong></p>
      <p class="highlight">($10 discounted)</p>
    </div>
    <button class="ptc-button block-button">NEXT</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { PtcRadioGroup, PtcRadio } from '@/components/radio'
import { state } from './store'

const showCoupon = ref(false)
</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 {
  margin-bottom: 48px;
  padding-left: 36px;
  font-size: 32px;
  color: #333;
  strong {
    margin-left: 8px;
    font-size: 40px;
  }
}
.block-button {
  display: block;
  margin: auto;
  width: 678px;
}

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