1.效果
2.子组件在components里面创建组件AddreessWindow
html
<template>
<view style="position: relative;z-index: 999999 !important;">
<view class="address-window" :class="value === true ? 'on' : ''">
<view class="title">
<view>选择地址
</view>
<view style="position: absolute;right: 20rpx;top: 39rpx;">
<u-icon name="close" color="#666" size="20" @click="closeAddress"></u-icon>
</view>
</view>
<view class="list" v-if="addressList.length">
<view class="item acea-row row-between-wrapper" :class="item.id === checked ? 'font-color-green' : ''"
v-for="(item, addressIndex) in addressList" @click="tapAddress(addressIndex)" :key="addressIndex">
<u-icon name="map" :color="item.id === checked?'#99CC00':'#000'" size="20"></u-icon>
<!-- <text class="iconfont icon-ditu" :class="item.id === checked ? 'font-color-green' : ''"></text> -->
<view class="addressTxt">
<view class="name" :class="item.id === checked ? 'font-color-green' : ''">
{{ item.realName }}
<text class="phone">{{ item.phone }}</text>
</view>
<view class="line1"> {{ item.province }}{{ item.city }}{{ item.district }}{{ item.detail }}
</view>
</view>
<!-- <text class="iconfont icon-complete" :class="item.id === checked ? 'font-color-green' : ''"></text> -->
<u-icon name="checkmark" v-if="item.id === checked" color="#99CC00" size="20"></u-icon>
</view>
</view>
<view class="pictrue" v-if="addressList.length < 1">
<!-- <image :src="`${$VUE_APP_RESOURCES_URL}/images/noAddress.png`" class="image" /> -->
<u-empty textSize='36rpx' text="空空如也" textColor='#A8D61E' width='512' height='251' mode="list"
:icon="`${imgUrl}empty.png`"></u-empty>
</view>
<view class="addressBnt bg-color-red"
style="background-color:#99CC00 !important;color: #FFFFFF !important; font-size: 31rpx !important;"
@click="goAddressPages">新加地址</view>
</view>
<view class="mask" @touchmove.prevent :hidden="value === false" @click="closeAddress"></view>
</view>
</template>
<script>
// import { getAddressList } from '@/api/dsIndexApi.js'
export default {
name: 'AddressWindow',
props: {
value: Boolean,
checked: Number,
timer: Number
},
data: function() {
return {
imgUrl: '',
addressList: [],
current: 0,
cartId: 0,
pinkId: 0,
couponId: 0,
}
},
mounted: function() {
this.imgUrl = this.$VUE_APP_IMG_URL;
},
created() {
// console.
},
methods: {
getAddressList: function() {
let that = this;
that.addressList = [{
id: 1,
realName: '哈哈嗝',
phone: '14708291001',
province: "四川省",
city: "成都市",
district: "武侯区",
detail: "阳光大道",
},
{
id: 2,
realName: '张三',
phone: '14708291000',
province: "四川省",
city: "成都市",
district: "武侯区",
detail: "大悦城",
}
]
// getAddressList().then(res => {
// // console.log('获取地址额列表',res)
// that.addressList = res.data;
// })
},
closeAddress() {
this.$emit('input', false)
},
goAddressPages: function() {
uni.navigateTo({
url: '/pages/address/address'
})
this.$emit('redirect')
},
tapAddress: function(index) {
this.$emit('checked', this.addressList[index])
this.$emit('input', false)
},
},
watch: {
timer(e, v) {
console.log(e, v, '变换了')
this.getAddressList()
},
},
}
</script>
<style lang="scss">
.font-color-green {
color: #99CC00 !important;
}
.mask {
display: flex;
align-items: flex-end;
position: fixed;
left: 0;
top: 0px;
bottom: 0;
width: 100%;
background: rgba(0, 0, 0, 0.6);
z-index: 9995;
transition: .3s;
}
/*地址弹窗*/
.address-window {
background-color: #fff;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 10000;
transform: translate3d(0, 100%, 0);
transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}
.address-window.on {
transform: translate3d(0, 0, 0);
}
.address-window .title {
font-size: 0.32 * 100rpx;
font-weight: bold;
text-align: center;
height: 1.23 * 100rpx;
line-height: 1.23 * 100rpx;
position: relative;
color: #333;
display: flex;
align-items: center;
justify-content: center;
}
.address-window .title .iconfont {
position: absolute;
right: 0.3 * 100rpx;
color: #8a8a8a;
font-size: 0.35 * 100rpx;
}
.address-window .list {
max-height: 6 * 100rpx;
overflow-y: auto;
overflow-x: hidden;
}
.address-window .list .item {
margin-left: 0.3 * 100rpx;
padding-right: 0.3 * 100rpx;
border-bottom: 1px solid #eee;
height: 1.29 * 100rpx;
font-size: 0.25 * 100rpx;
color: #333;
display: flex;
align-items: center;
}
.address-window .list .item .iconfont {
font-size: 0.37 * 100rpx;
color: #2c2c2c;
}
.address-window .list .item .iconfont.icon-complete {
font-size: 0.3 * 100rpx;
color: #fff;
}
.address-window .list .item .addressTxt {
width: 5.6 * 100rpx;
}
.address-window .list .item .addressTxt .name {
font-size: 0.28 * 100rpx;
font-weight: bold;
color: #282828;
margin-bottom: 0.04 * 100rpx;
}
.address-window .list .item .addressTxt .name .phone {
margin-left: 0.18 * 100rpx;
}
.address-window .addressBnt {
font-size: 0.3 * 100rpx;
font-weight: bold;
color: #fff;
width: 6.9 * 100rpx;
height: 0.86 * 100rpx;
border-radius: 0.43 * 100rpx;
text-align: center;
line-height: 0.86 * 100rpx;
margin: 0.85 * 100rpx auto;
}
.address-window .pictrue {
width: 4.14 * 100rpx;
height: 3.36 * 100rpx;
margin: 0.8 * 100rpx auto;
}
.address-window .pictrue .image {
width: 100%;
height: 100%;
}
</style>3.父组件
html
<template>
<view class="container">
<view @click="skipAddress">选择地址</view>
<!-- 地址弹框 -->
<AddressWindow :timer="timer" @checked="changeAddress" @redirect="addressRedirect" v-model="showAddress"
:checked="addressInfo.id" ref="mychild"></AddressWindow>
</view>
</template>
<script>
export default {
data() {
return {
addressInfo: {},
addressLoaded: false,
timer: '',
showAddress: false,
}
},
methods:{
//选地址
skipAddress() {
this.timer = new Date().getTime();
this.showAddress = true;
if (!this.addressLoaded) {
this.addressLoaded = true
this.$refs.mychild.getAddressList()
}
},
// 控制地址弹框
addressRedirect() {
// this.addressLoaded = false
this.showAddress = false;
},
// 地址选择
changeAddress(addressInfo) {
this.addressInfo = addressInfo
// this.addressInfo.id = addressInfo.id;
console.log('地址栏11111', this.addressInfo)
//计算订单金额
// this.orderComputedAPi(this.addressInfo.id)
},
}
}
</script>