teambuy-front/pages/index/index.vue

<template>
    <view class="page">
        <navbar title="首页" bgColor="#019245" color="#fff" />

        <!-- 内容区域 -->
        <view class="content">
            <!-- 轮播图 -->
            <swiper class="banner-swiper" circular  autoplay>
                <swiper-item v-for="item in homeData.banners" :key="item.id">
                    <image :src="item.image" mode="aspectFill" class="banner-image" />
                </swiper-item>
            </swiper>

            <!-- 店铺信息 -->
            <view class="restaurant-info">
                <div class="restaurant-logo">
                    <image :src="configList.config_logo" mode="aspectFill" style="width: 100%; height: 100%;" />
                </div>
                <view class="restaurant-name">{{homeData.restaurant.name}}</view>
                <!-- <view class="service-btns">
                    <view class="service-btn">
                        <text>客服</text>
                    </view>
                    <view class="order-btn">
                        <text>订阅</text>
                    </view>
                </view> -->
            </view>

            <!-- 商店内容区域 -->
            <view class="shop-content">

                <!-- 产品标签页 -->
                <view class="product-tabs">

                    <!-- 公告信息 -->
                    <view class="notice">
                        <text class="notice-text">{{homeData.restaurant.notice}}</text>
                        <text class="notice-desc">{{homeData.restaurant.description}}</text>
                    </view>

                    <!-- 标签列表 -->
                    <view class="tag-list">
                        <view class="tag" v-for="(tag, index) in homeData.tags" :key="index">{{tag}}</view>
                    </view>

                    <!-- 价格区间 -->
                    <view class="price-range">
                        <text class="price">{{homeData.priceRange}}</text>
                    </view>

                    <!-- 产品展示 -->
                    <scroll-view scroll-x class="food-scroll">
                        <view class="food-item" v-for="food in homeData.foods" :key="food.id">
                            <image :src="food.image" mode="aspectFill" class="food-image" />
                            <view class="food-detail">
                                <view class="food-name">{{food.name}}</view>
                                <view class="food-desc">{{food.desc}}</view>
                                <view class="food-price">
                                    <text class="current-price">¥{{food.price}}</text>
                                    <text class="original-price">¥{{food.originalPrice}}</text>
                                </view>
                            </view>
                        </view>
                    </scroll-view>
                </view>

            </view>

            <!-- 跟团部分 -->
            <view class="group-purchase">
                <view class="group-order-list">
                    <swiper  vertical autoplay circular interval="3000" duration="500"
                        display-multiple-items="3">
                        <swiper-item v-for="(order, index) in orderList" :key="index">
                            <view class="order-item">
                                <view class="order-id">{{ order.id }}</view>
                                <view class="order-user">
                                    <image :src="order.avatar" mode="aspectFill" class="user-avatar" />
                                    <text class="user-name">{{ order.userName }}</text>
                                    <text class="order-time">{{ order.time }}</text>
                                </view>
                                <view class="order-content">
                                    <text class="order-desc">{{ order.content }}</text>
                                    <text class="order-count">+{{ order.count }}</text>
                                </view>
                            </view>
                        </swiper-item>
                    </swiper>
                </view>
            </view>
        </view>

        <tabbar select="index" />
    </view>
</template>

<script>
import navbar from '@/components/base/navbar.vue'
import tabbar from '@/components/base/tabbar.vue'
import { homeData } from '@/static/js/mockHomeData.js'

export default {
    components: {
        navbar,
        tabbar
    },
    data() {
        return {
            homeData: homeData,
            orderList: [
                {
                    id: 19141,
                    userName: '3**',
                    avatar: '/static/image/中森明菜.webp',
                    time: '1分钟前',
                    content: '【单点】小炒黄牛肉...',
                    count: 1
                },
                {
                    id: 19145,
                    userName: 'B**',
                    avatar: '/static/image/中森明菜.webp',
                    time: '1分钟前',
                    content: '黑椒肥牛饭(1份)',
                    count: 1
                },
                {
                    id: 19144,
                    userName: '吃**',
                    avatar: '/static/image/中森明菜.webp',
                    time: '1分钟前',
                    content: '【单点】黑盒220g...',
                    count: 1
                },
                {
                    id: 19143,
                    userName: 'L**',
                    avatar: '/static/image/中森明菜.webp',
                    time: '2分钟前',
                    content: '红烧肉套餐(1份)',
                    count: 2
                },
                {
                    id: 19142,
                    userName: '美**',
                    avatar: '/static/image/中森明菜.webp',
                    time: '3分钟前',
                    content: '【单点】小炒肉(1份)',
                    count: 1
                }
            ]
        }
    }
}
</script>

