Merge branch 'feature/GFRS-597【电投页面优化】' into r/0416

# Conflicts:
#	src/views/ebiz/sale/AddBeneficiaryInfo.vue

src/components/ebiz/sale/IndexBar.vue

@@ -0,0 +1,175 @@
+<template>
+  <div class="ml6 mr6 pt5 pb5">
+    <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 :class="[{ activeline: item.tabClass }, { 'bg-gray': !item.tabClass }, 'w15', 'h2', 'mr8']" v-if="index != 0"></div>
+        <span>{{ item.pageNo }}.{{ item.pageItem }}</span>
+        <div :class="[{ activeline: item.tabClass }, { 'bg-gray': !item.tabClass }, 'w15', 'h2', 'ml8']" v-if="index != 7"></div>
+        <van-icon name="arrow" size="12" v-if="index != 7" />
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+import { Icon } 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
+  },
+  data() {
+    return {
+      pageTitle: [
+        { pageNo: 1, pageItem: '投保人信息', urlStr: '/sale/insuredInfo', tabClass: '' },
+        { pageNo: 2, pageItem: '被保险人信息', urlStr: '/sale/insuredPerson', tabClass: '' },
+        { pageNo: 3, pageItem: '选择产品', urlStr: '/common/selectedProduct', tabClass: '' },
+        { pageNo: 4, pageItem: '受益人信息', urlStr: '/sale/beneficiary', tabClass: '' },
+        { pageNo: 5, pageItem: '告知信息', urlStr: '/sale/notifyingMessage', tabClass: '' },
+        { pageNo: 6, pageItem: '账户信息', urlStr: '/sale/accountInformation', tabClass: '' },
+        { pageNo: 7, pageItem: '附件上传', urlStr: '/sale/attachmentManagement', tabClass: '' },
+        { pageNo: 8, pageItem: '签名确认', urlStr: '/sale/signatureConfirmation', tabClass: '' }
+      ],
+      //localStorage.salePageFlag:控制导航是否可以直接跳转页面  1-投保人信息 2-被保人信息 3-选择产品 4-受益人信息 5-告知信息 6-账户信息 7-附件上传 8-签名确认
+      salePageFlag: Number(localStorage.salePageFlag)
+    }
+  },
+  mounted() {
+    this.selectTab()
+  },
+  methods: {
+    changePage(pageIndex) {
+      let url = ''
+      //由 localStorage.salePageFlag 来控制是否可跳到指定页面
+      if (localStorage.salePageFlag == '-10' && pageIndex != 8) {
+        this.$toast('已到达签名确认流程，不可以回到前面的流程')
+      }
+      if (Number(localStorage.salePageFlag) < Number(pageIndex)) return
+      switch (pageIndex) {
+        case 1: //跳到投保人页面
+          url = `/sale/insuredInfo?edit=1&salePageFlag=${pageIndex}`
+          break
+        case 2: //跳到被保人页面
+          url = `/sale/insuredPerson?edit=1&salePageFlag=${pageIndex}`
+          break
+        case 3: //跳到已选产品列表页面
+          url = `/common/selectedProduct?edit=1&salePageFlag=${pageIndex}`
+          break
+        case 4: //跳到受益人信息页面
+          url = `/sale/beneficiary?edit=1&salePageFlag=${pageIndex}`
+          break
+        case 5: //跳到告知信息页面
+          url = `/sale/NotifyingMessage?edit=1&salePageFlag=${pageIndex}`
+          break
+        case 6: //跳到账户信息页面
+          url = `/sale/AccountInformation?edit=1&salePageFlag=${pageIndex}`
+          break
+        case 7: //跳到附件上传页面
+          url = `/sale/AttachmentManagement?edit=1&salePageFlag=${pageIndex}`
+          break
+        case 8: //跳到签名确认页面
+          url = `/sale/SignatureConfirmation?edit=1&salePageFlag=${pageIndex}`
+          break
+        default:
+          break
+      }
+      let str = location.hash
+      let i = str.search(/AttachmentManagement/i)
+      if (i !== -1 && pageIndex != 7 && pageIndex != 8) {
+        this.$dialog
+          .confirm({
+            className: 'dialog-delete',
+            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: 15px;
+  margin-top: 8px;
+}
+
+.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: flex-center;
+}
+.active {
+  color: #e9332e;
+}
+.activeline {
+  background: #e9332e;
+}
+</style>