root
/
school_uni
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

拼团页

master
tianyi 1 month ago
parent
ea5652d330
commit
f176e74fff
1 changed files with 682 additions and 1 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 683
      package1/group/groupBuyList.vue

683
package1/group/groupBuyList.vue
View File

@ -1,9 +1,690 @@
<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>
<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>
Write Preview
Loading…
Cancel
Save