sports-merchant-minapp/src/pages/index/index.vue

<script setup lang="ts">
import router from "@/router";
import hxs from "@/subPack/static/hxs.png";
import hx from "@/static/index/hx.png";
import bk from "@/static/index/bk.png";
import pj from "@/static/index/pj.png";
import ye from "@/static/index/ye.png";
import yg from "@/static/index/yg.png";
import pz from "@/static/index/pz.png";
import ls from "@/static/index/ls.png";
import nz from "@/static/index/nz.png";
import sm from "@/static/index/sm.png";
const { statusBarHeight } = uni.getSystemInfoSync();
const { token, userInfo, orgCode, title, isShowLoging, topMenu, StoreMenu } =
  storeToRefs(useUserStore());

const { data: dept, send: getDeptList } = useRequest(
  () => Apis.sys.getCurrentUserDeparts({}),
  {
    initialData: [],
    immediate: false,
  },
).onSuccess(() => {
  title.value = String(dept.value.list[0].departName);
});

const { data: sysMsg, send: getmsgData } = useRequest(
  () => Apis.app.getMsg({}),
  { immediate: false },
);
function handleCommenPath(url: string) {
  if (url == "/subPack/writeOff/index") {
    uni.scanCode({
      success: function (res) {
        console.log(res, "扫码信息");
        if (res.result) {
          handleCommenPath(`/subPack/writeOff/index?id=${res.result}`);
        } else {
          uni.showToast({
            title: "请检查二维码是否正确",
            icon: "none",
          });
        }
      },
      fail(result) {
        console.log(result, "获取二维码失败");
        uni.showToast({
          title: "请检查二维码是否正确",
          icon: "none",
        });
      },
    });
  } else {
    router.push(url);
  }
}
onMounted(() => {
  if (token.value) {
    getDeptList();
  }
});
onShow(() => {
  if (token.value) {
    getmsgData();
    useUserStore().getMenuList();
  }
});
watch(
  () => isShowLoging.value,
  () => {
    if (isShowLoging.value) {
      setTimeout(() => {
        uni.showToast({
          image: hxs,
          title: "核销成功",
        });
        isShowLoging.value = false;
      }, 1000);
    }
  },
);

function getIcon(path: string) {
  const iconMap: Record<string, string> = {
    "/subPack/classInspection/index?type=0": pz,
    "/subPack/classInspection/index?type=1": ls,
    "/subPack/classInspection/index?type=2": nz,
    "/subPack/writeOffDetaile/index": hx,
    "/subPack/classInspection/index?type=3": bk,
    "/subPack/Evaluation/index": pj,
    "/subPack/Storebalance/index": ye,
    "/subPack/EmployeeList/index": yg,
    "/subPack/writeOff/index": sm,
  };
  return iconMap[path] || "";
}
function getItemClass(path: string) {
  const classMap: Record<string, string> = {
    "/subPack/classInspection/index?type=0": "header",
    "/subPack/classInspection/index?type=1": "ls",
    "/subPack/writeOff/index": "sm",
    "/subPack/classInspection/index?type=2": "kc",
  };
  return classMap[path] || "";
}
</script>

<template>
  <view class="h-screen box-border header" :style="{ paddingTop: `${statusBarHeight}px` }">
    <view class="h-58rpx"></view>
    <view class="px-32rpx mt-48rpx" v-if="!token">
      <view class="bg-white rounded-16rpx flex items-center justify-between py-20rpx px-24rpx">
        <view>您还未登录，快去登录吧！</view>
        <commonbtn bg-color="#0074FF" @click="handleCommenPath('/pages/login/index')">去登录</commonbtn>
      </view>
    </view>
    <view class="relative">
      <wd-drop-menu>
        <wd-drop-menu-item :options="dept.list" v-model:model-value="orgCode" value-key="orgCode" label-key="departName"
          :title="title" @change="useUserStore().setTitile" />
      </wd-drop-menu>
      <view class="absolute top-50% -translate-y-50% right-50rpx" v-if="token">
        <view class="flex items-center">
          <image src="@/static/index/user.png" class="w-40rpx h-40rpx"></image>
          <view class="text-32rpx font-semibold ml-3">{{
            userInfo.realname
          }}</view>
        </view>
      </view>
    </view>
    <view class="px-32rpx">
      <view class="grid grid-cols-2 gap-3">
        <view class="flex items-center px-40rpx header rounded-2xl h-162rpx" @click="handleCommenPath(item.route)"
          v-for="item in topMenu" :class="getItemClass(item.route)" :key="item.id">
          <image :src="getIcon(item.route)" class="w-100rpx h-100rpx"></image>
          <view class="text-32rpx font-semibold">{{ item.name }}</view>
        </view>
      </view>
      <view class="mt-3" v-if="sysMsg">
        <wd-notice-bar :text="sysMsg.map((it) => it.titile)" color="#000000" background-color="#fff" :delay="3"
          direction="vertical" @click="handleCommenPath('/subPack/notification/index')">
          <template #prefix>
            <image src="@/static/index/msg.png" class="w-30rpx h-30rpx mr2"></image>
          </template>
        </wd-notice-bar>
      </view>
      <view class="mt-3 rounded-2xl bg-white p-28rpx" v-if="StoreMenu">
        <view class="font-semibold text-32rpx">门店经营</view>
        <view class="grid grid-cols-4 gap-3 mt-3">
          <view class="flex items-center justify-center flex-col" @click="handleCommenPath(item.route)"
            v-for="item in StoreMenu" :key="item.id">
            <image :src="getIcon(item.route)" class="w-52rpx h-52rpx"></image>
            <view class="text-24rpx mt-3">{{
              item.name
            }}</view>
          </view>
          <button open-type="contact"
            class="bg-transparent after:border-none after:h-full flex flex-col items-center justify-center p-l-0 pr-0">
            <image src="@/static/index/kf.png" class="w-52rpx h-52rpx"></image>
            <view class="text-24rpx text-[rgb(0,0,0,0.6)] mt-3">平台客服</view>
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<route lang="json">{
  "name": "home",
  "style": {
    "navigationBarTitleText": "首页",
    "navigationStyle": "custom",
    "disableScroll": true
  }
}</route>

<style scoped lang="scss">
:deep(.wd-drop-menu__list) {
  background-color: transparent !important;

  .wd-drop-menu__item {
    text-align: left !important;

    .wd-drop-menu__item-title {
      max-width: 300rpx !important;
    }
  }
}

.ls {
  background: linear-gradient(180deg, #ffecec 0%, #ffffff 100%);
}

.kc {
  background: linear-gradient(180deg, #fff9e5 0%, #ffffff 100%);
}

.sm {
  background: linear-gradient(180deg, #efffff 0%, #ffffff 100%);
}
</style>