在电商平台的APP中，用户往往希望快速找到附近的店铺，并且只对有商品的店铺感兴趣。本文将分享如何在uni-app中实现这样的功能：在店铺街显示店铺与用户的距离，并隐藏那些没有商品的店铺。

问题背景：想象一下，你正在寻找附近的电子产品店，但列表中却混杂着一些没有商品的店铺，这无疑增加了你的选择成本。为了让用户有更好的体验，我们需要在店铺街中显示店铺与用户的距离，并过滤掉那些没有商品的店铺。

解决方案：

1. 获取用户位置：

• 首先，我们需要获取用户的地理位置信息，以便计算店铺与用户的距离。

2. 请求店铺数据：

• 通过API请求店铺数据，并传递用户的地理位置信息。

3. 过滤无商品店铺：

• 在获取到店铺数据后，检查每个店铺是否有推荐商品，如果没有，则不将其显示在店铺街中。

4. 计算并显示距离：

• 对于每个店铺，计算其与用户的距离，并在店铺街中显示。

示例代码：

javascript// 查找店铺storeMerchantList() {  if (this.loading) return;  this.loading = true;  let rqData = {    keyword: this.sotreParam.keyword,    page: this.sotreParam.page,    limit: 10,    order: this.sotreParam.order,    category_id: this.sotreParam.category_id,    type_id: this.sotreParam.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.sotreParam.page += 1;      this.storeMerchantList();    }  });},

实施步骤：

1. 获取位置信息：在用户授权的前提下，获取用户的地理位置。
2. 请求店铺数据：在店铺街页面加载时，向服务器请求店铺数据，并传递位置信息。
3. 过滤无商品店铺：在数据处理逻辑中，移除那些没有商品的店铺。
4. 更新店铺列表：将处理后的店铺列表更新到店铺街页面。

总结：通过这个小技巧，我们可以在uni-app的店铺街中显示店铺与用户的距离，并隐藏那些没有商品的店铺，从而提升用户的购物体验。

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