当前位置：首页 > news >正文

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

news 2025/7/15 13:54:35

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

一、功能介绍

二、登录注册功能

三、首页

四、项目截图

五、源码获取

一、功能介绍

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

二、登录注册功能

页面代码

<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-animationclass="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>