从0到1：商场导览小程序开发笔记一

最新推荐文章于 2024-05-28 13:58:11 发布
最新推荐文章于 2024-05-28 13:58:11 发布
阅读量468 收藏 9
点赞数 5
文章标签： 微信小程序 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cclinux2/article/details/138490074
版权

背景

购物中心与商场小程序：旨在提供便捷的购物、导航、活动报名、服务查询等功能，让用户更好地体验购物和享受服务。通过提供便捷的购物、信息查询和互动预约等功能，提升了商场的服务水平和用户体验，帮助商场与消费者建立更紧密的联系，促进消费和提升品牌形象。

功能规划

其主要功能如下： 提供商场的基本信息，包括位置、营业时间、商户组成等，让用户了解商场的概况和特色

  • 品牌模块：按业态，楼层或者首字母提供商户列表指引，帮助用户快速找到目标店铺
  • 排行榜：品牌商铺可按评论，浏览数，点赞数，收藏数进行排行
  • 资讯模块：展示商户的优惠活动、打折信息等，让用户了解最新的优惠信息，促进消费
  • 活动模块：展示商场内举办的活动、展览、讲座等信息，吸引用户参与和了解商场文化。
  • 投诉建议：提供用户反馈通道，收集用户对商场服务和体验的意见建议，帮助商场改进服务质量
  • 会员系统：可修改个人资料，查看自己的活动报名，点赞，浏览，收藏，评论，投诉建议记录等。

概要设计

在这里插入图片描述

数据设计

ProductModel.DB_STRUCTURE = {
	_pid: 'string|true',
	PRODUCT_ID: 'string|true',

	PRODUCT_TITLE: 'string|false|comment=标题',
	PRODUCT_STATUS: 'int|true|default=1|comment=状态 0/1',

	PRODUCT_CATE_ID: 'array|true|comment=分类编号',
	PRODUCT_CATE_NAME: 'array|true|comment=分类冗余',

	PRODUCT_FIRST: 'string|false',

	PRODUCT_ORDER: 'int|true|default=9999',
	PRODUCT_VOUCH: 'int|true|default=0',

	PRODUCT_COMMENT_CNT: 'int|true|default=0',

	PRODUCT_QR: 'string|false',
	PRODUCT_VIEW_CNT: 'int|true|default=0|comment=访问次数',

	PRODUCT_COMMENT_CNT: 'int|true|default=0|comment=评价数',
	PRODUCT_FAV_CNT: 'int|true|default=0|comment=收藏数',
	
	PRODUCT_LIKE_CNT: 'int|true|default=0|comment=点赞数',
	PRODUCT_LIKE_LIST: 'array|true|default=[]|comment=点赞记录',

	PRODUCT_FORMS: 'array|true|default=[]',
	PRODUCT_OBJ: 'object|true|default={}',

	PRODUCT_ADD_TIME: 'int|true',
	PRODUCT_EDIT_TIME: 'int|true',
	PRODUCT_ADD_IP: 'string|false',
	PRODUCT_EDIT_IP: 'string|false',
};

ActivityModel.DB_STRUCTURE = {
	_pid: 'string|true',
	ACTIVITY_ID: 'string|true',

	ACTIVITY_TITLE: 'string|true|comment=标题',
	ACTIVITY_STATUS: 'int|true|default=1|comment=状态 0=未启用,1=使用中',

	ACTIVITY_CATE_ID: 'string|true|default=0|comment=分类',
	ACTIVITY_CATE_NAME: 'string|false|comment=分类冗余',

	ACTIVITY_CANCEL_SET: 'int|true|default=1|comment=取消设置 0=不允,1=允许,2=仅截止前可取消',
	ACTIVITY_CHECK_SET: 'int|true|default=0|comment=审核 0=不需要审核,1=需要审核', 
	ACTIVITY_IS_MENU: 'int|true|default=1|comment=是否公开展示名单',

	ACTIVITY_MAX_CNT: 'int|true|default=20|comment=人数上限 0=不限',
	ACTIVITY_START: 'int|false|comment=活动开始时间',
	ACTIVITY_END: 'int|false|comment=活动截止时间',
	ACTIVITY_STOP: 'int|true|default=0|comment=报名截止时间 0=永不过期',

	ACTIVITY_ORDER: 'int|true|default=9999',
	ACTIVITY_VOUCH: 'int|true|default=0',

	ACTIVITY_FORMS: 'array|true|default=[]',
	ACTIVITY_OBJ: 'object|true|default={}',

	ACTIVITY_JOIN_FORMS: 'array|true|default=[]',

	ACTIVITY_ADDRESS: 'string|false|comment=详细地址',
	ACTIVITY_ADDRESS_GEO: 'object|false|comment=详细地址坐标参数',

	ACTIVITY_QR: 'string|false',
	ACTIVITY_VIEW_CNT: 'int|true|default=0',
	ACTIVITY_JOIN_CNT: 'int|true|default=0',
	ACTIVITY_COMMENT_CNT: 'int|true|default=0',
 

	ACTIVITY_ADD_TIME: 'int|true',
	ACTIVITY_EDIT_TIME: 'int|true',
	ACTIVITY_ADD_IP: 'string|false',
	ACTIVITY_EDIT_IP: 'string|false',
};

