ebiz-h5/src/components/ebiz/insureAgain/ProgressBar.vue

<!--
 * @Author: PangXingYue
 * @Date: 2021-03-23 17:07:03
 * @LastEditTime: 2021-03-31 21:02:31
 * @LastEditors: PangXingYue
 * @Description: 
 * @FilePath: \ebiz-h5\src\components\ebiz\insureAgain\ProgressBar.vue
-->
<template>
  <div class="prgoress-bar">
    <template v-for="(item, index) in items">
      <div class="progress-item" :key="index" @click="changeProgressBar(index)">
        <div class="icon">
          <van-image v-show="index === active" width="20" :src="item.icon_active" />
          <van-image v-show="index !== active" width="20" :src="item.icon" />
        </div>
        <p :class="index === active ? 'active' : ''">{{ item.name }}</p>
      </div>
      <van-icon :class="index === active ? 'active' : ''" v-if="index != items.length - 1" name="arrow" :key="index" />
    </template>
  </div>
</template>

<script>
import { Image } from 'vant'
import CacheUtils from '@/assets/js/utils/cacheUtils'
export default {
  name: 'ProgressBar',
  components: {
    [Image.name]: Image
  },
  props: {
    active: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      items: [
        { name: '投保信息', icon: this.$assetsUrl + 'images/kmh/tbrxx_n.png', icon_active: this.$assetsUrl + 'images/kmh/tbrxx.png' },
        { name: '险种信息', icon: this.$assetsUrl + 'images/kmh/xzcp_n.png', icon_active: this.$assetsUrl + 'images/kmh/xzcp.png' },
        { name: '告知信息', icon: this.$assetsUrl + 'images/kmh/gzxx_n.png', icon_active: this.$assetsUrl + 'images/kmh/gzxx.png' },
        { name: '签名确认', icon: this.$assetsUrl + 'images/kmh/qmqr_n.png', icon_active: this.$assetsUrl + 'images/kmh/qmqr.png' }
      ]
    }
  },
  methods: {    
    changeProgressBar(index) {
           //由 localStorage.salePageFlag 来控制是否可跳到指定页面
     if (localStorage.active == '3' && index != 3) {
       this.$toast('已到达签名确认流程，不可以回到前面的流程')
     }
     if (Number(CacheUtils.getLocItem('active')) < Number(index)) return
     var url;      
     switch (index) {
       case 0:
         url = 'InsureInformation?salePageFlag=ProgressBar';
         break;
       case 1:
         url = 'ProductInformation?salePageFlag=ProgressBar';
         break;
       case 2:
         url = 'Notification?salePageFlag=ProgressBar';
         break;
       case 3:
         url = 'SignatureConfirmation?salePageFlag=ProgressBar';
         break;
       default:
         url = 'InsureInformation?salePageFlag=ProgressBar';
         break;
     }   
      this.$jump({
         flag: 'h5',
         extra: {
           url: location.origin + `/#/insureAgain/${url}`,
           forbidSwipeBack: '1',
           needRefresh: '1'
         },
         routerInfo: { path: `/insureAgain/${url}` }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.prgoress-bar {
  display: flex;
  align-items: center;
  background-color: #ededed;
  .progress-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 80px;
    text-align: center;

    p {
      font-size: 14px;
    }
  }

  .active {
    color: #ea3833;
  }
}
</style>