210 lines
6.2 KiB
Vue
210 lines
6.2 KiB
Vue
<template>
|
|
<app-layout headerBackgroundColor="#4B65ED" textColor="light" btnType="city" title="熊熊安装队">
|
|
<view class="search-component">
|
|
<widget-search />
|
|
</view>
|
|
<view class="banner">
|
|
<app-banner :list="bannerList" />
|
|
</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">
|
|
<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="utils.toPage(item.page)"
|
|
>
|
|
<image class="service-icon" :src="item.icon" mode="scaleToFill" />
|
|
<text class="service-name limit-line clamp-1">
|
|
{{ item.title }}
|
|
</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="utils.toPage(item.page)"
|
|
>
|
|
<image class="service-icon" :src="item.icon" mode="scaleToFill" />
|
|
<text class="service-name limit-line clamp-1">
|
|
{{ item.title }}
|
|
</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.icon" mode="scaleToFill" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</app-layout>
|
|
</template>
|
|
|
|
<script>
|
|
import AppLayout from "@/components/layout/layout";
|
|
import AppBanner from "@/components/banner/banner";
|
|
import WidgetSearch from "@/components/widgets/search";
|
|
export default {
|
|
name: "index",
|
|
data() {
|
|
return {
|
|
utils: this.$utils,
|
|
bannerList: [],
|
|
notifyList: [],
|
|
installServiceList: [],
|
|
aftermarketServiceList: [],
|
|
bussinessServiceList: [
|
|
{
|
|
id: 14,
|
|
icon: require("@/static/temp/index/b1.png"),
|
|
title: "工程安装",
|
|
page: "/pages/service/other/project",
|
|
},
|
|
{
|
|
id: 15,
|
|
icon: require("@/static/temp/index/b2.png"),
|
|
title: "企业合作安装",
|
|
page: "/pages/service/other/business",
|
|
},
|
|
],
|
|
};
|
|
},
|
|
components: {
|
|
AppLayout,
|
|
AppBanner,
|
|
WidgetSearch,
|
|
},
|
|
onLoad() {
|
|
// 轮播
|
|
this.$request({
|
|
api: "index.banner",
|
|
}).then((response) => {
|
|
response.data.forEach((item) => {
|
|
this.bannerList.push({
|
|
image: item.image,
|
|
});
|
|
});
|
|
});
|
|
// 公告
|
|
this.$request({
|
|
api: "index.notify",
|
|
}).then((response) => {
|
|
this.notifyList = [
|
|
{
|
|
title: response.data.message,
|
|
},
|
|
];
|
|
});
|
|
// 服务
|
|
this.$request({
|
|
api: "service.cate",
|
|
}).then((response) => {
|
|
response.data.forEach((item) => {
|
|
this.installServiceList.push({
|
|
id: item.id,
|
|
title: item.name,
|
|
icon: item.more,
|
|
page: "",
|
|
});
|
|
});
|
|
});
|
|
this.$request({
|
|
api: "service.aftermarket",
|
|
}).then((response) => {
|
|
response.data.forEach((item) => {
|
|
this.aftermarketServiceList.push({
|
|
id: item.id,
|
|
title: item.name,
|
|
icon: item.more,
|
|
page: "",
|
|
});
|
|
});
|
|
});
|
|
},
|
|
onShow() {},
|
|
onReady() {},
|
|
onReachBottom() {},
|
|
onPullDownRefresh() {},
|
|
methods: {},
|
|
};
|
|
</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;
|
|
}
|
|
}
|
|
}
|
|
</style> |