info.vue

<template>
  <div id="_info">
    <div class="step_1" v-if="step == 1">
      <v-container grid-list-md text-xs-center>
        <v-layout row wrap>
          <v-flex xs12>
            <div class="_container">
              <i class='iconfont icon-mobilefill' id="phone_icon"></i>
              <div class="title">
                <h2>您还没有绑定手机号</h2>
                <h4>绑定手机号，带给您不一样的体验</h4>
              </div>
            </div>
          </v-flex>
          <v-flex xs12>
            <div class="text-xs-center btn">
              <v-btn round color="primary" @click="setStep" dark>绑定手机号</v-btn>
            </div>
          </v-flex>
        </v-layout>
      </v-container>
    </div>
    
    <div class="step_2" v-if="step == 2"> 
      <v-layout row wrap>
        <v-flex xs12>
          <div class="input">
            <input type="text" name="keyword" autocomplete="off" class="margin_top_40 padding_left_120 padding_right_180" placeholder="请输入手机号码"/>
            <i class='iconfont icon-mobilefill' id="_phone_icon"></i>
            <div class="sendCode">发送验证码</div>
          </div>
          <div class="input">
            <input type="text" name="keyword" autocomplete="off" class="margin_top_2 padding_left_120 padding_right_180" placeholder="请输入短信验证码"/>
            <i class='iconfont icon-lock' id="_phone_icon"></i>
          </div>
        </v-flex>
        <v-flex xs12>
          <div class="text-xs-center btn">
            <v-btn round color="primary" @click="setStep" dark>绑定手机号</v-btn>
          </div>
        </v-flex>
      </v-layout>
    </div>
    <div class="step_3" v-if="step == 3"> 
      <v-layout row wrap>
        <v-flex xs12>
          <div class="input">
            <div class="_title">客户账号</div>
            <input type="text" name="keyword" autocomplete="off" class="margin_top_40 padding_left_200" placeholder="请输入手机号码"/>
          </div>
          <div class="input">
            <div class="_title">客户密码</div>
            <input type="password" name="keyword" autocomplete="off" class="margin_top_2 padding_left_200" placeholder="请输入短信验证码"/>
          </div>
        </v-flex>
        <v-flex xs12>
          <div class="text-xs-center btn">
            <v-btn round color="primary" dark>确定</v-btn>
          </div>
        </v-flex>
      </v-layout>
    </div>
    <div class="unbundle" v-if="step == 4">
      <v-layout row wrap>
        <v-flex xs12>
          <div class="text-xs-center">
            <img src="@/assets/tick.jpg" class="_img" alt="">
          </div>
          <div class="text-xs-center">
            <h2>您的手机号：18878768888</h2>
          </div>
          <div class="text-xs-center btn">
            <v-btn round color="primary" dark>更换手机号</v-btn>
          </div>
        </v-flex>
      </v-layout>
      
    </div>
    <div class="_info" v-if="step == 5">
      <v-list subheader>
          <v-list-tile
            v-for="item in [{title:'客户账号:',name:'william'},{title:'客户名称:',name:'张锡奇'},{title:'手机号:',name:'15158064698'}]"
            :key="item.title"
            avatar
          >
            <v-list-tile-avatar class="title">
              <span>{{item.title}}</span>
            </v-list-tile-avatar>

            <v-list-tile-content>
              <v-list-tile-title v-html="item.name"></v-list-tile-title>
            </v-list-tile-content>

            <v-list-tile-action>
              <!-- <v-icon :color="item.active ? 'teal' : 'grey'">chat_bubble</v-icon> -->
            </v-list-tile-action>
          </v-list-tile>
        </v-list>
        <v-flex xs12>
          <div class="text-xs-center btn">
            <v-btn round color="primary" dark>确定</v-btn>
          </div>
        </v-flex>
    </div>
  </div>
</template>

<script>
export default {
  name: 'info',
  data () {
    return {
      step:1,
    }
  },
  activated(){
    
  },
  methods:{
    setStep(){
      this.step++;
      // this.$router.push({path:'/me/help'})
    }
  }
}
</script>

<style lang="less">
  @import "./info.less";
</style>