yihuo/pages/center/fun.vue

<template>
    <view class="wrapper">
        <text class="marginL15 bold font4" v-if="title">{{ title }}</text>
        <template v-if="$common.isArray(list[0])">
            <view
                v-for="(superItem, index) in list"
                :key="index"
                class="flex-align-around paddingT18"
            >
                <view
                    v-for="item in superItem"
                    :key="item.title"
                    class="flex-column-align-center flex1 self-stretch"
                >
                    <button
                        v-if="item.type !== '4_6'"
                        class="btn-clear flex-column-align-center"
                        @click="showNext(item.type)"
                    >
                        <image
                            class="image-1"
                            :src="item.icon"
                            :style="{
                                width: (item.width || 70) + 'rpx',
                                height: (item.height || 70) + 'rpx'
                            }"
                        />
                        <text
                            :class="[item.font || 'font2']"
                            style="color: #fff"
                            :style="{ marginTop: (item.top || 20) + 'rpx' }"
                        >
                            {{ item.title }}
                        </text>
                        <!-- <text class="marginT4" :class="[item.font || 'font1']" style="color: #eee">
                            {{ item.tip }}
                        </text> -->
                    </button>
                    <view v-else class="group-btn-wrapper flex-column-align-center">
                        <view class="flex-column-align-center" style="pointer-events: none">
                            <image
                                class="image-1"
                                :src="item.icon"
                                :style="{
                                    width: (item.width || 70) + 'rpx',
                                    height: (item.height || 70) + 'rpx'
                                }"
                            />
                            <text
                                :class="[item.font || 'font2']"
                                style="color: #eee"
                                :style="{ marginTop: (item.top || 20) + 'rpx' }"
                            >
                                {{ item.title }}
                            </text>
                            <!-- <text
                                class="marginT4"
                                :class="[item.font || 'font1']"
                                style="color: #eee"
                            >
                                {{ item.tip }}
                            </text> -->
                        </view>
                        <cell
                            class="group-btn"
                            url="https://work.weixin.qq.com/gm/140cdeace2d2c03b35d693b1b755b815"
                        />
                    </view>
                </view>
            </view>
        </template>
        <view v-else class="flex-align-around" :class="{ paddingT12: !!title }">
            <view
                v-for="item in list"
                :key="item.title"
                class="flex-column-align-center flex1"
                @click="showNext(item.type)"
            >
                <image
                    class="image-1"
                    :src="item.icon"
                    :style="{
                        width: (item.width || 70) + 'rpx',
                        height: (item.height || 70) + 'rpx'
                    }"
                />
                <text
                    :class="[item.font || 'font2']"
                    :style="{ marginTop: (item.top || 20) + 'rpx' }"
                >
                    {{ item.title }}
                </text>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        title: {
            type: String,
            default: ''
        },
        list: {
            type: Array,
            default: []
        }
    },
    methods: {
        showNext(type) {
            switch (type) {
                case '1_1':
                    this.$router.pushCheck('wallet')
                    break
                case '1_2':
                    this.$router.pushCheck('coupon')
                    break
                case '1_3':
                    this.$router.pushCheck('magic')
                    break
                case '2_1':
                    this.$router.pushCheck('order_product', { active: 1 })
                    break
                case '2_2':
                    this.$router.pushCheck('order_product', { active: 4 })
                    break
                case '2_3':
                    this.$router.pushCheck('order_product', { active: 5 })
                    break
                case '2_4':
                    this.$router.pushCheck('order_product', { active: 6 })
                    break
                case '3_1':
                    this.$router.pushCheck('order_award')
                    break
                case '3_2':
                    this.$router.pushCheck('order_award', { active: 1 })
                    break
                case '3_3':
                    this.$router.pushCheck('store')
                    break
                case '4_1':
                    this.$router.pushCheck('message')
                    break
                case '4_2':
                    this.$message.alert('敬请期待')
                    break
                case '4_3':
                    this.$router.pushCheck('address')
                    break
                case '4_4':
                    this.$common.showKefu()
                    break
                case '4_5':
                    this.$router.push('setting')
                    break
                case '4_6':
                    const url =
                        'https://mp.weixin.qq.com/s?__biz=MzkwNjM5ODU2OA==&mid=2247483714&idx=1&sn=c122646c1874cad5161b76bc89a0f160&chksm=c0e85f45f79fd653de84a4392b5be0a5b9daceeb012f0610f174f843c928c8eeeaf49721ac4d#rd'
                    this.$router.web(url, '领福利')
                    break
                case '4_7':
                    this.$emit('showVip')
                    break
                case '4_8':
                    this.$router.push('sell')
                    break
                case '4_9':
                    this.$router.pushCheck('feedback')
                    break
                case '5_0':
                    this.$router.pushCheck('pull_new_user')
                    break
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.wrapper {
    border-radius: 20rpx;
    background: rgba(23, 17, 35, 0.7);
    margin: 20rpx 28rpx 0;
    padding: 24rpx 0;
    color: #ffffff;
    .image-1 {
        width: 92rpx;
        height: 92rpx;
    }
    .group-btn-wrapper {
        width: 180rpx;
        position: relative;
        overflow: hidden;
        .group-btn {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background: #363748;
            opacity: 0;
        }
    }
}
</style>