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.
 
 
 
 
 

797 lines
19 KiB

<template>
<!-- 拼团页 -->
<view class="page1">
<view class="title">
<view class="title-sreach">
<view class="back-btn" @tap="back" :style="{'padding-top': menuButtonInfo.top +'px'}">
<uni-icons type="left" size="28"></uni-icons>
</view>
<view class="title-name" :style="{'padding-top': menuButtonInfo.top +'px'}">
代买饭
</view>
<view class="title-search" :style="{'margin-top': menuButtonInfo.top +'px'}" @tap="goDetail('search')">
<uni-icons type="search" size="18" style="margin: 9rpx;"></uni-icons>
<input type="text" placeholder="搜索" disabled />
</view>
</view>
<view class="title-tab">
<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
:interval="interval" :duration="duration">
<swiper-item>
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/1d1edcc3e39c4a7cafeb64cf3209ed5e.png"
alt="" />
</swiper-item>
</swiper>
</view>
<view class="menu-box">
<view class="menu-list" v-for="(item,index) in menuBtn" :key="index" @tap="goDetail('search',item)">
<img :src="item.url" alt="" />
<view class="menu-name">{{item.name}}</view>
</view>
</view>
<view class="menu-box">
<view class="menu-list" v-for="(item,index) in menuBtn1" :key="index" @tap="goDetail('search',item)">
<img :src="item.url" alt="" />
<view class="menu-name">{{item.name}}</view>
</view>
</view>
<view class="title-sort">
<view class="sort-member">
<view class="sort-text" @tap="searchShop('all','')">
综合排序 <text style="font-size: 20rpx;">▼</text>
</view>
</view>
<view class="sort-member">
<view class="sort-text" @tap="searchShop('sale','')">
销量优先 <text style="font-size: 20rpx;">▼</text>
</view>
</view>
<view class="sort-member">
<view class="sort-text" @tap="searchShop('score','')">
评分优先 <text style="font-size: 20rpx;">▼</text>
</view>
</view>
<view class="sort-member" style="position: relative;">
<view class="sort-text" @tap="checkArea">
区域选择 <text style="font-size: 20rpx;">▼</text>
</view>
<view class="sort-value" v-if="isArea">
<view class="sort-value1" v-for="(item,index) in shopArea" :key="index"
@tap="searchShop('area',item.id)">{{item.title}}</view>
</view>
</view>
</view>
</view>
<view class="shop-list">
<view class="shop-member" v-for="(item,index) in shopList" :key="index" @tap="goDetail('shop',item)">
<view @tap.stop="buyingye" v-if="item.shopTakeaway.status != 0"
style="width: 100%;height:100%;position: absolute;top: 0;background: rgba(0, 0, 0, 0.4);z-index: 999;border-radius: 10px;">
</view>
<view class="shop-top">
<view class="shop-img">
<img :src="item.shopIcon" alt="">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/6c4ab92a43c842d8bb22035bce1f65cc.png"
alt=""
style="width:30rpx;height:30rpx;position: absolute;top: 0;left: 0;background-size: 100%;" />
</view>
<view class="shop-content">
<view class="shop-name">
{{item.shopName}}
</view>
<view class="shop-content-center">
<view class="shop-rate">
<view class="shop-rate-num">{{item.shopScore}}</view>
<view style="padding-top: 4rpx;">
<uni-rate :disabled="true" size="16" disabledColor="rgba(255, 184, 84, 1)"
:value="item.shopScore" />
</view>
</view>
<view class="shop-tag">
<text
style="padding: 4rpx 10rpx;background: rgba(223, 255, 176, 1);color: #777;border-radius: 6rpx;">
{{item.shopTypeTitle == undefined ? '美食' : item.shopTypeTitle}}
</text>
</view>
</view>
<view class="shop-content-bottom">
<view class="shop-deal">
<text v-if="item.subtitle != null"
style="padding: 4rpx 10rpx;background: rgba(223, 255, 176, 1);color: #777;border-radius: 6rpx;">
{{item.subtitle}}
</text>
</view>
<view class="shop-deal1">
已拼<text style="color: red;font-weight: 700;">
{{item.saleCount != null ? item.saleCount : 0}} </text>单
</view>
</view>
</view>
</view>
<view class="shop-bottom" v-if="item.products != null && item.products.length > 0">
<view class="menu-member" v-if='item1.isPush == 1 && item1.delFlag == 1'
v-for="(item1,index1) in item.products" :key="index1" @tap="goDetail('product',item1)">
<view class="menu-img">
<img :src="item1.productPicture" alt="">
</view>
<view class="menu-content">
<view class="shop-menu-name">
{{item1.productName}}
</view>
<view class="shop-menu-price">
¥{{item1.attributeListPrice | sliceMsg}}
</view>
<view class="shop-menu-purchase">
拼团 <text
style="color: red;font-size: 24rpx;padding-left: 10rpx;">¥{{item1.productGroupBuyPrices | slicePrice}}</text>
</view>
</view>
</view>
</view>
</view>
<uni-load-more :status="loadStatus" @change="onChange" />
</view>
<view class="zaixian">
<view class="zaixian-total">当前{{onlineWorkerTotal}}名配送员在线</view>
<view class="zaixian-divider"></view>
<swiper class="zaixian-swiper" vertical circular :autoplay="onlineWorkerAreaList.length > 1"
:interval="onlineWorkerInterval" :duration="onlineWorkerDuration">
<swiper-item v-if="onlineWorkerAreaList.length === 0">
<view class="zaixian-item">暂无在线区域数据</view>
</swiper-item>
<swiper-item v-for="(item,index) in onlineWorkerAreaList" :key="index">
<view class="zaixian-item">{{item.areaName}} {{item.onlineWorkerCount}}人在线</view>
</swiper-item>
</swiper>
</view>
<view style="width: 100%;height: 120rpx;"></view>
</view>
</template>
<script>
export default {
data() {
return {
loadStatus: 'more',
isArea: false,
indicatorDots: false,
autoplay: true,
interval: 4000,
duration: 1000,
searchScore: false,
searchSale: false,
shopArea: [],
totalPages: 1,
searchForm: {
regionId: JSON.parse(uni.getStorageSync('area')).id,
shopType: '',
shopArea: '',
pageNumber: 1,
keyWord: '',
pageSize: '10',
sort: "shoprank",
order: "desc",
sortOrder: 'shoprank',
orderOrder: 'desc',
sortScore: '',
orderScore: '',
sortSale: '',
orderSale: ''
},
shopList: [],
menuBtn: [{
name: '美食',
value: '',
url: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/d6b53eb217644e74bbf957ff7462c27b.png',
index: 1
}, {
name: '甜点饮品',
value: '',
url: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/b43aea98962b402f900eca84b2c171ae.png',
index: 2
}, {
name: '超市便利',
value: '',
url: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/e082a4c10b9a47f0bdb588fb91bc9afb.png',
index: 3
}, {
name: '蔬菜水果',
value: '',
url: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/e6adc80518c24c488522ab19f036af27.png',
index: 4
}, {
name: '看病买药',
value: '',
url: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/766761af471a4f9f90e9a137f9c4f701.png',
index: 5
}],
menuBtn1: [{
name: '米粉面馆',
value: '',
url: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/8d2f7ffb67a4477ebe663f562b3bd018.png',
index: 6
}, {
name: '早点',
value: '',
url: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/5e4fa14df92942eeb62254c8eb82f122.png',
index: 7
}, {
name: '快餐',
value: '',
url: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/05d2286ac1be4ae784858409889690d5.png',
index: 8
}, {
name: '麻辣烫冒菜',
value: '',
url: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/0ac5e0095a5d4097b338ec450df8d3dd.png',
index: 9
}, {
name: '汉堡披萨',
value: '',
url: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/14b93d4bce134b3db4b42b13b6993e6c.png',
index: 10
}],
menuButtonInfo: {},
onlineWorkerTotal: 0,
onlineWorkerAreaList: [],
onlineWorkerInterval: 2500,
onlineWorkerDuration: 500
}
},
components: {
},
filters: {
sliceMsg(val) {
var name = ''
if (typeof(val) == 'string') {
let newObj = JSON.parse(val)
for (let as in newObj) {
name = newObj[as].specPrice
}
}
return name;
},
slicePrice(val) {
let begin = ''
if (val != null) {
begin = val[0].groupPrice
for (let i = 0; i < val.length; i++) {
if (val[i].groupPrice < begin) {
begin = val[i].groupPrice
}
}
}
return begin;
}
},
onReachBottom() {
if (this.searchForm.pageNumber >= this.totalPages) return;
// this.status = 'loading';
this.searchForm.pageNumber++;
this.getShopList();
},
onLoad() {
this.getEatType();
this.getShopArea();
this.getShopList();
this.getOnlineWorkerCountByCanteenArea();
},
onShow() {
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
// uni.showLoading({
// title: '加载中...',
// mask: true
// })
},
methods: {
searchShop(type, value) {
this.searchForm.pageNumber = 1
if (type == 'area') {
this.searchForm.shopArea = value
} else if (type == 'score') {
this.searchScore = !this.searchScore
this.searchSale = false
this.searchForm.sort = 'shopScore'
} else if (type == 'sale') {
this.searchSale = !this.searchSale
this.searchScore = false
this.searchForm.sort = 'saleCount'
} else if (type == 'all') {
this.searchForm.sortOrder = 'shoprank'
this.searchForm.orderOrder = 'desc'
this.searchForm.shopArea = ''
this.searchForm.sort = 'shoprank'
this.searchScore = false
this.searchScore = false
this.searchSale = false
} else if (type == 'typeUp') {
//TODO跳转新页面
}
this.getShopList();
},
buyingye() {
uni.showToast({
title: '店铺不在营业时间!',
icon: 'none'
});
},
getEatType() {
let that = this
that.tui.request("/dictData/getByCondition", "GET", {
sort: 'sortOrder',
order: 'asc',
dictId: '1712359407444168704'
}, false, true).then((res) => {
if (res.code == 200) {
for (let i = 0; i < res.result.content.length; i++) {
for (let m = 0; m < this.menuBtn.length; m++) {
if (this.menuBtn[m].name == res.result.content[i].title) {
this.menuBtn[m].value = res.result.content[i].value
}
}
for (let m = 0; m < this.menuBtn1.length; m++) {
if (this.menuBtn1[m].name == res.result.content[i].title) {
this.menuBtn1[m].value = res.result.content[i].value
}
}
}
} else {
that.tui.toast(res.message)
return
}
}).catch((res) => {})
},
getShopArea() {
let that = this
that.tui.request("/app/shopArea/getByParentId/" + JSON.parse(uni.getStorageSync('area')).id, "GET", {},
false, true).then((res) => {
if (res.code == 200) {
if (res.result != null) {
for (let m = 0; m < res.result.length; m++) {
if (res.result[m].isCanteen == 1) {
that.shopArea.push(res.result[m])
}
}
}
} else {
that.tui.toast(res.message)
return
}
}).catch((res) => {})
},
getOnlineWorkerCountByCanteenArea() {
let that = this
that.tui.request("/worker/getOnlineWorkerByArea", "GET", {
parentId: JSON.parse(uni.getStorageSync('area')).id
}, false, true).then((res) => {
if (res.code == 200) {
const list = Array.isArray(res.result) ? res.result : []
that.onlineWorkerAreaList = list
that.onlineWorkerTotal = list.reduce((sum, item) => {
const count = Number(item.onlineWorkerCount || 0)
return sum + (isNaN(count) ? 0 : count)
}, 0)
}
}).catch(() => {})
},
getShopList() {
this.loadStatus = 'loading'
if (this.searchSale) {
this.searchForm.sortSale = 'saleCount'
this.searchForm.orderSale = 'desc'
this.searchForm.sortOrder = ''
} else {
this.searchForm.sortSale = ''
}
if (this.searchScore) {
this.searchForm.sortScore = 'shopScore'
this.searchForm.orderScore = 'desc'
this.searchForm.sortOrder = ''
} else {
this.searchForm.sortScore = ''
}
let that = this
that.tui.request("/app/shop/getByCondition", "GET", this.searchForm, false, true).then((res) => {
that.loadStatus = 'nomore';
if (res.code == 200) {
if (that.searchForm.pageNumber == 1) {
that.shopList = res.result.content
} else {
that.shopList = [...that.shopList, ...res.result.content]
}
this.judgeBusinessStatus()
that.totalPages = res.result.totalPages
that.isArea = false
that.$forceUpdate()
} else {
that.tui.toast(res.message)
return
}
uni.hideLoading()
}).catch((res) => {})
},
judgeBusinessStatus() {
for (let i = 0; i < this.shopList.length; i++) {
if (this.shopList[i].shopTakeaway != '') {
if (this.shopList[i].shopTakeaway.status == 0) {
let isEndTime = this.isWithinBusinessHours(this.shopList[i].shopTakeaway.businessHourBegin,this.shopList[i].shopTakeaway.businessHourEnd)
this.shopList[i].shopTakeaway.status = isEndTime ? 0 : 1
}
}
}
},
//判断是否在营业时间内
isWithinBusinessHours(begin, end) {
// 获取当前时间的时和分
const now = new Date();
const currentMinutes = now.getHours() * 60 + now.getMinutes();
// 解析开始和结束时间(格式 "HH:MM")
const parseTime = (timeStr) => {
const [hours, minutes] = timeStr.split(':').map(Number);
return hours * 60 + minutes;
};
const startMinutes = parseTime(begin);
const endMinutes = parseTime(end);
// 判断是否在区间内(包含端点)
return currentMinutes >= startMinutes && currentMinutes <= endMinutes;
},
goDetail(type, item) {
if (type == 'shop') {
uni.navigateTo({
url: '/package1/group/groupBuySingle?type=shop&item=' + JSON.stringify(item)
})
} else if (type == 'search') {
if (item) {
uni.navigateTo({
url: '/package1/group/searchGroup?shopType=' + (item.value || '')
})
} else {
uni.navigateTo({
url: '/package1/group/searchGroup'
})
}
} else {
uni.navigateTo({
url: '/package1/group/groupBuySingle?type=product&item=' + JSON.stringify(item)
})
}
},
back() {
uni.navigateBack()
},
checkArea() {
this.isArea = !this.isArea
}
}
}
</script>
<style lang="scss">
page {
width: 100%;
min-height: 100%;
font-size: 24rpx;
background: #F5F8F5;
color: #00231C;
}
.page1 {
width: 100%;
min-height: 100vh;
font-size: 24rpx;
position: relative;
}
.title {
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat;
background-size: 100% 100%;
width: 100%;
height: auto;
padding-bottom: 20rpx;
}
.swiper {
width: 100%;
height: 500rpx;
z-index: 99 !important;
}
.swiper img {
width: 100%;
height: 100%;
z-index: 99 !important;
}
.menu-box {
width: 100%;
height: 160rpx;
display: flex;
margin-top: 30rpx;
}
.menu-list {
flex: 1;
}
.menu-list img {
width: 70%;
height: 70%;
display: block;
margin: 0 auto;
}
.menu-name {
text-align: center;
font-size: 24rpx;
font-weight: 700;
margin-top: 15rpx;
}
.title-tab {
width: 95%;
margin: 0 auto;
height: 210rpx;
}
.swiper {
width: 100%;
height: 210rpx;
}
.title-sreach {
width: 75%;
display: flex;
height: 200rpx;
}
.back-btn {
padding-top: 110rpx;
}
.title-name {
padding-top: 110rpx;
font-size: 36rpx;
font-weight: 700;
}
.title-search {
margin-top: 110rpx;
display: flex;
background: #fff;
height: 54rpx;
margin-left: 20rpx;
border-radius: 54rpx;
flex: 1;
input {
height: 54rpx;
line-height: 54rpx;
}
}
.title-sort {
height: 60rpx;
display: flex;
margin-top: 20rpx;
}
.sort-member {
line-height: 60rpx;
text-align: center;
background: #fff;
width: 20%;
margin-left: 4%;
border-radius: 10rpx;
}
.sort-value {
width: 160rpx;
height: auto;
max-height: 300rpx;
overflow: scroll;
background: rgba(0, 0, 0, 0.7);
position: absolute;
top: 80rpx;
right: 0;
border-radius: 20rpx;
color: #fff;
font-size: 22rpx;
}
.sort-value1 {
border-bottom: 1rpx solid #eee;
}
.shop-list {
width: 95%;
height: auto;
margin: 0 auto;
}
.shop-member {
width: 100%;
height: auto;
border-radius: 20rpx;
background: #fff;
margin-bottom: 20rpx;
position: relative;
}
.shop-img {
width: 160rpx;
height: 160rpx;
position: relative;
img {
width: 100%;
background-size: 100%;
height: 100%;
border-radius: 20rpx;
}
}
.shop-top {
padding: 20rpx;
display: flex;
}
.shop-content {
flex: 1;
padding-left: 20rpx;
}
.shop-name {
font-size: 32rpx;
font-weight: 900;
}
.shop-content-center {
display: flex;
margin: 20rpx 0;
}
.shop-rate {
background: rgba(249, 212, 157, 0.34);
height: 40rpx;
display: flex;
border-radius: 20rpx;
padding: 0 10rpx 0 0;
}
.shop-rate-num {
width: 50rpx;
height: 100%;
text-align: center;
background: linear-gradient(90deg, rgba(255, 77, 0, 1), rgba(255, 184, 84, 1));
color: #fff;
line-height: 40rpx;
font-size: 22rpx;
border-bottom-left-radius: 20rpx;
border-top-left-radius: 20rpx;
border-bottom-right-radius: 10rpx;
border-top-right-radius: 10rpx;
font-weight: 700;
}
.shop-tag {
flex: 1;
line-height: 40rpx;
text-align: right;
}
.shop-content-bottom {
display: flex;
}
.shop-deal {
flex: 1;
}
.shop-bottom {
border-top: 2rpx solid #eee;
width: 100%;
overflow-x: scroll;
display: flex;
height: auto;
overflow-y: hidden;
padding: 10rpx 0 20rpx;
}
.menu-member {
width: 140rpx;
height: 100%;
margin: 10rpx 0 0 20rpx;
}
.menu-img {
height: 140rpx;
width: 140rpx;
border-radius: 10px;
img {
width: 100%;
height: 100%;
background-size: 100%;
border-radius: 20rpx;
}
}
.menu-content {
font-size: 26rpx;
}
.shop-menu-name {
margin-top: 10rpx;
font-weight: 700;
overflow: hidden;
height: 30rpx;
}
.shop-menu-price {
margin-top: 6rpx;
font-weight: 700;
}
.shop-menu-purchase {
display: flex;
background: rgba(255, 57, 57, 0.1);
height: 36rpx;
line-height: 36rpx;
padding: 0 0 0 4rpx;
border-radius: 8rpx;
font-weight: 700;
margin-top: 10rpx;
color: #777;
font-size: 20rpx;
}
.zaixian {
position: fixed;
bottom: 40rpx;
left: 10%;
width: 80%;
height: 76rpx;
background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));
border-radius: 76rpx;
font-weight: bold;
display: flex;
align-items: center;
padding: 0 24rpx;
box-sizing: border-box;
text-align: center;
line-height: normal;
}
.zaixian-total {
font-size: 26rpx;
line-height: 76rpx;
white-space: nowrap;
}
.zaixian-divider {
width: 2rpx;
height: 36rpx;
background: rgba(0, 35, 28, 0.2);
margin: 0 18rpx;
}
.zaixian-swiper {
flex: 1;
height: 76rpx;
}
.zaixian-item {
height: 76rpx;
line-height: 76rpx;
font-size: 24rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>