首页 > 编程语言 >基于vue的商城小程序的毕业设计与实现(源码及报告)

基于vue的商城小程序的毕业设计与实现(源码及报告)

时间：2025-01-05 15:57:56浏览次数：8  
标签：vue name 100% price width 源码 毕业设计 uni id

 环境搭建   ☞☞☞ ​​​Vue入手篇(一)，防踩雷(全网最详细教程)_vue force-CSDN博客

目录

 一、功能介绍

 二、登录注册功能

 三、首页

 四、项目截图

 五、源码获取 

 一、功能介绍

  1. 用户信息展示：页面顶部设有用户头像和昵称展示区，方便用户识别自己的账号信息。
  2. 搜索功能：配备有搜索栏，用户可以通过输入关键词来查找并可以删除历史查找记录。
  3. 商品分类：商品分为豆干制品、饼干点心、酒水饮料等
  4. 商品展示与选择：页面中间部分以缩略图形式展示多个商品，方便选择。每个商品下方附有价格标签并可以修改商品数量，已选商品会加入到购物车中。
  5. 购物结算：页面底部设有“选好了”红色按钮，然后在结算页面完成支付流程。
  6. 我的订单：查看订单内容。
  7. 登录和注册功能。

 二、登录注册功能

 页面代码

<template>
    <div class="warp">
	    <div class="container">
			<div ref="formBox" class="form-box">  
                <!-- 注册 -->  
                <div ref="registerBox" class="register-box hidden">  
                    <h1>register</h1>  
                    <input type="text" placeholder="请输入用户名" v-model="username">  
                    <input type="password" placeholder="请输入密码" v-model="password">  
                    <input type="password" placeholder="确认密码">  
                    <button @click="register">注册</button>  
                </div>  
                <!-- 登录 -->  ①
                <div ref="loginBox" class="login-box">  
                    <h1>login</h1>  
                    <input type="text" v-model="Lusername" placeholder="请输入用户名">  
                    <input type="password" v-model="Lpassword" placeholder="请输入密码">  
                    <button @click="login">登录</button>  
                </div>  
            </div>  
            <div class="con-box left">
                <h2><span>注册页面</span></h2>
                <p>快来注册<span>账号</span>吧</p>
                <img src="../../static/images/1.jpg" alt="" />
                <p>已有账号</p>
                <button id="login" @click="switchToLogin">去登录</button>
            </div>
            <div class="con-box right">
                <h2><span>登录页面</span></h2>
                <p>快来登录<span>账号</span>吧</p>
                <img src="../../static/images/2.jpg" alt="" />
                <p>没有账号？</p>
                <button id="register" @click="switchToRegister">去注册</button>
            </div>
        </div>	
    </div>
</template>

功能实现

<script>  
export default {  
  data() {  
          return {  
              // 注册表单数据  
                  username: '',  
                  password: '',  
 
              // 登录表单数据  
                  Lusername: '',  
                  Lpassword: ''  
          };  
      },
  methods: {  
    // 登录函数  
    login() {  
      const storedUsername = uni.getStorageSync('username');  
      const storedPassword = uni.getStorageSync('password');  
  
      if (!this.Lusername || !this.Lpassword) {  
        uni.showToast({ title: '账号密码为空', icon: 'none' });  
        return;  
      }  
  
      if (this.Lusername === storedUsername && this.Lpassword === storedPassword) {  
        // 账号密码一致，跳转到 /index 页面  
        uni.navigateTo({ url: '/pages/index/index' });  
      } else if (this.Lusername === storedUsername) {  
        // 账号正确，密码错误  
        uni.showToast({ title: '密码错误', icon: 'none' });  
      } else {  
        // 账号不一致  
        uni.showToast({ title: '未检测到该账号', icon: 'none' });  
      }  
    },  
    // 注册函数  
    register() {  
      if (this.username && this.password) { 
		  console.log(this.username);  
		  console.log(this.password); 
        // 将用户名和密码存储到localStorage中
        uni.setStorageSync('username', this.username);  
        uni.setStorageSync('password', this.password);  
        uni.showToast({ title: '注册成功！', icon: 'success' });  
        this.switchToLogin();  
      } else {  
        uni.showToast({ title: '用户名和密码不能为空！', icon: 'none' });  
      }  
    },  
	
	// 切换到注册界面的函数 
	switchToRegister() {  
	    this.$refs.formBox.style.transform = 'translateX(100%)';  
        this.$refs.loginBox.classList.add('hidden');  
        this.$refs.registerBox.classList.remove('hidden');  
    },  
    // 切换到登录界面的函数  
	switchToLogin() {  
	    this.$refs.formBox.style.transform = 'translateX(0%)';  
	    this.$refs.registerBox.classList.add('hidden');  
	    this.$refs.loginBox.classList.remove('hidden');  
	},  
  },  
};  
</script>

 

