Vuetify —— 使用步骤条组件 v-stepper

<template>
  <div>
    <v-card elevation="0" style="border:1px solid #EAEBEE">
      <v-card-title class="text-body-1 mx-2" style="height:70px"
        >绑定</v-card-title
      >
      <v-divider></v-divider>
      <v-stepper v-model="e1">
        <v-stepper-header>
          <v-stepper-step :complete="e1 > 1" step="1">
            步骤1
          </v-stepper-step>

          <v-divider style="flex:1"></v-divider>

          <v-stepper-step :complete="e1 > 2" step="2">
            步骤2
          </v-stepper-step>
        </v-stepper-header>

        <v-stepper-items class="py-8">
          <v-stepper-content step="1">
            <v-card elevation="0" height="260" class="mb-10">
              <!-- 微信二维码展示 -->
              <!-- WECHAT_RZKC登录 -->
              <div class="d-flex flex-column align-center">
                <div class="darken-3 mb-4 text-center">
                  微信扫码绑定
                </div>
                <div style="position:relative;">
                  <!-- 扫码成功 -->
                  <div
                    v-if="scanSuccess"
                    class="px-1 py-1 text-caption d-flex flex-column justify-center"
                    style="width:160px;height:160px;overflow:hidden;background:#fff;opacity:.9;border:1px solid #000;position:absolute;top:0;left:0"
                  >
                    <v-icon size="50" color="#07c160">mdi-check-circle</v-icon>
                    <div class="text-center text-button">
                      扫码成功
                    </div>
                  </div>
                  <!-- 二维码已过期 -->
                  <div
                    v-if="isValid"
                    class="px-1 py-1 text-caption d-flex flex-column justify-center"
                    style="width:160px;height:160px;overflow:hidden;background:#fff;opacity:.9;border:1px solid #000;position:absolute;top:0;left:0"
                  >
                    <v-icon size="50" color="#F5A623">mdi-alert-circle</v-icon>
                    <div class="text-center text-button mt-2">
                      二维码已过期
                      <span
                        @click="toRefresh"
                        class="blue--text"
                        style="cursor: pointer;"
                        >刷新</span
                      >
                    </div>
                  </div>
                  <!-- 绑定失败  -->
                  <div
                    v-if="rzkcCode"
                    class="px-1 py-1 text-caption d-flex flex-column justify-center"
                    style="width:160px;height:160px;overflow:hidden;background:#fff;opacity:.9;border:1px solid #000;position:absolute;top:0;left:0"
                  >
                    <v-icon size="50" color="#F5A623">mdi-alert-circle</v-icon>
                    <div class="text-center text-button mt-2">
                      绑定失败
                      <span
                        @click="toRefresh"
                        class="blue--text"
                        style="cursor: pointer;"
                        >再试一次</span
                      >
                    </div>
                  </div>
                  <div
                    class="px-1 py-1 text-caption d-flex flex-row justify-center"
                    style="width:160px;height:160px;overflow:hidden;border:1px solid #000;background:#fff;"
                    id="wechat_code"
                    ref="wechat_code"
                  ></div>
                </div>

                <div
                  class="mt-2 d-flex flex-row justify-center"
                  style="color:#777;"
                >
                  请使用微信扫码
                </div>
              </div>
            </v-card>
          </v-stepper-content>

          <v-stepper-content step="2">
            <v-card elevation="0" class="mb-10" height="260px">
              <div class="d-flex flex-column align-center">
                <div class="text-center">
                  微信账号绑定
                </div>
                <v-sheet
                  color="white"
                  elevation="2"
                  height="80"
                  width="80"
                  class="mt-4 rounded-circle"
                >
                  <v-img
                    contain
                    width="80"
                    height="80"
                    class="rounded-circle"
                    :src="
                      headimgurl == null
                        ? require('@/assets/avatar.png')
                        : headimgurl
                    "
                  ></v-img>
                </v-sheet>
                <div
                  class=" mt-6 text-subtitle-1 text-center"
                  v-if="login_name || nickname || fullname"
                >
                  你好，{{ login_name || nickname || fullname }}
                </div>
                <div class="mt-6 text-subtitle-1 text-center">
                  <div>你即将绑定此微信账号</div>
                  <div>后续可以使用此微信账号登录</div>
                </div>
              </div>
            </v-card>
            <div class="d-flex justify-center">
              <v-btn color="primary" @click="doBind">
                完成
              </v-btn>

              <v-btn class="ml-4" text @click="cancelBind">
                上一步
              </v-btn>
            </div>
          </v-stepper-content>
        </v-stepper-items>
      </v-stepper>
    </v-card>
  </div>
</template>

export default {
  name: "Binding",
  data() {
    return {
      e1: "1"
    };
  }
};