6.首页模块-CSDN博客

本文链接：https://blog.csdn.net/2302_76812487/article/details/136400864

一、商家、图标素材

images.rar

商户类别表：

CREATE TABLE `merchanttype` ( `merchanttypeid` int(11) NOT NULL AUTO_INCREMENT COMMENT '商户类别id', `merchanttypename` varchar(20) DEFAULT NULL COMMENT '商户类别名称', PRIMARY KEY (`merchanttypeid`) ) ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=utf8 COMMENT='商户类别表'; insert into `merchanttype`(`merchanttypeid`,`merchanttypename`) values (1,'美食百货'),(2,'按时吃饭'),(3,'特色推荐'),(4,'美食荟萃');

商户二级分类表：

CREATE TABLE `merchanttypeitem` ( `itemid` int(11) NOT NULL AUTO_INCREMENT COMMENT '商户明细类别id', `merchanttypeid` int(11) DEFAULT NULL COMMENT '商户类别id', `merchanttypename` varchar(20) DEFAULT NULL COMMENT '商户明细类别名称', `itemimagepath` varchar(200) DEFAULT NULL COMMENT '商户明细类别图标', `orderby` int(11) DEFAULT NULL COMMENT '排序', PRIMARY KEY (`itemid`), KEY `merchanttypeid` (`merchanttypeid`), CONSTRAINT `merchanttypeitem_ibfk_1` FOREIGN KEY (`merchanttypeid`) REFERENCES `merchanttype` (`merchanttypeid`) ) ENGINE=InnoDB AUTO_INCREMENT=84 DEFAULT CHARSET=utf8 COMMENT='商户类别明细表'; insert into `merchanttypeitem`(`itemid`,`merchanttypeid`,`merchanttypename`,`itemimagepath`,`orderby`) values (2,1,'美食','images/icon/20230606205851.png',1),(3,1,'甜点饮品','images/icon/20230606205938.png',2),(4,1,'超市便利','images/icon/20230606210030.png',3),(5,1,'蔬菜水果','images/icon/20230606210054.png',4),(6,1,'看病买药','images/icon/20230606210115.png',5),(69,2,'夜宵','images/icon/20230606230846.png',1),(70,3,'新商家','images/icon/20230606230924.png',2),(71,3,'无辣不欢','images/icon/20230606232206.png',12),(72,3,'小吃馆','images/icon/20230606232034.png',9),(73,4,'饺子馆','images/icon/20230606232134.png',11),(74,4,'汉堡披萨','images/icon/20230606230954.png',3),(75,3,'浪漫鲜花','images/icon/20230606231747.png',4),(76,4,'快食简餐','images/icon/20230606232006.png',8),(77,4,'麻辣烫冒菜','images/icon/20230606232104.png',10),(78,4,'黄焖鸡米饭','images/icon/20230606232415.png',15),(79,4,'炸鸡零食','images/icon/20230606232341.png',14),(80,4,'鸭脖卤味','images/icon/20230606231831.png',5),(81,4,'日韩料理','images/icon/20230606231903.png',6),(82,4,'龙虾烧烤','images/icon/20230606231936.png',7),(83,4,'家常菜','images/icon/20230606232236.png',13);

index.wxss

