236 lines
4.9 KiB
Vue
236 lines
4.9 KiB
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, val.query)">
|
||
<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_MARKET_NEW_USER_DISCOUNT',
|
||
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: 'PAGES_MARKET_ORDER_RECOMMENDATION',
|
||
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: '拼团'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
label: '优惠券',
|
||
menus: [
|
||
{
|
||
icon: 'spdhq',
|
||
pageUrl: 'PAGES_EXCHANGE_COUPON',
|
||
title: '商品兑换券',
|
||
intro: '批量设置商品折扣',
|
||
query: {
|
||
coupon_type: 2
|
||
}
|
||
}
|
||
]
|
||
}
|
||
]);
|
||
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: 0 28upx;
|
||
.row {
|
||
.header {
|
||
padding: 28upx 0;
|
||
.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>
|