uni-app实现商城多商家购物车功能(超详细, 附带源码)

已于 2022-03-18 12:11:46 修改
阅读量1w 收藏 101
点赞数 18
分类专栏： uni-app 文章标签： elementui javascript vue.js
于 2020-10-13 16:52:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42543264/article/details/109055420
版权

我们先来看一下效果

有什么不懂可以直接下方留言

先来看代码

<template>
	<view class="cart">
		<!-- 购物车为空 S -->
		<view v-if="cartList.length === 0" class="empty">
			<image class="icongouwuche" src="../../static/icon_gouwuche.png" mode="widthFix"></image>
			<view v-if="hasLogin" class="empty-tips">
				空空如也
				<navigator class="navigator" :class="'text-' + themeColor.name" v-if="hasLogin" url="../classify/classify-index/index"
				 open-type="switchTab">随便逛逛</navigator>
			</view>
			<view v-else class="empty-tips">
				空空如也
				<view class="navigator" :class="'text-' + themeColor.name">
					登录/注册 >
				</view>
			</view>
		</view>
		<!-- 购物车为空 E -->
		<!-- 购物车列表 S -->
		<view class="goods-list" v-else>
			<view class="btn-clear">
				<view class="" :class="'text-' + themeColor.name">
					共0件宝贝
				</view>
				<view class="" @click="chooseSwitchover">
					{{adminShow? '完成': '编辑'}}
				</view>
			</view>
			<view class="yh-cart-row">
				<!-- 商品列表 S -->
				<block v-for="(item, index) in cartList" :key="index">
					<view class="carrier">
						<view class="shop">
							<view class="left">
								<image v-if="item.isShop" class="select" :src="selectPitchOn" mode="widthFix" @click="chooseShopSelect(index)"></image>
								<image v-if="!item.isShop" class="select" :src="selectDefault" mode="widthFix" @click="chooseShopSelect(index)"></image>
								<view class="shop-name">
									<image class="icon-shop" :src="shopImage" mode="widthFix"></image>
									<view class="name">
										{{item.shop_name}}
									</view>
								</view>
							</view>
							<image class="right" :src="rightImage" mode="widthFix"></image>
						</view>
						<view class="goods" v-for="(gItem, gIndex) in item.goods" :key="gIndex" v-if="gItem.goods_sold_out == 1">
							<view class="left">
								<image class="select" :src="gItem.selected ? selectPitchOn:selectDefault" mode="widthFix" @click="chooseGoodsSelect(index, gIndex)"></image>
							</view>
							<view class="right">
								<image class="goods-image" :src="gItem.goods_cover || errirImage"></image>
								<view class="goods-info">
									<view class="goods-name">
										{{gItem.goods_name}}
									</view>
									<view class="specification" @click="specificationSelection(index, gIndex)">
										<view class="specification-name">
											{{gItem.goods_specification != ''? gItem.goods_specification: ''}}
										</view>
										<block v-if="gItem.goods_specification != ''">
											<image class="specification-image" v-if="isSelection" :src="upImage" mode="widthFix"></image>
											<image class="specification-image" v-if="!isSelection" :src="downImage" mode="widthFix"></image>
										</block>
									</view>
									<view class="goods-price">
										<view class="price">
											<block v-if="gItem.goods_price != ''">
												<text class="price-symbol">¥</text>
												<text class="price-marked">{{gItem.goods_price}}</text>
											</block>
										</view>
										<view class="amount">
											<view class="num-minus" @click="chooseMinus(index, gIndex)">
												-
											</view>
											<view class="input-price">
												{{gItem.goods_num}}
											</view>
											<view class="num-add" @click="chooseAddNum(index, gIndex)">
												+
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</block>
				<!-- 商品列表 E -->
			</view>
			<view class="yh-cart-row">
				<!-- 失效商品列表 S -->

				<view class="carrier">
					<view class="carrier-title" v-if="goodsLoseEfficacy.length != 0">
						<text class="goods-lose-efficacy-num">
							失效宝贝1件
						</text>
						<text class="goods-lose-efficacy-operation" @click="chooseLoseEfficacyGoodsEmpty">
							清空失效宝贝
						</text>
					</view>
					<view class="goods" v-for="(gItem, gIndex) in goodsLoseEfficacy" :key="gIndex" v-if="gItem.goods_sold_out == 0">
						<view class="left">
							<!-- <image class="select" :src="selectDefault" mode="widthFix"></image> -->
						</view>
						<view class="right">
							<image class="goods-image" :src="gItem.goods_cover || errirImage"></image>
							<view class="goods-info-s">
								<text class="goods-names">
									{{gItem.goods_name}}
								</text>
								<view class="specification" @click="specificationSelection">

								</view>
								<view class="goods-price">
									<view class="goods-cause">
										{{gItem.cause}}
									</view>
									<view class="goods-similarity">
										找相似
									</view>
								</view>
							</view>
						</view>
						<image class="goods-lose-efficacy-identifying" :src="loseEfficacyImage" mode="widthFix"></image>
					</view>
				</view>
				<!-- 失效商品列表 E -->
			</view>
		</view>
		<!-- 购物车列表 E -->
		<!-- 购物车结算 S -->
		<view class="goods-settle-accounts">
			<view class="left">
				<image v-if="isCheckAll" class="select" :src="selectPitchOn" mode="widthFix" @click="chooseCheckAll"></image>
				<image v-if="!isCheckAll" class="select" :src="selectDefault" mode="widthFix" @click="chooseCheckAll"></image>
				全选
			</view>
			<view class="right">
				<block v-if="!adminShow">
					<view class="goods-price-total">
						<text>合计: </text>
						<text>¥ {{total}}</text>
					</view>
					<view class="goods-count-btn">
						结算
					</view>
				</block>
				<block v-if="adminShow">
					<view class="goods-enshrine" @click="chooseGoodsEnshrine">
						移至收藏夹
					</view>
					<view class="goods-delete" @click="chooseGoodsDelete">
						删除
					</view>
				</block>
			</view>
		</view>
		<!-- 购物车结算 E -->
	</view>
