老样子 先看效果图
代码很简单
templete部分
<!-- 公司地址 -->
<areaSelect></areaSelect>
<view class="select-item" @click="detail_address">
<view class="titles" style="padding: 10upx 30upx 10upx 30upx;display: flex;align-items: center;">
<view class="chooseDate">
<view mode="selector" class="Alineof" style="display: flex;align-items: center;">
<text style="display: block;width: 196upx;">详细地址</text>
<!-- <text v-if="showoptions_8" style="padding-left: 30rpx" class="uni-input">
{{detailAddress}}
</text>
<text v-else style="color: #C0C4CC;padding-left: 30rpx">选择详细地址</text> -->
<u-input class="ipttextmsg" v-model="detailAddress" style="padding-left: 0rpx;" placeholder="请输入详细地址" />
</view>
</view>
<image src="../../static/images/local.png" style="width: 30upx;height:30upx;vertical-align: middle;" mode=""></image>
</view>
</view>
大家如果需要公司地址三级联动的话看我第一篇文章 前段时间更新过
js部分
// 详细地址
detail_address(){
uni.chooseLocation({
success:res=>{
console.log('位置名称:' + res.name);
console.log('详细地址:' + res.address);
console.log('纬度:' + res.latitude);
console.log('经度:' + res.longitude);
this.detailAddress=res.address
this.showoptions_8=true
}
});
},
这里要注意一个地方就是成功后的回调函数需要写成箭头函数的形式,否则选完地址之后页面不会实时渲染 或者使用强制更新的方法this.$forceUpdate()
ok 最后贴上我的这部分的css
.titles {
display: flex;
justify-content: space-between;
padding: 30rpx;
border-bottom: 2rpx solid rgba(#e5e5e5, .4);
}
.select-lists {
position: absolute;
background-color: #FFFFFF;
z-index: 10;
width: 100%;
top: 80rpx;
box-shadow: 0 2rpx 30rpx 0rpx #C0C0C0;
view {
padding: 20rpx;
border-bottom: 2rpx solid rgba(#e5e5e5, .4);
}
}
小结:目前来说还没有唤起获取位置的授权弹窗,有的小伙伴可能会需要,回头如果我整理了的话就给大家再贴上来