顾问流程完成

src/style/index.less

 @import "reset.less";
 @import "var.less";
 @import "mixins.less";
-html,body,#app {
+html,
+body,
+#app {
   height: 100%;
 }
 body {
@@ -117,14 +119,36 @@ a {
       font-weight: @font-weight-bold;
       padding: 12px 9px 12px 18px;
       text-align: left;
-      border-bottom: 1px solid #ECE9E9;
+      border-bottom: 1px solid #ece9e9;
     }
     td {
       color: @black;
       font-size: @font-size-12;
       padding: @padding-sm + 2 @padding-md + 2;
-      border-bottom: 1px solid #ECE9E9;
+      border-bottom: 1px solid #ece9e9;
       text-align: left;
     }
   }
 }
+.searching {
+  animation: search-move 2s;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+@keyframes search-move {
+  0% {
+    transform: translate(49.369px, 66.02px) rotate(-45deg);
+  }
+  25% {
+    transform: translate(39.369px, 66.02px) rotate(-45deg);
+  }
+  50% {
+    transform: translate(39.369px, 76.02px) rotate(-45deg);
+  }
+  75% {
+    transform: translate(49.369px, 76.02px) rotate(-45deg);
+  }
+  100% {
+    transform: translate(49.369px, 66.02px) rotate(-45deg);
+  }
+}

src/views/Consultant/Question/index.less

@@ -10,6 +10,7 @@
     &-title {
       display: flex;
       justify-content: space-between;
+      width: 100%;
     }
     &-footer {
       text-align: center;
@@ -17,13 +18,21 @@
         .sub-text-mixins();
       }
     }
+    &-body {
+      @{deep} .wheel-item {
+        font-size: 16px;
+      }
+      @{deep} .cr-picker--toolbar {
+        display: none;
+      }
+    }
   }
   .card {
     @{deep} &-header {
       flex-wrap: wrap;
     }
   }
-  .radio-btn {
+  .qus-radio {
     width: 100%;
     justify-content: space-between;
     flex-wrap: wrap;
@@ -50,15 +59,133 @@
   font-size: @font-size-18;
   font-weight: @font-weight-bold;
   color: @black;
-  line-height:@line-height-lg + 4;
+  line-height: @line-height-lg + 4;
   em {
     font-style: normal;
     font-size: @font-size-18;
     font-weight: @font-weight-bold;
-    color: #E4D82B;
+    color: #e4d82b;
   }
 }
 .cul-tip {
   margin-top: 8px;
   color: @gray-4;
+  width: 100%;
+}
+.cul-inline {
+  @{deep} .cr-radio {
+    width: 100% !important;
+    margin-right: 0 !important;
+  }
+}
+.qus-form {
+  @{deep} .cr-field--error-message {
+    display: none;
+  }
+  &_radio {
+    background-color: @white !important;
+    overflow: initial;
+    padding: 0 0 0 16px !important;
+    @{deep} .cr-cell {
+      &__value {
+        overflow: initial;
+      }
+    }
+  }
+  @{deep} .cr-cell {
+    &-group {
+      &::after {
+        display: none;
+      }
+    }
+    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;
+    }
+  }
+  .radio-btn {
+    margin-bottom: 0;
+    margin-left: auto;
+    justify-content: space-between;
+    @{deep} .cr-radio {
+      margin-bottom: 0;
+      width: 72px;
+      border-radius: 14px;
+    }
+  }
+}
+.subing {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  &-item {
+    position: relative;
+    &::after {
+      content: " ";
+      display: block;
+      position: absolute;
+      top: 122px;
+      left: 0;
+      width: 68px;
+      height: 0;
+      background-color: rgba(133, 138, 255, 0.21);
+      box-shadow: 27px -3px 26px 14px rgba(133, 138, 255, 0.37);
+    }
+  }
+  .svg-icon {
+    width: 111px;
+    height: 127px;
+  }
+  &-mask {
+    background-color: #fff;
+  }
+  &-title {
+    text-align: center;
+    h3 {
+      font-size: 20px;
+      font-weight: bold;
+      line-height: 28px;
+      color: #858aff;
+      margin: 30px 0 6px;
+    }
+    small {
+      display: block;
+      .sub-text-mixins();
+    }
+  }
+}
+.ani_dot {
+  display: inline-block;
+  width: 0.8em;
+  vertical-align: bottom;
+  overflow: hidden;
+  animation: dot 2s infinite step-start;
+}
+@keyframes dot {
+  0% {
+    width: 0;
+    margin-right: 0.8em;
+  }
+  33% {
+    width: 0.3em;
+    margin-right: 0.5em;
+  }
+  66% {
+    width: 0.5em;
+    margin-right: 0.3em;
+  }
+  100% {
+    width: 0.8em;
+    margin-right: 0;
+  }
 }

