You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
486 lines
12 KiB
486 lines
12 KiB
<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="homeData.restaurant.icon" 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.title}}</text>
|
|
<!-- <text class="notice-desc">{{homeData.restaurant.tag}}</text> -->
|
|
</view>
|
|
|
|
<!-- 标签列表 -->
|
|
<view class="tag-list">
|
|
<view class="tag" v-for="(tag, index) in homeData.restaurant.tag.split('、')" :key="index">{{tag}}</view>
|
|
</view>
|
|
|
|
<!-- 价格区间 -->
|
|
<view class="price-range">
|
|
<text class="price">{{homeData.restaurant.price}}</text>
|
|
</view>
|
|
|
|
<!-- 产品展示 -->
|
|
<scroll-view scroll-x class="food-scroll">
|
|
<view class="food-item" v-for="food in homeData.goodsList" :key="food.categoryId" @click="goGoodsDetail">
|
|
<image :src="food.image" mode="aspectFill" class="food-image" />
|
|
<view class="food-detail">
|
|
<view class="food-name">{{food.title}}</view>
|
|
<view class="food-desc">{{food.categoryId_dictText}}</view>
|
|
<view class="food-price">
|
|
<text class="current-price">¥{{food.price}}</text>
|
|
<text class="original-price">¥{{food.price + 10}}</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.hanHaiMember.id).substring(0, 3) + '****' + (order.hanHaiMember.id).substring(6, 9) }}</view>
|
|
<view class="order-user">
|
|
<image :src="order.hanHaiMember.headImage" mode="aspectFill" class="user-avatar" />
|
|
<text class="user-name">{{ order.hanHaiMember.nickName }}</text>
|
|
<text class="order-time">
|
|
{{
|
|
order.updateTime ?
|
|
$timeUtils.formatTime($dayjs(order.updateTime).valueOf()) :
|
|
$timeUtils.formatTime($dayjs(order.createTime).valueOf())
|
|
}}
|
|
</text>
|
|
</view>
|
|
<view class="order-content">
|
|
<text class="order-desc">{{ order.goodsList[0].goods.title }}</text>
|
|
<text class="order-count">+{{ order.goodsList[0].num }}</text>
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<tabbar select="index" />
|
|
<NewCouponPopup />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import navbar from '@/components/base/navbar.vue'
|
|
import tabbar from '@/components/base/tabbar.vue'
|
|
import { homeData } from '@/static/js/mockHomeData.js'
|
|
import NewCouponPopup from '@/components/couponPopup/newCouponPopup.vue'
|
|
|
|
export default {
|
|
components: {
|
|
navbar,
|
|
tabbar,
|
|
NewCouponPopup
|
|
},
|
|
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
|
|
}
|
|
]
|
|
}
|
|
},
|
|
onShow() {
|
|
this.getBannerList()
|
|
this.getInfoList()
|
|
this.getGoodsList()
|
|
this.getRollList()
|
|
},
|
|
methods: {
|
|
getBannerList() {
|
|
this.$api('queryBannerList', {
|
|
type: '0'
|
|
}, res => {
|
|
if (res.code == 200) {
|
|
this.homeData.banners = res.result.records
|
|
}
|
|
})
|
|
},
|
|
getInfoList() {
|
|
this.$api('queryInfoList', {}, res => {
|
|
if (res.code == 200) {
|
|
this.homeData.restaurant = res.result.records[0]
|
|
}
|
|
})
|
|
},
|
|
getGoodsList() {
|
|
this.$api('queryGoodsList', {
|
|
pageNo: 1,
|
|
pageSize: 5
|
|
}, res => {
|
|
if (res.code == 200) {
|
|
this.$set(this.homeData, 'goodsList', res.result.records)
|
|
}
|
|
})
|
|
},
|
|
getRollList() {
|
|
this.$api('rollList', { }, res => {
|
|
if (res.code == 200) {
|
|
this.orderList = res.result.records
|
|
}
|
|
})
|
|
},
|
|
goGoodsDetail() {
|
|
uni.navigateTo({
|
|
url: '/pages/index/category'
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</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: 160rpx;
|
|
height: 160rpx;
|
|
}
|
|
|
|
.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>
|