setting组件调整

src/components/app-setting/app-setting.ts

 export const settingConfig = {
-    // 账号信息
-    accountInformation:true,
-    // 用户实体参数名称
-    userEntityName:"user",
-    // 个人中心视图（需用户手动配置）
-    userCenterViewName:"",
-    // 手机号码
-    mobilePhoneNumber:true,
-    // 主题
-    theme:true,
-    // 风格
-    layoutStyle:true,
-    // 消息通知
-    notification:true,
-    // 隐私
-    privacy:true,
-    // 通用
-    Universal:true,
-    // 辅助功能
-    accessibility:true,
-    // 关于
-    about:true,
-    // 退出登录
-    logout:true,
-    // 清除缓存
-    clear:true
-};
\ No newline at end of file
+  default: [
+    {
+      name: "accountInformation",
+      isEnable: true,
+      text: "账号信息",
+      position: "top",
+      sort: "100",
+    },
+    {
+      name: "mobilePhoneNumber",
+      isEnable: true,
+      text: "手机号码",
+      position: "top",
+      sort: "200",
+    },
+    {
+      name: "theme",
+      isEnable: true,
+      text: "主题",
+      position: "top",
+      sort: "300",
+    },
+    {
+      name: "layoutStyle",
+      isEnable: true,
+      text: "风格",
+      position: "top",
+      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

@@ -8,76 +8,59 @@
       </ion-toolbar>
     </ion-header>
     <div class="content">
-      <ion-list class="content-list">
-        <ion-item v-if="settingConfig.accountInformation" @click="userCenter">
-          <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 v-if="settingConfig.mobilePhoneNumber">
-          <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 @click="changeTheme" v-if="settingConfig.theme">
-          <div class="content-list-item-content">
-            <ion-label class="content-list-item-content-text">主题</ion-label>
-            <app-mob-select-changeTheme ref="changeTheme"></app-mob-select-changeTheme>
-          </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 class="content-list content-list-top">
+        <template v-for="item in data.top">
+          <ion-item :key="item.name" v-if="item.isEnable" @click="onItemClick(item)">
+            <div class="content-list-item-content">
+              <div class="content-list-item-content-text">{{item.text}}</div>
+              <ion-icon
+                v-if="item.name !== 'theme' &&  item.name !== 'accountInformation'"
+                name="chevron-forward-outline"
+              ></ion-icon>
+              <app-mob-select-changeTheme v-if="item.name == 'theme'" ref="changeTheme"></app-mob-select-changeTheme>
+              <div
+                v-if="item.name == 'accountInformation'"
+                class="content-list-item-content-text"
+              >{{srfloginname}}</div>
+            </div>
+          </ion-item>
+        </template>
       </ion-list>
-      <ion-list class="content-list">
-        <ion-item v-if="settingConfig.notification">
-          <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.privacy">
-          <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.Universal">
-          <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.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 class="content-list content-list-center">
+        <template v-for="item in data.center">
+          <ion-item :key="item.name" v-if="item.isEnable" @click="onItemClick(item)">
+            <div class="content-list-item-content">
+              <div class="content-list-item-content-text">{{item.text}}</div>
+              <ion-icon
+                v-if="item.name !== 'theme' &&  item.name !== 'accountInformation'"
+                name="chevron-forward-outline"
+              ></ion-icon>
+              <app-mob-select-changeTheme v-if="item.name == 'theme'" ref="changeTheme"></app-mob-select-changeTheme>
+              <div
+                v-if="item.name == 'accountInformation'"
+                class="content-list-item-content-text"
+              >{{srfloginname}}</div>
+            </div>
+          </ion-item>
+        </template>
       </ion-list>
-      <ion-list class="content-list" >
-        <ion-item @click="logout" v-if="settingConfig.logout">
-          <div class="content-list-item-content">
-            <div v-if="!thirdPartyName" class="content-list-item-content-text">退出当前账号</div>
-            <div v-if="thirdPartyName" class="content-list-item-content-text">退出应用</div>
-          </div>
-        </ion-item>
-        <ion-item @click="clear" v-if="settingConfig.clear">
-          <div class="content-list-item-content">
-            <div class="content-list-item-content-text">清除缓存</div>
-          </div>
-        </ion-item>
+      <ion-list class="content-list content-list-bottom">
+        <template v-for="item in data.bottom">
+          <ion-item :key="item.name" v-if="item.isEnable" @click="onItemClick(item)">
+            <div class="content-list-item-content">
+              <div class="content-list-item-content-text">{{item.text}}</div>
+              <ion-icon
+                v-if="item.name !== 'theme' &&  item.name !== 'accountInformation'"
+                name="chevron-forward-outline"
+              ></ion-icon>
+              <app-mob-select-changeTheme v-if="item.name == 'theme'" ref="changeTheme"></app-mob-select-changeTheme>
+              <div
+                v-if="item.name == 'accountInformation'"
+                class="content-list-item-content-text"
+              >{{srfloginname}}</div>
+            </div>
+          </ion-item>
+        </template>
       </ion-list>
     </div>
   </ion-page>
@@ -91,150 +74,205 @@ import {
   Emit,
   Watch,
 } from "vue-property-decorator";
-import { settingConfig } from './app-setting'
+import { settingConfig } from "./app-setting";
 @Component({
   components: {},
 })
 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() {
-      let appdata =  this.$store.state.appdata;
-      this.srfloginname = appdata.context.srfloginname;
-      this.$viewTool.setViewTitleOfThirdParty("设置");
-      this.setViewTitleStatus();
-    }
+  /**
+   * 视图数据
+   */
+  public data: any = {
+    top: [],
+    center: [],
+    bottom: [],
+  };
 
-    /**
-     * 标题状态
-     *
-     * @memberof ProductCloseMobEditViewBase
-     */
-    public titleStatus :boolean = true;
+  /**
+   * 初始化数据
+   */
+  public initializeData() {
+    // console.log(settingConfig);
+    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 setViewTitleStatus(){
-        const thirdPartyName = this.$store.getters.getThirdPartyName();
-        if(thirdPartyName){
-            this.titleStatus = false;
-        }
-    }
+  /**
+   * 标题状态
+   *
+   */
+  public titleStatus: boolean = true;
 
-    /**
-     * 退出登录
-     *
-     * @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){
-            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);
-            })
-        }
+  /**
+   * 设置标题状态
+   *
+   */
+  public setViewTitleStatus() {
+    const thirdPartyName = this.$store.getters.getThirdPartyName();
+    if (thirdPartyName) {
+      this.titleStatus = false;
     }
+  }
 
-    /**
-     * 去登录
-     *
-     * @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' });
+  /**
+   * 退出登录
+   */
+  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) {
+      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);
+        });
     }
