vue商城类源码分享，前端期末作业，详情页，轮播图，购物车功能
vue商城类源码分享，前端期末作业，详情页，轮播图，购物车功能
·
源码在：https://item.taobao.com/item.htm?id=748686711089
首页
<template>
<div>
<div class="top">
<ul class="nav">
<li class="title">主题市场</li>
<li>女装/内衣/家居</li>
<li>女鞋/男鞋/箱包</li>
<li>母婴/童装/玩具</li>
<li>男装/运动户外</li>
<li>美妆/彩妆/个护</li>
<li>手机/数码/企业</li>
<li>零食/生鲜/茶酒</li>
<li>厨具/收纳/清洁</li>
<li>家纺/家饰/鲜花</li>
<li>图书音像/文具</li>
<li>医药保健/进口</li>
<li>汽车/二手车/用品</li>
</ul>
<div class="banner">
<ul class="list" id="banner_list">
<li
:style="item.id == swiperId ? 'display:block;' : ''"
v-for="item in swiperlist"
:key="item.id"
>
<img :src="item.imgurl" alt="" />
</li>
</ul>
<ul class="dot_list" id="dot_list">
<li
@click="changeBanner(item.id)"
v-for="item in swiperlist"
:key="item.id"
>
{{ item.id }}
</li>
</ul>
</div>
</div>
<!-- 如果希望能够显示多个组件，需要使用v-for指令，在组件上面使用v-for，
有点特殊，需要使用v-bind指令，绑定key属性，key属性可以放索引
不然会报错，即 :key='index' -->
<div class="chanpin_list">
<Product
v-for="(item, index) in productlist"
:key="index"
:product="item"
/>
</div>
</div>
</template>
<script>
import Product from "../components/Product.vue";
import productlist from '../assets/js/procuctlist.js'
//axios用来请求接口，获取数据，或者传输数据到服务器
export default {
name: "List",
components: {
Product,
},
data: function () {
return {
// 第一张轮播图
swiperId: 1,
//轮播图的图片
swiperlist: [
{
id: 1,
imgurl:
"https://imgcps.jd.com/img-cubic/creative_server_cia_jdcloud/v2/2000366/100014359257/FocusFullshop/CkRqZnMvdDEvMTEwNDY0LzEzLzE3Nzc1LzI4OTczMS82MTRiODgwYUUwNDk4N2IxNC82OWE1M2NiY2MwMjlmYjEzLnBuZxIJMy10eV8wXzU0MAI47ot6QhQKEE9QUE_lubPmnb_nlLXop4YQAEIPCgs1NeaKmOenkuadgBABQhAKDOeri-WNs-aKoui0rRACQgoKBuS8mOi0qBAHWNmFyMr0Ag/cr/s/q.jpg",
},
{
id: 2,
imgurl:
"https://img14.360buyimg.com/pop/s1180x940_jfs/t1/209750/8/10660/52806/61a09fb6Ec2fb8b05/ebbcd46963b7107d.jpg.webp",
},
{
id: 3,
imgurl:
"https://imgcps.jd.com/img-cubic/creative_server_cia/v2/2000366/10025946402575/FocusFullshop/CkNqZnMvdDEvMjA0OTAwLzI4LzY3MDEvNDAyOTY5LzYxNDFiOTM0RTg4N2M0YzI2L2JiOGFiZjUyMTA5ZTRkODEucG5nEgk0LXR5XzBfNTUwAjjui3pCFgoS6IGU5oOz5bmz5p2_55S16ISREABCEQoN56eS5p2A5Lu3Mjk0ORABQhAKDOeri-WNs-aKoui0rRACQgoKBuWKm-iNkBAHWI-e5cflowI/cr/s/q.jpg",
},
{
id: 4,
imgurl:
"https://imgcps.jd.com/ling4/4137007/54iG5qy-55u06ZmN/6YOo5YiG5q-P5ruhMTk55YePMTAw/p-5bd8253082acdd181d02fa50/87ef3624/cr/s/q.jpg",
},
],
productlist:productlist,
};
},
//created是Vue的声明周期钩子，表示创捷结束之后要执行的函数，该函数会自动执行，通常使用
//该函数实现请求数据的方法的调用
created: function () {
// console.log('111');
console.log(productlist)
setInterval(() => {
this.autoSwiper();
}, 2000);
},
methods: {
changeBanner(id) {
this.swiperId = id;
},
// 自动轮播
autoSwiper() {
let nowId = this.swiperId;
if (nowId == this.swiperlist.length) {
this.swiperId = 1;
} else {
this.swiperId = this.swiperId + 1;
}
},
},
};
</script>
<style scoped>
.top {
display: flex;
justify-content: space-between;
width: 1200px;
margin: auto;
padding-top: 30px;
}
.top .nav {
width: 200px;
}
.top .nav .title {
color: orange;
font-weight: bold;
}
.top .nav li {
font-size: 14px;
line-height: 35px;
list-style-type: none;
cursor: pointer;
color: #333;
}
.top .banner {
position: relative;
width: 100%;
height: 450px;
overflow: hidden;
border-radius: 4px;
}
.top .banner .list li {
display: none;
}
.top .banner .dot_list {
position: absolute;
bottom: 10px;
width: 100%;
text-align: center;
}
.top .banner .list img {
width: 100%;
}
.top .banner .dot_list li {
display: inline-block;
width: 20px;
line-height: 20px;
text-align: center;
background-color: #fff;
border-radius: 100%;
font-size: 12px;
margin: 0 10px;
cursor: pointer;
border: 1px #dbdbdb solid;
}
.top .banner .dot_list li:hover {
background: #999;
}
.chanpin_list{ width:1200px;margin:auto;display: flex; justify-content: space-between;flex-wrap: wrap;}
</style>
详情页
<template>
<div>
<div class="top">
<ul class="nav">
<li class="title">主题市场</li>
<li>女装/内衣/家居</li>
<li>女鞋/男鞋/箱包</li>
<li>母婴/童装/玩具</li>
<li>男装/运动户外</li>
<li>美妆/彩妆/个护</li>
<li>手机/数码/企业</li>
<li>零食/生鲜/茶酒</li>
<li>厨具/收纳/清洁</li>
<li>家纺/家饰/鲜花</li>
<li>图书音像/文具</li>
<li>医药保健/进口</li>
<li>汽车/二手车/用品</li>
</ul>
<div class="banner">
<ul class="list" id="banner_list">
<li
:style="item.id == swiperId ? 'display:block;' : ''"
v-for="item in swiperlist"
:key="item.id"
>
<img :src="item.imgurl" alt="" />
</li>
</ul>
<ul class="dot_list" id="dot_list">
<li
@click="changeBanner(item.id)"
v-for="item in swiperlist"
:key="item.id"
>
{{ item.id }}
</li>
</ul>
</div>
</div>
<!-- 如果希望能够显示多个组件，需要使用v-for指令，在组件上面使用v-for，
有点特殊，需要使用v-bind指令，绑定key属性，key属性可以放索引
不然会报错，即 :key='index' -->
<div class="chanpin_list">
<Product
v-for="(item, index) in productlist"
:key="index"
:product="item"
/>
</div>
</div>
</template>
<script>
import Product from "../components/Product.vue";
import productlist from '../assets/js/procuctlist.js'
//axios用来请求接口，获取数据，或者传输数据到服务器
export default {
name: "List",
components: {
Product,
},
data: function () {
return {
// 第一张轮播图
swiperId: 1,
//轮播图的图片
swiperlist: [
{
id: 1,
imgurl:
"https://imgcps.jd.com/img-cubic/creative_server_cia_jdcloud/v2/2000366/100014359257/FocusFullshop/CkRqZnMvdDEvMTEwNDY0LzEzLzE3Nzc1LzI4OTczMS82MTRiODgwYUUwNDk4N2IxNC82OWE1M2NiY2MwMjlmYjEzLnBuZxIJMy10eV8wXzU0MAI47ot6QhQKEE9QUE_lubPmnb_nlLXop4YQAEIPCgs1NeaKmOenkuadgBABQhAKDOeri-WNs-aKoui0rRACQgoKBuS8mOi0qBAHWNmFyMr0Ag/cr/s/q.jpg",
},
{
id: 2,
imgurl:
"https://img14.360buyimg.com/pop/s1180x940_jfs/t1/209750/8/10660/52806/61a09fb6Ec2fb8b05/ebbcd46963b7107d.jpg.webp",
},
{
id: 3,
imgurl:
"https://imgcps.jd.com/img-cubic/creative_server_cia/v2/2000366/10025946402575/FocusFullshop/CkNqZnMvdDEvMjA0OTAwLzI4LzY3MDEvNDAyOTY5LzYxNDFiOTM0RTg4N2M0YzI2L2JiOGFiZjUyMTA5ZTRkODEucG5nEgk0LXR5XzBfNTUwAjjui3pCFgoS6IGU5oOz5bmz5p2_55S16ISREABCEQoN56eS5p2A5Lu3Mjk0ORABQhAKDOeri-WNs-aKoui0rRACQgoKBuWKm-iNkBAHWI-e5cflowI/cr/s/q.jpg",
},
{
id: 4,
imgurl:
"https://imgcps.jd.com/ling4/4137007/54iG5qy-55u06ZmN/6YOo5YiG5q-P5ruhMTk55YePMTAw/p-5bd8253082acdd181d02fa50/87ef3624/cr/s/q.jpg",
},
],
productlist:productlist,
};
},
//created是Vue的声明周期钩子，表示创捷结束之后要执行的函数，该函数会自动执行，通常使用
//该函数实现请求数据的方法的调用
created: function () {
// console.log('111');
console.log(productlist)
setInterval(() => {
this.autoSwiper();
}, 2000);
},
methods: {
changeBanner(id) {
this.swiperId = id;
},
// 自动轮播
autoSwiper() {
let nowId = this.swiperId;
if (nowId == this.swiperlist.length) {
this.swiperId = 1;
} else {
this.swiperId = this.swiperId + 1;
}
},
},
};
</script>
<style scoped>
.top {
display: flex;
justify-content: space-between;
width: 1200px;
margin: auto;
padding-top: 30px;
}
.top .nav {
width: 200px;
}
.top .nav .title {
color: orange;
font-weight: bold;
}
.top .nav li {
font-size: 14px;
line-height: 35px;
list-style-type: none;
cursor: pointer;
color: #333;
}
.top .banner {
position: relative;
width: 100%;
height: 450px;
overflow: hidden;
border-radius: 4px;
}
.top .banner .list li {
display: none;
}
.top .banner .dot_list {
position: absolute;
bottom: 10px;
width: 100%;
text-align: center;
}
.top .banner .list img {
width: 100%;
}
.top .banner .dot_list li {
display: inline-block;
width: 20px;
line-height: 20px;
text-align: center;
background-color: #fff;
border-radius: 100%;
font-size: 12px;
margin: 0 10px;
cursor: pointer;
border: 1px #dbdbdb solid;
}
.top .banner .dot_list li:hover {
background: #999;
}
.chanpin_list{ width:1200px;margin:auto;display: flex; justify-content: space-between;flex-wrap: wrap;}
</style>
购物车页面
<template>
<div class="cart-warp">
<!-- 头部模块 -->
<div class="cart-thead">
<div class="t-checkbox">
<input type="checkbox" class="checkall" @click="checkall" > 全选
</div>
<div class="t-goods">商品</div>
<div class="t-price">单价</div>
<div class="t-num">数量</div>
<div class="t-sum">小计</div>
<!-- <div class="t-action">操作</div> -->
</div>
<!-- 商品列表模块 -->
<div class="cart-item-list" v-for="item in carlist" :key="item.id">
<div class="cart-item">
<div class="p-checkbox">
<input type="checkbox" v-model="item.checked" class="j-checkbox">
</div>
<div class="p-goods">
<div class="p-img">
<img :src="item.image" alt="" style="width: 81px;height: 81px;">
</div>
<div class="p-msg">{{item.name}}</div>
</div>
<div class="p-price">￥{{item.cost}}</div>
<div class="p-num">
<div class="quantity-form">
<a href="javascript:;" @click="jian(item.id)" class="decrement">-</a>
<input type="text" class="itxt" :value="item.number">
<a href="javascript:;" @click="jia(item.id)" class="increment">+</a>
</div>
</div>
<div class="p-sum">￥{{item.cost*item.number}}</div>
<!-- <div class="p-action"><a href="javascript:;">删除</a></div> -->
</div>
</div>
<!-- 结算模块 -->
<div class="cart-floatbar">
<div class="select-all">
<!-- <input type="checkbox" @click="checkall" class="checkall">全选 -->
</div>
<div class="operation">
<!-- <a href="javascript:;" class="remove-batch"> 删除选中的商品</a>
<a href="javascript:;" class="clear-all">清理购物车</a> -->
</div>
<div class="toolbar-right">
<div class="amount-sum">已经选<em>{{total}}</em>件商品</div>
<div class="price-sum">总价： <em>￥{{total_price}}</em></div>
<div class="btn-area">去结算</div>
</div>
</div>
</div>
</template>
<script>
import productlist from '../assets/js/procuctlist'
export default {
name: "Cart",
methods: {
},
data() {
return {
carlist:[],
};
},
created(){
let carlist = localStorage.getItem('carlist') || '[]'
carlist = JSON.parse(carlist)
let list = []
productlist.forEach(json=>{
carlist.forEach(id=>{
if(json.id==id){
json.number=1
json.checked=false
list.push(json)
}
})
})
this.carlist = list
console.log(list)
},
methods:{
jia(id){
this.carlist.forEach(json=>{
console.log(1)
if(json.id==id){
json.number++
}
})
},
jian(id){
this.carlist.forEach(json=>{
console.log(1)
if(json.id==id && json.number>1){
json.number--
}
})
},
test(){
console.log(this.carlist)
},
checkall(e){
console.log(e.target.checked)
this.carlist.forEach(json=>{
json.checked=e.target.checked
})
console.log(this.carlist)
}
},
computed:{
total(){
return this.carlist.filter(item=>item.checked==true).length
},
total_price(){
let price = 0
this.carlist.forEach(item=>{
if(item.checked==true){
price+= item.number*item.cost
}
});
return price
}
}
};
</script>
<style scoped>
.cart-warp{width:1200px;margin:auto;margin-top:50px;}
.cart-thead {
height: 32px;
line-height: 32px;
margin: 5px 0 10px;
padding: 5px 0;
background: #f3f3f3;
border: 1px solid #e9e9e9;
border-top: 0;
position: relative;
}
.cart-thead>div,
.cart-item>div {
float: left;
}
.t-checkbox,
.p-checkbox {
height: 18px;
line-height: 18px;
padding-top: 7px;
width: 122px;
padding-left: 11px;
}
.t-goods {
width: 400px;
}
.t-price {
width: 120px;
padding-right: 40px;
text-align: right;
}
.t-num {
width: 150px;
text-align: center;
}
.t-sum {
width: 100px;
text-align: right;
}
.t-action {
width: 130px;
text-align: right;
}
.cart-item {
height: 160px;
border-style: solid;
border-width: 2px 1px 1px;
border-color: #aaa #f1f1f1 #f1f1f1;
background: #fff;
padding-top: 14px;
margin: 15px 0;
}
.check-cart-item {
background: #fff4e8;
}
.p-checkbox {
width: 50px;
}
.p-goods {
margin-top: 8px;
width: 565px;
}
.p-img {
float: left;
border: 1px solid #ccc;
padding: 5px;
}
.p-msg {
float: left;
width: 210px;
margin: 0 10px;
}
.p-price {
width: 110px;
}
.quantity-form {
width: 80px;
height: 22px;
}
.p-num {
width: 170px;
}
.decrement,
.increment {
float: left;
border: 1px solid #cacbcb;
height: 18px;
line-height: 18px;
padding: 1px 0;
width: 16px;
text-align: center;
color: #666;
margin: 0;
background: #fff;
margin-left: -1px;
}
.itxt {
float: left;
border: 1px solid #cacbcb;
width: 42px;
height: 18px;
line-height: 18px;
text-align: center;
padding: 1px;
margin: 0;
margin-left: -1px;
font-size: 12px;
font-family: verdana;
color: #333;
-webkit-appearance: none;
}
.p-sum {
font-weight: 700;
width: 145px;
}
/* 结算模块 */
.cart-floatbar {
height: 50px;
border: 1px solid #f0f0f0;
background: #fff;
position: relative;
margin-bottom: 50px;
line-height: 50px;
}
.select-all {
float: left;
height: 18px;
line-height: 18px;
padding: 16px 0 16px 9px;
white-space: nowrap;
}
.select-all input {
vertical-align: middle;
display: inline-block;
margin-right: 5px;
}
.operation {
float: left;
width: 300px;
margin-left: 40px;
}
.clear-all {
font-weight: 700;
margin: 0 20px;
}
.toolbar-right {
float: right;
}
.amount-sum {
float: left;
}
.amount-sum em {
font-weight: 700;
color: rgb(255,107,0);
padding: 0 3px;
}
.price-sum {
float: left;
margin: 0 15px;
}
.price-sum em {
font-size: 16px;
color: rgb(255,107,0);
font-weight: 700;
}
.btn-area {
font-weight: 700;
width: 94px;
height: 52px;
line-height: 52px;
color: #fff;
text-align: center;
font-size: 18px;
font-family: "Microsoft YaHei";
background: rgb(255,107,0);
overflow: hidden;
}
.toubu {
width: 100%;
height: 40px;
background-color: #f5f5f5;
display: flex;
justify-content: center;
}
.toubu ul {
width: 70%;
height: 40px;
display: flex;
}
.toubu ul li {
width: 100%;
height: 40px;
display: flex;
justify-content: space-around;
align-items: center;
font-size: 18px;
}
.toubu ul li:hover {
background-color: #ff6b00;
color: #fff;
}
</style>
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
15
0- 0
已为社区贡献1条内容
所有评论(0)