菜单 搜索
首页 前端知识 uni-app基于vue实现商城小程序

uni-app基于vue实现商城小程序

2024-04-21 10:04:48 前端知识 前端哥 677 464 我要收藏

目录

一、前言

二、功能效果图

1.首页

2.分类

​3.活动

4.我的

​5.商品详情

6.购物车

三、代码实现

1.项目结构截图 uni-app，Hbuilder

2.首页源码

3.数据模拟通讯

四、总结

一、前言

参考“网易严选”小程序

项目采用传统vue项目结构，即uni-app打包和运行成小程序，使用HBuilder开发工具开发项目，通过运行启动“微信开发者工具”完成项目启动。

二、功能效果图

1.首页

 

2.分类

 3.活动

4.我的

 5.商品详情

6.购物车

代码动态实现商品购物车的增删改查等操作。

三、代码实现

1.项目结构截图 uni-app，Hbuilder

2.首页源码

<template>
	<view class="Header">
		<view class="myHeader">
			<view class="logos">
				网易严选
			</view>
			<view class="searchs">
				<uni-icons type="search" size="30"></uni-icons><input type="text" name="" id=""
					placeholder="请输入想搜索的商品..." @tap="goShowContract">
			</view>
			<view class="search-button">
				<view class="button" @click="onSearch">取消</view>
			</view>
		</view>
		<!-- 轮播图 -->
		<view class="backgroundBanner">
			<view class="banner">
				<swiper autoplay="true" :interval="2000" :duration="500" circular="true" indicator-active-color="#fff"
					easing-function="true" indicator-dots='true'>
					<swiper-item v-for="(item, index) in bannerList" :key="index">
						<img :src="item.url"></img>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- 分类部分 -->
		<view class="cates">
			<view class="cate-item" v-for="(cateItem,cateIndex) in cateList" :key="cateIndex" @tap="selPage(cateItem)">
				<image :src="cateItem.cateUrl"></image>
				<text>{{cateItem.cateName}}</text>
			</view>
		</view>
		<hr>
		<view class="time">
			<view class="timeTop">
				<view class="logo">
					<image src="../../static/zhong.jpg" mode=""></image>
					<!-- <uni-icons type="notification-filled" size="20"></uni-icons> -->
					<text>限时秒购</text>
				</view>
				<view class="timeFinish">
					<text>距结束</text>
					<uni-countdown :day="1" :hour="2" :minute="30" :second="0" color="#FFFFFF"
						background-color="#007AFF" />
				</view>
			</view>
			<view class="timeBottom">
				<view class="timeItem" v-for="(timeItem,timeIndex) in timeList" :key="timeIndex">
					<image :src="timeItem.timeUrl"></image>
					<view class="timeText">
						<text class="timeText1">￥{{timeItem.timeText1}}</text>
						<text class="timeText2">￥{{timeItem.timeText2}}</text>
					</view>
				</view>
			</view>
			<hr>
			<scroll-view scroll-x class="myNav">
				<view v-for="(item,index) in indexTypes" :key="index" @tap="selType(item)" :class="'item '+(typeId===item.id?'active':'')" style='font-size: 30rpx;'>{{item.name}}</view>
			</scroll-view>
			<index-type ref="indexType"></index-type>	
			</view>	
		</view>
	</view>
		
 
</template>
 
