jonhon-mes-PDA/pages/index/ifrm.vue

<template>
  <view class="container">
    <uni-drawer ref="memuTool">
      <scroll-view
        scroll-y="true"
        style="height: 100vh"
        scroll-with-animation="true"
      >
        <view style="padding: 30rpx">
          <!-- <u-sticky offset-top="0"> -->
            <view
              class="uni-flex uni-row"
              style="padding: 20rpx 0; background-color: #fff;color:#000"
            >
              <view class="flex-item">
                <div class="icon-bg"><span class="iconfont icon-user" /></div>
              </view>
              <view class="flex-item title"
                >{{ curUser.real_name }}，你好！</view
              >
            </view>
          <!-- </u-sticky> -->
          <view class="line" />
          <!-- <uni-list v-for="item in plan" :key="item.key">
            <text class="uni-list-item__content-title" @click="choose(item)">{{
              item.title
            }}</text>
          </uni-list> -->
          <uni-list v-for="item in production" :key="item.key">
            <text class="uni-list-item__content-title">{{ item.title }}</text>
            <text
              v-for="(items, index) in item.children"
              :key="index"
              class="uni-list-item__content-title-sub"
              @click="choose(items)"
              >{{ items.title }}</text
            >
          </uni-list>
        </view>
      </scroll-view>
    </uni-drawer>
    <slot></slot>
  </view>
</template>

<script>
import uniPopupDialog from "@/components/uni-popup/uni-popup-dialog.vue";
import menu from "./menu.js";
export default {
  components: {
    uniPopupDialog,
  },
  data() {
    return {
      curUser: uni.getStorageSync("userInfo"),
      rule: menu.menus.rule,
      plan: menu.menus.plan,
      production: menu.menus.menuList,
      // quality: menu.menus.quality,
      // pubMenus: menu.menus.pubMenus,
      limits: uni.getStorageSync("limits"),
    };
  },
  onLoad() {
    console.log(222, uni.getStorageSync("userInfo"));
  },
  onShow() {},
  methods: {
    choose(menu) {
      const T = this;
      uni.navigateTo({
        url: menu.url,
        complete() {
          T.$refs.memuTool.close();
        },
      });
    },
    topMenuClick(btn) {
      if (btn.index === 0) {
        this.$refs.memuTool.open();
      } else if (btn.index === 1) {
        uni.showModal({
          title: "提示",
          content: "确定退出吗？",
          success: (res) => {
            if (res.confirm) {
              this.$u.api
                .logout()
                .then((data) => {
                  uni.redirectTo({
                    url: "../login/login-account",
                  });
                })
                .catch((err) => {});
              // this.$sysmgrAjax.request({
              //     method: 'POST',
              //     url: '/loginOut',
              //     success: data => {
              //         if (data == null) {
              //   uni.redirectTo({
              //       url: '../login/login'
              //   });
              //         } else {
              //             uni.showToast({
              //                 title: '退出失败，请重试。',
              //                 icon: "none"
              //             })
              //         }
              //     },
              // });
            } else if (res.cancel) {
              //console.log('用户点击取消');
            }
          },
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  padding: 20rpx;
  font-size: 32px;
  line-height: 24rpx;
  display: flex;
  flex-direction: column;

  .scrollBox {
  }
}

.line {
  line-height: 0rpx;
  height: 1rpx;
  border: 0px;
  margin-top: 10rpx;
  background-color: #d9d9d9;
}

.icon-bg {
  width: 70rpx;
  height: 70rpx;
  background-color: #434343;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-bg span {
  color: #ffffff;
  font-size: 18rpx;
}

.title {
  color: #13b5b1;
  margin-left: 10rpx;
  display: flex;
  align-items: center;
}

.uni-list-item--hover {
  background-color: #f0f0f0;
}

.uni-list-item__content-title {
  font-size: 32rpx !important;
  color: #000;
  padding: 12rpx 20rpx 0rpx;
  font-weight: 600;
  width:100%;
}
.uni-list-item__content-title-sub {
  font-size: 32rpx !important;
  color: #13b5b1;
  padding: 6rpx 20rpx 6px 60rpx;
  width:100%;
}
</style>