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

news2024/12/23 3:50:30

📂文章目录

一、📔网站题目

二、✍️网站描述

三、📚网站介绍

四、🌐网站演示

📸部分截图

🎬视频演示

五、⚙️网站代码

🧱项目结构

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2253711.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

PHP使用RabbitMQ(正常连接与开启SSL验证后的连接)

代码中包含了PHP在一般情况下使用方法和RabbitMQ开启了SSL验证后的使用方法&#xff08;我这边消费队列是使用接口请求的方式&#xff0c;每次只从中取出一条&#xff09; 安装amqp扩展 PHP使用RabbitMQ前&#xff0c;需要安装amqp扩展&#xff0c;之前文章中介绍了Windows环…

uniapp h5 vue3 m3u8 和 mp4 外链视频播放

m3u8视频播放 使用mui-player 和hls.js。 安装npm install mui-player hls.js我的版本是"hls.js": "^1.5.17"和"mui-player": "^1.8.1"使用 页面标签&#xff1a; 引用&#xff1a; 点击目录播放视频&#xff1a; m3u8视频播放&a…

给el-table表头添加icon图标,以及鼠标移入icon时显示el-tooltip提示内容

在你的代码中&#xff0c;你已经正确地使用了 el-tooltip 组件来实现鼠标划过加号时显示提示信息。el-tooltip 组件的 content 属性设置了提示信息的内容&#xff0c;placement 属性设置了提示信息的位置。 你需要确保 el-tooltip 组件的 content 属性和 placement 属性设置正…

node.js实现分页,jwt鉴权机制,token,cookie和session的区别

文章目录 1. 分⻚功能2. jwt鉴权机制1.jwt是什么2.jwt的应用3.优缺点 3. cookie&#xff0c;token&#xff0c;session的对比 1. 分⻚功能 为什么要分页 如果数据量很⼤&#xff0c;⽐如⼏万条数据&#xff0c;放在⼀个⻚⾯显⽰的话显然不友好&#xff0c;这时候就需要采⽤分⻚…

大数据新视界 -- Hive 元数据管理:核心元数据的深度解析(上)(27 / 30)

&#x1f496;&#x1f496;&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎你们来到 青云交的博客&#xff01;能与你们在此邂逅&#xff0c;我满心欢喜&#xff0c;深感无比荣幸。在这个瞬息万变的时代&#xff0c;我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…

SpringBoot如何使用EasyExcel实现表格导出(简洁快速入门版本)

前言 前面给大家介绍了动态表头的导入&#xff0c;这篇文章给大家介绍如何实现导出 前面给大家介绍了动态表头的导入&#xff0c;我们了解了如何通过EasyExcel灵活地读取结构不固定的Excel文件。这次&#xff0c;我们将目光转向数据导出——即如何将数据以Excel文件的形式输出…

快速上手 RabbitMQ:使用 Docker 轻松搭建消息队列系统

在现代的分布式系统中&#xff0c;消息队列&#xff08;Message Queue&#xff09;是实现异步通信、解耦系统组件、提高系统可扩展性和可靠性的重要工具。RabbitMQ 是一个广泛使用的开源消息代理软件&#xff0c;它实现了高级消息队列协议&#xff08;AMQP&#xff09;&#xf…

ELK的Filebeat

目录 传送门前言一、概念1. 主要功能2. 架构3. 使用场景4. 模块5. 监控与管理 二、下载地址三、Linux下7.6.2版本安装filebeat.yml配置文件参考&#xff08;不要直接拷贝用&#xff09;多行匹配配置过滤配置最终配置&#xff08;一、多行匹配、直接读取日志文件、EFK方案&#…

UE5 像素流进行内网https证书创建

确定证书需求 内网 HTTPS 通信通常需要以下内容&#xff1a; 自签名证书&#xff08;适用于内网环境&#xff0c;不需要通过公开的证书颁发机构 CA&#xff09; 或者通过内部的企业 CA 签发的证书&#xff08;更安全&#xff09;。 生成自签名证书 使用工具&#xff08;如 Ope…

44页PDF | 信息化战略规划标准框架方法论与实施方法(限免下载)

