基于Vue实现的移动端手机商城项目 电商购物网站 成品源码

📂文章目录

一、📔网站题目

二、✍️网站描述

三、📚网站介绍

四、🌐网站演示

📸部分截图

🎬视频演示

五、⚙️网站代码

🧱项目结构

💒vue代码预览

六、🔧完整源码下载

七、📣更多

---

一、📔网站题目

⭐基于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代码预览

<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网站设计、网页成品模板、期末大作业，各种设计应有尽有，持续更新中..

👉🏻如果我的文章对您有帮助，请“👍点赞”“✍️评论”“💗收藏” 一键三连哦！