src/views/Consultant/Question/index.vue

@@ -16,34 +16,136 @@
       </div>
       <card title="1" footer="1">
         <template slot="header">
-          <h5 class="cul-hd-card-title">您准备为谁买保险？</h5>
-          <span class="step"><em>1</em>/8</span>
-          <div class="cul-tip">
-            想为多人买保险的情况，请在和保险顾问沟通时说明信息，保险顾问会为每一位家人量身定制方案哦~=
-          </div>
+          <h5 class="cul-hd-card-title">
+            <span>{{ stepTips[currentStep].title }}</span>
+            <span class="step">
+              <em>{{ currentStep + 1 }}</em>
+              / {{ stepTips.length }}
+            </span>
+          </h5>
+          <div class="cul-tip">{{ stepTips[currentStep].sub }}</div>
         </template>
-        <div class="cul-hd-card-body">
-          <cr-radio-btn v-model="formData.planValue" :radio-data="insuredOptions" />
+        <cr-form class="cul-hd-card-body" @submit="onSubmit" @failed="onFailed">
+          <cr-radio-btn
+            v-model="formData.who"
+            class="qus-radio"
+            :radio-data="insuredOptions"
+            v-show="currentStep === 0"
+          />
+          <cr-date-picker
+            ref="birthday"
+            @change="
+              (picker, value) => {
+                onPickerChange(picker, value, 'birthday');
+              }
+            "
+            v-show="currentStep === 1"
+            :show-toolbar="false"
+          />
+          <cr-radio-btn
+            v-model="formData.social"
+            :radio-data="hasSocialOptions"
+            class="qus-radio cul-inline"
+            v-show="currentStep === 2"
+          />
+          <cr-picker
+            ref="income"
+            :columns="incomeOptions"
+            @change="
+              (picker, value) => {
+                onPickerChange(picker, value, 'income');
+              }
+            "
+            v-show="currentStep === 3"
+            :show-toolbar="false"
+          />
+          <cr-picker
+            ref="loan"
+            :columns="loanOptions"
+            @change="
+              (picker, value) => {
+                onPickerChange(picker, value, 'loan');
+              }
+            "
+            v-show="currentStep === 4"
+            :show-toolbar="false"
+          />
+          <cr-area
+            ref="area"
+            :list="areaList"
+            @change="
+              (picker, value) => {
+                onPickerChange(picker, value, 'area');
+              }
+            "
+            :columns-num="2"
+            v-show="currentStep === 5"
+          />
+          <cr-radio-btn
+            v-model="formData.solve"
+            :radio-data="solveOptions"
+            class="qus-radio cul-inline"
+            v-show="currentStep === 6"
+          />
+          <div class="qus-form" v-show="currentStep === 7">
+            <cr-field
+              v-model="formData.username"
+              name="姓名"
+              label="姓名"
+              placeholder="请输入投保人姓名"
+              :rules="[{ required: true, message: '请填写姓名' }]"
+            />
+            <cr-field
+              class="qus-form_radio"
+              name="您的性别"
+              label="您的性别"
+              :rules="[{ required: true, message: '请选择性别' }]"
+            >
+              <cr-radio-btn slot="input" v-model="formData.sex" :radio-data="sexOptions" />
+            </cr-field>
+            <cr-field
+              v-model="formData.phone"
+              type="password"
+              name="预留手机"
+              label="预留手机"
+              placeholder="请输入手机号"
+              :rules="[{ required: true, message: '请输入手机号' }]"
+            />
+            <cr-field
+              v-model="formData.code"
+              name="验证码"
+              label="验证码"
+              placeholder="输入短信验证码"
+              :rules="[{ required: true, message: '输入短信验证码' }]"
+            >
+              <a href="javascript:;" slot="button">发送验证码</a>
+            </cr-field>
           </div>
+        </cr-form>
         <div slot="footer" class="cul-hd-card-footer">
