feat-添加家人

src/api/user.js

@@ -24,3 +24,8 @@ export const getCaptchaSms = param => {
 export const getCaptchaImg = param => {
   return req.post("captcha/image", param);
 };
+
+// 获取图形验证码
+export const getUserInfo = () => {
+  return req.get("user/me");
+};

src/service/http.js

@@ -3,18 +3,15 @@ import store from "@/store";
 import axios from "axios";
 import { Notify } from "@qg/cherry-ui";
 import config from "../config";
-// import qs from "qs";
+import localStorage from "./localStorage";
 
 const CancelToken = axios.CancelToken;
-// const { Notify } = cherry;
+let pending = {};
+let reqNum = 0;
 
 axios.defaults.baseURL = config.basicHost;
 axios.defaults.timeout = 30000;
 
-// let cancel;
-let pending = {};
-let reqNum = 0;
-
 function beforeRequest() {
   reqNum++;
   store.dispatch("setIsLoading", true);
@@ -31,16 +28,23 @@ function clearRequest() {
   }
 }
 
-//请求拦截器
+// 请求拦截器
 axios.interceptors.request.use(
   config => {
     beforeRequest();
-    //发起请求时，取消掉当前正在进行的相同请求
+
+    // 发起请求时，取消掉当前正在进行的相同请求
     if (pending[config.url]) {
       pending[config.url]("取消重复请求");
     }
     config.cancelToken = new CancelToken(c => (pending[config.url] = c));
 
+    // 添加token
+    const token = localStorage.get("token");
+    if (token) {
+      config.headers["x-auth-token"] = token;
+    }
+
     return config;
   },
   error => {
@@ -48,18 +52,18 @@ axios.interceptors.request.use(
   }
 );
 
-//响应拦截器即异常处理
+// 响应拦截器即异常处理
 axios.interceptors.response.use(
   response => {
     afterRequest();
     delete pending[response.config.url];
     if (response.data.code === "0") {
-      return response.data;
-      // return response.data.data;
+      return response.data.data;
     }
     Notify({ type: "danger", message: response.data.msg || "后端服务异常" });
   },
   err => {
+    afterRequest();
     if (err && err.response) {
       switch (err.response.status) {
         case 400:
@@ -102,7 +106,7 @@ axios.interceptors.response.use(
           err.message = `连接错误${err.response.status}`;
       }
     } else {
-      if (err.message == "操作取消") {
+      if (err.message == "取消重复请求") {
         err.response = {};
         err.response.status = 409;
         err.response.data = {};

src/service/localStorage.js

+export default {
+  get(key) {
+    let result = window.localStorage.getItem(key);
+    try {
+      return JSON.parse(result);
+    } catch (e) {
+      return result;
+    }
+  },
+  set(key, value) {
+    let toString = Object.prototype.toString;
+    if (toString.call(value) === "[object Array]" || toString.call(value) === "[object Object]") {
+      value = JSON.stringify(value);
+    }
+    return window.localStorage.setItem(key, value);
+  },
+  remove(key) {
+    return window.localStorage.removeItem(key);
+  },
+  clear() {
+    return window.localStorage.clear();
+  }
+};

src/style/index.less

@@ -14,6 +14,9 @@ a {
   color: @blue;
   font-size: @font-size-12;
 }
+input::-webkit-input-placeholder {
+  color: #AAAAAA;
+}
 .cr-button {
   padding: 0 @padding-sm !important;
   &__text {

src/views/User/Family/index.less

@@ -14,6 +14,88 @@
     line-height: 24px;
   }
 
+  &-list {
+    border:1px solid transparent;
+    margin: 16px 0 20px;
+
+    &-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 10px;
+      padding: 0 20px;
+      height: 66px;
+      background: #FFFFFF;
+      border-radius: 14px;
+
+      .Fl-item-left {
+        display: flex;
+        align-items: center;
+
+        .Fli-left-image {
+          margin-right: 12px;
+          width: 40px;
+          height: 40px;
+        }
+
+        .Fli-left-name {
+          margin-right: 10px;
+          font-size: 16px;
+          font-weight: 600;
+          color: #333333;
+          line-height: 16px;
+        }
+
+        .Fli-left-relation {
+          font-size: 11px;
+          font-weight: 400;
+          color: #999999;
+          line-height: 16px;
+        }
+      }
+
+      .Fl-item-right {
+        width: 44px;
+        height: 16px;
+        background: #FFEAB7;
+        border-radius: 2px 8px 2px 8px;
+        font-size: 11px;
+        font-weight: 400;
+        color: #EAAD1A;
+        line-height: 16px;
+      }
+
+      &_overlay {
+        border-radius: 17px;
+        margin-top: 35px;
+        box-shadow: 0px -5px 25px 0px rgba(0,0,0,0.07), 0px -20px 0 -10px #FFFFFF, 0px -25px 25px 0px rgba(0,0,0,0.07), 0px -35px 0 -15px #FFFFFF;
+      }
+    }
+
+    &-collapse {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 30px;
+      background: #FFFFFF;
+      border-radius: 14px;
+
+      .Fl-collapse-text {
+        margin-right: 4px;
+        font-size: 12px;
+        font-weight: 500;
+        color: #858AFF;
+        line-height: 17px;
+      }
+
+      .Fl-collapse-svg {
+        transform: rotate(180deg);
+        width: 16px;
+        height: 16px;
+      }
+    }
+  }
+
   &-form {
     padding: 20px 20px 28px;
     background: #FFFFFF;
@@ -80,10 +162,13 @@
         overflow: visible;
         padding: 0;
         width: auto;
+
         @{deep} .cr-cell__value {
           overflow: visible;
+
           .cr-radio-group {
             margin: 0;
+
             .cr-radio {
               // display: inline-block;
               // box-sizing: border-box;
@@ -97,6 +182,7 @@
 
               .cr-radio__label--right {
                 font-size: 0;
+
                 div {
                   font-size: 12px;
                   font-weight: 400;
@@ -110,6 +196,7 @@
             }
           }
         }
+
         .Ffr-options-text {
           display: inline-block;
           padding: 12px 0;
@@ -142,6 +229,7 @@
       line-height: 22px;
     }
   }
+
   &-modal {
     @{deep} .panel-body {
       font-size: 16px;
@@ -150,21 +238,25 @@
       line-height: 28px;
     }
   }
+
   &-confirm-modal {
     padding: 20px 17px;
     background: #F6F7FA;
     border-radius: 8px;
+
     .Fc-modal-item {
       display: flex;
       justify-content: space-between;
-      font-size:12px;
+      font-size: 12px;
       color: #333333;
       line-height: 30px;
+
       span:nth-child(1) {
-        font-weight:400;
+        font-weight: 400;
       }
+
       span:nth-child(2) {
-        font-weight:600;
+        font-weight: 600;
       }
     }
   }

src/views/User/Family/index.vue

 <template>
   <div class="family">
+    <p class="family-title">已添加家人</p>
+    <div class="family-list">
+      <div class="family-list-item family-list-item_overlay">
+        <div class="Fl-item-left">
+          <cr-image
+            class="Fli-left-image"
+            src="../../../assets/images/user/man@2x.png"
+            width=""
+            height=""
+          />
+          <span class="Fli-left-name">王小闹</span>
+          <span class="Fli-left-relation">本人</span>
+        </div>
+        <p class="Fl-item-right">已认证</p>
+      </div>
+      <!-- <div class="family-list-item">
+        <div class="Fl-item-left">
+          <cr-image
+            class="Fli-left-image"
+            src="../../../assets/images/user/man@2x.png"
+            width=""
+            height=""
+          />
+          <span class="Fli-left-name">王爸爸</span>
+          <span class="Fli-left-relation">父亲</span>
+        </div>
+        <p class="Fl-item-right">已认证</p>
+      </div>
+      <div class="family-list-item">
+        <div class="Fl-item-left">
+          <cr-image
+            class="Fli-left-image"
+            src="../../../assets/images/user/woman@2x.png"
+            width=""
+            height=""
+          />
+          <span class="Fli-left-name">王妈妈</span>
+          <span class="Fli-left-relation">母亲</span>
+        </div>
+        <p class="Fl-item-right">已认证</p>
+      </div> -->
+      <div class="family-list-collapse">
+        <span class="Fl-collapse-text">点击收起</span>
+        <svg-icon icon-class="triangle-down " class-name="Fl-collapse-svg" />
+      </div>
+    </div>
     <p class="family-title">为家人添加保障</p>
     <cr-form ref="form" class="family-form" @submit="onSubmit" @failed="onFailed">
       <cr-field

src/views/User/index.less

@@ -19,7 +19,7 @@
 		color: @black;
 	  }
 	  span:nth-child(2) {
-	  	width: 63px;
+	  	width: 89px;
 		padding: 1px 0 2px;
 		line-height: normal;
 		text-align: center;

src/views/User/index.vue

@@ -2,8 +2,8 @@
   <div class="user">
     <div class="user-info">
       <div class="user-info-account" @click="go('', true)">
-        <span>未登录</span>
-        <span>点击登录</span>
+        <span>{{ userInfo.name }}</span>
+        <span>{{ userInfo.phoneNoMask }}</span>
       </div>
       <div class="user-info-image" @click="go('', true)">
         <cr-image
@@ -12,9 +12,13 @@
           height=""
           round
           fit="cover"
-          src="@/assets/images/user/avatar@2x.png"
+          :src="userInfo.avatar"
+        />
+        <svg-icon
+          v-if="userInfo.auth"
+          icon-class="certification"
+          class-name="user-info-image-certification"
         />
-        <!-- <svg-icon icon-class="certification" class-name="user-info-image-certification" /> -->
       </div>
     </div>
     <div class="user-insurance">
@@ -55,6 +59,7 @@
   </div>
 </template>
 <script>
+import { getUserInfo } from "@/api/user";
 import customerService from "@/assets/images/user/customer-service@2x.png";
 import help from "@/assets/images/user/help@2x.png";
 import avatar from "@/assets/images/user/avatar@2x.png";
@@ -71,6 +76,12 @@ export default {
   },
   data() {
     return {
+      userInfo: {
+        name: "未登录",
+        phoneNoMask: "点击登录",
+        avatar,
+        auth: false
+      },
       avatar,
       customerService,
       help,
@@ -78,6 +89,9 @@ export default {
       showLayer: false
     };
   },
+  async created() {
+    this.userInfo = await getUserInfo();
+  },
   methods: {
     go(path, isOverlay = false) {
       if (isOverlay) {