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">Annual</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.brand"
          class="device-list"
          @change="state.model = ''"
        >
          <PtcRadio
            v-for="brand of brandList"
            :key="brand.name"
            class="device-item"
            :value="brand.name"
          >
            <img class="device-img" />
            <p class="device-name">{{ brand.name }}</p>
          </PtcRadio>
        </PtcRadioGroup>
      </div>
    </div>
    <template v-if="state.brand">
      <div class="ptc-block">
        <div class="ptc-inner">
          <p class="ptc-label">Choose phone model</p>
          <PtcRadioGroup
            v-model="state.model"
            class="device-list"
            @change="onSelectModel"
          >
            <PtcRadio
              v-for="model of modelList"
              :key="model.name"
              class="device-item"
              :value="model.name"
            >
              <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 } from './store'

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

const brandList = [
  { name: 'iPhone', img: '' },
  { name: 'iPad', img: '' },
  { name: 'Samsung', img: '' },
  { name: 'Xiaomi', img: '' },
]
const modelList = [
  { name: 'iPhone13 Pro', img: '' },
  { name: 'iPhone13', img: '' },
  { name: 'iPhone12', img: '' },
  { name: 'iPhoneSE', img: '' },
]

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>