Merge branch 'feature/goods' into 'master'

Feature/goods

See merge request !7

src/components/Card.vue

 <template>
-  <div class="card" :style="style">
+  <div class="card" :style="styles">
     <div class="card-header">
       <slot name="header">
         <h5 class="card-title" v-if="title">
@@ -35,7 +35,7 @@ export default {
   props: {
     title: {
       type: String,
-      required: true
+      default: ""
     },
     content: {
       type: String,
@@ -51,7 +51,7 @@ export default {
       type: String,
       default: ""
     },
-    style: {
+    styles: {
       type: Object,
       default() {
         return {};

src/components/CrRadioBtn.vue

 <template>
-  <cr-radio-group v-model="value" class="radio-btn">
+  <cr-radio-group v-model="radioVal" class="radio-btn">
     <cr-radio
       :name="item.value"
       :class="{ checked: value === item.value }"
@@ -25,8 +25,17 @@ export default {
   },
   watch: {
     value(val) {
+      this.radioVal = val;
+      this.$emit(CHANGE_EVENT, val);
+    },
+    radioVal(val) {
       this.$emit(CHANGE_EVENT, val);
     }
+  },
+  data() {
+    return {
+      radioVal: ""
+    };
   }
 };
 </script>

src/components/GoodAction.vue

@@ -18,7 +18,7 @@
 
 <script>
 const LEFT_BTN_CLICK_EVENT = "leftClick";
-const RIGHT_BTN_CLICK_EVENT = "rightClick";
+const RIGHT_BTN_CLICK_EVENT = "click";
 export default {
   name: "GoodAction",
   props: {
@@ -45,7 +45,6 @@ export default {
     },
     rightClick() {
       // TODO
-      this.$router.push("/goods/inform");
       this.$emit(RIGHT_BTN_CLICK_EVENT, {});
     }
   }

src/views/Goods/detail.less

@@ -38,11 +38,15 @@
     background-color: @gray-1;
     border-radius: @border-radius-md;
     margin-bottom: 12px;
+    align-items: center;
+    padding: 9px 16px;
     &::after {
       display: none;
     }
     &__title {
       color: #333333;
+      display: flex;
+      align-items: center;
     }
   }
   &-item_nobg {
@@ -76,6 +80,11 @@
       color: @black;
       margin-right: 4px;
     }
+    .cr-switch {
+      /deep/ &__control {
+        box-shadow: none;
+      }
+    }
     .cr-tag {
       margin: 0 auto 0 8px;
       color: @white !important;
@@ -94,7 +103,8 @@
     /deep/ .cr-checkbox__label {
       font-size: @font-size-11;
       color: @gray-4;
-      line-height: @line-height-lg;
+      margin-left: 5px;
+      // line-height: @line-height-lg;
     }
     &-link {
       margin-top: -3.5px;

src/views/Goods/detail.vue

@@ -15,14 +15,22 @@
       <card title="请填写投保信息">
         <h6 class="insure-form-title">本人信息</h6>
         <cr-cell-group class="insure-form">
-          <cr-field v-model="value" placeholder="请输入投保人姓名" label="姓名" />
-          <cr-field v-model="value" placeholder="信息保密，仅用于投保" label="身份证号" />
+          <cr-field v-model="formData.selfName" placeholder="请输入投保人姓名" label="姓名" />
+          <cr-field
+            v-model="formData.selfIdNo"
+            placeholder="信息保密，仅用于投保"
+            label="身份证号"
+          />
         </cr-cell-group>
         <h6 class="insure-form-title">为谁投保</h6>
         <cr-radio-btn v-model="formData.insured" :radio-data="insuredOptions" />
         <cr-cell-group class="insure-form">
-          <cr-field v-model="value" placeholder="请输入投保人姓名" label="姓名" />
-          <cr-field v-model="value" placeholder="信息保密，仅用于投保" label="身份证号" />
+          <cr-field v-model="formData.relativeName" placeholder="请输入投保人姓名" label="姓名" />
+          <cr-field
+            v-model="formData.relativeIdNo"
+            placeholder="信息保密，仅用于投保"
+            label="身份证号"
+          />
           <cr-cell title="缴费方式" class="insure-form-item_nobg">
             <cr-radio-btn v-model="formData.payway" :radio-data="paywayOptions" />
           </cr-cell>
@@ -33,7 +41,7 @@
           <h5 class="card-title">开通次年自动续保</h5>
           <cr-tag type="warning">小果建议您开通</cr-tag>
           <div class="insure-form-switch-option">
-            <span class="insure-form-switch-label">已开通</span>
+            <span class="insure-form-switch-label">{{ formData.auto ? "已" : "未" }}开通</span>
             <cr-switch v-model="formData.auto" active-color="#FFC842" size="23.5px" />
           </div>
         </div>
@@ -44,14 +52,14 @@
       <card
         title="投保须知"
         :option="['查看完整费率表']"
-        :footer="true"
+        footer="协议"
         @option-click="openIframePupop(6)"
       >
         <compactCellGroup :cell-data="noticeCellData" />
         <div class="insure-form-pact" slot="footer">
           <cr-checkbox
             shape="round"
-            icon-size="12px"
+            icon-size="13px"
             v-model="formData.pact"
             checked-color="#FFC842"
           >
@@ -69,7 +77,13 @@
         </div>
       </card>
       <card class="intro">
-        <cr-image :src="item" v-for="(item, index) in introImg" :key="index" />
+        <cr-image
+          :src="item"
+          v-for="(item, index) in introImg"
+          :key="index"
+          width="100%"
+          height="auto"
+        />
       </card>
       <cps-demo />
       <cps-process @click="openIframePupop" />
@@ -77,7 +91,7 @@
     </div>
     <detail-footer />
     <copyright />
-    <good-action />
+    <good-action @click="goInsureState = true" />
     <protocol-iframe
       v-model="popupShow"
       :title="pupopData.title"
@@ -176,27 +190,36 @@ export default {
       popupShow: false,
       currentPupopIndex: null,
       popupArray: [
-        { title: "保险条款", url: "http://pages.xyqb.com/p/d3c0c8d6-ddea-4335-8aaf-f09dafc580e9/" },
-        { title: "健康告知", url: "http://pages.xyqb.com/p/d3c0c8d6-ddea-4335-8aaf-f09dafc580e9/" },
+        {
+          title: "保险条款",
+          url: "http://mangguo-contract.qthbx.com/taikang-bao-xian-tiao-kuan-v1/"
+        },
+        {
+          title: "健康告知",
+          url: "http://mangguo-contract.qthbx.com/taikang-jian-kang-gao-zhi-v1/"
+        },
         {
           title: "投保须知及声明",
-          url: "http://pages.xyqb.com/p/d3c0c8d6-ddea-4335-8aaf-f09dafc580e9/"
+          url: "http://mangguo-contract.qthbx.com/taikang-toubaoxuzhi-v1/"
         },
         {
           title: "平台服务协议",
-          url: "http://pages.xyqb.com/p/d3c0c8d6-ddea-4335-8aaf-f09dafc580e9/"
+          url: "http://mangguo-contract.qthbx.com/fu-wu-xie-yi-v1/"
         },
         { title: "保险计划" },
         { title: "保险计划" },
         { title: "完整费率" },
-        { title: "自动续保", url: "http://pages.xyqb.com/p/d3c0c8d6-ddea-4335-8aaf-f09dafc580e9/" }
+        {
+          title: "自动续保服务协议",
+          url: "http://pages.xyqb.com/p/d3c0c8d6-ddea-4335-8aaf-f09dafc580e9/"
+        }
       ],
       formData: {
         planValue: "3",
         insured: "1",
         payway: "1",
-        auto: true,
-        pact: true
+        auto: false,
+        pact: false
       },
       goInsureState: false
     };

src/views/Goods/index.vue

 <template>
   <div class="container">
-    <cr-sticky class="goods-head">
+    <!-- <cr-sticky class="goods-head">
       <cr-tabbar v-model="active" active-color="#333" inactive-color="#666">
         <cr-tabbar-item>全部</cr-tabbar-item>
         <cr-tabbar-item>成人</cr-tabbar-item>
         <cr-tabbar-item>老年</cr-tabbar-item>
         <cr-tabbar-item>少儿</cr-tabbar-item>
       </cr-tabbar>
-    </cr-sticky>
+    </cr-sticky> -->
     <good-list :list="goodsList" />
     <ai-test-tip />
     <tabbar></tabbar>

src/views/Goods/modules/CompactCellGroup.vue

@@ -9,8 +9,8 @@
     <cr-cell
       v-for="(item, index) in cellData"
       :key="index"
-      :title="!item.title.needSlot && (item.title.tpl || item.title)"
-      :value="!item.value.needSlot && (item.value.tpl || item.value)"
+      :title="item.title.tpl || item.title"
+      :value="item.value.tpl || item.value"
       :class="{ 'compact-cell': 1, 'compact-cell_br': item.value.longTxt }"
       @click="cellClick(item)"
     >
@@ -103,7 +103,7 @@ export default {
   &_br {
     /deep/ .cr-cell__value {
       flex: none;
-      width: 165px;
+      width: 70%;
     }
   }
 }

src/views/Goods/modules/DetailHeader.vue

@@ -78,7 +78,6 @@ export default {
       font-weight: normal !important;
       strong {
         font-weight: bold;
-        margin: 0 3px;
       }
     }
   }

src/views/Goods/modules/GoInsureDialog.vue

 <template>
-  <transition name="panel-fade">
   <cr-popup
     v-model="show"
     :style="{ backgroundColor: 'transparent' }"
@@ -34,7 +33,6 @@
       </div>
     </div>
   </cr-popup>
-  </transition>
 </template>
 
 <script>
@@ -84,33 +82,6 @@ export default {
 
 <style lang="less" scoped>
 @import "../../../style/var.less";
-.panel-fade-enter-active {
-  animation: dialog-fadein 0.4s;
-  .panel {
-    animation: dialog-zoom 0.4s;
-  }
-}
-
-@keyframes dialog-fadein {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-@keyframes dialog-zoom {
-  0% {
-    transform: scale(0);
-  }
-  50% {
-    transform: scale(1.1);
-  }
-  100% {
-    transform: scale(1);
-  }
-}
 .panel {
   background-color: @white;
   border-radius: @border-radius-md;
@@ -149,6 +120,36 @@ export default {
   }
 }
 .pay {
+  &-det {
+    padding-left: 34px;
+    position: relative;
+    &::after,
+    &::before {
+      content: " ";
+      display: block;
+      position: absolute;
+      left: 18px;
+      width: 8px;
+      height: 8px;
+      border-radius: @border-radius-max;
+      border: 1px solid @black;
+    }
+    &::before {
+      background-color: @orange-light;
+      top: 24px;
+    }
+    &::after {
+      bottom: 26.5px;
+    }
+    /deep/ & > div:first-child {
+      position: absolute;
+      left: 22.5px;
+      top: 35px;
+      height: 14px;
+      width: 0;
+      border-right: 1px dotted @gray-4;
+    }
+  }
   &-tip {
     font-size: @font-size-12;
     color: @gray-4;

vue.config.js

@@ -41,7 +41,6 @@ module.exports = {
           priority: 10,
           chunks: "initial" // only package third parties that are initially dependent
         },
-        // TODO 🤨打包没用，emmmmmmmmmmm
         cherryUI: {
           name: "chunk-cherryUI", // split cherryUI into a single package
           priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app