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.
690 lines
17 KiB
690 lines
17 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'}">
|
|
<uni-icons type="search" size="18" style="margin: 9rpx;"></uni-icons>
|
|
<input type="text" placeholder="搜索" />
|
|
</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-item>
|
|
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/1d1edcc3e39c4a7cafeb64cf3209ed5e.png" alt="" />
|
|
</swiper-item>
|
|
<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(item.index)">
|
|
<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(item.index)">
|
|
<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">
|
|
综合排序 <text style="font-size: 20rpx;">▼</text>
|
|
</view>
|
|
</view>
|
|
<view class="sort-member">
|
|
<view class="sort-text">
|
|
销量优先 <text style="font-size: 20rpx;">▼</text>
|
|
</view>
|
|
</view>
|
|
<view class="sort-member">
|
|
<view class="sort-text">
|
|
评分优先 <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">最热</view>
|
|
<view class="sort-value1">最新</view>
|
|
<view class="sort-value1">最新</view>
|
|
<view class="sort-value1">最新</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="shop-list">
|
|
<view class="shop-member">
|
|
<view class="shop-top">
|
|
<view class="shop-img">
|
|
<img src="/static/images/img/shangpintu.png" 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">
|
|
牛仔农庄(医专店)
|
|
</view>
|
|
<view class="shop-content-center">
|
|
<view class="shop-rate">
|
|
<view class="shop-rate-num">4.3</view>
|
|
<uni-rate :disabled="true" size="20" disabledColor="rgba(255, 184, 84, 1)" :value="4.3" />
|
|
</view>
|
|
<view class="shop-tag">
|
|
<text style="padding: 4rpx 10rpx;background: rgba(223, 255, 176, 1);color: #777;border-radius: 6rpx;">
|
|
炒菜
|
|
</text>
|
|
</view>
|
|
</view>
|
|
<view class="shop-content-bottom">
|
|
<view class="shop-deal">
|
|
已拼<text style="color: red;font-weight: 700;"> 12 </text>单
|
|
</view>
|
|
<view class="shop-deal1">
|
|
月售 <text> 100+</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="shop-bottom">
|
|
<view class="menu-member">
|
|
<view class="menu-img">
|
|
<img src="/static/images/img/shangpintu.png" alt="">
|
|
</view>
|
|
<view class="menu-content">
|
|
<view class="shop-menu-name">
|
|
啤酒价格
|
|
</view>
|
|
<view class="shop-menu-price">
|
|
￥90.00
|
|
</view>
|
|
<view class="shop-menu-purchase">
|
|
拼团 <text style="color: red;">￥85.00</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="menu-member">
|
|
<view class="menu-img">
|
|
<img src="/static/images/img/shangpintu.png" alt="">
|
|
</view>
|
|
<view class="menu-content">
|
|
<view class="shop-menu-name">
|
|
啤酒价格
|
|
</view>
|
|
<view class="shop-menu-price">
|
|
￥90.00
|
|
</view>
|
|
<view class="shop-menu-purchase">
|
|
拼团 <text style="color: red;">￥85.00</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="menu-member">
|
|
<view class="menu-img">
|
|
<img src="/static/images/img/shangpintu.png" alt="">
|
|
</view>
|
|
<view class="menu-content">
|
|
<view class="shop-menu-name">
|
|
啤酒价格
|
|
</view>
|
|
<view class="shop-menu-price">
|
|
￥90.00
|
|
</view>
|
|
<view class="shop-menu-purchase">
|
|
拼团 <text style="color: red;">￥85.00</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="menu-member">
|
|
<view class="menu-img">
|
|
<img src="/static/images/img/shangpintu.png" alt="">
|
|
</view>
|
|
<view class="menu-content">
|
|
<view class="shop-menu-name">
|
|
啤酒价格
|
|
</view>
|
|
<view class="shop-menu-price">
|
|
￥90.00
|
|
</view>
|
|
<view class="shop-menu-purchase">
|
|
拼团 <text style="color: red;">￥85.00</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="menu-member">
|
|
<view class="menu-img">
|
|
<img src="/static/images/img/shangpintu.png" alt="">
|
|
</view>
|
|
<view class="menu-content">
|
|
<view class="shop-menu-name">
|
|
啤酒价格
|
|
</view>
|
|
<view class="shop-menu-price">
|
|
￥90.00
|
|
</view>
|
|
<view class="shop-menu-purchase">
|
|
拼团 <text style="color: red;">￥85.00</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="menu-member">
|
|
<view class="menu-img">
|
|
<img src="/static/images/img/shangpintu.png" alt="">
|
|
</view>
|
|
<view class="menu-content">
|
|
<view class="shop-menu-name">
|
|
啤酒价格
|
|
</view>
|
|
<view class="shop-menu-price">
|
|
￥90.00
|
|
</view>
|
|
<view class="shop-menu-purchase">
|
|
拼团 <text style="color: red;">￥85.00</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="menu-member">
|
|
<view class="menu-img">
|
|
<img src="/static/images/img/shangpintu.png" alt="">
|
|
</view>
|
|
<view class="menu-content">
|
|
<view class="shop-menu-name">
|
|
啤酒价格
|
|
</view>
|
|
<view class="shop-menu-price">
|
|
￥90.00
|
|
</view>
|
|
<view class="shop-menu-purchase">
|
|
拼团 <text style="color: red;">￥85.00</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="shop-member">
|
|
<view class="shop-top">
|
|
<view class="shop-img">
|
|
<img src="/static/images/img/shangpintu.png" 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">
|
|
牛仔农庄(医专店)
|
|
</view>
|
|
<view class="shop-content-center">
|
|
<view class="shop-rate">
|
|
<view class="shop-rate-num">4.3</view>
|
|
<uni-rate :disabled="true" size="20" disabledColor="rgba(255, 184, 84, 1)" :value="4.3" />
|
|
</view>
|
|
<view class="shop-tag">
|
|
<text style="padding: 4rpx 10rpx;background: rgba(223, 255, 176, 1);color: #777;border-radius: 6rpx;">
|
|
炒菜
|
|
</text>
|
|
</view>
|
|
</view>
|
|
<view class="shop-content-bottom">
|
|
<view class="shop-deal">
|
|
已拼<text style="color: red;font-weight: 700;"> 12 </text>单
|
|
</view>
|
|
<view class="shop-deal1">
|
|
月售 <text> 100+</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="shop-bottom">
|
|
<view class="menu-member">
|
|
<view class="menu-img">
|
|
<img src="/static/images/img/shangpintu.png" alt="">
|
|
</view>
|
|
<view class="menu-content">
|
|
<view class="shop-menu-name">
|
|
啤酒价格
|
|
</view>
|
|
<view class="shop-menu-price">
|
|
￥90.00
|
|
</view>
|
|
<view class="shop-menu-purchase">
|
|
拼团 <text style="color: red;">￥85.00</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="menu-member">
|
|
<view class="menu-img">
|
|
<img src="/static/images/img/shangpintu.png" alt="">
|
|
</view>
|
|
<view class="menu-content">
|
|
<view class="shop-menu-name">
|
|
啤酒价格
|
|
</view>
|
|
<view class="shop-menu-price">
|
|
￥90.00
|
|
</view>
|
|
<view class="shop-menu-purchase">
|
|
拼团 <text style="color: red;">￥85.00</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="menu-member">
|
|
<view class="menu-img">
|
|
<img src="/static/images/img/shangpintu.png" alt="">
|
|
</view>
|
|
<view class="menu-content">
|
|
<view class="shop-menu-name">
|
|
啤酒价格
|
|
</view>
|
|
<view class="shop-menu-price">
|
|
￥90.00
|
|
</view>
|
|
<view class="shop-menu-purchase">
|
|
拼团 <text style="color: red;">￥85.00</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="menu-member">
|
|
<view class="menu-img">
|
|
<img src="/static/images/img/shangpintu.png" alt="">
|
|
</view>
|
|
<view class="menu-content">
|
|
<view class="shop-menu-name">
|
|
啤酒价格
|
|
</view>
|
|
<view class="shop-menu-price">
|
|
￥90.00
|
|
</view>
|
|
<view class="shop-menu-purchase">
|
|
拼团 <text style="color: red;">￥85.00</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="menu-member">
|
|
<view class="menu-img">
|
|
<img src="/static/images/img/shangpintu.png" alt="">
|
|
</view>
|
|
<view class="menu-content">
|
|
<view class="shop-menu-name">
|
|
啤酒价格
|
|
</view>
|
|
<view class="shop-menu-price">
|
|
￥90.00
|
|
</view>
|
|
<view class="shop-menu-purchase">
|
|
拼团 <text style="color: red;">￥85.00</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="menu-member">
|
|
<view class="menu-img">
|
|
<img src="/static/images/img/shangpintu.png" alt="">
|
|
</view>
|
|
<view class="menu-content">
|
|
<view class="shop-menu-name">
|
|
啤酒价格
|
|
</view>
|
|
<view class="shop-menu-price">
|
|
￥90.00
|
|
</view>
|
|
<view class="shop-menu-purchase">
|
|
拼团 <text style="color: red;">￥85.00</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="menu-member">
|
|
<view class="menu-img">
|
|
<img src="/static/images/img/shangpintu.png" alt="">
|
|
</view>
|
|
<view class="menu-content">
|
|
<view class="shop-menu-name">
|
|
啤酒价格
|
|
</view>
|
|
<view class="shop-menu-price">
|
|
￥90.00
|
|
</view>
|
|
<view class="shop-menu-purchase">
|
|
拼团 <text style="color: red;">￥85.00</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="zaixian">
|
|
当前2000名配送员在线
|
|
</view>
|
|
<view style="width: 100%;height: 120rpx;"></view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
isArea:false,
|
|
indicatorDots: false,
|
|
autoplay: true,
|
|
interval: 4000,
|
|
duration: 1000,
|
|
menuBtn:[{
|
|
name:'美食',
|
|
url:'https://jewel-shop.oss-cn-beijing.aliyuncs.com/d6b53eb217644e74bbf957ff7462c27b.png',
|
|
index:1
|
|
},{
|
|
name:'甜点饮品',
|
|
url:'https://jewel-shop.oss-cn-beijing.aliyuncs.com/b43aea98962b402f900eca84b2c171ae.png',
|
|
index:2
|
|
},{
|
|
name:'超市便利',
|
|
url:'https://jewel-shop.oss-cn-beijing.aliyuncs.com/e082a4c10b9a47f0bdb588fb91bc9afb.png',
|
|
index:3
|
|
},{
|
|
name:'蔬菜水果',
|
|
url:'https://jewel-shop.oss-cn-beijing.aliyuncs.com/e6adc80518c24c488522ab19f036af27.png',
|
|
index:4
|
|
},{
|
|
name:'看病买药',
|
|
url:'https://jewel-shop.oss-cn-beijing.aliyuncs.com/766761af471a4f9f90e9a137f9c4f701.png',
|
|
index:5
|
|
}],
|
|
menuBtn1:[{
|
|
name:'米粉面馆',
|
|
url:'https://jewel-shop.oss-cn-beijing.aliyuncs.com/8d2f7ffb67a4477ebe663f562b3bd018.png',
|
|
index:6
|
|
},{
|
|
name:'家常菜',
|
|
url:'https://jewel-shop.oss-cn-beijing.aliyuncs.com/5e4fa14df92942eeb62254c8eb82f122.png',
|
|
index:7
|
|
},{
|
|
name:'快餐',
|
|
url:'https://jewel-shop.oss-cn-beijing.aliyuncs.com/05d2286ac1be4ae784858409889690d5.png',
|
|
index:8
|
|
},{
|
|
name:'麻辣烫冒菜',
|
|
url:'https://jewel-shop.oss-cn-beijing.aliyuncs.com/0ac5e0095a5d4097b338ec450df8d3dd.png',
|
|
index:9
|
|
},{
|
|
name:'汉堡披萨',
|
|
url:'https://jewel-shop.oss-cn-beijing.aliyuncs.com/14b93d4bce134b3db4b42b13b6993e6c.png',
|
|
index:10
|
|
}],
|
|
menuButtonInfo:{}
|
|
}
|
|
},
|
|
components: {
|
|
|
|
},
|
|
onLoad() {
|
|
|
|
},
|
|
onShow() {
|
|
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
|
},
|
|
methods: {
|
|
back(){
|
|
uni.navigateBack()
|
|
},
|
|
checkArea(){
|
|
this.isArea = !this.isArea
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 24rpx;
|
|
background: #F5F8F5;
|
|
color: #00231C;
|
|
}
|
|
|
|
.page1 {
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 24rpx;
|
|
position: relative;
|
|
}
|
|
.title{
|
|
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat;
|
|
width: 100%;
|
|
height: 54%;
|
|
}
|
|
.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: 55px;
|
|
}
|
|
.title-name{
|
|
padding-top: 55px;
|
|
font-size: 36rpx;
|
|
font-weight: 700;
|
|
}
|
|
.title-search{
|
|
margin-top: 55px;
|
|
display: flex;
|
|
background: #fff;
|
|
height: 54rpx;
|
|
margin-left: 20rpx;
|
|
border-radius: 54rpx;
|
|
width: 380rpx;
|
|
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: 480rpx;
|
|
border-radius: 20rpx;
|
|
background: #fff;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
.shop-img{
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
position: relative;
|
|
img{
|
|
width: 100%;
|
|
background-size: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.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;
|
|
}
|
|
.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;
|
|
}
|
|
.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: 280rpx;
|
|
overflow-y: hidden;
|
|
}
|
|
.menu-member{
|
|
width: 140rpx;
|
|
height: 100%;
|
|
margin: 10rpx 0 0 20rpx;
|
|
}
|
|
.menu-img{
|
|
height: 140rpx;
|
|
width: 140rpx;
|
|
img{
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: 100%;
|
|
}
|
|
}
|
|
.menu-content{
|
|
font-size: 22rpx;
|
|
}
|
|
.shop-menu-name{
|
|
margin-top: 10rpx;
|
|
font-weight: 700;
|
|
}
|
|
.shop-menu-price{
|
|
margin-top: 6rpx;
|
|
}
|
|
.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;
|
|
margin-top: 10rpx;
|
|
color: #777;
|
|
}
|
|
.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-size: 32rpx;
|
|
text-align: center;
|
|
line-height: 76rpx;
|
|
font-weight: bold;
|
|
}
|
|
</style>
|