+  }
 
-    /**
-     * 清除缓存
-     */
-    public async clear() {
-        const result = await this.$notice.confirm("清除缓存", '清除缓存可能会导致当前登录信息失效！！！',this.$store);
-        if(result){
-            localStorage.clear();
-        }
+  /**
+   * 去登录
+   *
+   */
+  public doLogin(data?: any): void {
+    // 清除user、token
+    if (localStorage.getItem("user")) {
+      localStorage.removeItem("user");
     }
-    
-    /**
-     * 主题切换
-     */
-    public changeTheme() {
-      let changeTheme:any = this.$refs.changeTheme;
-      if(changeTheme){
-        changeTheme.open();
-      }
+    if (localStorage.getItem("token")) {
+      localStorage.removeItem("token");
     }
+    this.$router.push({ name: "login" });
+  }
 
-    /**
-     * 个人中心
-     */
-    public userCenter(){
-      const { context, param } = this.$store.getters.getAppData();
-      let user :any = {}
-      if(context && context.srfuserid){
-        user[this.settingConfig.userEntityName] = context.srfuserid;
-      }
-      if(this.settingConfig.userCenterViewName){
-        this.$appmodal.openModal({viewname:this.settingConfig.userCenterViewName,title:""},user);
-      }else{
-        this.$notice.warning("用户自定义视图未配置")
-      }
+  /**
+   * 清除缓存
+   */
+  public async clear() {
+    const result = await this.$notice.confirm("清除缓存", "清除缓存可能会导致当前登录信息失效！！！", this.$store);
+    if (result) {
+      localStorage.clear();
     }
+  }
 
-    /**
-     * 打开模态框
-     *
-     * @type {string}
-     * @memberof AppRichTextEditor
-     */
-    public openModal(){
-      this.openPopupModal({ viewname: 'app-mob-select-changeStyle', title: 'app-mob-select-changeStyle'},{},{});
+  /**
+   * 主题切换
+   */
+  public changeTheme() {
+    let changeTheme: any = this.$refs.changeTheme;
+    if (changeTheme && changeTheme[0]) {
+      changeTheme[0].open();
     }
+  }
 
-    /**
-     * 模态打开
-     *
-     * @type {string}
-     * @memberof AppRichTextEditor
-     */
-    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);
-        }
+  /**
+   * 个人中心
+   */
+  public userCenter() {
+    const { context, param } = this.$store.getters.getAppData();
+    let user: any = {};
+    if (context && context.srfuserid) {
+      user[settingConfig.userEntityName] = context.srfuserid;
     }
+    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>
 <style lang="less">
-@import './app-setting.less';
+@import "./app-setting.less";
 </style>
\ No newline at end of file