Commit 4008410b authored by 郭志伟's avatar 郭志伟

Merge branch 'master' into goods-other

parents 4a3eacfd ba6fdcf4
<template> <template>
<div id="app"> <div id="app">
<router-view /> <router-view />
<div class="loading-container">
<cr-loading v-show="isLoading" class="loading" size="24px">加载中...</cr-loading>
</div>
</div> </div>
</template> </template>
<script>
import { mapState, mapActions } from "vuex";
export default {
computed: {
...mapState(["isLoading"])
},
methods: {
...mapActions(["setIsLoading"])
},
mounted() {
console.log(this.isLoading);
}
};
</script>
<style lang="less" scoped>
@import "./style/index.less";
.loading-container {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
.loading {
padding: 6px;
border-radius: 6px;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
@{deep} .cr-loading--text {
color: #fff;
}
}
}
</style>
<?xml version="1.0" encoding="UTF-8"?>
<svg width="32px" height="33px" viewBox="0 0 32 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 61 (89581) - https://sketch.com -->
<title>首页</title>
<desc>Created with Sketch.</desc>
<defs>
<filter x="-104.7%" y="-104.7%" width="309.4%" height="309.4%" filterUnits="objectBoundingBox" id="filter-1">
<feOffset dx="0" dy="7" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.650980392 0 0 0 0 0.662745098 0 0 0 0 1 0 0 0 0.3 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
<g id="首页" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-207.000000, -297.000000)" fill-rule="nonzero" id="Group-30">
<g transform="translate(16.000000, 273.000000)">
<g id="Group-18-Copy" filter="url(#filter-1)" transform="translate(191.000000, 24.664719)">
<g id="Group-17">
<g id="Group">
<rect id="Rectangle" x="2" y="2" width="28" height="28"></rect>
<g id="Group-16" transform="translate(6.000000, 7.000000)">
<path d="M4.6,0.8 L16.6,0.8 C18.809139,0.8 20.6,2.590861 20.6,4.8 L20.6,11.8 C20.6,14.009139 18.809139,15.8 16.6,15.8 L16.0295467,15.8 L16.0295467,15.8 L10.6,18.8 L10.6,15.8 L4.6,15.8 C2.390861,15.8 0.6,14.009139 0.6,11.8 L0.6,4.8 C0.6,2.590861 2.390861,0.8 4.6,0.8 Z" id="Rectangle" fill="#A6A9FF"></path>
<circle id="Oval" fill="#FFFFFF" cx="7.5" cy="8.5" r="1.5"></circle>
<circle id="Oval-Copy-2" fill="#FFFFFF" cx="14.5" cy="8.5" r="1.5"></circle>
<path d="M20.6,15.8 L16.0295467,15.8 L16.0295467,15.8 L10.6,18.8 L10.6,15.8 L0.6,15.8 L20.6,15.8 Z" id="Rectangle" fill="#7478DD"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
<title>Group</title>
<desc>Created with Sketch.</desc>
<g id="我的" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="添加家人-空" transform="translate(-108.000000, -273.000000)">
<g id="Group-19" transform="translate(16.000000, 68.000000)">
<g id="Group" transform="translate(22.000000, 188.000000)">
<g id="Group-Copy" fill="#F6F6F6" opacity="0">
<rect id="Mask" x="0" y="0" width="293.313433" height="44" rx="14"></rect>
</g>
<g id="问号" transform="translate(70.000000, 17.000000)">
<g stroke-width="1" fill="#FFEAB7" id="Shape">
<path d="M6,0 C2.68582031,0 0,2.68582031 0,6 C0,9.31417969 2.68582031,12 6,12 C9.31417969,12 12,9.31417969 12,6 C12,2.68582031 9.31417969,0 6,0 Z" fill-rule="nonzero"></path>
</g>
<path d="M5.92364063,9.52253906 C5.64333401,9.52239022 5.41622229,9.29503711 5.41637112,9.01473047 C5.41651996,8.73442383 5.64387307,8.50731211 5.92417971,8.50746094 C5.92417972,8.50746094 5.92417971,8.50746094 5.92417972,8.50746094 C6.20448634,8.50746093 6.43171876,8.73469336 6.43171876,9.015 C6.43171877,9.29530664 6.20448634,9.52253906 5.9241797,9.52253906 L5.92364063,9.52253906 Z" id="Path" fill="#FF6A07"></path>
<path d="M8.10110156,4.58182031 C8.07164063,5.12455078 7.90528125,5.55271875 7.07344922,6.38455078 C6.65180859,6.80619141 6.38564063,7.12255078 6.35891016,7.40017969 L6.35891017,7.40017953 C6.33601525,7.63229164 6.12929181,7.80189476 5.8971797,7.77899984 C5.66506759,7.75610492 5.49546447,7.54938148 5.51835939,7.31726937 C5.57564064,6.73255062 6.00491017,6.26017953 6.47671877,5.78782015 C7.23273048,5.03182015 7.24582033,4.79182015 7.25835939,4.53764046 L7.25835942,4.53763976 C7.27226513,4.23640343 7.16022802,3.9429589 6.94910161,3.72763976 C6.70053755,3.46848195 6.35691216,3.32208547 5.99782037,3.32235851 L5.9950899,3.32235851 C5.30086287,3.32476277 4.73901561,3.88758898 4.73782029,4.58181945 C4.73782029,4.8148339 4.54892459,5.00372961 4.31591014,5.00372961 C4.08289568,5.00372961 3.89399998,4.8148339 3.89399998,4.58181945 C3.89399998,4.01999914 4.11217967,3.49254992 4.50817967,3.09544836 L4.50817979,3.09544823 C4.90088448,2.69977753 5.43544112,2.47747401 5.99291026,2.47799901 C6.58500357,2.47696699 7.15169537,2.71842675 7.5610899,3.1461787 C7.93314969,3.52842795 8.12886922,4.04856701 8.10108993,4.58126857 L8.10110156,4.58182031 Z" id="Path" fill="#FF6A07"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="32px" height="33px" viewBox="0 0 32 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 61 (89581) - https://sketch.com -->
<title>首页</title>
<desc>Created with Sketch.</desc>
<defs>
<filter x="-104.7%" y="-104.7%" width="309.4%" height="309.4%" filterUnits="objectBoundingBox" id="filter-1">
<feOffset dx="0" dy="7" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 1 0 0 0 0 0.784313725 0 0 0 0 0.258823529 0 0 0 0.3 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<path d="M14.5092606,0.037580944 C14.9079367,0.0904687947 15.2406025,0.2307606 15.5072579,0.45845636 C15.7739134,0.68615212 16.7500208,1.46666667 18.4355802,2.8 C18.9545667,3.22535182 19.21406,3.89201848 19.21406,4.8 L14.5092606,4.8 L14.5092606,0.037580944 Z" id="path-2"></path>
<filter x="-159.4%" y="-94.5%" width="418.8%" height="415.0%" filterUnits="objectBoundingBox" id="filter-3">
<feOffset dx="0" dy="3" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.894584396 0 0 0 0 0.674053738 0 0 0 0 0.13676086 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
</defs>
<g id="首页" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-36.000000, -297.000000)" fill-rule="nonzero" id="Group-30">
<g transform="translate(16.000000, 273.000000)">
<g id="Group-19" filter="url(#filter-1)" transform="translate(20.000000, 24.664719)">
<g id="Group-18" transform="translate(2.000000, 2.000000)">
<g id="Group-17">
<g id="Group-20">
<rect id="Rectangle" x="0" y="0" width="28" height="28"></rect>
<g id="Group-16" transform="translate(4.000000, 3.000000)">
<path d="M4,0 L13.5401896,0 C14.4346301,-1.94066291e-15 15.3032632,0.299784452 16.0073093,0.851457443 L17.6671197,2.15204368 C18.6347477,2.91025295 19.2,4.07128348 19.2,5.30058623 L19.2,17.6 C19.2,19.809139 17.409139,21.6 15.2,21.6 L4,21.6 C1.790861,21.6 1.15871992e-15,19.809139 0,17.6 L0,4 C-2.705415e-16,1.790861 1.790861,-4.82366169e-16 4,0 Z" id="Rectangle" fill="#FFC842"></path>
<rect id="Rectangle" fill="#FFFFFF" x="4.8" y="13.4" width="9.6" height="2.4" rx="1.2"></rect>
<rect id="Rectangle-Copy-3" fill="#FFFFFF" x="4.8" y="8.6" width="9.6" height="2.4" rx="1.2"></rect>
<g id="Path-4">
<use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-2"></use>
<use fill="#FFE4A1" xlink:href="#path-2"></use>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 61 (89581) - https://sketch.com -->
<title>编组 24备份 4</title>
<desc>Created with Sketch.</desc>
<g id="首页" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-59.000000, -1052.000000)" id="Group-7">
<g transform="translate(20.000000, 942.000000)">
<g id="Group-4" transform="translate(20.000000, 102.000000)">
<g id="编组-24备份-4" transform="translate(19.000000, 4.000000)">
<g id="Group-9" transform="translate(0.000000, 4.000000)">
<g id="编组-23" transform="translate(1.000000, 1.000000)">
<rect id="矩形" x="0" y="0" width="14" height="14"></rect>
<g id="编组-3" transform="translate(0.000000, 1.500000)" stroke-width="1.5">
<g id="编组-19">
<g id="编组-22">
<path d="M4.39768202,3.58341277 L6.11148483,0.934803283 C6.40892249,0.481565259 6.79134187,0 7.68365712,0 C8.36351416,0 8.74593353,0.325764901 8.94421965,0.594874199 C9.53909385,1.43053159 9.26998455,2.87522171 8.9158923,3.97999633 L11.7061323,3.97999633 C12.1310431,3.97999633 12.5276255,4.16412392 12.796736,4.48988882 C13.0367405,4.78241497 13.135238,5.16603506 13.0658464,5.53800105 L12.2585162,9.46134178 C11.9752427,10.7219043 11.1112581,11.557564 10.0914731,11.557564 L3.94444444,11.3799002" id="路径" stroke="#222729" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M2.41192952,2.97222222 C2.02919562,2.97222222 1.70785943,3.26040998 1.66635289,3.64088659 L0.926958952,10.4186644 C0.924012218,10.4456761 0.922535585,10.472828 0.922535585,10.5 C0.922535585,10.9142136 1.25832202,11.25 1.67253558,11.25 L3.33333333,11.25 C3.7475469,11.25 4.08333333,10.9142136 4.08333333,10.5 L4.08333333,3.72222222 C4.08333333,3.30800866 3.7475469,2.97222222 3.33333333,2.97222222 L2.41192952,2.97222222 Z" id="矩形" stroke="#25262A"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 61 (89581) - https://sketch.com -->
<title>编组 24备份 4</title>
<desc>Created with Sketch.</desc>
<g id="首页" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-134.000000, -1052.000000)" id="Group-7">
<g transform="translate(20.000000, 942.000000)">
<g id="Group-4" transform="translate(20.000000, 102.000000)">
<g id="Group-15" transform="translate(94.000000, 4.000000)">
<g id="编组-23" transform="translate(8.000000, 12.000000) scale(1, -1) translate(-8.000000, -12.000000) translate(1.000000, 5.000000)">
<rect id="矩形" x="0" y="0" width="14" height="14"></rect>
<g id="编组-3" transform="translate(0.000000, 1.500000)" stroke="#333333" stroke-width="1.5">
<g id="编组-19">
<g id="编组-22">
<path d="M4.39768202,3.58341277 L6.11148483,0.934803283 C6.40892249,0.481565259 6.79134187,0 7.68365712,0 C8.36351416,0 8.74593353,0.325764901 8.94421965,0.594874199 C9.53909385,1.43053159 9.26998455,2.87522171 8.9158923,3.97999633 L11.7061323,3.97999633 C12.1310431,3.97999633 12.5276255,4.16412392 12.796736,4.48988882 C13.0367405,4.78241497 13.135238,5.16603506 13.0658464,5.53800105 L12.2585162,9.46134178 C11.9752427,10.7219043 11.1112581,11.557564 10.0914731,11.557564 L3.94444444,11.3799002" id="路径" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M2.41192952,2.97222222 C2.02919562,2.97222222 1.70785943,3.26040998 1.66635289,3.64088659 L0.926958952,10.4186644 C0.924012218,10.4456761 0.922535585,10.472828 0.922535585,10.5 C0.922535585,10.9142136 1.25832202,11.25 1.67253558,11.25 L3.33333333,11.25 C3.7475469,11.25 4.08333333,10.9142136 4.08333333,10.5 L4.08333333,3.72222222 C4.08333333,3.30800866 3.7475469,2.97222222 3.33333333,2.97222222 L2.41192952,2.97222222 Z" id="矩形"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
...@@ -25,6 +25,12 @@ ...@@ -25,6 +25,12 @@
import { mapState, mapMutations } from "vuex"; import { mapState, mapMutations } from "vuex";
const tabbarData = [ const tabbarData = [
{
name: "首页",
path: "/home",
icon: "home",
activeIcon: "home-active"
},
{ {
name: "产品", name: "产品",
path: "/goods", path: "/goods",
......
...@@ -6,9 +6,14 @@ Vue.use(VueRouter); ...@@ -6,9 +6,14 @@ Vue.use(VueRouter);
const routes = [ const routes = [
{ {
path: "/", path: "/",
name: "Home", name: "Default",
redirect: "/goods" redirect: "/goods"
}, },
{
path: "/home",
name: "Home",
component: () => import("../views/Home/index.vue")
},
{ {
path: "/goods", path: "/goods",
name: "Goods", name: "Goods",
...@@ -34,6 +39,16 @@ const routes = [ ...@@ -34,6 +39,16 @@ const routes = [
name: "User", name: "User",
component: () => import("../views/User/index.vue") component: () => import("../views/User/index.vue")
}, },
{
path: "/user/family",
name: "Family",
component: () => import("../views/User/Family/index.vue")
},
{
path: "/user/help-center",
name: "Family",
component: () => import("../views/User/HelpCenter/index.vue")
},
{ {
path: "/policy", path: "/policy",
name: "Policy", name: "Policy",
...@@ -50,9 +65,14 @@ const routes = [ ...@@ -50,9 +65,14 @@ const routes = [
component: () => import("../views/Policy/Add/index.vue") component: () => import("../views/Policy/Add/index.vue")
}, },
{ {
path: "/payment-record", path: "/policy/payment-record",
name: "PaymentRecord", name: "PaymentRecord",
component: () => import("../views/PaymentRecord/index.vue") component: () => import("../views/Policy/PaymentRecord/index.vue")
},
{
path: "/policy/renewal",
name: "Renewal",
component: () => import("../views/Policy/Renewal/index.vue")
}, },
{ {
path: "/introduction", path: "/introduction",
......
...@@ -14,7 +14,7 @@ const { ...@@ -14,7 +14,7 @@ const {
Popup, Popup,
Overlay, Overlay,
Divider, Divider,
// Loading, Loading,
Toast, Toast,
// Uploader, // Uploader,
Notify, Notify,
...@@ -72,3 +72,7 @@ Vue.use(TabbarItem); ...@@ -72,3 +72,7 @@ Vue.use(TabbarItem);
Vue.use(Icon); Vue.use(Icon);
Vue.use(Sticky); Vue.use(Sticky);
Vue.use(Overlay); Vue.use(Overlay);
Vue.use(Form);
Vue.use(Picker);
Vue.use(Notify);
Vue.use(Loading);
//引入axios
import store from "@/store";
import axios from "axios";
import cherry from "@qg/cherry-ui";
import config from "../config";
const CancelToken = axios.CancelToken;
const { Notify } = cherry;
axios.defaults.baseURL = config.basicHost;
axios.defaults.timeout = 30000;
// let cancel;
let pending = {};
let reqNum = 0;
function beforeRequest() {
reqNum++;
store.dispatch("setIsLoading", true);
}
function afterRequest() {
setTimeout(clearRequest, 300);
}
function clearRequest() {
reqNum--;
if (reqNum <= 0) {
store.dispatch("setIsLoading", false);
}
}
//请求拦截器
axios.interceptors.request.use(
config => {
beforeRequest();
//发起请求时,取消掉当前正在进行的相同请求
if (pending[config.url]) {
pending[config.url]("取消重复请求");
}
config.cancelToken = new CancelToken(c => (pending[config.url] = c));
return config;
},
error => {
return Promise.reject(error);
}
);
//响应拦截器即异常处理
axios.interceptors.response.use(
response => {
afterRequest();
delete pending[response.config.url];
if (response.data.code === 0) {
return response.data.data;
}
Notify({ type: "danger", message: response.data.msg || "后端服务异常" });
},
err => {
if (err && err.response) {
switch (err.response.status) {
case 400:
err.message = "错误请求";
break;
case 401:
err.message = "未授权,请重新登录";
break;
case 403:
err.message = "拒绝访问";
break;
case 404:
err.message = "请求错误,未找到该资源";
break;
case 405:
err.message = "请求方法未允许";
break;
case 408:
err.message = "请求超时";
break;
case 500:
err.message = "服务器端出错";
break;
case 501:
err.message = "网络未实现";
break;
case 502:
err.message = "网络错误";
break;
case 503:
err.message = "服务不可用";
break;
case 504:
err.message = "网络超时";
break;
case 505:
err.message = "http版本不支持该请求";
break;
default:
err.message = `连接错误${err.response.status}`;
}
} else {
if (err.message == "操作取消") {
err.response = {};
err.response.status = 409;
err.response.data = {};
return Promise.resolve(err.response);
} else {
err.message = "连接到服务器失败";
}
}
Notify({ type: "danger", message: err.message });
return Promise.resolve(err.response);
}
);
export default axios;
...@@ -5,16 +5,23 @@ Vue.use(Vuex); ...@@ -5,16 +5,23 @@ Vue.use(Vuex);
export default new Vuex.Store({ export default new Vuex.Store({
state: { state: {
activeIdx: 0 activeIdx: 0,
isLoading: true
}, },
mutations: { mutations: {
setActiveIdx(state, value) { setActiveIdx(state, value) {
state.activeIdx = value; state.activeIdx = value;
},
setIsLoading(state, value) {
state.isLoading = value;
} }
}, },
actions: { actions: {
setActiveIdx(state, value) { setActiveIdx({ commit }, args) {
state.activeIdx = value; commit("setActiveIdx", args);
},
setIsLoading({ commit }, args) {
commit("setIsLoading", args);
} }
}, },
modules: {} modules: {}
......
@import "../../style/index.less";
.home {
position: relative;
z-index: 0;
font-size: 0;
&::after {
content: "";
display: block;
padding-bottom: 49px;
}
&:before {
z-index: 1;
position: absolute;
top: 26px;
left: 0;
width: 100px;
height: 32px;
content: '';
background: url('../../assets/logo-top.png') no-repeat 0 0 /cover;
}
&-activity {
width: 100%;
}
&-service {
box-sizing: border-box;
display: flex;
justify-content: space-between;
padding: 0 20px;
position: absolute;
top: 274px;
left: 16px;
right: 16px;
width: 343px;
height: 81px;
background: #FFFFFF;
box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.07);
border-radius: 14px;
&-item {
display: flex;
align-items: center;
.Hs-item-svg {
margin-right: 5px;
width: 32px;
height: 32px;
}
.Hs-item-text {
font-size: 16px;
font-weight: 600;
color: #242629;
line-height: 22px;
}
}
}
&-select {
padding: 58px 20px 40px;
background: #FFFFFF;
&-title {
margin-bottom: 7px;
font-size: 20px;
font-weight: 600;
color: #242629;
line-height: 24px;
}
&-desc {
display: flex;
.Hs-desc-item {
display: flex;
align-items: center;
margin-right: 12px;
.Hsd-item-svg {
margin-right: 8px;
width: 12px;
height: 12px;
}
.Hsd-item-text {
font-size: 12px;
font-weight: 600;
color: #666666;
line-height: 16px;
}
}
}
&-goods {
padding: 0;
@{deep} .goods-list-item {
position: relative;
margin: 32px 0;
}
}
}
&-classroom {
overflow: hidden;
margin-bottom: 20px;
padding: 0 20px;
background: #ffffff;
&-title {
margin-bottom: 20px;
font-size: 20px;
font-weight: 600;
color: #242629;
line-height: 24px;
}
&-card {
position: relative;
overflow: hidden;
margin-bottom: 28px;
padding-left: 20px;
height: 160px;
background: #FFC842;
box-shadow: 0px 12px 24px 0px rgba(255, 200, 66, 0.1);
border-radius: 14px;
.Hc-card-question {
margin: 31px 0 2px;
font-size: 18px;
font-weight: 600;
color: #242629;
line-height: 31px;
}
.Hc-card-result {
margin-bottom: 21px;
padding: 3px 0 2px;
width: 124px;
text-align: center;
background: rgba(255, 103, 2, 1);
border-radius: 7px 3px 7px 3px;
font-size: 12px;
color: #FFFFFF;
line-height: 12px;
}
.Hc-card-operation {
float: left;
display: flex;
justify-content: center;
align-items: center;
width: 80px;
height: 30px;
background: #FFFFFF;
&:nth-child(3) {
border-radius: 20px 0 0 20px;
}
&:nth-child(4) {
opacity: 0.4;
border-radius: 0 20px 20px 0;
}
.Hcc-operation-svg {
width: 16px;
height: 16px;
}
.Hcc-operation-text {
font-size: 14px;
font-weight: 400;
color: #333333;
line-height: 21px;
}
}
.Hc-card-image {
position: absolute;
right: 15px;
bottom: 0;
width: 132px;
height: 139px;
}
}
&-item {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
.Hc-item-left {
p:first-child {
margin-bottom: 9px;
font-size: 16px;
font-weight: 600;
color: #242629;
line-height: 22px;
}
p:last-child {
font-size: 12px;
font-weight: 400;
color: #999999;
line-height: 16px;
}
}
.Hc-item-right {
width: 60px;
height: 60px;
background: #F4F4F4;
border-radius: 14px;
}
}
}
&-phone {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-bottom: 22px;
p:first-child {
margin-bottom: 4px;
font-size: 16px;
color: #999999;
line-height: 19px;
}
p:last-child {
font-size: 12px;
color: #999999;
line-height: 14px;
}
}
&-logo {
display: flex;
align-items: center;
flex-direction: column;
margin-bottom: 17px;
&-svg {
margin-bottom: 11px;
width: 116px;
height: 43px;
}
&-info {
font-size: 10px;
color: #CCCCCC;
line-height: 14px;
}
}
}
\ No newline at end of file
<template>
<div class="home">
<cr-image
class="home-activity"
width=""
height=""
fit="cover"
src="@/assets/images/home/activity@2x.png"
/>
<div class="home-service">
<div class="home-service-item">
<svg-icon icon-class="risk-assessment" class-name="Hs-item-svg" />
<span class="Hs-item-text">智能风险评测</span>
</div>
<div class="home-service-item">
<svg-icon icon-class="consult-service" class-name="Hs-item-svg" />
<span class="Hs-item-text">1对1咨询服务</span>
</div>
</div>
<div class="home-select">
<p class="home-select-title">芒果保险精选推荐</p>
<div class="home-select-desc">
<div class="Hs-desc-item">
<svg-icon class-name="Hsd-item-svg" icon-class="check-circle" />
<span class="Hsd-item-text">全网精选</span>
</div>
<div class="Hs-desc-item">
<svg-icon class-name="Hsd-item-svg" icon-class="check-circle" />
<span class="Hsd-item-text">高性价比</span>
</div>
<div class="Hs-desc-item">
<svg-icon class-name="Hsd-item-svg" icon-class="check-circle" />
<span class="Hsd-item-text">理赔口碑好</span>
</div>
</div>
<good-list :list="goodsList" class="home-select-goods"></good-list>
</div>
<div class="home-classroom">
<p class="home-classroom-title">芒果小课堂</p>
<div class="home-classroom-card">
<p class="Hc-card-question">医保到底能保多少?</p>
<p class="Hc-card-result">已有1.8万人认为有用</p>
<div class="Hc-card-operation">
<svg-icon class-name="Hcc-operation-svg" icon-class="useful" />
<span class="Hcc-operation-text">有用</span>
</div>
<div class="Hc-card-operation">
<svg-icon class-name="Hcc-operation-svg" icon-class="useless" />
<span class="Hcc-operation-text">没用</span>
</div>
<cr-image
class="Hc-card-image"
width=""
height=""
fit="cover"
src="@/assets/images/home/teacher@2x.png"
/>
</div>
<div class="home-classroom-item">
<div class="Hc-item-left">
<p>保险公司公司会倒闭吗?</p>
<p>芒果小课堂</p>
</div>
<cr-image
class="Hc-item-right"
width=""
height=""
fit="cover"
src="@/assets/images/home/teacher@2x.png"
/>
</div>
<div class="home-classroom-item">
<div class="Hc-item-left">
<p>科学投保要知道以下几大原则</p>
<p>芒果小课堂</p>
</div>
<cr-image
class="Hc-item-right"
width=""
height=""
fit="cover"
src="@/assets/images/home/teacher@2x.png"
/>
</div>
</div>
<div class="home-phone">
<p>客服电话:XXXXXXXX</p>
<p>服务时间:9:00-21:00</p>
</div>
<div class="home-logo">
<svg-icon icon-class="logo" class-name="home-logo-svg" />
<p class="home-logo-info">全天候保险代理股份有限公司</p>
<p class="home-logo-info">京ICP备XXXXXXXX号</p>
</div>
<tabbar></tabbar>
</div>
</template>
<script>
import GoodList from "@/components/GoodList/index";
import good01 from "@/assets/goods/goods-01.png";
import good02 from "@/assets/goods/goods-02.png";
import good03 from "@/assets/goods/goods-03.png";
import good04 from "@/assets/goods/goods-04.png";
import Tabbar from "@/components/Tabbar";
const goodsList = [
{
id: 1,
img: good01,
title: "万家保·百万医疗险",
sub: "产品优势",
glory: "好评榜第1名",
price: "0",
unit: "",
allow: true
},
{
id: 2,
img: good02,
title: "万家保·重疾轻症险",
sub: "100种重疾+40种轻症",
glory: "",
price: "3",
unit: "首月",
allow: true
},
{
id: 3,
img: good03,
title: "万家保·综合意外险",
sub: "产品优势",
glory: "开车必备",
price: "0",
unit: "",
allow: true
},
{
id: 4,
img: good04,
title: "华贵大麦2020定期寿险",
sub: "产品优势",
glory: "",
price: "0",
unit: "",
allow: true
}
];
export default {
name: "Home",
components: {
GoodList,
Tabbar
},
data() {
return {
goodsList
};
}
};
</script>
<style lang="less" src="./index.less" scoped></style>
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
color: #999999; color: #999999;
line-height: 16px; line-height: @lineHeight;
} }
.card-head() { .card-head() {
display: flex; display: flex;
...@@ -190,7 +190,7 @@ ...@@ -190,7 +190,7 @@
} }
} }
&-button { &-button {
width: 303px; width: 100%;
height: 52px; height: 52px;
background: #FFC842; background: #FFC842;
border-radius: 14px; border-radius: 14px;
......
@import "../../style/index.less"; @import "../../../style/index.less";
.payment-record { .payment-record {
position: relative;
box-sizing: border-box;
background: #FFFFFF;
padding: 36px 20px 67px;
height: 100%;
overflow-y: auto;
&:after { &:after {
position: absolute; position: absolute;
top: 38px; top: 38px;
...@@ -8,12 +14,8 @@ ...@@ -8,12 +14,8 @@
width: 36px; width: 36px;
height: 19px; height: 19px;
content: ''; content: '';
background: url('../../assets/images/policy/detail/point@2x.png') no-repeat 0 0 /cover; background: url('../../../assets/images/policy/detail/point@2x.png') no-repeat 0 0 /cover;
} }
box-sizing: border-box;
background: #FFFFFF;
padding: 36px 20px 67px;
height: 100%;
&-status { &-status {
margin-bottom: 1px; margin-bottom: 1px;
font-size: 28px; font-size: 28px;
...@@ -25,8 +27,11 @@ ...@@ -25,8 +27,11 @@
margin-bottom: 28px; margin-bottom: 28px;
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
color: #F65D5D; color: #666666;
line-height: 17px; line-height: 17px;
&_owe {
color: #F65D5D;
}
} }
&-term { &-term {
position: relative; position: relative;
...@@ -76,6 +81,9 @@ ...@@ -76,6 +81,9 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
&_year {
padding-top: 4px;
}
span:first-child { span:first-child {
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
......
<template> <template>
<div class="payment-record"> <div class="payment-record">
<p class="payment-record-status">持续缴费中</p> <p class="payment-record-status">持续缴费中</p>
<p class="payment-record-desc">预计下次扣费时间 2020.5.11</p> <p class="payment-record-desc payment-record-desc_owe">预计下次扣费时间 2020.5.11</p>
<div class="payment-record-term"> <!-- <div class="payment-record-term">
<div class="Pr-term-item"> <div class="Pr-term-item">
<span>800元</span> <span>800元</span>
<span>下期应缴金额</span> <span>下期应缴金额</span>
...@@ -15,9 +15,9 @@ ...@@ -15,9 +15,9 @@
<span>0期</span> <span>0期</span>
<span>已欠缴期数</span> <span>已欠缴期数</span>
</div> </div>
</div> </div> -->
<div class="payment-record-detail"> <div class="payment-record-detail">
<div class="Pr-detail-title"> <div class="Pr-detail-title Pr-detail-title_year">
<span>缴费明细</span> <span>缴费明细</span>
<span>按月缴费</span> <span>按月缴费</span>
</div> </div>
...@@ -31,6 +31,46 @@ ...@@ -31,6 +31,46 @@
<span>缴费成功</span> <span>缴费成功</span>
</div> </div>
</div> </div>
<div class="Pr-detail-content">
<div class="Prd-content-amount">
<span>第2期保费</span>
<span>100.0元</span>
</div>
<div class="Prd-content-time">
<span>2020.05.11 17:45</span>
<span>缴费成功</span>
</div>
</div>
<div class="Pr-detail-content">
<div class="Prd-content-amount">
<span>第2期保费</span>
<span>100.0元</span>
</div>
<div class="Prd-content-time">
<span>2020.05.11 17:45</span>
<span>缴费成功</span>
</div>
</div>
<div class="Pr-detail-content">
<div class="Prd-content-amount">
<span>第2期保费</span>
<span>100.0元</span>
</div>
<div class="Prd-content-time">
<span>2020.05.11 17:45</span>
<span>缴费成功</span>
</div>
</div>
<div class="Pr-detail-content">
<div class="Prd-content-amount">
<span>第2期保费</span>
<span>100.0元</span>
</div>
<div class="Prd-content-time">
<span>2020.05.11 17:45</span>
<span>缴费成功</span>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>
......
@import "../../../style/index.less";
.renewal {
overflow: hidden;
height: 100%;
&:after {
position: absolute;
top: 38px;
right: 0;
width: 36px;
height: 19px;
content: '';
background: url('../../../assets/images/policy/detail/point@2x.png') no-repeat 0 0 /cover;
}
&_open {
background: #FFC842;
}
&_closed {
background: #F65D5D;
}
&-status {
margin: 64px 0 0 20px;
font-size: 28px;
font-weight: 600;
color: #333333;
line-height: 40px;
}
&-desc {
margin: 0 0 49px 20px;
font-size: 28px;
font-weight: 400;
color: #333333;
line-height: 40px;
}
&-container {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 28px 20px 34px;
background: #FFFFFF;
border-radius: 32px 32px 0 0;
&-title {
margin-bottom: 16px;
font-size: 18px;
font-weight: 600;
color: #242629;
line-height: 24px;
}
&-content {
margin-bottom: 4px;
.Rc-content-item {
display: flex;
align-items: center;
.Rcc-item-svg {
margin-right: 8px;
width: 12px;
height: 12px;
border-radius: 50%;
background: #FFC842;
}
.Rcc-item-text {
font-size: 14px;
font-weight: 400;
color: #333333;
line-height: 24px;
}
}
}
&-read {
margin-bottom: 16px;
font-size: 12px;
font-weight: 400;
color: rgba(153,153,153,1);
line-height: 24px;
span {
color: #787EFF;
}
}
&-detail {
margin-bottom: 76px;
.Rc-detail-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
height: 60px;
background: #F6F7FA;
border-radius: 14px;
&:first-child {
margin-bottom: 10px;
}
span:first-child {
font-size: 14px;
font-weight: 400;
color: #666666;
line-height: 24px;
}
span:last-child {
font-size: 14px;
font-weight: 600;
color: #242629;
line-height: 24px;
}
}
}
&-button {
width: 100%;
height: 52px;
background: #FFC842;
border-radius: 14px;
font-size: 16px;
font-weight: 600;
color: #333333;
line-height: 22px;
}
}
}
\ No newline at end of file
<template>
<div class="renewal renewal_open">
<p class="renewal-status">该保单已开通</p>
<p class="renewal-desc">次年自动续保</p>
<div class="renewal-container">
<p class="renewal-container-title">现在已享受</p>
<div class="renewal-container-content">
<div class="Rc-content-item">
<svg-icon class-name="Rcc-item-svg" icon-class="check-circle" />
<span class="Rcc-item-text">无需次年自己手动操作续保</span>
</div>
<div class="Rc-content-item">
<svg-icon class-name="Rcc-item-svg" icon-class="check-circle" />
<span class="Rcc-item-text">本功能无额外费用,可随时取消</span>
</div>
<div class="Rc-content-item">
<svg-icon class-name="Rcc-item-svg" icon-class="check-circle" />
<span class="Rcc-item-text">续保保费按照续保应交保费,自动扣款</span>
</div>
</div>
<p class="renewal-container-read">阅读并同意《<span>次年自动续保服务协议</span></p>
<div class="renewal-container-detail">
<div class="Rc-detail-item">
<span>次年保但生效时间</span>
<span>2020.05.31</span>
</div>
<div class="Rc-detail-item">
<span>扣款方式</span>
<span>安微信默认顺序依次扣款</span>
</div>
</div>
<cr-button class="renewal-container-button">取消续保</cr-button>
</div>
</div>
</template>
<script></script>
<style lang="less" src="./index.less" scoped></style>
@import "../../../style/var.less";
.family {
box-sizing: border-box;
padding: 28px 16px 0;
height: 100%;
background: #F6F6F6;
&-title {
margin-bottom: 16px;
font-size: 18px;
font-weight: 600;
color: #242629;
line-height: 24px;
}
&-form {
padding: 20px 20px 28px;
background: #FFFFFF;
border-radius: 14px;
&-item {
display: flex;
align-items: center;
margin-bottom: 12px;
padding-left: 16px;
// height: 44px;
background: #F6F7FA;
border-radius: 14px;
@{deep} .cr-cell__title {
margin-right: 3px;
width: 94px;
.cr-field--title {
font-size: 14px;
font-weight: 400;
color: #333333;
line-height: 24px;
}
.cr-cell__label {
display: none;
}
}
@{deep} .cr-cell__value {
font-size: 14px;
font-weight: 600;
color: #333333;
line-height: 24px;
}
}
&-radio {
display: flex;
justify-content: space-between;
margin-bottom: 28px;
padding-left: 10px;
.Ff-radio-title {
display: flex;
align-items: center;
.Ffr-title-text {
margin-right: 3px;
font-size: 14px;
font-weight: 400;
color: #333333;
line-height: 24px;
}
.Ffr-title-svg {
width: 12px;
height: 12px;
}
}
.Ff-radio-options {
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;
// padding: 12px 0;
width: 73px;
// height: 36px;
// background: #FFFFFF;
// box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.07);
// border-radius: 8px;
// text-align: center;
.cr-radio__label--right {
font-size: 0;
div {
font-size: 12px;
font-weight: 400;
color: #333333;
}
}
// &:first-child {
// margin-right: 9px;
// }
}
}
}
.Ffr-options-text {
display: inline-block;
padding: 12px 0;
box-sizing: border-box;
width: 73px;
height: 36px;
background: #FFFFFF;
box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.07);
border-radius: 8px;
text-align: center;
font-size: 12px;
font-weight: 400;
color: #333333;
&:first-child {
margin-right: 9px;
}
}
}
}
&-button {
width: 100%;
height: 52px;
background: #FFC842 !important;
border-radius: 14px;
font-size: 16px;
font-weight: 600;
color: #333333;
line-height: 22px;
}
}
&-modal {
@{deep} .panel-body {
font-size: 16px;
font-weight: 400;
color: #666666;
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;
color: #333333;
line-height: 30px;
span:nth-child(1) {
font-weight:400;
}
span:nth-child(2) {
font-weight:600;
}
}
}
}
\ No newline at end of file
<template>
<div class="family">
<p class="family-title">为家人添加保障</p>
<cr-form ref="form" class="family-form" @submit="onSubmit" @failed="onFailed">
<cr-field
class="family-form-item"
v-model="formData.username"
name="姓名"
label="姓名"
placeholder="请输入投保人姓名"
:rules="[{ required: true, message: '请填写用户名' }]"
/>
<cr-field
class="family-form-item"
v-model="formData.idcard"
type="password"
name="身份证号"
label="身份证号"
placeholder="请填写家人身份证号"
/>
<cr-field
@click.native="showPopups"
class="family-form-item"
v-model="formData.relation"
:readonly="true"
name="与本人的关系"
label="与本人的关系"
placeholder="请选择与本人的关系"
/>
<div class="family-form-radio">
<div class="Ff-radio-title">
<span class="Ffr-title-text">有无社保</span>
<svg-icon
icon-class="doubt"
@click.native="modal.delete = true"
class-name="Ffr-title-svg"
/>
</div>
<cr-field
class="Ff-radio-options"
name="社保"
:rules="[{ required: true, message: '请填写用户名' }]"
>
<cr-radio-btn
class=""
slot="input"
v-model="formData.socialSecurity"
:radio-data="planOptions"
/>
</cr-field>
</div>
<cr-button class="family-form-button" native-type="submit">
生成保障方案
</cr-button>
</cr-form>
<cr-popup v-model="showPopup" position="bottom">
<cr-picker
ref="picker"
show-toolbar
:columns="relations"
@confirm="onConfirm"
@cancel="showPopup = false"
/>
</cr-popup>
<Modal
class="family-modal"
v-model="modal.question"
:closeable="false"
cancel-btn=""
title="我们常说的社保都包括哪些?"
confirm-btn="我知道了"
>
常见的社保包括农村合作医疗(新农合)、城镇居民社保、城镇职工医保、少儿医保等政府主导的基本医疗保障项目,满足最基本的医疗保障要求。
</Modal>
<Modal
v-model="modal.confirm"
:closeable="false"
cancel-btn="取消"
confirm-btn="确认无误"
title="信息确认"
>
<div class="family-confirm-modal">
<div class="Fc-modal-item">
<span>首月保费</span>
<span>1元</span>
</div>
<div class="Fc-modal-item">
<span>次月保费</span>
<span>100.00元/月 (共11期)</span>
</div>
<div class="Fc-modal-item">
<span>次月保费</span>
<span>100.00元/月 (共11期)</span>
</div>
<div class="Fc-modal-item">
<span>次月保费</span>
<span>100.00元/月 (共11期)</span>
</div>
</div>
</Modal>
<Modal
class="family-modal"
v-model="modal.delete"
:closeable="false"
cancel-btn="确认删除"
confirm-btn="继续保留"
title="删除确认"
>确认删除【王大闹】的个人信息吗?为提供全面的家庭保障,建议您保留家庭成员信息。
</Modal>
</div>
</template>
<script>
import CrRadioBtn from "@/components/CrRadioBtn";
import Modal from "@/components/Modal";
const planOptions = [
{ label: "有社保", value: "1" },
{ label: "无社保", value: "2" }
];
const relations = ["本人", "配偶", "父母", "子女"];
export default {
name: "Family",
components: {
CrRadioBtn,
Modal
},
data() {
return {
showPopup: false,
relations,
planOptions,
modal: {
question: false,
confirm: false,
delete: false
},
formData: {
username: "",
idcard: "",
relation: "",
socialSecurity: ""
}
};
},
methods: {
async onSubmit() {
// console.log('sucess', values);
},
onFailed() {
// console.log('fail', errorInfo);
},
onConfirm(picker, res) {
this.formData.relation = res[0];
this.showPopup = false;
},
showPopups() {
this.showPopup = true;
if (!this.refreshed) {
this.$refs.picker.refreshColumns();
this.refreshed = true;
}
}
}
};
</script>
<style lang="less" src="./index.less" scoped></style>
@import "../../../style/index.less";
.help-center {
overflow: hidden;
height: 100%;
background: #FFC842;
&-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 21px;
padding: 0 16px 0 20px;
.Hc-head-left {
display: flex;
flex-direction: column;
align-items: center;
p:first-child {
font-size: 28px;
font-weight: 600;
color: #333333;
line-height: 40px;
}
p:last-child {
font-size: 10px;
font-weight: 300;
color: #333333;
line-height: 14px;
letter-spacing:3px;
}
}
.Hc-head-right {
width: 130px;
height: 116px;
}
}
&-container {
position: absolute;
top: 137px;
left: 0;
right: 0;
bottom: 0;
padding: 15px 20px 0;
background: #FFFFFF;
border-radius: 32px 32px 0 0;
}
}
\ No newline at end of file
<template>
<div class="help-center">
<div class="help-center-head">
<div class="Hc-head-left">
<p>帮助中心</p>
<p>HELP CENTER</p>
</div>
<cr-image
class="Hc-head-right"
round
width=""
height=""
src="../../../assets/images/user/help-center@2x.png"
/>
</div>
<div class="help-center-container">
<collapse :collapse-data="qaInfo" :more-btn="false" />
</div>
</div>
</template>
<script>
import Collapse from "@/components/Collapse";
const qaInfo = [
{
q: "这个产品的等待期是多久?",
a: "本产品的等待期为90天,意外及续保无等待期。"
},
{
q: "这款产品提供了哪些保障?",
a:
"本产品对人一生中可能罹患的99%以上的100种重大疾病提供保障,同时还有40种轻症保障也包含在内。在保险期间内,被保险人因意外伤害或在等待期后因疾病初次确诊罹患本产品定义的重大疾病或轻症的,即可获得一笔保险补偿。"
},
{
q: "被保险人有哪些限制?",
a: "可以为出生满30天-60周岁(含)身体健康,且符合健康告知提及状况的本人、配偶、子女或父母投保。"
},
{
q: "理赔后是否可以续保?需要重新完成健康告知吗?",
a:
"无理赔或者已理赔过轻症的第二年可以续保;已理赔过重症的第二年不可以续保;续保无需重新填写健康告知。"
},
{
q: "如何在华泰官网进行保单验真?",
a:
"请登录投保成功短信中提示的华泰官网查询网http://agt.ehuatai.com/nonautoquery/。填写登录信息时,类别选择“家庭财产、意外伤害保险”,保单号在投保成功的短信中,密码填写被保险人身份证号,即可登录查询保单承保信息。"
}
];
export default {
name: "HelpCenter",
components: {
Collapse
},
data() {
return {
qaInfo
};
}
};
</script>
<style lang="less" src="./index.less" scoped></style>
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