wxapp_shuibei/components/sideBar/index.vue

<template>
  <view class="sidebar-wrap">
    <up-popup
      mode="left"
      :show="show"
      :safeAreaInsetTop="false"
      :safeAreaInsetBottom="false"
      @close="close"
      @open="open"
      zIndex="99999"
      :customStyle="{ backgroundColor: '#fafafa' }"
    >
      <view class="list-wrap">
        <up-list height="100%">
          <up-list-item
            height="50"
            v-for="(item, index) in indexList"
            :key="index"
          >
            <view :class="['navigator-box', item.open ? 'open' : '']">
              <!-- 跳转链接行 -->
              <navigator
                v-if="item.type === 'navigator'"
                :render-link="false"
                class="navigator-link"
                hover-class="none"
                :url="item.url"
              >
                <view class="title">
                  <uni-icons
                    customPrefix="iconfont"
                    :class="[item.icon, 'item-icon']"
                    size="20"
                    color="#f8c007"
                  ></uni-icons>
                  <text class="item-text">{{ item.name }}</text>
                </view>
                <view v-if="item.type === 'collapse'" class="arrow-icon">
                  <uni-icons type="down" size="20"></uni-icons>
                </view>
              </navigator>

              <!-- 折叠行 -->
              <view
                v-else
                class="navigator-link collapse-row"
                @click="handleCollapse(item)"
              >
                <view class="title">
                  <uni-icons
                    customPrefix="iconfont"
                    :class="[item.icon, 'item-icon']"
                    size="20"
                    color="#f8c007"
                  ></uni-icons>
                  <text class="item-text">{{ item.name }}</text>
                </view>
                <view v-if="item.type === 'collapse'" class="arrow-icon">
                  <uni-icons type="down" size="20"></uni-icons>
                </view>
              </view>

              <!-- 折叠内容 -->
              <view class="collapse-content" v-if="item.type === 'collapse'">
                <navigator
                  v-for="subItem in item.child"
                  :render-link="false"
                  class="navigator-link sub-link"
                  hover-class="none"
                  :url="subItem.url"
                  :key="subItem.url"
                >
                  <view class="title">
                    <text class="item-text subItem-text">{{
                      subItem.name
                    }}</text>
                  </view>
                </navigator>
              </view>
            </view>
          </up-list-item>
          <view class="white-box"></view>
        </up-list>
      </view>
      <view class="footer-box">
        <navigator
          :url="item.url"
          class="item-box"
          v-for="item in footerList"
          :key="item.url"
        >
          <view class="icon-box">
            <uni-icons
              :size="item.size"
              color="#ffffff"
              customPrefix="iconfont"
              :type="item.icon"
            ></uni-icons>
          </view>
          <view class="name">{{ item.label }}</view>
        </navigator>
      </view>
    </up-popup>
  </view>
</template>
<script setup>
import { ref, nextTick, computed, watchEffect, onMounted, watch } from "vue";
// import { onHide } from "@dcloudio/uni-app";
import { useAppStore } from "@/stores/app";
import { useSliderStore } from "@/stores/slider";
const appStore = useAppStore();
// 获取slider 的状态
const sliderStore = useSliderStore();
const indexList = ref([]);

const isSvip = computed(() => {
  return appStore.isLogin && appStore?.$userInfo?.svip;
});
watchEffect(() => {
  getIndexList();
});

let timer = null;
// slider显示逻辑
const show = ref(sliderStore.sidebarShow);
onMounted(() => {
  show.value = sliderStore.sidebarShow;
});
watch(
  show,
  (newVal) => {
    sliderStore.updateSidebarShow(newVal);
  },
  { immediate: true }
);
watch(
  () => sliderStore.sidebarShow,
  (newVal) => {
    show.value = newVal;
  }
);

const emit = defineEmits(["open", "close"]);
const footerList = [
  {
    url: "/pages/users/customer_service_message/index",
    icon: "icon-kefu2",
    label: "客服",
    size: 30,
  },
  {
    url: "/pages/users/setting/index",
    icon: "icon-shezhi",
    label: "设置",
    size: 24,
  },
];

