小程序购物车实现uni-app

uni-app 小程序实现购物车，功能完整。

展示效果图

部分

<template><view class="container"><!-- 空白页 --><view v-if="empty===true || cartList =='' " class="empty"><image src="/static/emptyCart.png" mode="aspectFit"></image><view v-if="hasLogin" class="empty-tips">空空如也<navigator class="navigator" v-if="hasLogin" url="../index/index" open-type="switchTab">随便逛逛></navigator></view><view v-else class="empty-tips">空空如也<view class="navigator" @click="navToLogin">去购物吧></view></view></view><view v-else><!-- 列表 --><view class="cat_sp"><text>已加入商品</text></view><view class="cart-list"><block v-for="(item, index) in cartList"  :key="item" ><viewclass="cart-item" ><view class="image-wrapper"><view v-if="item.upperShelves == 0"   class="upperShelves"><image style="width: 40rpx;height: 40rpx;" src="../../static/select.png" mode=""></image></view><view v-elseclass="yticon icon-xuanzhong2 checkbox"  :class="{checked: item.checked}"@click="check('item', index,item)"></view><view class="position_sp" v-if="item.upperShelves == 0"><image :src="item.titlePicStr" @click="cats(item,index)"mode="aspectFill" lazy-load @load="onImageLoad('cartList', index)" @error="onImageError('cartList', index)"></image><image class="LOVE_position_sp" src="../../static/xj.png" mode=""></image></view><image v-else :src="item.titlePicStr" @click="cats(item,index)"mode="aspectFill" lazy-load @load="onImageLoad('cartList', index)" @error="onImageError('cartList', index)"></image></view><view class="item-right"><text class="clamp title">{{item.productName}}</text><text class="attr" v-if="item.upperShelves == 0" style="color:red;">{{item.productSpecs}}</text><text class="attr" v-else>{{item.productSpecs}}</text><view class="sun-add"><view class="sun-tetle"><text class="price">¥{{item.productPrice}}</text> </view><view class="purchase_sMn"><view class="Purchase"><text :class="minusStatus" @click="bindMinus(item)">-</text>  </view><!-- 数值 -->  <view class="purchase_1"><text >{{item.productNum}}</text></view><!-- 加号 -->  <view class="Purchase"><text class="purchase_sub" @click="bindPlus(item)">+</text> </view><!-- <uni-number-boxclass="step":min="1" :max="item.productNum":value="item.productNum>item.productNum?item.productNum:item.productNum":isMax="item.productNum>=item.productNum?true:false":isMin="item.productNum===1":index="index"@eventChange="numberChange"></uni-number-box> --></view></view></view><text class="del-btn yticon icon-fork" @click="deleteCartItem(item)"></text></view></block></view><!-- 底部菜单栏 --><view class="action-section"><view class="checkbox"><image :src="allChecked?'/static/selected.png':'/static/select.png'" mode="aspectFit"@click="check('all')"></image><view class="clear-btn" :class="{show: allChecked}" @click="clearCart">清空</view></view><view class="total-box"><text class="price">¥{{total}}</text><!--  <text class="coupon">已优惠<text>74.35</text>元</text> --></view><button type="primary" class="no-border confirm-btn" @click="createOrder">去结算</button></view></view></view>
</template>