</template>

<script>
	export default {
	
		data() {
			return {
				errirImage: this.$mAssetsPath.errorImage,
				rightImage: this.$mAssetsPath.right, // 右箭头图标
				shopImage: this.$mAssetsPath.shop, // 店铺图标
				selectDefault: this.$mAssetsPath.iconDefault, // 默认图标 
				selectPitchOn: this.$mAssetsPath.iconPitchOn, // 选中图标
				upImage: this.$mAssetsPath.iconUp, // 上
				downImage: this.$mAssetsPath.iconDown, // 下
				loseEfficacyImage: this.$mAssetsPath.loseEfficacy, // 失效
				cartList: [{
					shop_name: "惠多多自营",
					isShop: false,
					goods: [ // 购物车数据列表
						{
							goods_name: "小乳酸菌牛奶酸奶饮料整箱饮品早餐酸乳益生菌",
							goods_cover: "",
							goods_price: "520.00",
							goods_num: 1,
							goods_specification: "大小;尺寸",
							goods_sold_out: 1,
							cause: "库存不足",
							selected: false,
						},
						{
							goods_name: "小乳酸菌牛奶酸奶饮料整箱饮品早餐酸乳益生菌",
							goods_cover: "",
							goods_price: "520.00",
							goods_num: 1,
							goods_specification: "大小;尺寸",
							goods_sold_out: 1,
							cause: "库存不足",
							selected: false,
							specification: []
						}
					]
				},{
					shop_name: "惠多多自营",
					isShop: false,
					goods: [ // 购物车数据列表
						{
							goods_name: "小乳酸菌牛奶酸奶饮料整箱饮品早餐酸乳益生菌",
							goods_cover: "",
							goods_price: "520.00",
							goods_num: 1,
							goods_specification: "大小;尺寸",
							goods_sold_out: 1,
							cause: "库存不足",
							selected: false,
						},
						{
							goods_name: "小乳酸菌牛奶酸奶饮料整箱饮品早餐酸乳益生菌",
							goods_cover: "",
							goods_price: "520.00",
							goods_num: 1,
							goods_specification: "大小;尺寸",
							goods_sold_out: 1,
							cause: "库存不足",
							selected: false,
							specification: []
						}
					]
				}],
				goodsLoseEfficacy: [],
				total: 0, // 选中商品总价
				hasLogin: null,
				// 控制滑动效果
				adminShow: false, // 编辑选择默认false
				isStop: false, // 店铺下所有商品全选/取消全选默认false
				isSelection: false, // 规格选择默认false
				isCheckAll: false, // 购物车全选/反选默认false
			}
		},
		methods: {
			// 编辑按钮切换
			chooseSwitchover() {
				this.adminShow = !this.adminShow
			},
			// 选择规格
			specificationSelection(index, gindex) {
				let cartList = this.cartList;
				// console.log(cartList[index].goods[gindex])
				this.isSelection = !this.isSelection
			},
			// 增加数量
			chooseAddNum(index, gindex) {
				let cartList = this.cartList; // 购物车商品列表
				let goods_num = cartList[index].goods[gindex].goods_num; // 获取当前数量
				goods_num = goods_num + 1; // 每点击一次加1
				cartList[index].goods[gindex].goods_num = goods_num; // 数量
				this.totalPrice()
			},
			// 减少数量
			chooseMinus(index, gindex) {
				let cartList = this.cartList; // 购物车商品列表
				let goods_num = cartList[index].goods[gindex].goods_num; // 获取当前数量
				if (goods_num <= 1) {
					return
				}
				goods_num = goods_num - 1; // 每点击一次加1
				cartList[index].goods[gindex].goods_num = goods_num;
				this.totalPrice()
			},
			// 选中商品删除
			chooseGoodsDelete() {
				uni.showModal({
					content: "确认将这" + 1 + "个宝贝删除?",
					cancelText: "我再想想",
					cancelColor: "#999999",
					confirmText: "删除",
					confirmColor: "#fa436a",
					success(res) {
						if (res.confirm) {
							console.log("删除")
						} else if (res.cancel) {
							console.log("我再想想")
						}
					},
				})
			},
			// 选中商品移至收藏夹
			chooseGoodsEnshrine() {
				console.log("收藏")
			},
			// 清空失效商品
			chooseLoseEfficacyGoodsEmpty() {
				uni.showModal({
					content: "确认清空失效宝贝吗?",
					cancelText: "我再想想",
					cancelColor: "#999999",
					confirmText: "清空",
					confirmColor: "#fa436a",
					success(res) {
						if (res.confirm) {
							console.log("清空")
						} else if (res.cancel) {
							console.log("我再想想")
						}
					},
				})
			},
			// 计算总价
			totalPrice() {
				let cartList = this.cartList;
				let total = 0;
				let goods_num = 0;
				for (let i = 0; i < cartList.length; i++) {
					for (let j = 0; j < cartList[i].goods.length; j++) {
						if (cartList[i].goods[j].selected) {
							total += cartList[i].goods[j].goods_price * cartList[i].goods[j].goods_num;
							goods_num += cartList[i].goods[j].goods_num;
						}
					}
				}
				this.total = total;
			},
			// 店铺选中反选
			chooseShopSelect(index) {
				let cartList = this.cartList;
				cartList[index].isShop = !cartList[index].isShop;
				for (let i = 0; i < cartList[index].goods.length; i++) {
					cartList[index].goods[i].selected = cartList[index].isShop
				}
				this.checkAllCondition()
				this.totalPrice()
			},
			// 商品选中反选
			chooseGoodsSelect(index, gindex) {
				let cartList = this.cartList;
				let count = 0;
				let goodsList = cartList[index].goods; // 当前店铺下商品列表
				let goods = goodsList[gindex]; // 当前商品数组

				if (goods.selected) {
					cartList[index].goods[gindex].selected = false; // 改变当前商品状态
					cartList[index].isShop = false; // 改变店铺状态
				} else {
					cartList[index].goods[gindex].selected = true;
					// 当店铺选中商品数量与店铺总数相等时, 改变店铺状态
					let shopGoodsNum = cartList[index].goods.length;			// 店铺总个数
					let goodsArray = cartList[index].goods;
					let selectedNum = 0;
					for(var i in goodsArray) {
						if(goodsArray[i].selected) {
							selectedNum++
						}
					}
					if(selectedNum == goodsArray.length) {
						cartList[index].isShop = true
					} else {
						cartList[index].isShop = false
					}
				}
				this.checkAllCondition()
				this.totalPrice()
			},
			// 全选条件 店铺全选  反之 
			checkAllCondition() {
				let isCheckAll = this.isCheckAll;
				let cartList = this.cartList;					// 购物车列表数据
				let isCheckAllNum = 0;
				for (let i = 0; i < cartList.length; i++) {
					if(cartList[i].isShop == true) {
						isCheckAllNum++
					}
				}
				if(isCheckAllNum == cartList.length) {
					this.isCheckAll = true;
				} else {
					this.isCheckAll = false;
				}
				this.totalPrice()
			},
			// 点击全选
			chooseCheckAll() {
				let cartList = this.cartList;
				let isCheckAll = this.isCheckAll;
				if(isCheckAll) {
					this.isCheckAll = false
				} else {
					this.isCheckAll = true
				}
				for(let i=0; i<cartList.length; i++) {
					cartList[i].isShop = this.isCheckAll;
					for(let j=0; j<cartList[i].goods.length; j++) {
						cartList[i].goods[j].selected = this.isCheckAll
					}
				}
				this.totalPrice()
			}
		}
	}
