抽奖活动

assets/scss/common.scss

@@ -936,3 +936,172 @@ img.new-animate{
     top: 46px !important ;
   }
 }
+//进度条
+.progress_bar .el-progress{
+  width: 511px;
+  height: 15px;
+  border-radius: 7px;
+}
+.progress_bar .el-progress-bar__inner{
+  background: #ffbe04;
+}
+.progress_bar .el-progress-bar__innerText{
+  font-size: 16px;
+  color: #0083c5;
+}
+
+//未中奖 询价不够
+.no-prise .el-dialog--small{
+  top: 30% !important;
+  width: 682px;
+  height: 328px;
+  background-color: #ffffff;
+  border-radius: 13px;
+}
+.no-prise .el-dialog--small .el-dialog__body{
+  position: relative;
+}
+.no-prise .el-dialog--small .el-dialog__header {
+  display: none;
+}
+.no-prise .dialog-content img.hua{
+  position: absolute;
+  top: -170px;
+  left: 50%;
+  margin-left: -218px;
+}
+.no-prise .dialog-content p{
+  margin-top: 100px;
+  font-size: 36px;
+  color: #846244;
+}
+.no-prise .dialog-content .close{
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  width: 30px;
+  height: 30px;
+  line-height: 23px;
+  text-align: center;
+  font-size: 30px;
+  background: rgba(0,0,0,.9);
+  border-radius: 50%;
+}
+.no-prise .el-dialog__footer {
+  margin: 0 auto;
+  text-align: center;
+}
+.no-prise .dialog-footer a{
+  display: inline-block;
+  width: 278px;
+  height: 57px;
+  line-height: 57px;
+  text-align: center;
+  font-size: 36px;
+  color: #ffffff;
+  background-color: #f29844;
+  border-radius: 28px;
+}
+
+//中奖提示
+.get-prise .el-dialog--small {
+  height: 360px;
+}
+.get-prise .dialog-content p{
+  font-size: 28px;
+}
+.get-prise .qr{
+  padding: 0 90px 0 20px;
+  overflow: hidden
+}
+.get-prise .qr p{
+  float: left;
+  width: 300px;
+  margin-top: 20px;
+  text-align: left;
+}
+.get-prise .qr img{
+  float: right;
+  height: 100px;
+}
+.get-prise .dialog-footer a{
+  margin-top: 10px;
+}
+//查看中奖产品
+.look-prise .el-dialog--small{
+  width: 825px;
+  height: auto;
+}
+.look-prise .btn-tip{
+  margin: 43px auto 0;
+  width: 278px;
+  height: 57px;
+  line-height: 57px;
+  text-align: center;
+  font-size: 36px;
+  color: #fff;
+  background-color: #f29844;
+  border-radius: 28px
+}
+.look-prise .prise-tab{
+  overflow: hidden;
+  margin: 20px 0;
+}
+.look-prise .prise-tab span{
+  display: inline-block;
+  float: left;
+  color: #f08829;
+  font-size: 30px;
+  &:first-child{
+    width: 110px;
+  }
+  &:nth-child(2){
+    width: 170px;
+  }
+  &:nth-child(3){
+    width: 240px;
+  }
+  &:last-child{
+    width: 150px;
+  }
+}
+.look-prise ul{
+  list-style: none;
+  margin-top: 40px;
+}
+.look-prise ul li {
+  overflow: hidden;
+  margin-bottom: 24px;
+  &:last-child {
+    margin-bottom: 40px;
+  }
+}
+.look-prise ul li div{
+  float: left;
+  overflow: hidden;
+  color: #846244;
+  font-size: 24px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  &:first-child{
+    width: 110px;
+  }
+  &:nth-child(2){
+    width: 170px;
+  }
+  &:nth-child(3){
+    width: 240px;
+  }
+  &:last-child{
+    width: 150px;
+  }
+}
+.look-prise .prise-style{
+  font-size: 20px;
+  color: #f08829;
+}
+.look-prise .prise-style img{
+  margin-left: 20px;
+  width: 100px;
+  height: 100px;
+}

components/lotteryDraw/lottery.vue