data() {return {minusStatus: 'disabled',empty: false, //空白页现实  true|falsetotal: 0, //总价格allChecked:false, //全选状态  true|falsecartList:[],totalId:[] //商品结算的id };},

methods:{//购物车跳转详情页面cats(item){let proId = item.productIdconsole.log(item)uni.navigateTo({url: '../category_detil/category_detil?id='+proId,}); },//购物车数据展示createOrder(){ //结算方式let _that = this_that.totalId =[]_that.cartList.forEach(function(item,index) {if(item.upperShelves == 0){uni.showToast({title: '请先勾选去掉已下架商品',icon: 'none'})return}if (item.checked){_that.totalId.push(item.shopCatrId)}let types = Object.values(_that.totalId)console.log(Object.values(_that.totalId))})// _that.enterData.forEach(item => {//  if(){}//      item.checked = false;// });if(_that.totalId.length == 0){uni.showToast({title: '请选择要结算的商品',icon: 'none'})}else{let data = {shopCartId:_that.totalId.join(',')}_that.util.request({ url: '/api/order/getOrderParam',method: 'GET',data:data}).then(res => {if(res.code == 200){uni.navigateTo({url: '../shpping_order/shpping_order?shopCartId='+_that.totalId});  }// _that.list = res.data.records });      }},//数据显示//监听image加载完成onImageLoad(key, index) {this.$set(this[key][index], 'loaded', 'loaded');},//监听image加载失败 显示加载图片失败 onImageError(key, index) {console.log(key)console.log(this[key][index].titlePicStr)this[key][index].titlePicStr = '/static/errorImage.jpg';},navToLogin(){ //购物车空空跳转登录uni.switchTab({url: '/pages/category/category'});},//选中状态处理check(type, index,item){console.log(item)if(type === 'item'){this.cartList[index].checked = !this.cartList[index].checked;}else{const checked = !this.allCheckedconst list = this.cartList;list.forEach(item=>{item.checked = checked;})this.allChecked = checked;}this.calcTotal(type);},//数量numberChange(item){this.cartList[item.index].productNum = item.productNum;this.calcTotal();},//删除deleteCartItem(item){console.log(item)let _that = thislet data = {shopCatrId:item.shopCatrId}console.log(item.shopCatrId)_that.util.request({ url: '/api/sale/delShopCart',method: 'POST',data:data}).then(res => {console.log(res)if(res.code == 200){uni.showToast({ title: '删除成功',icon: 'none', duration:1500});}_that.loadData();// _that.list = res.data.records });      },clearCart(){uni.showModal({content: '清空购物车？',success: (e)=>{if(e.confirm){let _that = thislet data = {customerId:uni.getStorageSync('userInfo').id}_that.util.request({ url: '/api/sale/delAllShopCart',method: 'POST',data:data}).then(res => {console.log(res)if(res.code == 200){uni.showToast({ title: '删除成功',icon: 'none', duration:1500});}_that.loadData();// _that.list = res.data.records });        }}})},//计算总价calcTotal(){let list = this.cartList;if(list.length === 0){this.empty = true;return;}let total = 0;let checked = true;list.forEach(item=>{if(item.checked === true){total += item.productPrice * item.productNum;}else if(checked === true){checked = false;}})this.allChecked = checked;this.total = Number(total.toFixed(2));},//退出登录//switch}拿个购物车的数据 在onLoad 初始化一下 上面改成自己的接口就行了

小程序购物车实现uni-app相关推荐

原生微信小程序购物车
原生微信小程序购物车!! 效果: html: <view style="background-color: #eeeeee;height: 100vh;"><vi ...
微信小程序购物车弹出层
https://www.jianshu.com/p/a0c2c8712dab 微信小程序购物车数量加减功能 wxml:  <button bin ...
微信小程序购物车请求服务器数据,微信小程序购物车案例
最近呢,我看到有人在问微信小程序的购物车怎么写,我呢就在这里写一写: 购物车主要的就是全选的判断.勾选单个物品判断是否全选.计算总价效果Gif图: 直接简单粗暴的上代码: wxml代码: 全选 {{ ...
php跳转app,小程序支持跳转app么
小程序支持跳转app. 此功能需要用户主动触发才能打开 APP,所以不由 API 来调用,需要用 open-type 的值设置为 launchApp 的 button 组件的点击来触发. 示例: 小程 ...
微信小程序购物车数量加减功能
微信小程序购物车数量加减功能 wxml  <view class="stepper">  < ...
微信小程序模仿开眼视频app（一）——视频首页、视频详情、分类
可到我的github账号上去copy文件先展示一下我实现了的功能吧提示,如果有出现无法加载域名之类问题的的,可以在"设置"-"项目设置"-打钩"不 ...
控制台应用和空项目有什么区别_互联网小程序的应用以及APP的应用有什么区别及发展...
随时移动互联网进入的千家万户,互联网的手机应用程序也渐渐的在市场上流行起来了.今天主要跟大家谈一下互联网小程序的应用以及APP的应用有什么区别以及未来的发展趋.未来会流行什么手机应用或者APP应用,我 ...
“小程序肯定会取代 App！” | 人物志
作者 | 伍杏玲出品 | CSDN(ID:CSDNnews) 2017 年 1 月 7 日,微信小程序正式面向 C 端用户上线. 在 2016 年 9 月微信便开始授权 200 位开发者参与小程序内 ...
“完美”解决微信小程序购物车抛物动画，在连续点击时出现计算错误问题，定时器停不下来。
"完美"解决微信小程序购物车抛物动画,在连续点击时出现计算错误问题,定时器停不下来. 参考文章: (1)"完美"解决微信小程序购物车抛物动画,在连续点击时出现计 ...
不改一行代码，将微信小程序转成商业App？
Web2.0前期的"眼球经济",即以吸引用户长时间观看内容.使用工具为导向,占有用户的"屏幕时间"(Screen time),从中寻求各种"变现&qu ...

小程序购物车实现uni-app

uni-app 小程序实现购物车，功能完整。

小程序购物车实现uni-app相关推荐

最新文章

热门文章