template:
//触发事件
<div :class="{borBm: borBm == 4}">
<span>通讯住址:</span>
<span v-if="countyName && countyName != '[请选择]'" @click="showPopup(1)">{{provinceName}}-{{cityName}}-{{countyName}}</span>
<!-- <input type="number" v-model="msg4" @click="clickList(4)" placeholder="请输入转账金额"> -->
<span v-if="!countyName || countyName == '[请选择]'" class="tar" @click="showPopup(1)">请选择<i class="mintui mintui-back" ref="arrow1"></i></span>
</div>
<mt-popup v-model="regionVisible" position="bottom" style="width: 100%">
<div class="popupTop">
<span @click="hiddenRegion">确认</span>
</div>
<div class="region" style="display: flex">
<mt-picker :slots="myAddressSlots1" valueKey="name" @change="addressChange1" :itemHeight="40" style="width: 33.33%"></mt-picker>
<mt-picker :slots="myAddressSlots2" valueKey="name" @change="addressChange2" :itemHeight="40" style="width: 33.33%"></mt-picker>
<mt-picker :slots="myAddressSlots3" valueKey="name" @change="addressChange3" :itemHeight="40" style="width: 33.33%"></mt-picker>
</div>
</mt-popup>
data:
//省
myAddressSlots1: [{
flex: 1,
values: [{
name: "北京市",
id: "1"
}], //省份数组
className: 'slot1',
textAlign: 'center'
}],
//市
myAddressSlots2: [{
flex: 1,
values: [{
name: "[请选择]",
id: "1"
}, ],
className: 'slot3',
textAlign: 'center'
}],
//县
myAddressSlots3: [{
flex: 1,
values: [{
name: "[请选择]",
id: "1"
}],
className: 'slot5',
textAlign: 'center'
}],
watch:
//通过监听制造箭头动画
watch: {
funding() {
if (this.funding) {
this.$refs.arrow.style.transform = "rotate(-270deg)"
} else {
this.$refs.arrow.style.transform = "rotate(-90deg)"
}
},
regionVisible() {
if (this.regionVisible) {
this.$refs.arrow1.style.transform = "rotate(-270deg)"
} else {
this.$refs.arrow1.style.transform = "rotate(-90deg)"
}
},
},
created:
//和android交互拿到数据
this.province = $App.getProvinceList()
this.province = JSON.parse(this.province)
this.myAddressSlots1[0].values = this.province;
methods:
addressChange1(msg, value) {
this.provinceId = value[0].id;
this.provinceName = value[0].name;
this.city = $App.getCityList(this.provinceId);
this.city = JSON.parse(this.city);
this.myAddressSlots2[0].values = this.city;
},
addressChange2(msg, value) {
this.cityId = value[0].id;
this.cityName = value[0].name;
this.county = $App.getCountryList(this.cityId);
this.county = JSON.parse(this.county);
this.county.unshift({
name: "[请选择]",
id: 0
})
this.myAddressSlots3[0].values = this.county;
},
addressChange3(msg, value) {
this.countyId = value[0].id;
this.countyName = value[0].name;
},
style:
<style lang="less" scoped>
.content {
.popupTop {
display: flex;
justify-content: flex-end;
align-items: center;
padding: 10px 15px;
span {
height: 80%; // background: #39c;
color: #fff;
color: #39c;
padding: 4px 20px;
/* prettier-ignore */
border: 1PX solid #39c;
border-radius: 3px;
}
}
.picker-toolbar {
span {
color: #ccc;
/* prettier-ignore */
border: 1PX solid #ccc;
transform: translateY(10px);
padding: 3px 15px;
font-size: 12px;
border-radius: 3px;
&:first-child {
float: left;
margin-left: 105px;
}
&:last-child {
color: #39c;
/* prettier-ignore */
border: 1PX solid #39c;
margin-right: 105px;
float: right;
}
}
}
.mint-popup {
border-top-right-radius: 8px;
border-top-left-radius: 8px;
}
.funding {
position: relative;
min-height: 250px;
padding: 25px 15px 15px; // display: flex;
// justify-content: space-between;
// flex-wrap: wrap;
>div {
width: 100%;
height: 40px;
line-height: 40px;
/* prettier-ignore */
border-bottom: 1PX dashed #ccc;
margin-bottom: 5px;
}
i {
/* prettier-ignore */
border: 1PX solid #ccc;
position: absolute;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
top: 9px;
right: 9px;
border-radius: 50%;
color: #ccc;
}
}
.tar {
position: relative;
text-align: right;
color: #555 !important;
padding-right: 25px;
box-sizing: border-box;
i {
position: absolute;
right: 0;
transition: all .3s;
transform: rotate(-90deg);
color: #ccc;
}
}
.borBm {
/* prettier-ignore */
border-bottom: 1PX solid #4caf50 !important;
}
.passWord {
min-height: 300px;
div {
padding: 0 15px;
&:nth-child(1) {
padding-top: 30px;
text-align: center;
input {
width: 250px;
/* prettier-ignore */
border: 1PX solid #ccc;
height: 30px;
border-radius: 5px;
text-align: center;
color: #666;
}
} // &:nth-child(2) {}
&:nth-child(3) {
p {
text-indent: 2em;
}
}
}
}
.body {
padding: 0 15px;
background: #fff;
padding-bottom: 15px;
>p {
color: #ff00008a;
text-indent: 2em;
padding: 30px 0;
}
.textarea {
span {
color: #333;
font-size: 16px;
display: block;
margin: 15px 0;
}
textarea {
box-shadow: 0 0 5px #eee;
padding: 5px;
width: calc(100% - 10px);
/* prettier-ignore */
border: 1PX solid #eee;
font-size: 14px;
outline: none;
color: #555; // text-indent: 2em;
}
}
.info {
div {
height: 50px;
line-height: 50px;
/* prettier-ignore */
border-bottom: 1PX solid #eee;
overflow: hidden;
font-size: 16px;
span {
float: left;
color: #333;
&:last-child {
float: right;
width: 220px;
}
}
input {
height: 100%;
float: right;
width: 220px;
&::placeholder {
font-size: 16px;
}
}
}
}
}
}
</style>