-          <cr-button
-            type="warning"
-            size="large"
-            block
-            @click="$router.push('/consultant/exclusive')"
-          >
-            下一步
-          </cr-button>
-          <a href="javascsript:;">返回上一步</a>
+          <cr-button type="warning" size="large" block @click="nextQuestion">下一步</cr-button>
+          <a href="javascsript:;" @click="prevQuestion" v-show="currentStep > 0">返回上一步</a>
         </div>
       </card>
     </div>
+    <cr-overlay class="subing-mask" :show="showSubState" @click="showSubState = false">
+      <div class="subing">
+        <div class="subing-item">
+          <svg-icon icon-class="order" />
+          <div class="subing-title">
+            <h3>问卷分析中<span class="ani_dot">...</span></h3>
+            <small>正在为您分配顾问，请稍等</small>
+          </div>
+        </div>
+      </div>
+    </cr-overlay>
   </div>
 </template>
 
 <script>
 import CrRadioBtn from "@/components/CrRadioBtn";
 import Card from "@/components/Card";
+import areaList from "@qg/cherry-ui/src/area/demo/china";
 export default {
   name: "ConsultantQuestion",
   components: {
@@ -52,8 +154,42 @@ export default {
   },
   data() {
     return {
+      areaList,
       formData: {},
-
+      currentStep: 0,
+      showSubState: false,
+      stepTips: [
+        {
+          title: "您准备为谁买保险？",
+          sub:
+            "想为多人买保险的情况，请在和保险顾问沟通时说明信息，保险顾问会为每一位家人量身定制方案哦~~"
+        },
+        {
+          title: "请选择TA的出生日期？",
+          sub: "出生日期会影响保费计算，准确的填写可让保险顾问帮您更精准的测算保费~"
+        },
+        { title: "请选择TA有无社保", sub: "新农合也算社保哦~~" },
+        {
+          title: "请选择您的年收入？",
+          sub: "保险顾问会根据您的年收入，帮您选择合适的额度和保费预算"
+        },
+        {
+          title: "请问您每月要还多少贷款呢？",
+          sub: "贷款包含房贷、车贷、信用卡等，了解您的贷款情况，能让顾问更好的帮您定制寿险额度"
+        },
+        {
+          title: "请选择您的居住城市？",
+          sub: "保险产品的销售会受到地区的限制，了解您的居住城市能让顾问帮您挑选到合适的保险"
+        },
+        {
+          title: "您主要想解决哪方面问题？",
+          sub: "告诉保险顾问您的咨询意向，可以为您提供更专业的服务哦"
+        },
+        {
+          title: "请填写您的个人信息",
+          sub: "请预留您的信息，保险师会在您方便时联系您"
+        }
+      ],
       insuredOptions: [
         { label: "本人", value: "1" },
         { label: "配偶", value: "2" },
@@ -66,6 +202,10 @@ export default {
         { label: "有", value: "1" },
         { label: "无", value: "2" }
       ],
+      sexOptions: [
+        { label: "男", value: "1" },
+        { label: "女", value: "2" }
+      ],
       incomeOptions: ["10万", "20万", "25万", "30万"],
       loanOptions: ["无房贷", "1000元", "2000元", "3000元", "4000元"],
       solveOptions: [
@@ -81,7 +221,52 @@ export default {
       ]
     };
   },
-  mounted() {}
+  watch: {
+    currentStep(val) {
+      this.$forceUpdate();
+      if (val === 1) {
+        this.$refs["birthday"].refreshColumns();
+      }
+      if (val === 3) {
+        this.$refs["income"].refreshColumns();
+      }
+      if (val === 4) {
+        this.$refs["loan"].refreshColumns();
+      }
+      if (val === 5) {
+        this.$refs["area"].refreshColumns();
+      }
+    }
+  },
+  mounted() {},
+  methods: {
+    nextQuestion() {
+      if (this.currentStep === 7) {
+        this.showSubState = true;
+        setTimeout(() => {
+          this.showSubState = false;
+          this.$router.push("/consultant/exclusive");
+        }, 3000);
+        return;
+      }
+      this.currentStep++;
+    },
+    prevQuestion() {
+      if (this.currentStep === 0) {
+        return;
+      }
+      this.currentStep--;
+    },
+    onPickerChange(picker, value, type) {
+      this.formData[type] = value;
+    },
+    async onSubmit() {
+      // console.log('sucess', values);
+    },
+    onFailed() {
+      // console.log('fail', errorInfo);
+    }
+  }
 };
 </script>
 <style lang="less" src="./index.less" scoped></style>