修改投保内容

src/components/ebiz/insureAgain/ProgressBar.vue

@@ -0,0 +1,95 @@
+<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 as VanImage } from 'vant'
+export default {
+  name: 'ProgressBar',
+  components: {
+    [VanImage.name]: VanImage
+  },
+  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) {
+     var url;      
+     switch (index) {
+       case 0:
+         url = 'insureInformation';
+         break;
+       case 1:
+         url = 'productInformation';
+         break;
+       case 2:
+         url = 'notification';
+         break;
+       case 3:
+         url = 'signConfirmation';
+         break;
+       default:
+         url = 'insureInformation';
+         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>