<script>
	import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
	import indexType from '@/components/index_type.vue'
	export default {
		components:{
			indexType,
		},
		data() {
			return {
				typeId: 0,
				cateList: [{
						cateId: 0,
						cateUrl: "../../static/zhong.jpg",
						cateName: '限时秒杀',
						path:''
					},
					{
						cateId: 0,
						cateUrl: '../../static/che.jpg',
						cateName: '断货清仓',
						path:'./okoko'
						
					},
					{
						cateId: 0,
						cateUrl: "../../static/yi.jpg",
						cateName: '宝藏女装',
					},
					{
						cateId: 0,
						cateUrl: "../../static/b3.jpg",
						cateName: '多多果园',
					},
					{
						cateId: 0,
						cateUrl: "../../static/9.9.jpg",
						cateName: '9块9特卖',
					},
					{
						cateId: 0,
						cateUrl: "../../static/1a.jpg",
						cateName: '签到',
					},
					{
						cateId: 0,
						cateUrl: "../../static/yao.jpg",
						cateName: '医药馆',
					},
					{
						cateId: 0,
						cateUrl: "../../static/54e.jpg",
						cateName: '省钱月卡',
					},
 
				],
				// //商品实例图
				timeList: [{
						time: 0,
						timeUrl: '../../static/7b.jpg',
						timeText1: '388',
						timeText2: '720',
					},
					{
						time: 0,
						timeUrl: '../../static/345d.jpg',
						timeText1: '18',
						timeText2: '39',
					},
					{
						time: 0,
						timeUrl: '../../static/3d.jpg',
						timeText1: '3888',
						timeText2: '3889',
					},
					{
						time: 0,
						timeUrl: '../../static/bing.jpg',
						timeText1: '12.9',
						timeText2: '18',
					},
				],
				bannerList: [{
						id: 1,
						url: '../../static/temp1.jpg'
					},
					{
						id: 2,
						url: '../../static/temp2.jpg'
					},
					{
						id: 3,
						url: '../../static/temp3.jpg'
					},
					{
						id: 4,
						url: '../../static/temp4.jpg'
					},
					{
						id: 5,
						url: '../../static/temp5.jpg'
					},
				],
			}
		},
		computed:{
			 ...mapState([
				'products',
				'indexTypes'
			])
		},
		mounted() {
			this.typeId = this.indexTypes[0].id;
			this.$refs.indexType.initProduct(this.indexTypes[0]);
		},
		methods: {
			goShowContract() {
				uni.navigateTo({
					url: '/pages/index/show-contract'
				})
			},
			selPage(cateItem){
				// uni.navigateTo({
				// 	url:cateItem.path,
				// })
			},
			//选择分类
			selType(item){
				this.typeId = item.id;
				this.$refs.indexType.initProduct(item);
			}
		}
	}
</script>
 
<style lang="scss" scoped>
	* {
		margin: 0;
		padding: 0;
	}
 
	.myHeader {
		display: flex;
		padding: 10rpx;
		align-items: center;
 
		.logos {
			width: 140rpx;
			height: 40rpx;
		}
 
		.searchs {
			border: 1px solid black;
			border-radius: 10rpx;
			flex: 1;
			margin: 0 10rpx;
			width: 80rpx;
			padding-left: 14rpx;
			display: flex;
			align-items: center;
			padding: 4rpx 10rpx;
			vertical-align: top;
		}
 
		.btn {
			width: 80rpx;
			text-align: center;
		}
	}
 
	.myNav {
		white-space: nowrap;
		display: flex;
		color: #333;
		box-sizing: border-box;
		height: 80rpx;
 
		.item {
			flex: 1;
			margin: 10rpx 20rpx;
			display: inline-block;
 
			&.active {
				color: #ff5555;
				border-bottom: 2px solid #ff5555;
				font-size: 24px;
			}
		}
 
		.item:hover {
			display: inline-block;
			color: #ff5555;
			border-bottom: 2px solid #ff5555;
		}
	}
 
	.backgroundBanner {
		padding: 0 10rpx;
		box-sizing: border-box;
	}
 
	.banner {
		width: 100%;
		margin: 0 auto;
	}
 
	.banner swiper {
		height: calc(750rpx / 1.9); //calc(屏幕宽度 / (图片宽度 / 图片高度))
	}
 
	.banner img {
		width: 100%;
		height: 100%;
	}
 
 
 
	.cates {
		width: 100%;
		height: 200rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-around;
 
		.cate-item {
			width: 20%;
			height: 160rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
 
			image {
				width: 100rpx;
				height: 100rpx;
			}
		}
	}
 
	.cates {
		width: 100%;
		height: 400rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-around;
		flex-wrap: wrap;
 
		.cate-item {
			width: 22%;
			height: 160rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
			// flex-flow: wrap;
 
			image {
				width: 100rpx;
				height: 100rpx;
			}
		}
	}
 
 
 
 
	.time {
		width: 100%;
		background-color: #fff;
		margin-top: 20rpx;
 
		.timeTop {
			height: 80rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-left: 20rpx;
 
			.logo {
				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 10rpx;
				}
 
				text {
					font-size: 16px;
				}
			}
 
			.timeFinish {
				margin-right: 20rpx;
				display: flex;
				align-items: center;
 
				text {
					font-size: 14px;
				}
			}
		}
 
		.timeBottom {
			width: 100%;
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;
 
			.timeItem {
				width: 25%;
				justify-content: space-around;
				display: flex;
				flex-direction: column;
				align-items: center;
				box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
 
				image {
					width: 160rpx;
					height: 160rpx;
				}
 
				.timeText {
					display: flex;
					justify-content: space-between;
					font-size: 14px;
 
					.timeText2 {
						color: #9F9F9F;
						text-decoration: line-through;
					}
				}
			}
		}
	}
