增加状态管理持久化插件，提取日期选择，时间选择，周期选择为公共组件
This commit is contained in:
@@ -1,154 +1,228 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="row" v-for="(item, index) in menuList" :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="`/static/applocation/${val.icon}.png`" 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>
|
||||
<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';
|
||||
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: [
|
||||
{
|
||||
icon: 'xszk',
|
||||
pageUrl: 'PAGES_LIMIT_DISCOUNT',
|
||||
title: '限时折扣',
|
||||
intro: '批量设置商品折扣'
|
||||
},
|
||||
{
|
||||
icon: 'czdhm',
|
||||
pageUrl: 'LIMIT_DISCOUNT',
|
||||
title: '充值兑换码',
|
||||
intro: '兑换码直充余额，可当作礼品赠送'
|
||||
},
|
||||
|
||||
{
|
||||
title: '优惠券',
|
||||
icon: '/static/indexImg/icon-order.svg',
|
||||
pageUrl: 'PAGES_ORDER_INDEX'
|
||||
},
|
||||
{
|
||||
title: '霸王餐',
|
||||
icon: '/static/indexImg/icon-order.svg',
|
||||
pageUrl: 'PAGES_ORDER_INDEX'
|
||||
},
|
||||
{
|
||||
title: '邀请裂变',
|
||||
icon: '/static/indexImg/icon-order.svg',
|
||||
pageUrl: 'PAGES_ORDER_INDEX'
|
||||
},
|
||||
{
|
||||
title: '积分锁客',
|
||||
icon: '/static/indexImg/icon-order.svg',
|
||||
pageUrl: 'PAGES_ORDER_INDEX'
|
||||
},
|
||||
{
|
||||
title: '满减活动',
|
||||
icon: '/static/indexImg/icon-order.svg',
|
||||
pageUrl: 'PAGES_MARKET_DISCOUNT_ACTIVITY'
|
||||
},
|
||||
{
|
||||
title: '私域引流',
|
||||
icon: '/static/indexImg/icon-order.svg',
|
||||
pageUrl: 'PAGES_MARKET_DRAINAGE_CONFIG'
|
||||
},
|
||||
{
|
||||
title: '消费返现',
|
||||
icon: '/static/indexImg/icon-order.svg',
|
||||
pageUrl: 'PAGES_MARKET_CONSUME_CASHBACK'
|
||||
},
|
||||
{
|
||||
title: '分销',
|
||||
icon: '/static/indexImg/icon-order.svg',
|
||||
pageUrl: 'PAGES_PAY'
|
||||
}
|
||||
]
|
||||
}
|
||||
{
|
||||
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_PAY",
|
||||
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);
|
||||
});
|
||||
console.log(arr);
|
||||
return arr;
|
||||
// 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;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user