微信小程序实现购物车功能，包含完整小程序代码和运行效果截图 |
您所在的位置：网站首页 › 购物程序代码怎么写 › 微信小程序实现购物车功能，包含完整小程序代码和运行效果截图 |
|
微信小程序实现购物车功能，在商场比较常见，今天刚刚做好，效果不错。 下面从js文件，json文件，wxml文件和wxss文件，分享给大家。 直接上代码： 目录 1.index.js文件内容 2.index.json文件内容 3.index.wxml文件内容 4.index.wxss文件内容 5.购物车效果截图 1.index.js文件内容 //获取应用实例 const app = getApp() Page({ data: { remark: '', goodsInfo: {}, receiveName: '', receiveMobile: '', receiveAddress: '', orderRemarks: '', couponUsed:"没有优惠劵", couponAmount: 0,//优惠金额 couponInfoListMap:[], userCouponInfo:null, goodsId: "", openId: "", goodsNum: 0, goodsPrice: 0.0,//商品总金额 goodsLogisticsPrice: 0.0, goodsTotalPrice: 0,//支付金额 currentColorIndex: 0, currentColorId: "", currentColorText: "", currentLogisticsIndex: 0, currentLogisticsType: 0, currentLogisticsText: "", addCart: 0, cartIds: "", goodsList: [], curGoodsNums:{} }, onLoad: function(opt) { app.isLogin((data)=>{ let cartIdsValue = ''; if(opt!=undefined){ cartIdsValue=opt.cartIds; } app.$post(app.API_ShowMyCart, {}, (res) => { let cartIdsTmp = "" for (let goods of res.data) { //console.log("goods.id=" + goods.id); if (cartIdsTmp != ""){ cartIdsTmp = cartIdsTmp+"," } cartIdsTmp = cartIdsTmp + goods.id } cartIdsValue = cartIdsTmp //console.log("cartIds=" + cartIdsValue); this.GetGoodsInfo(cartIdsValue) }); },'1') }, onShow: function(opt){ this.onLoad(); }, selectLogistics(e) { let index = e.currentTarget.dataset.index let currentLogisticsText = e.currentTarget.dataset.logisticsname let logisticsType = e.currentTarget.dataset.logisticstype this.setData({ currentLogisticsIndex: index, currentLogisticsType: logisticsType, currentLogisticsText: currentLogisticsText }) if (logisticsType != 2) { this.setData({ goodsLogisticsPrice: 0 }) this.countTotalPrice() } else { this.getLogisticsFee() } }, getLogisticsFee() { let orderParam = { logisticsType: this.data.currentLogisticsType, receiveAddress: this.data.receiveAddress } app.$post(app.API_getLogisticsFees, orderParam, (res) => { if (res.statusCode == 0) { let dataStatus = res.data.status if (dataStatus == 2) { app.wxTips("没有覆盖，不能下单，请见谅！") } else { this.setData({ goodsLogisticsPrice: res.data.fee }) this.countTotalPrice() } } }) }, callkf(e) { // 联系客服 app.callkf() }, orderRemarks: function(e) { this.setData({ orderRemarks: e.detail.value }) }, payPrice() { this.generateOrder() }, deleteCart: function (e) { let cartId = e.currentTarget.dataset.id; this.saveCartStatus(this.data.goodsList) //console.log("cartId=" + cartId); app.$post(app.API_MoveOutCart, { 'cartIds': [cartId] }, (res) => { if (res.statusCode != 0) { app.wxTips("修改失败！") }else{ app.wxTips("删除成功！") } this.GetGoodsInfo(this.data.cartIds) }) }, enlarge(e) { var src = e.currentTarget.dataset.src;//获取data-src var imgList = [src] //图片预览 wx.previewImage({ current: src, // 当前显示图片的http链接 urls: imgList // 需要预览的图片http链接列表 }) }, generateOrder() { /**生成商户订单 */ if (this.data.receiveMobile == '') { app.wxTips("请选择配送地址！") } else { if (this.data.currentLogisticsType == 2) { this.getLogisticsFee() } let orderList = [] for (let goods of this.data.goodsList) { let goodAttribute = goods.attribute; let attributeName=""; if (goodAttribute != "" && goodAttribute != null && typeof goodAttribute != "undefined") { attributeName = goodAttribute.attributeName; if (attributeName == null || typeof attributeName == "undefined"){ attributeName=""; } } orderList.push({ goodsId: goods.goodsId, goodsAmount: goods.goodsAmount, goodsPrice: goods.goodsPrice, goodsTotalPrice: goods.goodsPrice, receiveName: this.data.receiveName, receiveMobile: this.data.receiveMobile, receiveAddress: this.data.receiveAddress, orderRemarks: this.data.orderRemarks, goodsSku: attributeName, goodsSkuName: attributeName, goodsLogistics: this.data.currentLogisticsText, }) } let couponId=0; let couponPrice=0; if(this.data.userCouponInfo!=null){ couponId=this.data.userCouponInfo.couponId; couponPrice=this.data.userCouponInfo.couponAmount; } let orderParam = { confirmOrders: orderList, cartIds: this.data.cartIds, couponId:couponId, couponPrice:couponPrice } //console.log("立即支付orderParam=" + JSON.stringify(orderParam)); app.$post(app.API_ConfirmCartOrder, orderParam, (res) => { if (res.statusCode == 0) { let orderId = res.data if (orderId != "" && orderId != null && typeof orderId != "undefined") { let paramObj = Object.assign(orderParam, { orderId: orderId, goodsTotalPrice:this.data.goodsTotalPrice }) let paramStr = app.urlStr(paramObj) app.go('../cartorderpay/index' + paramStr) } } else { app.wxTips(res.errorMsg) } }) } }, GetGoodsInfo(cartIds) { if(cartIds==undefined||cartIds==''||cartIds.length { if (res.statusCode == 0) { //自动跳转不能砍，逻辑。。。。竟然会报错 if(res.data.length=1){ couponInfoListMap=goods.couponInfoListMap; } } goodsPrice = parseFloat(goodsPrice).toFixed(2); let receivePerson = res.data[0]; this.setData({ currentLogisticsText: (logisticsList != undefined && logisticsList.length > 0) ? logisticsList[0].logisticsName : "", receiveName: receivePerson.receiveName != undefined ? receivePerson.receiveName : "", receiveMobile: receivePerson.receiveMobile != undefined ? receivePerson.receiveMobile : "", receiveAddress: receivePerson.receiveAddress != undefined ? receivePerson.receiveAddress : "", goodsPrice: goodsPrice, goodsTotalPrice: goodsPrice, couponInfoListMap: couponInfoListMap, goodsNum: goodsNum }); this.countTotalPrice(); } } }) } }, countTotalPrice() { //计算商品价格 let goodsPrice= 0.00 let goodsTotalPrice = 0.00 for (let goods of this.data.goodsList) { //goodsPrice += (goods.goodsAmount * goods.goodsPrice) goodsPrice += (1 * goods.goodsPrice) //console.log("goodsPrice=" + goodsPrice+"//goodsPrice="+goods.goodsPrice); } goodsPrice = parseFloat(goodsPrice).toFixed(2); goodsTotalPrice = parseFloat(goodsPrice).toFixed(2); //console.log("goodsTotalPrice=" + goodsTotalPrice); //判断是否使用优惠劵 let couponInfoListMap=this.data.couponInfoListMap let userCouponInfo=null; if(couponInfoListMap.length>=1){ for (let couponInfo of couponInfoListMap) { //console.log("couponInfo=" + JSON.stringify(couponInfo)); if(couponInfo.useConditionsContentuserCouponInfo.couponAmount){ userCouponInfo=couponInfo; } } } } } if(userCouponInfo!=null){ //console.log("userCouponInfo=" + JSON.stringify(userCouponInfo)); let couponAmount=userCouponInfo.couponAmount; if(couponAmount>=goodsTotalPrice){ couponAmount=goodsTotalPrice; } goodsTotalPrice=goodsTotalPrice-couponAmount; this.setData({ couponUsed: '使用'+couponAmount+'元优惠券', couponAmount:couponAmount, userCouponInfo:userCouponInfo }) }else{ this.setData({ couponUsed: '没有优惠券', couponAmount:0, userCouponInfo:null }) } goodsTotalPrice = parseFloat(goodsTotalPrice).toFixed(2); //最终价格 this.setData({ goodsPrice: goodsPrice, goodsTotalPrice: goodsTotalPrice }) }, setAddress(e) { app.go(`../../my/my-address/index?handler=order`) }, reduce(e) { let index = e.currentTarget.dataset.index // 获取数据的索引 let curGoodNum = this.data.goodsList[index].goodsAmount; if (curGoodNum>=2){ //商品数量 let temp = 'goodsList[' + index + '].goodsAmount' // 获取goodsList[index].num this.setData({[temp]: curGoodNum - 1}) //商品价格 let curGoodPrice = this.data.goodsList[index].goodsPrice; let tempgoodsPrice = 'goodsList[' + index + '].goodsPrice' // 获取goodsList[index].num this.setData({[tempgoodsPrice]: parseFloat((curGoodPrice/curGoodNum)*(curGoodNum - 1)).toFixed(2)}) this.setData({ goodsNum: this.data.goodsNum-1 }) this.countTotalPrice() } if (curGoodNum { if (res.statusCode != 0) { app.wxTips("修改失败！") }else{ app.wxTips("删除成功！") } }) }, callkf(e) { // 联系客服 app.callkf() }, callpjindex(e) { // 跳转到首页 app.go(`/pages/index/index`) } }) 2.index.json文件内容{ "navigationBarTitleText": "购物车" } 3.index.wxml文件内容 |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |