标题：【码斯阁技术实战】uni-app店铺街道优化：显示距离与隐藏无商品店铺

文档摘要：在uni-app开发的电商平台中，用户界面的直观性和实用性是提升用户体验的关键。本文将分享如何优化店铺街道显示，包括计算并展示店铺与用户的距离，以及隐藏那些没有商品的店铺，确保用户能够快速找到他们感兴趣的店铺。

问题背景：用户在浏览店铺街道时，通常希望看到与自己距离较近的店铺，并且只对有商品的店铺感兴趣。因此，我们需要在uni-app中实现一个功能，既能显示店铺与用户的距离，又能隐藏那些没有商品的店铺。

解决方案：

1. 获取用户位置：

• 使用uni-app的定位功能获取用户的当前位置。

2. 请求店铺数据：

• 向服务器发送请求，获取店铺列表，并传递用户的位置信息。

3. 计算距离并过滤店铺：

• 计算每个店铺与用户的距离，并根据是否有推荐商品来过滤店铺列表。

4. 更新店铺列表：

• 将计算距离后且有商品的店铺列表更新到店铺街道界面。

示例代码：

javascript// 查找店铺storeMerchantList() {  if (this.loading) return;  this.loading = true;  let rqData = {    keyword: this.storeParam.keyword,    page: this.storeParam.page,    limit: 10,    order: this.storeParam.order,    category_id: this.storeParam.category_id,    type_id: this.storeParam.type_id  };  if (this.latitude) {    rqData.location = this.latitude + ',' + this.longitude;  }    storeMerchantList(rqData).then(res => {    this.count = res.data.count;    let tempList = res.data.list;        // 过滤掉没有商品的店铺    for (var i = tempList.length - 1; i >= 0; i--) {      if (tempList[i].recommend.length == 0) {        tempList.splice(i, 1);      }    }        // 将过滤后的店铺列表添加到总列表中    this.storeList = this.storeList.concat(tempList);    this.loading = false;    this.loadingIcon = false;        // 修复去除空白店铺数据导致加载不了下一页的问题    if (this.storeList.length <= 4) {      this.storeParam.page += 1;      this.storeMerchantList();    }  });},

实施步骤：

1. 定位用户：在用户授权的情况下，获取用户的地理位置。
2. 请求店铺数据：在店铺街道页面加载时，向服务器请求店铺数据，并传递位置信息。
3. 计算距离：对获取到的店铺数据进行处理，计算每个店铺与用户的距离。
4. 过滤店铺：移除那些没有商品的店铺。
5. 更新列表：将处理后的店铺列表更新到店铺街道页面。

总结：通过上述步骤，我们可以在uni-app的店铺街道中实现显示店铺与用户的距离，并隐藏那些没有商品的店铺，从而提升用户的购物体验。

关于码斯阁：在码斯阁，我们专注于提供实用的技术解决方案，帮助开发者解决实际问题。如果你在开发过程中遇到任何难题，欢迎来找我们聊聊。