当前位置：首页 > news >正文

uniapp-商城-67-shop（3-品牌信息显示，弹窗显示完整品牌信息，弹窗拨打电话、地图定位）

news 来源：原创 2025/5/25 8:22:29

在shop头部，使用的是组件shop-headbar 来完成的，前面我们2个章节完成了数据的展示。这里还需要点击品牌信息显示更多的信息。

我们这里借助popup的组件来完成该功能的实现.

本文介绍了如何通过uni-popup组件实现品牌详情弹窗功能。在品牌区域添加点击事件触发弹窗，弹窗包含三部分：顶部关闭按钮，中间品牌信息展示（logo、名称、简介），底部联系方式（点击拨打电话）和地址（点击跳转地图）。地图定位通过高德API实现，需先配置web端密钥，再通过请求获取坐标后调用openLocation打开地图。该方案实现了品牌信息的便捷展示与交互功能。

1、在品牌页面区域中添加一个事件

@click="clickBrand"

主要代码：

					<view class="brand" @click="clickBrand"><view class="pic"><!-- <image class="img" src="/static/沙凼湾.svg" mode="aspectFill"></image> --><image class="img" :src="brandData.thumb[0].url" mode="aspectFill"></image></view><view class="text"><view class="title"><text class="font">{{brandData.name}}</text> <!-- 农贸集市 --><!-- //更多，可以点击也可以把点击放在 brand 这里，点击以后就弹窗显示更多 --><u-icon class="icon" name="more-circle" size="22" color="#fff"></u-icon></view><view class="des">{{brandData.about}}</view> <!-- 感恩大自然绿色健康的馈赠。 --></view><view class="code" @click="clickPay"><view class="pic"><image class="img" src="../../static/images/qrcode.png" mode="aspectFill"></image></view><text class="pay">付款</text></view></view>

2、在方法中添加该事件的处理

            //点击弹窗品牌更多信息
            clickBrand() {
                this.$refs.brandPopup.open();
            },

这里的open事件是利用uni-popup来实现的。见3

3、页面中弹窗的实现代码以便二中的事件实现

3.1 具体的代码：

使用的uni-popup 名称：brandPopup，从底部弹出

			<view v-if="brandData.name"><uni-popup ref="brandPopup" type="bottom"><!-- 从底部弹窗 这里可以用这个 uni-popup 也可以用uview中的popup --><view class="brandWrapper"><!-- 分为三个模块  上中下 --><view class="close" @click="closeBrandPop"><u-icon name="arrow-down" color="#666"></u-icon></view><view class="brand"><view class="pic"><image class="img" :src="brandData.thumb[0].url" mode="aspectFill"></image></view><view class="title">{{brandData.name}}</view><view class="des">{{brandData.about}}</view></view><view class="cell"><u-cell-group><u-cell icon="phone" :title="brandData.mobile" isLink@click="clickMobile(brandData.mobile)"></u-cell><u-cell icon="map" :title="brandData.address" isLink@click="clickMap(brandData.address)"></u-cell></u-cell-group></view><view class="safeAreaBottom"></view><!-- 上面安全区域是设置为ios使用的，怕底部的区域被遮挡了 --></view></uni-popup><u-modal :show="payPopState" showCancelButton title="付款给商家" @confirm="payConfirm" @cancel="payCancel"><u--input placeholder="请输入付款金额" border="surround" clearable type="number" v-model="total_fee" focusautoBlur></u--input></u-modal><uni-pay ref="uniPay" return-url="/pages/order/order" @success="paySuccess"@cancel="payCancel"></uni-pay></view>

3.2 代码分析：

代码分三部分上中下: 一个close的向下的箭头、中间是品牌信息 logo 名称描述

最后是下边展示的电话和地址

上：需要实现关闭弹窗closeBrandPop，见 3.3 .

当然你不点击这里，也可以点击uni-popup的遮罩来关闭

中：

                  <view class="brand">
                      <view class="pic">
                          <image class="img" :src="brandData.thumb[0].url" mode="aspectFill"></image>
                      </view>
                      <view class="title">{{brandData.name}}</view>
                      <view class="des">{{brandData.about}}</view>
                 </view>

中间部分就是信息展示

下：主要是展示电话和地址以及安全区域

clickMobile(brandData.mobile) 点击就可以弹出电话拨打见 3.4

clickMap(brandData.address) 点击就可以地图定位见 3.5

3.3 关闭弹窗closeBrandPop

            //关闭品牌弹窗
            closeBrandPop() {
                this.$refs.brandPopup.close();
            },

3.4 点击拨打电话 clickMobile(brandData.mobile)

使用拨打电话的接口

            // 点击拨通电话
            clickMobile(value) {
                uni.makePhoneCall({
                    phoneNumber: value
                })
            },

3.5 点击地图定位 clickMap(brandData.address)

地图定位要麻烦一些

第一步要设置web的密钥我们这里有的高德，腾讯要设置跨域要麻烦一些

第二步注册登录高德地图

高德开放平台 | 高德地图API高德开放平台|高德开放平台官网|高德开放平台控制台|官网控制台|控制台|应用管理|应用分析|账号信息|开发者信息|账号权限|KEY管理https://lbs.amap.com/第三步进入控制台创建应用

我的应用 | 高德控制台高德开放平台官网控制台提供了高德开发者Key管理，Key可视化分析等功能。https://console.amap.com/dev/key/app第四步创建key web端js api 以及web服务的key 这里先在web上测试（以后再来说小程序的）

第五步在hbuilder上，进入项目的manifest.json中，web端的配置，定位和地图选中高德地图

添加 key 和密钥是这个key web端js api；不是web服务的。

第六步在页面中实现定位代码：

6.1 使用网络请求，通过web服务key，不是 web端js api 获取地址，使用方式如下：request ，添加url 使用data 传递必填的参数 key 和地址value

6.2 通过获取到web服务的返回值，知道经纬度

let location = res.data.geocodes[0].location

6.3 再对经纬度处理，字符串split 分片，然后对分片后的数组进行数字化 Number，然后把经纬度放到组件 openLocation 进行地图打开和定位

			// 点击打开地图clickMap(value) {//高德地图 不跨域，腾讯地图需要跨域设置较麻烦//这里就用高德  在manifest.JSON中web配置选中 并配置好key和密钥uni.request({url: "https://restapi.amap.com/v3/geocode/geo",data: {key: "88ffafe1637b208664b8bf3ce485c705",address: value},success: res => {let location = res.data.geocodes[0].locationlet arr = location.split(",").map(item => Number(item))uni.openLocation({latitude: arr[1],   //维度longitude: arr[0]   //经度})}})},