温馨提示：这篇文章已超过443天没有更新，请注意相关的内容是否还可用！
摘要：本篇文章介绍了使用uniapp框架结合uView组件UI实现小程序购物车选购功能的过程。通过uView的丰富组件库，开发者能够便捷地构建购物车的选购界面，提供用户友好的购物体验。该实现方式有助于快速开发跨平台的小程序，并提升开发效率和用户体验。
uniapp实现小程序购物车选购功能
点击付款未选中商品，会提示’请选择商品’
商品设置购买数最低为’0’，再点击’—‘号按钮提示’不能再减了’
商品的发售量为可购买商品的最大个数，当选择到发售量数值再点击’+‘号按钮系统就会提示’库存不足啦！’
购物车主体代码部分
全选 总价:￥{{cartTotalPrice}}元 付款 export default { data() { return { title: '', inputValue:'', totalprice:0, list:[], lessonLine:{ lazyLoad:true }, nowTime:'', countDown:30, countDownTimeout:null }; }, created(){ this.onSearch() }, computed:{ // 购物车商品总价 cartTotalPrice(){ // 计算list列表中所有选中商品的价格 var sum=0 this.list.forEach(el=>{ sum=el.totalprice+sum }) return sum } }, methods: { onSearch() { this.list=[{id:'1',name:'西瓜',imgName:'../../static/fruitimg/西瓜.jpeg',approveStatus:'01',status:'宁夏',requirement:'0',salesvolume:10,wholesaleprice:5,totalprice:0,isChecked:false}, {id:'2',name:'榴莲',imgName:'../../static/fruitimg/榴莲.jpeg',approveStatus:'02',status:'马来西亚',requirement:'0',salesvolume:9,wholesaleprice:29,totalprice:0,isChecked:false}, {id:'3',name:'芒果',imgName:'../../static/fruitimg/芒果.jpeg',approveStatus:'03',status:'泰国',requirement:'0',salesvolume:8,wholesaleprice:9,totalprice:0,isChecked:false}, {id:'4',name:'苹果',imgName:'../../static/fruitimg/苹果.jpeg',approveStatus:'04',status:'新疆',requirement:'0',salesvolume:7,wholesaleprice:6,totalprice:0,isChecked:false}, {id:'5',name:'橘子',imgName:'../../static/fruitimg/橘子.jpeg',approveStatus:'05',status:'四川',requirement:'0',salesvolume:6,wholesaleprice:4,totalprice:0,isChecked:false}, {id:'6',name:'莲雾',imgName:'../../static/fruitimg/莲雾.jpeg',approveStatus:'06',status:'台湾',requirement:'0',salesvolume:6,wholesaleprice:30,totalprice:0,isChecked:false}, {id:'7',name:'葡萄',imgName:'../../static/fruitimg/葡萄.jpeg',approveStatus:'07',status:'云南',requirement:'0',salesvolume:6,wholesaleprice:12,totalprice:0,isChecked:false}, {id:'8',name:'桃子',imgName:'../../static/fruitimg/桃子.jpeg',approveStatus:'08',status:'陕西',requirement:'0',salesvolume:6,wholesaleprice:7,totalprice:0,isChecked:false}, {id:'9',name:'椰子',imgName:'../../static/fruitimg/椰子.jpeg',approveStatus:'09',status:'海南',requirement:'0',salesvolume:6,wholesaleprice:16,totalprice:0,isChecked:false}, {id:'10',name:'香蕉',imgName:'../../static/fruitimg/香蕉.jpeg',approveStatus:'10',status:'广东',requirement:'0',salesvolume:6,wholesaleprice:3,totalprice:0,isChecked:false}, {id:'11',name:'火龙果',imgName:'../../static/fruitimg/火龙果.jpeg',approveStatus:'11',status:'广西',requirement:'0',salesvolume:6,wholesaleprice:6,totalprice:0,isChecked:false}, ] // this.list.forEach((item,index)=>{ // item.imgName=require("../../static/"+parseInt(index+1)+".jpeg") // }) }, editinfoBtn(item){ console.log('item',item) uni.navigateTo({ url: '/pages/tabbar/toUser/userinfo?id='+item.id, }) }, // 增加商品数量 add(id) { this.list.forEach(el=>{ if(el.id==id){ if(el.requirement el.requirement++ // 商品小计价格也要改变 el.totalprice=el.requirement*el.wholesaleprice }else{ uni.showToast({ title:'库存不足啦！', icon:'error', }) } } }) }, // 减少商品数量 reduce(id) { this.list.forEach(el={ if(el.id==id){ if(el.requirement>0){ el.requirement-- // 商品小计价格也要改变 el.totalprice=el.requirement*el.wholesaleprice }else{ uni.showToast({ title:'不能再减了！', icon:'error', }) } } }) }, // 提交购物车订单 submitOrder(){ // 判断是否选择购物车商品 var bol=this.list.every(el=>el.isChecked==false) // 列表中未选中提示…… if(bol){ uni.showToast({ title:'请选择商品', icon:'none' }) }else{ // 提交选中的订单列表 var cartList=[]; this.list.forEach(el=>{ if(el.isChecked){ cartList.push(el) } }) // 购物车总价 cartList.totalPrice=this.cartTotalPrice; // 购物车列表（购物车总价、购物车具体商品） console.log(cartList) } }, // 选中某个复选框时，由checkbox时触发 checkboxChange(e) { //console.log(e); }, // 选中任一checkbox时，由checkbox-group触发 checkboxGroupChange(e) { // console.log(e); }, // 全选 checkedAll() { this.list.forEach((item,index)=>{ if(item.isChecked==false){ item.isChecked = true; }else if(item.isChecked==true){ item.isChecked = false; } }) }, toDeail(item){ uni.navigateTo({ url: '/pages/miaofruit/fruitinfo?id='+item.id, }) } } }; .content { background-image: linear-gradient(to top, #accbee 0%, #e7f0fd 100%); text-align: center; height: 400upx; margin-top: 20upx; } .homesteadQuery-time{ height: 100vh; background-image: linear-gradient(to top, #accbee 0%, #e7f0fd 100%); } .appearinCard{ margin: auto; width: 92%; height: 86vh; overflow: scroll; } .appearinCard:active{ -moz-box-shadow:0px 0px 10px #27BF69; box-shadow:0px 0px 10px #27BF69 ; } .cardTitle{ margin: auto; display: flex; padding: 10px 0px 5px 10px; width: 100%; vertical-align: middle; background-color: #F5F5F5; margin-top: 10px; border-radius: 5px; } .titleName{ font-weight: bold; font-size: 15px; } .titleTag{ font-size: 12px; padding: 2px 20px; line-height: 30px; } .cardContent{ width: 120%; margin-top: 5px; padding: 2px 5px; } .cardContent-top{ display: flex; justify-content: space-between; } .cardContent-top-right{ display: flex; } .cardContent-top-buttom{ display: flex; justify-content: space-between; font-size: 10px; padding-top: 20px; } .nameplate{ /* background-color: #C0C4CC;*/ background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%); padding: 2px 8px; border-radius: 3px; } .nameplate-count{ font-weight:800; padding-top: 5px; } .status{ font-size: 10px; padding: 4px 10px; border-radius: 20px; margin: -3px 0px 0px 10px; background: rgba(8,162,201,0.1); text-align: center; display: inline-block; color: #31A6F5; vertical-align: middle; } .success{ background:rgba(24,204,144,0.2); color: #18CC90; } .failed{ background:rgba(255,92,114,0.2); color: #FF5C72; } .gray{ background:rgba(254,195,13,0.2); color: #FFC40D; } .purple{ background:rgba(181,88,253,0.2); color: #B558FD; } .one{ background:rgba(228,130,138,0.2); color:#f78ca0 ; } .two{ background:rgba(115,138,210,0.2); color:#48c6ef ; } .three{ background:rgba(87,179,126,0.2); color:#0ba360 ; } .four{ background:rgba(61,107,134,0.2); color:#13547a ; } .five{ background:rgba(228,81,40,0.2); color:#f83600 ; } .six{ background:rgba(115,216,99,0.2); color:#0fd850 ; } .imgName{ width: 76px; height: 80px; margin:0px 5px 0px 3px; /* border: 0.5px solid #000000;*/ border-radius: 6px; } .reduce{ width: 40rpx; height: 40rpx; background: #F1ECE7; border-radius: 21.6rpx; border-radius: 21.6rpx; color: #979797; font-size: 35rpx; line-height: 40rpx; } .add{ width: 40rpx; height: 40rpx; background: #F1ECE7; border-radius: 21.6rpx; border-radius: 21.6rpx; color: #979797; font-size: 35rpx; line-height: 40rpx; } .cart-count{ width: 72rpx; height: 40rpx; background: #F1ECE7; border-radius: 21.6rpx; border-radius: 21.6rpx; margin-left: 18rpx; margin-right: 18rpx; text-align: center; line-height: 40rpx; } // 底部导航 .tabbar { width: 100%; height: 150rpx; /*background-color: #f3f3f3;*/ background-image: linear-gradient(to top, #feada6 0%, #f5efef 100%); position: fixed; bottom: 0rpx; display: flex; align-items: center; justify-content: space-around; border-top-left-radius:10px; border-top-right-radius:10px; } .all { font-size: 32rpx; color: #3E3E3E; letter-spacing: 2.29rpx; display: flex; } .totalPrice { font-size: 32rpx; color: #3E3E3E; letter-spacing: 2.29rpx; color:red; } .submitOrder { width: 208rpx; height: 80rpx; /*background: #354E44;*/ background-image: linear-gradient(to top, #00c6fb 0%, #005bea 100%); border-radius: 14rpx; border-radius: 14rpx; font-size: 36rpx; color: #FFFFFF; letter-spacing: 2.57rpx; display: flex; align-items: center; justify-content: center; } .submitOrder:hover{ background-image: linear-gradient(to top, #48c6ef 0%, #6f86d6 100%); }{{item.name}}{{item.status}} {{item.status}} {{item.status}} {{item.status}} {{item.status}} {{item.status}} {{item.status}} {{item.status}} {{item.status}} {{item.status}} {{item.status}}- {{item.requirement}} +需求量{{item.requirement}}发售量{{item.salesvolume}}批发价¥{{item.wholesaleprice}}总价{{item.totalprice}}
点击图片显示商品详情信息页面
export default { data(){ return{ //userInfo:{}, icon:'' } }, onLoad(options){ this.getUserInfo(options.id) }, created(){ }, methods:{ getUserInfo(data){ if(data==1){ this.$set(this.userInfo,'name','西瓜🍉'); this.$set(this.userInfo,'chandi','宁夏🇨🇳'); this.$set(this.userInfo,'danjia','¥5'); this.$set(this.userInfo,'guige','大果'); this.$set(this.userInfo,'kouwei','脆甜'); this.$set(this.userInfo,'zhouqi','180天'); this.$set(this.userInfo,'time','5-9月'); this.$set(this.userInfo,'info','麒麟瓜好吃的呢，真好吃😋'); this.icon=require("../../static/fruitimg/西瓜.jpeg") }else if(data==2){ this.$set(this.userInfo,'name','榴莲'); this.$set(this.userInfo,'chandi','马来西亚🇲🇾'); this.$set(this.userInfo,'danjia','¥29'); this.$set(this.userInfo,'guige','大果'); this.$set(this.userInfo,'kouwei','脆甜'); this.$set(this.userInfo,'zhouqi','200天'); this.$set(this.userInfo,'time','5-10月'); this.$set(this.userInfo,'info','猫山王榴莲好吃的呢，真好吃😋'); this.icon=require("../../static/fruitimg/榴莲.jpeg") }else if(data==3){ this.$set(this.userInfo,'name','芒果🥭'); this.$set(this.userInfo,'chandi','泰国🇹🇭'); this.$set(this.userInfo,'danjia','¥9'); this.$set(this.userInfo,'guige','大果'); this.$set(this.userInfo,'kouwei','脆甜'); this.$set(this.userInfo,'zhouqi','160天'); this.$set(this.userInfo,'time','6-9月'); this.$set(this.userInfo,'info','鹰嘴芒好吃的呢，真好吃😋'); this.icon=require("../../static/fruitimg/芒果.jpeg") }else if(data==4){ this.$set(this.userInfo,'name','苹果🍎'); this.$set(this.userInfo,'chandi','新疆'); this.$set(this.userInfo,'danjia','¥6'); this.$set(this.userInfo,'guige','大果'); this.$set(this.userInfo,'kouwei','脆甜'); this.$set(this.userInfo,'zhouqi','110天'); this.$set(this.userInfo,'time','5-9月'); this.$set(this.userInfo,'info','苹果好吃的呢，真好吃😋'); this.icon=require("../../static/fruitimg/苹果.jpeg") }else if(data==5){ this.$set(this.userInfo,'name','橘子🍊'); this.$set(this.userInfo,'chandi','四川'); this.$set(this.userInfo,'danjia','¥4'); this.$set(this.userInfo,'guige','大果'); this.$set(this.userInfo,'kouwei','脆甜'); this.$set(this.userInfo,'zhouqi','120天'); this.$set(this.userInfo,'time','全年供应'); this.$set(this.userInfo,'info','橘子好吃的呢，真好吃😋'); this.icon=require("../../static/fruitimg/橘子.jpeg") }else if(data==6){ this.$set(this.userInfo,'name','莲雾'); this.$set(this.userInfo,'chandi','台湾'); this.$set(this.userInfo,'danjia','¥30'); this.$set(this.userInfo,'guige','大果'); this.$set(this.userInfo,'kouwei','脆甜'); this.$set(this.userInfo,'zhouqi','180天'); this.$set(this.userInfo,'time','8-10月'); this.$set(this.userInfo,'info','莲雾好吃的呢，真好吃😋'); this.icon=require("../../static/fruitimg/莲雾.jpeg") }else if(data==7){ this.$set(this.userInfo,'name','葡萄🍇'); this.$set(this.userInfo,'chandi','云南'); this.$set(this.userInfo,'danjia','¥12'); this.$set(this.userInfo,'guige','大果'); this.$set(this.userInfo,'kouwei','脆甜'); this.$set(this.userInfo,'zhouqi','180天'); this.$set(this.userInfo,'time','全年供应'); this.$set(this.userInfo,'info','葡萄好吃的呢，真好吃😋'); this.icon=require("../../static/fruitimg/葡萄.jpeg") }else if(data==8){ this.$set(this.userInfo,'name','桃子🍑'); this.$set(this.userInfo,'chandi','陕西'); this.$set(this.userInfo,'danjia','¥7'); this.$set(this.userInfo,'guige','大果'); this.$set(this.userInfo,'kouwei','脆甜'); this.$set(this.userInfo,'zhouqi','180天'); this.$set(this.userInfo,'time','5-8月'); this.$set(this.userInfo,'info','桃子好吃的呢，真好吃😋'); this.icon=require("../../static/fruitimg/桃子.jpeg") }else if(data==9){ this.$set(this.userInfo,'name','椰子🥥'); this.$set(this.userInfo,'chandi','海南'); this.$set(this.userInfo,'danjia','¥16'); this.$set(this.userInfo,'guige','大果'); this.$set(this.userInfo,'kouwei','脆甜'); this.$set(this.userInfo,'zhouqi','180天'); this.$set(this.userInfo,'time','6-10月'); this.$set(this.userInfo,'info','椰子好吃的呢，真好吃😋'); this.icon=require("../../static/fruitimg/椰子.jpeg") }else if(data==10){ this.$set(this.userInfo,'name','香蕉🍌'); this.$set(this.userInfo,'chandi','广东'); this.$set(this.userInfo,'danjia','¥4'); this.$set(this.userInfo,'guige','大果'); this.$set(this.userInfo,'kouwei','脆甜'); this.$set(this.userInfo,'zhouqi','3天'); this.$set(this.userInfo,'time','全年供应'); this.$set(this.userInfo,'info','香蕉好吃的呢，真好吃😋'); this.icon=require("../../static/fruitimg/香蕉.jpeg") }else if(data==11){ this.$set(this.userInfo,'name','火龙果'); this.$set(this.userInfo,'chandi','广西'); this.$set(this.userInfo,'danjia','¥6'); this.$set(this.userInfo,'guige','大果'); this.$set(this.userInfo,'kouwei','脆甜'); this.$set(this.userInfo,'zhouqi','120天'); this.$set(this.userInfo,'time','6-11月'); this.$set(this.userInfo,'info','火龙果好吃的呢，真好吃😋'); this.icon=require("../../static/fruitimg/火龙果.jpeg") } } } } .icon{ display: flex; justify-content: center; } .icon img{ width: 150px; height: 118px; border-radius: 8px; margin-bottom: 10px; border: 0.5px solid #000000; }
文章版权声明：除非注明，否则均为VPS857原创文章，转载或复制请以超链接形式并注明出处。
还没有评论，来说两句吧...