root
/
school_uni
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
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.
9 Commits
1 Branch
0 Tags
6.3 MiB
 
 
 
 
 
Tree: 8a905a0899
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '8a905a0899'
${ noResults }
school_uni/package1/group/groupBuySingle.vue

1006 lines
22 KiB
Raw Blame History

<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" color="#fff"></uni-icons>
</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>
<view class="content">
<view class="pintuan">
<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" @tap="goDetail('shopDetail')">
<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" @tap.stop="goDetail('shopEvaluate')" style="color: #777;">
店铺评价<uni-icons type="right" size="12"></uni-icons>
</view>
<view class="shop-deal1">
月售 <text> 100+</text>
</view>
</view>
</view>
</view>
<view class="shop-bottom">
公告：这里是第三食堂美食top1，好吃不贵，欢迎下好吃不贵，欢迎下单！欢迎下单！
</view>
</view>
<view class="pintuan" style="padding: 0;margin-top:20rpx;display: flex;">
<view class="pintuan-left">
<view class="pintuan-left-img">
<img src="/static/images/img/shangpintu.png" alt="">
</view>
<view class="pintuan-left-box">
<view class="pintuan-left-name">
无骨双拼|招牌炸鸡套餐
</view>
<view class="pintuan-left-price">
拼团<text style="color: red;">￥59.90</text>
</view>
</view>
</view>
<view class="pintuan-right">
<view class="pintuan-right-img">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/94f91382e76c4f289d53fbf858e8732b.png"
alt="" />
<view class="weipincheng">+</view>
</view>
<view class="pintuan-right-cha">
差<text style="color: red;">1人</text>拼成
</view>
</view>
</view>
<view class="goods-list">
<view class="menu-box">
<view class="menu1">
</view>
</view>
<view class="goods-member">
<view class="goods-top">
<view class="goods-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="goods-content" @tap="goDetail('goodsDetail')">
<view class="goods-name">
牛仔农庄(医专店)
</view>
<view class="goods-content-center">
<view class="goods-deal1">
月售 <text> 100+</text>
</view>
<view class="goods-tag">
<view class="pintuan-right-img">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/94f91382e76c4f289d53fbf858e8732b.png"
alt="" />
<view class="weipincheng">+</view>
</view>
<view class="pintuan-right-cha">
差<text style="color: red;">1人</text>拼成
</view>
</view>
</view>
<view class="goods-content-bottom">
<view style="font-size: 28rpx;line-height: 54rpx;margin-right: 20rpx;">
￥90.00
</view>
<view class="pintuan-left-price">
拼团<text style="color: red;">￥59.90</text>
</view>
</view>
</view>
</view>
<view class="goods-bottom">
<view class="goods-btn" @tap="openPopup('pintuan',1)"
style="background: rgba(166, 255, 234, 0.3);margin-right: 6%;border: 1px solid rgba(166, 255, 234, 0.5);">
直接购买
</view>
<view class="goods-btn" @tap="openPopup('pintuan',0)">
拼团购买￥15.00
</view>
</view>
</view>
</view>
</view>
<view style="width: 100%;height: 160rpx;"></view>
<view class="bottom">
<view class="bottom-left">
<view style="position: relative;width: 60rpx;height: 80rpx;margin-top: 20rpx;" @tap="openPopup('car')">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/60db52398a65459e9541881c926986a4.png" alt="" />
<view class="bottom-dot">1</view>
</view>
<view class="bottom-price">￥18.00</view>
</view>
<view class="bottom-right">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/d93d893296ed46ea99cfd0e8e2835eaa.png" alt="" />
</view>
</view>
<!-- 购物车弹窗 -->
<uni-popup ref="carPopup" background-color="#fff">
<view class="car-content">
<view class="car-close" @tap="$refs.carPopup.close()">
<uni-icons type="close" size="30" color="#fff"></uni-icons>
</view>
<view class="car-title">
已加购商品（3）
</view>
<view class="goods-top" style="padding: 0;">
<view class="goods-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="goods-content">
<view class="goods-name">
牛仔农庄(医专店)
</view>
<view class="goods-content-center">
<view class="goods-deal1">
月售 <text> 100+</text>
</view>
</view>
<view class="goods-content-bottom">
<view style="font-size: 28rpx;line-height: 54rpx;margin-right: 20rpx;flex: 1;">
￥90.00
</view>
<view class="pintuan-left-price">
拼团<text style="color: red;">￥59.90</text>
</view>
<view class="goods-num">
<view class="num-plus" style="background: #999;color: #fff;">
-
</view>
<view class="num">
1
</view>
<view class="num-plus">
+
</view>
</view>
</view>
</view>
</view>
<view style="width: 100%;height: 160rpx;"></view>
<view class="bottom" style="padding-bottom: 10px;">
<view class="bottom-left">
<view style="width: 60rpx;height: 80rpx;margin-top: 10rpx;" @tap="openPopup('car')">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/60db52398a65459e9541881c926986a4.png" alt="" />
</view>
<view class="bottom-price" style="line-height: 24px;">
<view>￥18.00</view>
<view style="font-size: 12px;color: #777;">打包费￥1</view>
</view>
</view>
<view class="bottom-right">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/d93d893296ed46ea99cfd0e8e2835eaa.png" alt="" />
</view>
</view>
</view>
</uni-popup>
<!-- 拼团和选规格弹窗 -->
<uni-popup ref="pintuanPopup" background-color="#fff">
<view class="car-content">
<view class="car-close" @tap="$refs.carPopup.close()">
<uni-icons type="close" size="30" color="#fff"></uni-icons>
</view>
<view class="goods-top">
<view class="goods-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="goods-content">
<view class="goods-name">
牛仔农庄(医专店)
</view>
<view class="goods-content-center">
<view class="goods-deal1">
月售 <text> 100+</text>
</view>
</view>
<view class="goods-content-bottom">
<view style="font-size: 28rpx;line-height: 54rpx;margin-right: 20rpx;">
￥90.00
</view>
<view class="pintuan-left-price">
拼团<text style="color: red;">￥59.90</text>
</view>
</view>
</view>
</view>
<view class="goods-spec">
<view class="spec1">
<view class="spec11">
选择食材1
</view>
<view class="spec22" >
<view class="spec222">
炸鸡块
</view>
<view class="spec-check">
炸鸡块
</view>
</view>
</view>
<view class="spec1">
<view class="spec11">
选择食材2
</view>
<view class="spec22">
<view class="spec222">
炸鸡块
</view>
<view class="spec222">
炸鸡块
</view>
</view>
</view>
</view>
<view class="spec11">
成团选择
</view>
<view class="goods-team">
<view class="team1">
<view class="team11">
￥16.00
</view>
<view class="team11">
二人团
</view>
</view>
<view class="team-check">
<view class="team11">
￥15.00
</view>
<view class="team11">
三人团
</view>
</view>
</view>
<view class="spec11">
他们都在拼
</view>
<view class="">
<view class="goods-center">
<view class="list-right">
<view class="list-right-img">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/94f91382e76c4f289d53fbf858e8732b.png"
alt="" />
<view class="list-weipincheng">+</view>
</view>
<view class="list-right-cha">
<view class="cha11">
二人拼
</view>
<view class="">
差<text style="color: red;">1人</text>拼成
</view>
</view>
<view class="list-right-price">
￥15.00
</view>
</view>
<view class="list-btn">
拼团
</view>
</view>
<view class="goods-center">
<view class="list-right">
<view class="list-right-img">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/94f91382e76c4f289d53fbf858e8732b.png"
alt="" />
<view class="list-weipincheng">+</view>
</view>
<view class="list-right-cha">
<view class="cha11">
三人拼
</view>
<view class="">
差<text style="color: red;">1人</text>拼成
</view>
</view>
<view class="list-right-price">
￥15.00
</view>
</view>
<view class="list-btn">
拼团
</view>
</view>
<view class="goods-center">
<view class="list-right">
<view class="list-right-img">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/94f91382e76c4f289d53fbf858e8732b.png"
alt="" />
<view class="list-weipincheng">+</view>
</view>
<view class="list-right-cha">
<view class="cha11">
三人拼
</view>
<view class="">
差<text style="color: red;">1人</text>拼成
</view>
</view>
<view class="list-right-price">
￥15.00
</view>
</view>
<view class="list-btn">
拼团
</view>
</view>
</view>
<view style="width: 100%;height: 160rpx;"></view>
<view class="bottom" style="padding-bottom: 10px;height: 80px;">
<view v-if="isPintuan" class="pintuan1">
<view class="pintuan2" style="border-bottom-left-radius: 50px;border-top-left-radius: 50px;">
面对面团
</view>
<view class="pintuan2" style="background: rgba(0, 35, 28, 1);border-bottom-right-radius: 50px;border-top-right-radius: 50px;color: rgba(166, 255, 234, 1);">
拼团购买￥15.00
</view>
</view>
<view v-else class="pintuan0">
直接购买
</view>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
export default {
data() {
return {
menuButtonInfo: {},
isPintuan:true,
}
},
components: {
},
onLoad() {
},
onShow() {
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
},
methods: {
openPopup(type,index){
if(type == 'car'){
this.$refs.carPopup.open('bottom')
}else if(type == 'pintuan'){
if(index == 0){
this.isPintuan = true
}else{
this.isPintuan = false
}
this.$refs.pintuanPopup.open('bottom')
}
},
goDetail(type) {
if (type == 'goodsDetail') {
uni.navigateTo({
url: '/package1/goods/goodsDetail'
})
}else if(type == 'shopDetail'){
uni.navigateTo({
url: '/package1/group/groupBuyDetail'
})
}else if(type == 'shopEvaluate'){
uni.navigateTo({
url: '/package1/group/shopEvaluate'
})
}
},
back() {
uni.navigateBack()
}
}
}
</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/9362dfb66c0f426789584cabb3977ccc.png') no-repeat;
width: 100%;
height: 700rpx;
background-size: 100%;
position: fixed;
top: 0;
z-index: -1;
}
.title-sreach {
width: 75%;
display: flex;
height: 200rpx;
}
.title-search {
margin-top: 110rpx;
display: flex;
background: #fff;
height: 54rpx;
margin-left: 20rpx;
border-radius: 54rpx;
width: 460rpx;
input {
height: 54rpx;
line-height: 54rpx;
}
}
.back-btn {
padding-top: 110rpx;
}
.content {
margin-top: 430rpx;
}
.shop-img {
width: 160rpx;
height: 160rpx;
position: relative;
img {
width: 100%;
background-size: 100%;
height: 100%;
}
}
.shop-top {
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 {
margin-top: 20rpx;
line-height: 40rpx;
}
.pintuan {
background: #fff;
padding: 20rpx;
width: 95%;
margin: 0 auto;
border-radius: 20rpx;
}
.pintuan-left {
display: flex;
padding: 20rpx;
flex: 1;
}
.pintuan-left-img {
width: 90rpx;
height: 90rpx;
img {
width: 100%;
height: 100%;
background-size: 100%;
}
}
.pintuan-left-box {
flex: 1;
padding-left: 20rpx;
}
.pintuan-right {
display: flex;
margin-top: 50rpx;
width: 30%;
}
.pintuan-right-img {
height: 40rpx;
display: flex;
img {
width: 40rpx;
height: 40rpx;
z-index: 98;
background-size: 100%;
}
}
.pintuan-left-name {
font-weight: 700;
margin-bottom: 20rpx;
}
.pintuan-left-price {
display: inline;
padding: 10rpx;
background: rgba(255, 57, 57, 0.1);
border-radius: 10rpx;
}
.weipincheng {
width: 40rpx;
height: 40rpx;
background: rgba(166, 255, 234, 1);
border-radius: 40rpx;
text-align: center;
font-size: 28rpx;
font-weight: 700;
margin-left: -6rpx;
z-index: 97;
}
.pintuan-right-cha {}
.goods-member{
padding: 10px 0;
margin-top: 10px;
border-radius: 10px;
background: #fff;
}
.goods-list {
width: 95%;
height: auto;
border-radius: 20rpx;
margin: 20rpx auto 20rpx;
}
.goods-top {
padding: 20rpx 0;
display: flex;
}
.goods-content {
flex: 1;
padding-left: 20rpx;
}
.goods-name {
font-size: 32rpx;
font-weight: 900;
}
.goods-content-center {
display: flex;
margin: 16rpx 0;
}
.goods-rate {
background: rgba(249, 212, 157, 0.34);
height: 40rpx;
display: flex;
border-radius: 20rpx;
}
.goods-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;
}
.goods-deal1 {
width: 60%;
}
.goods-tag {
display: flex;
margin: 0;
width: 40%;
}
.goods-content-bottom {
display: flex;
}
.goods-deal {
flex: 1;
}
.goods-img {
width: 160rpx;
height: 160rpx;
position: relative;
img {
width: 100%;
background-size: 100%;
height: 100%;
}
}
.goods-bottom {
display: flex;
width: 95%;
margin: 20rpx auto;
height: 70rpx;
line-height: 70rpx;
}
.goods-btn {
background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));
width: 47%;
text-align: center;
font-size: 28rpx;
font-weight: 600;
border-radius: 20rpx;
}
.bottom {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
display: flex;
background: #fff;
z-index: 98;
box-shadow: 0 -5px 5px rgba(0, 0, 0, 0.3);
}
.bottom-left {
flex: 1;
display: flex;
padding: 20rpx;
img {
width: 60rpx;
height: 80rpx;
background-size: 100%;
}
}
.bottom-price{
margin-left: 40rpx;
font-size: 40rpx;
color: red;
font-weight: 700;
line-height: 110rpx;
}
.bottom-right {
padding-top: 20rpx;
flex: 1;
img {
width: 360rpx;
height: 100rpx;
background-size: 100%;
}
}
.bottom-dot{
position: absolute;
top: 0;
right: -20rpx;
background: red;
color: #fff;
width: 32rpx;
height: 32rpx;
border-radius: 32rpx;
text-align: center;
line-height: 32rpx;
}
.car-content{
position: relative;
height: 600px;
width: 100%;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
padding: 10px;
overflow: scroll;
}
.car-close{
width: 30px;
height: 30px;
position: absolute;
top: -40px;
right: 10px;
}
.car-title{
height: 48px;
line-height: 30px;
margin: 0 auto;
font-size: 14px;
font-weight: 700;
}
.num-plus{
width: 28px;
height: 28px;
font-size: 18px;
text-align: center;
font-weight: 700;
line-height: 24px;
border-radius: 5px;
background: rgba(0, 35, 28, 1);
color: rgba(166, 255, 234, 1);
}
.num{
width: 40px;
height: 28px;
text-align: center;
line-height: 28px;
font-size: 14px;
}
.goods-num{
display: flex;
height: 28px;
flex: 1;
margin-left: 20px;
}
.pintuan0{
width: 90%;
height: 50px;
border-radius: 50px;
background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));
text-align: center;
font-size: 13px;
font-weight: 700;
line-height: 50px;
margin: auto;
}
.pintuan1{
width: 90%;
height: 50px;
line-height: 50px;
display: flex;
text-align: center;
margin: auto;
font-size: 13px;
font-weight: 700;
}
.pintuan2{
flex: 1;
background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));
}
.spec11{
height: 48px;
line-height: 48px;
font-size: 14px;
font-weight: 700;
}
.spec222{
display: inline-block;
padding: 0 10px;
background: #eee;
color: #777;
height: 36px;
line-height: 36px;
text-align: center;
border-radius: 10px;
margin-right: 10px;
}
.spec-check{
display: inline-block;
padding: 0 10px;
background: rgba(166, 255, 234, 1);
height: 36px;
line-height: 36px;
text-align: center;
border-radius: 10px;
margin-right: 10px;
}
.team1{
width: 77px;
height: 83px;
background: #eee;
border-radius: 10px;
font-size: 13px;
text-align: center;
line-height: 30px;
float: left;
margin-right: 20px;
}
.team-check{
width: 77px;
height: 83px;
background: rgba(166, 255, 234, 1);
border-radius: 10px;
font-size: 13px;
text-align: center;
line-height: 30px;
float: left;
margin-right: 20px;
}
.team11{
margin-top: 10px;
}
.goods-team{
width: 100%;
min-height: 90px;
}
.list-right {
display: flex;
width: 100%;
padding: 15px 0 15px 15px;
flex: 1;
}
.list-right-img {
height: 40px;
display: flex;
img {
width: 40px;
height: 40px;
z-index: 98;
background-size: 100%;
}
}
.list-weipincheng {
width: 40px;
height: 40px;
background: #a6ffea;
border-radius: 40px;
text-align: center;
font-size: 28rpx;
font-weight: 700;
margin-left: -6rpx;
z-index: 97;
line-height: 40px;
}
.goods-center {
width: 100%;
margin: 0 auto 10px;
background: #f5f8f5;
height: 70px;
border-radius: 10px;
overflow: hidden;
display: flex;
}
.list-right-cha {
margin-left: 10px;
}
.list-right-price{
flex: 1;
text-align: right;
line-height: 40px;
color: red;
font-size: 14px;
font-weight: 700;
}
.list-btn {
background: linear-gradient(90deg, #e3ff96, #a6ffea);
width: 130rpx;
text-align: center;
font-size: 28rpx;
font-weight: 600;
border-radius: 30px;
height: 30px;
line-height: 30px;
margin: 20px;
}
.cha11{
font-size: 11px;
background: rgba(255, 57, 57, 0.2);
color: red;
display: inline-block;
padding: 3px;
border-radius: 5px;
margin-bottom: 5px;
}
</style>