uni-app微信公众号（3）—

在上一篇文章中，我只是大概的介绍了一下我的购物车页面和功能，具体的实现，将会在本篇文档中详细介绍。

（1）选中、全选

购物车中的选中，调用vuex中写的代码，要改变选中，和全选的状态，还要动态改变合计的金额。

代码如下：

HTML代码

<!-- 单选按钮 -->
<u-checkbox-group><u-checkbox @change="goodCheckedProduct(item.id)" v-model="item.checked" :key="item.id":name="item.id"></u-checkbox>
</u-checkbox-group><!-- 全选，合计金额，选中数量 -->
<view class="submitBar"><view class="left"><u-checkbox shape="circle" v-model="checked">全选</u-checkbox></view><view class="right"><text class="total-price">合计：<text class="money">￥{{totalPrice}}</text></text><u-button class="jsBtn" size="mini" @click="toSettlement" type="warning">去祭祀                                                                ({{allSelectProduct}})</u-button></view>
</view>

JS代码

computed: {...mapGetters(['cartProducts', 'totalPrice', 'allSelectProduct', 'isSelectAll']),checked: {get() {return this.isSelectAll;},set(value) {console.log(value);this.goodCheckedAllProduct(value)}}},
methods: {...mapActions(['add', 'del', 'open', 'reduce', 'input']),...mapMutations(['goodCheckedProduct', 'goodCheckedAllProduct']),
}

其中需要注意的是，在computed(){}方法中，checked:{}函数，是为了v-model绑定的值是一个变量，是无法应用 filter 的，如果需要应用filter(过滤的)，所以要是有get(),set(),方法来双向绑定实现。

（2）更改数量、删除

数量的更改，使用uView中的<u-number-box>组件

代码如下：

<view class="footerBtn"><u-number-box :index="item.id" v-model="item.num" :positive-integer="true" :input-height="46" :input-width="100" :min="1" @blur="changeNum" @minus="changeNum" @plus="changeNum"></u-number-box>
</view>

商品的删除，是使用<u-swipe-action>的滑动删除

代码如下

// 删除
deleteGoods(id) {this.$refs.uToast.show({title: '已移除此商品',type: 'warning',})this.del(id);
},

上面就是对我代码的拆分来解析的，下面我贴出我的全部代码

