item-management-vant/src/views/home/start.vue

<template>
  <div>
    <div class="card">
      <h3 class="businessTitle">快速发起</h3>
      <div class="icon-area" v-if="meunNames.includes('大中型业务')" @click="goBench('/index/major/placeOrder')">
        <svg t="1716189375497" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2709" width="48" height="48">
          <path
            d="M810.666667 1024H213.333333c-117.333333 0-213.333333-96-213.333333-213.333333V213.333333C0 96 96 0 213.333333 0h597.333334c117.333333 0 213.333333 96 213.333333 213.333333v597.333334c0 117.333333-96 213.333333-213.333333 213.333333z"
            fill="#67C23A"
            p-id="2710"
            data-spm-anchor-id="a313x.collections_detail.0.i17.621d3a811DVWhk"
            class="selected"
          />
          <path
            d="M526.933333 360.533333c39.111111 0 71.111111-32.711111 71.111111-73.244444 0-21.333333-10.666667-43.377778-25.6-56.177778 2.133333 4.266667 2.133333 8.533333 2.133334 14.933333 0 28.444444-21.333333 49.777778-47.644445 49.777778-25.6 0-47.644444-21.333333-47.644444-49.777778 0-4.266667 0-8.533333 2.133333-10.666666-12.8 12.8-23.466667 32.711111-23.466666 54.044444-2.133333 39.111111 30.577778 71.111111 68.977777 71.111111z m-2.133333-93.155555c25.6 0 47.644444-21.333333 47.644444-47.644445 0-25.6-21.333333-47.644444-47.644444-47.644444-25.6 0-47.644444 21.333333-47.644444 47.644444s22.044444 47.644444 47.644444 47.644445zM192 702.577778l114.488889 45.511111c-8.533333-19.2-45.511111-305.066667-45.511111-305.066667L192 702.577778z m462.933333 148.622222l6.4-112.355556-255.288889 25.6 248.888889 86.755556z m75.377778-613.688889l-123.022222 19.2c6.4 12.8 10.666667 30.577778 10.666667 45.511111 0 51.911111-41.244444 95.288889-93.155556 95.288889s-93.155556-43.377778-93.155556-95.288889c0-6.4 0-12.8 2.133334-19.2l-149.333334 23.466667c6.4 147.2 71.111111 440.888889 71.111112 440.888889l476.444444-81.777778c-34.844444-36.977778-101.688889-428.088889-101.688889-428.088889zM373.333333 470.755556L574.577778 440.888889l6.4 21.333333-201.244445 30.577778-6.4-22.044444z m43.377778 170.666666l-6.4-25.6 248.888889-36.977778 6.4 25.6-248.888889 36.977778z m-14.933333-73.244444l-8.533334-25.6 320-43.377778 10.666667 25.6-322.133333 43.377778z m0 0"
            fill="#FFFFFF"
            p-id="2711"
          />
        </svg>
        <div class="icon-word">大中型下单</div>
      </div>
      <div class="icon-area" v-if="meunNames.includes('个贷业务')" @click="goBench('/index/personal/placeOrder')">
        <svg t="1716189375497" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2709" width="48" height="48">
          <path
            d="M810.666667 1024H213.333333c-117.333333 0-213.333333-96-213.333333-213.333333V213.333333C0 96 96 0 213.333333 0h597.333334c117.333333 0 213.333333 96 213.333333 213.333333v597.333334c0 117.333333-96 213.333333-213.333333 213.333333z"
            fill="#67C23A"
            p-id="2710"
            data-spm-anchor-id="a313x.collections_detail.0.i17.621d3a811DVWhk"
            class="selected"
          />
          <path
            d="M526.933333 360.533333c39.111111 0 71.111111-32.711111 71.111111-73.244444 0-21.333333-10.666667-43.377778-25.6-56.177778 2.133333 4.266667 2.133333 8.533333 2.133334 14.933333 0 28.444444-21.333333 49.777778-47.644445 49.777778-25.6 0-47.644444-21.333333-47.644444-49.777778 0-4.266667 0-8.533333 2.133333-10.666666-12.8 12.8-23.466667 32.711111-23.466666 54.044444-2.133333 39.111111 30.577778 71.111111 68.977777 71.111111z m-2.133333-93.155555c25.6 0 47.644444-21.333333 47.644444-47.644445 0-25.6-21.333333-47.644444-47.644444-47.644444-25.6 0-47.644444 21.333333-47.644444 47.644444s22.044444 47.644444 47.644444 47.644445zM192 702.577778l114.488889 45.511111c-8.533333-19.2-45.511111-305.066667-45.511111-305.066667L192 702.577778z m462.933333 148.622222l6.4-112.355556-255.288889 25.6 248.888889 86.755556z m75.377778-613.688889l-123.022222 19.2c6.4 12.8 10.666667 30.577778 10.666667 45.511111 0 51.911111-41.244444 95.288889-93.155556 95.288889s-93.155556-43.377778-93.155556-95.288889c0-6.4 0-12.8 2.133334-19.2l-149.333334 23.466667c6.4 147.2 71.111111 440.888889 71.111112 440.888889l476.444444-81.777778c-34.844444-36.977778-101.688889-428.088889-101.688889-428.088889zM373.333333 470.755556L574.577778 440.888889l6.4 21.333333-201.244445 30.577778-6.4-22.044444z m43.377778 170.666666l-6.4-25.6 248.888889-36.977778 6.4 25.6-248.888889 36.977778z m-14.933333-73.244444l-8.533334-25.6 320-43.377778 10.666667 25.6-322.133333 43.377778z m0 0"
            fill="#FFFFFF"
            p-id="2711"
          />
        </svg>
        <div class="icon-word">个贷下单</div>
      </div>
      <div class="icon-area" v-if="meunNames.includes('土地规划市场')" @click="goBench('/index/land/placeOrder')">
        <svg t="1716189375497" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2709" width="48" height="48">
          <path
            d="M810.666667 1024H213.333333c-117.333333 0-213.333333-96-213.333333-213.333333V213.333333C0 96 96 0 213.333333 0h597.333334c117.333333 0 213.333333 96 213.333333 213.333333v597.333334c0 117.333333-96 213.333333-213.333333 213.333333z"
            fill="#67C23A"
            p-id="2710"
            data-spm-anchor-id="a313x.collections_detail.0.i17.621d3a811DVWhk"
            class="selected"
          />
          <path
            d="M526.933333 360.533333c39.111111 0 71.111111-32.711111 71.111111-73.244444 0-21.333333-10.666667-43.377778-25.6-56.177778 2.133333 4.266667 2.133333 8.533333 2.133334 14.933333 0 28.444444-21.333333 49.777778-47.644445 49.777778-25.6 0-47.644444-21.333333-47.644444-49.777778 0-4.266667 0-8.533333 2.133333-10.666666-12.8 12.8-23.466667 32.711111-23.466666 54.044444-2.133333 39.111111 30.577778 71.111111 68.977777 71.111111z m-2.133333-93.155555c25.6 0 47.644444-21.333333 47.644444-47.644445 0-25.6-21.333333-47.644444-47.644444-47.644444-25.6 0-47.644444 21.333333-47.644444 47.644444s22.044444 47.644444 47.644444 47.644445zM192 702.577778l114.488889 45.511111c-8.533333-19.2-45.511111-305.066667-45.511111-305.066667L192 702.577778z m462.933333 148.622222l6.4-112.355556-255.288889 25.6 248.888889 86.755556z m75.377778-613.688889l-123.022222 19.2c6.4 12.8 10.666667 30.577778 10.666667 45.511111 0 51.911111-41.244444 95.288889-93.155556 95.288889s-93.155556-43.377778-93.155556-95.288889c0-6.4 0-12.8 2.133334-19.2l-149.333334 23.466667c6.4 147.2 71.111111 440.888889 71.111112 440.888889l476.444444-81.777778c-34.844444-36.977778-101.688889-428.088889-101.688889-428.088889zM373.333333 470.755556L574.577778 440.888889l6.4 21.333333-201.244445 30.577778-6.4-22.044444z m43.377778 170.666666l-6.4-25.6 248.888889-36.977778 6.4 25.6-248.888889 36.977778z m-14.933333-73.244444l-8.533334-25.6 320-43.377778 10.666667 25.6-322.133333 43.377778z m0 0"
            fill="#FFFFFF"
            p-id="2711"
          />
        </svg>
        <div class="icon-word">土规下单</div>
      </div>
      <div class="icon-area" v-if="meunNames.includes('资产业务')" @click="goBench('/index/assets/placeOrder')">
        <svg t="1716189375497" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2709" width="48" height="48">
          <path
            d="M810.666667 1024H213.333333c-117.333333 0-213.333333-96-213.333333-213.333333V213.333333C0 96 96 0 213.333333 0h597.333334c117.333333 0 213.333333 96 213.333333 213.333333v597.333334c0 117.333333-96 213.333333-213.333333 213.333333z"
            fill="#67C23A"
            p-id="2710"
            data-spm-anchor-id="a313x.collections_detail.0.i17.621d3a811DVWhk"
            class="selected"
          />
          <path
            d="M526.933333 360.533333c39.111111 0 71.111111-32.711111 71.111111-73.244444 0-21.333333-10.666667-43.377778-25.6-56.177778 2.133333 4.266667 2.133333 8.533333 2.133334 14.933333 0 28.444444-21.333333 49.777778-47.644445 49.777778-25.6 0-47.644444-21.333333-47.644444-49.777778 0-4.266667 0-8.533333 2.133333-10.666666-12.8 12.8-23.466667 32.711111-23.466666 54.044444-2.133333 39.111111 30.577778 71.111111 68.977777 71.111111z m-2.133333-93.155555c25.6 0 47.644444-21.333333 47.644444-47.644445 0-25.6-21.333333-47.644444-47.644444-47.644444-25.6 0-47.644444 21.333333-47.644444 47.644444s22.044444 47.644444 47.644444 47.644445zM192 702.577778l114.488889 45.511111c-8.533333-19.2-45.511111-305.066667-45.511111-305.066667L192 702.577778z m462.933333 148.622222l6.4-112.355556-255.288889 25.6 248.888889 86.755556z m75.377778-613.688889l-123.022222 19.2c6.4 12.8 10.666667 30.577778 10.666667 45.511111 0 51.911111-41.244444 95.288889-93.155556 95.288889s-93.155556-43.377778-93.155556-95.288889c0-6.4 0-12.8 2.133334-19.2l-149.333334 23.466667c6.4 147.2 71.111111 440.888889 71.111112 440.888889l476.444444-81.777778c-34.844444-36.977778-101.688889-428.088889-101.688889-428.088889zM373.333333 470.755556L574.577778 440.888889l6.4 21.333333-201.244445 30.577778-6.4-22.044444z m43.377778 170.666666l-6.4-25.6 248.888889-36.977778 6.4 25.6-248.888889 36.977778z m-14.933333-73.244444l-8.533334-25.6 320-43.377778 10.666667 25.6-322.133333 43.377778z m0 0"
            fill="#FFFFFF"
            p-id="2711"
          />
        </svg>
        <div class="icon-word">资产下单</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapStores } from 'pinia';
import { useUserStore } from '@/stores/useUserStore';
import { menuStore } from '@/stores/menuStore';
import { showNotify } from 'vant';

export default {
  data() {
    return {
      meunNames: []
    };
  },
  computed: {
    ...mapStores(useUserStore),
    ...mapStores(menuStore),
  },
  created() {
    this.meunNames = this.menuStore.menuInfo.map(item => item.name);
  },
  methods: {
    goBench(route) {
      let hasOpenBar = false;
      const postList = this.userStore.userInfo.postList.map((item) => item.name);
      const marketPosts = ['销售代表', '客户经理', '客户经理-业务员', '市场一部经理', '市场二部经理', '销售主管', '市场部经理', '营销主管'];
      postList.forEach((element) => {
        if (marketPosts.includes(element)) {
          hasOpenBar = true;
        }
      });
      if (hasOpenBar) {
        this.$router.push(route);
      } else {
        showNotify({ type: 'danger', message: '只有市场部人员才能下单' });
      }
    },
  },
};
</script>

<style scoped>
.card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  padding: 16px;
  margin: 10px;
}

.businessTitle {
  margin-top: 0px;
}

.icon-area {
  display: inline-block;
  margin-top: 1%;
  width: 25%;
  text-align: center;
}
</style>