Skip to content

M
mongo-ui
Commit 94879c04 authored by 郝聪敏's avatar 郝聪敏
Browse files
Options

feat-添加家人

parent 972c1cc1
Show whitespace changes
Inline Side-by-side
Showing with 208 additions and 21 deletions
src/api/user.js
View file @ 94879c04
......@@ -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
View file @ 94879c04
......@@ -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 0 → 100644
View file @ 94879c04
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
View file @ 94879c04
......@@ -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
View file @ 94879c04
......@@ -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
View file @ 94879c04
<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
View file @ 94879c04
......@@ -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
View file @ 94879c04
......@@ -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) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment