Browse Source

拼团列表

master
tianyi 3 months ago
parent
commit
faf316c9ab
  1. 255
      package1/group/groupBuySingle.vue

255
package1/group/groupBuySingle.vue

@ -2,7 +2,8 @@
<!-- 拼团单一商家 -->
<view class="page1">
<!-- 固定顶部导航栏悬浮在背景图之上 -->
<view class="nav-bar" :style="{'padding-top': menuButtonInfo.top +'px','background':lastScrollTop>200?'#fff':''}">
<view class="nav-bar"
:style="{'padding-top': menuButtonInfo.top +'px','background':lastScrollTop>200?'#fff':''}">
<view class="back-btn" @tap="back">
<uni-icons type="left" size="28"></uni-icons>
</view>
@ -81,14 +82,19 @@
</view>
</view>
<!-- 分类栏移到goods-list外层position:sticky才能生效 -->
<view class="menu-list" id="menuList" :style="{'top': navBarHeight + 'px','background':lastScrollTop>200?'#fff':''}">
<view class="menu1" @tap="checkTab(index)" v-for="(item,index) in menuList" :key="index" :style="{'font-size':item.checked?'40rpx':'30rpx','color':item.checked?'rgba(0, 35, 28, 1)':'#777'}">
<view class="menu-list" id="menuList"
:style="{'top': navBarHeight + 'px','background':lastScrollTop>200?'#fff':''}">
<view class="menu1" @tap="checkTab(index)" v-for="(item,index) in menuList" :key="index"
:style="{'font-size':item.checked?'40rpx':'30rpx','color':item.checked?'rgba(0, 35, 28, 1)':'#777'}">
<view style="width: 90px;">{{item.categoryName}}</view>
<img v-if="item.checked" class="checked-img" src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/4bb5fc7725cb4a7a84d1d3a15f05b39c.png" alt="" />
<img v-if="item.checked" class="checked-img"
src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/4bb5fc7725cb4a7a84d1d3a15f05b39c.png"
alt="" />
</view>
</view>
<view class="goods-list">
<view class="goods-member" v-for="(item,index) in productItem" :key="index" @tap="goDetail('product',item)">
<view class="goods-member" v-for="(item,index) in productItem" :key="index"
@tap="goDetail('product',item)">
<view class="goods-top">
<view class="goods-img">
<img :src="item.productPicture" alt="" style="border-radius: 10px;">
@ -139,8 +145,10 @@
<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 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" v-if="cartTotalCount > 0">{{cartTotalCount}}</view>
</view>
<view class="bottom-price">{{cartTotalPrice}}</view>
@ -162,9 +170,11 @@
</view>
<scroll-view scroll-y style="max-height: 400rpx;">
<view class="goods-top" style="padding: 10px 0;" v-for="(cartItem, index) in cartItems" :key="index">
<view class="goods-top" style="padding: 10px 0;" v-for="(cartItem, index) in cartItems"
:key="index">
<view class="goods-img" style="width: 120rpx;height: 120rpx;">
<img :src="cartItem.item.productPicture" alt="" style="border-radius: 10px;width:100%;height:100%;">
<img :src="cartItem.item.productPicture" alt=""
style="border-radius: 10px;width:100%;height:100%;">
</view>
<view class="goods-content" style="padding-left: 20rpx;">
<view class="goods-name">
@ -172,15 +182,18 @@
</view>
<view class="goods-content-center">
<view class="goods-deal1" v-if="cartItem.specs">
<text style="color: #999; font-size: 20rpx;">已选规格: {{getSpecDisplayString(cartItem.specs)}}</text>
<text style="color: #999; font-size: 20rpx;">已选规格:
{{getSpecDisplayString(cartItem.specs)}}</text>
</view>
</view>
<view class="goods-content-bottom" style="margin-top: 10rpx;">
<view style="font-size: 28rpx;line-height: 54rpx;margin-right: 20rpx;flex: 1;color: red;">
<view
style="font-size: 28rpx;line-height: 54rpx;margin-right: 20rpx;flex: 1;color: red;">
{{cartItem.price}}
</view>
<view class="goods-num">
<view class="num-plus" style="background: #999;color: #fff;" @tap="adjustCart(cartItem.cartId, -1)">
<view class="num-plus" style="background: #999;color: #fff;"
@tap="adjustCart(cartItem.cartId, -1)">
-
</view>
<view class="num">
@ -199,14 +212,16 @@
<view class="bottom" style="padding-bottom: 10px;">
<view class="bottom-left">
<view style="width: 60rpx;height: 80rpx;margin-top: 10rpx;" @tap="$refs.carPopup.close()">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/60db52398a65459e9541881c926986a4.png" alt="" />
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/60db52398a65459e9541881c926986a4.png"
alt="" />
</view>
<view class="bottom-price" style="line-height: 24px;">
<view>{{cartTotalPrice}}</view>
</view>
</view>
<view class="bottom-right" @tap="submitCartCheckout">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/d93d893296ed46ea99cfd0e8e2835eaa.png" alt="" />
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/d93d893296ed46ea99cfd0e8e2835eaa.png"
alt="" />
</view>
</view>
</view>
@ -215,7 +230,9 @@
<!-- 警告弹出层 -->
<uni-popup ref="warnPopup" background-color="#fff">
<view class="warnImg">
<img @tap="$refs.warnPopup.close()" src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/4996043b3987401794b974d359429b8e.png" alt="购物车是空的" style="width:300px;height:370px;" />
<img @tap="$refs.warnPopup.close()"
src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/4996043b3987401794b974d359429b8e.png"
alt="购物车是空的" style="width:300px;height:370px;" />
</view>
</uni-popup>
<!-- 拼团和选规格弹窗 -->
@ -244,8 +261,9 @@
<view style="font-size: 28rpx;line-height: 54rpx;margin-right: 20rpx;">
{{currentItem.attributeListPrice | sliceMsg}}
</view>
<view class="pintuan-left-price" v-if="currentItem.productGroupBuyPrices && currentItem.productGroupBuyPrices.length > 0">
拼团<text style="color: red;">{{currentItem.productGroupBuyPrices | slicePrice}}</text>
<view class="pintuan-left-price"
v-if="currentItem.productGroupBuyPrices && currentItem.productGroupBuyPrices.length > 0">
拼团<text style="color: red;">{{currentItem.productGroupBuyPrices | slicePrice}}</text>
</view>
</view>
</view>
@ -258,8 +276,7 @@
</view>
<view class="spec22">
<view :class="spec.selected === option ? 'spec-check' : 'spec222'"
v-for="(option, oIndex) in spec.options"
:key="oIndex"
v-for="(option, oIndex) in spec.options" :key="oIndex"
@tap="selectSpec(sIndex, option)">
{{option}}
</view>
@ -267,12 +284,14 @@
</view>
</view>
<template v-if="isPintuan && currentItem.productGroupBuyPrices && currentItem.productGroupBuyPrices.length > 0">
<template
v-if="isPintuan && currentItem.productGroupBuyPrices && currentItem.productGroupBuyPrices.length > 0">
<view class="spec11">
成团选择
</view>
<view class="goods-team">
<view :class="selectedGroupRule && selectedGroupRule.groupCount === rule.groupCount ? 'team-check' : 'team1'"
<view
:class="selectedGroupRule && selectedGroupRule.groupCount === rule.groupCount ? 'team-check' : 'team1'"
v-for="(rule, rIndex) in currentItem.productGroupBuyPrices" :key="rIndex"
@tap="selectGroupRule(rule)">
<view class="team11">
@ -284,8 +303,9 @@
</view>
</view>
<view class="spec11">
<view class="spec11" @tap="$refs.pintuanGroupPopup.open('bottom')">
他们都在拼
<uni-icons type="right" size="12"></uni-icons>
</view>
<!-- 占位假数据展示 -->
<view class="">
@ -298,15 +318,12 @@
</view>
<view class="list-right-cha">
<view class="cha11">
不限
二人
</view>
<view class="">
<view style="line-height: 20px;padding-left: 5px;">
<text style="color: red;">1</text>拼成
</view>
</view>
<view class="list-right-price">
去凑单
</view>
</view>
<view class="list-btn" @tap="submitPintuan">
去拼单
@ -319,15 +336,20 @@
<view class="bottom" style="padding-bottom: 20px;height: 80px;z-index: 10;">
<view v-if="isPintuan" class="pintuan1">
<template v-if="!groupId">
<view class="pintuan2" style="border-bottom-left-radius: 50px;border-top-left-radius: 50px;" @tap="submitPintuan(true)">
<view class="pintuan2" style="border-bottom-left-radius: 50px;border-top-left-radius: 50px;"
@tap="submitPintuan(true)">
面对面团
</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);" @tap="submitPintuan(false)">
<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);"
@tap="submitPintuan(false)">
发起拼团{{selectedGroupRule && selectedGroupRule.groupPrice ? parseFloat(selectedGroupRule.groupPrice).toFixed(2) : '0.00'}}
</view>
</template>
<template v-else>
<view class="pintuan2" style="width: 100%; border-radius: 50px; background: rgba(0, 35, 28, 1); color: rgba(166, 255, 234, 1);" @tap="submitPintuan(false)">
<view class="pintuan2"
style="width: 100%; border-radius: 50px; background: rgba(0, 35, 28, 1); color: rgba(166, 255, 234, 1);"
@tap="submitPintuan(false)">
参与拼团{{selectedGroupRule && selectedGroupRule.groupPrice ? parseFloat(selectedGroupRule.groupPrice).toFixed(2) : '0.00'}}
</view>
</template>
@ -338,6 +360,114 @@
</view>
</view>
</uni-popup>
<!-- 拼团和选规格弹窗 -->
<uni-popup ref="pintuanGroupPopup" background-color="#fff">
<view class="car-content">
<view class="car-close" @tap="$refs.pintuanPopup.close()">
<uni-icons type="close" size="30" color="#fff"></uni-icons>
</view>
<view class="goods-top">
<view class="goods-img">
<img :src="currentItem.productPicture" alt="" style="border-radius: 10px;">
<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">
{{currentItem.productName}}
</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;">
{{currentItem.attributeListPrice | sliceMsg}}
</view>
<view class="pintuan-left-price"
v-if="currentItem.productGroupBuyPrices && currentItem.productGroupBuyPrices.length > 0">
拼团<text style="color: red;">{{currentItem.productGroupBuyPrices | slicePrice}}</text>
</view>
</view>
</view>
</view>
<scroll-view scroll-y style="max-height: 50vh;">
<template
v-if="isPintuan && currentItem.productGroupBuyPrices && currentItem.productGroupBuyPrices.length > 0">
<!-- 占位假数据展示 -->
<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 style="line-height: 20px;padding-left: 5px;">
<text style="color: red;">1</text>拼成
</view>
</view>
</view>
<view class="list-btn" @tap="submitPintuan">
去拼单
</view>
</view>
</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 style="line-height: 20px;padding-left: 5px;">
<text style="color: red;">1</text>拼成
</view>
</view>
</view>
<view class="list-btn" @tap="submitPintuan">
去拼单
</view>
</view>
</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 style="line-height: 20px;padding-left: 5px;">
<text style="color: red;">1</text>拼成
</view>
</view>
</view>
<view class="list-btn" @tap="submitPintuan">
去拼单
</view>
</view>
</view>
</template>
<view style="width: 100%;height: 160rpx;"></view>
</scroll-view>
</view>
</uni-popup>
</view>
</template>
@ -541,7 +671,9 @@
this.isSwitching = true;
this.checkTab(index);
// 400ms200ms200ms
setTimeout(() => { this.isSwitching = false; }, 400);
setTimeout(() => {
this.isSwitching = false;
}, 400);
},
checkTab(index) {
for (let i = 0; i < this.menuList.length; i++) {
@ -556,7 +688,10 @@
// nav-bar
// menuListOffsetTop - navBarHeight 使sticky
const target = this.menuListOffsetTop - this.navBarHeight;
uni.pageScrollTo({ scrollTop: target > 0 ? target : 0, duration: 200 });
uni.pageScrollTo({
scrollTop: target > 0 ? target : 0,
duration: 200
});
},
openPopup(type, index, item) {
if (type == 'car') {
@ -567,7 +702,8 @@
this.parsedSpecs = [];
if (item.attributeList && item.attributeList !== '{}') {
try {
let attrs = typeof item.attributeList === 'string' ? JSON.parse(item.attributeList) : item.attributeList;
let attrs = typeof item.attributeList === 'string' ? JSON.parse(item.attributeList) : item
.attributeList;
for (let key in attrs) {
if (attrs[key] && attrs[key].title && attrs[key].title.length > 0) {
this.parsedSpecs.push({
@ -596,7 +732,10 @@
// If solo buy and NO specs, add immediately to cart
if (this.parsedSpecs.length === 0) {
this.addToCart(item, null);
uni.showToast({ title: '已加入购物车', icon: 'none' });
uni.showToast({
title: '已加入购物车',
icon: 'none'
});
} else {
// Open popup to select specs
this.$refs.pintuanPopup.open('bottom');
@ -617,7 +756,10 @@
specChoices[spec.name] = spec.selected;
}
this.addToCart(this.currentItem, specChoices);
uni.showToast({ title: '已加入购物车', icon: 'none' });
uni.showToast({
title: '已加入购物车',
icon: 'none'
});
this.$refs.pintuanPopup.close();
},
submitPintuan(isFaceToFace) {
@ -637,7 +779,9 @@
};
// Directly navigate to checkout
uni.navigateTo({
url: '/package1/buyFood/buyFood?item=' + encodeURIComponent(JSON.stringify(goData)) + '&shopItem=' + encodeURIComponent(JSON.stringify(this.shopItem)) + '&packageFee=' + packageFee
url: '/package1/buyFood/buyFood?item=' + encodeURIComponent(JSON.stringify(goData)) +
'&shopItem=' + encodeURIComponent(JSON.stringify(this.shopItem)) + '&packageFee=' +
packageFee
});
this.$refs.pintuanPopup.close();
},
@ -651,11 +795,15 @@
let priceToUse = 0;
if (item.attributeListPrice) {
try {
let pObj = typeof item.attributeListPrice === 'string' ? JSON.parse(item.attributeListPrice) : item.attributeListPrice;
let pObj = typeof item.attributeListPrice === 'string' ? JSON.parse(item.attributeListPrice) :
item.attributeListPrice;
if (Array.isArray(pObj) && pObj.length > 0) {
priceToUse = parseFloat(pObj[0].specPrice);
} else {
for(let k in pObj) { priceToUse = parseFloat(pObj[k].specPrice); break; }
for (let k in pObj) {
priceToUse = parseFloat(pObj[k].specPrice);
break;
}
}
} catch (e) {}
}
@ -682,7 +830,9 @@
getSpecDisplayString(specs) {
if (!specs) return '';
let arr = [];
for(let k in specs) { arr.push(specs[k]); }
for (let k in specs) {
arr.push(specs[k]);
}
return arr.join(',');
},
submitCartCheckout() {
@ -698,7 +848,9 @@
//
uni.navigateTo({
url: '/package1/buyFood/buyFood?cart=' + encodeURIComponent(JSON.stringify(this.cartItems)) + '&shopItem=' + encodeURIComponent(JSON.stringify(this.shopItem)) + '&packageFee=' + totalPackageFee
url: '/package1/buyFood/buyFood?cart=' + encodeURIComponent(JSON.stringify(this.cartItems)) +
'&shopItem=' + encodeURIComponent(JSON.stringify(this.shopItem)) + '&packageFee=' +
totalPackageFee
});
},
goDetail(type) {
@ -946,7 +1098,10 @@
z-index: 97;
}
.pintuan-right-cha {}
.pintuan-right-cha {
line-height: 20px;
padding-left: 5px;
}
.goods-member {
padding: 10px 0;
@ -1093,6 +1248,7 @@
background-size: 100%;
}
}
.bottom-dot {
position: absolute;
top: 0;
@ -1131,6 +1287,7 @@
font-size: 14px;
font-weight: 700;
}
.num-plus {
width: 28px;
height: 28px;
@ -1144,6 +1301,7 @@
color: rgba(166, 255, 234, 1);
}
.num {
width: 40px;
height: 28px;
@ -1151,12 +1309,14 @@
line-height: 28px;
font-size: 14px;
}
.goods-num {
display: flex;
height: 28px;
flex: 1;
margin-left: 20px;
}
.pintuan0 {
width: 90%;
height: 50px;
@ -1168,6 +1328,7 @@
line-height: 50px;
margin: auto;
}
.pintuan1 {
width: 90%;
height: 50px;
@ -1178,10 +1339,12 @@
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;
@ -1200,6 +1363,7 @@
border-radius: 10px;
margin-right: 10px;
}
.spec-check {
display: inline-block;
padding: 0 10px;
@ -1210,6 +1374,7 @@
border-radius: 10px;
margin-right: 10px;
}
.team1 {
width: 77px;
height: 83px;
@ -1221,6 +1386,7 @@
float: left;
margin-right: 20px;
}
.team-check {
width: 77px;
height: 83px;
@ -1232,13 +1398,16 @@
float: left;
margin-right: 20px;
}
.team11 {
margin-top: 10px;
}
.goods-team {
width: 100%;
min-height: 90px;
}
.list-right {
display: flex;
width: 100%;
@ -1284,6 +1453,7 @@
.list-right-cha {
margin-left: 10px;
}
.list-right-price {
flex: 1;
text-align: right;
@ -1304,6 +1474,7 @@
line-height: 30px;
margin: 20px;
}
.cha11 {
font-size: 11px;
background: rgba(255, 57, 57, 0.2);
@ -1313,6 +1484,7 @@
border-radius: 5px;
margin-bottom: 5px;
}
.menu-list {
height: 45px;
width: 100%;
@ -1326,6 +1498,7 @@
align-items: center;
padding-bottom: 4px;
}
.checked-img {
width: 90px;
height: 10px;

Loading…
Cancel
Save