function getIndexList() {
  indexList.value = [
    // {
    //   name: "设置主题色",
    //   icon: "icon-wodedingdan",
    //   type: "navigator",
    //   url: "/pages/user/themeDebug",
    // },
    // {
    //   name: "新商城",
    //   icon: "icon-gouwuche",
    //   type: "navigator",
    //   url: "/pages/mall/index",
    // },
    {
      name: "我的订单",
      type: "collapse",
      icon: "icon-changyonggongneng",
      open: false,
      child: [
        {
          name: "商城订单",
          icon: "",
          type: "navigator",
          url: "/pages/order_list/index",
        },
        {
          name: "邮寄存金",
          icon: "",
          type: "navigator",
          url: "/pages/users/vault/storeMetal/order",
        },
        {
          name: "约价回收",
          icon: "",
          type: "navigator",
          url: "/pages/users/vault/recycle/recyle_order",
        },
        {
          name: "秒杀订单",
          icon: "",
          type: "navigator",
          url: "/pages/users/utils/flashSale/order",
        },
        {
          name: "定制订单",
          icon: "",
          type: "navigator",
          url: "/pages/users/utils/factory/orderList",
        },
        // {
        //   name: "换款订单",
        //   icon: "",
        //   type: "navigator",
        //   url: "/pages/users/new_live_exchange/tradeOrderFormOrder",
        // },
        // {
        //   name: "团购订单",
        //   icon: "",
        //   type: "navigator",
        //   url: "/pages/group_buying/order",
        // },
      ],
    },

    {
      name: "购物车",
      icon: "icon-gouwuche1",
      type: "navigator",
      url: "/pages/order_addcart/order_addcart",
    },
    {
      name: "买卖料",
      icon: "icon-jinku",
      type: "collapse",
      open: false,
      child: [
        {
          name: "充值",
          icon: "",
          type: "navigator",
          url: "/pages/users/vault/recharge",
        },
        {
          name: "提现",
          icon: "",
          type: "navigator",
          url: "/pages/users/vault/withdraw",
        },
        {
          name: "买料",
          icon: "",
          type: "navigator",
          url: "/pages/users/vault/buy",
        },
        {
          name: "卖料",
          icon: "",
          type: "navigator",
          url: "/pages/users/vault/storeMetal/index",
        },
        {
          name: "存料",
          icon: "",
          type: "navigator",
          url: "/pages/users/vault/storeMetal/goldBullionStock",
        },
        {
          name: "提料",
          icon: "",
          type: "navigator",
          url: "/pages/users/vault/storeMetal/metalExchange",
        },
      ],
    },
    {
      name: "钱包",
      icon: "icon-licai",
      type: "navigator",
      url: "/pages/users/vault/index",
    },
    // {
    //   name: "钱包",
    //   icon: "icon-licai",
    //   type: "navigator",
    //   url: "/pages/users/vault/newIndex",
    // },
    // {
    //   name: "金价预警",
    //   icon: "icon-yujing",
    //   type: "navigator",
    //   url: "/pages/users/gold_price_warning/index",
    // },

    {
      name: "常用功能",
      type: "collapse",
      icon: "icon-changyonggongneng",
      open: false,
      child: [
        // {
        //   name: "每日一攒",
        //   icon: "",
        //   type: "navigator",
        //   url: "/pages/users/accumulate_gold/index",
        // },
        // {
        //   name: "直播换款",
        //   icon: "",
        //   type: "navigator",
        //   url: "/pages/users/new_live_exchange/index",
        // },
        {
          name: "每日一攒",
          icon: "",
          type: "navigator",
          url: "/pages/users/accumulate_gold/newIndex",
        },
        // {
        //   name: "福利秒杀",
        //   icon: "",
        //   type: "navigator",
        //   url: "/pages/users/utils/flashSale/newIndex",
        // },
      ],
    },
    {
      name: "超级工具",
      type: "collapse",
      icon: "icon-chaojigongju",
      open: false,
      child: [
        {
          name: "金价预警",
          icon: "",
          type: "navigator",
          url: "/pages/users/gold_price_warning/index",
        },
        {
          name: "黄金算盘",
          icon: "",
          type: "navigator",
          url: "/pages/users/record_note/index",
        },
        {
          name: "自动买卖",
          icon: "",
          type: "navigator",
          url: "/pages/users/auto_buy/index",
        },
      ],
    },

    // {
    //   name: "排行榜",
    //   icon: "icon-a-ziyuan87",
    //   type: "navigator",
    //   url: "/pages/users/ranking_list/index",
    // },
    // {
    //   name: "每日一攒",
    //   icon: "icon-jicunjinxianxing",
    //   type: "navigator",
    //   url: "/pages/users/accumulate_gold/index",
    // },
    // {
    //   name: "VIP会员",
    //   icon: "icon-viphuiyuan1",
    //   type: "navigator",
    //   url: "/pages/VIP/VIP",
    // },
    // {
    //   name: "SVIP会员",
    //   icon: "icon-viphuiyuan1",
    //   type: "navigator",
    //   url: "/pages/SVIP/SVIP",
    // },
    // {
    //   name: "贝币商城",
    //   icon: "icon-beibishangcheng",
    //   type: "navigator",
    //   url: "/pages/bb_mall/index",
    // },
    // {
    //   name: "客服消息",
    //   icon: "icon-kefu2",
    //   type: "navigator",
    //   url: "/pages/message_create/message_create",
    // },
    // {
    //   name: "加盟我们",
    //   icon: "icon-jiamengwomen",
    //   type: "navigator",
    //   url: "/pages/join_us/index",
    // },
    // {
    //   name: "找款订单",
    //   icon: "icon-zhaokuan",
    //   type: "navigator",
    //   url: "/pages/find_funds/fundsOrder",
    // },
  ];
}

