xx-applets/src/pages/index/index.vue

<template>
    <app-layout headerBackgroundColor="#4B65ED" textColor="light" btnType="city" title="熊熊安装队">
        <view class="search-component" @click="utils.toPage('/pages/service/cate', {}, 'switch')">
            <widget-search :disabled="true" />
        </view>
        <view class="banner">
            <app-banner :list="bannerList" @clickItem="clickBanner" />
        </view>
        <view class="notify">
            <view class="icon">
                <text class="iconfont icon-gonggao"></text>
            </view>
            <view class="slide-box">
                <swiper
                    class="notify-swiper"
                    circular
                    :indicator-dots="false"
                    :autoplay="true"
                    :vertical="true"
                    interval="3000"
                    duration="1000"
                >
                    <swiper-item v-for="(item, index) in notifyList" :key="index" @click="notifyDetail(item)">
                        <view class="swiper-item notify-item">
                            <text class="limit-line clamp-1">
                                {{ item.title }}
                            </text>
                        </view>
                    </swiper-item>
                </swiper>
            </view>
        </view>
        <view class="common-service-nav-group">
            <text class="section-title">建材安装服务</text>
            <view class="group g1">
                <view class="service-item" v-for="(item, index) in installServiceList" :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>
        <view class="common-service-nav-group">
            <text class="section-title">维修售后服务</text>
            <view class="group g2">
                <view
                    class="service-item"
                    v-for="(item, index) in aftermarketServiceList"
                    :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>
        <view class="common-service-nav-group">
            <text class="section-title">工程企业服务</text>
            <view class="group g3">
                <view
                    class="service-item"
                    v-for="(item, index) in bussinessServiceList"
                    :key="index"
                    @click="utils.toPage(item.page)"
                >
                    <image class="service-icon" :src="item.cover" mode="scaleToFill" />
                </view>
            </view>
        </view>
        <widget-modal v-show="showNotifyModal" @close="showNotifyModal = false" :title="notify.title">
            <view class="message-box">
                <rich-text :nodes="notify.content"></rich-text>
            </view>
        </widget-modal>
    </app-layout>
</template>

<script>
import AppLayout from "@/components/layout/layout";
import AppBanner from "@/components/banner/banner";
import WidgetSearch from "@/components/widgets/search";
import WidgetModal from "@/components/widgets/modal";
export default {
    name: "index",
    data() {
        return {
            utils: this.$utils,
            bannerList: [],
            notifyList: [],
            showNotifyModal: false,
            notify: {
                title: "",
                content: "",
            },
            installServiceList: [],
            aftermarketServiceList: [],
            bussinessServiceList: [
                {
                    id: 14,
                    cover: require("@/static/temp/index/b1.png"),
                    name: "工程安装",
                    page: "/pages/service/other/project",
                },
                {
                    id: 15,
                    cover: require("@/static/temp/index/b2.png"),
                    name: "企业合作安装",
                    page: "/pages/service/other/business",
                },
            ],
        };
    },
    components: {
        AppLayout,
        AppBanner,
        WidgetSearch,
        WidgetModal,
    },
    onLoad() {
        // 首页轮播
        this.$request({
            api: "index.banner",
        }).then((response) => {
            this.bannerList = [];
            response.data.forEach((item) => {
                this.bannerList.push({
                    image: item.image,
                    page: item.url,
                });
            });
        });
        // 系统公告
        this.$models.system.notifyList().then((list) => {
            this.notifyList = list;
        });
        // 导航
        this.$models.system.navList().then((list) => {
            this.installServiceList = list.install;
            this.aftermarketServiceList = list.aftermarket;
        });
    },
    onShow() {},
    onReady() {},
    onReachBottom() {},
    onPullDownRefresh() {},
    onShareTimeline() {},
    onShareAppMessage() {},
    methods: {
        /**
         * 点击轮播
         */
        clickBanner(e) {
            this.toPage(e.page);
        },
        /**
         * 跳转
         */
        toPage(page) {
            if (!page) return;
            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);
            }
        },
        /**
         * 公告详情
         */
        notifyDetail(detail) {
            this.showNotifyModal = true;
            this.notify.title = detail.title;
            this.notify.content = detail.content;
        },
    },
};
</script>

<style lang="less" scoped>
.search-component {
    width: 100%;
    height: 100rpx;
    background-color: #4b65ed;
    display: flex;
    align-items: center;
    justify-content: center;
}
.banner {
    width: 100%;
    height: 283rpx;
    margin: 0 auto;
    background-color: #4b65ed;
}
.notify {
    width: 670rpx;
    height: auto;
    display: flex;
    margin: 27rpx auto 0 auto;
    line-height: 63rpx;
    .icon {
        width: 80rpx;
        text-align: center;
        font-size: 40rpx;
        color: #f9b060;
    }
    .slide-box {
        width: 590rpx;
        .notify-swiper {
            display: block;
            width: 100%;
            height: 100%;
        }
        .notify-item {
            font-size: 24rpx;
            color: #6a6a6a;
        }
    }
}
.message-box {
    max-height: 400rpx;
    overflow-y: scroll;
}
</style>