<template>
|
<!-- 购物车 -->
|
<uni-popup ref="popup" type="bottom">
|
<view class="popup-content">
|
<view class="popup-header">
|
<text class="blue">已选商品</text>
|
<view class="flex align-center">
|
<text class="iconfont iconlajixiang_huaban1 gray"></text>
|
<text class="gray font-14" @click="_reset">清空</text>
|
</view>
|
</view>
|
<scroll-view scroll-y="true" class="popup-row-wrap">
|
<view class="popup-row"v-for="item in list">
|
<image class="popup-row-img" mode="aspectFill" :src="item.img?item.img:'../../../static/images/no-img.png'"></image>
|
<view class="flex-1">
|
<text>{{item.name}}</text>
|
<view class="flex justify-between">
|
<text class="price">剩余{{item.count}}</text>
|
<view class="right">
|
<template v-if="item.num">
|
<text class="iconfont iconjian blue-outline-btn-circle mr-10"
|
@click.stop="_decreaseGoods(item)"></text>
|
<text>{{item.num}}</text>
|
</template>
|
<text class="iconfont iconjia blue-btn-circle ml-10"
|
@click.stop="_addGoods(item)"></text>
|
</view>
|
</view>
|
</view>
|
</view>
|
</scroll-view>
|
</view>
|
</uni-popup>
|
</template>
|
|
<script>
|
import uniPopup from '@/components/uni-popup/uni-popup.vue'
|
export default{
|
components:{
|
uniPopup
|
},
|
props:{
|
list: {
|
default: []
|
}
|
},
|
data(){
|
return{
|
isShow: false
|
}
|
},
|
methods:{
|
toggle(){
|
if(!this.list.length){
|
return;
|
}
|
this.isShow = !this.isShow;
|
if(this.isShow){
|
this.$refs.popup.open();
|
}else{
|
this.hide();
|
}
|
},
|
hide(){
|
this.$refs.popup.close();
|
},
|
_addGoods(item){
|
this.$emit('addGoods', item);
|
},
|
_decreaseGoods(item){
|
this.$emit('decreaseGoods', item);
|
if(!this.list.length){
|
this.hide()
|
}
|
},
|
_reset(){
|
this.$emit('reset');
|
this.hide()
|
}
|
}
|
}
|
</script>
|
|
<style>
|
|
.popup-content{
|
background: #FFFFFF;
|
border-top-left-radius: 8px;
|
border-top-right-radius: 8px;
|
padding-bottom: 54px;
|
}
|
.popup-header{
|
display: flex;
|
justify-content: space-between;
|
padding: 10px;
|
border-bottom: 1px solid #EDEAF4;
|
font-size: 16px;
|
}
|
.popup-header .iconfont{
|
font-size: 22px;
|
}
|
.popup-row-wrap{
|
max-height: 330px;
|
padding: 7px 0;
|
}
|
.popup-row{
|
display: flex;
|
align-items: center;
|
padding: 7px 10px;
|
font-size: 12px;
|
}
|
.popup-row-img{
|
width: 42px;
|
height: 42px;
|
margin-right: 10px;
|
}
|
.popup-row .price{
|
color: #a5abaf;
|
margin-top: 5px;
|
}
|
</style>
|
