uniapp 学习笔记二十四 购物车编辑弹窗页面搭建

uniapp 学习笔记二十四 购物车编辑弹窗页面搭建

cart.vue

 
<script>
    import {mapState,mapMutations,mapGetters} from 'vuex'
	export default {
		data() {
			return {
				show:false
			}
		},
        computed: {
            ...mapState({
                cartList:state=>state.cart.cartList 
            }),
            ...mapGetters({
                allInfo:'cart/allInfo'
            })
        },
        methods:{
            ...mapMutations({
                handleCheck:'cart/cartCheckMut',
                handleAllCheck:'cart/cartAllCheckMut'                
            })
        }
	}
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%);
}
 
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"
            },{
                id:"10090",
                twoId:10089,
                name:"拿破仑草莓",
                french:"Napoleon aux fraises",
                price:"218.00",
                tid:11,
                tname:'限定',
                isCheck:false,
                img:"/static/logo.png"
            }
            ]
        }
    },
    getters:{
        allInfo(state){
            let allCheck = true
            state.cartList.forEach(item=>{
                if(!item.isCheck){
                    allCheck = false
                }
            })
            return {allCheck}
        }
    },
    mutations:{
        cartCheckMut(state,idx){ // 单选
            state.cartList[idx].isCheck = !state.cartList[idx].isCheck
        },
        cartAllCheckMut(state,bool){ // 全选 bool 是原本的全选状态
            state.cartList.forEach(item=>{
                item.isCheck = !bool
            })
        }
    }
}