sszdot
e471b5c97c
【原 因】：多处使用此样式 【过 程】：.extra-space这个样式 定义到共有样式表 【影 响】： # 类型 包含: # feat：新功能（feature） # fix：修补bug # docs：文档（documentation） # style： 格式（不影响代码运行的变动） # refactor：重构（即不是新增功能，也不是修改bug的代码变动） # test：增加测试 # chore：构建过程或辅助工具的变动
65 lines
1.7 KiB
Vue
65 lines
1.7 KiB
Vue
<template>
|
|
<view>
|
|
<u-popup :show="cartShow" round="8" mode="bottom" @close="closeCart" zIndex="10070">
|
|
<view class="p-24">
|
|
<!-- title -->
|
|
<view class="flex msb md">
|
|
<view class="fz32">购物车</view>
|
|
<view class="fz24 fcb flex md" @click="showModal = true">
|
|
<u-icon name="trash"></u-icon>
|
|
<text>清空购物车</text>
|
|
</view>
|
|
</view>
|
|
<!-- cartBox -->
|
|
<view class="ofa m-t-12 m-b-12 flex column" style="max-height: 60vh;">
|
|
<u-empty v-if="cartList.length === 0" mode="car" icon="/static/car.png" />
|
|
<!-- cart -->
|
|
<cart v-for="(item,index) in cartList" :key="index" :index="index"/>
|
|
</view>
|
|
<!-- 占位 -->
|
|
<view class="extra-space"></view>
|
|
</view>
|
|
</u-popup>
|
|
<!-- 清空购物车按钮 模态框 -->
|
|
<u-modal :show="showModal" @confirm="confirm" ref="uModal" confirmColor="#d43030" :showCancelButton="true"
|
|
:closeOnClickOverlay="true" @close="showModal=false" @cancel="showModal=false" content="确认清空购物车吗"></u-modal>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "cartFold",
|
|
data() {
|
|
return {
|
|
showModal: false, //清空购物车模态框 显隐
|
|
}
|
|
},
|
|
computed: {
|
|
//购物车列表
|
|
cartList() {
|
|
return this.$store.state.cartList
|
|
},
|
|
//购物车折叠框 显隐
|
|
cartShow() {
|
|
return this.$store.state.cartShow
|
|
}
|
|
},
|
|
methods: {
|
|
//清空购物车
|
|
confirm() {
|
|
this.$store.state.cartList = [] //清空购物车列表
|
|
this.showModal = false //关闭模态框
|
|
},
|
|
//关闭购物车折叠面板
|
|
closeCart() {
|
|
this.$store.state.cartShow = false
|
|
}
|
|
},
|
|
watch: {},
|
|
onReady() {}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
</style> |