dzhh-frontend/.svn/pristine/4f/4f413b1d1708f77fae80d9032d9abb17011d03a9.svn-base

<template>
  <div class="page-header-index-wide">
    <a-card :bordered="false" :bodyStyle="{ padding: '16px 0', height: '100%' }" :style="{ height: '100%' }">
      <div class="account-settings-info-main" :class="device" :style=" 'min-height:'+ mainInfoHeight ">
        <div class="account-settings-info-left">
          <a-menu
            :mode="device == 'mobile' ? 'horizontal' : 'inline'"
            :default-selected-keys="['settings']"
            :style="{ border: '0', width: device == 'mobile' ? '560px' : 'auto'}"
            type="inner"
            @openChange="onOpenChange"
          >
            <a-menu-item key="settings">
              <a  @click="settingsClick()">
                基本设置
              </a>
            </a-menu-item>
            <a-menu-item key="security">
              <a @click="securityClick()">安全设置</a>
            </a-menu-item>
            <a-menu-item key="custom">
              <a @click="customClick()"> 个性化</a>
            </a-menu-item>
            <a-menu-item key="binding">
              <a @click="bindingClick()">账户绑定</a>
            </a-menu-item>
            <a-menu-item key="notification">
              <a @click="notificationClick()">新消息通知</a>
            </a-menu-item>
          </a-menu>
        </div>
        <div class="account-settings-info-right">
          <div class="account-settings-info-title">
            <span>{{ title }}</span>
          </div>
          <security ref="security" v-if="security"></security>
          <base-setting ref="baseSetting" v-if="baseSetting"></base-setting>
          <custom ref="custom" v-if="custom"></custom>
          <notification ref="notification" v-if="notification"></notification>
          <binding ref="binding" v-if="binding"></binding>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script>
  import PageLayout from '@/components/page/PageLayout'
  import RouteView from "@/components/layouts/RouteView"
  import { mixinDevice } from '@/utils/mixin.js'
  import security from './Security'
  import baseSetting from './BaseSetting'
  import  custom from  './Custom'
  import notification from './Notification'
  import binding from './Binding'
  export default {
    components: {
      RouteView,
      PageLayout,
      security,
      baseSetting,
      custom,
      notification,
      binding
    },
    mixins: [mixinDevice],
    data () {
      return {
        // horizontal  inline
        mode: 'inline',
        mainInfoHeight:"100%",
        openKeys: [],
        defaultSelectedKeys: [],

        // cropper
        preview: {},
        option: {
          img: '/avatar2.jpg',
          info: true,
          size: 1,
          outputType: 'jpeg',
          canScale: false,
          autoCrop: true,
          // 只有自动截图开启 宽度高度才生效
          autoCropWidth: 180,
          autoCropHeight: 180,
          fixedBox: true,
          // 开启宽度和高度比例
          fixed: true,
          fixedNumber: [1, 1]
        },

        pageTitle: '',
        title:"基本设置",
        security:false,
        baseSetting:true,
        custom:false,
        notification:false,
        binding:false
      }
    },
    created () {
      this.updateMenu()
    },
    mounted(){
      this.mainInfoHeight = (window.innerHeight-285)+"px";
    },
    methods: {
      onOpenChange (openKeys) {
        this.openKeys = openKeys
      },
      updateMenu () {
        let routes = this.$route.matched.concat()
        this.defaultSelectedKeys = [ routes.pop().path ]
      },
      //update-begin--Author:wangshuai  Date:20200729 for：聚合路由错误 issues#1441--------------------
      settingsClick(){
        this.security=false
        this.custom=false
        this.notification=false
        this.binding=false
        this.baseSetting=true
        this.title="基本设置"
      },
      securityClick(){
        this.baseSetting=false
        this.custom=false;
        this.notification=false
        this.binding=false
        this.security=true
        this.title="安全设置"
      },
      notificationClick(){
        this.security=false
        this.custom=false
        this.baseSetting=false
        this.binding=false
        this.notification=true
        this.title="新消息通知"
      },
      bindingClick(){
        this.security=false
        this.baseSetting=false
        this.notification=false;
        this.custom=false;
        this.binding=true
        this.title="账号绑定"
      },
      customClick(){
        this.security=false
        this.baseSetting=false
        this.notification=false;
        this.binding=false
        this.custom=true;
        this.title="个性化"
      }
      //update-end--Author:wangshuai  Date:20200729 for：聚合路由错误 issues#1441--------------------
    },
  }
</script>

<style lang="less" scoped>
  .account-settings-info-main {
    width: 100%;
    display: flex;
    height: 100%;
    overflow: auto;

    &.mobile {
      display: block;

      .account-settings-info-left {
        border-right: unset;
        border-bottom: 1px solid #e8e8e8;
        width: 100%;
        height: 50px;
        overflow-x: auto;
        overflow-y: scroll;
      }
      .account-settings-info-right {
        padding: 20px 40px;
      }
    }

    .account-settings-info-left {
      border-right: 1px solid #e8e8e8;
      width: 224px;
    }

    .account-settings-info-right {
      flex: 1 1;
      padding: 8px 40px;

      .account-settings-info-title {
        color: rgba(0,0,0,.85);
        font-size: 20px;
        font-weight: 500;
        line-height: 28px;
        margin-bottom: 12px;
      }
      .account-settings-info-view {
        padding-top: 12px;
      }
    }
  }

</style>