feat: 信用钱包登录授权

src/App.vue

@@ -5,20 +5,20 @@
       <cr-loading class="loading" size="24px">加载中...</cr-loading>
     </div>
     <login-modal />
-    <!-- <auth-from-xyqb /> -->
+    <auth-from-xyqb v-if="showAuthXyqb !== -1" />
   </div>
 </template>
 <script>
 import { mapState, mapActions } from "vuex";
 import LoginModal from "@/components/LoginModal";
-// import AuthFromXyqb from "@/components/AuthFromXyqb";
+import AuthFromXyqb from "@/components/AuthFromXyqb";
 export default {
   components: {
-    LoginModal
-    // AuthFromXyqb
+    LoginModal,
+    AuthFromXyqb
   },
   computed: {
-    ...mapState(["isLoading"])
+    ...mapState(["isLoading", "showAuthXyqb"])
   },
   methods: {
     ...mapActions(["setIsLoading"])

src/api/consultant.js

@@ -17,7 +17,7 @@ export const subCulQus = param => {
 
 // 创建顾问订单-顾问建议
 export const getCulsuggestion = param => {
-  return req.post("consultant/suggestion/detail", param);
+  return req.get("consultant/suggestion/detail", param);
 };
 
 // 查询顾问订单信息

src/assets/icons/svg/mongo.svg

+<?xml version="1.0" encoding="utf-8"?>
+<svg width="19px" height="24px" viewBox="0 0 19 24" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
+  <desc>Created with Lunacy</desc>
+  <g id="编组-16">
+    <g id="Group-4">
+      <g id="编组-6备份-2" transform="translate(0 5.49753)">
+        <path d="M14.7907 8.12161C14.928 7.5971 15.0011 7.04668 15.0011 6.47923C15.0011 2.90085 12.0944 0 8.5087 0C5.37816 0 2.76513 2.21116 2.1522 5.15389C1.94346 6.06961 1.97458 6.74032 2.00379 7.37005C2.05333 8.43799 2.09741 9.38809 0.956865 11.2155C-1.04322 14.4201 -0.0668537 17.7948 5.40055 17.3018C9.34282 16.9463 14.0045 12.609 14.7907 8.12161Z" transform="translate(0.01797025 0)" id="形状结合备份" fill="#FFC842" fill-rule="evenodd" stroke="none" />
+      </g>
+      <g id="编组-9" transform="matrix(0.9063078 -0.4226183 0.4226183 0.9063078 10.52739 1.996085)">
+        <path d="M2.55122 2.85733C3.31589 1.52494 3.1481 1.37214e-13 3.1481 1.37214e-13C3.1481 1.37214e-13 -0.22388 1.52175 0.0159214 4.82779C0.0159214 4.82779 1.78654 4.18971 2.55122 2.85733Z" transform="translate(0.1109306 0.04346367)" id="路径-10" fill="#6EA372" stroke="none" />
+        <path d="M1.69558 1.90091C2.27613 0.973579 2.17791 1.51344e-14 2.17791 1.51344e-14C2.17791 1.51344e-14 -0.0543487 0.926454 0.00135625 3.22707C0.00135625 3.22707 1.11504 2.82824 1.69558 1.90091Z" transform="matrix(0.6427876 0.7660444 -0.7660444 0.6427876 3.112117 3.625421)" id="路径-10备份" fill="#6EA372" stroke="none" />
+      </g>
+    </g>
+    <path d="M4.41006 0.364952C4.44825 0.128299 4.67106 -0.0325839 4.90771 0.00560971C5.14436 0.0438034 5.30525 0.26661 5.26705 0.503263C4.86031 3.02353 3.29455 4.90914 0.614453 6.13307C0.396399 6.23265 0.138907 6.13661 0.0393278 5.91856C-0.0602516 5.7005 0.0357906 5.44301 0.253844 5.34343C2.68135 4.23485 4.05186 2.58437 4.41006 0.364952Z" transform="matrix(0.8746197 -0.4848096 0.4848096 0.8746197 7.804443 11.72031)" id="路径-12" fill="#FFFFFF" stroke="none" />
+  </g>
+</svg>
\ No newline at end of file

src/components/AuthFromXyqb.vue

 <template>
-  <cr-popup
-    v-model="showAuthXyqb"
-    get-container="body"
-    round
-    closeable
-    position="bottom"
-    class="auth"
-  >
-    111
+  <cr-popup v-model="showAuth" get-container="body" position="bottom" class="auth-popup">
+    <div class="auth">
+      <div class="auth-title">
+        <svg-icon icon-class="mongo" />
+        <strong>芒果保险</strong>申请获取
+      </div>
+      <div class="auth-list">
+        <div class="auth-item" v-for="(item, index) in userInfo" :key="index">
+          <div class="auth-item-title">你的{{ item.label }}</div>
+          <div class="auth-item-info">
+            <strong>{{ item.value }}</strong>
+            信用钱包绑定{{ item.label }}
+          </div>
+          <cr-divider />
+        </div>
+      </div>
+      <div class="auth-protocol">
+        允许即表示同意
+        <a href>《用户协议》</a>
+        <a href>《隐私政策》</a>
+      </div>
+      <div class="auth-foot">
+        <cr-button class="wx-default" @click="setAuthXyqb(3)">拒绝</cr-button>
+        <cr-button class="wx-primary" @click="setAuthXyqb(4)">允许</cr-button>
+      </div>
+    </div>
   </cr-popup>
 </template>
 
 <script>
 import { mapState, mapActions } from "vuex";
+import localStorage from "@/service/localStorage";
+const xyqbUserInfo = localStorage.get("xyqbUserInfo") || {};
+
 export default {
   name: "AuthFromXyqb",
   data() {
-    return {};
+    return {
+      showAuth: true,
+      userInfo: [
+        {
+          label: "手机号码",
+          value: xyqbUserInfo.phoneNoMask
+        },
+        {
+          label: "姓名",
+          value: xyqbUserInfo.nameMask
+        },
+        {
+          label: "身份证号码",
+          value: xyqbUserInfo.idNoMask
+        }
+      ]
+    };
+  },
+  watch: {
+    showAuthXyqb: {
+      immediate: true,
+      handler(val) {
+        this.showAuth = val === 2;
+      }
+    }
   },
   computed: {
     ...mapState(["showAuthXyqb"])
@@ -29,4 +73,68 @@ export default {
 
 <style lang="less" scoped>
 @import "../style/var.less";
+@import "../style/mixins.less";
+.auth {
+  padding: 30px 20px;
+  &-popup {
+    border-top-left-radius: @border-radius-sm;
+    border-top-right-radius: @border-radius-sm;
+  }
+  &-title {
+    color: @black;
+    font-size: @font-size-16;
+    padding: 2px 0 26px;
+    .svg-icon {
+      width: 18px;
+      height: 18px;
+    }
+    strong {
+      font-weight: @font-weight-bold;
+      margin: 0 10px 0 12px;
+    }
+  }
+  &-list {
+    margin-bottom: -8px;
+  }
+  &-item {
+    &-title {
+      font-size: 24px;
+      font-weight: @font-weight-bold;
+      color: @black;
+      line-height: @line-height-lg;
+      margin: 20px 0;
+    }
+    &-info {
+      .sub-text-mixins();
+      font-size: 14px;
+      strong {
+        font-size: 16px;
+        font-weight: @font-weight-bold;
+        color: @black;
+      }
+    }
+  }
+  &-protocol {
+    .sub-text-mixins();
+    margin: 20px 0;
+  }
+  &-foot {
+    display: flex;
+    justify-content: space-between;
+    .cr-button {
+      width: 160px;
+      height: 40px;
+      line-height: 40px;
+      font-size: 18px;
+      border-radius: 4px !important;
+    }
+    .wx-default {
+      color: #00be57 !important;
+    }
+    .wx-primary {
+      background-color: #09c060 !important;
+      color: #fff !important;
+    }
+  }
+}
 </style>

src/main.js

@@ -17,5 +17,6 @@ new Vue({
 }).$mount("#app");
 
 // if (process.env.NODE_ENV !== "development") {
+// ! 上线后务必取掉
 new vConsole();
 // }

src/router/index.js

@@ -2,9 +2,9 @@ import Vue from "vue";
 import VueRouter from "vue-router";
 import routes from "./routes";
 import { parseSearch } from "@/service/utils";
-import { isXyqb } from "@/service/validation";
-// import cfg from "@/config";
-import { authByxyqb } from "@/api/user";
+import { isXyqb, isWeixinBrower } from "@/service/validation";
+import cfg from "@/config";
+import { authByxyqb, getwxOpenId } from "@/api/user";
 import localStorage from "@/service/localStorage";
 Vue.use(VueRouter);
 
@@ -25,7 +25,7 @@ const router = new VueRouter({
 router.beforeEach((to, from, next) => {
   const urlParams = parseSearch(window.location.href);
   if (isXyqb) getAuthInfo(urlParams.token);
-  // if (isWeixinBrower) getWxOpenId(urlParams.code);
+  if (isWeixinBrower) getWxOpenId(urlParams.code);
   next();
 });
 
@@ -39,12 +39,12 @@ async function getAuthInfo(xyqbToken) {
   }
 }
 
-// async function getWxOpenId(code) {
-//   if (localStorage.get("openId")) return;
-//   const res = await getwxOpenId({ code, appId: cfg.wxAppId });
-//   this.openId = res.openId;
-//   localStorage.set("openId", res.openId);
-// }
+async function getWxOpenId(code) {
+  if (localStorage.get("openId")) return;
+  const res = await getwxOpenId({ code, appId: cfg.wxAppId });
+  this.openId = res.openId;
+  localStorage.set("openId", res.openId);
+}
 // router.afterEach(() => {});
 
 export default router;

src/store/index.js

 import Vue from "vue";
 import Vuex from "vuex";
 import user from "./modules/user";
+import { isXyqb } from "@/service/validation";
+import localStorage from "@/service/localStorage";
 
+const XYQB_AUTH_STATE = localStorage.get("xyqbAuthState") || 1;
 Vue.use(Vuex);
 
 export default new Vuex.Store({
@@ -9,7 +12,7 @@ export default new Vuex.Store({
     activeIdx: 0,
     isLoading: false,
     isShowLogin: false,
-    showAuthXyqb: "init" // init 已获取信息未授权，pending 授权弹框， reject 拒绝授权，resolve允许授权
+    showAuthXyqb: isXyqb ? XYQB_AUTH_STATE : -1 // 1 已获取信息未授权，2 打开授权弹框， 3 拒绝授权，4 允许授权, -1 非信用钱包环境
   },
   mutations: {
     setActiveIdx(state, value) {
@@ -23,6 +26,7 @@ export default new Vuex.Store({
     },
     setAuthXyqb(state, value) {
       state.showAuthXyqb = value;
+      localStorage.set("xyqbAuthState", value);
     }
   },
   actions: {

src/style/index.less

@@ -54,38 +54,41 @@ input::-webkit-input-placeholder {
   &--round {
     border-radius: 1em !important;
   }
-  &_light {
-    background-color: @tag-default-light-background-color !important;
-    color: @tag-default-light-color !important;
-  }
   &--primary {
     background-color: @tag-primary-background-color !important;
     color: @tag-primary-color !important;
-    &_light {
-      background-color: @tag-primary-light-background-color !important;
-      color: @tag-primary-light-color !important;
-    }
   }
   &--success {
     background-color: @tag-success-background-color !important;
     color: @tag-success-color !important;
-    &_light {
-      background-color: @tag-success-light-background-color !important;
-      color: @tag-success-light-color !important;
-    }
   }
   &--danger {
     background-color: @tag-danger-background-color !important;
     color: @tag-danger-color !important;
-    &_light {
-      background-color: @tag-danger-light-background-color !important;
-      color: @tag-danger-light-color !important;
-    }
   }
   &--warning {
     background-color: @tag-warning-background-color !important;
     color: @tag-warning-color !important;
-    &_light {
+  }
+  &--plain {
+    background-color: @tag-default-light-background-color !important;
+    color: @tag-default-light-color !important;
+    &::after {
+      display: none;
+    }
+    &.cr-tag--primary {
+      background-color: @tag-primary-light-background-color !important;
+      color: @tag-primary-light-color !important;
+    }
+    &.cr-tag--success {
+      background-color: @tag-success-light-background-color !important;
+      color: @tag-success-light-color !important;
+    }
+    &.cr-tag--danger {
+      background-color: @tag-danger-light-background-color !important;
+      color: @tag-danger-light-color !important;
+    }
+    &.cr-tag--warning {
       background-color: @tag-warning-light-background-color !important;
       color: @tag-warning-light-color !important;
     }

src/views/Consultant/Buy/index.vue

@@ -82,6 +82,7 @@
 <script>
 import localStorage from "@/service/localStorage";
 import { payByWay } from "@/service/pay";
+import { isXyqb } from "@/service/validation";
 import { mapActions, mapState } from "vuex";
 import { create, goPay } from "@/api/consultant";
 import Card from "@/components/Card";
@@ -107,7 +108,7 @@ export default {
       remain: 126,
       price: [0.99, 199],
       consultantOrderNo: "",
-      tradeType: "JSAPI",
+      tradeType: isXyqb ? "MWEB" : "JSAPI",
       serviceList: [
         { icon: "team", title: "资深", sub: "保险精算团队" },
         { icon: "card", title: "专属", sub: "保险顾问" },
@@ -234,12 +235,13 @@ export default {
     async goPay() {
       const res = await goPay({ tradeType: this.tradeType });
       if (res) {
-        payByWay(this.tradeType, res.payInfo).then(() => {
-          this.$notify({ type: "success", message: "支付成功" });
+        payByWay(this.tradeType, res.payInfo).then(res => {
+          if (res === "ok") {
             setTimeout(() => {
               // this.$router.push("/consultant/success");
               this.$parent.getOrderInfo();
             }, 2000);
+          }
         });
       }
     }

src/views/Consultant/Exclusive/index.vue

@@ -3,10 +3,10 @@
     <div class="cul-hd">
       <div class="cul-hd-info">
         <small>“保险从业多年，口碑极佳”</small>
-        <h1>李玉婷</h1>
-        <cr-tag><svg-icon icon-class="medal" />金牌保险顾问</cr-tag>
+        <h1>{{ info.name }}</h1>
+        <cr-tag><svg-icon icon-class="medal" />{{ info.role }}</cr-tag>
         <small>执业保险销售资质：</small>
-        <small>201920000000800<br />02020003828</small>
+        <small v-html="`${info.id.slice(0, 15)}<br />${info.id.slice(15)}`"></small>
       </div>
       <cr-image
         class="cul-hd-img"
@@ -36,20 +36,20 @@
           </div>
           <div class="cul-rate">
             <div class="cul-rate-item">
-              <h2>38100</h2>
+              <h2>{{ info.serveNum }}</h2>
               <p>已服务用户人</p>
             </div>
             <div class="cul-rate-item">
-              <h2>99.8%</h2>
+              <h2>{{ info.rate }}</h2>
               <p>满意度</p>
             </div>
           </div>
         </div>
         <div class="cul-tel">
-          <a class="cul-tel-num" href="tel:13888888888">
-            <svg-icon icon-class="call" />138 8888 8888
+          <a class="cul-tel-num" :href="`tel:${info.tel}`">
+            <svg-icon icon-class="call" />{{ info.tel }}
           </a>
-          <div class="cul-time">服务时间 9:00 ~ 21:00</div>
+          <div class="cul-time">服务时间 {{ info.date }}</div>
         </div>
         <div class="cul-slogan">
           <p>“我们的价值：让客户少花钱买好保险”</p>
@@ -98,7 +98,17 @@ export default {
   },
   data() {
     return {
-      Info: {},
+      info: {
+        name: "李玉婷",
+        role: "金牌保险顾问",
+        id: "20192000000080002020003828",
+        qrcode: "",
+        avator: "",
+        serveNum: 38100,
+        rate: "99.8%",
+        tel: "13888888888",
+        date: "9:00 ~ 21:00"
+      },
       oddsInsureList: [
         {
           title: "投保前",

src/views/Consultant/Plan/index.vue

@@ -45,7 +45,7 @@
               <th>{{ item.insuredAmount }}</th>
               <th>{{ item.term }}</th>
               <th>{{ item.paymentPeriod }}</th>
-              <th>{{ item.price }}</th>
+              <th>{{ item.price || "-" }}元</th>
             </tr>
           </tbody>
         </table>
@@ -53,8 +53,8 @@
       <card title="保障产品">
         <div class="good-item" v-for="(item, index) in goodInfo.ensure" :key="index">
           <div class="good-title">
-            {{ item.goods || "" }}
-            <cr-tag :type="tagFilter(item.productType)">{{ item.productType }}</cr-tag>
+            {{ item.productName || "" }}
+            <cr-tag :type="tagFilter(item.productType)" plain>{{ item.productType }}</cr-tag>
           </div>
           <div class="good-date">
             <span class="good-date-item">
@@ -69,8 +69,8 @@
           </div>
           <div class="good-price">
             <div class="good-price-item">
-              <strong>{{ item.price }}</strong>
-              {{ item.goodsUnit || "-" }}
+              <strong>{{ item.firstPrice && item.firstPrice.split("元")[0] }}</strong>
+              元{{ item.firstPrice && item.firstPrice.split("元")[1] }}
             </div>
             <cr-button type="warning" @click="goDetail(item.productNo, item.productType)">
               去投保
@@ -182,20 +182,20 @@ export default {
     tagFilter(type) {
       let _type = "";
       switch (type) {
-        case "mi":
+        case "医疗":
           _type = "warning";
           break;
-        case "cii":
+        case "重疾":
           _type = "danger";
           break;
-        case "ai":
+        case "意外":
           _type = "primary";
           break;
-        case "li":
-          _type = "light";
+        case "寿险":
+          _type = "";
           break;
         default:
-          _type = "light";
+          _type = "";
           break;
       }
       return _type;

src/views/Consultant/Question/index.vue

@@ -129,7 +129,9 @@
           </div>
         </cr-form>
         <div slot="footer" class="cul-hd-card-footer">
-          <cr-button type="warning" size="large" block @click="nextQuestion">下一步</cr-button>
+          <cr-button type="warning" size="large" block @click="nextQuestion">
+            {{ currentStep === 7 ? "提交问卷" : "下一步" }}
+          </cr-button>
           <a href="javascsript:;" @click="prevQuestion" v-show="currentStep > 0">返回上一步</a>
         </div>
       </card>
@@ -298,6 +300,13 @@ export default {
       this.currentStep--;
     },
     onPickerChange(picker, value, type) {
+      if (type === "birthday") {
+        value = value.map(item => item[0]).join("-");
+      }
+      if (type === "annualIncome" || type === "loan") {
+        value = value[0];
+      }
+      // if (type === "area") {}
       this.formData[type] = value;
     },
     async onSubmit() {

src/views/Consultant/modules/AiTestTip.vue

-<template functional>
-  <div class="ai-test">
-    <div class="ai-test-tip">
-      <h5>不知道怎么买保险</h5>
-      <small>试一试智能风险评测，推荐最适合你的保险</small>
-    </div>
-    <cr-row class="ai-test-cell" type="flex" align="center">
-      <cr-col span="5" class="ai-test-cell-image">
-        <cr-image width="60px" height="68px" src="@/assets/images/goods/ai-mongo.png" />
-      </cr-col>
-      <div class="ai-test-cell-title">
-        <h5>智能<span>风险测评</span></h5>
-        <small>AI小果：为您提供30s快速测评</small>
-      </div>
-      <div class="ai-test-cell-btn">
-        <cr-button type="warning">开始测评</cr-button>
-      </div>
-    </cr-row>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "AiTestTip"
-};
-</script>
-<style lang="less" scoped>
-@import "../../../style/var.less";
-@import "../../../style/mixins.less";
-
-.ai-test {
-  padding: 20px 16px 25.5px;
-  &-tip {
-    text-align: center;
-    .cell-title-mixin();
-    margin-bottom: @padding-md;
-  }
-  &-cell {
-    background-color: @white;
-    border-radius: @border-radius-md;
-    padding: 0 0 0 @padding-xs;
-    height: 72px;
-    &-image {
-      align-self: flex-end;
-      .cr-image {
-        display: block;
-        margin: 0 auto;
-      }
-    }
-    &-title {
-      padding: 8px 10px 0 5px;
-      .cell-title-mixin();
-      h5 {
-        margin: 0;
-      }
-      span {
-        color: @orange-dark;
-        font-weight: bold;
-      }
-    }
-    &-btn {
-      width: 76px;
-      .cr-button {
-        font-size: @button-default-font-size !important;
-        height: @button-default-height !important;
-        line-height: @button-default-line-height !important;
-        border-radius: @border-radius-sm !important;
-      }
-    }
-  }
-}
-</style>