ebiz-h5/src/components/ebiz/allowance/application/IndexBar.vue

<template>
  <div class='own_content'>
    <ul class='index-bar'>
      <li @click='changePage(Number(index) + 1)' v-for='(item, index) in pageTitle' :key='index' :class='item.tabClass'
          :id='item.tabClass'>
        <!-- 选中 -->
        <div v-if='item.tabClass' class='flex justify-content-fs align-items-c'>
          <div class='flex flex-direction-colunm align-items-c'>
            <van-image :src='item.imgCheckedUrl' class='image_head' />
            <span class='fs12 mt12'>{{ item.pageItem }}</span>
          </div>
          <van-image :src='doneUrl' v-if='index !== 3' class='image_done' />
        </div>
        <div v-if='!item.tabClass' class='flex justify-content-fs align-items-c'>
          <div class='flex flex-direction-colunm align-items-c'>
            <van-image :src='item.imgNoCheckedUrl' class='image_head' />
            <span class='fs12 mt12' style='color: #999999'>{{ item.pageItem }}</span>
          </div>
          <van-image :src='doneNurl' v-if='index !== 3' class='image_done' />
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import { Icon, Image as VanImage } from 'vant'

export default {
  name: 'IndexBar',
  props: {
    value: {
      type: String,
      default: ''
    },
    required: {
      type: Boolean,
      default: false
    },
    data: {
      type: Array,
      default: () => {
      }
    },
    //选项对象中，文字对应的 key
    valueKey: {
      type: String,
      default: 'text'
    }
  },
  components: {
    [Icon.name]: Icon,
    [VanImage.name]: VanImage
  },
  data() {
    return {
      doneUrl: this.$assetsUrl + 'images/allowance/done.png',
      doneNurl: this.$assetsUrl + 'images/allowance/done_n.png',
      pageTitle: [
        {
          pageNo: 1,
          pageItem: '基本信息',
          urlStr: '/allowance/application/BaseInfo',
          tabClass: '',
          imgCheckedUrl: this.$assetsUrl + 'images/allowance/jbxx.png',
          imgNoCheckedUrl: this.$assetsUrl + 'images/allowance/jbxx_n.png'
        },
        {
          pageNo: 2,
          pageItem: '账户信息',
          urlStr: '/allowance/application/AccountInfo',
          tabClass: '',
          imgCheckedUrl: this.$assetsUrl + 'images/allowance/zhxx.png',
          imgNoCheckedUrl: this.$assetsUrl + 'images/allowance/zhxx_n.png'
        },
        {
          pageNo: 3,
          pageItem: '影响资料',
          urlStr: '/allowance/application/AttachmentManagement',
          tabClass: '',
          imgCheckedUrl: this.$assetsUrl + 'images/allowance/yxzz.png',
          imgNoCheckedUrl: this.$assetsUrl + 'images/allowance/yxzz_n.png'
        },
        {
          pageNo: 4,
          pageItem: '签名确认',
          urlStr: '/allowance/application/SignatureConfirmation',
          tabClass: '',
          imgCheckedUrl: this.$assetsUrl + 'images/allowance/qmqr.png',
          imgNoCheckedUrl: this.$assetsUrl + 'images/allowance/qmqr_n.png'
        }
      ],
      //localStorage.allowancePageFlag:控制导航是否可以直接跳转页面  1-投保人信息 2-被保人信息 3-选择产品 4-受益人信息 5-告知信息 6-账户信息 7-附件上传 8-签名确认
      allowancePageFlag: Number(localStorage.allowancePageFlag)
    }
  },
  mounted() {
    this.selectTab()
  },
  methods: {
    changePage(pageIndex) {
      let url = ''
      //由 localStorage.allowancePageFlag 来控制是否可跳到指定页面
      if (localStorage.allowancePageFlag == '-10' && pageIndex != 4) {
        this.$toast('已到达签名确认流程，不可以回到前面的流程')
      }
      if (!localStorage.allowancePageFlag) return
      if (Number(localStorage.allowancePageFlag) < Number(pageIndex)) return
      switch (pageIndex) {
        case 1: //跳到基本信息页面
          url = `/allowance/application/BaseInfo?edit=1&allowancePageFlag=${pageIndex}`
          break
        case 2: //跳到账户信息页面
          url = `/allowance/application/AccountInfo?edit=1&allowancePageFlag=${pageIndex}`
          break
        case 3: //跳到影像资料页面
          url = `/allowance/application/AttachmentManagement?edit=1&allowancePageFlag=${pageIndex}`
          break
        case 4: //跳到签名确认页面
          url = `/allowance/application/SignatureConfirmation?edit=1&allowancePageFlag=${pageIndex}`
          break
        default:
          break
      }
      let str = location.hash
      let i = str.search(/AttachmentManagement/i)
      if (i !== -1 && pageIndex != 3 && pageIndex != 4) {
        this.$dialog
          .confirm({
            className: 'dialog-blue',
            title: '提示',
            message: '离开此页可能会丢失部分数据，是否确认离开？'
            // cancelButtonColor: '#E9332E',
            // confirmButtonColor: '#FFFFFF'
          })
          .then(() => {
            this.$jump({
              flag: 'h5',
              extra: {
                forbidSwipeBack: '1',
                url: location.origin + `/#${url}`
              },
              routerInfo: { path: url }
            })
          })
          .catch(() => {
            return
          })
      } else {
        this.$jump({
          flag: 'h5',
          extra: {
            forbidSwipeBack: '1',
            url: location.origin + `/#${url}`
          },
          routerInfo: { path: url }
        })
      }
    },
    selectTab() {
      let endIndex = location.hash.indexOf('?', 1)
      let str = endIndex == -1 ? location.hash.slice(1) : location.hash.slice(1, endIndex)
      this.pageTitle.forEach(v => {
        if (v.urlStr.toLowerCase() == str.toLowerCase()) {
          v.tabClass = 'active'
        }
      })
      this.$nextTick(() => {
        this.$el.querySelector('#active').scrollIntoView(true)
      })
    }
  }
}
</script>
<style lang='scss' scoped>
.index-bar {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  font-size: 12px;
}

.index-bar li {
  display: flex;
  align-items: center;
}

.index-bar::-webkit-scrollbar {
  display: none;
}

li {
  display: flex;
}

.index-bar span,
.index-bar van-icon {
  align-items: center;
}

.active {
  color: #2E4591;
}

.activeline {
  background: #2E4591;
}

.image_head {
  width: 16px;
  height: 16px;
}

.image_done {
  width: 14px;
  height: 14px;
  padding-left: 20px;
  padding-right: 20px;
}

.own_content {
  padding-top: 19px;
  padding-bottom: 15px;
  margin-left: 10px;
  margin-right: 10px;
}
</style>