大学生期末移动端水果商城项目vue3+vant4+pinia+vuerouter+mockjs【原创】

🤹‍♀️潜意识起点：个人主页

🎙座右铭：得之坦然，失之淡然。

💎擅长领域：大前端

是的，我需要您的：

🧡点赞❤️关注💙收藏💛

是我持续下去的动力！

---

💛一. 作者想说的话 

❤️

本项目是针对大学生的期末项目，只有前端，没有后端，这里比较简单请理解，可以在下载源码之后，比较厉害的小伙伴可以自行改进一下css代码等，源码已经绑定资源了，可以在上面直接下载即可。应付老师是没问题的，vue期末考拿了一个优秀，因此，放心下载修改。😄

❤️

---

💙

本项目只可用于交流学习，不可出售❌，贩卖❌，非法复制等侵权行为❌。已经在此免责声明！我原创作品不想被盗用，这是我的花费心血的，希望能理解哈！

💙

---

🧡

我在源代码中也是删减了部分，尽量的不造成侵权行为！因此，图片和真实源代码略有不同，甚至排版布局都有问题，大家自行更改，拜托了。

🧡

---

💚

下面的代码只是让大家认识一下，学习一下，了解一下项目是怎么写的，大家不用一句一句复制，上面下载源代码就行！源代码下载是完全免费的！如果一句一句复制肯定运行失败的。

💚

---

💖

不懂运行的小伙伴一定要私信我，好好研究研究一个项目运行起来了就挺好，没必要一篇一篇找。然后全部都运行不起来。

💖

---

⚽️

本人也是大学生，编码习惯不是特别的规范，用于交流学习讨论，目的在于提高大家的前端编程水平哈。我的水平也是比较一般的。

⚽️

 💖二.  首页界面

首页的从上到下都是vant官方组件库中的样式，这里介绍两款。

❤️2.1 轮播图：

<!-- 轮播图 -->
 <van-swipe class="my-swipe" :autoplay="1500" indicator-color="white">
  <van-swipe-item>
    <img src="../../assets/背景图2.jpg" class="img">
  </van-swipe-item>
  <van-swipe-item>
    <img src="../../assets/背景图4.jpg" class="img">
  </van-swipe-item>
  <van-swipe-item>
    <img src="../../assets/背景图3.jpg" class="img">
  </van-swipe-item>
  <van-swipe-item>
    <img src="../../assets/背景图1.jpg" class="img">
  </van-swipe-item>
</van-swipe>

💜2.2 九宫格图：

!-- 九宫格 -->
<van-grid :column-num="5">

  <!-- 新鲜水果 -->
  <van-grid-item icon="photo-o" text="新鲜水果" @click="router.push('/classify/classify2')">
      <template #icon>
        <img class="nine" src="https://bpic.588ku.com/back_origin_min_pic/19/10/22/880470bfd09b850d0988e1708c0ea84f.jpg!/fw/750/quality/99/unsharp/true/compress/true" alt="cw" />
      </template>
    </van-grid-item>

<!-- 酒水饮料 -->
    <van-grid-item icon="photo-o" text="酒水饮料" @click="router.push('/classify/classify1')">
      <template #icon>
        <img class="nine" src="https://tse4-mm.cn.bing.net/th/id/OIP-C.dVOiEtX74rnXOJKDniTDlAHaE8?rs=1&pid=ImgDetMain" alt="cw" />
      </template>
    </van-grid-item>


  <!-- 营养早餐 -->
  <van-grid-item icon="photo-o" text="营养早餐" @click="router.push('/classify/classify3')">
      <template #icon>
        <img class="nine" src="https://pic1.zhimg.com/v2-ac1a6756733d4f5352655a03dad6328f_r.jpg" alt="cw" />
      </template>
    </van-grid-item>


    <van-grid-item icon="photo-o" text="休闲运动"   @click="router.push('/classify/classify4')">
      <template #icon>
        <img class="nine" src="https://m1-cdn.imeijian.cn/1108c72e71ebf68865a5359efb3b5fc6.jpeg?x-oss-process=style/1237w" alt="cw" />
      </template>
    </van-grid-item>


    <van-grid-item icon="photo-o" text="人气推荐"  @click="router.push('/classify/classify5')">
      <template #icon>
        <img class="nine" src="https://ts1.cn.mm.bing.net/th/id/R-C.e8f89003ba3bcb36723040b0fdbe4a57?rik=SwW6RloygHS%2fZA&riu=http%3a%2f%2fimg.sucaijishi.com%2fuploadfile%2f2022%2f0929%2f20220929031149994.jpg%3fimageMogr2%2fformat%2fjpg%2fblur%2f1x0%2fquality%2f60&ehk=z3mX08JR6ixbNyCWuiiL%2fpkiMXnUdAmntrCxEGgOqb8%3d&risl=&pid=ImgRaw&r=0" alt="cw" />
      </template>
    </van-grid-item>
