携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第27天，点击查看活动详情
通过 vue-cli 脚手架工具，初始化项目，命名为 shoppingcart
在 components 目录下创建 header.vue 组件、footer.vue 组件、index.vue 组件
编写头部组件 header.vue，使用 HTML+CSS 进行页面布局
<template>
<div class="header">
<ul>
<li>
<img src="/image/taobao_logo.gif" alt="" />
</li>
<li class="content">
<p><span>您的位置:</span></p>
<p><a href="javascriot:;">首页</a> <span>></span></p>
<p><a href="javascriot:;">我的淘宝</a> <span>></span></p>
<p><span>我的购物车</span></p>
</li>
<li class="imgs">
<div>1.查看购物车</div>
<div>2.确认订单信息</div>
<div>3.付款到支付宝</div>
<div>4.确认收货</div>
<div>5.评价</div>
</li>
</ul>
</div>
</template>
<script>
export default {
name: "Header",
};
</script>
<style scoped>
.content {
display: flex;
}
.content p {
margin-right: 10px;
}
.content p span {
color: rgb(110, 108, 108);
}
a {
text-decoration: none;
}
.imgs {
display: flex;
}
.imgs div {
width: 160px;
text-align: center;
background: url("../../public/image/taobao_bg.png") no-repeat right top;
}
.imgs div:nth-of-type(1) {
background-color: #ff6600;
color: white;
}
.imgs div:last-child{
background: none;
}
.imgs div:not(:first-child) {
background-color: #e4e4e4;
}
ul > li:not(:first-child) {
margin-top: 10px;
}
</style>
4. 编写商品信息组件 index.vue
<template>
<div class="index">
<Header />
<table>
<thead>
<tr class="tr_top">
<td></td>
<td>店铺宝贝</td>
<td>积分</td>
<td>单价(元)</td>
<td>数量</td>
</tr>
<tr class="tra">
<td colspan="5"></td>
</tr>
</thead>
<tbody v-for="(item, index) in lists" :key="item.id">
<tr class="trb">
<td colspan="5" v-html="item.titles"></td>
</tr>
<tr>
<td class="tda"><img :src="item.imgsa" alt="" /></td>
<!-- <div> -->
<td>
<tr>
<a href=""> {{ item.title }}</a>
</tr>
<tr v-show="item.color" >
颜色:{{
item.color
}} 尺码:{{
item.chima
}}
</tr>
<tr>
<img :src="item.imgsb" alt="" />
</tr>
</td>
<td>
{{ item.jifen }}
</td>
<td>
{{ item.price }}
</td>
<td>
<img
@click="reduce(index)"
src="../../public/image/taobao_minus.jpg"
alt=""
/>
<input type="text" v-model="item.count" />
<img
@click="add(index)"
src="../../public/image/taobao_adding.jpg"
alt=""
/>
</td>
</tr>
</tbody>
</table>
<Footer :full="full" :zongjia="zongjia" :jifen="jifen" @synca="clears" />
</div>
</template>
<script>
import Header from "./Header.vue";
import Footer from "./footer.vue";
export default {
components: {
Header,
Footer,
},
methods: {
fa() {
this.zongjia = this.lists.reduce(function (a, b) {
return a + b.price * b.count;
}, 0);
this.jifen = this.lists.reduce(function (a, b) {
return a + b.jifen * b.count;
}, 0);
},
reduce(index) {
if (this.lists[index].count > 1) {
this.lists[index].count--;
this.fa();
} else {
alert("不能再少了");
}
},
add(index) {
this.lists[index].count++;
this.fa();
},
clears() {
if (confirm("你确定删除吗")) {
this.lists = [];
this.fa();
}
},
},
computed: {
full() {
return this.lists.reduce(function (a, b) {
return a + b.price * b.count;
}, 0);
},
},
data() {
return {
lists: [
{
id: 0,
jifen: 5,
price: 100,
count: 1,
imgsa: "/image/taobao_cart_01.jpg",
title: "日韩流行风时尚美眉最爱独特米字拼图金属坡跟公主靴子黑色",
color: "棕色",
chima: "37",
imgsb: "/image/taobao_icon_01.jpg",
titles:
"店铺: <a style='text-decoration:none;' href='javascript:;'>纤巧百媚时尚鞋坊</a> 卖家:<a style='text-decoration:none;' href='javascript:;'>纤巧百媚</a> <img src='/image/taobao_relation.jpg'/>",
},
{
id: 2,
jifen: 12,
price: 265,
count: 1,
imgsa: "/image/taobao_cart_02.jpg",
title: "chanel/香奈尔/香奈尔炫亮魅力唇膏3.5g ",
imgsb: "/image/taobao_icon_01.jpg",
},
{
id: 3,
jifen: 10,
price: 100,
count: 1,
imgsa: "/image/taobao_cart_04.jpg",
title: "相宜促销专供 大S推荐 最好用的LilyBell化妆棉 好用/推荐/ ",
imgsb: "/image/taobao_icon_01.jpg",
titles:
"店铺: <a style='text-decoration:none;' href='javascript:;'>香港我的美丽日记</a> 卖家:<a style='text-decoration:none;' href='javascript:;'>taobao豆豆</a> <img src='/image/taobao_relation.jpg'/>",
},
],
zongjia: 0,
jifen: 0,
};
},
mounted() {
this.fa();
},
};
</script>
<style scoped>
thead tr:nth-of-type(1) td:nth-of-type(1) {
width: 110px;
/* background: chartreuse; */
text-align: center;
}
thead tr:nth-of-type(1) td:nth-of-type(3) {
width: 50px;
/* background: chartreuse; */
text-align: center;
}
thead tr:nth-of-type(1) td:nth-of-type(4) {
width: 50px;
/* background: chartreuse; */
text-align: center;
}
thead tr:nth-of-type(1) td:nth-of-type(5) {
width: 120px;
/* background: chartreuse; */
text-align: center;
}
thead tr:nth-of-type(1) td:nth-of-type(2) {
width: 470px;
text-align: center;
}
.tr_top {
font-size: 13px;
}
.tra {
background: #a7cbff;
width: 815px;
height: 3px;
}
.trb td {
font-size: 12px;
/* background: olive; */
/* align-items: center; */
line-height: 16px;
text-align: left;
}
.trb td img {
height: 16px;
}
a {
text-decoration: none;
}
tbody tr:nth-of-type(2) td {
background: #e2f2ff;
}
tbody tr:nth-of-type(2) td:nth-of-type(5),
tbody tr:nth-of-type(2) td:nth-of-type(4),
tbody tr:nth-of-type(2) td:nth-of-type(3),
tbody tr:nth-of-type(2) td:nth-of-type(1) {
text-align: center;
}
.tda {
padding-top: 5px;
}
input {
width: 30px;
text-align: center;
margin: 0 3px;
}
</style>
5.编写底部组件 footer.vue
<template>
<div class="footer">
<div class="one">
<p>商品总价(不含运费):</p>
<p>
<span>{{zongjia}}</span>元
</p>
</div>
<div @click="clear">清空购物车</div>
<div>
<p>
可获得积分
<span>{{jifen}}</span>
点
</p>
<p>
<img src="../../public/image/taobao_subtn.jpg" alt="">
</p>
</div>
</div>
</template>
<script>
export default {
props:["jifen","zongjia","full"],
methods:{
clear(){
// console.log(1);
this.$emit("synca")
}
}
}
</script>
<style scoped>
.footer div:not(:nth-of-type(2)){
text-align: right;
font-size: 13px;
}
div{
font-size: 13px;
}
span{
font-size: 18px;
color: tomato;
}
</style>
