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",
          });
        }
      },
    });
  } else {
    router.push(url);
  }
}
onMounted(() => {
  if (token.value) {
    getDeptList();
  }
});
onShow(() => {
  if (token.value) {
    getmsgData();
    useUserStore().getMenuList();
  }
});
watch(
  () => isShowLoging.value,
  () => {
    if (isShowLoging.value) {
      uni.showToast({
        image: hxs,
        title: "核销成功",
      });
    }
  },
);

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 text-[rgb(0,0,0,0.6)] mt-3">{{
              item.name
            }}</view>
          </view>
          <view class="flex items-center justify-center flex-col">
            <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>
          </view>
        </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>