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

Myth丶恋晨 2024-04-07 15:09 66阅读 0赞

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

![1c191f5b17514d95ab067e04bbf3e8e8.png][]

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} = this
                    return 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 = true
                let allPrice = 0
                state.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 = dropIdx
                state.cartList[cartIdx].num = num
            }
        }
    }

[1c191f5b17514d95ab067e04bbf3e8e8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/420396d9604446409d47e9cdf807a44f.png