提示:以下是本篇文章正文内容,下面案例可供参考
一、自定义导航栏
<template>
<view class='shop-cart'>
<!--自定义导航栏-->
<uniNavBar
title='购物车'
:right-text=' isNavBar?"完成":"编辑" '
fixed='true'
status-bar='true'
@clickRight=' isNavBar = !isNavBar '
></uniNavBar>
</view>
</template>
<script>
import uniNavBar from '@/components/uni/uni-nav-bar/uni-nav-bar.vue'
export default {
data() {
return {
isNavBar:false
}
},
components:{
uniNavBar
},
methods: {
}
}
</script>
二、内容布局
<!--商品内容-->
<view class='shop-list'>
<view class='shop-item' v-for='(item,index) in list' :key='index'>
<label class="radio">
<radio value="" color="#FF3333"/><text></text>
</label>
<image class='shop-img' :src="item.imgUrl" mode=""></image>
<view class='shop-text'>
<view class='shop-name'>{{item.name}}</view>
<view class='shop-color f-color'>{{item.color}}</view>
<view class='shop-price'>
<view>¥{{item.pprice}}</view>
<view>*{{item.num}}</view>
</view>
</view>
</view>
</view>
<!--底部-->
<view class='shop-foot'>
<label class="radio foot-radio">
<radio value="" color='#FF3333'/><text>全选</text>
</label>
<view class='foot-total'>
<view class='foot-count'>合计:<text class='f-active-color'>¥0</text></view>
<view class='foot-num'>结算(0)</view>
</view>
</view>
</view>
<style scoped>
.shop-list{
padding-bottom:100rpx;
}
.shop-item{
display: flex;
padding:20rpx;
align-items: center;
background-color: #F7F7F7;
margin-bottom:10rpx;
}
.shop-img{
width:200rpx;
height: 200rpx;
}
.shop-text{
flex:1;
padding-left:20rpx;
}
.shop-color{
font-size:24rpx;
}
.shop-price{
display: flex;
justify-content: space-between;
}
.shop-foot{
border-top:2rpx solid #F7F7F7;
background-color: #FFFFFF;
position: fixed;
bottom:0;
left:0;
width:100%;
height: 100rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
.foot-radio{
padding-left:20rpx;
}
.foot-total{
display: flex;
}
.foot-count{
line-height: 100rpx;
padding:0 20rpx;
font-size:32rpx;
}
.foot-num{
background-color: #49BDFB;
color:#FFFFFF;
padding:0 60rpx;
line-height: 100rpx;
}
</style>
三、vuex管理状态
mkdir store/modules
vim index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
//购物车
import cart from './modules/cart.js'
export default new Vuex.Store({
modules:{
cart
}
})
cart.js
export default{
state:{
list:[
Shopcart.vue
computed:{
...mapState({
list:state=>state.cart.list
})
四、购物车无商品样式
<template v-if=' list.length > 0 '>
<template v-else>
<uniNavBar title='购物车' status-bar='true' fixed='true'></uniNavBar>
<view class='shop-else-list'>
<text>囧~购物车还是空的~</text>
</view>
</template>
.shop-else-list{
position: absolute;
left:0;
top:0;
right:0;
bottom:0;
background-color: #F7F7F7;
display: flex;
align-items: center;
justify-content: center;
}
五、全选和全不选
cart.js
getters:{
//判断是否 全选
checkedAll(state){
return state.list.length === state.selectedList.length;
}
},
mutations:{
//全选
checkAll(state){
state.selectedList = state.list.map(v=>{
v.checked = true;
return v.id;
})
},
//全不选
unCheckAll(state){
state.list.forEach(v=>{
v.checked = false;
})
state.selectedList = [];
}
},
actions:{
checkedAllFn({commit,getters}){
getters.checkedAll ? commit("unCheckAll") : commit("checkAll");
}
}
Shopcart.vue
<label class="radio">
<radio value="" color="#FF3333" :checked="item.checked"/><text></text>
</label>
<label class="radio foot-radio" @tap='checkedAllFn'>
<radio value="" color='#FF3333' :checked="checkedAll"/><text>全选</text>
</label>
<script>
import uniNavBar from '@/components/uni/uni-nav-bar/uni-nav-bar.vue'
import {mapState,mapActions,mapGetters} from 'vuex'
export default {
data() {
return {
isNavBar:false
}
},
computed:{
...mapState({
list:state=>state.cart.list
}),
...mapGetters(['checkedAll'])
},
components:{
uniNavBar
},
methods: {
...mapActions(['checkedAllFn'])
}
}
</script>
六、单选
Shopcart.vue
<label class="radio" @tap='selectedItem(index)'>
<radio value="" color="#FF3333" :checked="item.checked"/><text></text>
</label>
cart.js
//单选
selectedItem(state,index){
let id = state.list[index].id;
let i = state.selectedList.indexOf(id);
//如果selectedList已经存在就代表他之前是选中状态, checked=false,并且在selectedList删除
if( i > -1 ){
state.list[index].checked = false;
return state.selectedList.splice(i,1);
}
//如果之前没有选中,checked=true , 把当前的id添加到selectedList
state.list[index].checked = true;
state.selectedList.push(id);
}
七、合计价格
totalCount(state){
let total = {
pprice:0,
num:0
}
state.list.forEach(v=>{
//是否选中
if(state.selectedList.indexOf(v.id) > -1){
//合计
total.pprice += v.pprice*v.num;
//结算数量
total.num = state.selectedList.length;
}
})
return total;
}
八、编辑和完成的数量功能
Shopcart.vue
uniNumberBox 修改数据
<template v-if='!isNavBar'> //完成的状态
<view>*{{item.num}}</view>
</template>
<template v-else> // 修改
<uniNumberBox
:value='item.num'
min='1'
@change='changeNumber($event,index)'
>
</uniNumberBox>
</template>
<template v-if='!isNavBar'>
<view class='foot-total'>
<view class='foot-count'>合计:<text class='f-active-color'>¥{{totalCount.pprice}}</text></view>
<view class='foot-num'>结算({{totalCount.num}})</view>
</view>
</template>
<template v-else>
<view class='foot-total'>
<view class='foot-num' style="background-color: #000000;">移入收藏夹</view>
<view class='foot-num'>删除</view>
</view>
</template>
九、商品删除功能
Shopcart.vue
<template v-else>
<view class='foot-total'>
<view class='foot-num' style="background-color: #000000;">移入收藏夹</view>
<view class='foot-num' @tap='delGoodsFn'>删除</view>
</view>
</template>
mutations:{
delGoods(state){
state.list = state.list.filter(v=>{
return state.selectedList.indexOf(v.id) === -1;
})
}
},
actions:{
checkedAllFn({commit,getters}){
getters.checkedAll ? commit("unCheckAll") : commit("checkAll");
},
delGoodsFn({commit}){
commit('delGoods');
commit('unCheckAll');
uni.showToast({
title:'删除成功',
icon:"none"
})
}
}
十、加入购物车
1、details.vue
<view class='pop-num'>
<view>购买数量</view>
<UniNumberBox
min='1'
:value='num'
@change='changeNumber'
></UniNumberBox>
</view>
methods
...mapMutations(['addShopCart']),
//改变商品数量
changeNumber(value){
this.num = value;
},
//跳转到购物车页面
goShopCart(){
uni.switchTab({
url:'../shopcart/shopcart'
})
},
//加入购物车
addCart(){
let goods = this.goodsContent;
this.goodsContent['checked'] = false;
this.goodsContent['num'] = this.num;
//加入购物车
this.addShopCart(goods);
//隐藏弹出框
this.hidePop();
//提示信息
uni.showToast({
title:"成功加入购物车",
icon:'none'
})
}
跳转到购物车页面
<!--底部-->
<view class='details-foot'>
<view class='iconfont icon-xiaoxi'></view>
<view class='iconfont icon-gouwuche' @tap='goShopCart'></view>
<view class='add-shopcart' @tap='showPop'>加入购物车</view>
<view class='purchase' @tap='showPop'>立即购买</view>
</view>
2、cart.js
mutation添加
mutations:{
delGoods(state){
state.list = state.list.filter(v=>{
return state.selectedList.indexOf(v.id) === -1;
})
},
//加入购物车
addShopCart(state,goods){
state.list.push(goods);
}
},
问题数据重复添加,没有合并,后端的地方要改一下