</van-grid>

🤹‍♂️作者有话说：【不看不影响】

都是适合大学生的，所以css的样式不是那么的美观，相信大家也看出来了😅其实认真花1天时间优化的话是搞的像拼多多一样是没问题的。

【我比较懒，当时作业的期限是5天，因为其他科目可能会挂科我想2天完成，然后复习期末。】😆😆😆

 💛三. 分类界面

 

💜3.1 侧边导航栏

💢左边导航栏用的是路由实现的，组件是vant提供的。这里如果用子路由非常方便的，当时没这种思想，也不懂，这里我就不进行改正了，应付老师肯定是没问题的。

🌐这里出现很多vant组件，不熟悉的同学跳转学习：vant组件的基本使用 

    <!-- 侧边导航栏 -->
  <van-sidebar v-model="activeone" style="float: left;">
  <van-sidebar-item title="全部内容" :to="{path:'/classify/classify1'}"/>
  <van-sidebar-item title="新鲜水果" :to="{path:'/classify/classify2'}"/>
  <van-sidebar-item title="营养早餐" :to="{path:'/classify/classify3'}"/>
  <van-sidebar-item title="休闲用具" :to="{path:'/classify/classify4'}"/>
  <van-sidebar-item title="人气推荐" :to="{path:'/classify/classify5'}"/>
  <van-sidebar-item title="超级好吃" :to="{path:'/classify/classify1'}"/>
  <van-sidebar-item title="一元专区" :to="{path:'/classify/classify2'}"/>
  <van-sidebar-item title="五元专区" :to="{path:'/classify/classify3'}"/>
  <van-sidebar-item title="十元专区" :to="{path:'/classify/classify4'}"/>
</van-sidebar>

💚3.2 每个商品盒子的css

这是的每个商品盒子的css请过目！ 

 <style scoped>
  .bigbox{
    width: 100%;
    height: 50px;
    /* background-color:#BEEDC7; */
    color:grey;
    font-family:serif;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
    border-bottom: 1px solid grey;
    position: relative;
    top: 0;
    left: 0;
    z-index: 100;
  }
  </style>

💚3.3 底部的tabbar导航栏

    <!-- tabbar -->
<van-tabbar v-model="active">
  <van-tabbar-item icon="home-o" :to="{path:'/'}">主页</van-tabbar-item>
  <van-tabbar-item icon="search" :to="{path:'/classify/classify1'}">分类</van-tabbar-item>
  <van-tabbar-item icon="friends-o" :to="{path:'/life'}">数据</van-tabbar-item>
  <van-tabbar-item icon="friends-o" :to="{path:'/message'}">消息</van-tabbar-item>
  <van-tabbar-item icon="setting-o" :to="{path:'/car'}">购物车</van-tabbar-item>
  <van-tabbar-item icon="setting-o" :to="{path:'/mine'}">我的</van-tabbar-item>
</van-tabbar>

 

💚四.  登录前的用户界面

 

💜4.1 登录后查看的按钮标签

 用setIsLogin去判断登录的情况，是展示登录后查看，还是展示用户的基本信息

<div v-if="channel.setIsLogin===false">
      <van-button plain type="primary" class="but" @click="login">登录后查看数据</van-button>
    </div>

💙五. 登录后的用户界面

💚5.1 未登录已登录的界面对比代码

 <!-- 未登录的界面 -->
    <div class="bigbox" v-if="channel.setIsLogin == false">
      <div class="avatar">
        <img  class="tq1" src="https://img.ixintu.com/download/jpg/20200815/18ae766809ff27de6b7a942d7ea4111c_512_512.jpg!bg" alt="cw">
      </div>
      <van-button type="primary" class="login" @click="login">登录</van-button>
    </div>

  <!-- 已经登录的界面 -->
    <div class="bigbox" v-if="channel.setIsLogin == true">
      <span class="wz1">用户名：{{ channel.userdata[channel.loginid].name }}</span>
      <div class="avatar">
        <img  class="tq2"   :src="channel.userdata[channel.loginid].avatar" alt="cw">
      </div>
     
      <van-button type="danger" class="login" @click="loginout">退出</van-button>
      <div class="wz2">余&nbsp;&nbsp;&nbsp;&nbsp;额：{{ channel.userdata[channel.loginid].balance }}</div>
    </div>

 💜5.2 信息详细的代码

