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, 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_RECHARGE_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: 'PAGES_MARKET_RECHARGE_EXCHANGE_CODE',
				intro: '兑换码直充余额，可当作礼品赠送'
			},
			{
				title: '券兑换码',
				icon: '',
				pageUrl: 'PAGES_MARKET_COUPON_EXCHANGE_CODE',
				intro: '可添加多券组合兑换'
			},
			{
				icon: 'xszk',
				pageUrl: 'PAGES_LIMIT_DISCOUNT',
				title: '限时折扣',
				intro: '批量设置商品折扣'
			},
			{
				icon: 'xszk',
				pageUrl: 'PAGES_LIMIT_DISCOUNT',
				title: '商品拼团',
				intro: '拼团'
			}
		]
	},
	{
		label: '优惠券',
		menus: [
			{
				icon: 'mjq',
				pageUrl: 'PAGES_EXCHANGE_COUPON',
				title: '满减券',
				intro: '用户满足指定金额后，可使用优惠券立减相应金额，如：设置满100-50券，符合要求的订单满100元后，立减50元。',
				query: {
					couponType: 1
				}
			},
			{
				icon: 'spdhq',
				pageUrl: 'PAGES_EXCHANGE_COUPON',
				title: '商品兑换券',
				intro: '批量设置商品折扣',
				query: {
					couponType: 2
				}
			},
			{
				icon: 'zkq',
				pageUrl: 'PAGES_EXCHANGE_COUPON',
				title: '折扣券',
				intro: '下单享折扣但折扣的金额将在券中抵扣。',
				query: {
					couponType: 3
				}
			},
			{
				icon: 'dejbjq',
				pageUrl: 'PAGES_EXCHANGE_COUPON',
				title: '第二件半价券',
				intro: '设置第二件半价券',
				query: {
					couponType: 4
				}
			},
			{
				icon: 'xfzq',
				pageUrl: 'PAGES_EXCHANGE_COUPON',
				title: '消费赠券',
				intro: '达到指定消费金额赠送优惠券',
				query: {
					couponType: 5
				}
			},
			{
				icon: 'myzy',
				pageUrl: 'PAGES_EXCHANGE_COUPON',
				title: '买一送一券',
				intro: '针对营销活动买一送一设置券品',
				query: {
					couponType: 6
				}
			},
			{
				icon: 'gdjkq',
				pageUrl: 'PAGES_EXCHANGE_COUPON',
				title: '固定价格券',
				intro: '设置该券后，允许用户以固定价格兑换指定商品，如：设置一个固定价格9.9的券，商品20元，用户使用券后只需要9.9元兑换该商品。',
				query: {
					couponType: 7
				}
			},
			{
				icon: 'mfpsq',
				pageUrl: 'PAGES_EXCHANGE_COUPON',
				title: '免配送费券',
				intro: '可设置一张免除订单配送费的券',
				query: {
					couponType: 8
				}
			}
		]
	}
]);
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 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>