<template>
    <app-layout title="其他服务">
        <view class="common-service-nav-group">
            <text class="section-title">其他服务</text>
            <view class="group g1">
                <view class="service-item" v-for="(item, index) in list" :key="index" @click="toPage(item.page)">
                    <image class="service-icon" :src="item.cover" mode="scaleToFill" />
                    <text class="service-name limit-line clamp-1">
                        {{ item.name }}
                    </text>
                </view>
            </view>
        </view>
    </app-layout>
</template>

<script>
import AppLayout from "@/components/layout/layout";
export default {
    name: "service-other",
    data() {
        return {
            list: [],
        };
    },
    components: {
        AppLayout,
    },
    onLoad() {
        this.$models.system.navList().then((list) => {
            this.list = list.other;
        });
    },
    onShow() {},
    onReady() {},
    onReachBottom() {},
    onPullDownRefresh() {},
    onShareTimeline() {},
    onShareAppMessage() {},
    methods: {
        /**
         * 跳转
         */
        toPage(page) {
            const params = this.$utils.getUrlParams(page);
            if (page.indexOf("service/cate") > 0) {
                this.$store.commit("system/currentCateId", params.id);
                this.$utils.toPage(page, {}, "switch");
            } else if (
                page.indexOf("other/after-market") > 0 ||
                page.indexOf("order/order") > 0 ||
                page.indexOf("member/member") > 0
            ) {
                this.$utils.toPage(page, {}, "switch");
            } else {
                this.$utils.toPage(page);
            }
        },
    },
};
</script>

<style lang="less" scoped>
.common-service-nav-group {
    width: 710rpx;
    padding: 40rpx 20rpx;
    box-sizing: border-box;
    margin: 0 auto;
    background-color: #ffffff;
    border: 0;
}
</style>