修改投保内容

src/components/ebiz/insureAgain/InfoCell.vue

@@ -1,5 +1,5 @@
 <template>
-  <van-field label-width="12.2em">
+  <van-field>
     <template #label>
       <slot name="cellLabel">
         <span :style="styleObj">{{ label }}</span>
@@ -7,7 +7,7 @@
     </template>
     <template #input>
       <slot>
-        <span :style="styleObj">{{ value }}</span>
+        <span :style="styleInput">{{ value }}</span>
       </slot>
     </template>
   </van-field>
@@ -31,25 +31,28 @@ export default {
     },
     color: {
       type: String,
-      default: '#000'
+      default: '#323233'
     }
   },
   computed: {
-    styleObj() {
-      return {
-        color: this.color
-      }
-    }
+    
   },
   data() {
-    return {}
+    return {
+      styleObj:{
+        color: this.color
+      },
+      styleInput: {
+        color: '#969799'
+      }
+    }      
   },
   created() {}
 }
 </script>
 
 <style lang="scss" scoped>
-/deep/ .van-field__control {
-  text-align: center;
-}
+// /deep/ .van-field__control {
+//   text-align: center;
+// }
 </style>

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>