cashier_app/pages/appliccation/marketing.vue

<template>
  <view class="container">
    <view class="row" v-for="(item, index) in computedMenus" :key="index">
      <view class="header">
        <text class="t">{{ item.label }}</text>
      </view>
      <view class="menu-wrap">
        <view
          class="item"
          v-for="(val, i) in item.menus"
          :key="i"
          @click="go.to(val.pageUrl)"
        >
          <image :src="val.icon" mode="aspectFit" class="icon"></image>
          <view class="info">
            <view class="title">
              <text class="t">{{ val.title }}</text>
            </view>
            <view class="intro">
              <text class="t">{{ val.intro }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from "vue";
import go from "@/commons/utils/go.js";
import { useMenusStore } from "@/store/menus.js";
const menusStore = useMenusStore();

const menuList = ref([
  {
    label: "营销",
    menus: [
      {
        title: "霸王餐",
        icon: "",
        intro: "设置充值消费的N倍，当前订单立即免单",
        pageUrl: "PAGES_BWC",
      },
      {
        title: "积分锁客",
        icon: "",
        pageUrl: "",
        intro: "设置充值消费的N倍，当前订单立即免单",
      },
      {
        title: "弹窗广告",
        icon: "",
        pageUrl: "PAGES_ORDER_INDEX",
        intro: "设置弹窗广告",
      },
      {
        title: "超级会员",
        icon: "",
        pageUrl: "PAGES_ORDER_INDEX",
        intro: "用户会员管理设置",
      },
      {
        title: "新客立减",
        icon: "",
        pageUrl: "PAGES_ORDER_INDEX",
        intro: "首单下单减免金额",
      },
      {
        title: "智慧充值",
        icon: "",
        pageUrl: "PAGES_ORDER_INDEX",
        intro: "允许客户充值并使用余额支付",
      },
      {
        title: "分销",
        icon: "",
        pageUrl: "PAGES_MARKET_DISTRIBUTION_INDEX",
        intro: "用户成为业务员，可促进消费",
      },
      {
        title: "消费返现",
        icon: "",
        pageUrl: "PAGES_MARKET_CONSUME_CASHBACK",
        intro: "用户下单后返现一定的金额到余额，可促进复购",
      },
      {
        title: "私域引流",
        icon: "",
        pageUrl: "PAGES_MARKET_DRAINAGE_CONFIG",
        intro: "可设置用户下单成功后的群二维码",
      },
      {
        title: "满减活动",
        icon: "",
        pageUrl: "PAGES_MARKET_DISCOUNT_ACTIVITY",
        intro: "达到指定支付金额享受减价",
      },
	  {
        title: "生日有礼",
        icon: "",
        pageUrl: "",
        intro: "用户生日管理设置",
      },
	  {
        title: "点餐智能推荐",
        icon: "",
        pageUrl: "",
        intro: "进入点单页X秒未点自动推荐商品，此推荐设置启用即生效",
      },
	  {
        title: "超值券包",
        icon: "",
        pageUrl: "",
        intro: "下单加购",
      },
	  {
        title: "套餐推广",
        icon: "",
        pageUrl: "",
        intro: "下单通过用户邀请好友减免金额的方式裂变宣传套餐加购",
      },
	  {
        title: "充值兑换码",
        icon: "",
        pageUrl: "",
        intro: "兑换码直充余额，可当作礼品赠送",
      },
	  {
        title: "券兑换码",
        icon: "",
        pageUrl: "",
        intro: "可添加多券组合兑换",
      },
      {
        icon: "xszk",
        pageUrl: "PAGES_LIMIT_DISCOUNT",
        title: "限时折扣",
        intro: "批量设置商品折扣",
      },
	  {
        icon: "xszk",
        pageUrl: "PAGES_LIMIT_DISCOUNT",
        title: "商品拼团",
        intro: "拼团",
      },
    ],
  },
]);
console.log(menusStore.adminPages);

const computedMenus = computed(() => {
  //   const arr = menusStore.adminPages.filter((v) => {
  //     return navList.find((navItem) => navItem.title == v.title);
  //   });
  return menuList.value.map((v) => {
    v.menus = v.menus.filter((menu) => {
      const hasPermission = menusStore.adminPages.find(
        (navItem) => navItem.title == menu.title
      );
      console.log("hasPermission", hasPermission);
      if (hasPermission) {
        menu.icon = hasPermission.miniIcon;
        console.log(menu);
      }

      return hasPermission;
    });
    return v;
  });
});
</script>

<style>
page {
  background-color: #f8f8f8;
}
</style>
<style scoped lang="scss">
.container {
  padding: 28upx;
  .row {
    .header {
      padding-bottom: 28upx;
      .t {
        font-size: 32upx;
        font-weight: bold;
      }
    }
    .menu-wrap {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: auto;
      grid-column-gap: 28upx;
      grid-row-gap: 28upx;
      .item {
        display: flex;
        background-color: #fff;
        padding: 20upx;
        border-radius: 20upx;
        .icon {
          $size: 80upx;
          width: $size;
          height: $size;
          flex-shrink: 0;
        }
        .info {
          display: flex;
          padding-left: 20upx;
          flex-direction: column;
          .title {
            .t {
              font-size: 28upx;
              font-weight: bold;
            }
          }
          .intro {
            .t {
              font-size: 28upx;
              color: #999;
            }
          }
        }
      }
    }
  }
}
</style>