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.
8 Commits
1 Branch
0 Tags
6.3 MiB
 
 
 
 
 
Tree: 209ff13180
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '209ff13180'
${ noResults }
school_uni/package1/group/groupBuySingle.vue

709 lines
16 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">
已拼<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">
公告：这里是第三食堂美食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('shopDetail')">
<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"
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">
拼团购买￥15.00
</view>
</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('shopDetail')">
<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"
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">
拼团购买￥15.00
</view>
</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('shopDetail')">
<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"
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">
拼团购买￥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">
<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('shopDetail')">
<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 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>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
export default {
data() {
return {
menuButtonInfo: {}
}
},
components: {
},
onLoad() {
},
onShow() {
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
},
methods: {
openPopup(type){
if(type == 'car'){
this.$refs.carPopup.open('bottom')
}
},
goDetail(type) {
if (type == 'shopDetail') {
uni.navigateTo({
url: '/package1/goods/goodsDetail'
})
}
},
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;
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;
}
.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%;
}
.car-close{
width: 30px;
height: 30px;
position: absolute;
top: -40px;
right: 10px;
}
.car-title{
height: 48px;
line-height: 48px;
width: 95%;
margin: 0 auto;
font-size: 14px;
font-weight: 700;
}
</style>