提交 b0225a6a 编写于 作者: KK's avatar KK

默认菜单

上级 2582c038
...@@ -7,7 +7,9 @@ ...@@ -7,7 +7,9 @@
</ion-tab> </ion-tab>
</template> </template>
</template> </template>
<ion-tab v-if="useDefaultMenu" key="setting" tab="setting" >
<component :is="'app-setting'" ></component>
</ion-tab>
<ion-tab-bar slot="bottom"> <ion-tab-bar slot="bottom">
<template v-for="item in items"> <template v-for="item in items">
<template v-if="!item.hidden"> <template v-if="!item.hidden">
...@@ -19,6 +21,10 @@ ...@@ -19,6 +21,10 @@
</ion-tab-button> </ion-tab-button>
</template> </template>
</template> </template>
<ion-tab-button v-if="useDefaultMenu" tab="setting" >
<ion-icon name="settings"></ion-icon>
<ion-label>设置</ion-label>
</ion-tab-button>
</ion-tab-bar> </ion-tab-bar>
</ion-tabs> </ion-tabs>
...@@ -26,12 +32,22 @@ ...@@ -26,12 +32,22 @@
<script lang="ts"> <script lang="ts">
import { Vue, Component, Prop, Emit, Model } from 'vue-property-decorator'; import { Vue, Component, Prop, Emit, Model } from 'vue-property-decorator';
import { Environment } from '@/environments/environment';
@Component({ @Component({
components: { components: {
} }
}) })
export default class AppMobMenuDefaultView extends Vue { export default class AppMobMenuDefaultView extends Vue {
/**
* 使用默认菜单
*
* @type {*}
* @memberof AppMobMenuDefaultView
*/
public useDefaultMenu:boolean = Environment.useDefaultMenu;
/** /**
* 双向值绑定 * 双向值绑定
* *
......
...@@ -87,7 +87,6 @@ export default class AppSelect extends Vue { ...@@ -87,7 +87,6 @@ export default class AppSelect extends Vue {
let index = this.options.findIndex((item:any)=>{ let index = this.options.findIndex((item:any)=>{
return this.activeTheme == item.value; return this.activeTheme == item.value;
}) })
console.log(index);
this.activeoption = index>-1? this.options[index]:null; this.activeoption = index>-1? this.options[index]:null;
} }
......
.app-setting {
background: #f4f3f8;
.content {
width: 100%;
height: 100%;
overflow: auto;
.content-list {
margin-top: 12px;
.content-list-item-content {
width: 100%;
height: 100%;
padding: 0 15px;
justify-content: space-between;
display: flex;
align-items: center;
.content-list-item-content-text {
font-size: 14px;
}
ion-icon {
color: #bbbbbb;
}
.app-mobile-select{
width: 70%;
display: flex;
justify-content: flex-end;
}
}
.content-list-item-content:active{
background: #f4f3f8;
}
}
}
ion-item {
--inner-padding-end: 0 !important;
--padding-start: 0 !important;
--border-style: 0;
color: #565656;
--color-activated: #f4f3f8;
--color-focused: #f4f3f8;
--color-hover:#f4f3f8;
}
}
\ No newline at end of file
<template>
<ion-page :className="{ 'view-container': true,'app-setting': true}">
<ion-header>
<ion-toolbar class="ionoc-view-header">
<ion-title class="view-title">
<label class="title-label">设置</label>
</ion-title>
</ion-toolbar>
</ion-header>
<div class="content">
<ion-list class="content-list">
<ion-item>
<div class="content-list-item-content">
<div class="content-list-item-content-text">账号信息</div>
<div class="content-list-item-content-text">{{srfloginname}}</div>
</div>
</ion-item>
<ion-item>
<div class="content-list-item-content">
<div class="content-list-item-content-text">手机号码</div>
<ion-icon name="chevron-forward-outline"></ion-icon>
</div>
</ion-item>
<ion-item>
<div class="content-list-item-content">
<div class="content-list-item-content-text">主题</div>
<app-mob-select-changeTheme></app-mob-select-changeTheme>
</div>
</ion-item>
<ion-item>
<div class="content-list-item-content">
<div class="content-list-item-content-text">风格</div>
<ion-icon name="chevron-forward-outline"></ion-icon>
</div>
</ion-item>
</ion-list>
<ion-list class="content-list">
<ion-item>
<div class="content-list-item-content">
<div class="content-list-item-content-text">消息通知</div>
<ion-icon name="chevron-forward-outline"></ion-icon>
</div>
</ion-item>
<ion-item>
<div class="content-list-item-content">
<div class="content-list-item-content-text">隐私</div>
<ion-icon name="chevron-forward-outline"></ion-icon>
</div>
</ion-item>
<ion-item>
<div class="content-list-item-content">
<div class="content-list-item-content-text">通用</div>
<ion-icon name="chevron-forward-outline"></ion-icon>
</div>
</ion-item>
<ion-item>
<div class="content-list-item-content">
<div class="content-list-item-content-text">辅助功能</div>
<ion-icon name="chevron-forward-outline"></ion-icon>
</div>
</ion-item>
<ion-item>
<div class="content-list-item-content">
<div class="content-list-item-content-text">关于ibiz</div>
<ion-icon name="chevron-forward-outline"></ion-icon>
</div>
</ion-item>
</ion-list>
<ion-list class="content-list">
<ion-item @click="logout">
<div class="content-list-item-content">
<div class="content-list-item-content-text">退出当前账号</div>
</div>
</ion-item>
<ion-item @click="clear">
<div class="content-list-item-content">
<div class="content-list-item-content-text">清除缓存</div>
</div>
</ion-item>
</ion-list>
</div>
</ion-page>
</template>
<script lang="ts">
import {
Vue,
Component,
Prop,
Provide,
Emit,
Watch,
} from "vue-property-decorator";
@Component({
components: {},
})
export default class AppRoundList extends Vue {
/**
* 传入item
* @type {any}
* @memberof AppRoundList
*/
// @Prop() public item?:any;
public items = [];
public srfloginname = "";
/**
* created
*/
public created() {
let appdata = this.$store.state.appdata;
this.srfloginname = appdata.context.srfloginname;
}
/**
* 退出登录
*
* @memberof
*/
public async logout() {
const title: any = this.$t('app.tabpage.sureclosetip.title');
const contant: any = this.$t('app.tabpage.sureclosetip.content');
const result = await this.$notice.confirm(title, '确认退出当前账号?',this.$store);
if(result){
const get: Promise<any> = this.$http.get('v7/logout');
get.then((response:any) =>{
if (response && response.status === 200) {
// this.$appService.logout();
this.doLogin();
}
}).catch((error: any) =>{
console.error(error);
})
}
}
/**
* 去登录
*
* @param {*} [data]
* @memberof AppServiceBase
*/
public doLogin(data?: any): void {
// 清除user、token
if (localStorage.getItem('user')) {
localStorage.removeItem('user');
}
if (localStorage.getItem('token')) {
localStorage.removeItem('token');
}
this.$router.push({ name: 'login' });
}
/**
* clear
*/
public clear() {
}
}
</script>
<style lang="less">
@import './app-setting.less';
</style>
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册