一、前言 这份报告详细介绍了企业信息化战略规划的标准框架、方法论以及实施方法&#xff0c;强调了信息化规划应以业务战略和IT战略为驱动力&#xff0c;通过构筑企业架构&#xff08;EA&#xff09;来连接长期战略和信息化建设。报告提出了信息化规划原则&#xff0c;探讨了…

RNACOS:用Rust实现的Nacos服务

RNACOS是一个使用Rust语言开发的Nacos服务实现&#xff0c;它继承了Nacos的所有核心功能&#xff0c;并在此基础上进行了优化和改进。作为一个轻量级、快速、稳定且高性能的服务&#xff0c;RNACOS不仅包含了注册中心、配置中心和Web管理控制台的功能&#xff0c;还支持单机和集…

任务管理法宝:甘特图详解

在项目管理中&#xff0c;如何清晰、直观地展示项目的进度和任务分配&#xff1f; 甘特图作为一种经典的项目管理工具&#xff0c;提供了有效的解决方案。无论是团队合作还是个人项目管理&#xff0c;甘特图都能帮助你轻松追踪各项任务的进展。今天&#xff0c;我们将详细介绍…

RabbitMQ 客户端 连接、发送、接收处理消息

RabbitMQ 客户端 连接、发送、接收处理消息 一. RabbitMQ 的机制跟 Tcp、Udp、Http 这种还不太一样 RabbitMQ 服务&#xff0c;不是像其他服务器一样&#xff0c;负责逻辑处理&#xff0c;然后转发给客户端 而是所有客户端想要向 RabbitMQ服务发送消息&#xff0c; 第一步&a…

PyQt 中的无限循环后台任务

在 PyQt 中实现一个后台无限循环任务&#xff0c;需要确保不会阻塞主线程&#xff0c;否则会导致 GUI 无响应。常用的方法是利用 线程&#xff08;QThread&#xff09; 或 任务&#xff08;QRunnable 和 QThreadPool&#xff09; 来运行后台任务。以下是一些实现方式和关键点&a…

云计算vsphere 服务器上添加主机配置

这里是esxi 主机 先把主机打开 然后 先开启dns 再开启 vcenter 把每台设备桌面再vmware workstation 上显示 同上也是一样 &#xff0c;因为在esxi 主机的界面可能有些东西不好操作 我们选择主机和集群 左边显示172.16.100.200

Python酷库之旅-第三方库Pandas(255)

目录 一、用法精讲 1206、pandas.tseries.offsets.SemiMonthEnd.is_on_offset方法 1206-1、语法 1206-2、参数 1206-3、功能 1206-4、返回值 1206-5、说明 1206-6、用法 1206-6-1、数据准备 1206-6-2、代码示例 1206-6-3、结果输出 1207、pandas.tseries.offsets.S…

Envoy-istio

最近研究envoy-istio&#xff0c;发现这个博客&#xff0c;觉得很不错&#xff0c;这里记录一下 envoy-istio介绍 envoy-istio - 随笔分类 - yaowx - 博客园 envoy部分七&#xff1a;envoy的http流量管理基础 envoy部分六&#xff1a;envoy的集群管理 envoy部分五&#xff…

甘特图的绘制步骤:教你如何绘制甘特图

甘特图是项目管理中一种极为重要的可视化工具&#xff0c;它以直观的方式展示项目进度&#xff0c;包括任务的开始时间、结束时间、持续时长以及任务之间的先后顺序。在当今的项目管理领域&#xff0c;Excel 和专业的项目管理软件是制作甘特图的两大常用途径&#xff0c;它们各…

C++模拟堆

模板题目 图片来源Acwing 堆的基础知识 代码实现 #include<iostream> #include<algorithm>using namespace std;const int N 1e5 10; int a[N]; int n, m;void down(int u) {int t u;if (2 * u < n && a[2 * u] < a[u]){t 2 * u;}if (2 * u …

牛客linux

1、 统计文件的行数 # 方法 1 wc -l ./nowcoder.txt | awk {print $1} # 方法 2 &#xff0c;awk 可以打印所有行的行号, 或者只打印最后一行 awk {print NR} ./nowcoder.txt |tail -n 1 awk END{print NR} ./nowcoder.txt # 方法 3 grep -c 、-n等等 grep -c "" ./…