mpvue 购物车功能+左滑删除
<template>
<view>
<div class="no_order" v-show="order_">
<img src="../../../static/images/no-shopcar.png" alt="">
<div>您的购物车有点寂寞</div>
<div class="btn">
<span @click="toMenu">寻找美食</span>
</div>
</div>
<div class="have_order" v-show="!order_">
<div v-for="(list,index) in test" @touchstart="touchStart($event)" @touchend="touchEnd($event,index)" :data-type="list.type" :key="index">
<input type="radio" :id="list.pid">
<label :for="list.pid">
<img src="../../../static/images/no-radio-blue.png" alt="" style="width: 40rpx;height: 40rpx;" v-show="!list.radio_click" @click="change_radio(index)">
<img src="../../../static/images/yes-radio-blue.png" alt="" style="width: 40rpx;height: 40rpx;" v-show="list.radio_click" @click="change_radio(index)">
</label>
<span class="dishName" @click="recover(index)">
{
{list.name}}
<span class="taste">{
{list.mark}}</span>
<span class="money_count">
￥<!-- {
{list.money}} -->{
{list.money*list.count}}
<img src="../../../static/images/subtract.png" alt="" class="subtract" @click="list.count>1?list.count--:list.count">
{
{list.count}}
<img src="../../../dist/wx/img/add.png" alt="" class="add" @click="list.count++"></span>
</span>
<div class="delect" @click="delect(index)">
删除
</div>
</div>
</div>
<div style="height:82rpx;width: 100%;"></div>
<div class="closeaccount" v-show="!order_">
应付合计 <span class="allcount" >￥{
{getTotal.totalPrice}}</span>
<span class="pay">去结算</span>
</div>
</view>
</template>
js
export default {
data () {
return {
test:[
{'name':'大果粒','mark':'微辣','money':14,'pid':'one','radio_click':true,'count':1,top:false,type:0},
{'name':'小果粒','mark':'微辣/小份','money':18,'pid':'two','radio_click':true,'count':4,top:false,type:0},
{'name':'大饼','mark':'微辣/小份/单人份','money':2,'pid':'three','radio_click':true,'count':1,top:false,type:0},
{'name':'大果粒','mark':'微辣','money':14,'pid':'one','radio_click':true,'count':1,top:false,type:0},
{'name':'小果粒','mark':'微辣/小份','money':28,'pid':'two','radio_click':true,'count':2,top:false,type:0},
{'name':'大饼','mark':'微辣/小份/单人份','money':32,'pid':'three','radio_click':true,'count':1,top:false,type:0},
{'name':'大果粒','mark':'微辣','money':11,'pid':'one','radio_click':true,'count':1,top:false,type:0},
{'name':'小果粒','mark':'微辣/小份','money':18,'pid':'two','radio_click':true,'count':1,top:false,type:0},
{'name':'大饼','mark':'微辣/小份/单人份','money':2,'pid':'three','radio_click':true,'count':1,top:false,type:0}
],
order_:false,
}
},
components: {
},
computed:{
getTotal:function(){
var prolist = this.test.filter(function (val) { return val.radio_click});
console.log(prolist)
var totalPri = 0;
//打勾的
for (var i = 0 ; i < prolist.length; i++) {
totalPri+=prolist[i].money*prolist[i].count;
}
//所有的 包括没打勾的
// for (var i = 0 ; i < this.test.length; i++) {
// totalPri+=this.test[i].money*this.test[i].count;
// }
return {totalNum:prolist.length,totalPrice:totalPri}
},
},
methods: {
change_radio(num){
this.test[num].radio_click = !this.test[num].radio_click;
},
toMenu(){
const url = "../menu/main";
if(mpvuePlatform === 'wx'){
mpvue.switchTab({url})
}else{
mpvue.navigateTo({url})
}
},
// 滑动开始
touchStart(e){
// 获取当前点击位置
this.startX = e.mp.changedTouches[0].clientX;
},
// 滑动结束
touchEnd(e,index){
// 获取移动后距位置
this.endX = e.mp.changedTouches[0].clientX;
//滑动距离 开始减去移动后 正数左滑 负数右滑
if(this.startX-this.endX > 10){
for(let i=0;i<this.test.length;i++){
this.test[i].type = 0;
}
this.test[index].type = 1;
}
else if(this.startX-this.endX < -10){
for(let i=0;i<this.test.length;i++){
this.test[i].type = 0;
}
}
},
// 点击回复原状
recover(index){
this.test[index].type = 0;
},
// 删除
delect(index){
this.test.splice(index,1);
}
},
created () {
// let app = getApp()
}
}
css
div[data-type="0"]{transform: translate3d(0,0,0);}
div[data-type="1"]{transform: translate3d(-120rpx,0,0);}
.delect{position: absolute;top: 0;right: -15%;width: 15%;height: 120rpx;line-height: 120rpx;background-color: #FF3B32;color: #fff;font-size: 34rpx;text-align:center}
.closeaccount>span.pay{height: 80rpx;display: inline-block;background: #42A3C7;color: #fff;line-height: 80rpx;font-size: 28rpx;width: 200rpx;float: right;text-align: center;}
.closeaccount>span.allcount{font-size: 35rpx;color: #000;}
.closeaccount{position: fixed;bottom: 0;left: 0;width: 97%;height: 80rpx;border-top: 1px solid #f1f1f1;line-height: 100rpx;padding-left: 3%;font-size: 26rpx;color: #666;background: #fff;}
.money_count{float: right;margin-right: 20rpx;margin-top: 10rpx;}
.add{margin-left: 15rpx;}
.subtract{margin-right: 15rpx;margin-left: 15rpx;}
.have_order>div .dishName>span>img{width: 40rpx;height: 40rpx;vertical-align: middle;}
.have_order>div .dishName>span.taste{font-size: 22rpx;color: #666;position: absolute;top: 30rpx;left: 10%;}
.have_order>div .dishName{font-size: 28rpx;color: #000;display: inline-block;width: 90%;margin-left: 10%;height: 120rpx;line-height: 100rpx;border-bottom: 1px solid #d1d1d1;}
.have_order>div>label{position: absolute;top: 40rpx;left: 20rpx;}
.have_order>div>input{display: none;}
.have_order>div{position: relative;}
/* 没有东西 */
.no_order .btn>span{display: inline-block;margin-top: 50rpx;height: 60rpx;line-height: 60rpx;width: 180rpx;border: 1px solid #42a3c7;color: #42A3C7;}
.no_order>img{width: 180rpx;height: 180rpx;}
.no_order{width: 100%;margin-top: 230rpx;text-align: center;font-size: 24rpx;color: #d1d1d1;}