288 lines
8.6 KiB
Vue
288 lines
8.6 KiB
Vue
<template>
|
|
<app-layout headerBackgroundColor="#ffffff" backgroundColor="#ffffff" textColor="dark" btnType="city" title="熊熊安装队">
|
|
<view class="search-component" @click="utils.toPage('/pages/service/cate', {}, 'switch')">
|
|
<widget-search :disabled="true" backgroundColor="#f6f6f6" />
|
|
</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 g1">
|
|
<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 g4">
|
|
<view class="group g4">
|
|
<view class="service-item" @click="toPage(distribution.page)">
|
|
<image class="service-icon" :src="distribution.cover" mode="aspectFill" />
|
|
</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: [],
|
|
distribution: {
|
|
cover: require("@/static/temp/index/b3.png"),
|
|
page: "/pages/service/other/distribution",
|
|
},
|
|
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;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.banner {
|
|
width: 100%;
|
|
height: 283rpx;
|
|
margin: 0 auto;
|
|
background-color: #f6f6f6;
|
|
}
|
|
.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;
|
|
}
|
|
.common-service-nav-group {
|
|
.group.g2 {
|
|
.service-item {
|
|
width: 100rpx;
|
|
margin-top: 40rpx;
|
|
margin-right: 42.5rpx;
|
|
}
|
|
.service-icon {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
}
|
|
.service-item:nth-child(5n) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
.group.g3 {
|
|
.service-item {
|
|
width: 320rpx;
|
|
height: auto;
|
|
margin-top: 40rpx;
|
|
margin-right: 30rpx;
|
|
}
|
|
.service-icon {
|
|
width: 320rpx;
|
|
height: 160rpx;
|
|
}
|
|
.service-item:nth-child(2n) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
.common-service-nav-group.g4 {
|
|
margin: 10rpx auto 0 auto;
|
|
padding-bottom: 0;
|
|
border-bottom: 0;
|
|
.group.g4 {
|
|
.service-item {
|
|
width: 100%;
|
|
}
|
|
.service-icon {
|
|
width: 618rpx;
|
|
height: 150rpx;
|
|
}
|
|
}
|
|
}
|
|
</style> |