注册时的用户名和密码要和登录时保持一致即可登陆成功 

 三、首页

头部代码 

<template>
	<view class="customHead" :style="{height:totalHeight+'px'}">
		<view class="bg">
			<image class="bgimg" src="../../static/images/1.jpg" mode="aspectFill"></image>
		</view>		
		<view class="container">
			<view class="statusBar" :style="{height:statusBarHeight+'px'}"></view>
			<view class="service" :style="{height:titleBarHeight+'px'}" v-if="!foldState">
				<view class="kefu">
					<u-icon name="server-fill" size="22" color="#fff"></u-icon>
				</view>
			</view>
			<view class="body" :class="foldState?'fold':''" :style="{height:bodyBarHeight+'px'}">
				<view class="brand">
					<view class="pic">
						<image class="img" src="../../static/images/DJ2.jpg" mode="aspectFill"></image>
					</view>
					<view class="text">
						<view class="title">
							<text class="font">微信搜'K学啦'</text>
							<u-icon class="icon" name="more-circle" size="22" color="#fff"></u-icon>
						</view>
						<view class="des">各项目源代码私聊,接期末毕设</view>
					</view>
				</view>
				<view class="code">
					<view class="pic">
						<image class="img" src="../../static/images/qrcode.png" mode="aspectFill"></image>
					</view>
					<text class="pay">付款</text>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import {mapState,mapGetters} from "vuex"
	export default {
		name:"custom-head-bar",
		data() {
			return {
				
			};
		},
		computed:{
			...mapGetters(["statusBarHeight","titleBarHeight","bodyBarHeight","totalHeight","foldState"])
		},
		props:{
			
		}	
	}
</script>

<style lang="scss">
.customHead{
	height: 400rpx;
	overflow: hidden;
	position: relative;
	.bg{
		width: 100%;
		height: 100%;
		background: #000;
		.bgimg{
			width: 100%;
			height: 100%;
			filter: blur(30rpx);
			transform: scale(2);
		}
	}
	.container{
		position: absolute;
		top:0;
		left:0;		
		width: 100%;
		.statusBar{			
			
		}
		.service{			
			padding-left: 30rpx;
			@include flex-box-set(start);
			color:#fff;
			.manage{
				margin-left:20rpx;
				@include flex-box-set(start);
			}
		}
		.body{
			@include flex-box();
			padding:0 45rpx;
			height: 100px;			
			transition: 0.3s;			
			.brand{
				width: 580rpx;
				@include flex-box-set(start);
				.pic{
					width: 110rpx;
					height: 110rpx;
					border-radius: 50%;
					overflow: hidden;
					transition: 0.3s;
					.img{
						width: 100%;
						height: 100%;
					}
				}
				.text{
					flex:1;
					padding:0 30rpx;
					color:#fff;
					.title{
						font-size: 36rpx;
						font-weight: 800;						
						display: flex;
						align-items: center;
						.font{
							margin-right:10rpx;
						}
					}
					.des{
						font-size: 26rpx;
						width: 100%;
						opacity: 0.8;
						padding-top:5rpx;
						@include ellipsis()
					}
				}
			}	
			.code{
				width: 80rpx;
				height: 80rpx;
				border-left:1px solid rgba(255,255,255,0.6);
				@include flex-box-set(between);
				flex-direction: column;
				.pic{
					width: 40rpx;
					height: 40rpx;
					.img{
						width: 100%;
						height: 100%;
					}
				}
				.pay{
					font-size: 22rpx;
					color:#fff;
					text-align: center;
				}
			}		
			&.fold{
				padding:0 30rpx;
				.brand{
					.pic{
						width: 60rpx;
						height: 60rpx;						
					}
					.text{
						padding-left:15rpx;
						.title{
							font-size: 28rpx;
							.icon{
								transform: scale(0.9);
							}
						}
						.des{
							display: none;
						}
					}
					
				}
				.code{
					display: none;
				}
			}
					
		}
		
	}
	
}
</style>

 下部代码