function open() {
  show.value = true;
  uni.hideTabBar();
  emit("open");
}

// onHide(() => {
//   show.value = false;
//   hideTabBar();
// });

defineExpose({
  open,
  close,
  show,
});

function close() {
  show.value = false;
  // hideTabBar();
  emit("close");
}

function hideTabBar() {
  // uni.showTabBar({
  // async complete() {
  //   await nextTick()
  //   fixTabBarGap()
  // }
  // });
  // timer && clearTimeout(timer)
  // timer = setTimeout(() => {
  //   uni.showTabBar();
  // }, 250)
}

function fixTabBarGap() {
  const info = uni.getSystemInfoSync();
  // 页面真实高度 = windowHeight + tabBar 高度
  const page = uni.createSelectorQuery().select(".page-container");
  page
    .boundingClientRect((rect) => {
      const gap = info.screenHeight - rect.height;
      if (gap > 0) {
        // 用 CSS 动态修正底部多余空白
        document.body.style.height = `${info.windowHeight}px`;
      }
    })
    .exec();
}

function handleCollapse(item) {
  item.open = !item.open;
}
</script>

<style lang="scss" scoped>
.sidebar-wrap {
  position: relative;
}
::v-deep .u-popup__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: space-between;
  height: 100vh;
}
.navigator-box {
  overflow: hidden;
  &.open {
    .arrow-icon {
      transform: rotate(-180deg);
    }
    .collapse-content {
      max-height: 500px !important;
    }
  }
  .collapse-row {
    &:active {
      background-color: #f8f8f8;
    }
  }
}
.list-wrap {
  width: 70vw;
  height: 88%;
  background-color: #fafafa;
  padding: 30rpx 20rpx 0;
  overflow: auto;
  margin: var(--status-bar-height) 0 0;
  // ::v-deep .u-list-item {
  //   height: 95rpx;
  // }

  .navigator-link {
    padding: 0 20rpx 0 25rpx;
    width: 100%;
    display: flex;
    justify-content: space-between;
    line-height: 100rpx;
    &.sub-link {
      line-height: 70rpx;
      .title {
        padding-left: 54rpx;
      }
    }
  }
  .arrow-icon {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .collapse-content {
    // background-color: #FAFAFA;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 0;
  }
  .u-list-item {
    background-color: #fff;
    margin-bottom: 15rpx;
    border-radius: 15rpx;
    overflow: hidden;

    .item-icon {
      vertical-align: middle;
      margin-right: 20rpx;
    }
    .item-text {
      font-size: 32rpx;
      vertical-align: middle;
    }
  }
  .white-box {
    min-height: 30rpx;
    background-color: #fafafa;
  }
}
.footer-box {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.9375rem;
  gap: 1.25rem;
  margin-bottom: 0.9375rem;

  .item-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .icon-box {
      width: 80rpx;
      height: 80rpx;
      border-radius: 100rpx;
      background-color: $header-color;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .name {
      margin: 10rpx 0 0;
      font-size: 28rpx;
      text-align: center;
    }
  }
}
.uni-cover-view {
  width: 100vw;
  height: 100vh;
  background-color: #000;
}
</style>