</style>
复制

3.数据模拟通讯

通过vuex实现数据通讯共享和管理

import Vue from 'vue'
 
import Vuex from 'vuex'
 
Vue.use(Vuex)
 
const store = new Vuex.Store({
	state: {
		//公共的变量，这里的变量不能随便修改，只能通过触发mutations的方法才能改变
		//首页分类
		indexTypes:[
			{id: 1,name: '商品推荐'},
			{id: 2,name: '配饰'},
			{id: 3,name: '包包'},
			{id: 4,name: '鞋子'},
			{id: 5,name: '裙子'},
			{id: 6,name: '饮品'},
			{id: 7,name: '衣服'}
		],
		//分类菜单
		allTypes:[
			{id: 11,name: '推荐'},
			{id: 12,name: '箱包'},
			{id: 13,name: '男装'},
			{id: 14,name: '女装'},
			{id: 15,name: '鞋子'},
			{id: 16,name: '裤子'},
			{id: 17,name: '食品'},
			{id: 18,name: '维修'},
			{id: 19,name: '机票'},
			{id: 20,name: '图书'},
			{id: 21,name: '宠物'},
		],
		//活动商品 商品主键id
		activeProducts:[
			1,2,3,4,5
		],
		//全部商品
		products: [{
				id:1,
				typeIds:[1,11],
				cover: require('../../static/0fd.jpg'),
				imgList: [
					'https://img11.360buyimg.com/n1/s450x450_jfs/t1/71831/14/25245/39959/6487c621Fca760cf2/769dd8bcf43d82c1.jpg',
					'https://img.pddpic.com/mms-material-img/2022-08-11/cd9c638d-dac2-474a-aad2-0f141c146102.jpeg.a.jpeg?imageMogr2/quality/90/format/webp',
					'https://img.pddpic.com/mms-material-img/2022-08-11/b0827f91-083a-4b5b-9461-64e6d6789fcf.jpeg.a.jpeg?imageMogr2/quality/90/format/webp'
				],
				name: '联想拯救者Y9000P i7/RTX3060 2022款16英寸电竞游戏笔记本电脑',
				title: '电脑',
				price: 2000,
				oldprice: 5000,
				saleNumMonth: 120,
				saleNumTotal: 2000,
				types: [{
						name: '类型',
						items: [{
								id: 1,
								name: '13.3英寸 M1芯片 8+7核 8G+256G'
							},
							{
								id: 2,
								name: '13.3英寸 M1芯片 8+7核 8G+512G'
							},
							{
								id: 3,
								name: '13.3英寸 M1芯片 8+7核 16G+256G'
							},
							{
								id:4,
								name: '13.3英寸 M1芯片 8+7核 16G+512G'
							}
						],
					},
					{
						name: '数量',
						items: [{
							id: 1,
							name: '英特尔官方21代'
						}, {
							id: 2,
							name: '英特尔官方18代'
						}, {
							id: 3,
							name: '英特尔官方19代'
						}]
					}
				]
			},
			{
				id:2,
				typeIds:[1,11],
				cover: require('../../static/13d.jpg'),
				imgList: [
					"https://img.pddpic.com/mms-material-img/2021-12-10/6b514989-49fb-4112-b636-33fc82cb1641.jpeg.a.jpeg?imageMogr2/quality/90/format/webp",
					"https://img.pddpic.com/mms-material-img/2022-01-05/6fbb05da-e1ba-4bee-985a-300cdd7ad2e9.jpeg.a.jpeg?imageMogr2/quality/90/format/webp",
					"https://img.pddpic.com/mms-material-img/2021-12-10/21e55b15-a17d-4668-b8a9-9b8616f11cb2.jpeg.a.jpeg?imageMogr2/quality/90/format/webp"
				],
				name: '保鲜膜([食品级认证)',
				title:'保鲜膜',
				price: 12.99,
				oldprice: 20.80,
				saleNumMonth: 120,
				saleNumTotal: 2000,
				types: [{
						name: '型号',
						items: [{
								id: 1,
								name: '1卷宽30厘米6.25斤'
							},
							{
								id: 2,
								name: '1卷宽50厘米7斤'
							},
							{
								id: 3,
								name: '整箱宽50厘米4卷28斤'
							},
							{
								id:4,
								name: '整箱4卷宽50厘米重40斤约720米'
							}
						],
					},
					{
						name: '数量',
						items: [{
							id: 1,
							name: '3包'
						}, {
							id: 2,
							name: '5包'
						}, {
							id: 3,
							name: '10包'
						}]
					}
				]
			},
			{
				id:3,
				typeIds:[1,11],
				cover: require('../../static/8537c.jpg'),
				imgList: [
				"https://img.pddpic.com/mms-material-img/2022-05-28/3329312a-b971-4990-af80-6e15113b0600.jpeg.a.jpeg?imageMogr2/quality/90/format/webp",
				"https://img.pddpic.com/mms-material-img/2022-05-28/e12d134d-c2d8-4aec-8dc3-0e9ff80befd5.jpeg.a.jpeg?imageMogr2/quality/90/format/webp",
				"https://img.pddpic.com/mms-material-img/2022-05-28/1510e448-2d5b-4398-a692-ff679e2587e8.jpeg.a.jpeg?imageMogr2/quality/90/format/webp",
				"https://img.pddpic.com/mms-material-img/2022-05-28/248a3ffb-b4ce-4529-a7a4-8f0c97a4b331.jpeg.a.jpeg?imageMogr2/quality/90/format/webp"
				],
				name: '男士斜挎包潮牌ins工装风日系休闲男包大容量单肩包个性邮差包潮',
				title:'斜挎包',
				price: 33.00,
				oldprice: 40.75,
				saleNumMonth: 120,
				saleNumTotal: 2000,
				types: [{
						name: '颜色',
						items: [
							{
								id: 1,
								name: '大板黑色'
							},
							{
								id: 2,
								name: '灰色'
							},
							{
								id: 3,
								name: '蓝色'
							},
							{
								id:4,
								name: '白色'
							}
						],
					},
				]
					
			},
			{
				id:4,
				typeIds:[1,11],
				cover: require('../../static/fa98.jpg'),
				imgList: [
				"https://img.pddpic.com/openapi/images/2020-04-27/4cd766b88b0a4e9e8fbebaa221de7b58.jpg?imageMogr2/quality/90/format/webp",
				"https://img.pddpic.com/openapi/images/2020-04-27/c2090bace7f938f02819fca05e17c4e7.jpg?imageMogr2/quality/90/format/webp",
				"https://img.pddpic.com/openapi/images/2020-04-27/1492ab8ba1e76cca387583c80180d65e.jpg?imageMogr2/quality/90/format/webp",
				"https://img.pddpic.com/openapi/images/2020-04-27/13b1af9176580b3e7a035871f4456594.jpg?imageMogr2/quality/90/format/webp",
				"https://img.pddpic.com/openapi/images/2020-04-27/793db583c0d598c13124af5991f7794e.jpg?imageMogr2/quality/90/format/webp"
				],
				name: '高级感韩版原创ins个性多层斜挎包2023夏季新款包包女单肩链条包',
				title:'休闲 仙女',
				price: 38.39,
				oldprice: 57.80,
				saleNumMonth: 120,
				saleNumTotal: 2000,
				types: [{
						name: '颜色',
						items: [
							{
								id: 1,
								name: '大板黑色'
							},
							{
								id: 2,
								name: '灰色'
							},
							{
								id: 3,
								name: '红色'
							},
							{
								id:4,
								name: '粉色'
							},
							{
								id:5,
								name: '白色'
							},
						],
					},
				]
				
					
			},
			{
				id:5,
				typeIds:[1,11],
				cover: 'https://img.pddpic.com/goods/images/2020-06-10/52fd0f70-671c-4ab0-a867-094d8301d4e5.jpeg?imageMogr2/quality/90/format/webp',
				imgList: [
				"https://img.pddpic.com/goods/images/2020-06-10/52fd0f70-671c-4ab0-a867-094d8301d4e5.jpeg?imageMogr2/quality/90/format/webp",
				"https://img.pddpic.com/mms-material-img/2020-06-04/a12fe65d-ee77-4b1c-b183-7ce735fb1342.jpeg?imageMogr2/quality/90/format/webp",
				"https://img.pddpic.com/mms-material-img/2020-06-04/cf0eb9da-efb7-4f24-9703-6450b792b4ec.jpeg?imageMogr2/quality/90/format/webp",
				"https://img.pddpic.com/mms-material-img/2020-06-04/911b4c63-1212-46e7-a1eb-038b983553b0.jpeg?imageMogr2/quality/90/format/webp",
				"https://img.pddpic.com/goods/images/2020-06-10/f7e45e61-0a72-4ac9-8f56-f422327799b9.jpeg?imageMogr2/quality/90/format/webp"
				],
				name: '【驯龙士】夏季新款冰丝套装男休闲运动短袖男士大码七分裤两件套',
				title:'驯龙士',
				price: 99.99,
				oldprice: 120.80,
				saleNumMonth: 120,
				saleNumTotal: 2000,
				types: [{
						name: '颜色',
						items: [
							{
								id: 1,
								name: '军绿色'
							},
							{
								id: 2,
								name: '灰色'
							},
							{
								id: 3,
								name: '黑色'
							},
						],
					},
				]
					
			}
		],
		
		
 
	},
	mutations: {
		//相当于同步的操作
		getarray(state, count) {
			var shuffled = state.timesList.slice(0),
				i = state.timesList.length,
				min = i - count,
				temp,
				index;
			while (i-- > min) {
				index = Math.floor((i + 1) * Math.random());
				temp = shuffled[index];
				shuffled[index] = shuffled[i];
				shuffled[i] = temp;
			}
			return shuffled.slice(min);
		}
	},
	actions: {
		//相当于异步的操作,不能直接改变state的值，只能通过触发mutations的方法才能改变
	}
})
export default store
复制

四、总结

项目功能完整，后续可能将不断升级。

关注作者，及时了解更多好项目！

作者主页也有更多好项目分享！

获取源码或如需帮助，可通过博客后面名片+作者即可！

 其他作品集合

  1. 《Springboot+Spring Security+OAuth2+redis+mybatis-plus+mysql+vue+elementui实现请假考勤系统》
  2. 《vue+element实现电商商城礼品代发网，商品、订单管理》
  3. 《vue+vant2完美实现香奈儿移动端商城网站》
  4. 《vue+elementui实现联想购物商城，样式美观大方》
  5. 《vue+elementui实现英雄联盟道具城》
  6. 《vue+elementui实现app布局小米商城，样式美观大方，功能完整》
  7. 《vue完美模拟pc版快手，实现短视频，含短视频详情播放》
  8. 《vue+element实现美观大方好看的音乐网站，仿照咪咕音乐网》     
转载请注明出处或者链接地址：https://www.qianduange.cn//article/5541.html
标签
小程序
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！