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

<template>
  <div class="step-2">
    <div class="ptc-block">
      <div class="ptc-inner">
        <p class="ptc-label">Version & Price</p>
        <div class="detail">
          <strong class="s1">Lite</strong>
          <span style="font-size: 0"
            ><strong class="s2">$99</strong
            ><span class="s3">{{
              state.form.subscribe_type === 'year' ? 'Annual' : 'Monthly'
            }}</span></span
          >
          <strong class="s4" @click="$router.back()">Modify ></strong>
        </div>
      </div>
    </div>
    <div class="ptc-block">
      <div class="ptc-inner">
        <p class="ptc-label">Choose a mobile phone brand</p>
        <PtcRadioGroup
          v-model="state.form.brand_id"
          class="device-list"
          @change="onSelectBrand"
        >
          <PtcRadio
            v-for="brand of state.brandList"
            :key="brand.id"
            class="device-item"
            :value="brand.id"
          >
            <img class="device-img" />
            <p class="device-name">{{ brand.name }}</p>
          </PtcRadio>
        </PtcRadioGroup>
      </div>
    </div>
    <template v-if="state.form.brand_id">
      <div class="ptc-block">
        <div class="ptc-inner">
          <p class="ptc-label">Choose phone model</p>
          <PtcRadioGroup
            v-model="state.form.phone_id"
            class="device-list"
            @change="onSelectModel"
          >
            <PtcRadio
              v-for="model of state.modelList"
              :key="model.id"
              class="device-item"
              :value="model.id"
            >
              <img class="device-img" />
              <p class="device-name">{{ model.name }}</p>
            </PtcRadio>
          </PtcRadioGroup>
        </div>
      </div>
    </template>
  </div>
</template>

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

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

function onSelectBrand() {
  state.form.phone_id = ''
  getModelList()
}

function onSelectModel() {
  setTimeout(() => emit('next'), 200)
}
</script>

<style lang="scss">
.device {
  &-list {
    display: flex;
    flex-wrap: wrap;
    width: 680px;
    margin: auto;
  }

  &-item {
    padding-top: 24px;
    width: 322px;
    height: 322px;
    text-align: center;
    font-size: 40px;
    font-weight: bold;
    &:nth-child(2n + 1) {
      margin-right: 34px;
    }
    &:nth-child(n + 3) {
      margin-top: 36px;
    }
  }

  &-img {
    margin-bottom: 18px;
    width: 200px;
    height: 200px;
    background: teal;
  }
}
</style>