</script>

<style lang="scss">
	.rightText {
		font-size: $font-sm;
		padding-top: 3px;
	}

	.empty {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		padding-bottom: 100upx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		background-color: #FFFFFFF;

		.icongouwuche {
			width: 190upx;
		}

		.empty-tips {
			display: flex;
			font-size: $font-sm + 2upx;
			color: $font-color-disabled;

			.navigator {
				margin-left: 16upx;
			}
		}
	}

	.goods-list {
		.btn-clear {
			display: flex;
			justify-content: space-between;
			margin: 0 30upx 20upx;
		}

		.yh-cart-row:last-child {
			margin: 0 30upx 120upx;
		}

		.yh-cart-row {
			background-color: #FFFFFF;
			border-radius: $spacing-base;
			margin: 0 30upx 30upx;

			.carrier:last-child {
				border-bottom: none;
			}

			.carrier {
				border-bottom: 1upx dashed #EEEEEE;

				.shop {
					display: flex;
					align-items: center;
					padding: 30upx 30upx;

					.left {
						display: flex;
						align-items: center;

						.select {
							width: 40upx;
							margin-right: $spacing-base;
						}

						.shop-name {
							display: flex;
							align-items: center;

							.icon-shop {
								width: 42upx;
								margin-right: $spacing-sm;
							}

							.name {
								font-size: $font-lg;
								font-weight: 600;
							}
						}
					}

					.right {
						width: 30upx;
						margin-left: $spacing-sm;
					}
				}

				.goods {
					display: flex;
					align-items: center;
					padding: 0 30upx 40upx;
					position: relative;

					.goods-lose-efficacy-identifying {
						width: 100upx;
						height: 100upx;
						position: absolute;
						z-index: 99;
						right: 0upx;
						margin-top: -75upx;
					}

					.left {
						.select {
							width: 40upx;
							margin-right: $spacing-base;
						}
					}

					.right {
						display: flex;
						z-index: 2;

						.goods-image {
							width: 220upx;
							height: 220upx;
							margin-right: 20upx;
						}

						.goods-info {
							width: 340upx;
							padding-top: 10upx;

							.goods-name {
								font-size: $font-th;
							}

							.specification {
								display: flex;
								align-items: center;
								margin-top: 10upx;

								.specification-name {
									font-size: $font-sm;
									color: $font-color-9;
								}

								.specification-image {
									width: 25upx;
									margin-left: $spacing-sm;
								}
							}

							.goods-price {
								display: flex;
								justify-content: space-between;
								margin-top: 20upx;

								.price {
									color: $base-color;

									.price-symbol {
										font-size: $font-sm;
									}

									.price-marked {
										font-size: $font-lg;
									}
								}

								.amount {
									display: flex;
									align-items: center;
									height: 40upx;
									border: 1upx solid $font-color-9;

									.num-minus,
									.num-add {
										width: 40upx;
										text-align: center;
									}

									.num-minus {
										height: 40upx;
										border-right: 1upx solid $font-color-9;
									}

									.num-add {
										height: 40upx;
										border-left: 1upx solid $font-color-9;
									}

									.input-price {
										width: 60upx;
										text-align: center;
									}
								}
							}
						}

						.goods-info-s {
							// 失效商品样式
							width: 400upx;
							padding-top: 10upx;

							.goods-names {
								font-size: $font-th;
								color: $font-color-9;
							}

							.specification {
								display: flex;
								align-items: center;
								margin-top: 10upx;

								.specification-name {
									font-size: $font-sm;
									color: $font-color-9;
								}

								.specification-image {
									width: 25upx;
									margin-left: $spacing-sm;
								}
							}

							.goods-price {
								display: flex;
								justify-content: space-between;
								margin-top: 20upx;
								align-items: center;

								.goods-cause {
									// 商品失效原因
									font-size: $font-sm;
									margin-top: 45upx;
								}

								.goods-similarity {
									font-size: $font-sm;
									color: $base-color;
									padding: 5upx 10upx;
									border: 1upx solid $base-color;
									margin-top: 45upx;
									border-radius: 20upx;
								}
							}
						}
					}
				}

				.carrier-title {
					display: flex;
					justify-content: space-between;
					padding: 20upx 30upx 30upx;

					.goods-lose-efficacy-num {
						font-size: $font-base;
						font-weight: 600;
					}

					.goods-lose-efficacy-operation {
						font-size: $font-sm;
						padding-top: 4upx;
						color: $base-color;
					}
				}
			}
		}
	}

	.goods-settle-accounts {
		height: 96upx;
		position: fixed;
		bottom: 50px;
		z-index: 99;
		width: 100%;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30upx;
		border-top: 1upx solid $border-color-whiteSmoke;

		.left {
			display: flex;
			align-items: center;

			.select {
				width: 40upx;
				margin-right: $spacing-sm;
			}
		}

		.right {
			display: flex;
			align-items: center;

			.goods-price-total {
				font-size: $font-lg;
			}

			.goods-price-total text:nth-child(2) {
				font-size: $font-base;
				padding-top: 4upx;
				margin-left: 8upx;
				color: $base-color;
			}

			.goods-count-btn {
				font-size: 32upx;
				width: 180upx;
				background-color: $base-color;
				color: $color-white;
				border-radius: 30upx;
				height: 66upx;
				text-align: center;
				line-height: 66upx;
				margin-left: 20upx;
			}

			.goods-enshrine {
				color: $base-color;
				padding: 5upx 20upx;
				border: 1upx solid $base-color;
				border-radius: 30upx;
				margin-right: 30upx;
			}

			.goods-delete {
				color: $font-colo-orange;
				padding: 5upx 20upx;
				border: 1upx solid $font-colo-orange;
				border-radius: 30upx;
			}
		}
	}
