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.indexlet currentLogisticsText = e.currentTarget.dataset.logisticsnamelet logisticsType = e.currentTarget.dataset.logisticstypethis.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.statusif (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-srcvar 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.dataif (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<=0){app.wxTips("购物车没有商品，自动返回首页！")wx.switchTab({url: "/pages/index/index"})}else{//获取订单详情this.setData({cartIds: cartIds})app.$post(app.API_BalanceMyCart, {cartIds: cartIds.split(',')}, (res) => {if (res.statusCode == 0) {//自动跳转不能砍，逻辑。。。。竟然会报错if(res.data.length<=0){wx.switchTab({url: "/pages/index/index"})}else{this.setData({goodsList: res.data})//console.log(this.data.goodsList)//console.log("res.data=" + JSON.stringify(res.data));let goodsPrice = 0.00              let goodsNum = 0let couponNum = 0let couponInfoListMap=[]let logisticsList = res.data.logisticsList//开始计算商品总数，总价for (let goods of res.data) {let goodsTotalPrice = (goods.goodsAmount * goods.goodsPrice)goodsTotalPrice = parseFloat(goodsTotalPrice).toFixed(2);goodsPrice += goodsTotalPricegoodsNum += goods.goodsAmountcouponNum = goods.couponNumif(couponNum>=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.00let 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.couponInfoListMaplet userCouponInfo=null;if(couponInfoListMap.length>=1){for (let couponInfo of couponInfoListMap) {//console.log("couponInfo=" + JSON.stringify(couponInfo));if(couponInfo.useConditionsContent<=goodsTotalPrice){if(userCouponInfo==null){//只有1张优惠劵满足条件userCouponInfo=couponInfo;}else{//有多张优惠劵满足条件if(couponInfo.couponAmount>userCouponInfo.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].numthis.setData({[temp]: curGoodNum - 1})//商品价格let curGoodPrice = this.data.goodsList[index].goodsPrice;let tempgoodsPrice = 'goodsList[' + index + '].goodsPrice'  // 获取goodsList[index].numthis.setData({[tempgoodsPrice]:  parseFloat((curGoodPrice/curGoodNum)*(curGoodNum - 1)).toFixed(2)})this.setData({ goodsNum: this.data.goodsNum-1 })this.countTotalPrice()}if (curGoodNum<=1){//提示不能小于0app.wxTips("商品数量不能小于1件")}},add(e) {let index = e.currentTarget.dataset.index  // 获取数据的索引let that=this//商品数量let curGoodNum = this.data.goodsList[index].goodsAmount;let temp = 'goodsList[' + index + '].goodsAmount'  // 获取goodsList[index].numthis.setData({ [temp]: curGoodNum + 1})//商品价格let curGoodPrice = this.data.goodsList[index].goodsPrice;let tempgoodsPrice = 'goodsList[' + index + '].goodsPrice'  // 获取goodsList[index].numthis.setData({[tempgoodsPrice]:  parseFloat((curGoodPrice/curGoodNum)*(curGoodNum + 1)).toFixed(2)})this.setData({ goodsNum: this.data.goodsNum + 1 })this.countTotalPrice()    },saveCartStatus(cartList){//console.log("购物车：")//console.log(cartList)let shoppingCarts = {shoppingCarts:cartList};app.$post(app.API_UpdateCartStatus, shoppingCarts, (res) => {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文件内容

<wxs src="../../../wxs/tools.wxs" module="tools" />
<view class='service-wrap'><view wx:for="{{goodsList}}" wx:key="{{index}}"><view class='goods-wrap'><view id='dataList'><view class='list-top'><!-- 商品 --><view class='goods-list'><view class='goods-img'><image src='{{item.mainImg}}' mode='widthFix' data-src="{{item.mainImg}}" bindtap="enlarge"></image></view><view class='goods-con confirm'><view><view class='goo-left'><view class='order-describe'>{{item.goodsName}}</view></view><view class='goo-right'><view class='order-price'>￥{{item.goodsPrice}}</view>             </view></view><view>              <view class='jiajian'><view class='reduce' data-index='{{index}}' bindtap='reduce'><image src='../../../images/index/icon_reduce.png'></image></view><view class='goodnum'>{{item.goodsAmount}}</view><view class='add' data-index='{{index}}' bindtap='add'><image src='../../../images/index/icon_add.png'></image></view>  <view style="width:70px;"></view> <view class='del-btn' data-id='{{item.cartId}}' bindtap='deleteCart'>删除</view>                  </view></view></view></view></view></view></view><!-- 商品属性 --><view class='price-item'><view class='price-left'><text>颜色分类</text></view><view class='price-right'>{{item.attribute.attributeName}}</view></view></view><view><!-- 配送方式 --><view class='price-item' wx:if="{{goodsInfo.logisticsList.length>0}}"><view class='price-left'><text>配送方式</text></view><view class='price-right'><text class="select-logistics {{index==currentLogisticsIndex?'select-logistics-on':''}}" wx:for='{{goodsInfo.logisticsList}}' wx:key="{{index}}" bindtap="selectLogistics" data-index="{{index}}" data-logisticsname="{{item.logisticsName}}" data-logisticstype="{{item.logisticsType}}">{{item.logisticsName}}</text></view></view><view class='price-item'><view class='price-left'><text>优惠券</text></view><view class='price-right'><text class='coupon'>{{couponUsed}}</text></view></view><view class='buyer-message'><textarea class='fb-area' placeholder="选填，可填写和卖家达成一致的要求" value='{{orderRemarks}}' bindinput="orderRemarks" placeholder-style="color:#ccc"></textarea></view><view class='adress' bindtap='setAddress'><view style='width:120px'>配送地址：</view><view><view>{{receiveName}} {{ receiveMobile}}</view><view>{{receiveAddress}}</view></view><text class=' row-right czs-angle-right-l'></text></view><view class='amount'>共<text>{{goodsNum}}件商品</text></view></view><!-- 实付金额 --><view class='goods-info'><view class='number'><view class='jiajian'><text>{{goodsAmount}}</text></view></view><view class='price-item'><view class='price-left'><text>商品金额</text></view><view class='price-right'><text class='je'>￥{{goodsPrice}}</text></view></view><view class='price-item'><view class='price-left'><text>优惠</text></view><view class='price-right'><text class='je'>-￥{{couponAmount}}</text></view></view><view class='price-item'><view class='price-left'><text>运费</text></view><view class='price-right'><text class='je'>+￥{{goodsLogisticsPrice}}</text></view></view></view><view class='total-price'>合计：￥<text>{{goodsTotalPrice}}</text></view>
</view>
<view class='com-btn' bindtap='payPrice'>确认付款</view>

4.index.wxss文件内容

@import "../../../plugn/caomei/style.wxss";
page{padding-bottom: 70px;}
.tips{font-size:10px;color:#F0AD4E;margin-left:5px;}/* 服务地址 */
.czs-location-l{display: inline-block;}
.address{background-color: #fc6737; color: #FFFFFF; padding: 10px 15px; position: relative;display: flex;}
.service-time{position: absolute; bottom: -25px; background-color: #FFFFFF;border-radius: 5px;left: 10px;right: 10px;height: 50px; color: #fc6737; text-align: center; line-height: 50px;font-size: 14px;}
.service_consignee{flex: 1;font-size: 14px; padding-left: 10px;}
.service_consignee.mb{margin-bottom: 25px;}
/* .service_consignee .consignee{}
.service_consignee .mobile{} *//* 服务项目 */
.conf-title{padding: 10px 15px ;font-size: 14px;color: #333;}
.conf-title.mt{ margin-top: 25px;}
.conf-title.center{text-align: center;margin-top: 0px;}
.conf-title.left{text-align: left;margin-top: 0px;}
.amount{background-color: #f7f7f7; line-height: 30px; text-align: center;font-size: 12px;margin-top: 10px;}
.service-wrap{margin: 0 15px;background: #fff;border-radius: 6px; overflow: hidden; position: relative;padding: 10px 10px 0 10px;}
.goods-wrap{padding-bottom: 10px;border-bottom: #f8f8f8 1px solid;border-top: #f8f8f8 1px solid;}
.price-item{line-height: 30px; display: flex;justify-content: space-between;}
.price-item .price-right{padding-top: 5px;font-size: 12px;}
.price-item .price-left{width:120px;}
.price-item .price-left text:nth-of-type(1){font-size: 12px;color: #333;}
.price-item .price-left text:nth-of-type(2){font-size: 10px;color: #F0AD4E;margin-left: 5px;}
.total-price{text-align: right; line-height: 40px;border-top: #f8f8f8 1px solid;font-size: 12px;color: #666;}
.total-price text{font-size: 18px;font-weight: bold;}
.dispatch-list{margin-bottom: 10px;}
.dispatch-list view{font-size: 12px;line-height: 20px;margin: 0px;color: #8f8f94;}
.dispatch-list .line{color: #fc6737;margin-left: 10px;}/* 备注 */
.remark-wrap{background: #fff;border-radius: 6px;font-size: 14px;margin: 0 15px;padding:10px;}
.remark-wrap .text{margin-bottom: 6px;}.coupon{ background: #07c160; color: #FFFFFF; padding: 2px 3px; border-radius: 5px}
.buyer-message{ margin-top: 5px; border:1px solid #e5e5e5;}
.buyer-message textarea{font-size: 14px; height: 60px; padding: 5px; border-radius: 5px}
.adress{ font-size: 12px;display: flex;justify-content:space-around; margin-top: 10px}
.adress .row-right{ padding-top: 10px}
.goods-info{ border-top: 1px solid #e5e5e5;border-bottom: 1px solid #e5e5e5; margin-top: 10px}
.goods-info .je{ color: #fc6737}
.pay-btn{text-align: right; height: 40px}
.pay-btn text{ background-color: #07c160;color: #FFFFFF; padding: 5px 8px; border-radius: 5px; font-size: 14px}
.del-btn{ background-color: #07c160;color:#fff;padding-top:2px;padding-left:10px;padding-right:10px;}
.com-btn{ background-color: #07c160;}
.number{display: flex;font-size: 12px;justify-content: space-between; padding-top: 10px}
.select-color{padding-left: 5px;padding-right: 5px;font-size: 12px; border: 1px solid #e5e5e5; display: inline-block;  height: 24px; line-height: 24px; text-align: center; margin: 0 5px;}
.select-color-on{padding-left: 5px;padding-right: 5px;font-size: 12px; color: #fff;background-color: #07c160;}
.select-logistics{padding-left: 5px;padding-right: 5px;font-size: 12px; border: 1px solid #e5e5e5; display: inline-block;  height: 24px; line-height: 24px; text-align: center; margin: 0 5px;}
.select-logistics-on{padding-left: 5px;padding-right: 5px;font-size: 12px; color: #fff;background-color: #07c160;}.jiajian .goodnum{margin-left: 5px; margin-right: 15px;max-width: 35px;text-align: center;}

5.购物车效果截图

后期有时间了，把完整项目分享给大家，欢迎大家留言。

微信小程序实现购物车功能，包含完整小程序代码和运行效果截图相关推荐

微信小程序之购物车功能 1
前言以往的购物车,基本都是通过大量的 DOM 操作来实现.微信小程序其实跟 vue.js 的用法非常像,接下来就看看小程序可以怎样实现购物车功能. 完整的小程序商城demo含购物车,请戳:wxapp ...
微信小程序实战购物车功能
代码地址如下: http://www.demodashi.com/demo/12400.html 一.准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.com ...
微信小程序之购物车功能
前言以往的购物车,基本都是通过大量的 DOM 操作来实现.微信小程序其实跟 vue.js 的用法非常像,接下来就看看小程序可以怎样实现购物车功能. 需求先来弄清楚购物车的需求. 单选.全选和取消, ...
小程序判断数组的index是否为空_微信小程序之购物车功能（仅学习）
购物车,基本都是通过大量的 DOM 操作来实现.微信小程序其实跟 vue.js 的用法非常像,接下来就看看小程序可以怎样实现购物车功能. 需求先来弄清楚购物车的需求. 单选.全选和取消,而且会随着选 ...
微信小程序实现购物车功能
在我的GitHub上有校园二手交易微信小程序的源码,这里面包含了购物车的功能,GitHub地址:https://github.com/zhuyuzhu/Secondhand-goods-on-camp ...
小程序和 web 功能对比_小程序官方推出的Kbone，是如何解决Web 端和小程序同构痛点的？...
小程序作为一种新兴地连接用户与服务的方式,相信大家都或多或少接触过.对于开发者来说,它是一种类似 Web 但又不同于 Web 的开发模式,它提供了一套自定义的 API 和文件组织方式,这无疑带给开发者 ...
小程序和 web 功能对比_小程序的基本知识及功能
"小沃"为客户开发项目中经常遇到客户要求开发小程序,"小沃"也是一个刨根问底的工作狂,从而收集了对"小程序生态变化"市场调研报告,一方面让客 ...
微信小程序图片内容审核功能云函数+小程序端代码完整实现【填坑】
文章目录背景实现技术栈小程序端基本思路主要代码云函数思考主要参考背景开发微信小程序的同学如果涉及了社交类目,应该都会碰到由于缺少内容审核机制导致不过审的情况.微信小程序官方实际上 ...
详解动态规划法(包含完整可用的代码实例)
由于STL库更方便,本文用的是vector,没有用数组. 文中程序可以直接运行,可当做模板进行修改. 目录一.动态规划算法思想二.动态规划处理一维问题(以走台阶为例) 三.动态规划处理二维问题(以 ...

微信小程序实现购物车功能，包含完整小程序代码和运行效果截图

1.index.js文件内容

2.index.json文件内容

3.index.wxml文件内容

4.index.wxss文件内容

5.购物车效果截图

微信小程序实现购物车功能，包含完整小程序代码和运行效果截图相关推荐

最新文章

热门文章