uni-app——规格选择判断库存(类似电商商品加购)
背景需求:当用户下单时需要选择设定的规格,同时根据库存判断是否可以选择,可以选择按钮高亮显示,不可以选择按钮禁用。
实现逻辑:进去商品页面时即获取当前商品的所有库存信息和规格列表,点击按钮时组合当前点击的规格,与后台获取的规格组合进行比对,相同时再判断库存,没有库存禁用按钮,有库存则高亮显示。
核心代码:
class ="detail_page" v-cloak :class="isShowPopup? 'popup-show': ''">"topInfo.title" :url="topInfo.url" :icon_title="topInfo.icon_title" :type="topInfo.type"> class="pages" v-cloak> class="info scroll_item" id="scroll0"> class="banner_top"> "swiperConfig"> class="page_info page_item"> class="price"> class="large">{{listData.price}} 元起class="title">{{listData.name}} class="sub_title">强效清洗,全面爱家,重新焕发地毯新生 class="form_box page_item"> ref="signUpform" :value="signUpformData" :rules="rules"> "小区" name="housing_id" style="display: none;"> "地址" name="user_address_id" @tap="goAddress"> class="picker_lable">{{address}} "规格" name="flag" @tap="chorceSpecs"> class="picker_lable">{{specs}} "时间" name="start_time" @tap="openDatetimePicker"> class="picker_lable">{{signUpformData.start_time}} class="details scroll_item " id="scroll1" style="padding-bottom:80px;"> "color: #a29696;margin-bottom: 20rpx; text-align: center;">——详情—— class="page_detail page_item" v-html="detail_content" style="margin-bottom:70px;"> {{detail_content}} class="footer"> class="service" mode="aspectFit" @tap="callPhone" src="../../static/images/service.png"> class="byButton" form-type="submit" @tap="handleBuy">立即购买 class="fixedtop" v-show="scrollDistance > 100"> class="fixedtop_box"> for="(item,index) in fixedList" :key="index" :class="{'active':currentIndex == index}" @tap="changeactive(index)">{{item.name}} ref="popup" type="bottom" :mask-click="false"> class="specs_box spec-shade"> class="specs_box_box"> class="title"> class="title">请选择服务规格 class="spec-cont"> class="goods-choose-show flex-star"> class="goods-choose-show-right" v-if="currentItem"> ¥{{currentItem.price || 0}}
库存{{currentItem.all_count || 0}}件 class="spec-linebox" style="max-height: 550rpx;overflow-y: scroll;"> class="spec-item" v-for="(skuItem,skuIndex) in skuInfo"> {{skuItem.title}}
class="item-cont flex-star"> for="(item,index) in skuItem.option" :class="[item.isShow ? '' : 'noProduct',subIndex[skuIndex] == item.id ? 'act' : '']" @click="item.isShow ? specificationBtn(item.info,skuIndex,item.id) : disabled">{{item.info}} ref="myPicker" @submit="handleSubmit" :start-year="year" :end-year="year+20" />
规格判断库存难点:
1、开始的逻辑是点击一次获取一次后台库存再判断按钮是否高亮或禁用,此方法不通,因为库存判断和按钮点击是同步进行的,不能异步判断。
2、按钮的高亮和禁用一定是在点击按钮的同时就判断,不能分开,否则就会乱。
商品详情页面锚点滚动判断:不要使用scroll-view组件 不要使用scroll-view组件 不要使用scroll-view组件 重要的事情说三遍,,这个组件有bug 用了之后页面滚动有问题,总是会卡顿并且总是有双层滚动条还找不到是哪个模块出的问题。。直接使用uniapp内置方法 onPageScroll() 监听滚动距离即可。