.positionbox{ height: 10vh; width: 100%; display: flex; background-image: linear-gradient(180deg, #bfdfe2 0%, rgb(164, 170, 236) 100%); } .positionboxitem{ width: 95%; margin: 0 auto; display: flex; flex-direction: row; align-items: center; } .positionbox_icon{ width: 36rpx;height: 36rpx; } .address{ display: -webkit-box; margin:0 28rpx 0 8rpx; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 1; font-size: 32rpx; font-weight: bold; } .querybox{ margin-top:-30rpx ; background-color: #fff; height: 10vh; border-radius: 50rpx 50rpx 0 0; } .querybox_item{ width: 95%; margin: 0 auto; } .querytxtbox{ position: relative; padding: 40rpx 0;} .txtquery{ padding:10rpx 100rpx ; border: solid rgb(164, 170, 236); height: 60rpx; border-radius: 50rpx; font-size: large; } .queryicon{ width: 64rpx; height: 64rpx; position:absolute; top: 48rpx; left: 18rpx; } .btnquery{ position: absolute; top: 42rpx; background-color: rgb(164, 170, 236); height: 80rpx; right: 0rpx; border-radius: 50rpx; font-size: 38rpx; font-weight: 400; counter-reset: #000; } .queryfixed{ position: fixed; top: 0; width: 100%; background-color: #fff; z-index: 9; } .recommendbox{ width: 95%; margin: 0 auto; display: flex; } .recommenditem{ margin-right:10rpx; font-size: 28rpx; background-color: #ddd; padding: 2rpx 10rpx; border-radius: 10px; } .merchanttype{ width: 95%; margin: 0 auto; padding: 30rpx 0; display: flex; flex-direction: column; } .merchanttype .hotmerchanttype,.merchanttype .othermerchanttype{ display: flex; margin-bottom:20rpx ; } .merchanttypeitem{ width: 135rpx; margin-right:10rpx ; text-align: center; font-size: 24rpx; } .merchanttypeitem .typeicon{ width: 115rpx; height: 115rpx; } .merchanttypeitem .typeiconother{ width: 65rpx; height: 65rpx; display: flex; margin: 0 auto; } .wx-swiper-dots .wx-swiper-dot-active { width: 22px; border-radius: 4px;} .merchantlist{ width: 95%; margin: 0 auto; background-color: rgb(246, 246, 246); padding: 10rpx; } .merchantitem{ background-color: #fff; display: flex; margin:20rpx 0; padding: 20rpx; border-radius: 50rpx; box-shadow:0px 0px 50px rgb(210, 210, 210); } .merchantlogo{ position: relative; width: 30%; border-radius: 20rpx; overflow: hidden; border:1rpx solid rgb(210, 210, 210); height: 200rpx; } .merchantlogoimg{ border-radius: 20rpx; width: 100%; height: 200rpx; } .merchanttab{ position:absolute; top: 5rpx; right: 0rpx; min-width: 80rpx; text-align: center; border-radius: 10rpx; font-weight: bolder; } .merchantcontent{ margin-left:10rpx ; width: 70%; } .merchantcontent .merchanttitle{ font-size: 42rpx; font-weight: bolder; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 1; margin-bottom:10rpx ; } .merchantdetail{ font-size: 26rpx; color: #666; margin-right:15rpx ; } .detailfirst{ margin-bottom:10rpx ; } .detailfirst:after{ content: ''; display: block; clear: both; } .merchantdp{ background-color: rgb(220, 221, 240); color: rgb(10, 19, 121); padding: 0 10rpx; }

<swiper style="height:{{navheight}};margin-top: 5px;transition: all 0.5s;" indicator-dots="true" indicator-color="#ddd" indicator-active-color="rgb(164, 170, 236)" bindchange="onnavchang">  <swiper-item> <view class="merchanttype">  <view class="hotmerchanttype"> <view wx:for="{{hotType}}" wx:key="itemid" class="merchanttypeitem"> <image src="{{MyApIUrl+item.itemimagepath}}" class="typeicon"></image> <text>{{item.merchanttypename}}</text> </view> </view>   <view class="othermerchanttype" wx:for-index="j" wx:key="j" wx:for="{{[0,1]}}"> <view wx:for="{{otherType}}" wx:key="itemid" class="merchanttypeitem" wx:if="{{index>=(5*j)&&index<(j+1)*5}}"> <image src="{{MyApIUrl+item.itemimagepath}}" class="typeiconother"></image> <text>{{item.merchanttypename}}</text> </view> </view>  </view> </swiper-item>   <swiper-item> <view class="merchanttype">  <view class="othermerchanttype" wx:for-item="j" wx:key="j" wx:for="{{[2]}}"> <view wx:for="{{otherType}}" wx:key="itemid" class="merchanttypeitem" wx:if="{{index>=(5*j)&&index<(j+1)*5}}"> <image src="{{MyApIUrl+item.itemimagepath}}" class="typeiconother"></image> <text>{{item.merchanttypename}}</text> </view> </view>  <view class="othermerchanttype">  <view class="merchanttypeitem"> <image src="{{MyApIUrl}}images/icon/20230606232443.png" class="typeiconother"></image> <text>全部</text> </view>  </view> </view> </swiper-item>  </swiper>

商家表：

CREATE TABLE `merchant` ( `merchantid` varchar(50) NOT NULL COMMENT '商家编号', `merchantname` varchar(50) NOT NULL COMMENT '商家名称', `description` varchar(1000) DEFAULT NULL, `address` varchar(200) DEFAULT NULL COMMENT '商家地址', `telphone` varchar(20) DEFAULT NULL COMMENT '商家联系电话', `logoImage` varchar(200) DEFAULT NULL COMMENT '商家门头展示图', `postagetime` varchar(200) DEFAULT NULL COMMENT '经营时间', `longitude` float DEFAULT NULL COMMENT '商家地址经度', `latitude` float DEFAULT NULL COMMENT '商家地址纬度', `minamount` float DEFAULT NULL COMMENT '起送价', `minatime` float DEFAULT NULL COMMENT '配送时间', `merchanttab` varchar(10) DEFAULT NULL, `tabcolor` varchar(10) DEFAULT NULL, `tablbgcolor` varchar(10) DEFAULT NULL, PRIMARY KEY (`merchantid`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='商家表';

数据录入

insert into `merchant`(`merchantid`,`merchantname`,`description`,`address`,`telphone`,`logoImage`,`postagetime`,`longitude`,`latitude`,`minamount`,`minatime`,`merchanttab`,`tabcolor`,`tablbgcolor`) values ('1','晟湘园(凯风珑城店)','新店开业，欢迎您光临本店，本店服务至上，如果您在选购过程中，有任何意见或者建议，均可联系我们，小店将竭诚为您服务，感谢您的光临! 祝您用餐愉快!','株洲云龙示范区红旗北路348号凯风珑城13栋109、110、111、 112、 113、214、215、216、217、218号商铺','073122869777','images/merchant/晟湘园.png','10:00-14:00 17:00-20:00',113.144,27.8757,20,35,'新店','#000','#00FF7F'),('10','山椒红湘菜馆','我们坚持以菜品口味/食材新鲜度为第一，所有菜品均由老板本人亲自选购所有菜品坚持现炒，不做任何料理包门味正宗，欢迎品尝!如有餐品有任何问题请您及时联系我们，我们一定给您处理到位!','株洲市荷塘区东湖社区湖南工业大学门口郭家大屋38号一楼门面','13874129928','images/merchant/山椒红湘菜馆.png','00:00-02:00.10:30-16:30,17:00-23:59',113.168,27.8308,70,52,NULL,NULL,NULL),('2','CoCo都可(响石广场店)','美式4.9元，生耶9.9元，不限量不限购哦~','株洲市石峰区建设北路762号中铁汇通国际一楼109室','15367196158','images/merchant/b7d04bf1d1dc22745c3391da05b7d417573774.png','09:30-21:40',113.114,27.8708,20,35,'旗舰','#1E90FF','#F0FFFF'),('3','香烹烹麻辣香锅 (株洲店)','这个','湖南省株洲市荷塘区桂花街道桂花路28号荷塘香榭4栋128(9号门面)','15570753627','images/merchant/logoml.png','10:00-21:00',113.174,27.8616,20,10,'品牌','#fff','#FFD700'),('4','小厨百味·小碗菜','热气腾腾的盒饭，不仅是果腹，更是畅想未来的美好时刻，奋斗的感觉真好，小店将竭诚为您服务，祝您用餐愉快','株洲市石峰区响石岭街道杉塘路130号1栋106-1号','15367196157','images/merchant/d71013aa-946b-4d02-b25d-951560a5971f.jpg','10:00-21:00',113.13,27.8635,20,40,NULL,NULL,NULL),('5','摆朴','春节放假通知! 春节将至，全体员工提前祝: 新老顾客新春快乐! 万事如意!放假时间，自2022年12月18日---2023年2月8日，放假期间，给您带来不便敬请谅解! 2023年2月8日正常营业!','株洲市石峰区清水塘街道沈家湾社区天桥美食宫一楼1号','18229150082','images/merchant/baipu.jpg','07:00-13:50,16:50-19:50',113.1,27.8845,20,44,'网红店','#000','#DC143C'),('6','农家蒸菜馆','公告:欢迎光临，很高兴为您服务','株洲益源上汽大众4S店(响石广场店)','13745789321','images/merchant/ed14f8be265f1d5232e11f2b204ccc1874678.jpg','9:00-10:00',113.113,27.8724,25,10,'优选','#fff','#00BFFF'),('7','饭饱饱·现炒木桶饭（株洲店）','尊敬的顾客：欢迎您光临！我们是一家认真做木桶饭的店，本店追求卓越的餐品质量和快速的出餐时效，快速满足您享用美食的需求，让您能吃着安全，放心！','湖南省株洲市芦淞区庆云街道太子路1398号百江花园6栋109号','19310390168','images/merchant/fanbaobao.jpg','10：00~23：59',113.159,27.8138,20,46,NULL,NULL,NULL),('8','清水塘印象','公告:新店爆款·品质湘菜','株洲益源上汽大众4S店(响石广场店)','13745789321','images/merchant/9fe5cde148ef6cafba200269f442b2bb145359.jpg','9:00-10:00',113.113,27.8724,28,46,NULL,NULL,NULL),('9','朱亭煲仔饭店','本店可以提供正规餐饮发票','湖南省长沙市天心区桂花坪街道金桂小区豹塘路B22号14栋门面','19118690658','images/merchant/7.png','09:10-21:50',113.111,27.8718,15,25,NULL,NULL,NULL);

<view class="merchantlist"> <view class="merchantitem" wx:for="{{[1,2]}}"> <view class="merchantlogo"> <image class="merchantlogoimg" src=""></image> <view class="merchanttab">新店</view> </view> <view class="merchantcontent"> <view class="merchanttitle">店面</view> <view class="detailfirst"> <view class="merchantdetail" style="float: left;">评分</view> <view class="merchantdetail" style="float: left;">月售200+</view> <view class="merchantdetail" style="float: right;">5.1km</view> <view class="merchantdetail" style="float: right;">20分钟</view> </view> <view class="detailfirst"> <view class="merchantdetail" style="float: left;">起送￥5</view> </view> <view class="detailfirst"> <view class="merchantdp" style="float: left;">“荷塘区烧烤回头率榜第1名”</view> </view> </view> </view> </view>

merchant.rar