
<template>
    <div>
        <h-steps :active="value" inactiveIcon="cartquan">
            <h-step :stepStyle="{ fontWeight: 600 }">买家下单</h-step>
            <h-step :stepStyle="{ fontWeight: 600 }">商家接单</h-step>
            <h-step :stepStyle="{ fontWeight: 600 }">买家提货</h-step>
            <h-step :stepStyle="{ fontWeight: 600 }">交易完成</h-step>
        </h-steps>
        <h-button @click="aa">下一步</h-button>
        <h-steps inactiveIcon="cartquan" direction="vertical">
            <h-step :stepStyle="{ fontWeight: 600, color: 'red' }">
                <h3 class="title">1、消费者下单</h3>
                <p class="desc">每天商品下单时间：00:00-23:00；</p>
            </h-step>
            <h-step :stepStyle="{ fontWeight: 600, color: 'red' }">
                <h3 class="title">2. 物流配送 </h3>
                <p class="desc">每天16:00之前，物流配送将消费者昨日下单的商品，配送到相应下单的门店； </p>
            </h-step>
            <h-step :stepStyle="{ fontWeight: 600, color: 'red' }">
                <h3 class="title">3. 消费者自提 </h3>
                <p class="desc">每天16:00之后（具体根据门店不同，到货时间不同)，消费者可以到相应的门店提货； </p>
            </h-step>
            <h-step :stepStyle="{ fontWeight: 600, color: 'red' }">
                <h3 class="title">4. 100%售后 </h3>
                <p class="desc">消费者遇到任何问题，可以直接与下单的门店沟通，享受100%售后服务； </p>
            </h-step>
            <h-step :stepStyle="{ fontWeight: 600, color: 'red' }">
                <h3 class="title">5. 兴盛优选全国热线  </h3>
                <p class="desc">TEL：4008889997 </p>
            </h-step>
        </h-steps>
    </div>
</template>

<script>
import hButton from '../button/index';
import { hSteps, hStep } from './index.js'
export default {
    name: "step-demo",
    data() {
        return {
            type: 'primary',
            value: 0
        }
    },
    components: {
        hSteps, 
        hStep,
        hButton
    },
    methods: {
        aa() {
            if ( this.value >= 3 ) {
                this.value = 0;
            } else {
                this.value = this.value + 1;
            }

        }
    }
}
</script>
<style>
.title{
    color: #000;
    margin: 0;
    font-size: 14px;
    font-weight: normal;
}
.desc {
    margin: 0;
}
</style>