You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
139 lines
2.8 KiB
139 lines
2.8 KiB
<template>
|
|
<view>
|
|
<view class="width100 height90 headsbg backcorfff" @click="jumpupadess('add')">
|
|
<view class="height20"></view>
|
|
<view class="width90 height40 alijus font15 fcor666 border1co6">
|
|
<image mode="widthFix" class="icon30 marRight20" src="../static/imgs/add.png"></image>添加新地址
|
|
</view>
|
|
</view>
|
|
|
|
<view class="list width90 mart15" v-for="(item, index) in addressList" :key="index"
|
|
:class="chageid == item?'afterlist':'list'" @click="changemaddress(item)">
|
|
<view class="wrapper">
|
|
<view class="address-box width90 paddtop15">
|
|
<text class="address">但是放松放松放松的方式发顺丰沙发上是方式地方但是放松方式扶 门牌号</text>
|
|
</view>
|
|
<view class="u-box width90 mart10 paddbotm15">
|
|
<text class="name">名称</text>
|
|
<text class="mobile">15583658692</text>
|
|
</view>
|
|
</view>
|
|
<image src="../static/imgs/upte.png" mode="widthFix" class="icon15 marRight20"
|
|
@click.stop="jumpupadess('edit')"></image>
|
|
</view>
|
|
<view class="height70"></view>
|
|
<view class="width100 height50 dispost font15 fotct">确认</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
addressList: [1, 2, 3, 4],
|
|
chageid: '' //选中的地址
|
|
}
|
|
},
|
|
methods: {
|
|
//跳转地址
|
|
jumpupadess(item) {
|
|
uni.navigateTo({
|
|
url: '../update-address/update-address?type=' + item
|
|
})
|
|
},
|
|
//选择地址
|
|
changemaddress(item) {
|
|
if (this.chageid == item) {
|
|
this.chageid = '';
|
|
return;
|
|
}
|
|
this.chageid = item;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: #f0f0f0;
|
|
}
|
|
|
|
.headsbg {
|
|
border-radius: 0 0 30px 30px;
|
|
}
|
|
|
|
.border1co6 {
|
|
border: 1px solid #999999;
|
|
border-radius: 50rpx;
|
|
}
|
|
|
|
.icon15 {
|
|
width: 15px;
|
|
}
|
|
|
|
.icon30 {
|
|
width: 25px;
|
|
}
|
|
|
|
.list {
|
|
border-radius: 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
background: #fff;
|
|
position: relative;
|
|
}
|
|
|
|
.afterlist {
|
|
border-radius: 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
background: #fff;
|
|
position: relative;
|
|
border: 1px solid #c32a20;
|
|
}
|
|
|
|
.wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
}
|
|
|
|
.address-box {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.tag {
|
|
font-size: 24upx;
|
|
color: #999999;
|
|
margin-right: 10upx;
|
|
background: #fffafb;
|
|
border: 1px solid #ffb4c7;
|
|
border-radius: 4upx;
|
|
padding: 4upx 10upx;
|
|
line-height: 1;
|
|
}
|
|
|
|
.address {
|
|
font-size: 28upx;
|
|
color: #333333;
|
|
}
|
|
}
|
|
|
|
.u-box {
|
|
font-size: 26upx;
|
|
color: #999999;
|
|
margin-top: 16upx;
|
|
|
|
.name {
|
|
margin-right: 30upx;
|
|
}
|
|
}
|
|
|
|
.dispost {
|
|
position: fixed;
|
|
background-color: #c32a20;
|
|
bottom: 0px;
|
|
border-radius: 15px 15px 0px 0px;
|
|
color: #fff;
|
|
}
|
|
</style>
|
|
|