又双叒一个uniapp组件
最近有一个选择地址的需求，就写了一个省市区联动选择器。
选择日期使用的picker,就照着它简单的整了一个,使用网络请求城市数据，还用到了vuex组件数据共享。
本来自己整了一个底部弹窗，又在插件市场看到了更好的底部弹窗 :LuPopupWrapper--弹窗容器， 所以就用了这个。
依然发布到了插件市场：http://ext.dcloud.net.cn/plugin?id=708
看一下效果吧
具体实现
css就不贴出来了，下载可以看到。
第一、底部弹出框
<view class="popup-layout-wrap" :class="popuplayoutClass" >
<view class="popup-layout-content" :class="popupContentClass" :style="[{height:height}]">
<slot>
</slot>
</view>
<view v-if="maskShow" class="popup-layout-mask" @tap="close(maskClick)"></view>
</view>
这里的底部弹出框用了插件市场的，简单的看一下布局。
slot插槽用于填充弹出框的内容。
最主要的就是弹出和关闭。属性就一个height，控制弹出的高度，其他的暂时不需要。
第二、上下滑动选择城市信息
分析一波：头部两个按钮，取消和确定。头部下面是选择的城市信息展示。再往下就是最重要的选择操作区。
选择操作区分成三列，三列分别显示省市区，并且可滑动。当点击选择后，变为红色。
html代码
<view class="link-address-wrap">
<view class="link-adress-content">
<view class="head-wrap">
<text class="cancel" @click="btn_cancel">取消</text>
<text class="confirm" @click="btn_confirm">确认</text>
</view>
<view class="head-selected">
<text class="selected-txt">已选择:{{selected_address}}</text>
</view>
<view class="operation-wrap">
<view class="operation-container">
<view class="operation-content">
<scroll-view
scroll-y="true"
class="province"
show-scrollbar="false">
<view
:class="{'province-txt':index!==province_current,'province-txt-click':index===province_current}"
@click="province_txt_click(items.id)"
v-model="items.id"
v-for="(items , index) of linkAddress_province"
>
{{items.name}}
<view class="pic" v-show="index===province_current">
<image src="../../static/xuan-linkAddress/yes.png"></image>
</view>
</view>
</scroll-view>
</view>
<view class="operation-content">
<scroll-view
scroll-y="true"
class="province"
show-scrollbar="false">
<view
:class="{'province-txt':index!==city_current,'province-txt-click':index===city_current}"
@click="city_txt_click(items.id)"
v-model="items.id"
v-for="(items , index) of linkAddress_city"
>
{{items.name}}
<view class="pic" v-show="index===city_current">
<image src="../../static/xuan-linkAddress/yes.png"></image>
</view>
</view>
</scroll-view>
</view>
<view class="operation-content">
<scroll-view
scroll-y="true"
class="province"
show-scrollbar="false">
<view
:class="{'province-txt':index!==district_current,'province-txt-click':index===district_current}"
@click="district_txt_click(items.id)"
v-model="items.id"
v-for="(items , index) of linkAddress_district"
>
{{items.name}}
<view class="pic" v-show="index===district_current">
<image src="../../static/xuan-linkAddress/yes.png"></image>
</view>
</view>
</scroll-view>
</view>
</view>
</view>
</view>
</view>
其他的都不用说了，重要的是循环这里。
分为 未点击样式和点击样式。通过点击元素的index和id匹配来切换状态。
需要定义的变量
data(){
return{
/*省市区选择计数*/
province_current:null,
city_current:null,
district_current:null,
/*省市区循环数据*/
linkAddress_province: [],
linkAddress_city: [],
linkAddress_district: [],
/*请求提交的*/
submission:{
province:'',//省
city:'',//市
county:'',//区
town:''//镇
},
/*用户选择的地址*/
user_address:{
province:'',//省
city:'',//市
district:''//区
},
selected_address:''
};
},
弹窗显示的时候，去请求省的数据。点击省后请求对应省份的市。
js代码 只展示点击省的操作，其他的差不多
//省点击选择
province_txt_click(target){
//区数据值为空
this.linkAddress_district= [];
//市、区的选择计数置为null
this.city_current=null;
this.district_current=null;
let province;
//得到点击的数据，改变样式
for (let i = 0; i < this.linkAddress_province.length; i++) {
if (this.linkAddress_province[i].id === target) {
this.province_current = i;
province=this.linkAddress_province[i].name;
break;
}
}
//用户选择
this.user_address={
province:province,
city:'',
district:''
}
//请求提交的数据先置为空
this.submission={
province:'',
city:'',
county:'',
town:''
};
//再赋值
this.submission.province=target;
this.selected_address=this.user_address.province;
//请求市数据
linkAddress_p.get_linkAddress(this,"city",this.submission,(revert)=>{
});
},
第三、网络请求
看官方文档的网络请求后封装一下
//网络请求
export default class Request{
/*
*paramete 拼接参数
* data 参数值
* method 请求方式
*/
http(paramete,data,method){
//根地址
let BASE_API="http://admin.farmereasy.com";
return new Promise((resolve,reject)=>{
uni.request({
url:`${BASE_API}${paramete}`,
data:data,
method:method,
success:(res)=>{
resolve(res);
},
fail:(res)=>{
resolve(0);
}
})
});
}
}
import Request from "@/static/xuan-linkAddress/request.js"
//创建Request对象
let request=new Request();
export default{
//data 参数值
get_linkAddress_api:function(data){
console.log(data);
return request.http('/api/address/area',data,'GET');
}
}
通过传入不同标签赋给不同的变量。
import api from '@/components/xuan-linkAddress/api.js';
export default {
/*
*_this:全局this
* data:数据(参数)
* callback:回掉页面
*/
get_linkAddress: function(_this,tag,data,callback) {
//请求
api.get_linkAddress_api(data).then((res) => {
let revert=res.data.data;
console.log(revert)
if(res.data.code==1){
if(tag==="province"){
console.log("province")
_this.linkAddress_province=revert;
callback(true);//回掉
}
if(tag==="city"){
console.log("city")
_this.linkAddress_city=revert;
callback(true);//回掉
}
if(tag==="district"){
console.log("district")
_this.linkAddress_district=revert;
callback(true);//回掉
}
}
});
}
}
组件就完成了，在具体的页面使用
<!-- html-->
<!-- 用于弹出底部框-->
<button class="popup-btn" @tap="popup_bottom()">请选择</button>
<!-- 选择组件 -->
<linkAddress
ref="linkAddress"
:height="height"
@confirmCallback="confirmCallback()"
>
</linkAddress>
<!-- js-->
import linkAddress from '../../components/xuan-linkAddress/xuan-linkAddress.vue'
components:{
linkAddress
},
methods: {
<!-- 点击弹出-->
popup_bottom: function() {
this.height = '550rpx';
//显示
this.show_popup();
},
<!-- 显示弹窗-->
show_popup: function() {
this.$refs.linkAddress.show();
},
<!-- 回掉-->
confirmCallback: function() {
//从vuex中取到用户选择的数据
//let ads=this.$store.state.user_address;
//this.address=ads.province+ads.city+ads.district;
}
}
最后：很简单的一个组件，刚刚开始，希望大家多多包涵，共同学习。