yihuo/pages/center/cell.vue

<template>
    <view class="cu-list menu menuBox">
        <view
            class="cu-item arrow"
            v-for="item in list"
            :key="item.title"
            @click="showNext(item.type)"
        >
            <view class="content">
                <image :src="item.icon" class="png" mode="aspectFit"></image>
                <text class="text">{{ item.title }}</text>
            </view>
        </view>
    </view>
</template>

<script>
    import ossurl from '@/utils/ossurl'
    export default {
        props: {
            title: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
                ossurl,
                list: [
                    {
                        icon: ossurl.mine.customerService,
                        title: '联系客服',
                        tip: '10:00 ~ 18:00',
                        type: '4_4'
                    },
                    {
                        icon: ossurl.mine.address,
                        title: '地址',
                        type: '4_3'
                    },

                    {
                        icon: ossurl.mine.opinion,
                        title: '意见反馈',
                        type: '4_9'
                    },
                    {
                        icon: ossurl.mine.setting,
                        title: '设置',
                        type: '4_5'
                    }
                ]
            }
        },
        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=MzkzMTU2ODM4MQ==&mid=2247483660&idx=1&sn=8bcb7472d42f0b18740049b90d575280&chksm=c2684e9ef51fc78843380380135f6f780c63352ee0f455c48ceef489e538d78dc58f57cbcca9#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>
    .menuBox {
        padding: 12rpx 0;
        border-radius: 16rpx;
        background-color: #fff;
        margin-top: 20rpx;
    }
    .cu-list {
        .cu-item {
            min-height: 96rpx;
            &::after {
                border-color: rgba(0, 0, 0, 0.05);
            }
            .content {
                display: flex;
                align-items: center;
                width: 30rpx;
                font-size: 28rpx;
                .text {
                    font-size: 28rpx;
                    font-family: Source Han Sans, Source Han Sans;
                    font-weight: 350;
                    color: #000000;
                }
                .png {
                    height: 48rpx;
                    width: 48rpx;
                    margin-right: 16rpx;
                }
            }
        }
    }
</style>