vue-reverse/examples/components/product/receive.vue

<template>
  <div>
    <RadioGroup
      v-model="send_type"
      @on-change="e => onChange(e, 'receive_type')">
      <Radio class="radio" :label="0">
        次日达
      </Radio>
      <Radio class="radio" :label="1">
        下单
        <InputNumber
          v-model="send_days"
          :min="2"
          :precision="0"
          @on-change="e => onChange(e, 'receive_days')"></InputNumber> 日送达
      </Radio>
      <Radio class="radio" :label="2">
        自定义配送时间
        <Input
          :maxlength="18"
          v-model="send_time"
          @input="e => onChange(e, 'receive_time')"></Input>
      </Radio>
    </RadioGroup>
    <error :text="error[data.keyword]" />
  </div>
</template>
<script>
export default {
  props: ['data', 'value', 'option', 'error'],
  data () {
    return {
      send_type: null,
      send_days: null,
      send_time: '',
      receive_time: '',
    }
  },
  methods: {
    onChange (e, keyword) {
      if (this.send_type === 1) this.receive_time = this.send_days
      if (this.send_type === 2) this.receive_time = this.send_time
      this.$hub.$emit(this.data.hub, {
        type: 'value',
        payload: Object.assign(this.value, {
          receive_type: this.send_type,
          receive_time: this.receive_time,
        }),
      })
    },
  },
  mounted () {
    this.send_type = this.value[this.data.keyword]
    if (!this.value[this.data.keyword]) return
    if (this.value[this.data.keyword] === 1) {
      this.send_days = Number(this.value.receive_time)
    } else {
      this.send_time = this.value.receive_time
    }
  },
}
</script>
<style lang="scss" scoped>

.radiogroup {
  display: flex;
  flex-direction: column;
  padding: 10px 0;
}

.radio {
  display: block;
  margin-bottom: 4px;
}

</style>