<view class="online-con">
<text><text style="color:red;">*</text>收 货 地 址:</text>
<text class="online-text" bindtap="selectArea" style="color:#646464; ">{{val}}</text>
<image src='images/down.png' class="imgg imgg6"></image>
</view>
<van-popup show="{{ show }}" bind:close="onClose" position="bottom">
<van-area area-list="{{ areaList }}" bind:confirm="confirm" bind:cancel="cancel" />
</van-popup>
.online-con {
width: 606rpx;
margin: 0 auto 20rpx;
font-size: 30rpx;
font-family: PingFang-SC-Medium;
font-weight: bold;
color: rgba(50, 50, 50, 1);
box-sizing: border-box;
position: relative;
}
.online-con text {
display: inline-block;
color: rgba(100, 100, 100, 1);
font-weight: 500;
}
.online-text {
display: inline-block;
width: 385rpx;
height: 60rpx;
border: 1rpx solid rgba(150, 150, 150, 0.6);
border-radius: 10rpx;
padding-left: 25rpx;
font-size: 30rpx;
font-family: PingFang-SC-Medium;
font-weight: bold;
color: rgba(100, 100, 100, 1);
line-height: 60rpx;
}
.conts {
width: 750rpx;
height: auto;
}
.areas {
width: 583rpx;
height: 114rpx;
font-size: 30rpx;
border: 1rpx solid rgba(150, 150, 150, 0.6);
margin: 0 auto;
overflow: hidden;
position: relative;
border-radius: 10rpx;
padding: 0 10rpx;
color: #646464;
}
.imgg, .imgg3, .imgg4 {
width: 23rpx;
height: 11rpx;
position: absolute;
top: 26rpx;
right: 70rpx;
}
{
"navigationBarTitleText": "新增地址",
"usingComponents": {
"van-popup": "/dist/popup/index",
"van-area": "/dist/area/index"
}
}
import province_list from '../../../utils/area.js'
Page({
/**
* 页面的初始数据
*/
data: {
areaList: [],
val: '选择/省/市/区',
show: false
},
confirm(val) {
let test = `${val.detail.values[0].name}${val.detail.values[1].name}${val.detail.values[2].name}`
console.log(test)
this.setData({
show: false,
val: test
})
console.log(val)
},
selectArea() {
this.setData({
isShow: false,
show: true,
areaList: province_list
})
},
onClose() {
this.setData({
show: false
});
},
savaData(){
this.setData({
loading:false
})
},
cancel(){
this.setData({
show: false
});
},
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
组件:https://youzan.github.io/vant-weapp/#/intro