关键实现

async getAllProduct(floorOptions) {
		// 所有记录
		let orderBy = {
			PRODUCT_ORDER: 'asc',
			PRODUCT_ADD_TIME: 'desc'
		}
		let fields = 'PRODUCT_TITLE,PRODUCT_CATE_NAME,PRODUCT_CATE_ID,PRODUCT_FIRST,PRODUCT_CATE_ID,PRODUCT_CATE_NAME,PRODUCT_OBJ.floor,PRODUCT_OBJ.logo,PRODUCT_OBJ.address';
		let where = { PRODUCT_STATUS: 1 };

		let productList = await ProductModel.getAll(where, fields, orderBy, 1000);

		for (let k = 0; k < productList.length; k++) {
			productList[k].PRODUCT_CATE_NAME = productList[k].PRODUCT_CATE_NAME.join(' - ');
		}

		//### 按楼层 
		let floorList = [];
		for (let k = 0; k < floorOptions.length; k++) {
			let name = floorOptions[k];

			let list = [];
			for (let j = 0; j < productList.length; j++) {
				if (productList[j].PRODUCT_OBJ.floor == name) {
					list.push({
						id: productList[j]._id,
						img: productList[j].PRODUCT_OBJ.logo[0],
						name: productList[j].PRODUCT_TITLE,
						cate: productList[j].PRODUCT_CATE_NAME ,
						detail: productList[j].PRODUCT_OBJ.address,
						floor: productList[j].PRODUCT_OBJ.floor,
					});
				}

			}

			let node = {
				name,
				list
			}
			floorList.push(node);
		}

		//### 按字母
		let charList = [];
		for (let k = 65; k <= 90; k++) {
			let name = String.fromCharCode(k);

			let list = [];
			for (let j = 0; j < productList.length; j++) {
				if (productList[j].PRODUCT_FIRST == name) {
					list.push({
						id: productList[j]._id,
						img: productList[j].PRODUCT_OBJ.logo[0],
						name: productList[j].PRODUCT_TITLE,
						cate: productList[j].PRODUCT_CATE_NAME ,
						detail: productList[j].PRODUCT_OBJ.address,
						floor: productList[j].PRODUCT_OBJ.floor,
					});
				}

			}

			let node = {
				name,
				list
			}
			charList.push(node);
		}

		// 其他字符
		let otherList = [];
		for (let j = 0; j < productList.length; j++) {
			let first = productList[j].PRODUCT_FIRST;
			first = first.charCodeAt(0);
			if (first < 65 || first > 90) {
				otherList.push({
					id: productList[j]._id,
					img: productList[j].PRODUCT_OBJ.logo[0],
					name: productList[j].PRODUCT_TITLE,
					cate: productList[j].PRODUCT_CATE_NAME ,
					detail: productList[j].PRODUCT_OBJ.address,
					floor: productList[j].PRODUCT_OBJ.floor,
				});
			}

		}
		charList.push({ name: '其他', list: otherList });


		//### 按分类
		let cateList = [];
		let cate1Options = await Cate1Model.getAll({ CATE1_STATUS: 1 }, 'CATE1_TITLE', { 'CATE1_ORDER': 'asc', 'CATE1_ADD_TIME': 'desc' });
		for (let k = 0; k < cate1Options.length; k++) {
			let name = cate1Options[k].CATE1_TITLE;

			let list = [];
			for (let j = 0; j < productList.length; j++) {
				if (productList[j].PRODUCT_CATE_ID.includes(cate1Options[k]._id)) {
					list.push({
						id: productList[j]._id,
						img: productList[j].PRODUCT_OBJ.logo[0],
						name: productList[j].PRODUCT_TITLE,
						cate: productList[j].PRODUCT_CATE_NAME ,
						detail: productList[j].PRODUCT_OBJ.address,
						floor: productList[j].PRODUCT_OBJ.floor,
					});
				}

			}

			let node = {
				name,
				list
			}
			cateList.push(node);
		}

		return { productList, floorList, charList, cateList }
	}

	async likeProduct(userId, id) {
		// 是否点赞
		let product = await ProductModel.getOne(id, 'PRODUCT_LIKE_LIST');
		if (!product) this.AppError('记录不存在');

		let arr = product.PRODUCT_LIKE_LIST;
		let flag = false;
		if (arr.includes(userId)) {
			arr = arr.filter(item => item != userId);
			flag = false;
		}
		else {
			arr.push(userId);
			flag = true;
		}
		await ProductModel.edit(id, {
			PRODUCT_LIKE_LIST: arr,
			PRODUCT_LIKE_CNT: arr.length
		});

		return flag;
	}

	/** 浏览资讯信息 */
	async viewProduct(userId, id) {

		let fields = '*';

		let where = {
			_id: id,
			PRODUCT_STATUS: 1
		}
		let product = await ProductModel.getOne(where, fields);
		if (!product) return null;

		product.like = product.PRODUCT_LIKE_LIST.includes(userId) ? true : false;

		delete product.PRODUCT_LIKE_LIST;

		ProductModel.inc(id, 'PRODUCT_VIEW_CNT', 1);

		return product;
	}


	/** 取得分页列表 */
	async getProductList({
		cateId,
		search, // 搜索条件
		sortType, // 搜索菜单
		sortVal, // 搜索菜单
		orderBy, // 排序 
		page,
		size,
		isTotal = true,
		oldTotal
	}) {

		orderBy = orderBy || {
			'PRODUCT_ORDER': 'asc',
			'PRODUCT_ADD_TIME': 'desc'
		};
		let fields = 'PRODUCT_LIKE_CNT,PRODUCT_FAV_CNT,PRODUCT_COMMENT_CNT,PRODUCT_VIEW_CNT,PRODUCT_TITLE,PRODUCT_CATE_ID,PRODUCT_ADD_TIME,PRODUCT_ORDER,PRODUCT_STATUS,PRODUCT_CATE_NAME,PRODUCT_OBJ';

		let where = {};
		where.and = {
			_pid: this.getProjectId() //复杂的查询在此处标注PID
		};
		where.and.PRODUCT_STATUS = 1; // 状态 

		if (cateId && cateId !== '0') where.and.PRODUCT_CATE_ID = cateId;

		if (util.isDefined(search) && search) {
			where.or = [
				{ PRODUCT_TITLE: ['like', search] },
			];
		} else if (sortType && util.isDefined(sortVal)) {
			// 搜索菜单
			switch (sortType) {
				case 'sort': {
					orderBy = this.fmtOrderBySort(sortVal, 'PRODUCT_ADD_TIME');
					break;
				}
				case 'cateId': {
					if (sortVal) where.and.PRODUCT_CATE_ID = String(sortVal);
					break;
				}
			}
		}

		return await ProductModel.getList(where, fields, orderBy, page, size, isTotal, oldTotal);
	}

	async getMyLikeProductList(userId, {
		search, // 搜索条件
		sortType, // 搜索菜单
		sortVal, // 搜索菜单
		orderBy, // 排序 
		page,
		size,
		isTotal = true,
		oldTotal
	}) {

		orderBy = orderBy || {
			'PRODUCT_ORDER': 'asc',
			'PRODUCT_ADD_TIME': 'desc'
		};
		let fields = 'PRODUCT_LIKE_CNT,PRODUCT_FAV_CNT,PRODUCT_COMMENT_CNT,PRODUCT_VIEW_CNT,PRODUCT_TITLE,PRODUCT_CATE_ID,PRODUCT_ADD_TIME,PRODUCT_ORDER,PRODUCT_STATUS,PRODUCT_CATE_NAME,PRODUCT_OBJ';

		let where = {};
		where.and = {
			_pid: this.getProjectId() //复杂的查询在此处标注PID
		};
		where.and.PRODUCT_LIKE_LIST = userId;


		if (util.isDefined(search) && search) {
			where.or = [
				{ PRODUCT_TITLE: ['like', search] },
			];
		} else if (sortType && util.isDefined(sortVal)) {
			// 搜索菜单
			switch (sortType) {
				case 'sort': {
					orderBy = this.fmtOrderBySort(sortVal, 'PRODUCT_ADD_TIME');
					break;
				}
			}
		}

		return await ProductModel.getList(where, fields, orderBy, page, size, isTotal, oldTotal);
	}

