前言

“商户”是指有实体经营场所的商家；如知识营销、网络营销、绿色营销、个性化营销、创新营销、整合营销、消费联盟营销、连锁经营渠道营销、大市场营销、绿色营销、娱乐营销等营销商家。

商户的分类比较广泛，一般包含酒店、餐厅、酒吧、婚庆、教育、医疗、健身、车市、亲子、甜品、酒庄、咖啡、美容、美甲、美发、媒体、影楼、家政、艺廊、 KTV、会所、瑜伽、 SPA 纤体、宠物、 DIY、游艺、家居、珠宝、潮店、购物、超市、特产、景区、书店、院线、上门公司、中介、旅行、票务机构、楼盘、邮递、金融等。

每种分类涉及的商家有很多，商家列表主要就是展示这些商家信息，地址，电话等等。

一、商家列表

<!--pages/shoplist/shoplist.wxml--><view class="shop-item" wx:for="{{shopList}}" wx:key="id"><view class="thumb"><image src="{{item.images[0]}}"></image></view><view class="info"><text class="shop-title">{{item.name}}</text><text>电话：{{tools.splitPhone(item.phone)}}</text><text>地址：{{item.address}}</text><text>营业时间：{{item.businessHours}}</text></view>
</view><wxs src="../../utils/tools.wxs" module="tools"></wxs>

// pages/shoplist/shoplist.js
Page({/*** 页面的初始数据*/data: {query: {},shopList: [],page: 1,pageSize: 10,total: 0,isloading: false},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.setData({query: options})this.getShopList()},// 以分页的形式获取商铺列表数据的方法getShopList(cb) {this.setData({isloading: true})// 展示 loading 效果wx.showLoading({title: '数据加载中...'})wx.request({url: `https://www.escook.cn/categories/${this.data.query.id}/shops`,method: 'GET',data: {_page: this.data.page,_limit: this.data.pageSize},success: (res) => {this.setData({shopList: [...this.data.shopList, ...res.data],total: res.header['X-Total-Count'] - 0})},complete: () => {// 隐藏 loading 效果wx.hideLoading()this.setData({ isloading: false })// wx.stopPullDownRefresh()cb && cb()}})},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {wx.setNavigationBarTitle({title: this.data.query.title})},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {// 需要重置关键的数据this.setData({page: 1,shopList: [],total: 0})// 重新发起数据请求this.getShopList(() => {wx.stopPullDownRefresh()})},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {if (this.data.page * this.data.pageSize >= this.data.total) {// 证明没有下一页的数据了return wx.showToast({title: '数据加载完毕！',icon: 'none'})}// 判断是否正在加载其他数据if (this.data.isloading) return// 页码值 +1this.setData({page: this.data.page + 1})// 获取下一页数据this.getShopList()},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

/* pages/shoplist/shoplist.wxss */
.shop-item {display: flex;padding: 15rpx;border: 1rpx solid #efefef;border-radius: 8rpx;margin: 15rpx;box-shadow: 1rpx 1rpx 15rpx #ddd;
}.thumb image {width: 250rpx;height: 250rpx;display: block;margin-right: 15rpx;
}.info {display: flex;flex-direction: column;justify-content: space-around;font-size: 24rpx;
}.shop-title {font-weight: bold;
}

{"usingComponents": {},"onReachBottomDistance": 200,"enablePullDownRefresh": true,"backgroundColor": "#efefef","backgroundTextStyle": "dark"
}

二、效果

【愚公系列】2022年11月微信小程序-本地生活项目-商家列表相关推荐

【愚公系列】2022年11月微信小程序-本地生活项目-首页
文章目录前言 1.本地生活服务平台的优势一.首页二.效果前言从线下企业到线上企业的整合是传统产业和互联网技术的有机结合.它看起来像一个简单的平台,但是它将给消费者和用户带来极大的便利.在电子 ...
【愚公系列】2022年11月微信小程序-优购电商项目-授权页面
文章目录前言 1. 授权页面一.授权页面 1.业务逻辑 2.涉及的接口数据二.授权页面相关代码 1.页面代码 2.效果前言前言:由于微信官方修改了 getUserInfo 接口,所以现在无法 ...
【愚公系列】2022年10月微信小程序-电商项目-微信支付后端功能实现（node版）
文章目录前言一.微信支付后端功能实现(node版) 1.相关文档 2.项目配置前言微信支付是腾讯集团旗下的第三方支付平台,致力于为用户和企业提供安全.便捷.专业的在线支付服务.以"微 ...
【愚公系列】2022年10月微信小程序-电商项目-微信支付小程序确认支付结果和退款功能实现（node）
文章目录前言一.微信支付小程序确认支付结果和退款功能实现 1.确认支付结果 2.退款功能实现前言微信小程序在支付成功后会给注册的接口发消息来通知订单支付成功的状态,下面是微信和接口通信的数据格 ...
【愚公系列】2022年11月微信小程序-优购电商项目-首页设计
文章目录前言一.首页设计 1.首页的业务逻辑 2.涉及的接口数据 3.关键技术二.首页相关代码 1.⾃定义组件搜索框 2.wx.request封装 3.首页页面 4.效果前言对于小程序电商首 ...
【愚公系列】2022年11月微信小程序-优购电商项目-商品支付页面
文章目录前言 1. 商品⽀付页面设计规范一.商品支付页面 1.业务逻辑 2.涉及的接口数据 3. 关键技术二.商品购物车页面相关代码 1.页面代码 2.效果前言 1. 商品⽀付页面设计规范第 ...
【愚公系列】2022年10月微信小程序-电商项目-小微商户支付后端功能实现（node版）
文章目录前言一.小微商户支付后端功能实现(node版) 1.相关文档 2.项目配置前言微信支付是腾讯集团旗下的第三方支付平台,致力于为用户和企业提供安全.便捷.专业的在线支付服务.以" ...
【愚公系列】2022年10月微信小程序-电商项目-商品购物车功能实现
文章目录前言一.商品购物车功能实现二.效果前言在电商的核心交易流程中,购物车是其中非常重要的一环,它承担商品加购.价格计算.促销活动展示等功能,与会员系统.商品系统.库存系统.订单系统等紧密 ...
【愚公系列】2022年10月微信小程序-电商项目-微信支付功能前申请准备工作
文章目录前言一.微信支付功能实现 1.微信公众平台的准备 2.微信商户平台的准备前言微信支付是腾讯集团旗下的第三方支付平台,致力于为用户和企业提供安全.便捷.专业的在线支付服务.以" ...

【愚公系列】2022年11月微信小程序-本地生活项目-商家列表

文章目录

前言

一、商家列表

二、效果

【愚公系列】2022年11月微信小程序-本地生活项目-商家列表相关推荐

最新文章

热门文章

【愚公系列】2022年11月 微信小程序-本地生活项目-商家列表

文章目录

前言

一、商家列表

二、效果

【愚公系列】2022年11月 微信小程序-本地生活项目-商家列表相关推荐

最新文章

热门文章

【愚公系列】2022年11月微信小程序-本地生活项目-商家列表

【愚公系列】2022年11月微信小程序-本地生活项目-商家列表相关推荐