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.price}}
</view>
<view class="flex flex-direction align-end">
<view @click="show=true" class="edit margin-bottom-xs">
<text class="iconfont icon-bianjishuru"></text>
</view>
1磅(450g) X 1
</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="">
草莓
<view class="margin-tb-xs"> Caomei </view>
Y199
</view>
</view>
<view class="flex justify-between padding-tb u-border-bottom">
<view class="">
规格选择
</view>
<view class="">
1 磅
</view>
</view>
<view class="flex justify-between align-center padding-tb u-border-bottom">
<view class="">
数量选择
</view>
<u-number-box button-size="36"></u-number-box>
</view>
</view>
<view class="flex margin-top">
<button type="default" class="cu-btn lg bg-brown">取消</button>
<button 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">
共计:189
</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
}
},
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
})
}
}
}