在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" focus
autoBlur></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="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使用的，怕底部的区域被遮挡了 -->
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].location
let arr = location.split(",").map(item => Number(item))
uni.openLocation({
latitude: arr[1], //维度
longitude: arr[0] //经度
})
}
})
},