HealthStudentWeb/src/components/SubmenuList.vue

<!--  -->
<template>
  <div class="submenu-list">
    <div class="header">
      <div class="left">
        <p>{{ title }}</p>
      </div>
      <div class="right"></div>
    </div>
    <div class="main">
      <div class="list">
        <div class="item" v-for="(item, index) in list" :key="index" @click="onItemClick(item)">
          <div class="img-icon-con" :style="{ borderRadius: rounded ? '50%' : '', backgroundColor: '#fff' }">
            <img :src="item.imgPath" alt="" :style="{ borderRadius: rounded ? '50%' : '', backgroundColor: '#fff' }" />
          </div>
          <div class="text">
            <span>{{ item.text }}</span>
          </div>
        </div>
        <slot name="addDevice"></slot>
      </div>
    </div>
    <!-- <div class="footer"></div> -->
    <van-dialog v-model="dialog.show" :title="dialog.title" confirm-button-text="关闭">
      <template #default>
        <div class="dialog">
          <van-cell value="重启" border @click="onClick(3)">
            <!-- 使用 title 插槽来自定义标题 -->
            <!-- <template #right-icon>
              <van-icon name="search" class="search-icon" />
            </template> -->
          </van-cell>
          <van-cell value="关机" border @click="onClick(3)">
            <!-- 使用 title 插槽来自定义标题 -->
            <!-- <template #right-icon>
              <van-icon name="search" class="search-icon" />
            </template> -->
          </van-cell>
        </div>
      </template>
    </van-dialog>
  </div>
</template>

<script>
import { VersionModel, WechatHomeModel } from '@/config/models';
import DialogService from '@/services/dialog-service';
import ToastService from '@/services/toast-service';
import APICommand from '@/api/command';
import APIUser from '@/api/user';
import AppId from '@/config/appId';
export default {
  name: 'SubmenuList',
  props: {
    title: {
      type: String,
      default: ''
    },
    list: {
      type: Array,
      default: '' || []
    },
    rounded: {
      type: Boolean,
      default: null || false
    }
  },
  data() {
    return {
      dialog: {
        title: '',
        show: false
      }
    };
  },
  created() {},
  mounted() {},
  methods: {
    onItemClick(item) {
      console.log('点击的item', item);
      let that = this;
      if (item.showType) {
        if (item.showType === 'newPage') {
          if (item.routerName === 'personInfos') {
            this.$store.commit('personId', item.id);
            this.$router.push({
              name: `${item.routerName}`,
              query: {
                update: true,
                toRouter: 'Myself',
                from: 'Myself'
              }
            });
          } else {
            this.$router.push({
              name: `${item.routerName}`
            });
          }
        } else if (item.showType === 'newDialog') {
          switch (item.routerName) {
            case 'remote':
              this.dialog.show = true;
              this.dialog.title = '远程控制';
              break;
            case 'version':
              this.$dialog.confirm({
                title: '当前版本信息',
                message: `${VersionModel}`,
                showCancelButton: false
              });
              break;
            case 'logout':
              this.$dialog
                .confirm({
                  title: '确定要退出登录?',
                  showCancelButton: true
                })
                .then(() => {
                  that.logout();
                })
                .catch(() => {});
              break;
            default:
              break;
          }
        }
      } /* else {
        this.$dialog.confirm({
          title: '提示',
          message: `功能开发中`,
          showCancelButton: false
        });
      } */
    },
    onClick(model) {
      let val = null;
      let code = '0005'; // 定位0002 || 控制0005
      val = Number(model);
      this.sendCommand(code, JSON.stringify(val));
    },
    sendCommand(cmdCode, cmdValue) {
      ToastService.loading({
        message: '操作中'
      });
      APICommand.sendCommand({
        deviceId: this.$store.getters.deviceId,
        userId: this.$store.getters.userId,
        serialNo: this.$store.getters.serialNo,
        cmdCode,
        cmdValue
      })
        .then(res => {
          let item = res.data;
          if (item.stateCode == 1) {
            ToastService.success({
              message: '操作成功'
            });
          } else if (cmdCode === '0005') {
            DialogService.confirm({ title: '设备离线,操作失败' });
          } else {
            DialogService.confirm({ title: '操作失败', message: '设备不在线' });
          }
        })
        .catch(() => {
          ToastService.clear();
        })
        .finally(() => {
          ToastService.clear();
        });
    },
    // 退出登录
    logout() {
      APIUser.loginOut({
        headers: { AuthKey: 'key1' },
        body: {
          userId: this.$store.getters.userId,
          openId: this.$store.getters.openId || '',
          AppId: AppId
        }
      }).then(res => {
        console.log(res);
        if (res.data.stateCode === 1 || res.data.stateCode === 0) {
          // success
          //清空数据
          this.$own.clearLocalStorage(this.$store);
          this.$store.commit('isRegister', 'true');
          this.$store.commit('isLogin', 'true');
          // this.$router.push({ name: "login" }); // 退出路由至登录页面：需要后端将登录接口分开为登录和code消费接口，之后，才可路由回登录页面
          window.location.href = WechatHomeModel[process.env.NODE_ENV];
        } else {
          DialogService.confirm({ title: '服务器繁忙，请稍后操作' });
        }
      });
    }
  }
};
</script>
<style scoped lang="scss">
.submenu-list {
  height: 100%;
  width: 100%;
  position: relative;
  .header {
    position: relative;
    font-weight: bold;
    padding: 10px 20px;
    @include flexbox(flex-start, center, row, wrap);
    .left {
      p {
        font-size: 36px;
        font-weight: bold;
      }
    }
  }
  .main {
    position: relative;
    @include flexbox(flex-start, center, row, wrap);
    width: 100%;
    .list {
      position: relative;
      padding-left: 20px;
      display: grid;
      grid-template-columns: repeat(4, auto);
      grid-gap: 50px;
      .item {
        position: relative;
        /* height: 140px; */
        /* max-width: 180px; */
        /* padding: 0 20px; */
        @include flexbox(center, center, column, nowrap);
        .img-icon-con {
          height: 110px;
          width: 110px;
          @include flexbox(space-around, center, column, wrap);
          background-color: #fff;
          img {
            height: 110px;
            widows: 110px;
            /* border-radius: 50%; */
            object-fit: cover;
          }
        }
        .text {
          @include flexbox(space-around, center, column, nowrap);
          padding: 5px 0;
          font-size: 24px;
          font-weight: 400;
        }
      }
    }
  }
  .dialog {
    height: 300px;
    padding: 0 80px;
    @include flexbox(center, center, column, wrap);
    .van-cell {
      border-bottom: 1px solid $border_color;
    }
  }
}
/* @import url(); 引入css类 */
</style>