新增营销中心图标以及新版首页
This commit is contained in:
7
pages/appliccation/components/selectShop.vue
Normal file
7
pages/appliccation/components/selectShop.vue
Normal file
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<view class="">选择门店组件</view>
|
||||
</template>
|
||||
|
||||
<script></script>
|
||||
|
||||
<style></style>
|
||||
@@ -1,101 +1,103 @@
|
||||
<template>
|
||||
<view class="u-p-30 bg-gray min-page">
|
||||
<view class=" border-r-16 bg-fff u-p-30 ">
|
||||
<view class="u-m-t-32">
|
||||
<up-grid :border="false" col="2">
|
||||
<up-grid-item @click="toPage(listItem,listIndex)" v-for="(listItem,listIndex) in computedMenus"
|
||||
:key="listIndex">
|
||||
<image style="width: 120rpx;height: 120rpx;" :src="listItem.miniIcon" mode="scaleToFill" />
|
||||
<text class="u-m-t-16 color-333 u-font-28 u-p-b-32">{{listItem.title}}</text>
|
||||
</up-grid-item>
|
||||
</up-grid>
|
||||
<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.pageId)">
|
||||
<image :src="`/static/applocation/${val.icon}.png`" mode="aspectFit" class="icon"></image>
|
||||
<view class="info">
|
||||
<view class="title">
|
||||
<text class="t">{{ val.label }}</text>
|
||||
</view>
|
||||
<view class="intro">
|
||||
<text class="t">{{ val.intro }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
computed
|
||||
} from 'vue';
|
||||
import go from '@/commons/utils/go.js';
|
||||
import {
|
||||
useMenusStore
|
||||
} from '@/store/menus.js';
|
||||
const menusStore = useMenusStore()
|
||||
async function init() {
|
||||
const res = await menusStore.getMenus()
|
||||
}
|
||||
init()
|
||||
import { ref } from 'vue';
|
||||
import go from '@/commons/utils/go.js';
|
||||
|
||||
function toPage(item, index) {
|
||||
console.log(item);
|
||||
uni.navigateTo({
|
||||
url: '/' + item.miniPath.replace(/^\/+|\/+$/g, ''),
|
||||
fail(err) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '无该页面路径或无权限访问该页面'
|
||||
})
|
||||
const menuList = ref([
|
||||
{
|
||||
label: '营销',
|
||||
menus: [
|
||||
{
|
||||
icon: 'xszk',
|
||||
pageId: 'PAGES_LIMIT_DISCOUNT',
|
||||
label: '限时折扣',
|
||||
intro: '批量设置商品折扣'
|
||||
},
|
||||
{
|
||||
icon: 'czdhm',
|
||||
pageId: 'LIMIT_DISCOUNT',
|
||||
label: '充值兑换码',
|
||||
intro: '兑换码直充余额,可当作礼品赠送'
|
||||
}
|
||||
})
|
||||
|
||||
]
|
||||
}
|
||||
|
||||
const navList = [{
|
||||
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'
|
||||
},
|
||||
|
||||
|
||||
];
|
||||
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
|
||||
})
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user