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

下单选商品

master
wangfukang 1 month ago
parent
5caefb87e8
commit
da0b8e4b1d
1 changed files with 394 additions and 229 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 535
      package1/group/groupBuySingle.vue

535
package1/group/groupBuySingle.vue
View File

@ -1,17 +1,18 @@
<template> <template>
<!-- 拼团单一商家 --> <!-- 拼团单一商家 -->
<view class="page1"> <view class="page1">
<view class="title"> <!-- 固定顶部导航栏（悬浮在背景图之上） -->
<view class="title-sreach"> <view class="nav-bar" :style="{'padding-top': menuButtonInfo.top +'px'}">
<view class="back-btn" @tap="back" :style="{'padding-top': menuButtonInfo.top +'px'}"> <view class="back-btn" @tap="back">
<uni-icons type="left" size="28" color="#fff"></uni-icons> <uni-icons type="left" size="28" color="#fff"></uni-icons>
</view> </view>
<view class="title-search" :style="{'margin-top': menuButtonInfo.top +'px'}"> <view class="title-search">
<uni-icons type="search" size="18" style="margin: 9rpx;"></uni-icons> <uni-icons type="search" size="18" style="margin: 9rpx;"></uni-icons>
<input type="text" placeholder="搜索" /> <input type="text" placeholder="搜索" />
</view> </view>
</view> </view>
</view> <!-- 背景头图（随页面滚动） -->
<view class="title"></view>
<view class="content"> <view class="content">
<view class="pintuan"> <view class="pintuan">
<view class="shop-top"> <view class="shop-top">
@ -77,13 +78,14 @@
</view> </view>
</view> </view>
</view> </view>
<view class="goods-list"> <!-- 分类栏：移到goods-list外层，position:sticky才能生效 -->
<view class="menu-list"> <view class="menu-list" id="menuList" :style="{'top': navBarHeight + 'px'}">
<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','width':item.checked?'90px':'70px'}"> <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> <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> </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-top">
<view class="goods-img"> <view class="goods-img">
@ -130,15 +132,16 @@
</view> </view>
</view> </view>
</view> </view>
<uni-load-more :status="loadStatus" @change="onChange" />
</view> </view>
<view style="width: 100%;height: 160rpx;"></view> <view style="width: 100%;height: 160rpx;"></view>
<view class="bottom"> <view class="bottom">
<view class="bottom-left"> <view class="bottom-left">
<view style="position: relative;width: 60rpx;height: 80rpx;margin-top: 20rpx;" @tap="openPopup('car','','')"> <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="" /> <img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/60db52398a65459e9541881c926986a4.png" alt="" />
<view class="bottom-dot">1</view> <view class="bottom-dot" v-if="cartTotalCount > 0">{{cartTotalCount}}</view>
</view> </view>
<view class="bottom-price">￥18.00</view> <view class="bottom-price">￥{{cartTotalPrice}}</view>
</view> </view>
<view class="bottom-right"> <view class="bottom-right">
<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="" />
@ -153,57 +156,54 @@
<uni-icons type="close" size="30" color="#fff"></uni-icons> <uni-icons type="close" size="30" color="#fff"></uni-icons>
</view> </view>
<view class="car-title"> <view class="car-title">
已加购商品（3） 已加购商品（{{cartTotalCount}}）
</view> </view>
<view class="goods-top" style="padding: 0;">
<view class="goods-img"> <scroll-view scroll-y style="max-height: 400rpx;">
<img src="/static/images/img/shangpintu.png" alt="" style="border-radius: 10px;"> <view class="goods-top" style="padding: 10px 0;" v-for="(cartItem, index) in cartItems" :key="index">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/6c4ab92a43c842d8bb22035bce1f65cc.png" <view class="goods-img" style="width: 120rpx;height: 120rpx;">
alt="" <img :src="cartItem.item.productPicture" alt="" style="border-radius: 10px;width:100%;height:100%;">
style="width:30rpx;height:30rpx;position: absolute;top: 0;left: 0;background-size: 100%;" />
</view> </view>
<view class="goods-content"> <view class="goods-content" style="padding-left: 20rpx;">
<view class="goods-name"> <view class="goods-name">
牛仔农庄(医专店) {{cartItem.item.productName}}
</view> </view>
<view class="goods-content-center"> <view class="goods-content-center">
<view class="goods-deal1"> <view class="goods-deal1" v-if="cartItem.specs">
月售 <text> 100+</text> <text style="color: #999; font-size: 20rpx;">已选规格: {{getSpecDisplayString(cartItem.specs)}}</text>
</view> </view>
</view> </view>
<view class="goods-content-bottom"> <view class="goods-content-bottom" style="margin-top: 10rpx;">
<view style="font-size: 28rpx;line-height: 54rpx;margin-right: 20rpx;flex: 1;"> <view style="font-size: 28rpx;line-height: 54rpx;margin-right: 20rpx;flex: 1;color: red;">
￥90.00 ￥{{cartItem.price}}
</view>
<view class="pintuan-left-price">
拼团<text style="color: red;">￥59.90</text>
</view> </view>
<view class="goods-num"> <view class="goods-num">
<view class="num-plus" style="background: #999;color: #fff;"> <view class="num-plus" style="background: #999;color: #fff;" @tap="adjustCart(cartItem.cartId, -1)">
- -
</view> </view>
<view class="num"> <view class="num">
1 {{cartItem.quantity}}
</view> </view>
<view class="num-plus"> <view class="num-plus" @tap="adjustCart(cartItem.cartId, 1)">
+ +
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</scroll-view>
<view style="width: 100%;height: 160rpx;"></view> <view style="width: 100%;height: 160rpx;"></view>
<view class="bottom" style="padding-bottom: 10px;"> <view class="bottom" style="padding-bottom: 10px;">
<view class="bottom-left"> <view class="bottom-left">
<view style="width: 60rpx;height: 80rpx;margin-top: 10rpx;" @tap="openPopup('car','','')"> <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>
<view class="bottom-price" style="line-height: 24px;"> <view class="bottom-price" style="line-height: 24px;">
<view>￥18.00</view> <view>￥{{cartTotalPrice}}</view>
<view style="font-size: 12px;color: #777;">打包费￥1</view>
</view> </view>
</view> </view>
<view class="bottom-right"> <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> </view>
@ -213,19 +213,19 @@
<!-- 拼团和选规格弹窗 --> <!-- 拼团和选规格弹窗 -->
<uni-popup ref="pintuanPopup" background-color="#fff"> <uni-popup ref="pintuanPopup" background-color="#fff">
<view class="car-content"> <view class="car-content">
<view class="car-close" @tap="$refs.carPopup.close()"> <view class="car-close" @tap="$refs.pintuanPopup.close()">
<uni-icons type="close" size="30" color="#fff"></uni-icons> <uni-icons type="close" size="30" color="#fff"></uni-icons>
</view> </view>
<view class="goods-top"> <view class="goods-top">
<view class="goods-img"> <view class="goods-img">
<img src="/static/images/img/shangpintu.png" alt="" style="border-radius: 10px;"> <img :src="currentItem.productPicture" alt="" style="border-radius: 10px;">
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/6c4ab92a43c842d8bb22035bce1f65cc.png" <img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/6c4ab92a43c842d8bb22035bce1f65cc.png"
alt="" alt=""
style="width:30rpx;height:30rpx;position: absolute;top: 0;left: 0;background-size: 100%;" /> style="width:30rpx;height:30rpx;position: absolute;top: 0;left: 0;background-size: 100%;" />
</view> </view>
<view class="goods-content"> <view class="goods-content">
<view class="goods-name"> <view class="goods-name">
牛仔农庄(医专店) {{currentItem.productName}}
</view> </view>
<view class="goods-content-center"> <view class="goods-content-center">
<view class="goods-deal1"> <view class="goods-deal1">
@ -234,67 +234,52 @@
</view> </view>
<view class="goods-content-bottom"> <view class="goods-content-bottom">
<view style="font-size: 28rpx;line-height: 54rpx;margin-right: 20rpx;"> <view style="font-size: 28rpx;line-height: 54rpx;margin-right: 20rpx;">
￥90.00 ￥{{currentItem.attributeListPrice | sliceMsg}}
</view> </view>
<view class="pintuan-left-price"> <view class="pintuan-left-price" v-if="currentItem.productGroupBuyPrices && currentItem.productGroupBuyPrices.length > 0">
拼团<text style="color: red;">￥59.90</text> 拼团<text style="color: red;">￥{{currentItem.productGroupBuyPrices | slicePrice}}起</text>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<view class="goods-spec"> <scroll-view scroll-y style="max-height: 50vh;">
<view class="spec1"> <view class="goods-spec" v-if="parsedSpecs.length > 0">
<view class="spec1" v-for="(spec, sIndex) in parsedSpecs" :key="sIndex">
<view class="spec11"> <view class="spec11">
选择食材1 选{{spec.name}}
</view> </view>
<view class="spec22" > <view class="spec22" >
<view class="spec222"> <view :class="spec.selected === option ? 'spec-check' : 'spec222'"
炸鸡块 v-for="(option, oIndex) in spec.options"
</view> :key="oIndex"
<view class="spec-check"> @tap="selectSpec(sIndex, option)">
炸鸡块 {{option}}
</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> </view>
</view> </view>
<template v-if="isPintuan && currentItem.productGroupBuyPrices && currentItem.productGroupBuyPrices.length > 0">
<view class="spec11"> <view class="spec11">
成团选择 成团选择
</view> </view>
<view class="goods-team"> <view class="goods-team">
<view :class="selectedGroupRule && selectedGroupRule.groupCount === rule.groupCount ? 'team-check' : 'team1'"
<view class="team1"> v-for="(rule, rIndex) in currentItem.productGroupBuyPrices" :key="rIndex"
<view class="team11"> @tap="selectGroupRule(rule)">
￥16.00
</view>
<view class="team11">
二人团
</view>
</view>
<view class="team-check">
<view class="team11"> <view class="team11">
￥15.00 ￥{{parseFloat(rule.groupPrice).toFixed(2)}}
</view> </view>
<view class="team11"> <view class="team11">
三人团 {{rule.groupCount}}人团
</view> </view>
</view> </view>
</view> </view>
<view class="spec11"> <view class="spec11">
他们都在拼 他们都在拼
</view> </view>
<!-- 占位假数据展示 -->
<view class=""> <view class="">
<view class="goods-center"> <view class="goods-center">
<view class="list-right"> <view class="list-right">
@ -305,79 +290,35 @@
</view> </view>
<view class="list-right-cha"> <view class="list-right-cha">
<view class="cha11"> <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>
<view class=""> <view class="">
差<text style="color: red;">1人</text>拼成 差<text style="color: red;">1人</text>拼成
</view> </view>
</view> </view>
<view class="list-right-price"> <view class="list-right-price">
￥15.00 去凑单
</view> </view>
</view> </view>
<view class="list-btn"> <view class="list-btn" @tap="submitPintuan">
拼团 去拼单
</view> </view>
</view> </view>
</view> </view>
</template>
<view style="width: 100%;height: 160rpx;"></view> <view style="width: 100%;height: 160rpx;"></view>
<view class="bottom" style="padding-bottom: 10px;height: 80px;"> </scroll-view>
<view class="bottom" style="padding-bottom: 20px;height: 80px;z-index: 10;">
<view v-if="isPintuan" class="pintuan1"> <view v-if="isPintuan" class="pintuan1">
<view class="pintuan2" style="border-bottom-left-radius: 50px;border-top-left-radius: 50px;"> <view class="pintuan2" style="border-bottom-left-radius: 50px;border-top-left-radius: 50px;" @tap="submitPintuan">
面对面团 面对面团
</view> </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);"> <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">
拼团购买￥15.00 拼团购买￥{{selectedGroupRule && selectedGroupRule.groupPrice ? parseFloat(selectedGroupRule.groupPrice).toFixed(2) : '0.00'}}
</view> </view>
</view> </view>
<view v-else class="pintuan0"> <view v-else class="pintuan0" @tap="submitAddToCart">
直接购买 加入购物车
</view> </view>
</view> </view>
</view> </view>
@ -389,16 +330,28 @@
export default { export default {
data() { data() {
return { return {
loadStatus: 'more',
type:'', type:'',
shopId:'', shopId:'',
shopItem:{}, shopItem:{},
productItem:{},
productId:'', productId:'',
productItem:[], productItem:[],
buyCar:new Map(), cartItems: [],
currentItem: {},
parsedSpecs: [],
selectedGroupRule: {},
pageNum:1, pageNum:1,
total:1,
// 导航栏高度（用于sticky top偏移）
navBarHeight: 0,
// 分类栏距离页面顶部的距离（用于上滑检测）
menuListOffsetTop: 0,
lastScrollTop: 0,
// 防止切换分类之后onPageScroll闪回的标志
isSwitching: false,
searchForm:{ searchForm:{
shopId:'', shopId:'',
delFlag: 1,
pageNum: 1, pageNum: 1,
pageSize: '10', pageSize: '10',
categoryId:'' categoryId:''
@ -414,6 +367,14 @@
}, },
components: { components: {
},
computed: {
cartTotalCount() {
return this.cartItems.reduce((acc, curr) => acc + curr.quantity, 0);
},
cartTotalPrice() {
return this.cartItems.reduce((acc, curr) => acc + (curr.quantity * curr.price), 0).toFixed(2);
}
}, },
filters: { filters: {
sliceMsg(val) { sliceMsg(val) {
@ -445,38 +406,91 @@
return begin; return begin;
} }
}, },
onPageScroll(e) {
const scrollTop = e.scrollTop;
const isScrollingUp = scrollTop < this.lastScrollTop;
// 向上滑到靠近页面顶部时（背景头图区域），切换到上一个分类
// 门槛用 80px：用户需要明确地滑回头部较大区域，避免误触发
if (isScrollingUp && scrollTop < 80 && !this.isSwitching) {
const currIdx = this.menuList.findIndex(m => m.checked);
if (currIdx > 0) {
this._switchCategory(currIdx - 1);
}
}
this.lastScrollTop = scrollTop;
},
onReachBottom() {
// 当前分类还有更多页时，继续加载
if (this.searchForm.pageNum < this.total) {
this.searchForm.pageNum++;
this.getProduct(this.searchForm.categoryId);
return;
}
// 当前分类已是最后一页，自动切换到下一分类
const currIdx = this.menuList.findIndex(m => m.checked);
if (currIdx !== -1 && currIdx < this.menuList.length - 1) {
this._switchCategory(currIdx + 1);
}
},
onLoad(option) { onLoad(option) {
this.type = option.type this.type = option.type;
if(this.type == 'shop'){ if (this.type == 'shop') {
this.shopItem = JSON.parse(option.item) this.shopItem = JSON.parse(option.item);
}else{ } else {
this.productItem = JSON.parse(option.item) this.productItem = JSON.parse(option.item);
} }
this.getCategory(this.shopItem.id) this.getCategory(this.shopItem.id);
this.getProduct('') this.getProduct('');
}, },
onShow() { onShow() {
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect() this.menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// 计算导航栏高度用于sticky offset：statusBarHeight + 44px内容区
const info = uni.getSystemInfoSync();
this.navBarHeight = info.statusBarHeight + 44;
},
onReady() {
// 记录分类栏相对页面的偏移量，用于上滑检测
setTimeout(() => {
const query = uni.createSelectorQuery().in(this);
query.select('#menuList').boundingClientRect(rect => {
if (rect) this.menuListOffsetTop = rect.top + this.lastScrollTop;
}).exec();
}, 500);
}, },
methods: { methods: {
getProduct(categoryId){ getProduct(categoryId) {
let that = this let that = this;
this.searchForm.shopId = this.shopItem.id this.loadStatus = 'loading';
this.searchForm.categoryId = categoryId this.searchForm.shopId = this.shopItem.id;
this.searchForm.categoryId = categoryId;
that.tui.request("/app/product/getShareList", "POST", this.searchForm, false, false).then((res) => { that.tui.request("/app/product/getShareList", "POST", this.searchForm, false, false).then((res) => {
that.loadStatus = 'nomore';
if (res.code == 200) { if (res.code == 200) {
if (that.pageNum == 1) { if (that.searchForm.pageNum == 1) {
that.productItem = res.result.records that.productItem = res.result.records;
} else { } else {
that.productItem = [...that.productItem, ...res.result.records] that.productItem = [...that.productItem, ...res.result.records];
} }
that.$forceUpdate() console.log(res.result.records)
that.total = res.result.pages; // pages = 总页数
that.pageNum = that.searchForm.pageNum;
// 当前分类没有商品，自动跳过到下一个分类
// 注意：这里不能用isSwitching拦戚，因为_switchCategory本身已置 isSwitching=true
if (res.result.records.length === 0) {
const currIdx = that.menuList.findIndex(m => m.checked);
if (currIdx !== -1 && currIdx < that.menuList.length - 1) {
// 重置锁再跳过，防止连锁导致永远跳不过
that.isSwitching = false;
that._switchCategory(currIdx + 1);
}
}
that.$forceUpdate();
} else { } else {
that.tui.toast(res.message) that.tui.toast(res.message);
return return;
} }
uni.hideLoading() uni.hideLoading();
}).catch((res) => {}) }).catch((res) => {});
}, },
getCategory(id){ getCategory(id){
let that = this let that = this
@ -498,33 +512,163 @@
uni.hideLoading() uni.hideLoading()
}).catch((res) => {}) }).catch((res) => {})
}, },
checkTab(index){ // 内部切换方法：带isSwitching保护，防止程序化滚动期间闪回
for(let i=0;i<this.menuList.length;i++){ _switchCategory(index) {
if(i == index){ if (this.isSwitching) return;
this.menuList[i].checked = true this.isSwitching = true;
}else{ this.checkTab(index);
this.menuList[i].checked = false // 400ms后解除锁（动画200ms，预留200ms缓冲）
} setTimeout(() => { this.isSwitching = false; }, 400);
} },
checkTab(index) {
for (let i = 0; i < this.menuList.length; i++) {
this.menuList[i].checked = (i === index);
}
// 重置分页
this.searchForm.pageNum = 1;
this.pageNum = 1;
this.total = 1;
this.productItem = [];
this.getProduct(this.menuList[index].id); this.getProduct(this.menuList[index].id);
// 滚动到正确位置：分类栏刚好吸顶在nav-bar下方
// menuListOffsetTop - navBarHeight 使分类栏正好在sticky位置，首条商品可见
const target = this.menuListOffsetTop - this.navBarHeight;
uni.pageScrollTo({ scrollTop: target > 0 ? target : 0, duration: 200 });
}, },
openPopup(type,index,item){ openPopup(type,index,item){
if(type == 'car'){ if(type == 'car'){
this.$refs.carPopup.open('bottom') this.$refs.carPopup.open('bottom')
}else if(type == 'xiadan'){ }else if(type == 'xiadan'){
if(index == 'pintuan'){ this.currentItem = item;
this.isPintuan = true // Parse specifications
}else{ this.parsedSpecs = [];
this.isPintuan = false if(item.attributeList && item.attributeList !== '{}') {
try {
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({
name: key,
options: attrs[key].title,
selected: attrs[key].title[0] // Default select first
});
}
}
} catch(e) {
console.error("Failed to parse specifications", e);
} }
if(item.attributeList == '' || item.attributeList == null){
this.buyCar.has(item.id)
}else{
this.$refs.pintuanPopup.open('bottom')
} }
if(index == 'pintuan'){
this.isPintuan = true;
// Set default group rule
if(item.productGroupBuyPrices && item.productGroupBuyPrices.length > 0) {
this.selectedGroupRule = item.productGroupBuyPrices[0];
} else {
this.selectedGroupRule = {};
}
this.$refs.pintuanPopup.open('bottom');
} else {
this.isPintuan = false;
// If solo buy and NO specs, add immediately to cart
if(this.parsedSpecs.length === 0) {
this.addToCart(item, null);
uni.showToast({ title: '已加入购物车', icon: 'none' });
} else {
// Open popup to select specs
this.$refs.pintuanPopup.open('bottom');
}
}
} }
}, },
selectSpec(sIndex, option) {
this.parsedSpecs[sIndex].selected = option;
this.$forceUpdate();
},
selectGroupRule(rule) {
this.selectedGroupRule = rule;
},
submitAddToCart() {
let specChoices = {};
for (let spec of this.parsedSpecs) {
specChoices[spec.name] = spec.selected;
}
this.addToCart(this.currentItem, specChoices);
uni.showToast({ title: '已加入购物车', icon: 'none' });
this.$refs.pintuanPopup.close();
},
submitPintuan() {
let specChoices = {};
for (let spec of this.parsedSpecs) {
specChoices[spec.name] = spec.selected;
}
// Pack data for checkout
let goData = {
item: this.currentItem,
groupRule: this.selectedGroupRule,
specs: specChoices
};
// Directly navigate to checkout
uni.navigateTo({
// Update this url to actual checkout path
url: '/package1/goods/confirmPintuanOrder?item=' + encodeURIComponent(JSON.stringify(goData))
});
this.$refs.pintuanPopup.close();
},
addToCart(item, specs) {
let specStr = specs ? JSON.stringify(specs) : '';
let cartId = item.id + '_' + specStr;
let existingItem = this.cartItems.find(c => c.cartId === cartId);
if(existingItem) {
existingItem.quantity++;
} else {
let priceToUse = 0;
if(item.attributeListPrice) {
try {
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; }
}
} catch(e){}
}
this.cartItems.push({
cartId: cartId,
item: item,
specs: specs,
quantity: 1,
price: priceToUse.toFixed(2)
});
}
},
adjustCart(cartId, delta) {
let index = this.cartItems.findIndex(c => c.cartId === cartId);
if(index !== -1) {
let newQty = this.cartItems[index].quantity + delta;
if(newQty <= 0) {
this.cartItems.splice(index, 1);
} else {
this.cartItems[index].quantity = newQty;
}
}
},
getSpecDisplayString(specs) {
if(!specs) return '';
let arr = [];
for(let k in specs) { arr.push(specs[k]); }
return arr.join(',');
},
submitCartCheckout() {
if(this.cartItems.length === 0) {
uni.showToast({ title: '购物车为空', icon: 'none' });
return;
}
// 类似普通订单结算逻辑
uni.navigateTo({
url: '/package1/goods/confirmOrder?cart=' + encodeURIComponent(JSON.stringify(this.cartItems))
});
},
goDetail(type) { goDetail(type) {
if (type == 'goodsDetail') { if (type == 'goodsDetail') {
uni.navigateTo({ uni.navigateTo({
@ -564,30 +708,34 @@
position: relative; position: relative;
} }
/* 顶部背景图随页面滚动（不固定） */
.title { .title {
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/9362dfb66c0f426789584cabb3977ccc.png') no-repeat; background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat;
width: 100%; width: 100%;
height: 700rpx; height: 340rpx;
background-size: 100%; background-size: 100% 100%;
position: fixed;
top: 0;
z-index: -1;
} }
.title-sreach { /* 固定在顶部的导航栏，覆盖在背景图上 */
width: 75%; .nav-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex; display: flex;
height: 200rpx; align-items: center;
z-index: 100;
padding: 8px 12px;
box-sizing: border-box;
} }
.title-search { .title-search {
margin-top: 110rpx;
display: flex; display: flex;
background: #fff; flex: 1;
background: rgba(255,255,255,0.9);
height: 54rpx; height: 54rpx;
margin-left: 20rpx; margin-left: 20rpx;
border-radius: 54rpx; border-radius: 54rpx;
width: 460rpx;
input { input {
height: 54rpx; height: 54rpx;
@ -596,11 +744,20 @@
} }
.back-btn { .back-btn {
padding-top: 110rpx; display: flex;
align-items: center;
justify-content: center;
width: 60rpx;
height: 60rpx;
background: rgba(0,0,0,0.25);
border-radius: 50%;
} }
/* content 上移，叠在背景图下方，减少头部空白 */
.content { .content {
margin-top: 430rpx; margin-top: -150rpx;
position: relative;
z-index: 1;
} }
.shop-img { .shop-img {
@ -766,7 +923,9 @@
width: 95%; width: 95%;
height: auto; height: auto;
border-radius: 20rpx; border-radius: 20rpx;
margin: 20rpx auto 20rpx; margin: 0 auto 20rpx;
/* padding-top等于分类栏高度，防止商品内容被sticky栏遮住 */
padding-top: 10px;
} }
.goods-top { .goods-top {
@ -1119,11 +1278,17 @@
margin-bottom: 5px; margin-bottom: 5px;
} }
.menu-list{ .menu-list{
height: 35px; height: 45px;
width: 100%; width: 100%;
overflow-x: scroll; overflow-x: scroll;
display: flex; display: flex;
overflow-y: hidden; overflow-y: hidden;
position: sticky;
top: 0;
z-index: 90;
background: #F5F8F5;
align-items: center;
padding-bottom: 4px;
} }
.checked-img{ .checked-img{
width: 90px; width: 90px;

Write Preview
Loading…
Cancel
Save