首先,首页的布局
这个就是实现一个基本的布局
这里应用到的技术点有全局变量以及那个浏览更多的路由跳转
(1)模拟全局变量 ---直接上代码
这个是要用到的全局需要用到的组件
在main.js中注册
在应用到的组件
(2)浏览更多
页面
methods里
然后这个是全部商品
有面包屑、还有分类、以及商品详情
分类这块应用到了路由切换
商品详情
<template>
<div>
<div class="cart">
<div id="topTitle">
<div style="font-size: 20px">{{ List.product_name }}</div>
<div>
<span>概述</span>
<span>参数</span>
<span>用户评价</span>
</div>
</div>
</div>
<div class="body">
<div class="Left">
<!-- 轮播图 -->
<el-carousel height="510px" width="410px" indicator-position="outside">
<el-carousel-item v-for="item in banner" :key="item.id">
<img
:src="'http://106.15.179.105:3000/' + item.product_picture"
alt=""
/>
</el-carousel-item>
</el-carousel>
</div>
<!-- 右边详细信息 -->
<div class="Right">
<p style="font-size: 24px">{{ List.product_name }}</p>
<p style="color: rgb(176, 176, 176); padding-top: 10px">
{{ List.product_intro }}
</p>
<p style="color: rgb(255, 103, 0); padding-top: 10px">小米自营</p>
<div class="price">
<span>{{ List.product_selling_price }}</span>
<span class="del">{{ List.product_price }}元</span>
</div>
<div class="pro-list">
<span class="pro-name">{{ List.product_name }}</span>
<span class="pro-price"
><span>{{ List.product_selling_price }}元</span
><span class="pro-del" style=""
>{{ List.product_price }}元</span
></span
>
<p class="price-sum">总计 : {{ List.product_selling_price }}元</p>
</div>
<div class="button">
<button type="button" @click="addCart(List.product_id)" class="el-button shop el-button--default">
<span>加入购物车</span>
</button>
<button
type="button"
@click="addLike(List.product_id)"
class="el-button like el-button--default"
>
<span>喜欢</span>
</button>
</div>
<div class="XMLogo">
<ul>
<li><i class="el-icon-circle-check"></i> 小米自营</li>
<li><i class="el-icon-circle-check"></i> 小米发货</li>
<li><i class="el-icon-circle-check"></i> 7天无理由退货</li>
<li><i class="el-icon-circle-check"></i> 7天价格保护</li>
</ul>
</div>
</div>
</div>
<DialogName ref="dialo"></DialogName>
</div>
</template>
<script>
import detail from "../API/detail"; //详情页api
export default {
components: {},
name: "",
data() {
return {
/* id: null, */
List: [],
banner: [],
};
},
created() {
},
activated(){
this.id = this.$route.query.id; //接收地址栏id值
this.gitListAll();
this.gitBanner();
},
methods: {
//获取所有详情数据
async gitListAll() {
const { data: res } = await detail.getDetail({
productID: this.id,
});
this.List = res.Product[0];
console.log(this.List);
},
//获取轮播图数据
async gitBanner() {
let { data: res } = await detail.gitBanner({
productID: this.id,
});
this.banner = res.ProductPicture;
console.log(this.banner);
},
//点击喜欢收藏商品
async addLike(id) {
/* console.log(this.$refs.dialo); */
if (!this.$store.state.userName) {
this.$refs.dialo.loginDialog();
this.$notify({
title: "失败",
message: res.msg,
type: "error",
});
} else {
let { data: res } = await detail.getCollect({
product_id:id,
user_id: this.$store.state.userName.id,
});
// console.log(res)
if (res.code == '001') {
this.$notify({
title: "成功",
message: res.msg,
type: "success",
});
}
}
},
async addCart(id){
if (!this.$store.state.userName) {
this.$refs.dialo.loginDialog();
this.$notify({
title: "失败",
message: res.msg,
type: "error",
});
} else {
let { data: res } = await detail.getCart({
product_id:id,
user_id: this.$store.state.userName.id,
});
console.log(res)
if (res.code == '001') {
this.$notify({
title: "成功",
message: res.msg,
type: "success",
});
} else{
this.$notify({
title: "失败",
message: res.msg,
type: "error",
});
}
}
}
},
computed: {},
watch: {},
};
</script>
<style lang="scss" scoped>
.cart {
width: 100%;
height: 64px;
#topTitle {
width: 1225px;
margin: 0 auto;
display: flex;
justify-content: space-between;
div {
span {
margin-left: 10px;
}
span:hover {
color: orangered;
}
}
}
}
.body {
width: 1225px;
margin: 0 auto;
height: 560px;
box-shadow: inset 0px 0px 10px #b0b0b0;
background-color: white;
padding: 10px 10px;
.Left {
float: left;
width: 560px;
height: 560px;
img {
width: 550px;
height: 550px;
}
}
.Right {
float: left;
margin-left: 5px;
width: 640px;
.XMLogo li {
float: left;
margin-right: 20px;
color: rgb(176, 176, 176);
list-style: none;
}
.button {
height: 55px;
margin: 10px 0px 20px;
.like {
width: 260px;
margin-left: 40px;
height: 55px;
padding: 15px 20px;
background-color: rgb(176, 176, 176);
}
.shop {
width: 340px;
height: 55px;
padding: 15px 20px;
background-color: rgb(255, 103, 0);
}
}
.price {
padding: 25px 0;
font-size: 18px;
color: #ff6700;
border-bottom: solid 1px rgb(224, 224, 224);
.del {
font-size: 14px;
margin-left: 10px;
color: rgb(176, 176, 176);
text-decoration: line-through;
}
}
.pro-list {
background: rgb(249, 249, 250);
padding: 30px 60px;
margin: 50px 0px;
.pro-price {
float: right;
}
.pro-name {
line-height: 30px;
color: rgb(97, 97, 97);
.price-sum {
color: rgb(255, 103, 0);
font-size: 24px;
padding-top: 20px;
}
.pro-del {
margin-left: 10px;
text-decoration: line-through;
}
}
}
}
}
</style>
登录鉴权
购物车