📂文章目录
一、📔网站题目
⭐基于Vue实现的移动端手机商城项目 电商购物网站 成品源码，共20+页。
❤ 我的主页：【🚀获取更多优质源码】
❤ 更多源码：【🔥Web网页设计作业成品源码分享(持续更新)】
二、✍️网站描述
🏷️本项目是基于Vue2实现的手机端移动端手机商城，电商购物网站。
其中使用到的技术栈为：vue2、vue-router、json、axios、mint-ui、vant、vuex、node.js、webpack、html、css、js、tab切换、等。
其中网页包含：首页、购物车页、个人中心页、商品详情页、订单列表页、订单详情页、作者页、选择页 、自定义订单页、新闻详情页、新闻列表页、配件页、修改页、成功页、我的收藏页、分类页、订单详情 页、支付页、地址管理页、添加地址页、修改地址页、结算页等。
三、📚网站介绍
📔网站布局：采用DIV+CSS进行网页布局，兼容不同尺寸的手机移动端适配；
📘网站素材：图片均采自网络素材，符合了页面主题规范；
📒网站文件：网页采用模块化开发，并且使用.vue文件作为组件；
📙网页编辑：如(DW、HBuilder、NotePAD、VScode、Sublime、Webstorm、Text、Notepad++)都可修改代码。
四、🌐网站演示
📸部分截图
🎬视频演示
基于Vue实现的移动端手机商城项目 电商购物网站 成品演示
五、⚙️网站代码
🧱项目结构
💒vue代码预览
css
<template>
<div class="cart">
<Cart-Header title="购物车"></Cart-Header>
<div class="cartMain">
<ul>
<li v-for="(cart, index) in carts" class="cartList" :key="index">
<!-- 购物车单选 -->
<div class="select" @click="chooseone(cart)">
<i class="iconfont icon-xuanzekuangmoren" v-show="!cart.danx1uan"></i>
<i class="iconfont icon-xuanzekuangxuanzhong" v-show="cart.danx1uan" style="color:#25b5fe"></i>
</div>
<!-- 购物车商品信息 -->
<div class="cartImage">
<img :src="cart.img">
</div>
<div class="cartInformation">
<div class="cartName">{{ cart.name }}
<a class="iconfont icon-huishouzhan7" @click="shanchu(index)"></a>
</div>
<p class="cartPrice">￥{{ cart.price }}</p>
</div>
<!-- 购物车商品数量 -->
<div class="cartNumber">
<a @click.stop="reduce(index)" class="add">-</a>
<input type="text" v-model="cart.value" readonly="readonly" />
<a @click.stop="add(index)" class="reduce">+</a>
</div>
</li>
</ul>
</div>
<div class="cartImg" v-if="!carts.length">
<img src="/static/img/gouwuche.png" alt="购物车图片">
<h1>购物车是空的哦，快去购物吧</h1>
<router-link :to="{ name: 'Home' }">逛一逛</router-link>
</div>
<div class="cartFooter" v-if="carts.length">
<div class="checkAll" @click="quanxuan()">
<i class="iconfont icon-xuanzekuangmoren" v-show="!qx"></i>
<i class="iconfont icon-xuanzekuangxuanzhong" v-show="qx" style="color:#25b5fe"></i>
<span>全选</span>
</div>
<div class="Total">合计：<span style="font-size: 0.54rem;color:#E3211E">￥{{ sum }}</span></div>
<div class="Settlement">
<a @click.stop="goPay">结算 {{ sumValue }}</a>
</div>
<!-- <div class="Settlementtwo">
<router-link :to="{name:'Home'}" >继续购物</router-link>
</div> -->
</div>
</div>
</template>
<script>
import { Toast, MessageBox } from "mint-ui";
import { mapState, mapMutations, mapGetters } from "vuex";
import CartHeader from '../../common/header'
export default {
name: "cart",
data() {
return {
qx: false,
};
},
components: {
CartHeader
},
computed: {
carts() {
return this.$store.state.carts;
},
sum: function () {
var sum = 0;
this.$store.state.carts.forEach(cart => {
if (cart.danx1uan) {
sum += cart.price * cart.value;
}
});
return sum;
},
sumValue() {
var sumValue = 0;
this.$store.state.carts.forEach(cart => {
if (cart.danx1uan) {
sumValue += parseInt(cart.value);
}
});
return sumValue;
}
},
methods: {
...mapMutations(["shanchu", "add", "reduce", "settlement"]),
chooseone(cart) {
cart.danx1uan = !cart.danx1uan;
for (var i = 0; i < this.carts.length; i++) {
if (this.carts[i].danx1uan == false) {
this.qx = false;
break;
} else {
this.qx = true;
}
}
},
quanxuan() {
console.log((this.$store.state.carts));
this.qx = !this.qx;
if (this.qx) {
this.$store.state.carts.forEach(cart => {
cart.danx1uan = true;
});
} else {
this.$store.state.carts.forEach(cart => {
cart.danx1uan = false;
});
}
},
goPay() {
this.$store.state.payGoods = [];
if (this.sumValue == 0) {
MessageBox('提示', '请选择至少一个商品!')
} else {
this.$router.push({
path: 'pay',
})
};
}
},
created() {
for (var i = 0; i < this.carts.length; i++) {
if (this.carts[i].danx1uan == false) {
this.qx = false;
break;
} else {
this.qx = true;
}
}
}
};
</script>
<style>
.select {
float: left;
margin-top: 1.5rem;
padding-left: 0.5rem;
}
.select i {
font-size: 0.53rem;
}
.checkAll {
width: 24%;
line-height: 1.18rem;
float: left;
}
.checkAll i {
font-size: 0.53rem;
padding-left: .5rem;
}
.cart {
position: absolute;
width: 100%;
height: 100%;
z-index: 999;
top: 0;
left: 0;
background: #f4f4f4;
}
.cartheader {
position: fixed;
width: 100%;
box-shadow: 0 0 10px #cecece;
height: 1.3rem;
line-height: 1.3rem;
font-size: 0.35rem;
padding-left: 0.3rem;
background: white;
top: 0;
font-size: 0.41rem;
}
.cartheader i {
display: block;
float: left;
height: 50px;
font-size: 0.71rem;
color: black;
width: 0.9rem;
}
.cartList {
width: 100%;
height: 4rem;
background: white;
margin-top: 0.04rem;
}
.cartMain {
margin-top: 1.3rem;
margin-bottom: 1.24rem;
}
.cartMain ul li {
list-style: none;
}
.cartImage img {
width: 2.6rem;
height: 2.8rem;
}
.cartImage {
float: left;
padding: 0.5rem 0.3rem;
}
.cartInformation {
width: 7.7rem;
font-size: 0.35rem;
padding-left: 0.3rem;
padding-top: 0.6rem;
}
.cartPrice {
color: red;
margin-top: 0.2rem;
font-size: 0.4rem;
}
.cartNumber {
float: left;
margin-top: 0.3rem;
}
.cartNumber .add,
.cartNumber .reduce {
display: block;
width: 0.75rem;
height: 0.75rem;
line-height: 0.75rem;
border: 1px solid #dedede;
float: left;
color: #b2b2b2;
text-align: center;
font-size: 0.5rem;
}
.cartNumber input {
width: 0.96rem;
height: 0.76rem;
float: left;
text-align: center;
border: 1px solid #dedede;
}
.cartNumber .add {
border-right: none;
}
.cartNumber .reduce {
border-left: none;
}
.cartFooter {
position: fixed;
width: 100%;
height: 1.18rem;
font-size: 0.35rem;
background: white;
bottom: 0;
display: block;
border-top: 1px solid #f4f4f4;
}
.cartImg img {
width: 4.4rem;
height: 5.2rem;
display: block;
margin: auto;
padding-top: 1.5rem;
}
.cartImg a {
display: block;
text-align: center;
margin: 0.8rem auto;
width: 110px;
height: 37px;
line-height: 37px;
border-radius: 4px;
text-align: center;
background: #e0524b;
color: white;
font-weight: 800;
font-size: 0.5rem;
}
.cartName {
width: 9.3rem;
font-size: 0.36rem;
}
.cartName a {
color: black;
font-size: 0.57rem;
float: right;
}
.cartImg h1 {
margin-top: 0.5rem;
text-align: center;
color: #959595;
font-size: 0.6rem;
}
._box {
width: 63%;
height: 100%;
float: left;
}
.Total {
float: left;
width: 35%;
text-align: center;
line-height: 1.18rem;
font-size: 0.35rem;
}
.Settlement {
width: 34%;
height: 80%;
background: #f81200;
float: right;
margin-top: .1rem;
border-radius: 40px;
margin-right: 0.3rem;
}
.Settlementtwo {
width: 50%;
height: 100%;
background: #e3211e;
float: right;
}
.Settlement a,
.Settlementtwo a {
color: white;
text-align: center;
line-height: .98rem;
display: block;
font-size: 0.35rem;
}
</style>六、🔧完整源码下载
七、📣更多
👉🏻文章推荐：【修改文件修改日期为最新】
👉🏻文章推荐：【Vue项目运行步骤(详细图解)】
👉🏻文章推荐：【Web网页设计作业成品源码分享(持续更新)】
👉🏻关注我，获取更多源码~
👉🏻html网页设计、web前后端网站制作、大学生网页设计作业、个人网站制作、jQuery网站设计、uniapp小程序、vue网站设计、node.js网站设计、网页成品模板、期末大作业，各种设计应有尽有，持续更新中..
👉🏻如果我的文章对您有帮助，请"👍点赞""✍️评论""💗收藏" 一键三连哦！