详情

src/api/detail.rate.mock.js

-/* eslint-disable */
-export default [
-  {
-    title: "按月交费",
-    age: ["0-1", "2-17", "18-20", "21-25", "26-30", "31-35", "36-40", "41-45", "46-50", "51-55", "56-60"],
-    list: [
-      [
-        [30.7, 19.5, 23.1, 25.8, 34.3, 51.3, 86.8, 146.4, 252.3, "", ""],
-        [26.2, 17.2, 21.3, 29.3, 46.4, 75.6, 113.7, 166.6, 229.0, "", ""]
-      ],
-      [
-        [20.4, 12.9, 15.3, 17.1, 22.8, 34.1, 57.8, 97.5, 168.1, 285.1, 443.3],
-        [17.4, 11.4, 14.1, 19.5, 30.8, 50.3, 75.7, 111, 152.6, 210.9, 303.6]
-      ],
-      [
-        [10, 6.3, 7.5, 8.4, 11.2, 16.9, 28.7, 48.6, 83.9, 142.4, 221.5],
-        [8.6, 5.6, 6.9, 9.6, 15.3, 25, 37.7, 55.4, 76.2, 105.3, 151.7]
-      ]
-    ]
-  },
-  {
-    title: "一次交清",
-    age: ["0-1", "2-17", "18-20", "21-25", "26-30", "31-35", "36-40", "41-45", "46-50", "51-55", "56-60"],
-    list: [
-      [
-        [334, 213, 252, 281, 373, 556, 939, 1582, 2724, 4616, 7176],
-        [285, 189, 232, 319, 503, 818, 1229, 1800, 2473, 3416, 4916]
-      ],
-      [
-        [223, 142, 168, 187, 248, 371, 626, 1055, 1816, 3077, 4784],
-        [190, 126, 155, 213, 335, 545, 819, 1200, 1648, 2277, 3277]
-      ],
-      [
-        [111, 71, 84, 94, 124, 185, 313, 527, 908, 1539, 2392],
-        [95, 63, 77, 106, 168, 273, 410, 600, 824, 1139, 1639]
-      ]
-    ]
-  }
-];

src/components/Collapse.vue

@@ -5,7 +5,7 @@
         class="collapse-item"
         :class="{
           show: item.show,
-          more: index > 2 && !more
+          more: index > initLength && !more && moreBtn
         }"
         v-for="(item, index) in list"
         :key="index"
