Skip to content

dev / pingan-life-index-pro

Go to a project
Toggle navigation
Toggle navigation pinning
3b13238d by simon
Options

删除备份文件

1 parent 65761f08
Inline Side-by-side
Showing 12 changed files with 0 additions and 1391 deletions
1 /**
2 * 组件描述:PC顶栏导航下拉菜单
3 */
4 import api from '@/api/api'
5 import {
6 httpPost
7 } from '@/api/fetch-api.js'
8
9 export default {
10 name: "DropDownList",
11 data() {
12 return {
13 activeIndex: 0,
14 sTitle: this.dataObj && this.dataObj.name || '',
15 reloadBlackList: []
16 };
17 },
18 props: {
19 /**
20 * 导航类型
21 * nav:普通菜单导航
22 * login:登陆菜单
23 * lang:三语切换菜单
24 */
25 type: {
26 type: String,
27 default () {
28 return "nav";
29 }
30 },
31 /**
32 * 传入菜单完整数据
33 */
34 dataObj: {
35 type: Object,
36 default () {
37 return {};
38 }
39 },
40 /**
41 * 传入菜单列表
42 */
43 dataList: {
44 type: Array,
45 default () {
46 return [];
47 }
48 },
49 labelProperty: {
50 type: String,
51 default () {
52 return "name";
53 }
54 }
55 },
56 directives: {
57 dpl: {
58 bind(el) {
59 el.style.display = "none";
60 }
61 }
62 },
63 methods: {
64 onNavHandler() {
65 console.log("this.dataObj:", this.dataObj);
66 let path = this.dataObj && this.dataObj.path || "";
67 if (path) {
68 this.$router.push({
69 path: path
70 })
71 }
72 },
73 onOverHandler(event) {
74 let ul = event.currentTarget.childNodes[1].childNodes[1];
75 ul.style.display = "block";
76 },
77 onOutHandler(event) {
78 // console.log(event);
79 let ul = event.currentTarget.childNodes[1].childNodes[1];
80 ul.style.display = "none";
81 },
82 onClickHandler(event, index) {
83 // 隐藏其他
84 if (this.$refs.ul) {
85 this.$refs.ul.style.display = "none";
86 }
87
88 // 选择item
89 this.activeIndex = index;
90 let curData = this.dataList[index];
91 if (this.type == "lang") {
92 // 如果是语言设置，则设置语言
93 let lang = curData.value;
94 if (lang != localStorage.getItem('lang')) {
95 localStorage.setItem("lang", lang);
96 if (this.reloadBlackList.indexOf(this.$route.path) >= 0) {
97 window.location.reload();
98 } else {
99 this.$i18n.locale = lang;
100 this.sTitle = curData.name;
101 this.$root.eventBus.$emit("langChange");
102 }
103 }
104 } else {
105 let item = curData;
106 let path = item && item.path || "";
107 this.$root.eventBus.$emit(item.path);
108 if (path) {
109 // console.log("path:", path);
110 // modify
111 if (path == "/custom/service?q=m5") {
112 path = "/clarms"
113 }
114 this.$router.push({
115 path: path
116 })
117 } else {
118 let value = item && item.value || null;
119 if (value) {
120 switch (value) {
121 case "login":
122 this.onLoginHandler();
123 break;
124 case "logout":
125 this.logoutHandler();
126 break;
127 case "gotoVHIS":
128 // gotoVHIS(this.$i18n.locale);
129 this.$router.push({
130 path: "/vhis"
131 });
132 break;
133 }
134 }
135 }
136 }
137 },
138 onLoginHandler() {
139 this.$root.eventBus.$emit("login");
140 if (this.$route.name == "login") {
141 return;
142 } else if (this.$route.name == "register" || this.$route.name == "passwordFind") {
143 this.$router.push({
144 path: "/login"
145 });
146 } else {
147 let callback = this.$route.fullPath;
148 this.$router.push({
149 path: "/login?callback=" + callback
150 });
151 }
152 },
153 logoutHandler() {
154 this.clearCache();
155 httpPost({
156 url: api.logout
157 }).then(() => {
158 this.$store.commit("SET_USER_INFO", null);
159 this.showLogoutTip();
160 });
161 },
162 clearCache() {
163 for (let index = 0; index < sessionStorage.length; index++) {
164 let key = sessionStorage.key(index);
165 console.log(key);
166 sessionStorage.removeItem(key);
167 }
168 },
169 showLogoutTip() {
170 // 登出后的提示
171 // alert("登出成功");
172 },
173 updateTitle(name) {
174 this.sTitle = name || this.sTitle;
175 }
176 },
177 computed: {
178 dplLable() {
179 return this.dataList[this.activeIndex][this.labelProperty];
180 }
181 },
182 created() {},
183 };
1 @import '@/styles/_support.scss';
2
3 .drop-list {
4 display: inline-block;
5 min-width: 120px;
6 position: relative;
7 margin: 0 13.2px;
8 font-size: $fontSizeTitle;
9
10 .list {
11 position: absolute;
12 width: 132px;
13 left: 0;
14 right: 0;
15 margin: 0 auto;
16 font-size: $fontSize;
17 left: 50%;
18 transform: translateX(-50%); //居中处理
19
20 .space {
21 height: 18px;
22 }
23 }
24
25 span {
26 display: block;
27 text-align: center;
28 }
29
30 span:hover {}
31
32 ul {
33 display: none;
34 overflow: hidden;
35 box-shadow: 0 0 18px 0 rgba(255, 87, 0, 0.15);
36 border-radius: 6px;
37
38 li {
39 // border-bottom: solid 1px #f1f1f1;
40 background: #ffffff;
41 text-align: center;
42 padding: 18px 0;
43 position: relative;
44
45 &:after {
46 content: "";
47 width: 84px;
48 height: 1px;
49 background: #f1f1f1;
50 position: absolute;
51 bottom: 0;
52 left: 50%;
53 transform: translateX(-50%); //居中处理
54 }
55
56 }
57
58 li:last-child {
59 border-bottom: none;
60
61 &:after {
62 background: transparent;
63 }
64 }
65
66 li:hover {
67 color: $cOrange;
68 }
69 }
70 }
71 .drop-list:lang(en){
72 min-width: 0;
73 margin: 0 32px;
74 }
75
76 .user {
77 width: 111px;
78 height: 36px;
79 border-radius: 36px;
80 background-color: $cOrange;
81 display: flex;
82 align-items: center;
83 justify-content: center;
84 color: #ffffff;
85 margin: 0 auto;
86
87 span {
88 max-width: 51px;
89 overflow: hidden;
90 white-space: nowrap;
91 text-overflow: ellipsis;
92 }
93
94 .icon-img {
95 margin: 0 6px;
96 }
97 }
98
99 // 登陆
100 .login {}
101
102
103 @media (max-width: 1100px) {
104 .drop-list {
105 margin: 0 28px;
106 min-width: 0;
107 }
108 .drop-list:lang(en) {
109 margin: 0 22px;
110 }
111 }
112
113
114 @media (max-width: 1000px) {
115 // .drop-list {
116 // margin: 0 20px;
117 // }
118 }
1 <template>
2 <div class="drop-list" :class="{'login':type=='login'}" @mouseover="onOverHandler($event)" @mouseout="onOutHandler($event)">
3 <!-- 登陆下拉样式 -->
4 <template v-if="type=='login'">
5 <div class="user" @click="onLoginHandler()">
6 <img class="icon-img" src="@/assets/images/home/icon-user.png">
7 <span>{{dataObj.name}}</span>
8 </div>
9 </template>
10 <!-- 其他下拉样式 -->
11 <template v-else>
12 <span @click="onNavHandler()">
13 {{type == "lang" ? sTitle : dataObj.name}}
14 </span>
15 </template>
16 <div class="list">
17 <div class="space"></div>
18 <ul ref="ul" v-dpl>
19 <li v-for="(item, index) in dataList" :key="index" @mousedown="onClickHandler($event,index)">{{item[labelProperty]}}</li>
20 </ul>
21 </div>
22 </div>
23 </template>
24
25 <script src="./dropdown.js"></script>
26 <style lang="scss" scoped>
27 @import "./dropdown.scss";
28 </style>
1
2 /**
3 * 组件描述:页脚
4 * 静态页面
5 */
6
7 export default {
8 data() {
9 return {
10 key: 'value',
11 qrcodeVisible: false,
12 }
13 },
14 components: {},
15 methods: {
16 onOverHandler(event) {
17 this.qrcodeVisible = true;
18 },
19 onOutHandler(event) {
20 this.qrcodeVisible = false;
21 },
22 toPage(name) {
23 document.documentElement.scrollTop = 0;
24 document.body.scrollTop = 0;
25 this.$router.push({
26 name: name
27 })
28 },
29 toPath(path) {
30 document.documentElement.scrollTop = 0;
31 document.body.scrollTop = 0;
32 this.$router.push({
33 path: path
34 })
35 },
36 initData() {}
37 },
38 mounted() {},
39 created() {}
40 }
1 @import '@/styles/_support.scss';
2
3 .v-footer {
4 color: #ffffff;
5 background-color: #2e2b2a;
6 font-size: $fontSize;
7
8 .footer-containter {
9 margin: 0 auto;
10 max-width: 1200px;
11
12 .cont {
13 .logo-wrap {
14 padding: 26px 0;
15
16 .logo-img {
17 cursor: pointer;
18 }
19 }
20
21 .line {
22 width: 100%;
23 height: 1px;
24 opacity: 0.2;
25 background-color: #ffffff;
26 }
27
28 // 信息
29 .info {
30 padding: 24px 0 24px;
31 display: flex;
32
33 // 热线
34 .hotline {
35 min-width: 294px;
36
37 .contact {
38 .n-item {
39 margin-bottom: 7.2px;
40 }
41
42 .phone {
43 color: $cOrange;
44 font-size: $fontSizeTitle;
45 font-weight: bold;
46 }
47
48 &:first-child {
49 margin-bottom: 24px;
50 }
51 }
52 }
53
54 // 导航
55 .nav {
56 display: flex;
57
58 .nav-v {}
59
60 .n-item {
61 cursor: pointer;
62 min-width: 177px;
63 }
64 }
65
66 .nav2 {
67 display: none;
68 }
69
70 // 公众号
71 .public {
72 position: relative;
73 text-align: left;
74 margin-left: 63.84px;
75
76 .qrcode-wrap {
77 text-align: center;
78 margin-top: 3.6px;
79
80
81 .qrcode {
82 width: 100px;
83 }
84
85 .c1 {
86 margin-top: 3.6px;
87 }
88 }
89
90 .icon {
91 margin-top: 9px;
92 margin-right: 12px;
93 display: inline-block;
94 }
95 }
96
97 // 公共组件
98 .n-item {
99 margin-bottom: 24px;
100 padding-right: 36px;
101 color: #dcdddd;
102
103 &:first-child {
104 margin-bottom: 32px;
105 }
106
107 &:last-child {
108 margin-bottom: 0;
109 }
110 }
111 }
112
113 // 版权
114 .copyright {
115 color: rgba(179, 177, 168, 0.5);
116 padding: 18px 0;
117 line-height: 1.58;
118 font-size: $fontSizeSmall;
119 }
120 }
121
122 }
123 }
124
125
126 @media (max-width: 1200px) {
127 .v-footer {
128 @include content-percent();
129
130 .footer-containter {
131 .cont {
132 .info {
133 display: block;
134
135 .hotline {}
136
137 .nav {
138 margin-top: 24px;
139 display: flex;
140
141 .nav-v {
142 width: 100%;
143 }
144
145 .n-item {
146 min-width: 0;
147 margin-right: 0;
148 padding-right: 10px;
149 }
150 }
151
152 .nav2 {
153 display: none;
154 }
155
156 .public {
157 margin: 0;
158 margin-top: 36px;
159 text-align: left;
160 min-height: 144px;
161 }
162 }
163
164 .copyright {
165 box-sizing: border-box;
166 padding-right: 24px;
167 }
168 }
169 }
170 }
171 }
172
173 @media (max-width: 768px) {
174 .v-footer {
175 font-size: $fontSizeSmall-M;
176
177 .footer-containter {
178 .cont {
179 .info {
180 display: flex;
181 justify-content: space-between;
182
183 .hotline {
184 min-width: 0;
185
186 .phone {
187 font-size: $fontSizeSmall-M !important;
188 font-weight: bold !important;
189 }
190 }
191
192 .nav {
193 display: none;
194 margin-top: 0;
195
196 .nav-v {}
197
198 .n-item {}
199 }
200
201 .nav2 {
202 display: block;
203 }
204
205 .public {
206 margin: 0;
207 min-width: 108px;
208
209 .qrcode-wrap {
210 img {
211 width: 84px;
212 }
213
214 .c1 {
215 display: none;
216 }
217 }
218 }
219
220 // 公共组件
221 .n-item {
222 margin-bottom: 24px;
223
224 &:first-child {
225 margin-bottom: 24px;
226 }
227 }
228 }
229
230 .copyright {}
231 }
232 }
233 }
234
235 }
1
2 <template>
3 <footer class="v-footer ">
4 <div class="footer-containter ">
5 <div class="cont">
6 <div class="logo-wrap">
7 <img class="logo-img" src="@/assets/images/home/footer-logo.png">
8 </div>
9 <div class="line"></div>
10 <!-- 信息 -->
11 <div class="info">
12 <div class="hotline">
13 <div class="contact">
14 <div class="n-item">{{$t('footer.hkPhone')}}</div>
15 <div class="phone">(852)2983 8866</div>
16 </div>
17 <div class="contact">
18 <div class="n-item">{{$t('footer.cnPhone')}}</div>
19 <div class="phone">(86)40078 95511</div>
20 </div>
21 </div>
22 <div class="nav">
23 <div class="nav-v">
24 <div @click="toPage('profile')" class="n-item">{{$t('footer.aboutUs')}}</div>
25 <div @click="toPage('profile')" class="n-item">{{$t('footer.companyIntroduction')}}</div>
26 <div @click="toPage('newsList')" class="n-item">{{$t('footer.news')}}</div>
27 <div @click="toPage('joinUs')" class="n-item">{{$t('footer.joinUs')}}</div>
28 </div>
29 <div class="nav-v">
30 <div @click="toPage('help')" class="n-item">{{$t('footer.helpCenter')}}</div>
31 <div @click="toPage('privacy')" class="n-item">{{$t('footer.privacy')}}</div>
32 <div @click="toPage('terms')" class="n-item">{{$t('footer.terms')}}</div>
33 <div @click="toPage('personalDataCollection')" class="n-item">{{$t('footer.protocol')}}</div>
34 </div>
35 <div class="nav-v">
36 <div @click="toPath('/custom/service?q=m1')" class="n-item">{{$t('footer.contactUs')}}</div>
37 <div @click="toPage('contactMethod')" class="n-item">{{$t('footer.contactInformation')}}</div>
38 <div @click="toPage('serviceNet')" class="n-item">{{$t('footer.service')}}</div>
39 <div @click="toPage('map')" class="n-item">{{$t('footer.map')}}</div>
40 </div>
41 </div>
42
43 <div class="nav nav2">
44 <div class="nav-v">
45 <div @click="toPage('privacy')" class="n-item">{{$t('footer.privacy')}}</div>
46 <div @click="toPage('terms')" class="n-item">{{$t('footer.terms')}}</div>
47 <div @click="toPage('personalDataCollection')" class="n-item">{{$t('footer.protocol')}}</div>
48 </div>
49 </div>
50
51 <div class="public">
52 <div class="tit">{{$t('footer.qrcode')}}</div>
53 <div @click="qrcodeVisible = !qrcodeVisible" v-if="qrcodeVisible" class="qrcode-wrap">
54 <img @mouseout="onOutHandler($event)" src="@/assets/images/home/qrcode.png" alt="">
55 <div class="c1">{{$t('footer.qrcodeBot')}}</div>
56 </div>
57 <template v-else>
58 <img @click="qrcodeVisible = !qrcodeVisible" @mouseover="onOverHandler($event)" @mouseout="onOutHandler($event)" class="icon pointer" src="@/assets/images/home/footer-icon-1.png" alt="">
59 <img class="icon pointer" src="@/assets/images/home/footer-icon-2.png" alt="">
60 <img class="icon pointer" src="@/assets/images/home/footer-icon-3.png" alt="">
61 </template>
62 </div>
63
64 </div>
65 <div class="line"></div>
66 <!-- 版权 -->
67 <div class="copyright">
68 {{$t('footer.copyright')}}
69 </div>
70 </div>
71 </div>
72 </footer>
73 </template>
74
75 <script src="./footer.js"></script>
76 <style lang="scss" scoped>
77 @import "./footer.scss";
78 </style>
1 /**
2 * 组件描述:官网顶栏导航
3 * 通过@midea 媒体查询决定显示PC/移动端样式
4 */
5
6 import {
7 mapState
8 } from 'vuex'
9
10 import {
11 getObjByListKeyValue
12 } from '@utils/utils.js'
13 import VDropdown from '@components/home/dropdown/dropdown.vue'
14 import MDropdown from '@components/home/m-dropdown/m-dropdown.vue'
15
16 export default {
17 name: 'VHeader',
18 components: {
19 VDropdown,
20 MDropdown
21 },
22 computed: {
23 i18n() {
24 return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
25 }
26 },
27 data() {
28 return {
29 dropdownMVisible: false,
30 loginMVisible: false,
31 maxClientWidth: 1200,
32 // 用于传入到导航组件dropdown 常规导航菜单数据
33 navList: [],
34 // 用于传入到导航组件dropdown 登菜单数据
35 loginData: {},
36 // 用于传入到导航组件dropdown 语言菜单数据
37 langData: {
38 name: "繁",
39 path: "",
40 list: [{
41 name: "繁",
42 path: "",
43 value: "tc"
44 },
45 {
46 name: "简",
47 path: "",
48 value: "zh"
49 },
50 {
51 name: "EN",
52 path: "",
53 value: "en"
54 },
55 ]
56 }
57 }
58 },
59 computed: {
60 ...mapState({
61 isSmallScreen: state => state.isSmallScreen,
62 userInfo: state => state.userInfo
63 })
64 },
65 methods: {
66 toIndex() {
67 this.$router.push({
68 path: "/"
69 })
70 },
71 onShowDropdown(evtStr) {
72 this.dropdownMVisible = false;
73 this.loginMVisible = false;
74 if (evtStr == 'nav') {
75 this.dropdownMVisible = true;
76 } else if (evtStr == 'login') {
77 this.loginMVisible = true;
78 } else {}
79 },
80 checkIsSmallScreen() {
81 const self = this;
82 if (document.body.clientWidth > self.maxClientWidth) {
83 self.$store.commit('IS_SMALL_SCREEN', false)
84 } else {
85 self.$store.commit('IS_SMALL_SCREEN', true)
86 }
87 },
88 initData() {
89 let i18n = this.$i18n.messages[this.$i18n.locale] || {};
90 this.buildLoginMenu();
91 this.navList = i18n.nav.navList;
92 let curLang = getObjByListKeyValue(this.$i18n.locale, "value", this.langData.list)
93 this.langData.name = curLang.name;
94 },
95 /**
96 * 根据登陆状态构建登陆菜单
97 */
98 buildLoginMenu() {
99 let i18n = this.$i18n.messages[this.$i18n.locale] || {};
100 let menuData = JSON.parse(JSON.stringify(i18n.nav.loginData));
101 let list = [];
102 if (this.userInfo && this.userInfo.name) {
103 menuData.name = this.userInfo.name;
104 if (this.$i18n.locale == "en" && this.userInfo.nameEn) {
105 menuData.name = this.userInfo.nameEn;
106 }
107 menuData.list.forEach(element => {
108 if (element.type == "auth") {
109 list.push(element);
110 }
111 });
112 } else {
113 menuData.list.forEach(element => {
114 if (element.type == "noAuth") {
115 list.push(element);
116 }
117 });
118 }
119 menuData.list = list;
120 this.$set(this, 'loginData', menuData);
121 }
122 },
123 beforeDestroy() {
124 window.removeEventListener('resize', this.checkIsSmallScreen(), false)
125 },
126 mounted() {
127 window.addEventListener('resize', () => this.checkIsSmallScreen(), false);
128 this.$root.eventBus.$on("langChange", () => {
129 this.initData();
130 });
131 },
132 watch: {
133 userInfo(val) {
134 this.buildLoginMenu();
135 }
136 },
137 created() {
138 this.initData();
139 },
140 }
1 @import '@/styles/_support.scss';
2
3 $navHei: 92px;
4 $navHeiM: 72px;
5
6 .v-header {
7 height: $navHei;
8 background-color: #fff;
9 color: $cFontGray;
10 position: relative;
11 z-index: 1000;
12 font-size: $fontSize;
13
14 .header-container {
15 max-width: 1200px;
16 height: 100%;
17 margin: auto;
18 display: flex;
19 align-items: center;
20 position: relative;
21 }
22
23 .main-nav {
24 height: 100%;
25 flex: 1 0 auto;
26 }
27
28 .logo-img {
29 margin-right: 43.2px;
30 max-width: 213px;
31 cursor: pointer;
32 }
33
34 .nav-list {
35 height: 100%;
36 display: flex;
37 align-items: center;
38 justify-content: flex-end;
39 position: relative;
40 }
41
42 .nav-item {
43 display: flex;
44 align-items: center;
45 height: 100%;
46 margin: 0;
47 -ms-flex-pack: center;
48 justify-content: center;
49 position: relative;
50 cursor: pointer;
51 }
52
53 .main-nav-list {
54 display: flex;
55 cursor: pointer;
56 }
57
58 .nav-item.link-item {
59 padding: 0 50px;
60 height: 60px;
61 }
62
63 .nav-item.search {
64 flex: 1 1 auto;
65 }
66
67 .nav-item.auth {
68 color: #ffffff;
69
70 .lang {
71 color: $cOrange;
72 min-width: 96px;
73 }
74 }
75 }
76
77 .pc {
78 display: block;
79 }
80
81 // 移动端导航
82 .mobile {
83 display: none;
84
85 &-nav-list {
86 position: absolute;
87 right: 0;
88 top: 24px;
89
90 display: flex;
91 align-items: center;
92
93 img {
94 width: 20px;
95 margin-left: 20px;
96 }
97 }
98
99 }
100
101 @media (max-width: 1200px) {
102 .v-header {
103 @include content-percent(1%);
104 }
105 }
106
107
108 @media (max-width: 1100px) {
109 .v-header {
110 .logo-img {
111 margin-right: 24px;
112 }
113 }
114
115 .pc {
116
117 .auth {
118 margin-right: 20px;
119 }
120
121 .nav-item.auth {
122
123 .lang {
124 min-width: auto;
125 }
126 }
127 }
128 }
129
130
131 @media (max-width: 980px) {
132 .v-header {
133
134 @include content-percent();
135
136 .main-nav {}
137
138 .logo-img {
139 max-width: 213px;
140 margin: 0;
141 }
142
143 .pc {
144 display: none;
145 }
146
147 .mobile {
148 display: block;
149
150 &-nav-list {
151 top: 32px;
152 }
153 }
154 }
155 }
156
157 @media (max-width: 768px) {
158 .v-header {
159
160 // 原1200px临界样式
161
162 .pc {
163 display: none;
164 }
165
166 height: $navHeight-M;
167
168 .logo-img {
169 width: 186px;
170 margin: 0;
171 }
172
173 .mobile {
174 display: block;
175
176 &-nav-list {
177 top: 24px;
178 }
179 }
180 }
181 }
1
2 <template>
3 <header class="v-header">
4 <div class="header-container">
5 <img @click="toIndex" src="@/assets/images/home/header-logo.png" alt="中国平安人寿保险" class="logo-img">
6
7 <div class="main-nav">
8 <!-- mobile -->
9 <div class="nav-list-m mobile">
10 <div class="mobile-nav-list">
11 <img @click="onShowDropdown('login')" v-if="!loginMVisible" src="@/assets/images/home/mobile-user.png" alt="">
12 <img @click="onShowDropdown('')" v-else src="@/assets/images/home/mobile-user.png" alt="">
13 <img @click="onShowDropdown('nav')" v-if="!dropdownMVisible" src="@/assets/images/home/mobile-nav.png" alt="">
14 <img @click="onShowDropdown('')" v-else src="@/assets/images/home/mobile-nav-close.png" alt="">
15 </div>
16 <m-dropdown class="lang" :type="'nav'" :visible="dropdownMVisible" :show-dropdown-m="onShowDropdown" :lang-list="langData.list" ref="pcMenu"></m-dropdown>
17 <m-dropdown class="lang" :type="'login'" :visible="loginMVisible" :show-dropdown-m="onShowDropdown"></m-dropdown>
18 </div>
19
20 <!-- pc -->
21 <div class="nav-list pc">
22 <div class="main-nav-list">
23 <v-dropdown v-for="item in navList" :key="item.id" :data-obj="item" :data-list="item.list">
24 </v-dropdown>
25 </div>
26 <div class="nav-item search"></div>
27 <div class="nav-item auth">
28 <v-dropdown class="lang" :type="'login'" :data-obj="loginData" :data-list="loginData.list" ref="mobileMenu"></v-dropdown>
29 <v-dropdown class="lang" :type="'lang'" :data-obj="langData" :data-list="langData.list"></v-dropdown>
30 </div>
31 </div>
32
33 </div>
34
35 </div>
36 </header>
37 </template>
38
39 <script src="./header.js"></script>
40 <style lang="scss" scoped>
41 @import "./header.scss";
42 </style>
1 import {
2 mapState
3 } from 'vuex'
4
5 import api from '@/api/api'
6 import {
7 httpPost
8 } from '@/api/fetch-api.js'
9
10 export default {
11 name: "DropDownList",
12 data() {
13 return {
14 navList: [],
15 activeNames: [],
16 activeName: [],
17 activeIndex: -1,
18 borderBoo: false
19 };
20 },
21 props: {
22 visible: {
23 type: Boolean,
24 default () {
25 return false;
26 }
27 },
28 /**
29 * 导航类型
30 * nav:普通菜单导航
31 * login:登陆菜单
32 * lang:三语切换菜单
33 */
34 type: {
35 type: String,
36 default () {
37 return "nav";
38 }
39 },
40 /**
41 * 传入菜单列表
42 */
43 langList: {
44 type: Array,
45 default () {
46 return [];
47 }
48 },
49 // 显示/隐藏移动端导航
50 showDropdownM: {
51 type: Function,
52 default: null
53 },
54 },
55 computed: {
56 ...mapState({
57 isSmallScreen: state => state.isSmallScreen,
58 userInfo: state => state.userInfo
59 }),
60 locale() {
61 return this.$i18n.locale || 'tc';
62 },
63 i18n() {
64 return this.$i18n.messages && this.$i18n.locale ? this.$i18n.messages[this.$i18n.locale] : {};
65 },
66 },
67 methods: {
68 // 跳转菜单
69 onClickHandler(item) {
70 let path = item && item.path || "";
71 this.showDropdownM('');
72 if (path) {
73 this.$router.push({
74 path: path
75 })
76 } else {
77 let value = item && item.value || null;
78 if (value) {
79 switch (value) {
80 case "login":
81 this.onLoginHandler();
82 break;
83 case "logout":
84 this.logoutHandler();
85 break;
86 case "gotoVHIS":
87 // gotoVHIS(this.$i18n.locale);
88 this.$router.push({
89 path: "/vhis"
90 });
91 break;
92 }
93 }
94 }
95 },
96 onLoginHandler() {
97 if (this.$route.name == "login") {
98 return;
99 } else if (this.$route.name == "register" || this.$route.name == "passwordFind") {
100 this.$router.push({
101 path: "/login"
102 });
103 } else {
104 let callback = this.$route.fullPath;
105 this.$router.push({
106 path: "/login?callback=" + callback
107 });
108 }
109 },
110 logoutHandler() {
111 this.clearCache();
112 httpPost({
113 url: api.logout
114 }).then(() => {
115 this.$store.commit("SET_USER_INFO", null);
116 this.showLogoutTip();
117 });
118 },
119 clearCache() {
120 for (let index = 0; index < sessionStorage.length; index++) {
121 let key = sessionStorage.key(index);
122 sessionStorage.removeItem(key);
123 }
124 },
125 // 点击item
126 onChangeHandler(evt) {
127 this.activeIndex = evt;
128 },
129 /**
130 * 设置语言
131 */
132 setLangHandler(curData) {
133 this.showDropdownM('');
134 // 如果是语言设置，则设置语言
135 let lang = curData.value;
136 this.$i18n.locale = lang;
137 localStorage.setItem("lang", lang);
138 this.sTitle = curData.name;
139 window.location.reload();
140 },
141 initData() {
142 let navList = [];
143 if (this.type == "nav") {
144 navList = this.i18n.nav.navList;
145 navList.forEach(element => {
146 this.activeNames.push(
147 []
148 )
149 });
150 } else if (this.type == "login") {
151 // 构建登陆页面
152 let i18n = this.$i18n.messages[this.$i18n.locale] || {};
153 let menuData = JSON.parse(JSON.stringify(i18n.nav.loginData));
154 let list = [];
155 if (this.userInfo && this.userInfo.name) {
156 menuData.name = this.userInfo.name;
157 menuData.list.forEach(element => {
158 if (element.type == "auth") {
159 list.push(element);
160 }
161 });
162 } else {
163 menuData.list.forEach(element => {
164 if (element.type == "noAuth") {
165 list.push(element);
166 }
167 });
168 }
169 // menuData.list = list;
170 navList = list;
171 // console.log("navList:", navList);
172 }
173 this.navList = navList;
174
175 }
176 },
177 created() {
178 this.initData();
179 },
180 watch: {
181 visible(newVal, oldVal) {
182 this.$nextTick(() => {
183 this.$refs.panel.scrollTop = 0;
184 });
185 },
186 userInfo(val) {
187 this.initData();
188 }
189 },
190 };
1 @import '@/styles/_support.scss';
2
3 .panel {
4 z-index: 9999;
5 display: block;
6 left: 0;
7 top: $navHeight-M;
8 position: fixed;
9 width: 100%;
10 height: 100%;
11 // background-color: rgba($color: #000000, $alpha: 0.3);
12 background-color: #ffffff;
13 overflow: scroll;
14 padding-bottom: 200px;
15
16 // 遮罩
17 .mask {
18 width: 100%;
19 height: 100%;
20 position: fixed;
21 z-index: 5000;
22 left: 0;
23 top: 0;
24 }
25
26 .list {
27 position: relative;
28 z-index: 5001;
29 padding: 0 20px;
30 // background-color: #ffffff;
31 }
32
33 // 国际化
34 .lang {
35 position: relative;
36 z-index: 5002;
37 display: flex;
38 background-color: #ffffff;
39 padding: 20px 36px;
40
41 &-item {
42 border-right: solid 1px #ebedf0;
43 padding: 0 12px;
44 @extend .fcc;
45
46
47 &:first-child {
48 padding: 0 10px 0 0;
49 }
50
51 &-act {
52 color: $cOrange;
53 }
54 }
55
56 }
57
58 }
59
60 .coll-item-act {
61 color: $cOrange;
62 }
63
64 .list-item {
65 @extend .bb;
66 display: flex;
67 align-items: center;
68 padding: 16px 16px;
69 position: relative;
70 border-bottom: 1px solid #ebedf0;
71 font-size: 14px;
72 color: $cFontGray;
73 background-color: #fff;
74
75 .txt {
76 flex: 1;
77 }
78 }
79
80 .icon-wrap {
81 @extend .fcc;
82 height: 100%;
83 }
84
85 .plus-icon {
86 width: 21px;
87 height: 21px;
88 background: url("~@/assets/images/home/icon-head-plus.png") no-repeat center;
89 @extend .bis;
90 transform: scale(.6);
91 }
92
93 .arrow-icon {
94 width: 21px;
95 height: 21px;
96 background: url("~@/assets/images/home/icon-head-right-arrow.png") no-repeat center;
97 @extend .bis;
98 transform: scale(.6);
99 }
100
101 .plus-icon-act {
102 background: url("~@/assets/images/home/icon-head-plus-act.png") no-repeat center;
103 }
104
105
106
107 .hide {
108 display: none;
109 }
110
111
112 .panel::-webkit-scrollbar {
113 display: none;
114 }
1 <template>
2 <div>
3 <div ref="panel" class="panel" :class="{'hide':!visible}">
4 <div class="mask" @click="showDropdownM('')"></div>
5 <!-- 列表 -->
6 <div class="list">
7 <div v-for="(item,index) in navList" :key="item.id" :index="index">
8 <van-collapse @change="onChangeHandler" v-model="activeNames[index]" v-if="item && item.list && item.list.length > 0">
9 <van-collapse-item :border="borderBoo" :title="item.name" :name="index">
10 <div slot="title">
11 <span :class="{'coll-item-act':index == activeIndex}">{{item.name}}</span>
12 </div>
13 <div slot="right-icon">
14 <div class="icon-wrap">
15 <div class="plus-icon" :class="{'plus-icon-act':index == activeIndex}"></div>
16 </div>
17 </div>
18 <div @click="onClickHandler(item2)" class="list-item" v-for="item2 in item.list" :key="item2.id">
19 <div class="arrow-icon"></div>
20 <div class="txt">{{ item2.name }}</div>
21 </div>
22 </van-collapse-item>
23 </van-collapse>
24 <div v-else @click="onClickHandler(item)" class="list-item">
25 {{item.name}}
26 </div>
27 </div>
28 </div>
29 <!-- 语言 -->
30 <div v-if="langList && langList.length > 0" class="lang">
31 <div @click="setLangHandler(item)" class="lang-item pointer" :class="{'lang-item-act':locale==item.value}" v-for="item in langList" :key="item.id">
32 {{ item.name }}
33 </div>
34 </div>
35 </div>
36 </div>
37 </template>
38
39 <script src="./m-dropdown.js"></script>
40 <style lang="scss" scoped>
41 @import "./m-dropdown.scss";
42 </style>