Client-Teapay/src/pages/index/index.vue

<template>
    <div class="Appindex">
        <!-- 顶部 -->
        <view class="head">
            <!-- 搜索框 -->
            <view class="head_search">
                <text class="iconfont">&#xe661;</text>
                <text class="search_text">请输入搜索关键字</text>
            </view>
            <!-- 搜索框-end -->
            <!-- 轮播图 -->
            <swiper-banner :radius="1" imgScale="5:2" :imgArr="BannerImg" :duration="1000" :interval="5000" :circular="true" :autoplay="true" @goList="goList" :indicator-dots="true" indicator-active-color="#12B280" indicator-color="rgba(255, 255, 255, .82)"></swiper-banner>
            <!-- 轮播图-end -->
            <!-- 公告 -->
            <view class="head_notice clearfix">
                <view class="notice_title">
                    <image class="gg_img" src="@/static/img/gg.png"></image>
                </view>
                <swiper class="notice_swiper" vertical autoplay circular :interval="5000" :duration="1000">
                    <swiper-item v-for="(item, index) in not_list" :key="index">
                        <text class="not_list ellipsis1">{{ item.contentTitle }}</text>
                        <text class="not_ico iconfont">&#xe62e;</text>
                    </swiper-item>
                </swiper>
            </view>
            <!-- 公告-end -->
            <!-- 金刚区 -->
            <view class="head_area">
                <view class="area_list" v-for="(item, index) in area_list" :key="index">
                    <image class="area_img" :src="item.url"></image>
                    <view class="area_name">{{ item.name }}</view>
                </view>
            </view>
            <!-- 金刚区-end -->
            <!-- 活动 -->
            <view class="activity" v-if="spc_list.length > 0">
                <image class="act_one_img" :src="spc_list[0].url" mode=""></image>
                <view class="act_other">
                    <image class="act_two_img" :src="spc_list[1].url" mode=""></image>
                    <image class="act_two_img" :src="spc_list[2].url" mode=""></image>
                </view>
            </view>
            <!-- 活动-end -->
        </view>
        <goodslist :url="goodslistUrl" :long="1" />
    </div>
</template>
<script>
import goodslist from "@/components/goodsList"; //商品列表
import swiperBanner from "@/components/swiperBanner"; //轮播
import { get, post } from "@/request/api.js";
export default {
    name: "Appindex",
    components: {
        goodslist, //商品列表
        swiperBanner, //轮播
    },
    data() {
        return {
            BannerImg: [], // 轮播图列表
            not_list: [], // 公告列表
            area_list: [], // 金刚区
            spc_list: [], //活动列表
            goodslistUrl: "ShuZiTeaYW/shop/getGoodsLikeByUserId", //首页商品列表
        };
    },
    onLoad(option) {
        this.getBanner(); //获取轮播图
        this.getAnnounce(); //获取公告列表
        this.getImageTwo(); //金刚区
        this.getImage(); //获取活动列表
    },
    onLaunch() {},
    onShow() {},
    onHide() {},
    methods: {
        // 获取轮播图
        getBanner() {
            post("ShuZiTeaYW/shop/play").then((res) => {
                if (res.status == 200) {
                    this.BannerImg = res.list;
                }
            });
        },
        // 获取公告列表
        getAnnounce() {
            post("ShuZiTeaYW/announce/getAnnounce", {
                status: 2,
            }).then((res) => {
                if (res.status == 200) {
                    this.not_list = res.announce;
                }
            });
        },
        // 获取公告列表
        getAnnounce() {
            post("ShuZiTeaYW/announce/getAnnounce", {
                status: 2,
            }).then((res) => {
                if (res.status == 200) {
                    this.not_list = res.announce;
                }
            });
        },
        // 获取金刚区列表
        getImageTwo() {
            post("ShuZiTeaSpecial/special/imageTwo").then((res) => {
                if (res.status == 200) {
                    this.area_list = res.data;
                }
            });
        },
        // 获取活动区列表
        getImage() {
            post("ShuZiTeaSpecial/special/image").then((res) => {
                if (res.status == 200) {
                    this.spc_list = res.data;
                }
            });
        },
        // 轮播图跳转
        goList: function(e) {
            let id = e.id;
            uni.navigateTo({
                url: "/pages/prefecture-list/index?id=" + id + "&type=1",
            });
        },
    },
    computed: {},
    watch: {},
};
</script>
<style scoped lang='scss'>
.head {
    padding: 12rpx 28rpx;
}

.head_search {
    width: 100%;
    height: 64rpx;
    line-height: 64rpx;
    background: #f3f5f7;
    border-radius: 32rpx;
    text-align: center;
    font-size: 28rpx;
    color: #bbbbbb;
    margin-bottom: 26rpx;

    .search_text {
        margin-left: 14rpx;
    }
}

.head_notice {
    margin: 30rpx 0;

    .notice_title {
        width: 130rpx;
        height: 40rpx;
        float: left;

        .gg_img {
            width: 100%;
            height: 40rpx;
        }
    }

    .notice_swiper {
        height: 40rpx;
        padding-left: 20rpx;
        font-size: 28rpx;
        float: left;
        box-sizing: border-box;
        width: calc(100% - 130rpx);

        .not_list {
            width: calc(100% - 50rpx);
        }

        .not_ico {
            width: 30rpx;
            font-size: 28rpx;
            color: #999;
        }

        .not_list,
        .not_ico {
            display: inline-block;
            vertical-align: middle;
            height: 40rpx;
            line-height: 40rpx;
        }
    }
}

// 金刚区
.head_area {
    margin: 20rpx 0 20rpx;
    padding: 20rpx 0;
    border-radius: 18rpx;
    box-shadow: 2px 2px 13px 1px rgba(17, 18, 29, 0.08);

    .area_list {
        display: inline-block;
        width: 25%;
        text-align: center;

        .area_img {
            width: 46rpx;
            height: 46rpx;
            margin-bottom: 12rpx;
        }

        .area_name {
            font-size: 24rpx;
            color: #474747;
        }
    }
}

// 金刚区-end

// 活动
.activity {
    .act_one_img {
        display: inline-block;
        width: 300rpx;
        height: 378rpx;
        margin-right: 10rpx;
    }

    .act_other {
        display: inline-block;
        width: calc(100% - 300rpx - 10rpx);
    }

    .act_two_img {
        width: 100%;
        height: 185rpx;
    }
}

// 活动-end
</style>