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 ellipsis" :title="getters.selectedProduct.name">{{
            getters.selectedProduct.name
          }}</strong>
          <span class="fls0" style="font-size: 0"
            ><strong class="s2">${{ getters.cost }}</strong
            ><span class="s3">{{
              state.form.subscribe_type === 'year' ? 'Annual' : 'Monthly'
            }}</span></span
          >
          <strong class="s4 fls0" @click="$emit('go', -1)">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"
            :disabled="!!state.form.renewal"
          >
            <i
              :class="[
                'device-img',
                [, 'd-iphone', 'd-ipad', 'd-samsung'][brand.id] || 'd-other',
              ]"
            />
            <p class="device-name">{{ brand.name }}</p>
          </PtcRadio>
        </PtcRadioGroup>
      </div>
    </div>
    <div v-if="state.modelList.length" class="ptc-wrapper">
      <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">
            <PtcRadio
              v-for="model of state.modelList"
              :key="model.id"
              class="device-item"
              :value="model.id"
              :disabled="!!state.form.renewal"
              :style="{
                fontSize: $util.calcFZ({
                  text: model.name,
                  baseLength: 12,
                  baseSize: 40,
                }),
              }"
            >
              <img class="device-img" :src="model.image" />
              <p class="device-name">{{ model.name }}</p>
            </PtcRadio>
          </PtcRadioGroup>
        </div>
      </div>
      <div class="ptc-button-group">
        <div class="ptc-inner">
          <button
            class="ptc-button"
            :class="{ disabled: !state.form.phone_id }"
            @click="$emit('go')"
          >
            NEXT
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

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

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

// const showNextBtn = state.form.brand_id && state.form.phone_id

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

function onSelectModel() {
  setTimeout(() => emit('go'), 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 {
    display: inline-block;
    vertical-align: top;
    margin-bottom: 18px;
    width: 200px;
    height: 200px;
    background-color: #eee;
    background-size: contain;
    &.d-iphone {
      background-image: url(@img/d-iphone.png);
    }
    &.d-ipad {
      background-image: url(@img/d-ipad.png);
    }
    &.d-samsung {
      background-image: url(@img/d-samsung.png);
    }
    &.d-other {
      background-image: url(@img/d-other.png);
    }
  }

  &-name {
    padding: 0 24px;
  }
}
</style>