HealthStudentWeb/src/views/myself/index.vue

<!--  -->
<template>
  <div class="myself">
    <!-- <NavBar></NavBar> -->
    <div class="container">
      <div class="banner">
        <div class="top">
          <div class="avatar">
            <img src="../../assets/myself/4_62.png" alt="" />
          </div>
          <div class="nick-name">
            <span>{{ userInfos.username }}</span>
          </div>
        </div>
        <div class="bottom">
          <span>已绑定{{ userInfos.deviceNumber }}台设备</span>
        </div>
      </div>
      <div class="submenu device-manage">
        <SubmenuList :title="device.title" :list="device.list" rounded>
          <template #addDevice>
            <div class="add-device"><span>+</span></div>
          </template>
        </SubmenuList>
      </div>
      <div class="submenu family">
        <SubmenuList :title="family.title" :list="family.list"> </SubmenuList>
      </div>
      <div class="submenu safe-helper">
        <div class="title">
          <p>安全助手</p>
        </div>
        <div class="safe-helper-container">
          <div class="top">
            <p>{{ currentDevice.address }}</p>
            <span>纬度: {{ currentDevice.lat }} 经度: {{ currentDevice.lng }}</span>
          </div>
          <div class="bottom">
            <p @click="goMap">进入地图 <span>></span></p>
          </div>
        </div>
      </div>
      <div class="submenu study-helper">
        <SubmenuList :title="studyHelper.title" :list="studyHelper.list"> </SubmenuList>
      </div>
      <div class="submenu life-helper">
        <SubmenuList :title="lifeHelper.title" :list="lifeHelper.list"> </SubmenuList>
      </div>
      <div class="submenu param-setting">
        <SubmenuList :title="paramSetting.title" :list="paramSetting.list"> </SubmenuList>
      </div>
      <div class="submenu others-setting">
        <SubmenuList :title="othersSetting.title" :list="othersSetting.list"> </SubmenuList>
      </div>
    </div>
  </div>
</template>

