eduepos_ui_store/pages/activity/marketing.vue

<template>
    <view class="marketing-page">
        <view class="item" v-for="(item, idx) in marketings" :key="item.id" @click="handItem(item)">
            <image class="cover" :src="item.icon" />
            <view class="name">{{ item.name }}</view>
        </view>
    </view>
</template>
<script>
export default {
    data () {
        return {
            marketings: [
                {
                    id: 1,
                    name: '特价菜',
                    icon: require('../../static/imgs/mine/tjc.png'),
                    path: '/pages/activity/special-item'
                },
                {
                    id: 2,
                    name: '店铺满减',
                    icon: require('../../static/imgs/mine/dpmj.png'),
                    path: '/pages/activity/full-discounts'
                },
                // {
                //     id: 3,
                //     name: '广告位',
                //     icon: require('../../static/imgs/mine/ggw.png'),
                //     path: '/pages/activity/advertising'
                // },
                {
                    id: 4,
                    name: '霸王餐',
                    icon: require('../../static/imgs/mine/bwc.png'),
                    path: '/pages/activity/overlord-meal'
                },
				{
                    id: 5,
                    name: '新客立减设置',
                    icon: require('../../static/imgs/mine/new.png'),
                    path: '/pages/activity/new-customer'
                },
				{
                    id: 6,
                    name: '免配送费设置',
                    icon: require('../../static/imgs/mine/free.png'),
                    path: '/pages/activity/free-delivery'
                },
				{
                    id: 7,
                    name: '优惠券设置',
                    icon: require('../../static/imgs/mine/coupon.png'),
                    path: '/pages/activity/coupon-item'
                }
            ]
        }
    },
    methods: {
        handItem (item) {
            const list = ['special-item', 'coupon', 'advertising', 'overlord-meal', 'new-customer']
            uni.navigateTo({
                url: item.path
            });
        }
    },
    onLoad () {}
}
</script>
<style lang="scss" scoped>
.marketing-page {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    border-top: 2rpx solid #ECECEC;
}
.item {
    width: 250rpx;
    height: 250rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-right: 2rpx solid #ECECEC;
    border-bottom: 2rpx solid #ECECEC;
    box-sizing: border-box;
    .cover {
        width: 72rpx;
        height: 72rpx;
        margin-bottom: 10rpx;
    }
}
</style>