UI设计

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

后台管理系统

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

代码分享

git下载

CC同学呀
关注
  • 5
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
新手玩荔枝派 f1c100s nano折腾笔记（四）
dancheqishi23的博客
05-07 4332
buildroot里面选定ffmpeg编译，太大了，rootfs.tar 22M，16M内存放不下。 mplayer也是不行。9M多，重新编译rootfs.tar变成32M。难道要make clean再编译？ ST7789 SPI屏幕 IO按键控制 IO输出 LED驱动 参考https://whycan.com/t_5017.html #include<dt-bindings/gpio/gpio.h> /{ model="LicheePiN...
校园导览小程序(后台+小程序).zip
02-01
校园导览小程序(后台+小程序)校园导览小程序(后台+小程序)校园导览小程序(后台+小程序)校园导览小程序(后台+小程序)校园导览小程序(后台+小程序)校园导览小程序(后台+小程序)校园导览小程序(后台+小程序)校园导览小...
微信小程序源码打包合集 游戏商城抽奖转盘预约点餐等-1
热门推荐
chenhao0568的专栏
06-13 1万+
下载 2019.06.13更新 2.16 GB共1,848 个文件，487 个文件夹。 文件夹 PATH 列表 卷序列号为 0FEA-0BC6 E:. │ 001各种结构文件列表生成.bat │ 目录列表_树2019.06.13更新.txt │ ├─20190612后收集游戏 │ │ 小程序版转盘游戏 &&一款解决生活分歧的小程序BifurcationTermin...
微信小程序 毕业设计题目大全 (新颖选题)
qq_15801219的博客
12-06 7909
微信小程序的选题恰巧是近年来热门的选题类型，所以今天精心为了大家整理出了最新计算机微信小程序毕业设计参考选题都有源码+数据库+文档 是近期作品 你的选题刚好在下面有，有选题问题都可以随时与学长沟通哦ssm新冠疫苗预约小程序ssm微信小程序的英语学习激励系统ssm微信小程序的学生选课系统ssm微信小程序的驾校预约管理系统ssm数学辅导微信小程序ssm农产品自主供销小程序基于微信小程序的智能停车场管理系统基于微信小程序的游泳馆管理系统基于微信小程序的学习资料平台
基于JSP+Mysql的线上博物馆管理平台小程序的设计与实现（附源码 调试 讲解）
shenchengyv的博客
10-29 212
摘 要微信小程序的出现，给各个领域提供了一种新型的服务形式。在信息迅速发展的背景下，人们对于文化的需求程度日益加深，越来越多的人走进博物馆。然而大型博物馆存在的结构复杂、客流量大、路线不清晰等问题。因此，当下大众十分迫切需要一种能够通过支持手机端的线上博物馆导览系统，从而可以通过智能手机为用户提供导览功能。本文提到的线上博物馆导览的小程序不仅提供了基础性的导览功能，而且免除了下载APP的过程，为用户提供了更加便捷、高效的参观体验。。
ROS1学习笔记（知识点汇总+各种问题及其解决）
2301_79970562的博客
01-31 1863
根据要求自定义即可。
博物馆线上导览系统 app的设计与实现 64574 (免费领源码、附论文）可做计算机毕业设计JAVA、PHP、爬虫、APP、小程序、C#、C++、python、数据可视化、大数据、全套文案
QQ_785101605的博客
09-23 1997
本文以Android、java为开发技术，实现了一个基于Android的博物馆线上导览系统 app。基于Android的博物馆线上导览系统 app的主要使用者分为管理员和用户，app端：首页、菜谱信息、甜品信息、交流论坛、我的，管理员：首页、个人中心、用户管理、菜谱信息管理、菜谱分类管理、甜品信息管理、甜品分类管理、宣传广告管理、交流论坛、系统管理等功能。通过这些功能模块的设计，基本上实现了整个博物馆线上导览的过程。
12岁开始开发3款小程序，00后的编程是这么开始的…
程序员的那些事
07-18 1549
讲了很多程序员的故事，今天来讲点小程序员的故事。深夜，一位少年在电脑前狂敲代码，作为“监督员”的猫咪不时过来查岗，少年不理它。说时迟那时快，猫咪突然蹿上电脑桌，踩在了回车...
关联式容器详解-stl源码剖析笔记
weixin_42853463的博客
07-03 134
标准的关联式容器分为两大类，set（集合）和map（映射表），以及衍生出的multiset（多键集合）和multimap（多键映射表）。这些容器的底层结构均为红黑树，红黑树也是一个独立的容器，但不为外界使用。此外，STL还提供不在标准列表之内的关联式容器：hash table（散列表），以及以hash table为底层机制的hash_set，hash_map，hash_multiset，hash_multimap。关联式容器，每笔数据（每个元素）都有一个键值和一个实值。
Cocos2d-x入门（计算机游戏开发课程笔记）
HYY的博客
03-09 5454
Cocos2d-x入门（计算机游戏开发课程笔记） 文章目录Cocos2d-x入门（计算机游戏开发课程笔记）查看版本创建项目基础架构1. 命名空间2. 程序入口函数3. AppDelegate.happlicationDidFinishLaunching()applicationDidEnterBackground()applicationWillEnterForeground()HelloWorldScene.h构建简单场景字体位图字体 (BMFont)TrueTtpe字体 (TTF)系统字体 （Sys
:seedling:校园导览|校园地图|校园工具|微信小程序
01-27
首款开源的微信地图导览小程序，仅需修改地图文件，就可以适配某一学校/景区，具有出色的用户体验。 官网： :check_box_with_check:一键配置切换 :check_box_with_check:地图路径规划 :check_box_with_check:在线热...
一种基于微信小程序的景区语音导览系统.docx
05-28
一种基于微信小程序的景区语音导览系统.docx一种基于微信小程序的景区语音导览系统.docx一种基于微信小程序的景区语音导览系统.docx一种基于微信小程序的景区语音导览系统.docx一种基于微信小程序的景区语音导览系统...
微信小程序 兵马俑小程序(含语音画册与实时导览)（截图+源码）
05-11
微信小程序 兵马俑小程序(含语音画册与实时导览)（截图+源码）微信小程序 兵马俑小程序(含语音画册与实时导览)（截图+源码）微信小程序 兵马俑小程序(含语音画册与实时导览)（截图+源码）微信小程序 兵马俑小程序(含...
NFU-Guide-Map：:round_pushpin:地图导览小程序—南苑导览:person_walking:仅需修改配置即可替换任意场景的个性化定制地图小程序
02-03
南苑导览是一种由学生独立开发的以地图为载体，提供中山大学南方学院（南苑）具体地点的位置信息，导航，校园历史及文化介绍的小程序。逐步解决校园导航标识不到位，地图形式低效单一，信息设计不够好等问题，为来...
微信小程序路由跳转
Syyynb的博客
05-22 258
通过以上代码，我们实现了一个简单的场景：用户从首页跳转到文章详情页，然后跳转到用户设置页，最后从用户设置页返回到首页。在这个过程中，我们分别使用了。现在，我们来实现一个场景：用户从首页点击文章进入文章详情页，然后从文章详情页跳转到用户设置页，最后从用户设置页返回到首页。这两个导航API来实现不同的跳转效果。
【全开源】宇鹿家政系统（FastAdmin+ThinkPHP+原生微信小程序）
2401_84414018的博客
05-28 293
同时，用户可以通过小程序随时随地进行服务预约、支付结算等操作，享受更加便捷的家政服务体验。这款源码的推出将推动家政行业的数字化升级，提高服务效率，降低运营成本，促进整个行业的健康发展。同时，系统还提供了智能推荐功能，根据用户的历史订单和评价数据，为用户推荐最适合的家政服务人员。家政小程序系统源码采用了先进的技术架构和可靠的数据库技术，确保系统的稳定性和安全性。通过不断优化和完善系统功能，我们将为用户提供更加优质、便捷的家政服务体验，助力家政行业实现更加美好的未来。
uniapp+h5 ——微信小程序页面截屏保存在手机
Juliet_xmj的博客
05-28 236
微信小程序和h5页面截图保存为图片
微信小程序 蓝牙打印esc编码格式
最新发布
chensi_07的博客
05-28 59
【代码】微信小程序 蓝牙打印esc编码格式。
小程序导览地图JS页面
03-26
很抱歉，由于我是一名语言模型AI，我无法直接提供代码。但是我可以给你提供一些实现地图导览功能的思路。 1.引入地图API：你需要...这些是实现小程序导览地图功能的基本思路，你可以根据你的实际需求进行具体实现。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值