</style>

以上就是购物车所有代码,直接拿过去用, 别客气

如果对你有用，关注一下博主的小程序，登录一下给予支持，以后有什么开源好用的源码都会上传到小程序

 

青衫折扇
关注
  • 18
    点赞
  • 踩
  • 101
    收藏
    觉得还不错? 一键收藏
  • 34
    评论
专栏目录
uni-app 优购商城 - 购物车功能
m0_72270772的博客
06-28 556
一、购物车（1）ycq-address - 收货地址（2）ycq-goods - 购物车显示商品信息（3）ycq-settle - 购物车结算页面（4）cart - 购物车页面。
UniApp实现购物与订单管理的实现
iBoy0v0的博客
07-25 1211
在UniApp中，我们可以通过使用uni-list和组件来实现商品列表。我们可以在页面的template添加到购物车在商品列表中，我们可以通过使用uni-button来添加商品到购物车。我们可以在页面的template购物车页面我们可以创建一个新的页面来展示购物车中的商品。在UniApp中，我们可以通过使用uni-list和组件来展示购物车列表。我们可以在页面的template。
全开源商城源码后台php全端uniapp 全开源可二开 功能强大 商城系统源码
m0_73348158的博客
05-20 663
内置8中搭配主色(可自行扩展更多配色)、自由快捷切换适应各大行业需求已支持小程序（微信、QQ、百度、支付宝、头条&抖音、快手）+ H5 + APPApp.vue中修改 request_url 和 static_url 地址为自己的商城地址即可使用主题默认为红色(red)，如更改主题 App.vue文件中修改 default_theme 默认主题标识，也可以到商店搜索【默认主题样式】远程控制主题配色1.【优化】默认主题管理插件支持手机端配色2.【优化】首页中间广告数据支持平台限制。
基于SpringBoot+Vue+uniapp的童装商城的详细设计和实现(源码+lw+部署文档+讲解等)
最新发布
hwx20010805的博客
05-23 658
🌞博主介绍：✌全网粉丝15W+,CSDN特邀作者、211毕业、高级全栈开发程序员、大厂多年工作经验、码云/掘金/华为云/阿里云/InfoQ/StackOverflow/github等平台优质作者、专注于Java、小程序技术领域和毕业项目实战，以及程序定制化开发、全栈讲解、就业辅导✌🌞👇🏻精彩专栏 推荐订阅👇🏻2023-2024年最值得选的微信小程序毕业设计选题大全：100个热门选题推荐✅2023-2024年最值得选的Java毕业设计选题大全：500个热门选题推荐✅Java精品实战案例《500套》
Uniapp开发 购物商城源码 在线电商商城源码 适配移动终端项目及各小程序
10-31
lilishop电商商城系统 商城移动端，使用Uniapp开发，可编译为所有移动终端项目及各小程序
uni-app商城源码/公众号/小程序/APP多端适配
From_WH的博客
04-11 8865
上传你的代码，站点入口目录设置/public 在浏览器中输入你的域名或IP（例如：www.crmeb.com）, 安装程序会自动执行安装。如果客服密码错误，请登录上面地址客服管理重新设置客服帐号密码，客服端支持PC端和移动端，用户端自行到后台添加用户进行测试。4、打包目录/list/,打包后把list内所有文件复制到站点public/admin/目录下。后台多种角色、多重身份权限管理，权限可以控制到每一步操作，每个按钮都可以控制权限。删除/public/install/install.lock 文件。
Uni-app购物到订单再到支付流程
2301_77306686的博客
07-26 430
前端处理支付结果：前端接收到后端返回的支付结果后，根据支付结果进行相应的处理。前端发送支付请求：用户在前端选择支付方式后，前端通过发送HTTP请求将支付订单信息发送给后端。3.后端处理订单逻辑：后端根据接收到的订单信息进行相应的处理，包括验证订单信息的有效性、计算订单总金额、生成订单号、保存订单信息等。后端处理支付逻辑：后端根据接收到的支付订单信息进行相应的处理，包括验证订单状态、验证支付金额、调用支付平台API发起支付请求等。返回支付结果：后端处理完支付相关逻辑后，会将支付结果返回给前端。
uni-app购物车流程，创建订单流程，支付流程
KB0824liu的博客
07-25 843
前端处理支付结果：前端接收到后端返回的支付结果后，根据支付结果进行相应的处理。前端发送支付请求：用户在前端选择支付方式后，前端通过发送HTTP请求将支付订单信息发送给后端。后端处理订单逻辑：后端根据接收到的订单信息进行相应的处理，包括验证订单信息的有效性、计算订单总金额、生成订单号、保存订单信息等。后端处理支付逻辑：后端根据接收到的支付订单信息进行相应的处理，包括验证订单状态、验证支付金额、调用支付平台API发起支付请求等。前端处理返回结果：前端接收到后端返回的创建订单结果后，根据结果进行相应的处理。
最新uniapp开发微信小程序商城搭建教程（附源码）
CRMEB小程序商城的博客
11-02 1万+
uni-app是近年来一种新兴的多端混合开发框架，适合开发跨平台应用，方便多端运行。接下来，我就用一套开源打通版系统给大家演示一下，如何用最新的uni-app来搭建一个微信小程序商城。
uni-app快速入门源码 uni-app开发经典源码项目 uni-app可快速实现对接进销存
12-09
uni-app快速入门源码 uni-app开发经典源码项目 uni-app可快速实现对接企业进销存、OA、ERP系统 uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、...
毕业设计基于uni-app实现的水果商城微信小程序源码+项目说明.zip
08-09
毕业设计基于uni-app实现的水果商城微信小程序源码+项目说明.zip 毕业设计基于uni-app实现的水果商城微信小程序源码+项目说明.zip 该资源内项目代码都是经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！...
32个uniapp项目源码 涵盖商城团购等
05-10
源码列表： IT之家小程序版客户端(使用 Mpvue 开发，兼容 Web)ithome-lite-master.zip mpvue 仿网易严选mpvue-shop-master.zip mpvue-音乐播放器mpvue-music-master.zip mpvue性能测试与体验miniweibo-master.zip mpvue改造的日历.zip mpvue框架仿滴滴出行didi-master.zip mpVue高仿美团小程序教程mpvue-meituan-master.zip uni APP自动更新并安装.vue uni-app nvue沉浸式状态栏(线性渐变色).vue uni-app 二维码生成器分享wxqrcode.zip uni-app 侧边导航分类,适合商品分类页面uni-app-left-navigation-master.zip uni-app 自定义底部导航栏uni-app-bottom-navigation-master.zip uni-app全局变量的几种实现方式.zip uni-app的markdown富文本编辑器插件uniapp-
uni-app实现购物商城的微信小程序，优秀毕业设计源代码，小白必看！
04-08
本项目拥有首页、搜索页、商品列表页、商品详情页、购物车、登录支付等主要功能。涵盖了分包、vuex、组件化开发等核心技术点的使用。 uni-app 是一个使用 Vue.js 开发所有前端应用的框架。uni-app 官方推荐使用 HBuilderX 来开发 uni-app 类型的项目。主要好处：模板丰富、完善的智能提示、一键运行。components ：uni-app组件目录。pages：uni-app组件目录。static：存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此。main.js：Vue初始化入口文件。App.vue：应用配置，用来配置小程序的全局样式、生命周期函数等。manifest.json：配置应用名称、appid、logo、版本等打包信息。pages.json：配置页面路径、页面窗口样式、tabBar、navigationBar 等页面类信息。
uni-app
02-22
【uni-app】是一款由DCloud（即数字天堂）开发的多端开发框架，它允许开发者编写一次代码，就可以在iOS、Android、Web（H5）、微信小程序、支付宝小程序、百度小程序、字节跳动小程序等多个平台上运行。uni-app极大...
uni-app电商实战源码 uni-app开发经典源码项目 uni-app可快速实现对接企业进销存、OA、ERP、SAP系统
11-11
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台，不管领导...
uni-app实现购物车(超详细 附带源码)
m0_58885302的博客
04-21 2923
我们的数据一般都是存放在state里，gettters是计算属性，所以全选和总价格的方法在这里写，我们的加，减，单选，全选都是在mutations里写。写到这里我们的vuex就已经搭建好了,可以使用了。
uniapp 开发环境和生产环境的优雅配置
weixin_46337813的博客
06-09 2402
const CONFIG = { // 开发环境配置 development: { assetsPath: 'https://m.siccat.com/public/static/images/', // 静态资源路径 baseUrl: 'https://api.test.siccat.com/api/graphql', // 后台接口请求地址 hostUrl: 'http://m.test.siccat.com/', // H5地址(前端运行地址) websocketUrl: '...
uniapp实现购物车功能
热门推荐
pumpkin_truck的博客
09-07 1万+
uniapp实现购物车功能 周六我看见一个有个公司招聘需要试岗3天，并使用uniapp完成购物车，直播间，地图，首页四个功能方能通过，于是乎，我趁手上没事就打算自己写一遍，虽然我的项目没用到，但是多掌握点总没错。今天就来第一个——购物车 因为没写接口，上面的数据我都是使用的模拟数据搭建而成，主要实现的是它件数的增加减少与支付总价格的逻辑关系，还有左边的全选和全不选。 首先第一步，我们把页面先搭建出来 <template> <view> //购物车没商品出现的页面 <v
基于uniapp实现的仿小米商城app（附源码）
Growing up Or Growing old
09-19 5503
仿照小米PC端官网开发的小程序（app），前后端分离，前端主要基于Uni-app和UviewUI，同时使用了vuex、axios、vue-router等技术。后端基于Node.js(Express.js)以及MySQL实现。
uni-app开发app实现视频录播功能
07-12
对于在uni-app中实现视频录播功能，你可以使用uni-app的原生能力和插件来实现。以下是一种可行的方法： 1. 首先，你需要使用uni-app的原生能力来实现视频录制。uni-app支持调用原生的摄像头和录像功能，可以通过uni-app的API来实现。你可以使用uni-app的uni.chooseVideo()方法选择摄像头，并通过uni.createCameraContext()方法创建相机上下文，然后使用相应的方法来控制录制和保存视频。 2. 接下来，你可以使用uni-app的插件来实现视频播放功能。uni-app支持使用插件来扩展功能，你可以使用相关的视频播放插件来实现视频的播放。一些常用的视频播放插件包括uni-video、vue-video-player等。你可以根据自己的需求选择合适的插件，并按照插件的文档进行配置和使用。 需要注意的是，不同平台（如iOS和Android）对于视频录制和播放的支持可能有所不同，你需要根据目标平台的要求进行相应的适配和调试。 希望这些信息对你有帮助！如果你还有其他问题，可以继续提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 34
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值