<script>
/* import NavBar from '@/components/NavBar.vue'; */
import SubmenuList from '@/components/SubmenuList.vue';
import APIUser from '@/api/user';
import APIDevice from '@/api/device';
import ToastService from '@/services/toast-service';
import { isNotNull } from '@/services/utils-service';
export default {
  components: { /* NavBar,  */ SubmenuList },
  data() {
    return {
      userInfos: {},
      listData: [],
      family: {
        title: '亲情沟通',
        list: [
          {
            imgPath: require('../../assets/myself/4_76.png'),
            text: '亲情号码',
            bgColor: this.$green,
            showType: 'newPage',
            routerName: 'familyNumber'
          },
          {
            imgPath: require('../../assets/myself/4_79.png'),
            text: '留言',
            bgColor: this.$green,
            showType: 'newPage',
            routerName: 'sendMessage'
          },
          {
            imgPath: require('../../assets/myself/4_81.png'),
            text: '通话记录',
            bgColor: this.$green,
            showType: 'newPage',
            routerName: 'callList'
          }
        ]
      },
      device: {
        title: '孩子管理',
        list: [
          { imgPath: require('../../assets/myself/4_62.png'), text: '孩子1', bgColor: 'green' },
          { imgPath: require('../../assets/myself/4_62.png'), text: '孩子2', bgColor: 'green' },
          { imgPath: require('../../assets/myself/4_62.png'), text: '孩子3', bgColor: 'green' }
        ]
      },
      studyHelper: {
        title: '学习助手',
        list: [
          {
            imgPath: require('../../assets/myself/4_88.png'),
            text: '课堂禁用',
            bgColor: this.$green,
            showType: 'newPage',
            routerName: 'prohibit'
          },
          { imgPath: require('../../assets/myself/4_91.png'), text: '课程表', bgColor: 'green' }
        ]
      },
      lifeHelper: {
        title: '生活助手',
        list: [
          {
            imgPath: require('../../assets/myself/4_104.png'),
            text: '闹钟',
            bgColor: this.$green,
            showType: 'newPage',
            routerName: 'clock'
          },
          {
            imgPath: require('../../assets/myself/4_107.png'),
            text: '支付密码修改',
            bgColor: this.$green,
            showType: 'newPage',
            routerName: 'changePayPassword'
          },
          {
            imgPath: require('../../assets/myself/4_109.png'),
            text: '短信代收',
            bgColor: this.$green,
            showType: 'newPage',
            routerName: 'messageList'
          },
          {
            imgPath: require('../../assets/myself/4_96.png'),
            text: '亲友关注',
            bgColor: this.$green,
            showType: 'newPage',
            routerName: 'management'
          }
        ]
      },
      paramSetting: {
        title: '参数设置',
        list: [
          {
            imgPath: require('../../assets/myself/4_98.png'),
            text: '参数设置',
            bgColor: this.$green,
            showType: 'newPage',
            routerName: 'watchSetting'
          },
          {
            imgPath: require('../../assets/myself/4_111.png'),
            text: '远程控制',
            bgColor: this.$green,
            showType: 'newDialog',
            routerName: 'remote'
          },
          {
            imgPath: require('../../assets/myself/4_101.png'),
            text: '休眠设置',
            bgColor: this.$green,
            showType: 'newPage',
            routerName: 'sleep'
          }
        ]
      },
      othersSetting: {
        title: '其他设置',
        list: [
          {
            imgPath: require('../../assets/myself/4_42.png'),
            text: '账户安全',
            bgColor: this.$green,
            showType: '',
            routerName: ''
          },
          {
            imgPath: require('../../assets/myself/4_45.png'),
            text: '常见问题',
            bgColor: this.$green,
            showType: 'newPage',
            routerName: 'help'
          },
          {
            imgPath: require('../../assets/myself/4_47.png'),
            text: '版本信息',
            bgColor: this.$green,
            showType: 'newDialog',
            routerName: 'version'
          },
          { imgPath: require('../../assets/myself/4_53.png'), text: '关于我们', bgColor: 'green' },
          {
            imgPath: require('../../assets/myself/4_72.png'),
            text: '退出登录',
            bgColor: 'green',
            showType: 'newDialog',
            routerName: 'logout'
          }
        ]
      },

      userImg: require('../../assets/myself/4_62.png'), //用户头像
      currentDevice: {
        address: '',
        lat: '',
        lng: ''
      }
    };
  },
  created() {},
  mounted() {
    this.getUserInfos();
    this.getDeviceList();
  },
  methods: {
    getUserInfos() {
      APIUser.getUserInfos({
        userId: this.$store.getters.userId
      })
        .then(res => {
          console.log('res', res);
          if (res.data.stateCode === 1) {
            if (res.data) {
              this.userInfos = { ...res.data };
            }
          }
        })
        .catch(err => {
          console.log(err);
        })
        .finally(() => {
          ToastService.clear();
        });
    },
    getDeviceList() {
      ToastService.loading({ message: '正在加载', forbidClick: false });
      /* let that = this; */
      APIDevice.deviceList({
        userId: this.$store.getters.userId,
        mapType: 'gaode',
        timeOffset: -new Date().getTimezoneOffset() / 60
      })
        .then(res => {
          let item = res.data;
          this.longName = item.longName;
          /* this.device.list =
            item.devicesList == null
              ? []
              : item.devicesList.map(device => {
                  return {
                    imgPath: device.imagePath,
                    text: device.nickName ? device.nickName : device.serialNo.slice(-3),
                    bgColor: 'green'
                  };
                }); */

          if (isNotNull(item.devicesList)) {
            this.currentDevice = { ...item.devicesList[0] };
            this.$store.commit('roleUser', item.devicesList[0].roleUser);
            this.$store.commit('deviceType', item.devicesList[0].deviceType);
            this.$store.commit('deviceId', item.devicesList[0].deviceId);
            this.$store.commit('serialNo', item.devicesList[0].serialNo);
            /* item.devicesList.forEach(val => {
              if (val.deviceId == that.$store.getters.deviceId) {
                this.$store.commit('roleUser', val.roleUser);
                this.$store.commit('deviceType', val.deviceType);
              }
            }); */
          } else {
            this.$store.commit('deviceId', '');
            this.$store.commit('serialNo', '');
          }
        })
        .catch(err => {
          console.log(err);
        })
        .finally(() => {
          ToastService.clear();
        });
    },
    goMap() {
      this.$router.push({
        name: 'location'
      });
    }
  }
};
</script>
<style scoped lang="scss">
@import './index.scss'; /* @import url(); 引入css类 */
</style>