uniapp 学习笔记二十七购物车总价计算及弹窗交互逻辑完善

cart.vue

<template><view><view class="flex padding" v-for="(item,index) in cartList"><view class="flex align-center"><text @click="handleCheck(index)" :class="['iconfont','icon-youxiajiaogouxuan','margin-right',{'yellow':item.isCheck}]"></text><image class="poster margin-right" :src="item.img" mode=""></image></view><view class="flex justify-between info"><view class="">{{item.name}}<view class="margin-tb-xs">   {{item.french}} </view>Y{{item.list[item.idx].price}}</view><view class="flex flex-direction align-end"><view @click="handleEdit(index)" class="edit margin-bottom-xs"><text class="iconfont icon-bianjishuru"></text></view>{{item.list[item.idx].spec}} X {{item.num}}</view></view></view><!-- 弹窗 --><u-overlay :show="show" @click="show=false"><view class="bg-fff margin cover-cont" @click.stop><view class="padding"><view class="flex justify-between info"><image class="poster margin-right" src="" mode=""></image><view class="">{{cartList[cartIdx].name}}<view class="margin-tb-xs"> {{cartList[cartIdx].french}}    </view>Y{{checkedCartInfo.price}}</view></view><view class="flex justify-between padding-tb u-border-bottom"><view class="">规格选择</view><view class="drop"><view @click="dropShow=true">{{checkedCartInfo.spec}} - {{checkedCartInfo.edible}}<text class="iconfont icon-xiangxiazhankai"></text></view><view v-if="dropShow" class="drop-list bg-fff"><view v-for="(item,index) in cartList[cartIdx].list" class="padding-sm":key="index" @click="handleDropList(index)">{{item.spec}} - {{item.edible}}</view></view></view></view><view class="flex justify-between align-center padding-tb u-border-bottom"><view class="">数量选择</view><u-number-box button-size="36" @change="handleNum"></u-number-box></view></view><view class="flex margin-top"><button @click="show=false" type="default" class="cu-btn lg bg-brown">取消</button><button @click="handleOk" type="default" class="cu-btn lg bg-yellow">确认</button></view></view></u-overlay><view class="fixed bg-fff flex"><view class="flex flex-sub padding align-center"><text @click="handleAllCheck(allInfo.allCheck)" :class="['iconfont', 'icon-youxiajiaogouxuan', 'margin-right-xs',{'yellow':allInfo.allCheck}]"></text>全选<view class="margin-left">共计:{{allInfo.allPrice}}</view></view><view class="bg-yellow padding text-center color-fff">立即结算</view></view></view>
</template><script>import {mapState,mapMutations,mapGetters} from 'vuex'export default {data() {return {show:false,dropShow:false,cartIdx:0, // 主商品序号num:1,//当前弹窗商品数量dropIdx:0 // 子商品序号}},computed: {...mapState({cartList:state=>state.cart.cartList }),...mapGetters({allInfo:'cart/allInfo'}),checkedCartInfo(){ // 过滤下拉选中的商品对象let {cartIdx,cartList,dropIdx} = thisreturn cartList[cartIdx].list[dropIdx]}},methods:{...mapMutations({handleCheck:'cart/cartCheckMut',handleAllCheck:'cart/cartAllCheckMut'}),handleEdit(idx){// 弹窗控制this.cartIdx = idx;this.show=true;this.dropIdx = this.cartList[idx].idx;},handleDropList(dropIdx){ //子商品下拉列表this.dropShow = false;this.dropIdx = dropIdx;},handleOk(){ //弹窗确定            this.show = false;let {cartIdx,dropIdx,num} = this;console.log(cartIdx,dropIdx,num);this.$store.commit('cart/cartListCheckMut',{cartIdx,dropIdx,num});},handleNum({value}){this.num = value;}}}
</script><style lang="scss">
page{padding-bottom: 100upx;
}
.poster{width: 180upx;height: 180upx;background-color: #d8d8d8;
}
.info{width: 60%;.edit{width: 80upx;height: 80upx;text-align: center;line-height: 80upx;background-color: #e6e6e6;border-radius: 50%;}
}
.icon-youxiajiaogouxuan{width: 50upx;height: 50upx;text-align: center;line-height: 50upx;background-color: #e6e6e6;border-radius: 20%;
}
.fixed {position: fixed;bottom: 0;left: 0;width: 100%;box-shadow: 0 0 10upx 2upx rgba(0, 0, 0, 0.2);
}.yellow{background-color: yellow;
}
.cu-btn.lg{width: 50%;
}
.cover-cont{position: absolute;top: 50%;left: 0;width: 690upx;transform: translateY(-50%);border-radius: 10upx;
}
.drop{position: relative;.drop-list{width:300upx;position: absolute;top: 60upx;right: 0;box-shadow: 0 0 10upx 2upx rgba(0, 0, 0, 0.2);z-index: 10;view:hover{background-color: #e6e6e6;}}
}</style>

cart.js

export default {namespaced:true,state(){return {cartList:[{id:"10090",twoId:10089,name:"拿破仑草莓恋爱",french:"Napoleon aux fraises",price:"208.00",isCheck:false,img:"/static/logo.png",list:[{id:10090,sku:"n0201",ahead:'提前5小时预定',edible:"2-3人食用",spec:"1磅",price:"218.00"},{id:10091,sku:"n0202",ahead:'提前5小时预定',edible:"4-7人食用",spec:"2磅",price:"318.00"},{id:10092,sku:"n0203",ahead:'提前5小时预定',edible:"8-12人食用",spec:"3磅",price:"458.00"},{id:10093,sku:"n0204",ahead:'提前5小时预定',edible:"12-20人食用",spec:"5磅",price:"750.00"}],num:1,//商品数量idx:0 //标记选中的子商品信息},{id:"10090",twoId:10089,name:"拿破仑草莓",french:"Napoleon aux fraises",price:"218.00",tid:11,tname:'限定',isCheck:false,img:"/static/logo.png",list:[{id:10090,sku:"n0201",ahead:'提前5小时预定',edible:"2-3人食用",spec:"1磅",price:"218.00"},{id:10091,sku:"n0202",ahead:'提前5小时预定',edible:"4-7人食用",spec:"2磅",price:"318.00"},{id:10092,sku:"n0203",ahead:'提前5小时预定',edible:"8-12人食用",spec:"3磅",price:"458.00"},{id:10093,sku:"n0204",ahead:'提前5小时预定',edible:"12-20人食用",spec:"5磅",price:"750.00"}],num:1, //商品数量idx:0 //标记选中的子商品信息}]}},getters:{/*** 统计信息*/allInfo(state){ let allCheck = truelet allPrice = 0state.cartList.forEach(item=>{if(!item.isCheck){allCheck = false}if(item.isCheck){allPrice += item.list[item.idx].price * item.num}})return {allCheck,allPrice}}},mutations:{cartCheckMut(state,idx){ // 单选state.cartList[idx].isCheck = !state.cartList[idx].isCheck},cartAllCheckMut(state,bool){ // 全选 bool 是原本的全选状态state.cartList.forEach(item=>{item.isCheck = !bool})},cartListCheckMut(state,{cartIdx,dropIdx,num}){ // 子商品下拉确认处理state.cartList[cartIdx].idx = dropIdxstate.cartList[cartIdx].num = num}}
}

uniapp 学习笔记二十七购物车总价计算及弹窗交互逻辑完善相关推荐

uniapp 学习笔记二十二购物车页面结构搭建
uniapp 学习笔记二十二购物车页面结构搭建 cart.vue <template><view><view class="flex padding" ...
Mr.J-- jQuery学习笔记(二十七)--DOM操作方法(删除获取文本)
清除 <body> <button>调用remove</button> <div>我是div<p>我是段落</p> </d ...
Qt学习笔记(二十七)：QLabel 的常用方法
一.QLabel 的构造函数: 1.QLabel(QWidget * parent = 0, Qt::WindowFlags f = 0):创建 QLabel 控件时,指定其父对象,并设置其窗口属性( ...
C++语法学习笔记二十七：引用折叠，转发、完美转发，forward
实例代码 // 引用折叠,转发.完美转发,forward#include <iostream>using namespace std;template<typename T> ...
python学习笔记(二十七) -- 常用内建模块(二) Base64、MD5、SHA1、hmac
目录 base64 hashlib MD5 SHA1 hmac base64 原理 base64就是对二进制数据进行编码,比如我有6字节的二进制数据,然后每3个字节分为一组,也就是一组有3*8 = 2 ...
马哥学习笔记二十七——IO复用
I/O动作模式阻塞非阻塞 I/O复用信号驱动异步转载于:https://www.cnblogs.com/wangyongbin/p/3817353.html
Java学习笔记 (二十七) 使用NIO写文件
使用Channel 写数据代码如下: public static void main(String []args){try(FileOutputStream fos=new FileOutputSt ...
武汉大学-黄如花-信息检索课程学习笔记二
武汉大学-黄如花-信息检索课程学习笔记二一.信息检索基本方法 1.布尔逻辑检索 2.临近检索 3.短语检索(精确检索) 4.截词检索 5.字段限制检索 6.区分大小写的检索二.多种检索方法的综合运 ...
计算鬼成像学习笔记二：二阶关联函数探究
计算鬼成像学习笔记二:二阶关联函数探究 1 一阶关联函数 2 二阶关联函数 3 二阶关联如何重构物体 4 差分鬼成像关联公式 5 归一化鬼成像关联公式 1 一阶关联函数一阶关联函数是光场的电场强度之 ...

uniapp 学习笔记二十七购物车总价计算及弹窗交互逻辑完善

uniapp 学习笔记二十七购物车总价计算及弹窗交互逻辑完善相关推荐

最新文章

热门文章

uniapp 学习笔记二十七 购物车总价计算及弹窗交互逻辑完善

uniapp 学习笔记二十七 购物车总价计算及弹窗交互逻辑完善相关推荐

最新文章

热门文章

uniapp 学习笔记二十七购物车总价计算及弹窗交互逻辑完善

uniapp 学习笔记二十七购物车总价计算及弹窗交互逻辑完善相关推荐