<template><view class="carClass"><!-- 商品卡片栏 --><view class="goodsClass"><u-empty class="noData"  :show="cartGoodsList.length == 0" text="购物车为空" mode="car"></u-empty><!-- @open="open(index)"  --><u-swipe-action :show="item.show" :index="index" v-for="(item, index) in cartGoodsList" :key="item.id"@click="deleteGoods(item.id)" @open="open(index)" @close="open(index)" :options="options"><view class="chengboxs"><u-checkbox-group><u-checkbox @change="goodCheckedProduct(item.id)" v-model="item.checked" :key="item.id":name="item.id"></u-checkbox></u-checkbox-group></view><view class="item u-border-bottom"><image mode="aspectFill" :src="item.icon" /><!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 --><view class="title-wrap"><text class="title u-line-2">{{ item.title }}</text></view><view class="footerClass"><text class="price">￥{{ item.price }}</text><text class="mPrice">￥{{ item.mPrice }}</text><view class="footerBtn"><u-number-box :index="item.id" v-model="item.num" :positive-integer="true" :input-height="46" :input-width="100" :min="1" @blur="changeNum" @minus="changeNum" @plus="changeNum"></u-number-box></view></view></view></u-swipe-action></view><!--  --><view class="submitBar"><view class="left"><u-checkbox shape="circle" v-model="checked">全选</u-checkbox></view><view class="right"><text class="total-price">合计：<text class="money">￥{{totalPrice}}</text></text><u-button class="jsBtn" size="mini" @click="toSettlement" type="warning">去祭祀({{allSelectProduct}})</u-button></view></view><u-toast ref="uToast" /></view>
</template><script>import {mapState,mapGetters,mapActions,mapMutations} from 'vuex';export default {data() {return {checkBox: [], //选中的商品goodsList: [],noReduce: false,btnWidth: 180,show: false,number2: 3,options: [{text: '删除',style: {backgroundColor: '#dd524d'}}]};},onLoad() {},computed: {...mapState({cartGoodsList: state => state.cart.addCartList}),...mapGetters(['cartProducts', 'totalPrice', 'allSelectProduct', 'isSelectAll']),checked: {get() {return this.isSelectAll;},set(value) {console.log(value);this.goodCheckedAllProduct(value)}}},methods: {...mapActions(['add', 'del', 'open', 'reduce', 'input']),// 删除，仅打开一个，增加，减少...mapMutations(['goodCheckedProduct', 'goodCheckedAllProduct', 'getLocalstoreData']),// 删除deleteGoods(id) {this.$refs.uToast.show({title: '已移除此商品',type: 'warning',})this.del(id);},// 输入数量changeNum(data) {console.log(data);let id = data.index;let num = data.value;this.input({id,num});},//结算toSettlement() {// this.$u.toast(`立即祭祀(暂未实现，请期待)`);//去代祭祀页面this.$u.route({type: 'to',params: {},url: 'pages/view/personalFunction/personalSacrificialService/personalSSComponent/personal_replaceSac',animationType: 'slide-in-bottom'});},},mounted() {this.getLocalstoreData();// console.log(this.cartGoodsList);}}
</script>
<style>/* #ifndef H5 */page {width: 100%;height: 100%;background-color: #f2f2f2;}/* #endif */
</style>
<style lang="scss">.carClass{width: 100%;height: 100%;}.goodsClass{width: 100%;height: 100%;margin-bottom: 120rpx ;}.noData{padding-top: 50%;text-align: center;}.item {display: flex;padding: 20rpx 20rpx 20rpx 10rpx;}image {width: 120rpx;flex: 0 0 120rpx;height: 120rpx;margin-right: 30rpx;border-radius: 12rpx;}.title {text-align: left;font-size: 28rpx;color: $u-content-color;margin-top: 20rpx;}.chengboxs {width: 60rpx;padding: 66rpx 0 0 29rpx;height: 120rpx;float: left;}.footerClass {position: absolute;width: 93.5%;display: flex;top: 100rpx;left: 155rpx;height: 56rpx;.price {font-size: 26rpx;color: #ff1030;width: 80rpx;height: 56rpx;line-height: 56rpx;padding-right: 10rpx;}.mPrice {font-size: 24rpx;color: #a2a2a2;width: 80rpx;height: 56rpx;line-height: 56rpx;text-decoration: line-through;}.footerBtn {// padding-left:170rpx;padding-left: 126rpx;display: flex;.btn {width: 50rpx;height: 50rpx;}.inputClass {width: 50rpx;height: 50rpx;padding: 0rpx !important;}}}.submitBar {display: flex;position: fixed;border: solid 2rpx #f2f2f2;background-color: #ffffff;padding: 16rpx;bottom: 10rpx;border-radius: 16rpx;width: 100%;.left {width: 23%;padding-left: 20rpx;}.right {width: 75%;padding-top: 6rpx;.total-price {.money {font-weight: 600;}}.jsBtn {float: right;}}}
</style>

（3）vuex中购物车相关代码

import jsGoodsData from '@/static/data/jsGoods.js';
import Vue from 'vue';
//初始化数据
const state = {shop_list: jsGoodsData.map((list, i) => {return list.foods;}).reduce((a, b) => {return a.concat(b);}),addCartList: [],};
// getter 抛出去的数据
const getters = {// 计算选中合计 getters中可以调用getterstotalPrice: (state, getters) => {return state.addCartList.reduce((total, n) => {// console.log(n);if (n.checked) {return total += n.price * n.num;}return total;}, 0);},//计算选中商品数量(只计算选中)allSelectProduct: (state, getters) => {return state.addCartList.reduce((total, n) => {if (n.checked) {return total + n.num;}return total;}, 0);},// 计算选中商品数量(全部)allCartGoods: (state, getters) => {return state.addCartList.reduce((total, n) => {return total + n.num;}, 0);},// 判断是否全选isSelectAll: (state) => {return state.addCartList.every(n => {return n.checked;});},// 获取选中的数据getCheckedGoods: (state) => {return state.addCartList.filter(list => {if (list.checked) return list})}
};
// action 异步的操作
const actions = {add({commit}, product) {commit('addToCart', {product: product});},del({commit}, product) {commit('delProduct', {id: product});},open({commit}, product) {commit('openProduct', {index: product});},reduce({commit}, product) {commit('reduceGoodProduct', {id: product});},input({commit}, product) {commit('inputProduct', {id: product.id,num: product.num,});},
};
//mutation
const mutations = {// 添加到购物车操作addToCart(state, {product}) { //解析idconsole.log(product);let record = state.addCartList.find(n => n.id == product.id);if (!record) {state.addCartList.push({...product,num: 1});} else {record.num++;}// console.info(record, state.addCartList);localStorage.setItem('cartList', JSON.stringify(state.addCartList));},// 获取缓存getLocalstoreData(state) {if (localStorage.getItem('cartList')) {state.addCartList = JSON.parse(localStorage.getItem('cartList')).map(item => Object.assign({}, item));}},// 删除购物车中的指定商品delProduct(state, {id}) {state.addCartList.forEach((n, i) => {if (n.id == id) {state.addCartList.splice(i, 1);}});localStorage.setItem('cartList', JSON.stringify(state.addCartList));},// 仅打开一个滑动openProduct(state, {index}) {console.log(index);state.addCartList[index].show = !state.addCartList[index].show;console.log(state.addCartList);state.addCartList.map((val, idx) => {if (index != idx) {state.addCartList[idx].show = false;}});localStorage.setItem('cartList', JSON.stringify(state.addCartList));},// 减少商品数据reduceGoodProduct(state, {id}) {state.addCartList.forEach((n, i) => {if (n.id == id) {n.num <= 1 ? 1 : n.num--;}});localStorage.setItem('cartList', JSON.stringify(state.addCartList));},// 输入框输入inputProduct(state, {id,num}) {let record = state.addCartList.find(n => n.id == id);if (record) {record.num = num;console.log('更新后的值' + record.num);}localStorage.setItem('cartList', JSON.stringify(state.addCartList));},// 改变商品的选中状态goodCheckedProduct(state, id) {// console.log(state.addCartList);const cartItem = state.addCartList.find(item => item.id == id);cartItem.checked = !cartItem.checked;localStorage.setItem('cartList', JSON.stringify(state.addCartList));console.log(state.addCartList);},// 改变商品的全选状态goodCheckedAllProduct(state, status) {state.addCartList.forEach(item => {item.checked = status;});localStorage.setItem('cartList', JSON.stringify(state.addCartList));console.log(state.addCartList);}
};
export default {state,mutations,actions,getters
};

以上就是我购物车的功能，文章内容有什么错误的地方，望斧正，谢谢~

uni-app微信公众号（3）——购物车相关推荐

平板电脑安装软件_题宝典软件升级了，微信公众号版不受影响，电脑版/手机APP/平板APP需要重新下载安装...
亲爱的小伙伴们大家好题宝典软件升级了那我们应该升级题库软件呢? 我们来一起看看一.微信公众号版进入步骤关注本公众号(tbd339),点击菜单栏的"做题中心",如下图,然 ...
做App还是微信公众号，你该如何抉择？
我不够聪明,因为我经常出于好奇被自己提出的问题所困扰,于是乎就有些强迫症似的拼命去寻求答案--我只是想说服自己,让自己从困扰的谜团中清醒.坚定方向,进而能从容不迫的走下去... 最近在考虑一个问题:做 ...
张小龙做微信公众号APP，对自媒体是祸还是福？
1月15日,2018微信公开课PRO版在广州举行,腾讯高级副总裁.微信创始人张小龙现身现场并发表演讲,他宣布了下一步的微信战略:即将推出微信公众号APP,以及恢复赞赏功能,并倾向于赞赏作者等等.此外, ...
商城前端模板_如何理解微信小程序和微商城,微信公众号以及APP之间的关系？一张图看懂了！...
老张的一位粉丝,花了几天时间把知乎里面分享的一些关于微信小程序,微信商城,微信公众号,以及APP的相关介绍全看完了. 然后用他自己的话描述了微信小程序和微商城,微信公众号以及APP之间的关系,如下图所 ...
微信公众号成本分析服务器,分析：为什么微信公众号用户获取成本比App还高?...
根据当前的市场价格,微信公众号的单用户获取成本一般要3-5元,有些垂直类型的号,或通过地推方式甚至能到十几块.而安卓App单用户获取成本是1-5块钱,iOS的单用户获取成本高一些,一般也才3-10元. ...
微信公众号，JS-SDK获取位置信息，并调起第三方地图App导航
微信公众号关联网页获取位置信息,可以参照<微信公众平台技术文档>-> 微信JS-SDK说明文档,官方链接地址:https://mp.weixin.qq.com/wiki?t=reso ...
微信公众号开发系统入门教程之公众号与小程序、APP的区别
一.概述 APP.公众号.小程序,这是现在最流行且实用的三类系统.最近准备给我们公司开发一个微信公众号,我昨天对微信公众号做了一个细致的了解,现在我就来和大家说一说他们的区别联系. 先说一下公众号与A ...
APP跳转微信小程序，跳转微信公众号
一.判断手机是否安装了微信的工具类: //判断手机是否安装了某些程序的工具类 public class IsInstallUtils {//判断是否安装了微信public static boolean ...
微信公众号助手android,微信团队发布微信公众号订阅号助手App
原标题:微信团队发布微信公众号订阅号助手App " 微信团队发布「订阅号助手」App,支持公众号运营者在手机上发表内容.查看和回复消息.管理已关注用户和帐号.暂时只支持iOS平台,Andro ...
微信公众号会替代手机APP吗？
昨晚和一群朋友聚会,一位做电商的创始人宣称,他已经在微信公众号的运营中吸引了大量的用户,并达成了客观的交易量,他认为公众号将能取代90%的手机APP,"赶紧转行吧",他笑着对一帮以 ...

uni-app微信公众号（3）——购物车

（1）选中、全选

（2）更改数量、删除

（3）vuex中购物车相关代码

uni-app微信公众号（3）——购物车相关推荐

最新文章

热门文章