@@ -45,6 +45,10 @@ export default {
     moreBtn: {
       type: Boolean,
       default: true
+    },
+    initLength: {
+      type: Number,
+      default: 2
     }
   },
   watch: {

src/components/Modal.vue

+<template>
+  <cr-popup
+    v-model="show"
+    :style="{ backgroundColor: 'transparent' }"
+    :closeable="closeable"
+    get-container="body"
+    close-icon="close"
+    class="panel-wrap"
+    @close="onClose"
+  >
+    <div class="panel">
+      <div class="panel-head">
+        <slot name="title">
+          <h4 v-if="title">{{ title }}</h4>
+        </slot>
+      </div>
+      <div class="panel-body">
+        <slot>
+          {{ content }}
+        </slot>
+      </div>
+      <div class="panel-foot">
+        <cr-button size="large" block @click="onConcel" v-if="cancelBtn">
+          {{ cancelBtn }}
+        </cr-button>
+        <cr-button type="warning" size="large" block @click="onConfirm" v-if="confirmBtn">
+          {{ confirmBtn }}
+        </cr-button>
+      </div>
+    </div>
+  </cr-popup>
+</template>
+
+<script>
+const DIALOG_SHOW_EVENT = "input";
+const DIALOG_CLOSE_EVENT = "close";
+const DIALOG_CONFIRM_EVENT = "confirm";
+const DIALOG_CANCEL_EVENT = "cancel";
+export default {
+  name: "Modal",
+  props: {
+    value: null,
+    confirmBtn: {
+      type: String,
+      default: "确定"
+    },
+    cancelBtn: {
+      type: String,
+      default: "取消"
+    },
+    closeable: {
+      type: Boolean,
+      default: true
+    },
+    title: {
+      type: String,
+      default: ""
+    },
+    content: {
+      type: String,
+      default: ""
+    }
+  },
+  data() {
+    return {
+      show: false
+    };
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler(val) {
+        this.show = val;
+      }
+    },
+    show(val) {
+      this.$emit(DIALOG_SHOW_EVENT, val);
+    }
+  },
+  methods: {
+    onClose() {
+      this.$emit(DIALOG_CLOSE_EVENT, {});
+    },
+    onConfirm() {
+      this.$emit(DIALOG_CONFIRM_EVENT, {});
+    },
+    onConcel() {
+      this.$emit(DIALOG_CANCEL_EVENT, {});
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+@import "../style/var.less";
+.panel {
+  background-color: @white;
+  border-radius: @border-radius-md;
+  width: 300px;
+  &-wrap {
+    overflow: initial;
+    @{deep} .cr-popup--close {
+      top: -36px;
+      right: 0;
+      color: @white;
+      font-size: 24px;
+    }
+  }
+  &-head {
+    border-top-left-radius: @border-radius-md;
+    border-top-right-radius: @border-radius-md;
+    padding: @padding-lg @padding-lg 5px @padding-lg;
+    background: url("../assets/dialog-header-bg.png") right no-repeat;
+    background-size: 34px 25px;
+    background-position: right center;
+    h4 {
+      color: @black;
+      font-size: @font-size-18;
+      font-weight: @font-weight-bold;
+      line-height: @line-height-lg + 1;
+    }
+  }
+  &-body {
+    padding: @padding-lg;
+    font-size: @font-size-12;
+    color: @gray-4;
+  }
+  &-foot {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: @padding-lg;
+    .cr-button {
+      width: 48%;
+    }
+  }
+}
+</style>

src/views/Goods/Detail/index.vue

@@ -38,7 +38,7 @@
     </div>
     <detail-footer :company-info="companyInfo" />
     <copyright />
-    <good-action @click="goInsureState = true" @leftClick="showLayer = true" />
+    <good-action @click="goInsureState = true" @leftClick="modalShow = true" />
     <popup-with-iframe
       v-model="popupShow"
       :title="pupopData.title"

src/views/Goods/Detail/modules/CpsRate.vue

@@ -31,7 +31,8 @@
 
 <script>
 import crRadioBtn from "@/components/CrRadioBtn";
-import detail from "@/api/detail.rate.mock";
+import detail from "@/api/detail.huataizhongjixian";
+const { rateInfo } = detail;
 export default {
   name: "GoodsDetail",
   components: {
@@ -39,14 +40,14 @@ export default {
   },
   data() {
     return {
-      detail,
+      rateInfo,
       titleIndex: 0,
       amountIndex: 0
     };
   },
   computed: {
     titleOptions() {
-      return this.detail.map((item, index) => {
+      return this.rateInfo.map((item, index) => {
         return {
           label: item.title,
           value: index
@@ -54,15 +55,15 @@ export default {
       });
     },
     amountOptions() {
-      const { detail, titleIndex } = this;
-      const _length = detail[titleIndex].list.length;
+      const { rateInfo, titleIndex } = this;
+      const _length = rateInfo[titleIndex].list.length;
       return detail[titleIndex].list.map((item, index) => `${_length - index}0万保额`);
     },
     listOptions() {
-      const { detail, titleIndex, amountIndex } = this;
+      const { rateInfo, titleIndex, amountIndex } = this;
       return {
-        age: detail[titleIndex].age,
-        list: detail[titleIndex].list[amountIndex]
+        age: rateInfo[titleIndex].age,
+        list: rateInfo[titleIndex].list[amountIndex]
       };
     }
   },

src/views/Goods/Plan/index.vue

@@ -3,7 +3,7 @@
     <card
       :title="item.title"
       :content="item.desc"
-      v-for="(item, index) in detail"
+      v-for="(item, index) in planInfo"
       :key="index"
       :footer="item.url"
       :class="{ 'no-url': !item.url }"
@@ -18,8 +18,8 @@
 <script>
 import PopupWithIframe from "@/components/PopupWithIframe";
 import card from "@/components/Card";
-
-import detail from "@/api/detail.plan.mock";
+import detail from "@/api/detail.huataizhongjixian";
+const { planInfo } = detail;
 export default {
   name: "GoodsDetail",
   components: {
@@ -28,15 +28,15 @@ export default {
   },
   data() {
     return {
-      detail,
+      planInfo,
       popupShow: false,
       currentPupopIndex: null
     };
   },
   computed: {
     pupopData() {
-      const { detail, currentPupopIndex } = this;
-      const { title, path } = detail[currentPupopIndex] || { title: "", path: "" };
+      const { planInfo, currentPupopIndex } = this;
+      const { title, path } = planInfo[currentPupopIndex] || { title: "", path: "" };
       return {
         title: title.substring(0, title.length - 3),
         path