正文
vue实现结算淘宝购物车效果
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
- 实现单选时的价格，全选时价格
- 单选效果图
- 全选效果图
html
<template>
<!-- 淘宝结算购物车 -->
<div class="settlement-bill">
<div class="settlement-group">
<div class="settlement-item" v-for="(item,index) in items" :key="item.id">
<i class="iconfont"
@click="radioCheck(item,index)"
:class=" item.isChecked ? 'icon-yuanyixuan' : 'icon-yuanweixuan'" ></i>
<img :src="item.imgUrl" alt="">
<div class="item-right">
<p>{{item.content}}</p>
<span class="item-money">${{item.money}}</span>
<div class="item-num">
<span @click="reduce(index)">-</span>
<span>{{item.num}}</span>
<span @click="add(index)">+</span>
</div>
</div>
</div>
</div>
<div class="settlement-bottom">
<div class="bottom-left">
<i @click="allCheck" class="iconfont " :class="checked ? 'icon-yuanyixuan' : 'icon-yuanweixuan' "></i>
<p>全选</p>
</div>
<div class="bottom-right">
<p>合计<span class="total-money">{{total}}</span></p>
<div class="bottom-total">结算({{num}})</div>
</div>
<div class="clear"></div>
</div>
</div>
</template>
js
<script>
export default {
data(){
return {
checked: false,
items: [
{
id: 0,
imgUrl: '../../static/timg.jpg',
content: '云南白药牙膏家用去黄去口臭美白口气清新585g牙膏牙刷套装',
money: 99,
num: 1,
},
{
id: 1,
imgUrl: '../../static/maiguo.jpg',
content: '湖南小台芒果带箱10斤小台芒果新鲜水果包邮',
money: 39.9,
num: 1
},
{
id: 2,
imgUrl: '../../static/baixiangguo.jpg',
content: '广西新鲜热带水果百香果西番莲鸡蛋果10斤中果酸爽香甜',
money: 69.8,
num: 1
}
]
}
},
computed: {
total(){
let sum = 0;
this.items.forEach(item=>{
if(item.isChecked == true)sum += (item.money*item.num)
})
return Math.round(sum*100)/100;
},
num() {
let num = 0;
this.items.forEach(item=>{
if(item.isChecked == true)num += item.num
})
return num;
}
},
methods: {
// 减少宝贝
reduce(index) {
if(this.items[index].num === 1) return
this.items[index].num--
},
// 增加宝贝
add(index) {
this.items[index].num++;
},
radioCheck(item,index) {
let tmpState = !item.isChecked
//改变单个状态
this.$set(item,'isChecked',tmpState)
//检测选择状态
if(tmpState){
let n = 0;
this.items.forEach(itemu => {
if(itemu.isChecked) n++;
})
if(n == this.items.length)this.checked = true;
}else {
this.checked = false;
}
},
allCheck(){
this.checked = !this.checked;
for(let i = 0,len = this.items;i < len.length;i++){
this.$set(this.items[i],'isChecked',this.checked)
}
}
}
}
</script>
css
<style lang="less">
* {
padding: 0;
margin: 0;
}
html,body,#app {
height: 100%;
}
.settlement-bill {
width: 100%;
height: 100%;
background:#e9eaeb;
.settlement-group {
padding: 20px;
box-sizing: border-box;
.settlement-item {
position: relative;
width: 100%;
padding: 10px 5px;
margin-bottom: 15px;
box-sizing: border-box;
background: #fff;
.iconfont {
position: absolute;
top: 50%;
left: 10px;
margin-top: -10px;
font-size: 20px;
&.icon-yuanyixuan {
color: orangered;
}
}
img {
display: inline-block;
width: 100px;
height: 100px;
margin-left: 25px;
}
.item-right {
display: inline-block;
vertical-align: top;
width: calc(100% - 130px);
p {
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
-webkit-line-clamp: 2; /** 显示的行数 **/
overflow: hidden; /** 隐藏超出的内容 **/
margin: 0 0 15px 0;
}
.item-money {
display: inline-block;
float: left;
color: orangered;
}
.item-num {
display: inline-block;
float: right;
span {
display: inline-block;
width: 25px;
border: 1px solid #dcdfe6;
text-align: center;
&:nth-child(2){
width: 50px;
}
}
}
}
}
}
.settlement-bottom {
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
line-height: 60px;
padding-left: 30px;
padding-right: 25px;
box-sizing: border-box;
background: #fff;
.bottom-left {
float: left;
display: inline-block;
.iconfont {
font-size: 20px;
&.icon-yuanyixuan {
color: orangered;
}
}
p {
display: inline-block;
}
}
.bottom-right {
display: inline-block;
float: right;
p {
display: inline-block;
.total-money {
color: orangered;
}
}
.bottom-total {
display: inline-block;
min-width: 80px;
height: 50px;
line-height: 50px;
margin-top:5px;
text-align: center;
border-radius: 20px;
background: orangered;
color: #fff;
}
}
.clear {
clear: both;
}
}
}
</style>
- 想写这个小demo好久啦，终于写好。
遇到的vue3.0写法
import { Watch, Component, Vue, Emit, Prop } from "vue-class-decorator";
// 没有组件
@component
// 有组件
// import children from "./components/children.vue";
// @component({ components:{children} })
export class MyChildren extends Vue{
username = ""; // 名字
//userId 父子之间传值，必传默认是null
@Prop({ type: String, required: true, default: null})
userId: string;
@Emit("changeChildren")
changeChildren(){}
created(){}
mounted(){}
// 方法
cancel() {
// 调用自定义函数
this.changeChildren()
}
}
