Skip to content

iBiz-Vue-Mob-R7-Res
iBiz-Vue-Mob-R7-Res
提交 7aed245c 编写于 作者: KK's avatar KK
浏览文件
操作

setting组件调整

上级 81453e04
隐藏空白字符变更
内嵌 并排
正在显示 包含 327 行增加 和 214 行删除
src/components/app-setting/app-setting.ts
浏览文件 @ 7aed245c
export const settingConfig = { export const settingConfig = {
// 账号信息 default: [
accountInformation:true, {
// 用户实体参数名称 name: "accountInformation",
userEntityName:"user", isEnable: true,
// 个人中心视图（需用户手动配置） text: "账号信息",
userCenterViewName:"", position: "top",
// 手机号码 sort: "100",
mobilePhoneNumber:true, },
// 主题 {
theme:true, name: "mobilePhoneNumber",
// 风格 isEnable: true,
layoutStyle:true, text: "手机号码",
// 消息通知 position: "top",
notification:true, sort: "200",
// 隐私 },
privacy:true, {
// 通用 name: "theme",
Universal:true, isEnable: true,
// 辅助功能 text: "主题",
accessibility:true, position: "top",
// 关于 sort: "300",
about:true, },
// 退出登录 {
logout:true, name: "layoutStyle",
// 清除缓存 isEnable: true,
clear:true text: "风格",
}; position: "top",
\ No newline at end of file sort: "400",
viewName: "app-mob-select-changeStyle",
},
{
name: "notification",
isEnable: true,
text: "消息通知",
position: "center",
sort: "100",
},
{
name: "privacy",
isEnable: true,
text: "隐私",
position: "center",
sort: "200",
},
{
name: "universal",
isEnable: true,
text: "通用",
position: "center",
sort: "300",
},
{
name: "accessibility",
isEnable: true,
text: "辅助功能",
position: "center",
sort: "400",
},
{
name: "about",
isEnable: true,
text: "关于",
position: "center",
sort: "500",
},
{
name: "logout",
isEnable: true,
text: "退出登录",
position: "bottom",
sort: "100",
},
{
name: "clear",
isEnable: true,
text: "清除缓存",
position: "bottom",
sort: "200",
},
],
// 个人中心视图（需用户手动配置）
userCenterViewName: "",
// 用户实体参数名称
userEntityName: "user",
// 自定义功能
userCustomize: [
// {
// 名称（不可重复）
// name: "test",
// 是否启用
// isEnable: true,
// 显示文本
// text: "test",
// // 板块位置（内置为三个板块，分别为 top、center、bottom）
// position: "center",
// // 板块排序（与其他item的排序位置）
// sort: "201",
// 打开视图名称
// viewName: "",
// },
],
};
src/components/app-setting/app-setting.vue
浏览文件 @ 7aed245c
...@@ -8,76 +8,59 @@ ...@@ -8,76 +8,59 @@
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<div class="content"> <div class="content">
<ion-list class="content-list"> <ion-list class="content-list content-list-top">
<ion-item v-if="settingConfig.accountInformation" @click="userCenter"> <template v-for="item in data.top">
<div class="content-list-item-content"> <ion-item :key="item.name" v-if="item.isEnable" @click="onItemClick(item)">
<div class="content-list-item-content-text">账号信息</div> <div class="content-list-item-content">
<div class="content-list-item-content-text">{{srfloginname}}</div> <div class="content-list-item-content-text">{{item.text}}</div>
</div> <ion-icon
</ion-item> v-if="item.name !== 'theme' && item.name !== 'accountInformation'"
<ion-item v-if="settingConfig.mobilePhoneNumber"> name="chevron-forward-outline"
<div class="content-list-item-content"> ></ion-icon>
<div class="content-list-item-content-text">手机号码</div> <app-mob-select-changeTheme v-if="item.name == 'theme'" ref="changeTheme"></app-mob-select-changeTheme>
<ion-icon name="chevron-forward-outline"></ion-icon> <div
</div> v-if="item.name == 'accountInformation'"
</ion-item> class="content-list-item-content-text"
<ion-item @click="changeTheme" v-if="settingConfig.theme"> >{{srfloginname}}</div>
<div class="content-list-item-content"> </div>
<ion-label class="content-list-item-content-text">主题</ion-label> </ion-item>
<app-mob-select-changeTheme ref="changeTheme"></app-mob-select-changeTheme> </template>
</div>
</ion-item>
<ion-item v-if="settingConfig.layoutStyle" @click="openModal">
<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>
<ion-list class="content-list"> <ion-list class="content-list content-list-center">
<ion-item v-if="settingConfig.notification"> <template v-for="item in data.center">
<div class="content-list-item-content"> <ion-item :key="item.name" v-if="item.isEnable" @click="onItemClick(item)">
<div class="content-list-item-content-text">消息通知</div> <div class="content-list-item-content">
<ion-icon name="chevron-forward-outline"></ion-icon> <div class="content-list-item-content-text">{{item.text}}</div>
</div> <ion-icon
</ion-item> v-if="item.name !== 'theme' && item.name !== 'accountInformation'"
<ion-item v-if="settingConfig.privacy"> name="chevron-forward-outline"
<div class="content-list-item-content"> ></ion-icon>
<div class="content-list-item-content-text">隐私</div> <app-mob-select-changeTheme v-if="item.name == 'theme'" ref="changeTheme"></app-mob-select-changeTheme>
<ion-icon name="chevron-forward-outline"></ion-icon> <div
</div> v-if="item.name == 'accountInformation'"
</ion-item> class="content-list-item-content-text"
<ion-item v-if="settingConfig.Universal"> >{{srfloginname}}</div>
<div class="content-list-item-content"> </div>
<div class="content-list-item-content-text">通用</div> </ion-item>
<ion-icon name="chevron-forward-outline"></ion-icon> </template>
</div>
</ion-item>
<ion-item v-if="settingConfig.accessibility">
<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 v-if="settingConfig.about">
<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>
<ion-list class="content-list" > <ion-list class="content-list content-list-bottom">
<ion-item @click="logout" v-if="settingConfig.logout"> <template v-for="item in data.bottom">
<div class="content-list-item-content"> <ion-item :key="item.name" v-if="item.isEnable" @click="onItemClick(item)">
<div v-if="!thirdPartyName" class="content-list-item-content-text">退出当前账号</div> <div class="content-list-item-content">
<div v-if="thirdPartyName" class="content-list-item-content-text">退出应用</div> <div class="content-list-item-content-text">{{item.text}}</div>
</div> <ion-icon
</ion-item> v-if="item.name !== 'theme' && item.name !== 'accountInformation'"
<ion-item @click="clear" v-if="settingConfig.clear"> name="chevron-forward-outline"
<div class="content-list-item-content"> ></ion-icon>
<div class="content-list-item-content-text">清除缓存</div> <app-mob-select-changeTheme v-if="item.name == 'theme'" ref="changeTheme"></app-mob-select-changeTheme>
</div> <div
</ion-item> v-if="item.name == 'accountInformation'"
class="content-list-item-content-text"
>{{srfloginname}}</div>
</div>
</ion-item>
</template>
</ion-list> </ion-list>
</div> </div>
</ion-page> </ion-page>
...@@ -91,150 +74,205 @@ import { ...@@ -91,150 +74,205 @@ import {
Emit, Emit,
Watch, Watch,
} from "vue-property-decorator"; } from "vue-property-decorator";
import { settingConfig } from './app-setting' import { settingConfig } from "./app-setting";
@Component({ @Component({
components: {}, components: {},
}) })
export default class AppSetting extends Vue { export default class AppSetting extends Vue {
public settingConfig = settingConfig; /**
* 用户名称
*/
public srfloginname = "";
public srfloginname = ""; /**
* 第三方服务
*/
public thirdPartyName = this.$viewTool.getThirdPartyName();
public thirdPartyName = this.$viewTool.getThirdPartyName(); /**
* 生命周期
*/
public created() {
let appdata = this.$store.state.appdata;
this.srfloginname = appdata.context.srfloginname;
this.$viewTool.setViewTitleOfThirdParty("设置");
this.setViewTitleStatus();
this.initializeData();
}
/** /**
* 生命周期 * 视图数据
*/ */
public created() { public data: any = {
let appdata = this.$store.state.appdata; top: [],
this.srfloginname = appdata.context.srfloginname; center: [],
this.$viewTool.setViewTitleOfThirdParty("设置"); bottom: [],
this.setViewTitleStatus(); };
}
/** /**
* 标题状态 * 初始化数据
* */
* @memberof ProductCloseMobEditViewBase public initializeData() {
*/ // console.log(settingConfig);
public titleStatus :boolean = true; let data = [];
data.push(...settingConfig.default, ...settingConfig.userCustomize);
// 分类合并
data.forEach((item: any) => {
if (item.position == "top") {
this.data.top.push(item);
}
if (item.position == "center") {
this.data.center.push(item);
}
if (item.position == "bottom") {
this.data.bottom.push(item);
}
});
// 排序规则
let compare = (property: any) => {
return (a: any, b: any) => {
var value1 = a[property];
var value2 = b[property];
return value1 - value2;
};
};
// 排序
Object.keys(this.data).forEach((item: any) => {
this.data[item].sort(compare("sort"));
});
}
/** /**
* 设置标题状态 * 标题状态
* *
* @memberof ProductCloseMobEditViewBase */
*/ public titleStatus: boolean = true;
public setViewTitleStatus(){
const thirdPartyName = this.$store.getters.getThirdPartyName();
if(thirdPartyName){
this.titleStatus = false;
}
}
/** /**
* 退出登录 * 设置标题状态
* *
* @memberof */
*/ public setViewTitleStatus() {
public async logout() { const thirdPartyName = this.$store.getters.getThirdPartyName();
const title: any = this.$t('app.tabpage.sureclosetip.title'); if (thirdPartyName) {
const contant: any = this.$t('app.tabpage.sureclosetip.content'); this.titleStatus = false;
const result = await this.$notice.confirm(title, '确认退出当前账号？',this.$store);
if(result){
if(this.thirdPartyName){
this.$viewTool.ThirdPartyClose();
return
}
const get: Promise<any> = this.$http.get('v7/logout');
get.then((response:any) =>{
if (response && response.status === 200) {
this.doLogin();
}
}).catch((error: any) =>{
console.error(error);
})
}
} }
}
/** /**
* 去登录 * 退出登录
* */
* @param {*} [data] public async logout() {
* @memberof AppServiceBase const title: any = this.$t("app.tabpage.sureclosetip.title");
*/ const contant: any = this.$t("app.tabpage.sureclosetip.content");
public doLogin(data?: any): void { const result = await this.$notice.confirm(title, "确认退出当前账号？", this.$store);
// 清除user、token if (result) {
if (localStorage.getItem('user')) { if (this.thirdPartyName) {
localStorage.removeItem('user'); this.$viewTool.ThirdPartyClose();
} return;
if (localStorage.getItem('token')) { }
localStorage.removeItem('token'); const get: Promise<any> = this.$http.get("v7/logout");
} get.then((response: any) => {
this.$router.push({ name: 'login' }); if (response && response.status === 200) {
this.doLogin();
}
})
.catch((error: any) => {
console.error(error);
});
} }
}
/** /**
* 清除缓存 * 去登录
*/ *
public async clear() { */
const result = await this.$notice.confirm("清除缓存", '清除缓存可能会导致当前登录信息失效！！！',this.$store); public doLogin(data?: any): void {
if(result){ // 清除user、token
localStorage.clear(); if (localStorage.getItem("user")) {
} localStorage.removeItem("user");
} }
if (localStorage.getItem("token")) {
/** localStorage.removeItem("token");
* 主题切换
*/
public changeTheme() {
let changeTheme:any = this.$refs.changeTheme;
if(changeTheme){
changeTheme.open();
}
} }
this.$router.push({ name: "login" });
}
/** /**
* 个人中心 * 清除缓存
*/ */
public userCenter(){ public async clear() {
const { context, param } = this.$store.getters.getAppData(); const result = await this.$notice.confirm("清除缓存", "清除缓存可能会导致当前登录信息失效！！！", this.$store);
let user :any = {} if (result) {
if(context && context.srfuserid){ localStorage.clear();
user[this.settingConfig.userEntityName] = context.srfuserid;
}
if(this.settingConfig.userCenterViewName){
this.$appmodal.openModal({viewname:this.settingConfig.userCenterViewName,title:""},user);
}else{
this.$notice.warning("用户自定义视图未配置")
}
} }
}
/** /**
* 打开模态框 * 主题切换
* */
* @type {string} public changeTheme() {
* @memberof AppRichTextEditor let changeTheme: any = this.$refs.changeTheme;
*/ if (changeTheme && changeTheme[0]) {
public openModal(){ changeTheme[0].open();
this.openPopupModal({ viewname: 'app-mob-select-changeStyle', title: 'app-mob-select-changeStyle'},{},{});
} }
}
/** /**
* 模态打开 * 个人中心
* */
* @type {string} public userCenter() {
* @memberof AppRichTextEditor const { context, param } = this.$store.getters.getAppData();
*/ let user: any = {};
private async openPopupModal(view: any, context: any, param: any): Promise<any> { if (context && context.srfuserid) {
const result: any = await this.$appmodal.openModal(view, context, param); user[settingConfig.userEntityName] = context.srfuserid;
if (result || Object.is(result.ret, 'OK')) {
this.$emit("change", result.datas[0].backEnd);
}
} }
if (settingConfig.userCenterViewName) {
this.$appmodal.openModal(
{ viewname: settingConfig.userCenterViewName, title: "" },
user
);
} else {
this.$notice.warning("用户自定义视图未配置");
}
}
/**
* 模态打开
*
*/
private async openPopupModal(view: any, context: any, param: any): Promise<any> {
const result: any = await this.$appmodal.openModal(view, context, param);
if (result || Object.is(result.ret, "OK")) {
this.$emit("change", result.datas[0].backEnd);
}
}
/**
* item点击事件
*/
public onItemClick(item: any) {
// 内置功能
if (item.name == "accountInformation") {
this.userCenter();
} else if (item.name == "theme") {
this.changeTheme();
} else if (item.name == "layoutStyle") {
this.openPopupModal({ viewname: item.viewName }, {}, {});
} else if (item.name == "logout") {
this.logout();
} else if (item.name == "clear") {
this.clear();
} else {
// 自定义功能
if (item.viewName) {
this.openPopupModal({ viewname: item.viewName }, {}, {});
}
}
}
} }
</script> </script>
<style lang="less"> <style lang="less">
@import './app-setting.less'; @import "./app-setting.less";
</style> </style>
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或