<style lang="scss" scoped>
.content {
    flex: 1;
    background: linear-gradient(to bottom, #fff, #f5f5f5);
    // padding-bottom: 120rpx;
}

.banner-swiper {
    width: 100%;
    height: 350rpx;
    position: relative;
    z-index: 1;
}

.banner-image {
    width: 100%;
    height: 100%;
}

.restaurant-info {
    display: flex;
    align-items: center;
    padding: 20rpx;
    margin-top: -30rpx;
    max-height: 60rpx;
    border-radius: 20rpx 20rpx 0 0;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    position: relative;
    z-index: 2;
}

.restaurant-logo {
    width: 130rpx;
    height: 130rpx;
    border-radius: 20rpx;
    margin-right: 20rpx;
    margin-top: -60rpx;
    overflow: hidden;
    border: 4rpx solid #eee;
}

.restaurant-name {
    flex: 1;
    font-size: 32rpx;
    font-weight: 500;
}

.service-btns {
    display: flex;
}

.service-btn, .order-btn {
    padding: 8rpx 20rpx;
    border-radius: 30rpx;
    font-size: 24rpx;
    margin-left: 10rpx;
}

.service-btn {
    border: 1px solid #ccc;
    color: #666;
}

.order-btn {
    background-color: #4cd964;
    color: #fff;
}

.shop-content {
    margin-top: 0;
    padding: 20rpx;
    position: relative;
    z-index: 2;
}

/* 产品标签页 */
.product-tabs {
    // border: 2rpx solid red;
    background-color: #fff;
    border-radius: 20rpx;
    margin-bottom: 10rpx;
    padding: 20rpx;
    box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
}

.notice {
    margin-bottom: 15rpx;
}

.notice-text {
    font-size: 32rpx;
    font-weight: bold;
    margin-right: 10rpx;
    max-width: 80%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

.notice-desc {
    font-size: 24rpx;
    color: #999;
    background-color: #f5f5f5;
    padding: 4rpx 10rpx;
    border-radius: 4rpx;
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 15rpx;
}

.tag {
    font-size: 24rpx;
    color: $uni-color-second;
    border: 1px solid #ffcccc;
    padding: 4rpx 12rpx;
    border-radius: 4rpx;
    margin-right: 10rpx;
    margin-bottom: 10rpx;
}

.price-range {
    margin-bottom: 20rpx;
}

.price {
    font-size: 36rpx;
    color: $uni-color-second;
    font-weight: bold;
}

.food-scroll {
    white-space: nowrap;
}

.food-item {
    display: inline-block;
    width: 300rpx;
    margin-right: 20rpx;
    background-color: #fff;
    border-radius: 10rpx;
    overflow: hidden;
    box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}

.food-image {
    width: 140rpx;
    height: 140rpx;
}

.food-detail {
    padding: 10rpx;
}

.food-name {
    font-size: 28rpx;
    font-weight: bold;
    margin-bottom: 5rpx;
}

.food-desc {
    font-size: 24rpx;
    color: #999;
    margin-bottom: 5rpx;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.food-price {
    display: flex;
    align-items: baseline;
}

.current-price {
    font-size: 28rpx;
    color: $uni-color-second;
    font-weight: bold;
    margin-right: 10rpx;
}

.original-price {
    font-size: 24rpx;
    color: #999;
    text-decoration: line-through;
}

.group-purchase {
    background-color: #fff;
    border-radius: 20rpx;
    margin: 0rpx 20rpx 30rpx 20rpx;
    padding:  30rpx 20rpx;
    box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
}

.group-order-list {
    // height: 330rpx;
    overflow: hidden;
}

.order-item {
    display: flex;
    padding: 10rpx;
    border-bottom: 1rpx solid #f2f2f2;
    align-items: center;
    justify-content: space-between;
}

.order-id {
    // flex: 1;
    font-size: 26rpx;
    color: #999;
    margin-right: 10rpx;
    // display: inline-block;
}

.order-user {
    flex: 1;
    display: flex;
    align-items: center;
    width: 140rpx;
}

.user-avatar {
    width: 54rpx;
    height: 54rpx;
    border-radius: 6rpx;
    margin-right: 10rpx;
}

.user-name {
    font-size: 26rpx;
    color: black;
}

.order-time {
    font-size: 24rpx;
    color: #999;
    margin-left: 10rpx;
}

.order-content {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    // margin-left: 10rpx;
    
}

.order-desc {
    font-size: 28rpx;
    color: #333;
    font-weight: bold;
    max-width: 88%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 10rpx;
}

.order-count {
    font-size: 28rpx;
    color: $uni-color-second;
    // font-weight: bold;
}
</style>