studytour-front/pages_order/order/orderConfirm/timeOptionsSelect.vue

<template>
  <view class="flex option" :style="style">
    <view 
      :class="['option-item', item.id === selected ? 'is-active' : '']" 
      v-for="item in options" 
      :key="item.id"
      @click="selected = item.id"
    >
      <view class="option-item-content">
        <view class="flex time">
          <view class="time-val">{{ item.startDate }}</view>
          <view class="time-split">-</view>
          <view class="time-val">{{ item.endDate }}</view>
        </view>
        <view class="flex price">
          <view class="price-val">
            <text>¥</text>
            <text class="highlight">{{ priceInt(item.currentPrice) }}</text>
            <text>{{ `${priceFrac(item.currentPrice)}起` }}</text>
          </view>
          <view class="price-bef" v-if="item.originalPrice">¥<text>{{ item.originalPrice }}</text></view>
        </view>
      </view>
      <view class="flex option-item-bottom">
        {{ item.id === selected ? '已选择' : '点击选择' }}
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      value: {
        type: String | Number,
        default: null
      },
      options: {
        type: Array,
        default() {
          return []
        }
      },
      style: {
        type: String,
        default: ''
      },
    },
    computed: {
      selected: {
        set(val) {
          this.$emit('input', val)
        },
        get() {
          return this.value
        }
      },
    },
    methods: {
      priceInt(currentPrice) {
        return parseInt(currentPrice)
      },
      priceFrac(currentPrice) {
        return (currentPrice % this.priceInt(currentPrice)).toFixed(2).slice(1)
      },
    },
  }
</script>

<style scoped lang="scss">

  .option {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    column-gap: 16rpx;

    &-item {
      min-width: 238rpx;
      flex: none;
      font-size: 0;
      border: 2rpx solid #EEEEEE;
      border-radius: 12rpx;
      overflow: hidden;

      &-content {
        padding: 16rpx 12rpx;
      }

      &-bottom {
        padding: 12rpx 0;
        font-size: 28rpx;
        font-weight: 500;
        color: #191919;
        background: #E4E7EB;
      }

      &.is-active {
        background: #E9F8FF;
        border-color: #00A9FF;

        .option-item-bottom {
          color: #FFFFFF;
          background: #00A9FF;
        }
      }
    }
  }

  .time {
    column-gap: 8rpx;

    &-val {
      font-size: 28rpx;
      font-weight: 500;
      color: #000000;
    }

    &-split {
      font-size: 24rpx;
      color: #8B8B8B;
    }
  }

  .price {
    margin-top: 4rpx;
    justify-content: flex-start;
    align-items: baseline;
    column-gap: 8rpx;
    white-space: nowrap;

    &-val {
      font-size: 24rpx;
      font-weight: 500;
      color: #FF4800;

      .highlight {
        font-size: 32rpx;
      }
    }

    &-bef {
      text-decoration: line-through;
      font-size: 24rpx;
      color: #8B8B8B;
    }
  }
  
</style>