<template>
	<view class="home">
		<custom-head-bar id="customHeadBar"></custom-head-bar>
		<view class="wrapper">
			<view class="infoModel">
				<view class="left">
					免费配送
				</view>
				<navigator url="/pages/order/order" class="right">
					<u-icon name="order" color="#576b95" size="22"></u-icon>
					我的订单
				</navigator>
			</view>
			<view class="scrollLayout">
				<view class="leftScroll">
					<scroll-view scroll-y class="sContent" :scroll-top="leftScrollValue">
						<view class="navitem" :class="index==navIdx?'active':''" 
						v-for="(item,index) in dataList"
						:key="item.id"
							@click="clickNav(index)">{{item.name}}</view>
					</scroll-view>
				</view>
				<view class="rightScroll">
				
					<navigator url="/pages/search/search" class="searchView">
						<u-icon name="search" size="22" color="#576b95"></u-icon>
						搜索
					</navigator>
					<scroll-view @scroll="rightScrollEnt" :scroll-top="rightScrollValue" scroll-y scroll-with-animation
						class="sContent">
						<view class="productView" v-for="item in dataList">
							<u-sticky :customNavHeight="0" zIndex="2">
								<view class="proTitle">{{item.name}}</view>
							</u-sticky>
							<view class="proContent">
								<view class="proitem" v-for="pro in item.children">
									<product-item :item="pro"></product-item>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>

			</view>
		</view>


		<car-layout v-if="buyNum>0"></car-layout>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters
	} from "vuex"
	export default {
		data() {
			return {
				navIdx: 0,
				leftScrollValue: 0,
				rightScrollValue: 0,
				leftHitArr: [],
				rightHitArr: [],
				foldState: false,
				dataList: [{
					id: 1,
					name: "豆干制品",
					children: [{
						id: 11,
						name: "魔芋~爽!",
						price: 10,
						before_price: 22,
						thumb: "https://img1.baidu.com/it/u=3237764698,677787850&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
						numvalue:0
					}, 
					{
						id: 12,
						name: "卫龙大面筋",
						price: 5,
						before_price: 12,
						thumb: "https://pic.rmb.bdstatic.com/bjh/0eecefb60e7b7c6c68ec6377ddb7025b7289.jpeg@h_1280",
						numvalue:0
					}]
				}, {
					id: 2,
					name: "饼干点心",
					children: [{
						id: 21,
						name: "奥利给饼干",
						price: 13,
						before_price: 22,
						thumb: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.alicdn.com%2Fimgextra%2Fi1%2F2200633062791%2FO1CN01WIfNhU1WUKGKS3ZnC_%21%212200633062791-0-scmitem6000.jpg_640x640.jpg&refer=http%3A%2F%2Fimg.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1720103940&t=0705e091433d282ae43ecb0f392b54bf",
						numvalue:0
					},
					{
						id: 22,
						name: "丹麦皇家曲奇",
						price: 50,
						before_price: 100,
						thumb: "https://btob.guangbo.net/uploadfile/all/image/20211118/20211118161710769_1637223429028.png",
						numvalue:0
					},
					{
						id: 23,
						name: "奶油小蛋糕",
						price: 33,
						before_price: 66,
						thumb: "https://img1.baidu.com/it/u=2341784055,4263735026&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667",
						numvalue:0
					}]
				}, {
					id: 3,
					name: "酒水饮料",
					children: [{
						id: 31,
						name: "诺文斯基核动力金牌格瓦斯",
						price: 18,
						before_price: 29,
						thumb: "http://img.eftarkov.com/upFiles/infoImg/202309301632468882.png",
						numvalue:0
					},
					{
						id: 32,
						name: "Pevko Light瓶装啤酒",
						price: 33,
						before_price: 66,
						thumb: "http://img.eftarkov.com/upFiles/infoImg/202309301624428851.png",
						numvalue:0
					},
					{
						id: 33,
						name: "Dan Jackiel瓶装威士忌",
						price: 66,
						before_price: 99,
						thumb: "http://img.eftarkov.com/upFiles/infoImg/202309301607342250.png",
						numvalue:0
					},
					{
						id: 34,
						name: "Tarkovskaya瓶装伏特加",
						price: 100,
						before_price: 200,
						thumb: "http://img.eftarkov.com/upFiles/infoImg/202309301613404375.png",
						numvalue:0
					},
					{
						id: 35,
						name: "凶狠跑刀崽-月光【私酒】",
						price: 9999,
						before_price: 99999,
						thumb: "https://tse3-mm.cn.bing.net/th/id/OIP-C.1_lcxKT6LlpbKMLRbEM6lgAAAA?rs=1&pid=ImgDetMain",
						numvalue:0
					}]
				}]
			}
		},
		onLoad() {
			this.$nextTick(() => {
				this.getHeightArr();
			})
		},
		computed: {
			...mapGetters(["buyNum"])
		},
		methods: {
			...mapMutations(["setFoldState"]),
			//点击导航菜单
			clickNav(index) {
				if (this.navIdx == index) return;
				this.navIdx = index;
				if (this.timeout) {
					clearTimeout(this.timeout);
				}
				this.timeout = setTimeout(() => {
					this.leftScrollValue = this.leftHitArr[index];
					this.rightScrollValue = this.rightHitArr[index];
				}, 100)
			},
			//获取滚动条内容高度
			getHeightArr() {
				let selectorQuery = uni.createSelectorQuery();
				let customHeadBar;
				//获取自定义导航高度				
				selectorQuery.select("#customHeadBar").boundingClientRect(rect => {
					customHeadBar = rect.height;
				}).exec()


				//左侧滚到区域的节点组
				selectorQuery.selectAll(".navitem").boundingClientRect(rects => {
					this.leftHitArr = rects.map(item => item.top - customHeadBar - 40)
				}).exec()
				console.log(this.leftHitArr);
				//右侧滚到区域的节点组
				selectorQuery.selectAll(".productView").boundingClientRect(rects => {
					this.rightHitArr = rects.map(item => item.top - customHeadBar - 40)
				}).exec()

			},

			//监听右侧滚动条的改变
			rightScrollEnt(e) {
				let scrollTop = Math.ceil(e.detail.scrollTop);
				let idx = this.rightHitArr.findIndex((value, index, arr) => scrollTop >= value && scrollTop < arr[index +
					1])
				this.navIdx = idx;
				this.leftScrollValue = this.leftHitArr[idx];

				if (scrollTop < 300) {
					this.setFoldState(false)
				}
				if (scrollTop > 400) {
					this.setFoldState(true)
				}
			}

		}
	}