<!-- 这个是下拉框 登录后才有的-->
<div v-if="channel.setIsLogin===true">
  <van-collapse v-model="activeNames">
  <van-collapse-item title="用户名信息" name="1">
    {{ channel.userdata[channel.loginid].username }}
  </van-collapse-item>
  <van-collapse-item title="年龄信息" name="2">
    尊敬的用户,您的年龄是:{{ channel.userdata[channel.loginid].age }}岁
  </van-collapse-item>
  <van-collapse-item title="我的地址" name="3">
    {{ channel.userdata[channel.loginid].address }}
  </van-collapse-item>
  <van-collapse-item title="用户ID信息" name="4">
    您的贵族ID是:{{ channel.userdata[channel.loginid].id }}
  </van-collapse-item>
  <van-collapse-item title="我的订单" name="5">
     您暂时没有订单信息，快去下单吧
  </van-collapse-item>
  <van-collapse-item title="我的帮助" name="6">
     暂时没有帮助，敬请期待！
  </van-collapse-item>
</van-collapse>

</div>

这里登录前登录后的界面，是通过v-if进行实现的

💙六. 购物车界面

自动响应，每修改一次，调用一次方法，重新计算总价值

❤️6.1 购物车代码展示

  <!-- 上面的文字 -->
    <div class="bigbox">购物车</div>

    <!-- 未登录的状态 -->
    <div v-if="channel.setIsLogin===false">
      <van-button plain type="primary" class="but" @click="login">登录后查看数据</van-button>
    </div>

   <div v-if="channel.setIsLogin===true">
    <div class="car" v-for="item in channel.cardata" :key="item.id" >
      <img :src="item.img" alt="cw">
      <div class="wz1">{{ item.name }}</div>
      <van-stepper v-model="item.count" disable-input class="stepper" @click="channel.totalPrice();" />
      <div class="wz2">￥{{ item.price }}</div>
      <van-checkbox v-model="item.mark" class="check" @click="channel.totalPrice();"></van-checkbox>
      <van-button type="danger" class="btu" @click="channel.deleteGoods(item.id)">删除</van-button>
    </div>
<van-submit-bar style="margin-bottom: 49px;" :price="channel.total*100" button-text="提交订单" @submit="onSubmit" />
</div>

🧡七. 商品聊天界面

💕7.1 小彩蛋

🍄小彩蛋：

 大家下载源码过后可以点进去甚至可以跟商家聊天，按回车键给商家发送消息，但是这个数据是死的，没有保存到mokejs，我偷懒了。

💜八. 数据中心界面

都是vant提供的第三方组件

💚8.1 这里提供组件代码，供大家参考

  <!-- 统计图页面 -->
    <div class="box">数据中心</div>
    <div v-if="channel.setIsLogin===false">
      <van-button plain type="primary" class="but" @click="login">登录后查看数据</van-button>
    </div>
    <!-- 花费 -->
    <div class="bigbox" v-if="channel.setIsLogin===true">
      <div class="smallbox">
        <img src="../../assets/花费.png" alt="cw">
        <br>
        <span class="wz1">消费累计:</span><van-rolling-text :start-num="0" :target-num="channel.userdata[channel.loginid].consume" stop-order="rtl" />
      </div>
      <!-- 购买件数 -->
      <div class="smallbox">
        <img src="../../assets/购买回收回购.png" alt="cw">
        <br>
        <span class="wz1">购买累计:</span><van-rolling-text :start-num="0" :target-num="channel.userdata[channel.loginid].buy" stop-order="up" />
      </div>

    <!-- 购物车数量 -->
      <div class="smallbox">
        <img src="../../assets/购物车.png" alt="cw">
        <br>
        <span class="wz1">购物车数量:</span><van-rolling-text :start-num="0" :target-num="channel.cardata.length" stop-order="rtl" />
      </div>

      <!-- 浏览次数 -->
      <div class="smallbox">
        <img src="../../assets/专题.png" alt="cw">
        <br>
        <span class="wz1">浏览累计:</span><van-rolling-text :start-num="0" :target-num="channel.userdata[channel.loginid].browse" stop-order="up" />
      </div>

      
       <!-- 登录次数 -->
      <div class="smallbox">
        <img src="../../assets/登录密码.png" alt="cw">
        <br>
        <span class="wz1">登录累计:</span><van-rolling-text :start-num="0" :target-num="channel.userdata[channel.loginid].loginsum" stop-order="rtl" />
      </div>

      <!-- 总商品数量 -->
      <div class="smallbox">
        <img src="../../assets/不好吃就退款.png" alt="cw">
        <br>
        <span class="wz1">商品数量:</span><van-rolling-text :start-num="0" :target-num="50" stop-order="up" />
      </div>
    </div>

💙九. 结尾总结

本实验是vue3+vant4+pinia+vue-router+mockjs移动端实现水果商城项目，完全由我原创，制作不易，希望能有一个点赞和关注和收藏，谢谢各位了！

---

如果你有任何疑问或建议，欢迎在评论区给我留言。感谢你的阅读，希望这篇文章对你有所帮助！ 

---

🤹‍♀️潜意识起点：个人主页

🎙座右铭：得之坦然，失之淡然

共勉：要用理想的泰坦尼克，去撞现实的冰川

是的，我需要您的：

🧡点赞❤️关注💙收藏💛

是我持续下去的动力！