GoodsCard组件页面代码
<template>
<div class="goods-card-box">
<div class="goods-card" v-for="(item, id) in list" :key="id">
<div class="left">
<image :src="item.img" mode="aspectFit"></image>
</div>
<div class="right">
<div class="up">
<div class="title">{{ item.name }}</div>
<div class="price">{{ item.price_unit }} {{ item.price }}</div>
<div class="total">
<div class="">
{{ item.total ? item.total : 0 }}{{ item.base_units }}(1:{{
item.bigUnit.num ? item.bigUnit.num : 1
}})
</div>
<div class="edit" @click="edit(item.id)">{{ item.editbtn }}</div>
</div>
</div>
<div class="down">
<div class="big" v-if="item.bigUnit.isBigUnit">
<div class="jian leeicon" @click.prevent="subB(item.id)">-</div>
<div class="num">
{{ item.bigNum ? item.bigNum : 0 }}
</div>
<div class="jia leeicon" @click.prevent="addB(item.id)">+</div>
<div class="unit">
{{ item.bigUnit.title }}
</div>
</div>
<div class="small">
<div class="jian leeicon" @click.prevent="subS(item.id)">-</div>
<div class="num">
{{ item.smallNum ? item.smallNum : 0 }}
</div>
<div class="jia leeicon" @click.prevent="addS(item.id)">+</div>
<div class="unit">{{ item.base_units }}</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "goods-card",
props: ["list"],
methods: {
addB(id) {
this.$emit("add-B", id);
},
subB(id) {
this.$emit("sub-B", id);
},
addS(id) {
this.$emit("add-S", id);
},
subS(id) {
this.$emit("sub-S", id);
},
edit(id) {
this.$emit("edit-n", id);
},
},
};
</script>
<style lang="less" scoped>
.goods-card {
box-sizing: border-box;
width: 100%;
height: 100%;
display: flex;
margin-top: 45px;
align-items: center;
border-radius: 20px;
background: #ffffff;
box-shadow: 8px 8px 16px #d0d0d0, -8px -8px 16px #f0f0f0;
.left {
background-color: #ffc004;
margin-left: 20px;
border-radius: 20px;
width: 100px;
height: 100px;
image {
width: 100%;
height: 100%;
border-radius: 20px;
}
}
.right {
flex: 1;
height: 100%;
padding: 15px;
display: flex;
flex-direction: column;
justify-content: space-between;
.up {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: flex-start;
.title {
font-size: 34px;
}
.price {
color: rgba(255, 74, 74, 1);
}
.total {
color: #9e9e9e;
display: flex;
flex-direction: row;
.edit {
background-color: #ffc004;
padding: 0 10px;
color: white;
border-radius: 25px;
margin-left: 10px;
}
}
}
.down {
display: flex;
flex-direction: row;
align-content: center;
align-items: center;
width: 100%;
height: 40px;
position: relative;
padding-right: 5px;
.big,
.small {
width: 50%;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
.num {
color: #6b6b6b;
}
.unit {
color: #6b6b6b;
}
.leeicon {
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
text-align: center;
font-weight: bold;
font-size: 23px;
color: #ffbf00;
}
}
.small {
position: absolute;
bottom: 0;
right: 5px;
}
}
}
}
</style>
使用页面代码，此处为App.vue
<template>
<div>
<div class="card">
<goods-card
:list="list"
@add-B="addBB($event)"
@sub-B="subBB($event)"
@add-S="addSS($event)"
@sub-S="subSS($event)"
@edit-n="editNum($event)"
></goods-card>
</div>
<el-dialog v-model="isShowModal" title="修改数量" width="30%" center>
<el-input
v-model="total"
@input="inputNum"
type="number"
placeholder="最大为5位数"
maxlength="5"
/>
<template #footer>
<span class="dialog-footer">
<el-button @click="cancelAdd">取消</el-button>
<el-button type="primary" @click="confirmAdd"> 保存 </el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script>
import GoodsCard from "@/myComponents/GoodsCard.vue";
export default {
name: "App",
components: {
GoodsCard,
},
data() {
return {
isShowModal: false,
total: 0,
list: [
{
id: 1,
img: require("./assets/logo.png"),
name: "名称",
price: 100,
price_unit: "$",
total: 0,
base_units: "瓶",
editbtn: "编辑",
bigUnit: {
isBigUnit: true,
title: "箱",
num: 6,
},
bigNum: 0,
smallNum: 0,
},
{
id: 2,
img: require("./assets/logo.png"),
name: "名称2",
price: 100,
price_unit: "$",
total: 0,
base_units: "瓶",
editbtn: "编辑",
bigUnit: {
isBigUnit: true,
title: "箱",
num: 6,
},
bigNum: 0,
smallNum: 0,
},
{
id: 3,
img: require("./assets/logo.png"),
name: "名称2",
price: 100,
price_unit: "$",
total: 0,
base_units: "瓶",
editbtn: "编辑",
bigUnit: {
isBigUnit: false,
title: "",
num: 1,
},
bigNum: 0,
smallNum: 0,
},
],
};
},
methods: {
addBB(event) {
console.log(event, "event");
this.list.some((item) => {
if (item.id == event) {
item.bigNum++;
item.total = item.bigNum * item.bigUnit.num + item.smallNum;
}
});
},
subBB(event) {
console.log(event, "event");
this.list.some((item) => {
if (item.id == event && item.bigNum > 0) {
item.bigNum--;
item.total = item.bigNum * item.bigUnit.num + item.smallNum;
}
});
},
addSS(event) {
console.log(event, "event");
this.list.some((item) => {
if (item.id == event) {
item.total++;
item.bigNum = parseInt(item.total / item.bigUnit.num);
item.smallNum = item.total % item.bigUnit.num;
}
});
},
subSS(event) {
console.log(event, "event");
this.list.some((item) => {
if (item.id == event && item.total > 0) {
item.total--;
item.smallNum = item.total % item.bigUnit.num;
item.bigNum = parseInt(item.total / item.bigUnit.num);
}
});
},
editNum(event) {
console.log(event, "event");
this.isShowModal = true;
this.list.some((item) => {
if (item.id == event) {
localStorage.setItem("goodsId", item.id);
if (item.total) {
this.total = item.total;
} else {
this.total = 0;
}
}
});
},
cancelAdd(event) {
console.log(event, "event");
this.isShowModal = false;
},
confirmAdd(event) {
console.log(event, "event");
let e = localStorage.getItem("goodsId");
this.list.some((item) => {
if (item.id == e) {
item.total = Number(this.total);
item.smallNum = item.total % item.bigUnit.num;
item.bigNum = parseInt(item.total / item.bigUnit.num);
}
});
this.isShowModal = false;
},
inputNum(event) {
console.log(event, "event");
this.total = event;
},
},
};
</script>
<style scoped lang="less">
.card {
width: 500px;
height: 300px;
}
</style>