</script>

 四、项目截图

 

 

 五、源码获取 

 看到这里你是否受益了呢？你的支持就是我创作的动力，点赞+收藏+关注，学习不迷路，评论区留下你的疑问，可私信获取源码。

标签：vue,name,100%,price,width,源码,毕业设计,uni,id
From： https://blog.csdn.net/m0_63057469/article/details/144945466

相关文章

  • 基于SpringBoot的在线拍卖系统，毕业设计源码及框架
    随着互联网技术的飞速发展，在线交易和电子商务领域呈现出前所未有的活力。本文将围绕在线拍卖系统的开发过程，从技术背景、功能模块、开发环境到测试结果，带您全面了解这一系统的设计与实现。......
  • 2025年flask村庄人员医疗保险管理平台 程序+论文 可用于计算机毕业设计
    本系统（程序+源码+数据库+调试部署+开发环境）带论文文档1万字以上，文末可获取，系统界面在最后面。系统程序文件列表开题报告内容选题背景关于村庄人员医疗保险管理平台的研究，现有研究主要集中在城市医疗保险系统以及宏观的农村医疗保障政策层面，专门针对农村地区医疗保险管理平......
  • 2025年flask打车拼车系统 程序+论文 可用于计算机毕业设计
    本系统（程序+源码+数据库+调试部署+开发环境）带论文文档1万字以上，文末可获取，系统界面在最后面。系统程序文件列表开题报告内容选题背景随着城市化进程的加速和交通拥堵问题的日益严峻，打车拼车系统作为一种高效利用交通资源的解决方案，逐渐成为研究的热点。现有研究主要集中在......
  • 同硕计算机专业：统考+课程+源码学习资料全部免费送！
    考研之路，道阻且长。对于计算机专业的学子来说，备考之路更是充满挑战。为了帮助广大考生高效备战，我在此精心整理了一套同硕计算机专业统考历年真题和复习重点、专业课程学习和相关源码资料，并免费分享给大家！我的全部学习资料都放在那里，后续我还会增加资料分享放在那里！想要的朋友都可......
  • Vue cli 全局事件总线
    一、优点任意组件间通讯二、安装全局事件总线mian.js，使用生命周期钩子beforeCreatenewVue({el:'#app',render:h=>h(App),//生命周期钩子beforeCreate(){Vue.prototype.$bus=this},})三、使用全局事件组件B组件传递数据给A组件......
  • Java基于springboot+vue的宠物领养寄养救助系统pythgon+nodejs+php-计算机毕业设计
    目录功能和技术介绍具体实现截图开发核心技术：开发环境开发步骤编译运行核心代码部分展示系统设计详细视频演示可行性论证软件测试源码获取功能和技术介绍该系统基于浏览器的方式进行访问，采用springboot集成快速开发框架，前端使用vue方式，基于es5的语法，开发工具Intelli......
  • 免费送源码：Java+springboot+MySQL 餐饮点餐系统的设计与实现 计算机毕业设计原创定制
    摘 要随着互联网趋势的到来，各行各业都在考虑利用互联网将自己推广出去，最好方式就是建立自己的互联网系统，并对其进行维护和管理。在现实运用中，应用软件的工作规则和开发步骤，采用Java技术建设餐饮点餐系统。本设计主要实现集人性化、高效率、便捷等优点于一身的餐饮点餐系统......
  • （免费送源码）计算机毕业设计原创定制：Java+ssm+MySQL Springboot运动健康智慧管理系统
     摘 要本文设计了一套运动健康智慧管理系统，系统为人们提供了方便快捷、即用即搜的运动方案，用户可以在线搜索运动信息，查看健康信息、运动方案等。运动健康智慧管理系统采取面对对象的开发模式进行软件的开发和硬体的架设，能很好的满足实际使用的需求，完善了对应的软体架设以及......
  • vue2把后端响应数据保存ex表格
    在Vue中实现点击按钮将后端响应的数据导出为.xlsx文件，可以使用axios进行数据请求，并结合xlsx和file-saver库完成文件的生成和下载。以下是完整实现步骤：1.安装依赖库运行以下命令安装所需的库：npminstallxlsxfile-saveraxios2.创建导出功能组件代码示例<te......
  • 期末大作业 ：基于vue+elementUi+springboot的购物商城
    采用四层Web结构实现类似于淘宝购物系统开发，基本要求如下：实现多类型账户管理（店铺、顾客、一般浏览者）店铺实现对商品、顾客订单、店铺信息的管理顾客实现对商品查询、自身订单、个人信息的管理一般浏览者只拥有商品浏览的权限要求能完整实现货物的买卖全过程（模拟淘宝处理）辅助功......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99