文档摘要：在uni-app开发的电商平台首页，店铺展示的商品信息需要既直观又吸引人。本文将分享如何优化首页店铺的商品展示，包括商品编号、城市名称和价格的显示，以及如何动态加载商品所在城市的信息。

问题背景：首页是用户进入电商平台的第一站，一个清晰、有吸引力的商品展示可以极大地提升用户的浏览体验和购买欲望。因此，我们需要确保商品信息的展示既准确又具有吸引力。

解决方案：

1. 优化商品信息展示：

• 使用uni-app的前端框架，优化商品信息的展示方式，包括商品编号、城市名称和价格。

2. 动态加载城市信息：

• 通过后端查询，动态加载商品所在的城市信息，并在前端进行展示。

3. 代码实现：

• 提供前端和后端的代码实现，确保商品信息的准确性和实时性。

示例代码：

html<view class="text-info" style="background:#fff;">    <view v-if="titleShow" style="display: flex; align-items: center; justify-content: center;padding-top:10rpx;">        <view style="font-size: 21rpx;white-space: nowrap;overflow: hidden;line-height:21rpx;">            No.{{ item.product_id }}&nbsp;{{ item.city_name }}&nbsp;￥{{ Math.floor(item.price) }}        </view>    </view>    <view v-if="priceShow" style="font-size:21rpx;white-space: nowrap; overflow: hidden; margin-top: 5rpx;">        {{ item.store_name }}    </view></view>

后端代码：

phpforeach ($list as $key => $item) {    foreach ($item['recommend'] as $r) {        $tempResult = Db::query('select cate_id from eb_store_product where product_id=?',[$r['product_id']]);        $thisProductCateId = $tempResult[0]['cate_id'];                $productCityNameItem = Db::query("select name from eb_city_area where id=?",[$thisProductCateId]);        $productCityName = $productCityNameItem[0]['name'];                $query1 = 'select name as parent_city_name from eb_city_area where id=(select parent_id from eb_city_area where id=(select cate_id from eb_store_product where product_id =?))';        $parentCityName = Db::query($query1, [$r['product_id']])[0]['parent_city_name'];                $cities = array("北京", "上海", "天津", "重庆");        foreach ($cities as $city) {            if (strpos($parentCityName, $city) !== false) {                $r['city_name'] = $parentCityName;                break;            } else {                $r['city_name'] = $productCityName;            }        }    }}

实施步骤：

1. 前端展示优化：在uni-app中优化商品信息的展示，确保信息清晰可见。
2. 后端数据处理：在服务器端查询商品的城市信息，并将其传递给前端。
3. 数据绑定：在前端将后端传递的城市信息绑定到商品展示组件上。
4. 测试验证：在不同设备和网络环境下测试商品信息的展示效果，确保其准确性和一致性。

总结：通过上述步骤，我们可以在uni-app的首页店铺展示中优化商品信息的显示，提升用户的浏览体验和购买欲望。

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