@@ -0,0 +1,663 @@
+<template>
+  <div class="lucky">
+    <div class="banner"></div>
+    <div class="lottery container">
+      <div class="level" v-if="true">
+        <div class="low_level">
+          <img src="/images/lottery/level-01.png" alt=""/>
+          <div class="level_title">青铜买家用户每发布十条询价便可获得一次抽奖机会</div>
+        </div>
+        <div class="up"><img src="/images/lottery/up.png" alt=""/><span>升级</span></div>
+        <div class="high_level">
+          <img src="/images/lottery/level-020.png" alt=""/>
+        </div>
+        <div class="progress_bar">
+          <div class="buyer_inquiry inquiry">
+            <el-progress :text-inside="true" :stroke-width="15" :percentage="33"></el-progress>
+            <span class="all_count">300条询价</span>
+            <div class="tip_text"><img src="/images/lottery/update.png" alt=""/>买家再增加<span>200</span>条报价，便可升级黄金用户</div>
+          </div>
+          <div class="vendor_inquiry inquiry">
+            <el-progress :text-inside="true" :stroke-width="15" :percentage="10"></el-progress>
+            <span class="all_count">1000条询价</span>
+            <div class="tip_text"><img src="/images/lottery/update.png" alt=""/>卖家再增加<span>900</span>条报价，便可升级黄金用户</div>
+          </div>
+        </div>
+      </div>
+      <div class="level" style="margin-top: 80px;" v-else>
+        <img src="/images/lottery/level-04.png" alt=""/>
+        <div class="high_title">联系客服直接领取</div>
+      </div>
+      <div class="prize">
+        <div class="press-prise">
+          <div class="press_prise">
+            <ul class="nineGrid">
+              <li class="row">
+                <div v-for="(list, index) in lists.slice(0, 3)" :class="activeIndex === index ? `active` : ``">
+                  <div class="wrapper">
+                    <img src="/images/lottery/red_moeny.png" alt="">
+                    <p>一等奖</p>
+                  </div>
+                  <div class="mask"></div>
+                </div>
+              </li>
+              <li class="row">
+                <div :class="activeIndex === 7 ? 'active': ''" class="grid_center">
+                  <div class="wrapper">
+                    <img src="/images/lottery/moeny.png" alt="">
+                    <p>二等奖</p>
+                  </div>
+                  <div class="mask"></div>
+                </div>
+                <div class="getLuck" @click="startLottery">
+                  <p>立即抽奖</p>
+                </div>
+                <div :class="activeIndex === 3 ? 'active': ''" class="grid_center">
+                  <div class="wrapper">
+                    <img src="/images/lottery/red_moeny.png" alt="">
+                    <p>三等奖</p>
+                  </div>
+                  <div class="mask"></div>
+                </div>
+              </li>
+              <li class="row">
+                <div v-for="(list, index) in lists02" :class="activeIndex === 6-index ? `active` : ``">
+                  <div class="wrapper">
+                    <img src="/images/lottery/moeny.png" alt="">
+                    <p>一等奖</p>
+                  </div>
+                  <div class="mask"></div>
+                </div>
+              </li>
+            </ul>
+          </div>
+          <div class="lave-count">剩余<span>5</span>次</div>
+          <div class="tab-prise"><span class="active">青铜用户</span><span>黄金用户</span></div>
+        </div>
+        <div class="look_prise">
+          <div class="header">
+            <span>获奖名单</span>
+            <span>查看我的奖品</span>
+          </div>
+          <div class="body">
+            <div class="list_head">
+              <span>时间</span>
+              <span>用户</span>
+              <span>奖品</span>
+            </div>
+            <ul>
+              <li>
+                <div class="time">2018-08-08</div>
+                <div class="company">深圳市优软科技有限公司公司深圳市优软科技有限公司公司</div>
+                <div class="prise_level">一等奖</div>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div class="describe">
+        <img src="/images/lottery/describe.png" alt=""/>
+      </div>
+      <div class="rule">
+        <header>活动规则</header>
+        <div class="section">
+          <div class="list">1、活动时间：九月起；</div>
+          <div class="list">2、三个月内的重复型号询价，不计入抽奖机会；</div>
+          <div class="list">3、钻石用户连续3个月内累计的数据达到抽奖资格，将于最近的一次抽奖中参与，如9-10-11月内达到抽奖资格，将在12月底的抽奖(钻石用户领奖在每个季度最后一个工作日)，钻石用户奖品 将由我们电话联系用户；</div>
+          <div class="list">4、获得实物礼品的客户，联系客服微信领取；</div>
+          <div class="list">5、活动礼品按周发放；</div>
+          <div class="list">6、对活动规则以及礼品发送有疑问，请联系在线客服（友情提示：客服在线时间周一至周五，早九点至晚六点，法定节假日除外）；</div>
+          <div class="list">7、领奖时，兑换码和手机号为一致，便可兑换奖品，望您妥善保管；</div>
+          <div class="list">8、本次活动所属权归优软商城所有。</div>
+        </div>
+      </div>
+    </div>
+    <!--去登录-->
+    <div class="no-prise login">
+      <el-dialog
+        :visible.sync="showLoginBox">
+        <div class="dialog-content">
+          <img src="/images/lottery/hua.png" class="hua" alt=""/>
+          <p>你还未登录，请登陆后抽奖</p>
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <a type="button" @click="goLogin">确认</a>
+        </span>
+      </el-dialog>
+    </div>
+    <!--未获得抽奖机会-->
+    <div class="no-prise">
+      <el-dialog
+        :visible.sync="showNoPriseBox">
+        <div class="dialog-content">
+          <img src="/images/lottery/hua.png" class="hua" alt=""/>
+          <p>您未获得抽奖机会，请您先发布询价</p>
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <a type="button" @click="showNoPriseBox = false">确认</a>
+        </span>
+      </el-dialog>
+    </div>
+    <!--未抽中奖品还有机会-->
+    <div class="no-prise">
+      <el-dialog
+        :visible.sync="showChooseBox">
+        <div class="dialog-content">
+          <img src="/images/lottery/hua.png" class="hua" alt=""/>
+          <p>很遗憾，您没有中奖，下次还有机会！</p>
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <a type="button" @click="showChooseBox = false">确认</a>
+        </span>
+      </el-dialog>
+    </div>
+    <!--中奖提示-->
+    <div class="no-prise get-prise">
+      <el-dialog
+        :visible.sync="showGetPriseBox">
+        <div class="dialog-content">
+          <!--<div class="close" @click="showGetPriseBox = false">&times;</div>-->
+          <img src="/images/lottery/hua.png" class="hua" alt=""/>
+          <p>恭喜您抽中XXX，请添加客服微信使用兑换码兑换</p>
+          <div class="qr"><p>扫描微信二维码或添加XXX微信领取奖品</p><img src="/images/lottery/qr.png" alt=""/></div>
+          <span slot="footer" class="dialog-footer">
+          <a type="button" @click="showGetPriseBox = false">确认</a>
+        </span>
+        </div>
+      </el-dialog>
+    </div>
+    <!--查看我的奖品-->
+    <div class="no-prise look-prise">
+      <el-dialog
+        :visible.sync="lookPriseBox">
+        <div class="dialog-content">
+          <div class="close" @click="lookPriseBox = false">&times;</div>
+          <img src="/images/lottery/hua.png" class="hua" alt=""/>
+          <div class="btn-tip">奖品列表</div>
+          <div style="margin: 0 auto; text-align: center; width: 700px;">
+            <div class="prise-tab"><span>奖品</span><span>竞换码</span><span>中奖时间</span><span>竞换状态</span></div>
+            <ul>
+              <li>
+                <div>一等奖</div>
+                <div>YRQT0010</div>
+                <div>2018年12月30日</div>
+                <div>已兑换</div>
+              </li>
+            </ul>
+          </div>
+          <div class="prise-style">兑奖方式：扫描微信二维码或添加XXXX微信领取奖品 <img src="/images/lottery/mall_qr.png" alt=""/></div>
+        </div>
+      </el-dialog>
+    </div>
+    <!--二维码-->
+    <div class="qr-active">
+      <img src="/images/lottery/qr.png" alt=""/>
+    </div>
+  </div>
+</template>
+<script>
+  import {LoginBox, RemindBox} from '~components/mobile/common'
+  export default {
+    name: 'lottery',
+    data () {
+      return {
+        activeIndex: -1,  // 当前转动到哪个位置，起点位置
+        count: 8,    // 总共有多少个位置
+        timer: 0,    // 每次转动定时器
+        speed: 200,   // 初始转动速度
+        times: 0,    // 转动次数
+        cycle: 50,   // 转动基本次数：即至少需要转动多少次再进入抽奖环节
+        prize: -1,   // 中奖位置
+        click: true,
+        showToast: false,
+        toastType: 'luck',
+        showLoginBox: false,
+        showNoPriseBox: false,
+        lookPriseBox: false,
+        showChooseBox: false,
+        showGetPriseBox: false
+      }
+    },
+    components: {
+      LoginBox,
+      RemindBox
+    },
+    computed: {
+      lists () {
+        console.log(this.$store.state.supplier.merchant.merchant.data)
+        return this.$store.state.supplier.merchant.merchant.data ? this.$store.state.supplier.merchant.merchant.data.content : []
+      },
+      lists02 () {
+        return this.lists.slice(4,7).reverse()
+      }
+    },
+    methods: {
+      // 去登录
+      goLogin () {
+        this.$router.push('/auth/login?returnUrl=' + window.location.href)
+      },
+      // 开始抽奖
+      startLottery () {
+        if (this.$store.state.option.user.logged) {
+          if (!this.click) {
+            return
+          }
+          this.closeToast()
+          this.speed = 200
+          this.click = false
+          this.startRoll()
+        } else {
+          this.showLoginBox = true
+          this.goLogin()
+        }
+      },
+      // 开始转动
+      startRoll () {
+        this.times += 1  // 转动次数
+        this.oneRoll()  // 转动过程调用的每一次转动方法，这里是第一次调用初始化
+        // 如果当前转动次数达到要求 && 目前转到的位置是中奖位置
+        if (this.times > this.cycle + 10 && this.prize === this.activeIndex) {
+          clearTimeout(this.timer)   // 清除转动定时器，停止转动
+          this.prize = -1
+          this.times = 0
+          this.click = true
+          this.showToast = true
+          this.toastType = 'comeOn'
+          console.log('你已经中奖了')
+        } else {
+          if (this.times < this.cycle) {
+            this.speed -= 10   // 加快转动速度
+          } else if (this.times === this.cycle) {    // 随机获得一个中奖位置
+            const index = parseInt(Math.random() * 10, 0) || 0
+            this.prize = index
+            if (this.prize > 7) {
+              this.prize = 7
+            }
+            console.log(`中奖位置${this.prize}`)
+          } else if (this.times > this.cycle + 10 &&
+            ((this.prize === 0 && this.activeIndex === 7) || this.prize === this.activeIndex + 1)) {
+            this.speed += 110
+          } else {
+            this.speed += 20
+          }
+
+          if (this.speed < 40) {
+            this.speed = 40
+          }
+          this.timer = setTimeout(this.startRoll, this.speed)
+        }
+      },
+      // 每一次转动
+      oneRoll () {
+        let index = this.activeIndex  // 当前转动到哪个位置
+        const count = this.count  // 总共有多少个位置
+        index += 1
+        if (index > count - 1) {
+          index = 0
+        }
+        this.activeIndex = index
+      },
+      // 关闭弹出框
+      closeToast () {
+        this.showToast = false
+      },
+      onRemind: function (str) {
+        this.remindText = str
+        this.timeoutCount ++
+      }
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  .lucky {
+    position: relative;
+    margin: 0 auto;
+    width: 100%;
+    text-align: center;
+    background: #88dcf4;
+    .qr-active {
+      position: fixed;
+      top: 300px;
+      right: 50px;
+    }
+    .banner{
+      margin: 0 auto;
+      height: 552px;
+      text-align: center;
+      background: url('/images/lottery/banner.png') center center/auto 100% no-repeat #018bff;
+    }
+    .lottery{
+      margin: 0 auto;
+      padding-bottom: 100px !important;
+      width: 1190px;
+      text-align: center;
+      .level{
+        position: relative;
+        margin-top: 140px;
+        .low_level{
+          width: 372px;
+          .level_title {
+            margin: 20px auto 0;
+            padding: 9px 23px 10px 22px;
+            text-align: left;
+            font-size: 20px;
+            font-weight: bold;
+            color: #fff;
+            background-color: #fcac46;
+            border-radius: 15px;
+          }
+        }
+        .high_title{
+          width: 184px;
+          margin: 20px auto 0;
+          padding: 10px 12px;
+          text-align: left;
+          font-size: 20px;
+          font-weight: bold;
+          color: #fff;
+          background-color: #fcac46;
+          border-radius: 15px;
+        }
+        .up {
+          position: absolute;
+          top: 20px;
+          left: 320px;
+          span{
+            position: absolute;
+            top: 28px;
+            left: 229px;
+            font-size: 30px;
+            font-weight: bold;
+            color: #693100;
+          }
+        }
+        .high_level {
+          position: absolute;
+          top: -107px;
+          left: 803px
+        }
+        .progress_bar {
+          position: absolute;
+          top: 245px;
+          left: 460px;
+          width: 511px;
+          .inquiry {
+            position: relative;
+            div.tip_text{
+              padding-left: 20px;
+              margin-top: 18px;
+              font-size: 24px;
+              color: #0082c4;
+              text-align: left;
+              img{
+                margin: -4px 10px 0 0;
+              }
+            }
+            span.all_count{
+              position: absolute;
+              top: -5px;
+              left: 525px;
+              width: 136px;
+              font-size: 24px;
+              color: #0083c5;
+              text-align: left;
+            }
+          }
+          .vendor_inquiry{
+            margin-top: 60px;
+          }
+        }
+      }
+      .prize{
+        overflow: hidden;
+        margin: 110px auto;
+        .press-prise {
+          float: left;
+          margin: 0 auto;
+          width: 500px;
+          text-align: center;
+          .lave-count{
+            margin: 22px 0;
+            font-size: 30px;
+            font-weight: bold;
+            color: #ff6600;
+            span{
+              font-size: 30px;
+              font-weight: bold;
+              color: #ff6600;
+            }
+          }
+          .tab-prise{
+            span{
+              display: inline-block;
+              width: 131px;
+              height: 44px;
+              line-height: 44px;
+              text-align: center;
+              font-size: 24px;
+              font-weight: bold;
+              color: #ffffff;
+              background-color: #fdd557;
+              border-radius: 15px;
+              cursor: pointer;
+              &:first-child{
+                margin-right: 16px;
+              }
+              &:hover, &.active{
+                background-color: #ff9000;
+              }
+            }
+          }
+        }
+        .press_prise{
+          position: relative;
+          width: 494px;
+          height: 309px;
+          background-color: #ffbe04;
+          border-radius: 13px;
+          .nineGrid {
+            padding-right: 15px;
+            position: absolute;
+            top: 8px;
+            left: 8px;
+            width: 478px;
+            height: 293px;
+            background-color: #ff9000;
+            border-radius: 13px;
+            li {
+              height: 86px;
+              display: flex;
+              > div {
+                flex: 1;
+                height: 100%;
+                text-align: center;
+                position: relative;
+                margin-top: 10px;
+                .wrapper {
+                  width: 148px;
+                  height: 80px;
+                  background-color: #fff2cf;
+                  border-radius: 13px;
+                  box-shadow: 0 7px 0 #ffc63c;
+                  -moz-box-shadow: 0 7px 0 #ffc63c;
+                  -o-box-shadow: 0 7px 0 #ffc63c;
+                  -webkit-box-shadow: 0 7px 0 #ffc63c;
+                }
+                img {
+                  width: 46px;
+                  height: 38px;
+                  vertical-align: middle;
+                  margin: 8px 0;
+                }
+                p{
+                  color: #ff6000;
+                  font-size: 16px;
+                  font-weight: bold;
+                }
+                .mask {
+                  position: absolute;
+                  top: 0;
+                  left: 0;
+                  width: 148px;
+                  height: 86px;
+                  opacity: 0.5;
+                  border-radius: 10px;
+                  background-color: #000;
+                  display: none;
+                }
+              }
+              >div:nth-child(2) .wrapper {
+                background: #fee6a7;
+              }
+              >div.grid_center .wrapper{
+                background: #fee6a7;
+              }
+              > div.active {
+                .mask {
+                  display: block;
+                }
+              }
+              > div:first-child {
+                margin-left: 24px;
+              }
+              > div.getLuck {
+                margin-right: 6px;
+                width: 148px;
+                height: 80px;
+                background-color: #fddb00;
+                border-radius: 13px;
+                box-shadow: 0 7px 0 #ffc63c;
+                -moz-box-shadow: 0 7px 0 #ffc63c;
+                -o-box-shadow: 0 7px 0 #ffc63c;
+                -webkit-box-shadow: 0 7px 0 #ffc63c;
+                p {
+                  font-size: 27px;
+                  font-weight: 900;
+                  color: #f91f00;
+                  line-height: 85px;
+                }
+              }
+            }
+            li:nth-child(2), li:last-child  {
+              margin-top: 8px;
+            }
+          }
+        }
+        .look_prise{
+          float: right;
+          width: 582px;
+          .header {
+            padding: 0 8px 0 28px;
+            overflow: hidden;
+            width: 582px;
+            height: 50px;
+            line-height: 50px;
+            background-color: #fdd557;
+            border-radius: 13px 13px 0px 0px;
+            span{
+              color: #846244;
+              &:first-child {
+                float: left;
+                font-size: 30px;
+              }
+              &:last-child {
+                display: inline-block;
+                margin-top: 8px;
+                float: right;
+                width: 134px;
+                height: 35px;
+                line-height: 35px;
+                font-size: 18px;
+                border-radius: 5px;
+                border: solid 1px #846244;
+                cursor: pointer                                         ;
+              }
+            }
+          }
+          .body{
+            padding: 0 24px 29px;
+            background: #fff;
+            border-radius: 0px 0px 13px 13px;
+            .list_head{
+              width: 100%;
+              height: 54px;
+              line-height: 54px;
+              border-bottom: solid 1px #846244;
+              span{
+                display: inline-block;
+                text-align: center;
+                font-size: 20px;
+                font-weight: bold;
+                color: #846244;
+                &:first-child {
+                  width: 120px;
+                }
+                &:nth-child(2) {
+                  width: 300px;
+                }
+                &:last-child {
+                  width: 110px;
+                }
+              }
+            }
+            ul{
+              width: 100%;
+              height: 296px;
+              li{
+                display: inline-block;
+                overflow: hidden;
+                margin-top: 20px;
+                div{
+                  float: left;
+                  font-size: 18px;
+                  color: #846244;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+                  &:first-child {
+                    width: 120px;
+                  }
+                  &:nth-child(2) {
+                    width: 300px;
+                  }
+                  &:last-child {
+                    width: 110px;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+      .describe{
+        margin-bottom: 88px;
+      }
+      .rule{
+        margin: 0 auto;
+        width: 1040px;
+        text-align: center;
+        header{
+          padding-left: 14px;
+          width: 100%;
+          height: 50px;
+          line-height: 50px;
+          font-size: 24px;
+          color: #846244;
+          background-color: #fdd557;
+          border-radius: 13px 13px 0px 0px;
+        }
+        .section{
+          padding: 20px 20px 36px 14px;
+          background-color: #ffffff;
+          border-radius: 0px 0px 13px 13px;
+          .list{
+            line-height: 36px;
+            text-align: left;
+            font-size: 24px;
+            color: #846244;
+          }
+        }
+      }
+    }
+  }
+</style>

pages/lotteryDraw/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <lottery/>
+  </div>
+</template>
+<script>
+  import lottery from '~components/lotteryDraw/lottery.vue'
+  export default {
+    layout: 'main',
+    fetch ({ store }) {
+      return Promise.all([
+        store.dispatch('supplier/loadVendorList', {page: 1, size: 10})
+      ])
+    },
+    components: {
+      lottery
+    }
+  }
+</script>

plugins/element-ui.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import { Message, Breadcrumb, BreadcrumbItem, Tree, Pagination, Upload, Dialog, DatePicker, Switch } from 'element-ui'
+import { Message, Breadcrumb, BreadcrumbItem, Tree, Pagination, Upload, Dialog, DatePicker, Switch, Progress } from 'element-ui'
 
 Vue.use(Breadcrumb)
 Vue.use(BreadcrumbItem)
@@ -9,5 +9,6 @@ Vue.use(Upload)
 Vue.use(Dialog)
 Vue.use(DatePicker)
 Vue.use(Switch)
+Vue.use(Progress)
 
 Vue.prototype.$message = Message